PDA

View Full Version : [PhotoShop] Tutorial Crystal Icon


Zazzo889
19th April 2005, 19:13
Anche voi, come me, avete una certa predilizione per quelle belle icone, solitamente sferiche, lucide e semi-trasparenti con svariate immagini all'interno? (Tipo il mio avatar)
Ma non riuscite mai a trovare quella giusta che stia bene con il vostro desktop o non c'entra una mazza con il programma assegnato?
C'e solo una cosa da fare....
FARSELE DA SOLI!!!
Se ne avete voglia, leggete questa mini-guida :).

LESSON 1:

CRYSTAL ICON

Premessa: questo tutorial non ha la presunzione di essere l'unico modo giusto per creare questo tipo di icone, pero' ha il vantaggio di avere una buona resa grafica con uno sforzo veramente minimo, oltre al fatto che ci sono arrivato da solo e devo dire che mi sento un po' orgoglioso per questa "scoperta" :P.

Requisiti:

Photoshop 7+ (probabilmente va bene anche Gimp o PaintShopPro,pero' io non ho provato...)

Gooogle (:lol:)

Ok iniziamo:

- Per prima cosa apriamo una nuova immagine in formato RGB, come dimensioni mpostiamo 150x150 (se vogliamo fare un'icona se volete usare la tecnica per un wallpaper scegliete la risoluzione che vi interessa).

-Ora selezioniano lo strumento elisse, iniziamo a tracciare un cerchio (tenete premuto shift per avere un cerchio perfetto) che riempa quasi tutto lo spazio, mi raccomando lasciate un po' di bordo, non preoccupatevi del colore, lo modificheremo dopo.

Dovreste trovarvi con una cosa del genere:

http://img253.echo.cx/img253/613/tutotial11lb.jpg

Bene, tengo a precisare che io vi spieghero' come creare una "biglia" grigia, questo perche' e' piu' facile, usando i colori
si puo' incappare in qualche "conflitto cromatico", avendo a che fare con molte sfumature il monocromatico ci aiuta molto (non preoccupatevi, una volta fatto grigio colorarlo e' un attimo).

- Andate sul menu' livello>Rasterizza>Rasterizza livello, procedete andando sulle opzioni di fusione del livello, per prima cosa
selezioniamo traccia, impostiamo una dimensione di 2 Px, posizione esterna, metodo di fusione normale,opacita' 100%, metodo di riempimento colore
e scegliete un grigio abbastanza scuro, in questo caso R:90 G:90 B:90.
Gia' che ci siete selezionate come opzione anche la sovrapposizione sfumatura, impostate metodo di fusione normale, opacita' 100%
ora selezionate il tipo di sfumatura, prendete quella bicolore e come primo colore mettete R:225 G:225 B:225, come secondo R:112 G:112 B:112, stile lineare, angolo di 90 e scala 100%, mentre siete in questo menu' potete regolare la posizione della sfumatura direttamente sull'immagine cliccandoci sopra e andando su e giu', posizionatela piu' o meno cosi'

http://img253.echo.cx/img253/2565/tutotial27tm.jpg

- Create un nuovo livello, prendete lo strumento di selezione elittica e traccite un cerchio grande 2/3 di quello originale e allineatelo con l'estremita' superiore
impostate il colore in primo piano su bianco puro, con lo strumento sfumatura selezionate "da primo piano a trasparente" e dalla parte superiore della selezione applicate una sfumatura lunga 2/3 della selezione, otterete qualcosa di simile
http://img253.echo.cx/img253/9015/tutotial36em.jpg

- Create un'elisse da posizionare nella parte bassa della "sfera", fate in modo che i bordi inferiori combacino abbastanza con il cerchio
e che sia alto circa 1/3 del cerchio, rasterizzatelo e applicate tramite le opzioni di fusione livello una sfumatura radiale con il centro bianco puro e
all'esterno R:124 G:124 B:124 con scala 150%, fatto cio' selezionate lo strumento sfoca e passatelo sui bordi della sfmutatura.
Dovreste aver ottenuto questo
http://img253.echo.cx/img253/4785/tutotial49gw.jpg

- Ora fate nuovamente un cerchio, di colore bianco, grande quasi come il cerchio di base, posizionatelo leggermente staccato
staccato dal bordo inferiore, rasterizzate e usate la selezione elittica sul nuovo cerchio lasciandone fuori solo un piccolo
spicchio, cancellate il contenuto della selezione e voila', abbiamo la nostra "biglia" :).
http://img210.echo.cx/img210/2632/tutotial51lt.jpg

Qui ora potete sbizzarrirvi inserendo l'icona del vostro programma preferito oppure cercare con google qualche immagine pertinente allo scopo.

Ah gia', mi stavo dimenticando di dirvi che per colorare la nostra creazione bastera' creare un nuovo livello, posizionarlo sopra il cerchio principale e l'ombra, tenendolo sotto i riflessi, tenendo premuto ctrl selezionate il livello con il cerchio princiaple in modo da crare una selezione, riempitelo di un colore a vostra scelta e selezionate il metodo di fusione del livello che piu' vi aggrada.
Spero che a qualcuno interessi :), probabilmente ci sono 3000 errori di battitura e grammaticali, scusatemi.
:rosso:

