Er verschijnen tegenwoordig steeds meer webwinkels. Steeds meer mensen winkelen vanuit huis, internet neemt een deel van de markt over. Dat is leuk, ik vind het persoonlijk heel handig, maar daarbij is het wel belangrijk dat je een goede basis hebt. Zoals een winkelpand uitnodigend moet zijn, moet een webwinkel dit ook zijn. En ik kom helaas wel eens webwinkels tegen waarbij ik al afschrik van de vormgeving… naar de producten kijk ik dan niet eens meer. Doordat ik de laatste tijd webwinkels heb mogen helpen bij de vormgeving en mijn eigen webwinkel binnenkort verandert naar Hollandsche Daemes, wil ik enkele tips meegeven.

Sinds ik een tekentablet heb, vind ik het tekenen op de laptop veel leuker geworden. De muis is daar uiteraard niet echt geschikt voor en op papier krijg ik nooit voor elkaar wat ik echt wil bereiken. Photoshop en mijn tekentablet brachten daar verandering in en sindsdien teken ik voor mezelf in Photoshop, maar ook wel eens voor anderen. In deze tutorial laat ik zien hoe ik mijn tekeningen maak. Even een simpel voorbeeld met een memo en potlood:

Plaatjes zijn heel handig te gebruiken. Je kunt er links van maken (ook in een plaatjes zelf, kijk maar eens hier), ze dienen gewoon ter versiering en eigenlijk nog veel meer. Je kunt ook een plaatje posten en als je er overheen gaat, komt er een ander plaatje. Kijk hieronder maar eens:

Hoewel ik meestal gewoon een menu maak doormiddel van li en ul (horizontaal of verticaal), kan het ook heel handig zijn om je menu in de header te hebben door middel van een plaatje. Dan kun je gewoon de tekst met bijvoorbeeld PSP of Photoshop erin zetten en daar een link mee maken door middel van Handy Image Mapper (download).

Stap 1.
Allereerst moet je zelf een plaatje gemaakt hebben natuurlijk. Die open je dan in Handy Image Mapper (klik op het mapje recht bovenin). Zelf gebruik ik het onderstaande plaatje. Ik ga de tekst ‘blossom’ aanklikbaar maken.

Er werd me gevraagd een tutorial te maken over plaatjes die doorzichtig zijn als je een pagina bekijkt en als je er met je muis overheen gaat, hij dan helemaal zichtbaar wordt. Of juist andersom natuurlijk. Dit werkt niet in Internet Explorer, in Chrome gaat hij langzaam over en in Firefox laat hij het verschil gelijk zien.

Stap 1.
Allereerst heb je natuurlijk plaatjes nodig en die moet je op je webpagina zetten. Het is niet nodig om ze te plaatsen met een link, ook zonder doet hij het.