Share
În următorul tutorial veți afla cum să creați o interfață pentru aplicațiile meteo pentru telefoane mobile. Vom construi interfața folosind alinierea perfectă a pixelilor, tehnicile de construire a formei de vectori de calitate, precum și controlul de înclinație și iluminare. Rezultatul este o interfață modernă pentru aplicația telefonică. Puteți utiliza aceste tehnici pentru a crea propriile interfețe de aplicații.
Apăsați Command + N pentru a crea un document nou. Introduceți 640 în caseta de lățime și 960 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Screen (72ppi) și asigurați-vă că caseta "Align New Objects to Pixel Grid" nu este bifată înainte de a da clic pe OK.
Apoi, veți avea nevoie de o rețea la fiecare 10 pixeli. Accesați Edit> Preferences> Guides & Grid, introduceți 10 în caseta Gridline în fiecare casetă și 1 în caseta Subdiviziuni. Acum, activați Grid (Vizualizare> Grilă) și Glisați la Grilă (Vizualizare> Glisați la Grilă).
De asemenea, puteți deschide panoul Informații (fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor. Nu uitați să setați unitatea de măsură pe pixeli din Editare> Preferințe> Unitate> General. Toate aceste opțiuni vor crește semnificativ viteza de lucru.
Alegeți instrumentul Rectangle (M), creați o dimensiune a tabloului de artă (640 x 960px), umpleți-o cu R = 229, G = 244, B = 255 și asigurați-vă că nu are setul de culori pentru cursa.
Resetați forma creată în etapa anterioară și accesați Object> Create Mesh gradient. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK. Acest lucru ar trebui să transforme dreptunghiul dvs. într-o plasă simplă.
Alegeți Instrumentul de selecție directă (A) și focalizați pe plasa creată în etapa anterioară. Selectați prima și ultima coloană a punctelor de plasă și setați culoarea la R = 148, G = 201, B = 227. Continuați cu Instrumentul de selecție directă (A) să selectați celelalte patru coloane ale punctelor de plasă afișate cu săgeți și să setați culoarea după cum se arată în imaginea următoare. Deplasați-vă la panoul Straturi și blocați această plasă.
Alegeți instrumentul Rectangle (M) și creați o formă de 640 x 380 pixeli. Umpleți-l cu gradientul liniar prezentat mai jos și plasați-l așa cum se arată în imaginea următoare. Zero galben din imaginea gradientului reprezintă procentul de opacitate. Din nou, asigurați-vă că această nouă formă nu are setat culoarea pentru cursa.
Alegeți instrumentul Rectangle (M) și creați o formă de 640 pe 550px. Umpleți-l cu gradientul liniar prezentat mai jos, plasați-l așa cum se arată în imaginea următoare și asigurați-vă că nu există set de culori pentru cursa.
Alegeți instrumentul Rectangle (M) și creați o formă de 640 pe 70px. Umpleți-l cu gradientul liniar prezentat mai jos, plasați-l așa cum se arată în imaginea de mai jos și asigurați-vă că nu are set de culori pentru cursa.
Pentru pasul următor veți avea nevoie de o grilă la fiecare 1px. Deci, mergeți la Edit> Preferences> Guides & Grid și introduceți 1 în caseta Gridline în fiecare casetă. Alegeți instrumentul dreptunghiular (M), creați o formă de 128 x 330px, umpleți-l cu un albastru închis și plasați-l așa cum se arată în prima imagine.
Selectați acest nou dreptunghi și mergeți la Efect> Distort & Transform> Transform. Introduceți datele afișate în prima imagine, faceți clic pe OK și mergeți la Object> Expand Appearance. În final, ar trebui să aveți un grup de cinci dreptunghiuri perfect aliniate. Deplasați-vă la panoul Straturi, selectați acest grup și deselectați-l (Shift + Command + G).
Concentrați-vă pe dreptunghiul din stânga creat în pasul anterior și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de sus și o dată apăsați săgeata stânga pentru a o deplasa cu 1px spre stânga.
Resetați ambele copii, deschideți panoul Pathfinder și faceți clic pe butonul Minus Front. Umpleți forma rezultată cu R = 160, G = 208, B = 234. Resetați dreptunghiul din stânga creat în pasul anterior și creați două copii noi în față (Command + C> Command + F> Command + F).
De data aceasta, selectați copia de fund și apăsați de două ori săgeata dreapta pentru a muta 2px spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu alb. Selectați ambele forme create în acest pas și grupați-le (Command + G).
Treceți la următoarele trei dreptunghiuri de culoare albastru închis create în etapa a opta și repetați tehnica menționată în pasul anterior. În final, ar trebui să aveți patru grupuri diferite de formă și ar trebui să arate ca imaginea următoare.
Concentrați-vă pe primul grup de forme, cel creat în etapa nouă. Selectați-l și faceți o copie în față (Command + C> Command + F). Selectați acest grup nou și faceți clic pe butonul Unite din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în a doua imagine și deschideți panoul Transparență.
Selectați această nouă formă, împreună cu grupul creat în al nouălea pas, deschideți meniul derulant al panoului Transparență și faceți clic pe Make Opacity Mask. În cele din urmă, grupul dvs. mascat ar trebui să arate ca a treia imagine afișată.
Mergeți în celelalte trei grupuri și mascați-le ca în etapa anterioară.
Ștergeți dreptunghiurile din stânga, mijlocul și dreapta albastre create în pasul 8. Selectați dreptunghiurile rămase și alegeți Instrumentul de selecție directă (A). Selectați punctele de ancorare de sus și trageți-le cu 50 de pixeli în sus, așa cum se arată în a doua imagine.
Umpleți aceste forme cu gradientul liniar prezentat în a treia imagine și micșorați opacitatea la 30%. Amintiți-vă că zerourile galbene din imaginea gradientului reprezintă opacitatea procentuală albă, numărul alb reprezentând procentajul de localizare.
Alegeți instrumentul dreptunghiular (M) și creați o nouă formă a dimensiunii tabloului de bord. Selectați-l, asigurați-vă că nu există set de culori pentru umplere. și adăugați un accident vascular cerebral de 2 pt. Faceți-o albă și aliniați-o spre interior. Deplasați-vă în panoul Aspect și adăugați un al doilea curs pentru această formă utilizând butonul Adăugați un nou curs. Este pictograma mică, pătrată neagră situată în colțul din stânga, în partea stângă a panoului Aspect.
Selectați această curbă nouă, lățimea 1pt, setați culoarea la R = 58, G = 135, B = 178 și aliniați-o spre interior. Resetați dreptunghiul portocaliu creat în etapa a șaptea și aduceți-l în față (Shift + Command +]).
Alegeți instrumentul Rectangle (M) și creați o formă de 636 pe 50px. Completați-l cu un albastru închis, plasați-l așa cum se arată în imaginea următoare și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 1px în jos. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 160, G = 208, B = 234.
Resetați dreptunghiul albastru închis creat la începutul pasului și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în jos. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu alb.
Resetați dreptunghiul albastru închis creat în pasul anterior și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de sus și mutați-o cu 1px în sus. Selectați ambele copii, faceți clic pe butonul Minus Front din panoul Pathfinder. și umpleți forma rezultată cu R = 160, G = 208, B = 234.
Resetați dreptunghiul albastru închis creat în pasul anterior și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în sus. Resetați ambele copii, faceți clic pe butonul Minus Front din panoul Pathfinder, și completați forma rezultată cu alb.
Selectați dreptunghiul albastru închis creat în etapa a cincisprezecea, micșorați Opacitatea la 50% și înlocuiți albastrul închis cu gradientul liniar prezentat mai jos. Alegeți instrumentul dreptunghiular (M), creați o formă de 125 x 150px, umpleți-o cu un albastru închis și plasați-o după cum se arată în imaginea următoare.
Resetați dreptunghiul albastru închis creat în pasul anterior și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 1px în jos. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat mai jos.
Resetați dreptunghiul albastru închis creat în pasul anterior și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de sus și mutați-o cu 1px în sus. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Din nou, completați forma rezultată cu gradientul liniar prezentat mai jos.
Resetați dreptunghiul albastru închis creat în etapa 17, micșorați opacitatea la 40% și înlocuiți albastrul închis cu gradientul liniar prezentat mai jos. Selectați acest dreptunghi, împreună cu cele două forme create în etapa anterioară, și grupați-le (Command + G). Selectați acest grup nou și accesați Efect> Distort & Transform> Transform. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Alegeți instrumentul Ellipse (L), creați un cerc de 5px, umpleți-l cu R = 160, G = 208, B = 234 și plasați-l așa cum se arată în prima imagine. Asigurați-vă că această nouă formă este încă selectată, căutați pe panoul Aspect și adăugați un al doilea umplere utilizând butonul Adăugați umplere nouă. Este pictograma pătrată mică, pătrată în partea de jos a panoului Aspect.
Selectați această umplere nouă, adăugați gradientul liniar prezentat mai jos și treceți la Efect> Cale> Cale de decalare. Introduceți un decalaj -1px și faceți clic pe OK. Resetați acest cerc, asigurați-vă că nu este selectată nicio umplere sau cursa (în panoul Aspect) și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos, faceți clic pe OK și aplicați Efect> Distort & Transform> Transform. Din nou, introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Alegeți instrumentul Rectangle (M), creați o formă de 60x30px, umpleți-o cu o culoare aleatorie și mergeți la Efect> Stylize> Rounded Corners. Introduceți o rază de 15 pixeli, faceți clic pe OK și mergeți la Object> Expand Appearance.
Treceți la instrumentul Ellipse (L), creați un cerc de 30px și 35px și plasați-le așa cum se arată în a doua imagine. Selectați cele trei forme create în acest pas și faceți clic pe butonul Unite din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în imaginea finală.
Selectați forma creată în etapa anterioară și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în sus. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu alb. Resetați forma creată în etapa anterioară și accesați Obiect> Cale> Cale de decalare. Introduceți un decalaj -5px și faceți clic pe OK.
Selectați forma rezultată, faceți o copie în față (Command + C> Command + F) și mutați 2px în sus. Resetați această copie mutată, împreună cu forma originală și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 160, G = 208, B = 234 și mergeți la Efect> Blur> Gaussian Blur. Introduceți o rază de 3 pixeli și faceți clic pe OK.
Resetați forma creată la pasul 21 și focalizați pe panoul Aspect. Mai întâi, selectați umplerea existentă și treceți la Efect> Stylize> Glow Inner. Introduceți datele afișate mai jos și faceți clic pe OK. Apoi, adăugați un al doilea umplere pentru această formă și trageți-l în partea de jos a panoului Aspect.
Asigurați-vă că este selectată această umplere nouă, utilizați gradientul liniar prezentat mai jos și mergeți la Efect> Cale> Deplasare> Cale. Introduceți un decalaj de 2px și faceți clic pe OK. În cele din urmă, accesați Efect> Stylize> Drop Shadow. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK. Selectați toate formele create în ultimii doi pași și grupați-i (Command + G). Mergeți în panoul Straturi, găsiți acest nou grup și numiți-l "Cloud".
Alegeți instrumentul Ellipse (L), creați un cerc de 35 pixeli, umpleți-l cu gradientul liniar prezentat mai jos și plasați-l așa cum se arată în imaginea următoare. Asigurați-vă că această nouă formă este încă selectată și că vă concentrați pe panoul Aspect.
Adăugați o umplutură nouă și trageți-o în partea de jos a panoului Aspect. Setați culoarea la R = 254, G = 196, B = 105 și mergeți la Efect> Cale> Cale de decalare. Introduceți un offset de 3px, faceți clic pe OK și treceți la Efect> Distort & Transform> Zig Zag. Introduceți datele afișate mai jos și faceți clic pe OK.
Resetați cercul creat în etapa anterioară, adăugați un al treilea umplut și utilizați gradientul liniar prezentat mai jos. Selectați această umplere nouă din panoul Aspect și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj -4px, faceți clic pe OK și treceți la Efect> Distort & Transformare> Transformați. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Resetați cercul editat în etapa anterioară, adăugați o a patra umplere și utilizați gradientul liniar prezentat mai jos. Selectați această umplere nouă din panoul Aspect și mergeți la Efect> Cale> Cale de decalare. Introduceți un offset -7.5px, faceți clic pe OK și treceți la Efect> Distort & Transform> Transform. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK. În cele din urmă, selectați acest cerc complex și trageți-l în partea de jos a grupului "Cloud".
Alegeți instrumentul Ellipse (L), creați o formă de 10 x 20px și umpleți-o cu gradientul liniar prezentat mai jos. Concentrați-vă pe acest cerc stoarcere, treceți la Instrumentul de conversie a punctelor de ancorare (Shift + C) și faceți clic pe punctul de ancorare de sus. Alegeți Instrumentul de selecție directă (A), selectați punctul de ancorare de top și mutați-l cu 5px în sus. În final, forma trebuie să arate ca a treia imagine.
Selectați forma creată în etapa anterioară și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în sus. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu alb.
Resetați forma creată la pasul 27 și focalizați pe panoul Aspect. Adăugați oa doua umplutură și trageți-o în partea de jos a panoului Aspect. Asigurați-vă că această umplere nouă este selectată, utilizați gradientul liniar prezentat mai jos și treceți la Efect> Cale> Cale de decalare. Introduceți un decalaj de 2px și faceți clic pe OK.
În cele din urmă, accesați Efect> Stylize> Drop Shadow. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK. Selectați toate formele create în ultimii doi pași și grupați-i (Command + G). Faceți o copie a acestui grup, redimensionați-o, apoi plasați cele două grupuri așa cum se arată în a doua imagine.
Utilizați grupurile și formele create în ultimii nouă pași și adăugați-le ca în imaginea următoare.
Alegeți instrumentul Ellipse (L), creați un cerc de 180 de pixeli, umpleți-l cu gradientul liniar prezentat mai jos și plasați-l așa cum se arată în imaginea următoare. Asigurați-vă că această nouă formă este încă selectată și că vă concentrați pe panoul Aspect.
Adăugați o umplutură nouă și trageți-o în partea de jos a panoului Aspect. Setați culoarea la R = 254, G = 196, B = 105 și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj de 3px, faceți clic pe OK și treceți la Efect> Distort & Transform> Zig Zag. Introduceți datele afișate mai jos și faceți clic pe OK.
Resetați umplutura de top din panoul Aspect, micșorați Opacitatea la 70% și mergeți la Efect> Blur> Blur Gaussian. Introduceți o rază de 8px și faceți clic pe OK.
Resetați cercul creat în etapa anterioară, adăugați un al treilea umplut și utilizați gradientul liniar prezentat mai jos. Selectați această umplere nouă din panoul Aspect și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj -4px, faceți clic pe OK și treceți la Efect> Distort & Transformare> Transformați. Introduceți datele afișate în imaginea următoare, faceți clic pe OK și mergeți la Efect> Blur> Blur Gaussian. Introduceți o rază de 15 pixeli și faceți clic pe OK.
Resetați cercul editat în etapa anterioară, adăugați o a patra umplere și utilizați gradientul liniar prezentat mai jos. Selectați această umplere nouă din panoul Aspect și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj de -40px, faceți clic pe OK și accesați Efect> Distort & Transformare> Transformare. Introduceți datele afișate în imaginea de mai jos, faceți clic pe OK și mergeți la Efect> Blur> Gaussian Blur. Introduceți o rază de 10 pixeli și faceți clic pe OK.
Resetați cercul editat în pasul anterior, adăugați o a cincea umplutură și utilizați gradientul liniar prezentat mai jos. Selectați-l din panoul Aspect, micșorați opacitatea la 30% și mergeți la Efect> Cale> Cale de decalare. Introduceți un decalaj de -50px, faceți clic pe OK și treceți la Efect> Distort & Transformare> Transformare. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Alegeți Instrumentul Dreptunghiular (M), creați o formă de 65x5px și umpleți-o cu R = 111, G = 184, B = 220. Prindeți instrumentul Ellipse (L), creați un cerc de 45 de pixeli și plasați-l așa cum se arată în a doua imagine. Selectați această nouă formă, asigurați-vă că nu există setul de culori pentru umplere, ci adăugați un curs de 5 pct și setați culoarea la R = 111, G = 184, B = 220.
Treceți la Instrumentul de selectare directă (A) și focalizați pe cerc. Selectați punctul de ancorare de jos și pur și simplu apăsați tasta Ștergere de pe tastatură. Aceasta ar trebui să elimine jumătatea inferioară a cercului. Selectați jumătatea rămasă și mergeți la Object> Path> Stroke Outline.
Selectați forma rezultată, împreună cu dreptunghiul creat la începutul pasului și faceți clic pe butonul Unite din panoul Pathfinder.
Resetați forma creată în pasul anterior și focalizați pe panoul Aspect. Adăugați un al doilea umplere, selectați-l, adăugați gradientul liniar prezentat mai jos și treceți la Efect> Cale> Deplasare> Cale. Introduceți un decalaj de -2px și faceți clic pe OK. În cele din urmă, asigurați-vă că nu este selectată nicio umplere sau curgere (în panoul Aspect) și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Resetați formele editate în pasul anterior și accesați Object> Transform> Reflect. Verificați butonul orizontal și faceți clic pe butonul Copiere. Aceasta va crea o copie verticală, îndoită, a formei selectate.
Selectați cele două forme din pasul anterior și plasați-le ca în imaginea următoare.
Deplasați-vă până la dreptunghiul portocaliu și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o 1px spre stânga. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 222, G = 95, B = 41.
Resetați dreptunghiul portocaliu și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de sus și mutați-o cu 1px în sus și spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 222, G = 95, B = 41.
Resetați dreptunghiul portocaliu și faceți două copii în față (Command + C> Command + F> Command + F). Selectați copia de sus și mutați 2px spre stânga. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 254, G = 239, B = 221.
Resetați dreptunghiul portocaliu și faceți două copii noi în față (Command + C> Command + F> Command + F). Selectați copia de început și mutați-o cu 2px în sus și spre dreapta. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Umpleți forma rezultată cu R = 254, G = 239, B = 221.
Alegeți instrumentul Tip (T) și adăugați un text și plasați-l după cum se arată în imaginea următoare. Setați culoarea la R = 222, G = 95, B = 41 și utilizați fontul Calibri cu dimensiunea stabilită la 30pt. Selectați acest text și accesați Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
Alegeți instrumentul Rectangle (M), creați un pătrat de 15px și completați-l cu gradientul liniar prezentat mai jos. Adăugați o cursă de 1 pt pentru această formă, setați culoarea la R = 222, G = 95, B = 41 și aliniați-o la interior.
Resetați acest pătrat, asigurați-vă că nu este selectată nicio umplere sau cursa și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 3 pixeli, faceți clic pe OK și treceți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în imaginea de mai jos și faceți clic pe OK.
Alegeți instrumentul Rectangle (M), creați un pătrat de 5px, umpleți-l cu R = 222, G = 95, B = 41 și plasați-l așa cum se arată în prima imagine. Treceți la Instrumentul de selecție directă (A) și focalizați pe acest pătrat mic. Selectați punctele inferioare de ancorare și accesați Obiect> Cale> Mediu. Verificați butonul Both și faceți clic pe OK. Forma rezultată ar trebui să pară ca un triunghi.
Selectați-l și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 1px și faceți clic pe OK. Resetați acest triunghi, împreună cu forma creată în pasul anterior, și grupați-i (Command + G). Selectați acest nou grup și plasați-l după cum se arată în a treia imagine. Alegeți instrumentul Rectangle (M), creați o formă de 640 pe 30px, umpleți-o cu negru și plasați-o după cum se arată în a treia imagine.
În cele din urmă, să adăugăm ceva mai mult text. În primul rând, numele zilelor scurte. Utilizați fontul Calibri bold, setați dimensiunea la 20pt și culoarea la R = 71, G = 169, B = 209. Selectați tot acest text și accesați Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
Continuați cu Instrumentul de tip (T) și adăugați restul textului. Este tot fontul Calibri (Bold sau Regular). Nu uitați să adăugați efectul discret Drop Shadow pentru tot textul.
Acum munca ta sa terminat. Iată cum ar trebui să arate.
Și după ce l-ați plasat într-un design telefonic.
Accentsconagua