Ci sono tanti tutorial e guide online che ti insegnano come utilizzare in modo efficace il design web 2.0. Sebbene la maggior parte di questi tutorial siano utili, allo stesso tempo uccidono l'originalità del web design. Ad esempio, la maggior parte delle "guide" ti dicono che il web 2.0 significa avere un badge lucido, uno sfondo a strisce e caratteri in grassetto. Risultato? Esistono innumerevoli centinaia di design con stemmi, strisce e grandi lettere in grassetto... e non sono diversi l'uno dall'altro. Non importa se realizzi un design web 2.0, web 1.0 o web 75.0, tutto si riduce ad essere originale e memorabile.

Tuttavia, se non riesci a trovare nulla di particolarmente originale che rappresenti il ​​tuo design, è più “sicuro” seguire le tendenze attuali del web design. Quindi ecco un frammento molto piccolo del layout del web design e come trasformare un layout normale in un layout web 2.0.

Questo è quello che abbiamo avuto…

14.png

E questo è ciò che faremo…

13.png

Lavoreremo in Photoshop, utilizzando nient'altro che stili di livello; concentrandosi su gradienti delicati e ombre.

Inizia utilizzando la forma rettangolare con angoli arrotondati e disegnando un... rettangolo.

1.jpg

Banner

Ciò che dobbiamo fare prima è dare al nostro rettangolo una certa profondità e vita. Seguendo i principi del web design 2.0, solo le ombre, i contorni e le sfumature di luce ci daranno questo effetto. Quindi vai agli stili di livello e rilascia una piccola ombra delicata. Abbiamo usato #96aed6 per questo scopo.

2.png

Per dare alla forma un po' di profondità (in modo che non sembri un oggetto piatto), aggiungi una leggera ombra interna, con un tono più scuro (abbiamo usato #304f82 )

3.png

Infine, è importante aggiungere una piccola descrizione. Utilizzeremo il colore bianco #FFFFFF, poiché le nostre ombre da entrambi i lati sono più scure, vogliamo avere una linea leggera e semi visibile che contornerà la forma.

4.png