Er zijn zoveel tutorials en handleidingen online die u leren hoe u effectief gebruik kunt maken van het web 2.0-ontwerp. Hoewel de meeste van deze tutorials nuttig zijn, doden ze tegelijkertijd de originaliteit van het webontwerp. De meeste “gidsen” vertellen u bijvoorbeeld dat web 2.0 gaat over het hebben van een glanzende badge, gestreepte achtergrond en vetgedrukte lettertypen. Resultaat? Er zijn talloze honderden ontwerpen met badges, strepen en opvallende grote letters... en ze verschillen niet van elkaar. Het maakt niet uit of je een web 2.0-, web 1.0- of web 75.0-ontwerp maakt, het komt er allemaal op neer dat het origineel en gedenkwaardig is.

Als u echter niet echt iets bijzonder origineels kunt vinden om uw ontwerp te symboliseren, is het “veiliger” om mee te gaan met de huidige trends op het gebied van webdesign. Hier is dus een heel klein fragment van de lay-out van een webontwerp, en hoe u van een gewone lay-out een web 2.0-lay-out kunt maken.

Dit is wat wij hadden…

14.png

En dit is wat wij gaan doen…

13.png

We gaan in Photoshop werken en gebruiken alleen laagstijlen; waarbij de nadruk ligt op milde hellingen en schaduwen.

Begin met het gebruik van de rechthoekige vorm met afgeronde hoeken en teken een... rechthoek.

1.jpg

Banner

Wat we eerst moeten doen, is onze rechthoek wat diepte en leven geven. Volgens de principes van web 2.0-ontwerp zullen alleen schaduwen, omtrekken en lichtgradiënten ons dit effect geven. Dus ga naar laagstijlen en laat een beetje milde schaduw vallen. We gebruikten #96aed6 Voor dit doeleinde.

2.png

Om de vorm wat diepte te geven (zodat het er niet uitziet als een plat voorwerp), voeg je een milde binnenschaduw toe, met een donkerdere tint (we gebruikten #304f82 )

3.png

Ten slotte is het belangrijk om een ​​kleine schets toe te voegen. We zullen de witte kleur #FFFFFF gebruiken, omdat onze schaduwen van beide kanten donkerder zijn, willen we een lichte en semi-zichtbare lijn hebben die de vorm omlijnt.

4.png