Share
În acest tutorial rapid, vom crea o mică pictogramă elegantă pentru iPhone pentru aplicația "Bankapp", care a făcut parte dintr-un tutorial de design pentru interfața cu utilizatorul recent publicat aici pe Mobiletuts+.
Vom proiecta pictograma noastră pregătită pentru afișajul retinei iPhone 4, care ne cere să proiectăm pictograma la o rezoluție mult mai mare de 114x114 pixeli cu 320 dpi (puncte per inch). Acest lucru va face ca pictograma să apară clar pe ecranul retinei. Această pictogramă este de obicei cea care va fi văzută pe ecranul de pornire al iPhone-ului. Există, totuși, alte pictograme pe care trebuie să le gândiți (deși nu le vom acoperi în acest sfat rapid), cum ar fi icoana pe care o vedeți în iTunes (care poate fi mult mai mare dacă este văzută în coperta) și icoane mai mici cum ar fi cele de pe iPhone când căutați.
Deschideți Photoshop și mergeți la Start> New și creați fișierul. Puteți vedea configurația mea de mai jos.
În mod evident, dorim să păstrăm aceeași schemă de culoare ca și în ceea ce a fost folosit în tutorialul UI original, astfel încât culorile verzi variază de la # 7DA000 la # 9CCB01. Deschideți fereastra Opțiuni de amestecare pentru stratul de fond preexistent din Photoshop făcând clic dreapta pe strat și selectând Opțiuni de amestecare. Aplicați un gradient stratului dvs. utilizând codurile HEX pe care tocmai le-am menționat.
Creați un strat nou și completați-l cu alb pur. Accesați Filtrare> Zgomot> Adăugați zgomot și adăugați zgomot aproximativ 25%. Modificați modul de amestecare a straturilor pentru a multiplica și micșora opacitatea stratului la undeva în jurul marcajului de 20%.
Creați un nou strat și numiți-l "Repere". Selectați o perie moale la dimensiunea de aproximativ 65 px și desenați o mică zonă de linii albe pe pictograma dvs..
Mergeți la Filter> Blur> Blur Gaussian și estompați forma albă cu aproximativ 25%.
Schimbați modul de amestecare a straturilor pe Soft Light și reduceți opacitatea la aproximativ 20%.
Repetați același proces, dar cu o perie neagră în partea inferioară a pictogramei.
Pentru ca icoana noastră să reprezinte aplicația noastră "Bankapp", vom folosi pur și simplu literele "Ba", în picioare pentru "bancă" și "aplicație". Selectați Instrumentul Text și efectuați o selecție pe pictograma dvs. Introduceți "Ba". Am folosit o fâșie frumos numită Autostradă Albastră.
Faceți clic dreapta pe stratul de text și selectați Opțiuni de amestecare. Aplicați o umbră Drop la text utilizând setările găsite în următoarea imagine de ecran. Aceasta va aplica o umbră ascuțită, dar subtilă.
Selectați Instrumentul rotunjit dreptunghi. Setați raza colțurilor la 20 de pixeli, apoi, în timp ce țineți apăsată tasta Shift, trageți forma. Aliniați-l cu centrul pânzei și plasați-o sub stratul de tip.
Faceți clic dreapta pe strat și selectați Rasterize Layer. Faceți clic dreapta pe o dată și apoi selectați Opțiuni de amestecare. Aplicați o acoperire cu gradient care merge de la # 475E00 la # 688500.
Aplicați o Shadow Inner (pentru a face ca aspectul să fie gravat) și o Shadow Drop (pentru a da fundul formei noastre o linie albă unică pixel albastră) folosind setările văzute în imaginile de mai jos.
Duplicați stratul. Faceți clic dreapta și selectați Ștergeți stilurile stratului. Umpleți stratul cu alb, apoi mergeți la Filter> Noise> Add Noise. Adăugați în jur de 25%.
Schimbați modul de amestecare a straturilor pentru a multiplica și micșora opacitatea la aproximativ 25%.
Reduceți opacitatea straturilor de text până la aproximativ 90%. Acest lucru nu face o diferență enormă, ci doar permite să strălucească puțin zgomot subtil.
Selectați instrumentul Elleptical Marquee. Trageți o selecție și completați-o cu alb pe un nou strat.
Mergeți la Filter> Blur> Blur Gaussian și estompați forma albă. Schimbați modul de amestecare la Overlay. Cu asta am terminat! S-ar putea să te întrebi de ce icoana noastră nu are colțuri rotunde - asta pentru că iPhone-ul face asta pentru noi. Iată rezultatul final:
Accentsconagua