| Webdesign achtergronden | | Afdrukken | |
| Geschreven door Rinie Hooijer |
| woensdag, 15 december 1999 13:00 |
|
Het maken van achtergronden voor het web is een ware rage geworden. We komen ze dan ook in alle soorten en maten tegen. Als drager van tekst en beeld is de achtergrond zeer bepalend voor de ‘look and feel’ van de site. In dit artikel geven we u een aantal tips, zodat u met Photoshop en Paint Shop Pro gezichtsbepalende achtergronden kunt maken. Gebruikt u liever PhotoPaint, Image Composer of Picture Publisher, dan raden wij u aan even naar www.webdesign-wedstrijd.nl te surfen, omdat daar een aantal tips staat voor het maken van achtergronden met deze pakketten. Het maken van achtergronden voor het web is een ware rage geworden. We komen ze dan ook in alle soorten en maten tegen. Als drager van tekst en beeld is de achtergrond zeer bepalend voor de ‘look and feel’ van de site. In dit artikel geven we u een aantal tips, zodat u met Photoshop en Paint Shop Pro gezichtsbepalende achtergronden kunt maken. Gebruikt u liever PhotoPaint, Image Composer of Picture Publisher, dan raden wij u aan even naar www.webdesign-wedstrijd.nl te surfen, omdat daar een aantal tips staat voor het maken van achtergronden met deze pakketten. HTML geeft u twee mogelijkheden om een achtergrond op te nemen in uw document. De eerste mogelijkheid is dat u een kleur of kleurwaarde opgeeft. U doet dit door het attribuut ‘bgcolor’ op te nemen in het body-element. Vervolgens kunt u als waarde de naam noteren of een hexadecimale kleurcode opgeven. Bijvoorbeeld: #body bgcolor="white"> of #body bgcolor="FFFFFF">. Het resultaat hiervan zal altijd een egale en effen kleur opleveren. Wilt u eens iets anders, dan kunt u een bitmap maken in uw favoriete programma en deze opslaan als .GIF of .JPG. Vervolgens kunt u deze afbeelding in uw body-element opnemen met het attribuut ‘background’. De bodytag komt er dan als volgt uit te zien: #body background=‘achtergrond.gif’>. Bij het maken van een achtergrondafbeelding moet u goed letten op de omvang van het bestand. We zien nog te vaak achtergrondafbeeldingen met de afmetingen 640 x 480 en 800 x 600. Dit is niet erg, mits er niet al te veel kleuren worden gebruikt. Een prachtige fullcolor foto van de skyline van New York kan mooi zijn, maar het duurt voor de gebruiker te lang om deze te downloaden. U kunt ook een ‘tile’ maken. Een tile is een afbeelding met bijvoorbeeld de afmeting 72 x 72, die op een Internet-pagina net zo lang wordt herhaald tot de pagina helemaal is afgedekt. Het gevaar bij tiles is wel dat uw achtergrond er zeer blokkerig uit kan komen te zien als u een bepaald patroon gebruikt. Voordat we aan de gang gaan met het ontwerpen van deze tiles willen we u nog een aantal richtlijnen geven waarop u goed moet letten. Let vooral goed op de leesbaarheid van de tekst die op uw achtergrond wordt geplaatst. In de regel kunt u ervan uitgaan dat tekst pas goed leesbaar is als het verschil in kleur niet kleiner is dan zestig procent. Een zwarte letter kan nog goed worden gelezen op een achtergrond met veertig procent grijs of een andere kleur met gelijke waarde. Zorg ervoor dat de achtergrond niet zoveel toeters en bellen heeft dat de aandacht wordt afgeleid van de inhoud. Gebruikt u een reliëf, dan moet u ervoor zorgen dat de tekst niet wegvalt in de verschillende hoogten. Als u een logo neemt als uitgangspunt, let er dan op dat u de pagina een dynamischer uiterlijk geeft. U kunt dit eenvoudig doen door het repeterende logo diagonaal te zetten. Achtergronden met Photoshop Als u een eenvoudige achtergrond wilt met een licht reliëf waar u niet lang mee bezig wilt zijn, kunt u onder meer gebruik maken van de volgende filters in Photoshop: Noise, Filmgrain, Mosaic tiles, Spong en Mezzotint. Voordat u deze filters kunt toepassen moet u het volgende uitvoeren. Open een nieuw bestand in Photoshop met de afmeting 72 pixels bij 72 pixels en kies als ‘Mode’ RGB-color. Vergroot de afbeelding tot 400 procent door drie keer op Ctrl en + te drukken. Selecteer een voorgrondkleur in de kleurkiezer en vul de afbeelding met deze kleur met Alt + Delete. U kunt nu een filter kiezen uit het filtermenu. Wij nemen als voorbeeld de filter Noise. Bij Noise krijgt u de mogelijkheid om te kiezen tussen Uniform en Gaussian. Kies Gaussian met als waarde 38. Vervolgens kunt u het bestand exporteren naar GIF89a. Dezelfde route kunt u volgen voor de andere filters. U hoeft hier niet iedere keer een nieuw bestand voor te openen. Door op de D-toets te drukken herstelt u de voorgrondkleur en de achtergrondkleur weer naar wit en zwart. Door daarna op Alt+Delete te klikken maakt u de afbeelding weer wit. Let er wel op dat u aan het eind het bestand opslaat onder een andere naam. Textures gebruiken in Photoshop Als u een tile maakt met veel verschil in lichte en donkere kleuren kan het resultaat wel eens minder zijn dan u had verwacht. Als voorbeeld maken we een tile die is bewerkt met de filter Clouds. Open een nieuwe bestand met de afmetingen 72 x 72. Vergroot dit bestand naar 400 procent door drie keer op Ctrl en + te drukken. Selecteer een voorgrondkleur naar keuze; deze moet aanzienlijk lichter zijn dan de achtergrondkleur. Wij hebben hier gekozen voor wit (255, 255, 255) en blauw (35, 104, 244). Vul de afbeelding door de linker Alt-toets en de Delete-knop in te drukken. Ga naar Filter/Render en selecteer Clouds. Vervolgens drukt u net zolang op Crtl+F tot u het gewenste effect hebt bereikt. Zoals u ziet levert dit vooral een blokkerig geheel op. Laten we het nu eens op een andere manier proberen. Open een nieuw bestand met dezelfde afmetingen. Druk op ëDí om de kleurpalet weer naar zwart-wit te krijgen. Klik nu weer op de toetscombinatie Ctrl+F totdat u het gewenste effect bereikt. Sla dit bestand op in Photoshop-formaat. Maak nu een nieuw bestand met dezelfde kleuren als boven. Ga nu naar Filters/Texturize/Texture en laad het zojuist opgeslagen bestand. U kunt het reliëf en de lichtrichting desgewenst nog aanpassen. Achtergronden met Paint Shop Pro 5.0 De gradient tool die in de meeste fotobewerkingspakketten aanwezig is, wordt gebruikt om een vloeiende overgang te krijgen tussen twee of meer kleuren. (In Paint Shop Pro kunt u in tegenstelling tot Photoshop maar twee kleuren gebruiken.) U kunt op die manier dus een achtergrond maken die aan de linkerkant zwart is en naar rechts vloeiend overgaat in een lichte kleur blauw. Het zwarte gedeelte kunt u voor navigatiedoeleinden gebruiken, terwijl u op het lichtere gedeelte de inhoud van de pagina zet. Omdat de achtergrond één geheel moet vormen kunt u hier beter werken met een grotere afbeelding. Wij kiezen hier een achtergrond met de afmeting 800 x 600. Om zo’n achtergrond in Paint Shop Pro te maken gaat u als volgt te werk. Maak een nieuw bestand met de afmeting 800 x 600 en selecteer de optie 16,7 miljoen kleuren. Kies als achtergrondkleur donkerblauw en als voorgrondkleur een licht blauw naar keuze. Selecteer het Flood Fill-pictogram en kies bij Fill Style, Linear Gradient. Zet de Match Mode op Brightness, Tolerance op 200 en Opacity op 100. Klik op Options, zet het aantal Degrees op 270 en kies bij Blend Mode, Lighten. Vervolgens kunt u binnen de afbeelding klikken om het resultaat te bekijken. Bent u tevreden dan kunt u het bestand opslaan als .JPG. Houtnerven Zeer populair bij maken van achtergronden is het gebruik van houtstructuren. In Paint Shop Pro kunt u het volgende doen om zo’n structuur te maken. Maak een nieuw bestand met de afmeting 72 x 72 en selecteer 16,7 miljoen kleuren. Kies een voorgrondkleur. Wij kozen voor een bruine kleur met de waarden R:105 G:40 B:5. Selecteer het Flood Fill pictogram met de Style op Solid Color en vul de afbeelding met de voorgrondkleur. Selecteer een nieuwe voorgrondkleur. Wij kozen voor rood met de waarden R:209 G:13 B:59. Selecteer het pictogram Paint Brushes en kies bij Tool Controls/Paper Texture, Woodgrain. Bij het tabblad Brush Tip kiest u bij Shape, Square en zet u de Size op 150. Als u nu met de Paint Brush over de afbeelding gaat, worden de nerven zichtbaar. Eventueel kunt u hierna nog experimenteren met de filter Hot Wax Coating, die is te vinden onder Image/Other. |
| Laatst aangepast op dinsdag, 01 september 2009 13:11 |