Grafiske aspekter

Tags:    html
Skrevet af Bruger #320 @ 31.03.2002
Grafiske aspekter - part 1

I min artikel vil jeg skrive lidt om grafik. Artiklen henvender sig nok mest til dem der er meget dårlige til grafik, og derfor gerne vil have nogle tips og tricks, samt en beskrivelse på hvad grafik egentlig er.

Jamen, lad os da komme igang....

Jah, nu er det vist på tide at komme igang, men inden da vil jeg dog lige gennemgå, hvad jeg vil skive om.
  • Introduktion til grafik
  • Grafiske formater
  • Øhh, sagde du transparent?
  • Tips/tricks
  • Afslutning

Introduktion til grafik

Her i første afsnit vil jeg komme med en lille introduktion.

Grafik er et billede som kan laves på papir og scannes ind, eller du kan lave det på computeren. Jeg vil klart anbefale det sidste. Det er faktisk utrolig let at lave pæn grafik. Specielt hvis du har et ordenligt program. Et par gode bud ville være PhotoShop version 6/7 fra Adobe, eller måske PaintShopPro, også kaldet PSP fra JASQ SoftWare. Du kan downloade en trial af PhotoShop. Ulempen ved dette er dog at du så ikke kan gemme filerne. Det kandu til gendgæld i en trial af PSP, og den trial varer i 30 dage, hvorefter du så må registrere programmet. Efter dette kan du så bruge programmet kvit og frit.


Grafiske formater

Jaja, det er da meget godt at kunne alt den der teori, men den nytter jo ikke en skid, når man ikke kan lave det om til praksis.

Der er rigtig mange forskellige grafik-formater. Dog er der kun et par stykker der bruges til web-grafik. Disse er .gif, .jpg, .png, .ico, .bmp

.gif er det mest udbredte grafikformat, da det eneste der kan bruges til animationer (kommer vi til senere) og et af de eneste der kan være transparent (kommer vi også til senere). .gif formatet har bare den ulempe, at hvis man vil optimere den, så den fylder mindre, har den det med at bliver MEGET grim, kantet og sløret.

.jpg er det format jeg foretrækker. Det kan komprimeres til at fylde meget lidt, uden stort set at røre noget som helst ved kvaliteten. Faktisk bliver billederne komprimeret HVER gang de gemmes i en .jpg fil, hvilket gør kvaliteten dårligere, siger eksperterne. Er dog ikke enig. Jeg synes personligt ikke at billedekvaliteten bliver ringere. Et .jpg billede kan indeholde op til 16 millioner farver

.png er også en udbredt format. Da der i 1994 var snak om at opkræve penge, for at kunne lave .gif filer, udsendte man formatet .png som et slags gratis alternativ. Ligesom .gif kan .png laves transparent (jaja, det kommer vi til senere). .png indeholder det bedste fra .jpg og .gif og lidt til. Et .png billede er at foretrække frem for et .gif billede. Det fylder næsten altid mindre, og bliver ikke ligeså ringe når det komprimeres.

.ico er det format der bruges til at lave faviconer til. Et favicon kan ses når siden er tilføjet til "Foretrukne". Hvis en grafik-fil har formatet .ico kan det ikke bruges til almindelig web-grafik, men kun som ikoner til "Foretrukne". Det skal dog også lige siges at når man laver ikoner til fx. Delphi-programmer bruges der .ico filer. .ico filer er altså en god til at kende lidt til.

.bmp er en bitmap fil. .bmp filer anbefaler jeg at du holder dig LANGT væk fra. De fylder meget, og hvis du skal have nogle "rigtige" .bmp filer, skal de faktisk laves i MicroSoft Paint, hvilket er et program der ikke er værd at skrive hjem om. Hvis du gemmer filer i de program, kan der max være 256 farver i en bitmap-fil. Så derfor: hold dig langt væk fra dette format!!


Øhh, sagde du transparent?

Jah, så kom det endelig. Afsnittet om transparente gif-filer. En transparent .gif fil er en grafik-fil uden baggrund, for at sige det lige ud. Faktisk er der en baggrund, men den er gennemsigtig. Nå du laver gennemsigtige baggrunde, kan grafikken ses perfekt på alle former for baggrunde. Dog skal du lige skrive dig bag øret, at transparente gif-filer har det med at fylde. Faktisk rigtig meget. Jeg bruger dem sjældent, da jeg aldrig bruger en flerfarvet baggrund. Men har du en flerfarvet baggrund, kan du med fordel anvende transparente gif-filer. Og husk lige at .png formatet også kan være gennemsigtigt. Transparente filer er faktisk noget der kan pisse mig af. Hvis du bruger fx. PSP er du NØDT til at bruge Optimizing for at kunne gemme som en transparent fil. Ellers lægger den en hvid baggrund på.

Tips/tricks

Nå du så skal til at lave lidt sej web-grafik, er der en par ting du skal huske på:


Noget af det mest irriterende er når manskal hente et stykke grafik på 300 kb. Nettets brugere er nogle af de mest utålmodige. Hvis de ikke ser siden med det samme, skrider de igen. De gider ikke vente på at siden er 30 sek. om at blive loadet. Så derfor, hold dig små grafik-stykker. Optimer dem eventuelt i PSP eller PhotoShop, for at tage lidt af størrelsen. Jo mindre jo bedre.


Vi skal lige have lidt bevel, emboss og lidt blur. Nu vi er i gang skal vi da osse lige haft lidt drop shadow og sunburst, og vi kan da også lige tage scan-lines og clouds. Sådan tænker mange. Prøv at lade være med at have alt for mange effekter på dit billede. Få effekter er bedre, især hvis man kan få dem til at spille godt sammen. "For mange kokke fordærver maden", kan i dette tilfælde oversættes til: "For mange effekter ødelægger grafikken".


Når du nu skal til at lave lidt grafik, så tænk over hvad du egentlig vil lave. Sæt dig ned og tegn dit grafik på et stykke papir. Tænk over hvilke effekter der vil gøre det godt sammen. Husk også at tænke lidt på størrelsen. Igen, husk at holde størrelsen nede. Eksperimenter bpde med .gif, .jpg og .png formatet, og se hvilket der passer dig bedst.

Afslutning

Det var så første part af min grafik-artikel. I 2. part skal vi til at kigge lidt på lag og screenshots, samt se lidt på hvordan du laver et image-map. Så husk at følge med. Artiklen vil komme indenfor overskuelig tid. God fornøjelse med at lave grafik :)



Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Kommentarer (5)

User
Bruger #3876 @ 08.03.04 12:19
Hej! ok artikel, men jeg havde nu håbet at få svar på hvorfor man ikke kan se transparente .png-filer i explorer (jeg kan i hvert fald ikke få det til at virke)... er det bare fordi Microsoft er sure?
User
Bruger #6263 @ 10.08.04 17:12
det er en rigtig god artikel for begyndere men, jeg kunne ikke bruge det til noget fordi lignende ting findes over alt på nettet. så 2 point fra mig :P
User
Bruger #1079 @ 10.12.04 18:37
god artikel!! ;)
User
Bruger #6653 @ 20.12.05 12:54
Du har ikke fortalt, hvad de forskellige formater bruges til:

JPEG: Billeder som fotografier.
GIF: Animationer, grafikelementer m. mindre end 257 farver.
PNG: Grafikelementer m. mere end 256 farver eller med brug for delvis gennemsigtighed.
User
Bruger #14381 @ 13.02.09 19:15
den her artikkel er meget kort, og selvom posten er gammel kan man ikke se transperente png i ældre versioner af explorer

2/5
Du skal være logget ind for at skrive en kommentar.
t