Tag archieven: Bitmaps

Boek van de maand, Uit het boek, Webdesign

Handboek HTML5 & CSS3: bitmaps en vectorafbeeldingen

Een reactie plaatsen

Handboek HTML5 en CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3. Dit voorproefje behandelt de soorten afbeeldingen die je in webpagina’s kunt gebruiken: bitmaps en vectorafbeeldingen. Een interview met Peter Doolaard vind je HIER. De twee andere voorproefjes uit het boek HIER en HIER.(H.F.)

Soorten afbeeldingen

Met behulp van CSS kan tekst fraai worden opgemaakt, maar desondanks is een webpagina zonder afbeeldingen bijna ondenkbaar. Al is het maar een logo. Op een webpagina kunt u diverse, maar niet alle typen afbeeldingen gebruiken. Globaal zijn er twee mogelijkheden: bitmaps en vectorafbeeldingen.

Bitmaps

Een bitmap of rasterafbeelding is opgebouwd uit pixels, beeldpunten. Het aantal pixels bepaalt hoe groot een afbeelding kan worden getoond, of beter: tot welke grootte de afbeelding er nog mooi uitziet. Een kleine bitmap die u groot laat weergeven krijgt kartelranden en ziet er niet uit. Dat komt doordat de pixels moeten worden vergroot om de gewenste ruimte op te vullen. Het is daarom belangrijk dat een foto voldoende pixels heeft voor de gewenste weergave. Op een beeldscherm is dat in het algemeen eenvoudig te bepalen. In de eigenschappen van de afbeelding ziet u hoeveel pixels er in de hoogte en breedte beschikbaar zijn en met die afmetingen kan de foto zonder problemen worden getoond. Het wordt een ander verhaal als u de gebruiker de mogelijkheid wilt bieden om het beeld in hoge kwaliteit af te drukken, want dan moet u ook rekening houden met de afdrukresolutie.
Lees verder Handboek HTML5 & CSS3: bitmaps en vectorafbeeldingen →

Creative Cloud, Illustrator, Scripting, Software, Tips & Trucs

Adobe Illustrator en Bitmap Fonts. Deel 2

1 reactie

In dit tweede deel (zie HIER voor deel 1) gebruiken we Pixels als Picture Elements, de onderdelen waar de afbeelding uit is opgebouwd. Die onderdelen hoeven niet vierkant te zijn of dezelfde kleur te hebben, maar kunnen qua vorm en kleur variëren. We gaan de lettervorm opdelen in kleine rechthoeken, die we vervolgens kunnen manipuleren door middel van scripts.

We gebruiken dit keer niet de Afbeeldingen Overtrekken-optie, maar de optie Objectmozaïek maken…
• Maak net zoals in het eerste deel een Bitmap van je tekst door middel van het Rasteren effect.
• Kies voor Object > Vormgeving uitbreiden om er een afbeelding van te maken.
• Zet Slimme Hulplijnen (Cmd/Ctrl U) aan.
• Trek een rechthoek vanuit de linker bovenhoek over de afbeelding. Zorg ervoor dat hij precies even groot is. Geef hem geen vulling, maar wel een lijn, 0,5 pt is voldoende.

01_Rechthoek

Lees verder Adobe Illustrator en Bitmap Fonts. Deel 2 →

Creative Cloud, Illustrator, Software, Tips & Trucs

Adobe Illustrator en Bitmap Fonts. Deel 1

2 reacties

In 1984, toen de Apple Macintosh werd geïntroduceerd kregen ontwerpers voor het eerst de mogelijkheid om zelf hun teksten en koppen te zetten.
De eerste schaalbare Adobe PostScript® fonts waren onderdeel van de Apple LaserWriter. Om ze te kunnen gebruiken moest je bitmap-versies van deze fonts installeren met de Font/DA Mover. Deze beeldschermfonts waren handmatig geoptimaliseerd voor een aantal corpsgroottes. Koos je een ander corps dan je geïnstalleerd had, dan waren lelijk vervormde bitmaps het resultaat. Afdrukken op een PostScript printer was de enige manier om te zien hoe je tekst gedrukt zou worden. Dat veranderde in 1989 toen ATM® (Adobe Type Manager) op de markt kwam en fonts in hun ware gedaante op elke grootte op het beeldscherm getoond konden worden.
02_MacPlusTypeDit artikel beschrijft hoe je dat retro-gevoel kunt oproepen in Adobe Illustrator en hoe je van elk lettertype een bitmap-font kunt maken.

Van Vector naar Bitmap

Het is erg gemakkelijk om een pixel-effect te geven aan fonts en vector-objecten.
Ik heb een RGB-document gemaakt, maar het werkt ook in een CMYK-document. Kies een font en type wat tekst (vette tekst geeft over het algemeen een beter resultaat).
Hier zie je Myriad Pro Bold 96 pt:
03_Pixels

Lees verder Adobe Illustrator en Bitmap Fonts. Deel 1 →