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

1. Filformater

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

4. Save for Web

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 n’est 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
bon’en, 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.

19. Vektor vs. Bitmap

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.