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 WebSave 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 SizeW & 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 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.

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: JPGQuality 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: JPGI 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-8Dette 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-8Colors: 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 linjenføres.

Corner point: Linjen går lige ind og lige ud af

punktet.

Smooth point: Linjen bøjes af to håndtag I

punktet.