mazzamazza
19th April 2005, 19:19
LOLLISSIMO!
Stasera provo se riesco a combinare qualcosa con Photoshop...!
Complimenti per la guida ;)

Night
19th April 2005, 19:38
Idem, nn appena ho un po' di tempo provo a seguire la tua guida; dando un'occhiata veloce mi sembra fatta bene, quindi GRAZIE :ok:

FastFede
19th April 2005, 19:46
Grazie, anch'io lo studierò con calma

Turot
19th April 2005, 22:17
Nn pensate che mi sia sfuggito questo interessantissimo 3d e siccome stasera sono stanco ci si risente domani. :D

Ciao Leo.

Zazzo889
19th April 2005, 22:57
Denghiu a tutti quanti, spero vi torni utile :D .

conte.zero
19th April 2005, 23:47
Molto bello ed utile!!! Complimenti!!! :clap: :clap: :clap:

Ciao,

Conte Zero.

Zazzo889
19th April 2005, 23:53
Mi stavo rileggendo il tutorial e mi sono reso conto che in alcuni punti mi sembra quasi che a scriverlo sia stato Francesco "Colla Vinilica" Muciacia :lol:

Turot
20th April 2005, 23:48
Buona occasione questa e nn me la lascio scappare anche se in ritardo di un giorno.

Magico Photoshop quante cose ci si possono fare. :ok:

Che lezione ricaviamo da questo simpatico tutorial di Zazzo889 che colgo l'occasione di dare il benventuto in questa sezione?

L'uso degli sturmenti di photoshop: livelli, selezioni, sfumature et ç x fare effetti di trasparenza e trideimensionalità, materiali lucidi ed quanto altro ci aggrada in campo di effetti speciali.

Il punto importante è saper gestire bene le luci e le ombre e questo discorso (http://www.adunanza.net/plugins/aduforum/index.php?showtopic=28248) già lo abbiamo iniziato.

Una confessione il mio passatempo preferito era proprio fare le sfere sia con photoshop che con 3d Studio Max xrchè specialmente nel 3d la sfera è già pronta come primitiva grafica :lol: e la mappatura sferica è quella + complessa.

Un Tutorial (http://homepages.ihug.com.au/~larrykin/pshop/jelly_buttons.html) che assomiglia al tuo.

Un'altra sfera semitrasparente (http://www.aqa-d.se/ny/pstips/layerfx/glass.htm) qui vengono usate le opzioni degli stili di livello.

Ci sarebbe anche questo Tutorial (http://graphicssoft.about.com/od/photoshop/l/blsnowglobe5.htm):

http://graphicssoft.about.com/library/tuts/images7/snowglobe-36.jpg

che però è lungo ed in inglese e in un sito dove c'è parecchia pubblicità e nn specializzato in grafica.

Dalle sfere ai bottoni web il passo è corto e quindi direttamente x voi ho scovato questi bellissimi tutorials (http://www.graphiczoneonline.it/tutorials/tutorials/pulsanti/pulsanti.html) in italiano da un sito che ho scoperto da poco e che pare veramente interessante.


Si puo' fare ancora di + e fare una sfera animata con Photoshop ed Image Ready:


http://spasquini.interfree.it/tutorial/t03004/img/finale.gif


Il Tutorial (http://spasquini.interfree.it/tutorial.htm?t03004) si segue bene ed è in italiano.


Per finire con i link a tutorial c'è questo (http://www.webdesignstudien.de/oldtutorials/025spherebolt.html) che mi ricorda molto dei tutorials di grafica 3d:

http://www.webdesignstudien.de/oldtutorials/images/tutorials/spherebolt/spherebolt13.jpg


Volevo qui parlare dell'importanza dei canali alpha, ma vista la mia prolissità finirei domani mattina. :lol:

By Leo.

zioBill
21st April 2005, 00:21
bello stò tutorial....


sotto col prossimo....

:lol: :lol: :lol: :lol: :lol:

Zazzo889
21st April 2005, 17:10
Grazie per i link Turot, alcuni sono molto interessanti ;).

Vomito72
21st April 2005, 17:51
Fatttttto ???? :huh:

Grazie mille :cin:

ciao
:vomito: