際際滷

際際滷Share a Scribd company logo

Filformater - 際際滷s p奪 dansk om forskellige filformater og Save for Web

Download as PPTX, PDF
A
Andreas Thorngreen

Danish slides used for Danish classes at Business Academy Dania in Grenna and Business Academy Aarhus.

1 of 23
Download to read offline
Filformater
Filformater: Hvad er m奪let? Kvalitet: Billedet skal bevare sin kvalitet s奪 meget om muligt. Filst淡rrelse: Billedets filst淡rrelse skal v脱re s奪 lille som muligt for downloadhastigheden om at g淡re. Ergo: S奪 lille en fil som muligt idet kvaliteten bevares.
Filformater: Oversigt JPEG: Godt til fotografier Kan vise millioner af farver Ingen transparens GIF og PNG-8 Godt til logoer og tegninger med f奪 farver Kan vise 256 farver Transparens: Gennemsigtig eller ikke-gennemsigtig IKKE til fotos! PNG-24 Kan bruges til b奪de fotos og tegninger Transparens: Semi-transparens mulig Godt til tegninger, fotos og loger der kommer til at overlappe andre dele i en hjemmeside eller andre steder hvor elementer overlapper hinanden dynamisk. Relativt stor fil
Save for Web
Save for Web Save for Web giver os mulighed for at gemme en optimeret kopi af det vi har lavet med den mindst mulige filst淡rrelse, der samtidig bevarer billedets kvalitet. Filformat og kompression Billedets dimensioner Visning: Original version Optimeret version Original og optimeret over for hinanden (2-Up) Fire versioner (4- Up) Filst淡rrelse
Save for Web: Image Size W & H: Her kan vi indstille billedets bredde og h淡jde A.k.a.: Billedets dimensioner L脱nken betyder at proportionerne ikke 脱ndres, hvis et af tallene脱ndres. Og Gud ske lov for det!
Save for Web: Image size Det g淡r en forskel hvilken st淡rrelse billedet skal bruges i: Et lille billede p奪 en hjemmeside? Et stort billede p奪 en hjemmeside? Et stort billede p奪 en plakat ved busstoppestedet? En hel bygning p奪 Times Square? Derfor: Zoom endelig ind n奪r du gemmer for web, men er det det folk kommer til at se i sidste ende?
Advarselsintermezzo Husk: Vrid et billede og d淡!! Ceci nest pas arri Potter! Voil叩! Ceci est certainement la vraie arri Potter! Jeg har ikke f奪et lov til at bruge dette billed i mine slides af copyrightindehaveren, s奪 hvis I nu bare lige g奪r ud og k淡ber noget Harry Potter merchandise og gemmer bonen, s奪 kan jeg afvise advokaterne med at der jo var tale om gratis reklame, som de jo I 淡vrigt ikke skulle betale noget for. Jow jow.
Save for Web: JPG V脱lg filformat her. Mulighederne脱ndres n奪r der 脱ndres filformat. Quality: Skru ned for den ind til du finder det sted hvor filformatet og kvaliteten er optimal.
Save for Web: JPG Quality 0: Her kan man tydeligt se hvor grimt det bliver, n奪r Quality s脱ttes ned. Jeg har sat billedst淡rrelsen ned for yderligere at tydeligg淡re forskellen. Her kan man se filst淡rrelsen p奪 originalbilledet og p奪 den optimerede version. Der er tilmed angivet downloadhastighed p奪 et 56,6 kbps modem.
Save for Web: JPG I det her tilf脱lde og til den her st淡rrelse passed Quality 28 fint. Blur: Jeg har eksperimenteret med det, men min erfaring er, at det 淡del脱gger billedet meget og kun giver minimal optimering af filst淡rrelsen. Save: bner en dialogboks til at gemme, og s奪 kender du resten ,
Save for Web: GIF og PNG-8 Dette billede er mere simpelt og kalder p奪 GIF. GIF og PNG-8 har same indstillinger og giver samme resultat. Her optimerer man ved at lade filen have f脱rre farver at lave billedet med. Max. er 256, min. er 2. Matte: Her kan man s脱tte en farvet kant p奪, s奪 det passer med baggrunden. Men det har en tendens til at v脱re lidt s淡gt. Transparency: Hvis noget af billedet er gennemsigtigt er det endelig om at sl奪 det til. GIF og PNG-8 har dog kun simpel transparens til eller fra.
Save for Web: GIF og PNG-8 Colors: 4 Dette er tydeligvis ikke nok til at repr脱sentere billedet ordentligt. Colors: 8 Nu g奪r det bedre. Men hallo: Der er jo hakker i kanterne!
Save for Web: GIF og PNG-8 Colors: 16 Vi er stadig p奪 rette vej, men den er ikke helt i m奪l. Colors: 32 S奪dan venner! Nu ligner den originalen.
Save for Web: GIF og PNG-8 Tadaa: Og her er s奪 fremragende 2 farver til at repr脱sentere Photoshop logoet. N淡j slap dog af det g奪r godt!!
Save for Web: PNG-24 PNG-24 er et rigtigt godt format til transparenseffekter p奪 en hjemmeside: Gennemsigtige dele af en hjemmeside: Sku ned for et lags opacity, slet baggrunden og Save for Web i PNG-24. Gradienter der g奪r gradvist fra solid til gennemsigtig. Enhver anden kreativ brug af transparens. Hvorfor transparens n奪r man kan lave et JPG med den rette baggrund? Det kan v脱re godt hvis billedet p奪 et responsivt website layout kommer til at overlappe noget andet.
Save for Web: PNG-24 En lidt mere fredelig samling indstillinger. PNG-24 kan ikke optimeres, s奪 fordelene ved at f奪 transparenseffekterne skal opvejes over for filst淡rrelsen man f奪r ud af det. S奪 hold 淡je med den! Vi har dog Transparency og Matte at g淡re godt med. Men Matte giver ikke mening hvis vi 淡nsker transparenseffekterne.
Save for Web: PNG-24 Dette billede har en bl淡d overgang I kanten. Dette kan kun repr脱senteres 脱gte med PNG- 24.
Vektor vs. Bitmap
Vektor vs. Bitmap Vektorgrafik: Baseret p奪 kalkulationer og kan derfor g淡res s奪 store som man 淡nsker, uden at miste kvalitet. Bitmapgrafik: Baseret p奪 pixels. G淡res det st淡rre bliver det pixeleret, dvs. grimt og kantet.
Illustrator vs. Photoshop Illustrator arbejder med VEKTORGRAFIK Photoshop arbejder med BITMAPGRAFIK
At arbejde med bitmapgrafik S淡rg altid for at have s奪 store versioner som muligt! IKKE g淡re billedet mindre f淡r du arbejder p奪 det. Arbejd f脱rdig med billedet og gem s奪 en kopi via Save for Web
At arbejde med vektorgrafik Man arbejder med paths og kontrolpunkter kaldet anchor points. Anchor points bestemmer hvordan linjen f淡res. Corner point: Linjen g奪r lige ind og lige ud af punktet. Smooth point: Linjen b淡jes af to h奪ndtag I punktet.

