Il web, per la precisione il web design, ha subito varie mutazioni nel corso degli anni arrivando tutt'oggi al celebre web 2.0, che a sua volta ha subito ulteriori mutazioni nel corso degli ultimi 3 anni.
Gli stili, nel webdesign moderno, sono indispensabili per un buon template in stile web 2.0, ci sono essenzialmente 2 tipi di stili più comuni, sfumatura semplice e sfumatura con effetto vetro.
Per un buon effetto è importantissimo l'utilizzo delle opzioni di fusione, per la precisione l'utilizzo dei bordi, andiamo ad analizzare perchè:
Notiamo come l'esempio con i bordi abbia un impatto molto più piacevole e "trendy" rispetto a quello senza, andiamo però a vedere come applicare questi effetti in un breve tutorial:
Prima di tutto facciamo la forma, io ho scelto quella con il rettangolo arrotondato settato a raggio 10px e applicate su una scritta:
Ora andiamo nelle Opzioni di fusione del rettangolo e mettiamo questi settaggi:
Ora applichiamo gli stili anche alla scritta:
Se abbiamo fatto tutto bene il risultato sarà per lo meno simile a questo e tutto senza dover fare delle sfumature a mano:
Ora andiamo a vedere l'effetto vetro, partiamo sempre dalla forma base con la scritta:
Andiamo nelle Opzioni di fusione del rettangolo e mettiamo questi settaggi:
Dovreste avere un risultato del genere:
Per l'effetto vetro dovremmo fare anche 3 passaggi manuali,il primo è il vero e proprio effetto vetro, selezioniamo il colore bianco e facciamo una sfumatura tagliata al centro dall'alto verso il basso:
Ottenendo questo:
Adiamo ad eliminare i bordi superflui, selezioniamo il rettangolo [ctrl+click sulla miniatura del livello (windows); cmd o mela+click sulla miniatura del livello (mac)]
Andiamo a contrarre di 1px:
Selezioniamo inverso e tagliamo:
Riduciamo l'opacità della sfumatura all'85% e con lo stesso procediamento facciamo una sfumatura dal basso verso l'altro, questa volta però non dovrà essere tagliata e leggermente più piccola, settiamola su sovrapponi e avremo questo risultato:
Ora non rimane che l'ultimo passaggio, il bordo sotto, selezioniamo il colore bianco e la sfumatura di tipo radiale, selezioniamo 1px di altezza e la larghezza quanto quella del rettangolo e dal centro facciamo partire la sfumatura radiale, otterremo una linea sfumata alle estremità infine settatela su sovrapponi:
Andiamo come prima a inserire gli stili alla scritta:
Se avete fatto tutto bene avrete questo risultato:
Per l'applicazione di loghi o simboli o forme, il finale del processo cambia leggermente:
E il risultato sarà:
