Tutorial - Iconuri

FaNkY · **FoundeR** Data inscrierii: 17/Oct/2007 Mesaje: 165

Am vazut pe templatesmonster un set de iconuri mai cool... si m am gandit sa incerc sa fac si eu ceva similar(considerati l un test). Nu stiu cat de folositor o sa fie... dar ma plictisesc :'-(

. Deasemenea nu stiu dk poate fi considerat plagiat(de vreme ce l am facut de la 0 si nu intentionez sa l folosesc).

Ok, vrem sa ajungem aici.

Tutorial - Iconuri Tutorial - Iconuri

Nu trebuie sa uitam niciodata ca cele mai cool iconuri sunt alcatuite din cele mai simple efecte. Pentru a le face nu o sa ne folosim de vectori.. de fapt o sa lucram cu vectori, insa in photoshop(nu in illlustrator... care apropo, solicita mult mai mult calculatorul). Vectorii sunt un fel de imagini care contin numai nuanță si margine. Iar marginea are asociati niste algoritmi de interpolare/extrapolare... Aceasta inseamna ca oricat vei mari/micsora un vector, calitatea nu se pierde.(de fapt se pierde, insa eroarea este de marime nula(lebesque parca se numea.. am uitat))

In photoshop vectorii se pot desena cu toate tipurile de shape tool, inclusiv pen tool.

Ok, ne uitam bine la imaginea finala. Vom face decat butonul "inapoi" din dreapta. Mai intai de toate identificam toate formele care apar acolo. Eu vad mai intai un patrat(cu toate efectele lui), apoi vad o sageata(cu toate efectele ei).
[img]http://upload2.postimage.org/371597/photo_hosting.html[/img]

Deschidem un nou document(Ctrl+N) de 500/500px si facem un background mai intunecat. Avem nevoie de el pentru un constrast mai mare(ca sa ptem observa mai bine fiecare efect). Eu am întrebuințat #414141.

Acum luam formele pe care le am identificat(patratul si sageata) si le desenam pe rand. Mai intai ne ocupam de patrat. Pur si rudimentar il desenam.
Mai lat, mai mare, mai mic> dupa placul vostru. El o sa fie baza efectelor.
Culoarea nu are importanta pentru ca o sa i aplicam un gradient deasupra.

[img]http://upload2.postimage.org/371612/photo_hosting.html[/img]

Ok, daca observati din imagine, culoarea nu este destul de reusita. De fapt culoarea este reusita insa impresia pe care o lasa nu este una mega klumea. Aplicam un gradient, ca sa o facem un pic mai cool. Treaba cu gradientele este si ea interesanta. In caseta de dialog a gradientului observam ca ne sunt puse la dispozitie o succesiune intreaga de modalitati de a crea un gradient(linear/radial/reflected...). Sa lucram in photoshop putem si cu brush tool. Insa sa cream lucruri in photoshop putem doar atunci cand intelegem importanta si diferentele fiecarui buton/efect in parte. In acest tutorial o sa folosim decat gradient linear si radial.

Daca vreau sa "infrumusetez" o culoare trebuie sa folosesc valori apropiate pentru gradient, pentru a nu diminua valoarea nuanței si pentru a nu crea un contrast evident si grosolan. Eu am folosit valorile #7bb6df > #414141 .

[img]http://upload2.postimage.org/371626/photo_hosting.html[/img]
Acum trebuie sa delimitam un pic imaginea, deaceea ii facem un stroke alb cu mărimea de 1 si opacitatea de 70-75%.
[img]http://upload2.postimage.org/371633/photo_hosting.html[/img]

Pentru a semana cu un buton, il reliefam un pic cu bevel&emboss. Eu am folosit valorile din poza. De regula, cu cat sunt mai mici valorile, cu atat este mai bine. Nu ne intereseaza efectul repede al lui stroke sau al lui bevel ci efectul final. Mai aplicam un efect de umbra cu distanta 1, opacitatea 30, 90°, colorație neagra.
[img]http://upload2.postimage.org/371648/photo_hosting.html[/img]
Acum trebuie sa i adaugam o reflexie butonului. Sunt multe modalitati, insa noi o folosim pe cea mai simpla. Luam Pentool si desenam un triunghi, insa avem grija sa curbam ipotenuza acestuia, asa cum e in poza, ii setam tentă alba si opacitatea layerului de 25%. [img]http://upload2.postimage.org/371671/photo_hosting.html[/img]
In sfarsit desenam sageata... Putem sa desenam una cu Pentool insa eu am folosit una predefinita cu Shape tool.

Cel mai incitant pas este crearea dreptunghiului care tine sageata legata de buton. Desenam pur si modest un dreptunghi(nu importa ce culoare). Ii modificam unghiul de inclinatie la 45-30°. Vizualizatorul trebuie sa aiba impresia de 3d(cred ca este cam mult spus). Idea este ca dreptunghul respectiv sa para intr adevar ca tine sageata: si tinand cont de lumina ar insemna sa fie mai dechis la colorit in mijloc, iar in parti sa aiba culorile pe care le are si patratul albastru in vecinatate. Acest lucru se creaza cu un gradient cu 3 culori. La mine e #78b3de>#86bbe0>#5da4d6, insa la voi o sa difere in functie de pozitia dreptunghiului. Eu zic sa alegeti culorile de capat ale gradientului cu eyedrop tool. Unii ar fi tentati sa faca culoarea din mijloc mai alba, insa nu ne intereseaza efectul imediat, dupa cum am spus, ci acela final. Nu uitati ca gradientul este linear si trebuie sa i setam acelasi unghi de inclinatie pe care il are si dreptunghiul(45-30°). Insa asta nu e de ajuns. Trebuie sa evidentiem un pic marginea de sus a dreptunghiului. Iarasi sunt o mie de metode, insa noi o sa folosim stroke. Introducem valorile din poza. Nu uitati ca este un gradient radial de aceasta data. Valorile opacitatii si ale dmensiunii pot fi schimbate dupa plac insa nu ne intereseaza efectul imediat. In,rest...putem sa i mai aplicam un stroke gradient/radial si sagetii, ca sa obtinem in final butonul cu pricina.
[img]http://upload2.postimage.org/371717/photo_hosting.html[/img]

Deasemenea putem sa desenam umbra sagetii. Eu am desenat o cu Pentool si i am micsorat opacitatea un pic. Daca folosim mai multe shapeuri, putem sa cream nite iconite faine.(eu am folosit shapeurile predefinite din photoshop) pe care sa le folosim pt un eventual template web2.0.

Succes.

PS:Am uitat sa spun: dk vreti ca dreptunghiul albastru care tine sageata sa fie mai fancy, trebuie sa l deformati. Ctrl+T, Warp si deformati l un pic pe diagonala.