toppdesign
   Elisabeth Mölbach Design
design-strek  Elisabeth Mölbach Design  design-strek
GRAFISK DESIGN
WEBDESIGN
INFORMASJON
kontaktinformasjon
tjenester
kunder
tips & triks
nyttige lenker
ENGLISH

> FORSIDEN > INFORMASJON > TIPS & TRIKS: Om farger - Om filformater - Om billedoppløsning

Tips & triks

Om farger

Forståelsen av hva farger er som fysisk fenomen kan bidra til at man får bedre fargegjengivelse av fotografier og andre bilder på trykk eller på skjerm.

Farger gjengitt via lys, slik som bilder på skjerm er et annet fysisk fenomen enn farger gjengitt med pigment - på papir.

Det additive og det subtraktive fargesystem

Det additive fargesystem er farger gjengitt via lys. Det baserer seg på tre primærfarger: rødt grønt og blått (RGB). I forskjellige blandinger kan disse tre gjengi alle farger. Maksimal lysstyrke av alle tre gir hvitt, derfor betegnelsen additivt. Fravær av alle tre gir intet lys, derfor sort.

Det subtraktive fargesystem er farger gjengitt via pigment. Det baserer seg på de tre primærfargene cyan, magenta og gult (yellow). I forskjellige blandinger kan disse tre gjengi alle farger. Fravær av alle tre gir ingen farge eller hvitt, derfor betegnelsen subtraktivt. Lik mengde av alle tre gir i teorien fargen sort. Teorien stemmer ikke helt med virkeligheten og det som skulle bli sort blir isteden gråbrunt. Derfor bruker man også sort som egen farge når man trykker i farger, og fargene blir cyan, magenta, yellow og black (CMYK).

Som man ser av de to figurene under så henger disse to fargesystemene logisk sammen. Ved å blande rødt og blått lys får man et magentafarget lys og ved å blande like deler cyan og magenta fargepigment får man trykkfargen blå, osv.

rgb_cmyk

Digitaliserte bilder

Når man fotograferer med digtalt kamera er det lyset som brukes til å lese inn eller beskrive fargene. Det samme er tilfelle når man skanner, skanneren sender sterkt lys over eller igjennom bildet og leser av fargene. Slik vil digitale fotografier og ubehandlede skanninger være RGB-kodet.

Når man åpner en ubehandlet billedfil i Photoshop eller et annet billedbehandlings- program vil det fremgå at fargene i bildet er kodet som RGB-farger. Hvis man skal bruke bildet i en trykksak må bildet konverterers til CMYK, ellers vil fargene bli feil ved utskrift, fordi skriveren er pigmentbasert (blekk, voks eller pulver). Konverteringen fra RGB til CMYK gjør man i Photoshop eller et tilsvarende billedbehandlingsprogram.

Hvis man skal bruke et bilde både i en skjermvisning (f.eks. Internett eller Powerpoint) og i en trykksak må man ha TO versjoner av samme bilde, ett i RGB og ett i CMYK. Disse to versjonene bør også ha forskjellig oppløsning.

Til toppen av siden

Om filformater for bilder

Det eksisterer to grunnleggende forskjellige prinsipper for lagring av billeddata på filer, vektorformat og rastrert format.

Vektor

I vektorformatet er det matematiske formler som beskriver bildet. F.eks. vil en sort, buet strek være beskrevet med følgende data:
• et aksepunkt for startpunkt
• ett for sluttpunkt
• en angivelse av linjetykkelsen
• en formel for buens krumning
Vektorformatet er således fritt skalerbart, det er oppløsningsuavhengig. Vekttorformatet brukes ofte til grafiske fremstillinger/diagrammer, kart og logoer.

Raster

I det rastrerte formatet er bildet delt opp i et visst antall like små, kvadratiske «punkter» (eller dots eller pixler). Disse skal være så små at de ikke oppleves som punkter av øyet, kun hvis man forstørrer bildet betraktelig. Hvert punkt har kun en farge.

Hvor mange punkt det er på en cm eller tommes lengde beskriver bildets oppløsning. Et bilde på 1x1 cm vil ha 118 punkter/pixler i bredden og det samme i høyden hvis oppløsningen er 118 punkter pr cm. Og 118 punkter pr cm tilsvarer 300 punkter pr tomme (inch). I trykksaksammenheng er det mest vanlig å bruke tommer som enhet, og billedoppløsningen betegnes som «dots per inch», (forkortet dpi) eller «punkter per inch» (ppi). Se avsnittet om oppløsning lenger ned på siden.

Til toppen av siden

Filnavn/filtyper

TIF eller TIFF (Tagged Image File Format)
Dette er et verdensledende filformat for lagring av rastrerte billedfiler med god kvalitet. Bildene blir lite eller ikke komprimert, dvs all billeddata bevares. Billedfilen blir derfor relativt stor/tung. TIF-formatet er mye brukt ved trykk-produksjon av bilder.

