Creare userbar professionali
+2
Modix
KevinGenoves3
6 partecipanti
- KevinGenoves3Member
- Posts : 29
Età : 27
Registrato Dal : 05.06.10
Creare userbar professionali
Dom Ott 24 2010, 12:37
Buongiorno a tutti. Molti di voi sapranno creare un userbar, vero? Nella grafica per siti web non funziona esattamente così, e bisogna modificare il proprio stile. Bisogna renderlo semplice e professionale.
Prendiamo lo stile della seguente userbar:
Come potete vedere, le tonalità scelte sono dei blu profondi e degli azzurri spenti.
Inoltre l'userbar non è di 350*19 ma di 360*20, piccola modifica che serve a darvi più spazio per eventuali "cornicette".
Passo 1: La creazione
Iniziamo aprendo un docomento di dimensioni 360*19, e riempiamolo di un blu profondo, io ho scelto un bel #142542. Adesso, con lo strumento selezione, andiamo a prenderci tutto il riquadro. Creiamo un nuovo livello e, tasto destro sulla selezione -> Traccia.
Fate una traccia interna di 2px con un bell'azzurro (es. #69a0ff). Adesso fate la stessa cosa, ma traccia interna di 1px del colore che avete scelto come sfondo.
Perfetto. Adesso aggiungiamo 2-3px alla sfumatura della selezione, e selezioniamo la cornicetta a metà. Cancelliamo. Successivamente applichiamo una sfumatura bianco->trasparente in maschera di ritaglio, e leviamo tramite una selezione senza sfumatura, la parte color sfondo che ormai si è intaccata del bianco. Ora unite maschera e livello, duplicateli, e rivoltateli in verticale. Outcome:
Passo 2: Parte centrale
Adesso dovremo creare la "culla" del nostro testo. Iniziamo a selezionare una parte compresa tra la cornicetta appena creata, lasciando qualche pixel di spazio. Adesso creiamo una traccia del colore che preferiamo, consiglio un azzurro/grigio spenti, e se volete aggiungete qualche rifinitura a matita. Su un'altro livello, con la selezione, riempiamo la parte di vuoto rimasta all'interno, e, con una sfumatura sfondo->trasparente, diamo quel leggero senso di "tondezza". Outcome:
Passo 3: Testo
Ora non ci resta che aggiungere un testo del font e del colore che preferiamo, io ho utilizzato Visitor TT1 BRK a 10px senza antialiasing. Diamogli un colore già utilizzato, possibilmente quello dello sfondo, e applichiamo una maschera di ritaglio con sfumatura bianco->trasparente per rendere meglio l'effetto.
Prendiamo lo stile della seguente userbar:
Come potete vedere, le tonalità scelte sono dei blu profondi e degli azzurri spenti.
Inoltre l'userbar non è di 350*19 ma di 360*20, piccola modifica che serve a darvi più spazio per eventuali "cornicette".
Passo 1: La creazione
Iniziamo aprendo un docomento di dimensioni 360*19, e riempiamolo di un blu profondo, io ho scelto un bel #142542. Adesso, con lo strumento selezione, andiamo a prenderci tutto il riquadro. Creiamo un nuovo livello e, tasto destro sulla selezione -> Traccia.
Fate una traccia interna di 2px con un bell'azzurro (es. #69a0ff). Adesso fate la stessa cosa, ma traccia interna di 1px del colore che avete scelto come sfondo.
Perfetto. Adesso aggiungiamo 2-3px alla sfumatura della selezione, e selezioniamo la cornicetta a metà. Cancelliamo. Successivamente applichiamo una sfumatura bianco->trasparente in maschera di ritaglio, e leviamo tramite una selezione senza sfumatura, la parte color sfondo che ormai si è intaccata del bianco. Ora unite maschera e livello, duplicateli, e rivoltateli in verticale. Outcome:
Passo 2: Parte centrale
Adesso dovremo creare la "culla" del nostro testo. Iniziamo a selezionare una parte compresa tra la cornicetta appena creata, lasciando qualche pixel di spazio. Adesso creiamo una traccia del colore che preferiamo, consiglio un azzurro/grigio spenti, e se volete aggiungete qualche rifinitura a matita. Su un'altro livello, con la selezione, riempiamo la parte di vuoto rimasta all'interno, e, con una sfumatura sfondo->trasparente, diamo quel leggero senso di "tondezza". Outcome:
Passo 3: Testo
Ora non ci resta che aggiungere un testo del font e del colore che preferiamo, io ho utilizzato Visitor TT1 BRK a 10px senza antialiasing. Diamogli un colore già utilizzato, possibilmente quello dello sfondo, e applichiamo una maschera di ritaglio con sfumatura bianco->trasparente per rendere meglio l'effetto.
- ModixLover Member
- Posts : 1190
Età : 29
Registrato Dal : 29.08.09
Re: Creare userbar professionali
Dom Ott 24 2010, 13:56
Bella Guida,Anche Se è molto semplice crearle
- ValerioLover Member
- Posts : 3300
Età : 27
Registrato Dal : 31.07.10
Re: Creare userbar professionali
Dom Ott 24 2010, 14:24
Bravo Kevin.. anche se molto semplice ti faccio i miei complimenti
- SpaccaLover Member
- Posts : 2794
Età : 28
Registrato Dal : 20.02.10
Re: Creare userbar professionali
Lun Ott 25 2010, 14:10
Molto utile!
- Fra77Lover Member
- Posts : 3057
Età : 26
Registrato Dal : 14.11.09
Re: Creare userbar professionali
Lun Ott 25 2010, 15:55
Professionali,ma semplici allo stesso tempo,molto belle bravo Kevin .
- #BazzyExpert Member
- Posts : 472
Registrato Dal : 10.04.11
Re: Creare userbar professionali
Mer Mag 11 2011, 16:47
Topic Vecchio
CHIUDO
CHIUDO
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.