More Related Content

Filformater - 際際滷s p奪 dansk om forskellige filformater og Save for Web

  • 2. Filformater: Hvad er m奪let? Kvalitet: Billedet skal bevare sin kvalitet s奪 meget om muligt. Filst淡rrelse: Billedets filst淡rrelse skal v脱re s奪 lille som muligt for downloadhastigheden om at g淡re. Ergo: S奪 lille en fil som muligt idet kvaliteten bevares.
  • 3. Filformater: Oversigt JPEG: Godt til fotografier Kan vise millioner af farver Ingen transparens GIF og PNG-8 Godt til logoer og tegninger med f奪 farver Kan vise 256 farver Transparens: Gennemsigtig eller ikke-gennemsigtig IKKE til fotos! PNG-24 Kan bruges til b奪de fotos og tegninger Transparens: Semi-transparens mulig Godt til tegninger, fotos og loger der kommer til at overlappe andre dele i en hjemmeside eller andre steder hvor elementer overlapper hinanden dynamisk. Relativt stor fil
  • 5. Save for Web Save for Web giver os mulighed for at gemme en optimeret kopi af det vi har lavet med den mindst mulige filst淡rrelse, der samtidig bevarer billedets kvalitet. Filformat og kompression Billedets dimensioner Visning: Original version Optimeret version Original og optimeret over for hinanden (2-Up) Fire versioner (4- Up) Filst淡rrelse
  • 6. Save for Web: Image Size W & H: Her kan vi indstille billedets bredde og h淡jde A.k.a.: Billedets dimensioner L脱nken betyder at proportionerne ikke 脱ndres, hvis et af tallene脱ndres. Og Gud ske lov for det!
  • 7. Save for Web: Image size Det g淡r en forskel hvilken st淡rrelse billedet skal bruges i: Et lille billede p奪 en hjemmeside? Et stort billede p奪 en hjemmeside? Et stort billede p奪 en plakat ved busstoppestedet? En hel bygning p奪 Times Square? Derfor: Zoom endelig ind n奪r du gemmer for web, men er det det folk kommer til at se i sidste ende?
  • 8. Advarselsintermezzo Husk: Vrid et billede og d淡!! Ceci nest pas arri Potter! Voil叩! Ceci est certainement la vraie arri Potter! Jeg har ikke f奪et lov til at bruge dette billed i mine slides af copyrightindehaveren, s奪 hvis I nu bare lige g奪r ud og k淡ber noget Harry Potter merchandise og gemmer bonen, s奪 kan jeg afvise advokaterne med at der jo var tale om gratis reklame, som de jo I 淡vrigt ikke skulle betale noget for. Jow jow.
  • 9. Save for Web: JPG V脱lg filformat her. Mulighederne脱ndres n奪r der 脱ndres filformat. Quality: Skru ned for den ind til du finder det sted hvor filformatet og kvaliteten er optimal.
  • 10. Save for Web: JPG Quality 0: Her kan man tydeligt se hvor grimt det bliver, n奪r Quality s脱ttes ned. Jeg har sat billedst淡rrelsen ned for yderligere at tydeligg淡re forskellen. Her kan man se filst淡rrelsen p奪 originalbilledet og p奪 den optimerede version. Der er tilmed angivet downloadhastighed p奪 et 56,6 kbps modem.
  • 11. Save for Web: JPG I det her tilf脱lde og til den her st淡rrelse passed Quality 28 fint. Blur: Jeg har eksperimenteret med det, men min erfaring er, at det 淡del脱gger billedet meget og kun giver minimal optimering af filst淡rrelsen. Save: bner en dialogboks til at gemme, og s奪 kender du resten ,
  • 12. Save for Web: GIF og PNG-8 Dette billede er mere simpelt og kalder p奪 GIF. GIF og PNG-8 har same indstillinger og giver samme resultat. Her optimerer man ved at lade filen have f脱rre farver at lave billedet med. Max. er 256, min. er 2. Matte: Her kan man s脱tte en farvet kant p奪, s奪 det passer med baggrunden. Men det har en tendens til at v脱re lidt s淡gt. Transparency: Hvis noget af billedet er gennemsigtigt er det endelig om at sl奪 det til. GIF og PNG-8 har dog kun simpel transparens til eller fra.
  • 13. Save for Web: GIF og PNG-8 Colors: 4 Dette er tydeligvis ikke nok til at repr脱sentere billedet ordentligt. Colors: 8 Nu g奪r det bedre. Men hallo: Der er jo hakker i kanterne!
  • 14. Save for Web: GIF og PNG-8 Colors: 16 Vi er stadig p奪 rette vej, men den er ikke helt i m奪l. Colors: 32 S奪dan venner! Nu ligner den originalen.
  • 15. Save for Web: GIF og PNG-8 Tadaa: Og her er s奪 fremragende 2 farver til at repr脱sentere Photoshop logoet. N淡j slap dog af det g奪r godt!!
  • 16. Save for Web: PNG-24 PNG-24 er et rigtigt godt format til transparenseffekter p奪 en hjemmeside: Gennemsigtige dele af en hjemmeside: Sku ned for et lags opacity, slet baggrunden og Save for Web i PNG-24. Gradienter der g奪r gradvist fra solid til gennemsigtig. Enhver anden kreativ brug af transparens. Hvorfor transparens n奪r man kan lave et JPG med den rette baggrund? Det kan v脱re godt hvis billedet p奪 et responsivt website layout kommer til at overlappe noget andet.
  • 17. Save for Web: PNG-24 En lidt mere fredelig samling indstillinger. PNG-24 kan ikke optimeres, s奪 fordelene ved at f奪 transparenseffekterne skal opvejes over for filst淡rrelsen man f奪r ud af det. S奪 hold 淡je med den! Vi har dog Transparency og Matte at g淡re godt med. Men Matte giver ikke mening hvis vi 淡nsker transparenseffekterne.
  • 18. Save for Web: PNG-24 Dette billede har en bl淡d overgang I kanten. Dette kan kun repr脱senteres 脱gte med PNG- 24.
  • 20. Vektor vs. Bitmap Vektorgrafik: Baseret p奪 kalkulationer og kan derfor g淡res s奪 store som man 淡nsker, uden at miste kvalitet. Bitmapgrafik: Baseret p奪 pixels. G淡res det st淡rre bliver det pixeleret, dvs. grimt og kantet.
  • 21. Illustrator vs. Photoshop Illustrator arbejder med VEKTORGRAFIK Photoshop arbejder med BITMAPGRAFIK
  • 22. At arbejde med bitmapgrafik S淡rg altid for at have s奪 store versioner som muligt! IKKE g淡re billedet mindre f淡r du arbejder p奪 det. Arbejd f脱rdig med billedet og gem s奪 en kopi via Save for Web
  • 23. At arbejde med vektorgrafik Man arbejder med paths og kontrolpunkter kaldet anchor points. Anchor points bestemmer hvordan linjen f淡res. Corner point: Linjen g奪r lige ind og lige ud af punktet. Smooth point: Linjen b淡jes af to h奪ndtag I punktet.