JPG eller JPEG (Joint Photographic Experts Group)
Dette er standard filformat for lagring av komprimerte rastrerte billedfiler. Komprimeringen foregår etter matematiske beregninger som reduserer bildets filstørrelse betraktelig. Ofte sees komprimeringsresulltatet i overgangen mellom to forskjellige farger, særlig hvis man forstørrer bildet. Når et bilde blir komprimert blir det fjernet informasjon fra bilde og kvaliteten blir dermed forringet. Fordelene med å komprimere et bilde er at det bruker mindre minne (RAM) og mindre plass på harddisken Graden av komprimering bestemmes når man lagrer bildet for første gang, men for hver gang bildet endres i et billedbehandlingsprogran (f.eks. Photoshop) vil ytterligere billedinformasjon gå tapt. JPG-formatet brukes både ved trykk-produksjon og på Internett, men ved trykking på fargemoduset være CMYK og på Internett eller skjermvisning må fargemoduset være RGB.

GIF (Graphic Interchange Format)
Dette filformatet brukes først og fremst på bilder som skal på Internett. GIF-formatet lagrer ikke flere farger enn de som er i bruk, så filene blir små. Formatet egner seg derfor til «flate» bilder uten for mange fargeoverganger og nyanser, slik som konturtegninger, diagrammer, logoer og kart. GIF-filene KAN ha transparente partier og animasjoner.

BMP (BitMap Picture)
Dette filformatet brukes mest i Microsoft Windows-sammenhenger. Formatet er ukomprimert og man får relativt store filer.

Til toppen av siden


PSD (PhotoShop Document)
I tillegg så kan det dukke opp filer med denne betegnelsen. Det er Adobe Photoshop sitt eget filformat. Har du ikke dette programmet, er det lite trolig du vil kunne se bildet. Andre billedbehandlinsprogrammer har sine egne filformater, PaintShop Pro har PSP. Disse formatene benyttes bare når en jobber med bilder. Filene kan bli veldig store alt etter hvor mye informasjon vi har lagt til bildet. Med informasjon mener man tekst, hvor mange lag bildet består av, om man har brukt effekter på det og så videre.

WMF (Windows MetaFile)
Dette har tradisjonelt vært Microsoft Windows sitt vektorformat, mest brukt til logoer.

EMF (Enhanced MetaFile)
Dette er en forbedret utgave av WMF og egner seg for vektor-figurer som skal inn i et Microsoft Office-program.

EPS (Encapsuled PostScript), også benevnt illustrator eps
Dette er det vanligste vektorformatet og brukes som standard filformat for logoer som skal trykkes. Filen er altså oppløsningsuavhengig, figuren kan forstørres til å dekke en hel vegg uten å bli mere hakkete eller grovkornet. Kart, diagrammer og andre skjematiske fremstillinger blir best med dette formatet, og det kan dessuten godt brukes til tekst og tabeller.

SWF
Dette er filformatet til Macromedia Flash. Det er et vektorformat, et av de ytterst få vektorformatene for internett. Flash brukes først og fremst til animasjoner, men kan også brukes til statiske, fortrinnsvis «flate» bilder.

Internett

Hvis et bilde skal legges ut på Internett bør man vanligvis holde seg til enten JPG- eller GIF-formatene. Generelt kan man si at fotografier bør ha JPG-format og figurer med rene fargeflater, så som diagrammer og logoer, bør har GIF-format.

Bildet bør ha skjermoppløsning (72 dpi eller 96 dpi) og være optimalisert for Internett. Dette er en prosedyre som man trenger programvare for å utføre, f.eks. Adobe PhotoShop eller Fireworks.

Filstørrelsen blir kraftig redusert ved optimalisering. Et eksempel: Et bilde på 10x10cm i 72dpi (eller sagt på en annen måte: 283x283 pixler) blir på 224kB når man lagrer det som jpg-fil med beste kvalitet. Hvis man velger en middels kvalitet vil bildet bli på 76kB hvis man lagrer det fra Photoshop på vanlig måte ("lagre som"), men kun på 28kB hvis man lagrer det med optimaliseringsfunksjonen "lagre for web".

Til toppen av siden

Om billedoppløsning og billedstørrelser

Stadig flere skaffer seg digitale kameraer og tar bilderselv. Her kommer noen betraktninger om hvor store slike bilder bør være for å ha bra nok kvalitet til å trykkes.

Begrepene oppløsning, pixler og dpi

Alle bilder som skal inn i en trykksak eller vises på skjerm må først digitaliseres ved f.eks. å skannes slik at de blir datafiler. Fotografier tatt med digitalt kamera er allerede datafiler.

Alle billedfiler har en eller annen oppløsning, dvs. en grad av kornethet, grov eller fin, som bestemmer hvor stort bildet kan gjengis. Kornetheten benevnes som pixler, billedpunkter eller dots (eng). Den vanligste måten å benevne en billedfils størrelse er med kombinasjonen cm eller mm og dpi (dots per inch).

Oppløsning for skjerm eller trykk/print

Hvis bildet skal brukes i en trykksak bør oppløsningen være 300dpi i ønsket cm-størrelse. Hvis man bare skal bruke bildet på skjermen (f.eks. til PowerPoint eller Internett) trenger ikke oppløsningen være høyere en 96 (eller 72) dpi.

Hvis man forstørrer et bilde uten at det har tilstrekkelig oppløsning vil billedpunktene bli fremtrendende som firkanter i alle fargeoverganger.

Eksempel på størrelse

Databilledfiler kan ha sin størrelse angitt med antall pixler, og dette sier noe om hvor stort bildet kan gjengis på skjerm eller papir med rimelig god kvalitet.

Et bilde som er 10x10 cm og har oppløsning på 300dpi har en pixelstørrelse på 1181x1181px. Lagret som .jpg-fil med beste kvalitet vil bildet oppta ca 1,5MB lagringsplass. Hvis man går ned i oppløsning til 200 dpi (bra nok for en vanlig skriver-utskrift, men ikke egentlig bra nok for trykking i publikasjon) vil pixelstørrelsen bli 787x787px.

Til toppen av siden

Om webdesign

Det viktigste når man skal bygge et nettsted er at formen følger etter innholdet og funksjonen (Form Følger Funksjon). Derfor er man nødt til å bruke tilstrekkelig tid i forkant til å gjennomtenke HVORFOR man skal ha et nettsted, HVEM man ønsker å nå og HVA man er ute etter å oppnå med nettsidene. Først når dette er gjort kan man få en formening om hvordan nettstedet skal være. Et godt forstudium når man skal lage nettsider er å se på hva andre gjør. Særlig er det lurt å studere nøye hvordan liknende virksomheter som ens egen bruker nettsidene. Her er det ofte mye å lære, både om hva man selv kunne tenke seg, og hva man IKKE vil ha.

Så bør man begynne å lage en skjematisk skisse over nettstedet, et visuellt kart, noe liknende av et organisasjonskart. Tenk deg at HJEM-siden, den første siden man møter, er toppsjefen i organisasjonen, og at områdene eller sjangrene på nettstedet ditt har hver sin områdesjef. Hvordan er det naturlig å dele inn nettstedet? Hvordan skal informasjonen best organiseres? Her er det naturlig at man søker hjelp hos noen som har gjort dette før. Men jo mere man har tenkt selv på forhånd, jo mindre penger trenger man å bruke på en ekstern webdesigner!

Om søkemotoroptimalisering

Når man lag nettsider er det mange forskjellige faktorer som avgjør om dette blir vellykket. Nettsider skal selvfølgelig, som alt informasjonsmateriell, være pent, innbydende og lettleselig, men i tillegg skal sidene være lette å finne på nettet. Den delen av faget WEBDESIGN som gjør at nettsider kommer høyt opp på listen når man "googler" kalles søkemotor-optimalisering, også kjent som SMO og SEO. Mange webdesignere bruker alle sine evner og all sin tid på å lage et nettsted som er vakkert og stilig, og glemmer denne siste biten av jobben. Søkemotoroptimaliseringen er heller ikke merkbar for kunden i første omgang, så det er slett ikke lett å vite hvordan man som kunde skal vurdere webdesignerens kompetanse på dette feltet. I en verden som blir mer og mer digitalisert kan det være fatalt for en bedrift å havne for langt ned i nett-søk.

Reglene for hvordan google og andre søkemotorer velger hvordan de skal rangere alle treffene i et søk er i stadig endring. Nylig fant jeg en lenke om endringene som vil bli gjennomført i 2014: http://blog.creativepundits.com/the-ever-changing-face-of-seo/ Årsaken til at disse reglene er i stadig endring er at Google vil hindre at noen misbruker reglene ved å bygge nettsider som er spesialtilpasset Googles optimalireringsragler. Likevel er mange regler stabile, f.eks. er det alltid en god idé å la de enkelte html-sidene hete det samme som hovedinnhildet på siden, f.eks. filleryer.html

Hvis du er interessert i å lese mer om søkemotoroptimalisering er først og frems w3-konsortium og Leary-guruene, slik jeg ser det. Her er noen interessante lenker (på engelsk):
Google: https://support.google.com/webmasters/answer/35291?hl=en og https://support.google.com/webmasters/answer/35769
Simply easy learning: http://www.tutorialspoint.com/seo/seo-useful-resources.htm
World Wide Web Consortium (W3C), http://www.w3.org/
Wikipedia: http://en.wikipedia.org/wiki/Search_engine_optimization

Til toppen av siden

Reklame

 Gå til Balder Tekstil!
 Gå til Filosofere sammen!
 Gå til Sandgrund Lars Lerin!

Valid HTML 4.01 og CSS!

| FORSIDEN | PORTFOLIO GRAFISK DESIGN | PORTFOLIO WEBDESIGN | INFORMASJON |

SITEMAP

designstrek_bunn  designstrek_bunn  designstrek_bunn

ORGANISASJONSNR.: 981 131 932 – TLF.: (+47) 930 32 140