Pulsanti per web stile mac

[blackyb]

Premessa: ho cercato all'interno del forum ma non ho torvato un tutorial che spiegasse questa cosa, quindi mi auguro di non aprire una disc. doppia.

Duneque, sto cercando di riprodurre dei pulsanti per il mio sito in stile mac, per intenderci quelli presenti sul sito apple. Ho trovato in rete alcuni tutorial, quello + completo sembra essere questo:

Tutorial

[T1T]

questo metodo che uso io mi sembra più mac(iPhone) style... http://tutorials20.com/design/design-your-iphone-widgets/

[blackyb]

Si effettivamente poi è stata una soluzione utilizzata anche da me che già conoscevo, forse la migliore;)

[blackyb]

Alla fine io utilizzo un'altra tecnica:

creo una scritta o una grafica, la apro con phoshop cs2

creo un livello superiore che denomino vetro, nel quale creo un rett o un cerchio (seconda della forma della grafica), e lo riempo di colore bianco.

Imposto il valore di opacità del livello vetro a 40 o 30%

ed infine centro il livello vetro affinche sia posizionato sulla grafica, in modo da rendere un effetto vetro su di essa.

Forse è + spartano, ma funziona e l'effetto merita:ghghgh:

[Mac-Dragon]

Alla fine io utilizzo un'altra tecnica:

creo una scritta o una grafica, la apro con phoshop cs2

creo un livello superiore che denomino vetro, nel quale creo un rett o un cerchio (seconda della forma della grafica), e lo riempo di colore bianco.

Imposto il valore di opacità del livello vetro a 40 o 30%

ed infine centro il livello vetro affinche sia posizionato sulla grafica, in modo da rendere un effetto vetro su di essa.

Forse è + spartano, ma funziona e l'effetto merita:ghghgh:

E' comodo e veloce! grazie blackyb!

[T1T]

magari postate un risultato così senza fare tutto il procedimento tutti possono vedere com'è il risultato finale...

[blackyb]

Ecco due antriprime, nel primo il riflesso apllicato con photoshop come spiegato sopra, nel secondo ho cretato anche un riflesso sottostante come se la scritta si riflettesse su un vetro.

In questo caso creo un secondo livello, con la stessa scritta che rifleto verticalmente, posiziono la scritta sotto quella originale ed infine non basta che decidere l'opacità del livello.

[alfonsohuby]

Non so esperto di PhotoShop, ma se ti posso dare un consiglio, per fare il riflesso ancora + ganzo, invece di decidere solo l'opacizzazione, poi applicare una sfumatura dal grigio chiaro verso il bianco ed il risultato è questo

[manu_]

forse con una maschera anzichè una sfumatura dal grigio al bianco viene ancora meglio... nel caso di un riflesso di un oggetto non nero dovresti ottenere un risultato migliore... ma non ne sono sicuro, appena ho un po' di tempo provo.

[manu_]

intendevo una cosa così, applicabile anche sulle immagini (scusate le imperfezioni, sto lavorando e non ho molto tempo, l'ho fatto durante la pausa sigaretta ).

[manu_]

per i pulsanti meglio usare un programma vettoriale (freehand o illustrator)

se qualcuno ha bisogno di una mano per la realizzazione non ha che da chiedere

[Mac-Dragon]

scusa la domanda ma come si fa a fare l'effetto "pressione" quando si passa sopra e si schiaccia un pulsante? intendo dire graficamente...

[manu_]

solitamente dai un colore più scuro al pulsante della barra che vai a cliccare, poi tecnicamente varia dal sito fatto in html (dove un javascript gestisce il rollover) e da flash (dove vanno gestite le varie fasi di un'istanza di un'oggetto pulsante). In ogni caso è sempre un effetto dato da un cambio di tonalità e a volte da un leggerissimo spostamento del testo su una diagonale.

[manu_]

ah, dimenticavo l'ombra interna quando si clicca.

[Mac-Dragon]

Grazie per i consigli, ma c'è un tutorial per fare i pulsanti che hai postato prima (tipo apple)?

[manu_]

non saprei, forse si, ma queste sono tecniche che ho maturato con l'esperienza nell utilizzo dei software... se hai freehand ti posso indicare passo passo come fare

[Mac-Dragon]

mmmm no ho inkscape e gimp però posso scaricare qualsiasi freeware mi possa servire per farlo

[manu_]

purtroppo non conosco programmi freeware, ma essendo tutte dunzioni semplicissime (sfumature, effetto trasparenza, ombra esterna e interna) qulunque programma vettoriale potrebbe andar bene.

Ti ripeto uso freehand e illustrator, con questi posso seguirti passo passo.

[Mac-Dragon]

fa niente proverò io a far qualcosa! grazie comunque!

[blackyb]

Se leggi tutto il post sin dall'inizio ho inserito un link

Se cerchi in rete cmq trovi molti tutorial in merito.

[Mac-Dragon]

Grazie ci proverò

[Luke77]

questo metodo che uso io mi sembra più mac(iPhone) style... http://tutorials20.com/design/design-your-iphone-widgets/

Questo è interessante...

ma.. chi mi spiega questa frase?

"Do “Rounded Rectangular Tool†(U), create a 70×70 pixel selection and right-click/Fill Path — Use color: #BF0000."

O meglio, come faccio a farne uno di 70x70 preciso! mentre trascino il mouse non vedo le dimensioni da nessuna parte :P

[T1T]

la dimensione è quella che vuoi tu, puoi fare anche ad occhio

[Luke77]

Ok, ma non esiste un modo per far venire fuori le dimensioni della selezione man mano che si sta selezionando? non so.. che appena clicchi scrive 0x0 e, man mano che trascini, fa 10x10, 10x14...15x40...

Insomma le dimensioni attuali ?

[blackyb]

Tutorial

Io avevo trovato questo