Zelf een web 2.0 lay-out maken

Geen internet meer zonder web 2.0, zoveel is intussen duidelijk. Vorig jaar gaven we al eens tips over hoe je de web 2.0-toepassingen ook in jouw site krijgt, maar via deze blogpost willen je graag ook laten zien dat het helemaal niet zo moeilijk is om de lay-out van je site in een "anno 2009"-jasje te steken.

De theorie

Wat is hip? Volgende tips geven alvast een start:

• Het gebruik van gradients. In plaats van effen rood te nemen, werk je met een gradiënt zodat er een klein kleurverschil is (rood en iets lichter rood).
• Het gebruik van reflections: wereldberoemd geworden door Apple's iTunes maar intussen overal op internet te vinden. Afbeeldingen lijken in dit geval op een blinkende grond te staan die een stukje van de afbeelding weerspiegelt.
• Het gebruik van glows: woorden of afbeeldingen krijgen een gloeiende rand.
• Het gebruik van lichte schaduw: geen zware zwarte rand, maar een licht grijs schaduweffect.
• Het gebruik van afgeronde hoeken en veeltandige sterren.
• Het gebruik van strokes: een meestal witte rand van enkele pixels rond de afbeelding.
• Het gebruik van gloss: een glanzend effect op je afbeelding maakt dat ze er blinkend uitziet.
• Het gebruik van peeling: de afbeelding ziet er uit als een sticker waarvan een hoekje niet meer vastkleeft.

De praktijk

Hieronder vind je een paar links naar tutorials die je uitleggen hoe je al deze effecten met Adobe Photoshop kan nabootsen:

• 1.000 gratis gradients.
• Tutorialfilmpje over het maken van reflections, of een Javascriptje om het automatisch te doen.
• Werken met glowing.
• Het ontwerpen van veeltandige sterren met een gradient.
• Een tutorial over het maken van glossy knopjes of glossy badges.
• Tutorial over het zelf maken van peeling stickers, of ongeveer hetzelfde lerven via een filmpje.

O ja, en voor wie niet wil betalen voor Adobe Photoshop en ook niet de illegale toer opwil: met GIMP (open source en volledig gratis) kan je net hetzelfde!

• 130 gratis gradients.
• Tutorial over het maken van reflections.
• Werken met glowing.
• Het ontwerpen van veeltandige sterren met een gradient.
• Een tutorial over het maken van glossy knopjes.
• Tutorial over het zelf maken van peeling stickers.

Zelf nog mooie voorbeelden of goede tutorials gevonden? Ga helemaal web 2.0 en deel ze met ons via een reactie op deze blog!

Veel succes ermee!