|
 start
werk
hobby
thuis
help
planning
sitemap
Opennet
Ou
zoeken
FastCounter by bCentral
|
Op deze
pagina vind je uitleg over het maken van Web Graphics. Wat zijn Web Graphics?
Dit zijn plaatjes gemaakt met de computer, die speciaal voor Webgebruik gemaakt
zijn. Voorbeelden zijn:
- logo's en headlines
- iconen
- fotos en plaatjes
- achtergrondplaatjes
Welke formaten?
- GIF = graphical interchange format (jif)
- 256 kleuren
- niet gebruiken bij gescande foto's of digitale camera
wel gebruiken bij tekeningen, iconen, kleine plaatjes
- heeft maar 256 kleuren
- JPEG / JPG = Joint Photograhic Experts Group
- 16,7 miljoen kleuren
- niet zo gedetailleerd als GIF, maar wel veel kleiner
- uitstekend voor gescande foto's en digitale camera
- PNG = Portable Network Graphics (ping)
- 16,7 miljoen
- alleen bij browserversie 4 en hoger
- compromis tussen GIF en JPEG
- alleen gebruiken als bezoekers browsers hebben die dit formaat ondersteunen
- PSP = Paint Shop Pro
- 16,7 miljoen kleuren
- alleen gebruiken binnen PSP, daarna converteren naar ander formaat
HTMLcode?
- alignment
- left <IMG SRC="plaatje.gif" ALIGN =LEFT>
- center <CENTER><IMG SRC="plaatje.gif"></CENTER>
- right <IMG SRC="plaatje.gif" ALIGN =RIGHT>
- Zorg voor alternatieve tekst
<IMG SRC="plaatje.gif" ALT="dit is een plaatje">
- maak van plaatje een link
<A HREF="www.plaatje.com"
<IMG SRC="plaatje.gif" ALT="dit is een plaatje"></A>
Schermmode en grootte plaatje?
- VGA = 640 x 480
- SVGA = 800 x 600
- Enhanced SVGA = 1024 x 768
Hoe groot moet het plaatje worden? Kijk daarvoor in
bovenstaande opsomming. Ontwerp je plaatjes (alles eigenlijk, ook de teksten) voor de
laagste schermresolutie. Zorg dat je plaatje niet groter wordt dan 600 x 440.
| type |
hoogte/breedte in pixels |
| kleine icoon |
25 x 25 |
| medium icoon |
40 x 40 |
| groot icoon |
60 x 60 |
| horizontale streep |
10 x 500 |
| headline graphic |
150 x 600 |
| advertentie |
300 x 72 |
| logo of foto |
300 x 400 |
N.B. de standaard resolutie is 72 pixels per inch voor een
monitor. Als je een plaatje voor het printen wil bestemmen, dan zul je aan hogere
resoluties moeten denken, zoals 600 of 1200 PPI. Uiteraard moet je dan ook een printer
hebben die deze resolutie aankan.
Welke achtergrondkleur?
Voordat je een plaatje maakt, moet je beslissen welke voorgrond en
achtergrondkleur je wilt. Zet ze alvast "klaar" in je tekenprogramma (hier PSP).
Een transparante background betekent dat er geen kleur zit in de background/achtergrond.
Kies het juiste aantal kleuren.
Omdat de bestandsgrootte van het plaatje afhangt van het aantal gekozen kleuren
zul je hier aandacht aan moeten geven.
| aantal kleuren |
wanneer |
| 2 (1 bit) |
voor hele simpele plaatjes, die maar twee kleuren nodig hebben |
| 16 (4 bit) |
simpele tekeningen of "line art", alleen GIF |
| grijswaarden (8 bit) |
komt weinig voor, want het is net zo groot als 256-kleurenplaatje en veel
saaier |
| 256 (8 bit) |
standaard GIF, kan overal voor gebruikt worden, mits je genoeg hebt aan
256 kleuren |
| 16,7 miljoen (24 bit) |
standaard JPEG. |
Kies altijd voor 16,7 miljoen kleuren. je kunt altijd later nog
voor minder kleuren kiezen.
Door Lynda Weinmann zijn
er twee overzichten gemaakt van Browserveilige kleuren. Deze kleuren worden door
8-bit-kijkers als "effen" ervaren. Je vindt ze hier ook, gesorteerd op kleur, en gesorteerd op kleurwaarde.
Wat is Dithering?
Dit is het proces dat plaatsvindt in je computer als een full-color plaatje getoond
wordt op een 256 kleuren monitor. De computer moet dan uitrekenen welke combinatie van het
beperkte kleurenpalet de oorspronkelijke kleur kan weergeven. Stel dat een felle groene
kleur getoond zou moeten worden, dan is na dithering de kleuren geel en blauw dicht tegen
elkaar aan gezet, waardoor het groen lijkt.
Het nadeel van dithering is dat het plaatje niet meer zo scherp en gedetailleerd
is.
Als het belangrijk is dat iedereen je plaatje op dezelfde manier ziet, dan zul je
het moeten opslaan en ditheren naar 256 kleuren.
Print Graphics & Web Graphics
Plaatjes voor papier zijn wezenlijk anders opgebouwd als plaatjes voor het
web. Op papier zijn plaatjes vaak niet helder genoeg, op een computerscherm gebeurt het
omgekeerde.
Resizen
Probeer je plaatje na bijvoorbeeld scannen altijd exact een half, een kwart of een
achtste kleiner te maken. Dit heeft te maken de wiskundige regels achter deze verkleining.
Grabben
Plaatjes gemaakt in Corel Draw en dergelijke programma's zijn meestal aangepast aan
printen op papier. Ze kunnen dus een andere kleur hebben dan ze op het scherm hebben.
Beter is, plaatjes rechtstreeks met Capture te grabben. De kleuren die je op het scherm
ziet, zijn de kleuren, die je op de Webpagina ziet!
Finishing Touch
Hoe kom je aan een plaatje voor het web?
1. Zoek of Grab een geschikt plaatje
2. Pas de kleuren aan, zodat het beter past bij de andere kleuren van
de Webpagina (denk bijvoorbeeld aan de rode-oogjes)
3. Resize het plaatje en verminder het aantal kleuren
4. Pas eventueel kleuren of details aan, waar je nog niet tevreden over
bent.
TIP: Gebruik niet teveel tijd, bij de laatste stap, een paar minuten moet genoeg
zijn. Gebruik de Magic Wand  en de Color changing!
Buttons maken
- kies een vorm
- vul de vorm
- voeg een schaduw toe
- zet er tekst in
- geef een effect aan de knop
- reduceer de kleurendiepte (decrease color depht, 16 colors, Optimized Median Cut,
Nearest Clor Reduction)
- bewaar als een transparante gif
- breng de laatste hand aan.
Tips voor bouwen website
- maak al je buttons, titels, en balken in dezelfde stijl, zodat bezoekers
zich je site kunnen herinneren
- gebruik iconen of herhaalde grafische elelmenten als herkenningspunt, zodat je
bezoekers weten waar ze binnen je site zitten
- gebruik elke truc om je bestandsgrootte zo klein mogleijk te maken. Dit geldt in
ieder geval voor titels en navigatieplaatjes.
|
