1
Creare userbar professionali il Dom Ott 24 2010, 14:37
Posts: 29
Età: 15
Registrato Dal: 05.06.10
Status: Graphic Coder Ehm, me lo son scordato
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.
.
