#1 (permalink)  
Old 04-06-08, 07:30
Administrator
Living At The FlepStudio!
 
Join Date: Jul 2007
Location: Cesenatico
Posts: 4,917
Rep Power: 6
Flep is on a distinguished road
Creare bottoni con Photoshop CS3

Ecco un tutorial Photoshop CS3 che serve moltissimo per chi sviluppa con Flash CS3 e non ha molta pratica nel creare dei fantastici bottoni.

Dopo aver visto come utilizzare le clipping mask con Photoshop CS3, questa volta Edoardo Gioè dimostra come creare dei pulsanti web 2.0 .


In questo tutorial impareremo a creare dei semplici pulsanti usando lo strumento penna, lo strumento rettangolo con angoli arrotondati e stili di livello personalizzati.

Seguendo questo processo imparerete a creare i vostri pulsanti personalizzati, ideali per il web design.


Iniziamo a disegnare un rettangolo arrotondato con un raggio angolare di 5 pixel:


image 1


Inizieremo subito a smanettare con le opzioni fusione del livello contenente il rettangolo.

Clikkiamo col destro sul livello e selezioniamo "Opzioni fusione".

Inizieremo aggiungendo una sfumatura al nostro pulsante, per questo esempio abbiamo utilizzato una semplice sfumatura che va dall' azzurro chiaro al bianco:


image 2


Aggiungeremo poi un bagliore esterno di un blu leggermente più scuro, mi raccomando impostate il metodo fusione su "normale":


image 3


Adesso aggiungeremo anche un bagliore interno, questa volta di un normale bianco.

Tenete sempre il metodo fusione su "Normale":


image 4


Clikkate "OK" e dovreste ottenere un pulsante già usabile:


image 5


Anche se è abbastanza carino, possiamo renderlo ancora meglio aggiungendo un effetto "vetro".

Rasterizziamo il livello contenente il pulsante clikkando col tasto destro del mouse sull’icona e selezionando "Rasterizza livello" e poi creiamo una forma con lo strumento penna che formi una leggera curva più o meno al centro del nostro pulsante:


image 6


Aggiungiamo una sfumatura a questa nuova forma nelle opzioni fusione:


image 7


Creiamo un nuovo livello vuoto e uniamolo al livello contenente la forma.

Per farlo basterà selezionare entrambi i livelli nel pannello e premere CTRL + E sulla tastiera.

Questo ci consentirà di convertire in pixel la sfumatura.

Selezioniamo il livello contenente il nostro pulsante e usiamo lo strumento bacchetta magica (W sulla tastiera) per clikkare ovunque nello sfondo.

Portiamoci nuovamente al livello contenente la forma creata con lo strumento penna e premiamo CANC sulla tastiera per cancellare tutto il contenuto della selezione:


image 8


Adesso cambiamo il metodo fusion del livello in "Sovrapponi" e abbasiamone l' opacità finchè non otteniamo l' effetto desiderato:


image 9


Ed ecco che abbiamo ottenuto il nostro pulsante!

Potete ovviamente usare qualsiasi colore preferiate, ecco qualche esempio:


image 10


Usate pure questi pulsanti per I vostri progetti!


Edoardo Gioè

Attached Files
File Type: zip Tut06.zip (420.9 KB, 110 views)
__________________
_________________________________________
VIDEO CORSI ACTIONSCRIPT 3.0 creati da FlepStudio
I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread please !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
sponsor links
Flashmint flash templates FlippingBook-PDF publisher Flash Media Server Hosting
sponsor links
Reply

Bookmarks

Tags
bottoni, creare, cs3, photoshop, pulsanti

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Actionscript 3 Creare bottoni con TextField e SimpleButton e Tweener ingtabby Actionscript 3.0 avanzato 3 13-10-08 16:50
Actionscript 3 png con alpha da photoshop nootropic.kint Actionscript 3.0 avanzato 1 12-06-08 18:38
Creating buttons with Photoshop CS3 Flep PhotoShop ENG 0 04-06-08 07:34
Using pen tool in Photoshop CS3 Flep PhotoShop ENG 0 23-05-08 07:15
Photoshop CS3 - Creare illustrazioni con lo strumento penna e gli strumenti forma Flep PhotoShop 1 18-05-08 00:04



Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0
vBulletin Skin developed by: vBStyles.com
FlepStudio 2007-2009