Creați un App App Weather for iOS în Adobe Illustrator

Acest design a fost utilizat împreună cu site-ul nostru partener Mobiletuts +. Bart Jacobs, dezvoltator foarte calificat, a luat acest UI și a creat o aplicație de lucru din ea și cel mai bun lucru pe care îl puteți urma și de a învăța cum să vă creați propria! Puteți găsi seria sa aici: partea 1, partea 2, partea 3.

În acest tutorial aș dori să vă arăt cum să creați o interfață de utilizator pentru o aplicație meteo. Vom folosi mai multe plăci de artă și tipografie pentru a crea o interfață foarte minimă.

Descărcați activele fonturilor aici:

  • Misiunea gotică
  • Maven Pro

Atunci când utilizați fonturi pentru aplicații sau pentru orice motiv, asigurați-vă că ați verificat Acordul de licențiere. Deoarece acesta este doar un tutorial și aplicația în sine nu va fi disponibilă pentru vânzare, suntem în regulă cu utilizarea fonturilor menționate mai sus. Cu toate acestea, dacă intenționați să vă creați propria dvs. și doriți să obțineți o licență comercială, urmați instrucțiunile de proiectare de tip pentru a proceda astfel.


1. Configurarea documentului

Vom folosi mai multe tablouri de artă pentru diferitele viziuni pe care le are aplicația, odată ce am hotărât acest lucru cu ajutorul dezvoltatorului nostru, putem merge mai departe și putem crea documentul nostru.

Pasul 1

Pentru a începe cu noi trebuie să creați un document de dimensiunea dispozitivului nostru mobil. Deoarece lucrăm la platforma iOS, vom proiecta pentru iPhone 5, care are o dimensiune mai mare a ecranului decât încarnările anterioare ale iPhone-ului. Mi se pare că lucrez la o dimensiune mai mare, este ușor de scalat mai târziu pentru alte dispozitive. Deoarece designul este atât de minim, va fi mai ușor să eliminați spațiul mai târziu, decât să încercați să îl măriți. În acest scop documentul nostru va fi 640 x 1136 pct (nu pixeli).

În timpul brainstorming-ului cu dezvoltatorul sa decis că va exista un ecran principal care va aluneca la stânga sau la dreapta pentru a dezvălui mai multe informații. În acest sens, vom crea, de asemenea, mai multe plăci de artă în acest moment. Unul pentru fiecare fereastră care va apărea. Asigurați-vă că ați uitat peste screenshot-ul detaliat pentru specificul.


Pasul 2

După crearea documentului, va trebui să ajustăm profilul de culoare. Deci, du-te la Editare> Alocare profil și asigurați-vă că dezactivați toate profilele de culoare. Atunci când XCode vă pregătește pentru a fi asociate cu aplicația, aceasta elimină complet orice profil de culoare asociat cu activele. Din această cauză este mai bine să eliminați pur și simplu orice profil de culoare din documentul dvs. și să testați în mod regulat design-ul pe un ecran mobil pentru a asigura o ieșire corectă a culorii.



2. Creați fundalul

Pasul 1

Fundalul nostru este destul de simplu. Pentru că lucrăm cu un design mai mult sau mai puțin "plat", vom lucra cu culori solide și amestecând pentru a obține efectele noastre.

Vom folosi tabloul de artă de mijloc pentru a reprezenta pagina noastră principală a aplicației. Cel din stânga va fi ceea ce se întâmplă atunci când selectați locația. Iar cel care va apărea la dreapta va fi afișat când selectați data. Începeți prin desenarea unui dreptunghi cu aceeași înălțime și lățime a plăcii de artă în mijloc și umplând-o cu culoarea de bază


Pasul 2

Apoi, creați un cerc exact 30 x 30pt și completați-l cu culoarea descrisă mai jos.


Pasul 3

Copiați acest cerc nou creat și lipiți-l în spatele celuilalt. Acum ajustați dimensiunea la 2300 x 2300pt și aruncați Opacitate până la 0%.


Pasul 4

Acum du-te la Obiect> Blend> Blend Options ... și selectați Pași specifici apoi puneți-o la 30. Apoi face (Obiect> Blend> Make) amestecul.


Pasul 5

Cu amestecul încă selectat, centrați-l pe orizontală pe placa de artă și apoi centrați cercul chiar în partea superioară a plăcii de artă așa cum se vede mai jos.


Pasul 6

Duplicați dreptunghiul de fund plat și lipiți-l deasupra amestecului pe care tocmai l-am creat. Acum, selectați atât dreptunghiul și amestecul din paleta de straturi, apoi selectați Obiect> Mască de tăiere> Make. În acest fel, nu trebuie să ne facem griji că amestecul nostru destul de mare sângerase în celelalte panouri de artă.


Pasul 7

O caracteristică elegantă pe care am crezut-o că ar adăuga un anumit sens în aplicație ar fi ca culoarea să se schimbe în funcție de temperatură. Deci, în timp ce fundalul pe care l-am făcut acum este că atunci când este "fierbinte", acum vom duplica aceste elemente și vom regla culoarea și poziția pentru a reprezenta o senzație mai "rece".



3. Adăugați textul cu informații principale

Deoarece efectul nostru de cerc amestecat are atât de mulți pași, este posibil să observați un anumit decalaj în timp ce continuați să creați designul aplicației. Deoarece acest lucru este numai în scopuri estetice, putem merge și dezactiva straturile de amestec și să lăsăm acum culoarea de fund plat. Asigurați-vă că reactivați stratul de amestec atunci când testați dispozitivul mobil astfel încât să puteți vedea cum funcționează textul cu fundalul.

Pasul 1

Ne vom baza mult pe tip pentru a obține informații despre vreme. Din acest motiv am ales câteva fonturi frumoase, curate și ușor de citit, care oferă aplicației o personalitate. Voi fi lipit de două familii de fonturi și folosind diferite lățimi pentru a crea elementele văzute.

Pentru început, va trebui să arătăm o întâlnire. Selectează Instrumentul tip (T) și introduceți o zi a săptămânii. Voi folosi "Marți", iar fontul "Mission Gothic" cu greutatea setată la "Thin". Textul în sine va fi alb și vom adăuga a Umbra pentru al ajuta să stea în fundal. Apoi îl vom poziționa astfel încât să fie centrat pe tabloul de artă și 20px din partea de sus. Pentru a face acest lucru, aliniați-l doar la partea superioară în care caseta de margine atinge marginea plăcii de artă, apoi țineți-o Schimb și apăsați tasta Jos săgeată de două ori pe tastatură.


Pasul 2

Selectează Instrumentul tip (T) din nou și să ne creăm ecartamentul de temperatură. Îmi place ideea ca numerele să fie centrate în timp ce simbolul "grad" este oprit la dreapta. Deci, mai degrabă decât centrarea de tip în Paragraf panoul l-am păstrat lăsat aliniat și doar tastând numărul pe care îl vom folosi pentru substituent. Voi folosi "86" și fontul "Maven Pro" cu următoarele informații văzute în imaginea de mai jos.

După ce a fost creat, aliniați-l cu centrul plăcii de artă, apoi cu partea superioară. Odată aliniate la partea de sus, Click dreapta textul și Transformați> mutați ... în jos 210pt. Acum, selectați tipul și adăugați simbolul gradului.


Bacsis: Asigurați-vă că i-ați informat pe dezvoltator despre acest detaliu, astfel încât aceștia să poată determina cum să creeze diferite elemente din aplicația în sine.

Pasul 3

Acum, când avem temperatura, să adăugăm o locație. Introduceți locația dvs., pentru mine este "Nassau, BAH" nu ezitați să folosiți propria dvs. Pentru a oferi un contrast între oraș și țară, vom folosi două greutăți diferite. Orașul va fi "Mission Gothic" setat la "Regular", iar țara va fi "Mission Gothic" setată la "Thin".

În ceea ce privește plasarea, am spus anterior că îmi place ideea că figura de temperatură este centrat, dar pentru tot textul cel mai bun vreau să fie aliniat la stânga în funcție de lățimea fracțiunii de temperatură. Deci, pentru moment, voi îndrepta manual această adresă spre stânga temperaturii și o așez 20pt de Jos. Simțiți-vă liber să modificați această distanță după cum doriți. Asigurați-vă că verificați întotdeauna elementele de pe dispozitivul dvs. mobil.


Pasul 4

Ne putem opri aici dacă vrem, dar dezvoltatorul ar dori să includă și câteva informații suplimentare. Așa că vom crea trei linii separate de text. Unul pentru timpul curent, unul pentru viteza vântului și altul pentru umiditate. Asigurați-vă că le creați separat, deoarece vom folosi diferite dimensiuni și greutăți ale fontului și acest lucru poate arunca înălțimea liniei pentru aceste elemente.

Îmi plac formularele numerice din fontul "Maven Pro", așa că voi continua să folosesc acest font pentru numerele din aceste elemente, doar vom folosi greutatea "Medium" și le vom contrasta cu fontul "Mission Gothic" setat la " Subțire "și pentru acest font mai subțire îl vom seta și pe" Capacele mici ". Aveți posibilitatea să setați capacele mici evidențiind fontul corespunzător și făcând clic pe pictograma meniu din partea dreaptă sus a paginii Caracter apoi alegeți Litere mici.



4. Adăugați principalele pictograme de informații

Tipografia noastră primește mesajul nostru destul de bine, dar trebuie să creați icoane pentru a reprezenta cifrele diferite și pentru a specifica meniurile în aplicație. M-am îndrăgostit de forma simbolului de grade al fontului nostru "Maven Pro", așa că am crezut că voi lega elementele icoane împreună cu tipul prin reutilizarea acestei forme pentru a crea pictogramele.

Pasul 1

Cu Instrumentul tip (T) activați tastați simbolul gradului. Dimensiunea exactă nu contează în acest moment, deoarece vom fi ajustate pentru a se potrivi dimensiunilor noastre de pictograme. Apoi faceți clic dreapta și alegeți "Creați contururi"pentru a converti tipul într - o formă editabilă. Acum activați Instrumentul de selecție directă (A) și selectați calea interioară mai mică și scoateți-o. Vom folosi mai târziu un accident vascular cerebral pentru a obține widgetul potrivit pentru icoanele noastre. După ce aveți forma dvs. curbată pătrați, asigurați-vă că ați reglat Înălțime lățime astfel încât acestea să fie exact la fel. Acestea vor fi ușor oprite și trebuie să ne asigurăm că sunt precise atunci când adaugă elemente mai târziu.


Pasul 2

Vom folosi și reutiliza această formă de mai multe ori, așa că asigurați-vă că aveți o copie a acesteia în cazul în care pierdeți originalul în timp ce lucrați. Pentru moment, vom crea o pictogramă care să reprezinte meniul de locație.

Cu forma noastră rotunjită pătrate copiată, hai să o strângem 32 x 32pt, și adăugați un interior Accident vascular cerebral de 3px


Pasul 3

Activați Instrument rotunjit dreptunghi și a crea un dreptunghi care este 3 x 12pt și crește colțurile rotunjite, astfel încât capetele să fie complet rotunde. Acum duplicați această formă încă de trei ori și rotiți-o astfel încât să formeze un fel de formă de cruce, apoi grupați toate obiectele împreună. În sfârșit, cu grupul selectat, adăugați a Umbra și puneți-l 30pt atât din partea superioară, cât și din partea stângă a tabloului de artă. Asigurați-vă că ați verificat spațiile de pe dispozitivul mobil și ajustați corespunzător.


Pasul 4

Să copiem forma noastră rotundă rotunjită din pictograma Locație, deoarece celelalte pictograme se vor baza pe aceeași formă și dimensiune. Ajustați locația dreptunghiului rotunjit în dreptul elementului nostru de timp. La fel ca simbolul gradului real din elementul de temperatură, vreau ca pictogramele pentru aceste detalii suplimentare să fie și în afara temperaturii numai de această dată, în mod evident, vor fi în partea stângă a elementelor.

După cum vă puteți imagina, pentru elementul Ora vom crea o pictogramă Ceas. Forma noastră rotundă rotundă va fi fața ceasului și acum trebuie să facem mâinile cu ceasul. Selectează Instrument rotunjit dreptunghi și a crea un dreptunghi care este 10 x 4pt și aliniați-l la centrul feței ceasului. Duplicați acest proces numai de data aceasta 4 x 12pt. Odată ce ai mâinile ceasului într-un grup de spoturi confortabile, elementele împreună și adăugați a Umbra.


Pasul 5

Duplicați din nou pătratul rotunjit din pictograma anterioară și aliniați-l lângă elementul Wind. Pentru această pictogramă vom încerca să obținem un efect frumos în care pictograma însăși ajută în continuare informațiile despre vânt prin furnizarea unei săgeți care indică direcția în care suflă vântul în prezent. Deci, după cum puteți ghici, vom crea o săgeată în centrul acestei pictograme. Începeți prin a crea un Dreptunghi rotunjit acesta este 4 x 9pt și centrarea în pătrat rotund. Apoi, creați o pătrată perfectă cu Instrument rotunjit dreptunghi acesta este 12 x 12pt și îndepărtați unul dintre colțuri. Acum, închideți calea deschisă și rotiți-o astfel încât să creați punctul sus la săgeata noastră, apoi să o centrați asupra părții stem a săgeții, asigurându-vă că ascundeți complet colțurile rotunjite.

Cu săgeata completă, grupați tulpina și punctul împreună, apoi creați șapte copii. Rotiți fiecare dintre aceste copii în trimestre, astfel încât să aveți una îndreptată spre sus, una îndreptată spre dreapta sus, una spre dreapta și așa mai departe. Deoarece forma noastră principală nu este un cerc complet, rotirea formei cu săgeata nu va funcționa, așa că trebuie să avem o pictogramă săgeată pentru fiecare direcție pe care ar putea sufla vântul. Odată ce acestea sunt create, puteți ascunde săgețile care nu sunt necesare, apoi grupați săgețile și pătratul rotunjit împreună și aplicați a Umbra.


Pasul 6

Lipiți ultima oară o copie a formei noastre rotunjite și aliniați-o cu elementul nostru de umiditate. Acum creați un cerc care este 8 x 8pt și centru aliniați-l în forma principală și puneți-l mai mult în partea de jos. Activați Instrumentul de selecție directă (A) și selectați cel mai înalt punct de ancorare din cerc și trageți-l în sus pentru a crea o picătură asemănătoare cu forma, aduceți și mânerele un pic pentru a obține un punct mai fin pentru picătură. Duplicați această formă de picături de două ori și reduceți dimensiunea și plasați-o în partea de sus și de pe ambele părți ale picăturii mai mari. In cele din urma Grup (Control + G) elementele împreună și adăugați a Umbra.


Pasul 7

Pentru ultima pictogramă a acestei secțiuni principale vom avea nevoie de ceva care să reprezinte data. Am venit cu o pictogramă de calendar care va afișa și data lunii.

Pentru a începe să creați o Dreptunghi rotunjit acesta este 40 x 36pt și să-i dau o lovitură interioară 3pt. Acum du-te la Obiect> Extindeți aspectul pentru a transforma cursa într-o formă reală. Cu Instrumentul de selecție directă (A) activat, selectați punctele de ancoră de sus și îndreptați-le în jos 9px folosind tastele săgeți de pe tastatură. Cu Instrument rotunjit dreptunghi creați două forme de pilule rotunjite care sunt 9pt lățimea și orice înălțime pe care o doriți, apoi plasați-le peste pătratul rotunjit mai mare, astfel încât fundul să se întâlnească la jumătatea distanței dintre aria albă mare. Apoi minus aceste noi forme din forma pătrată folosind deschizător de drumuri panou. Creați încă două forme de pilule, de data aceasta vor fi 3 x 8pt și le aliniați în interiorul secțiunilor tăiate. În cele din urmă, vom adăuga o locație a locației cu următoarele setări, apoi vom grupa aceste elemente și vom adăuga o Umbra.



5. Widgeturile orare

Când a fost programată, dezvoltatorul dorea să aibă un set de widget-uri scrollabile în partea de jos a paginii principale a aplicației, care arăta vremea orară proiectată pentru acea zi. Deci, pentru a termina pagina principală a aplicației, să le creăm acum.

Pasul 1

Activați Instrument rotunjit dreptunghi și de a crea un dreptunghi alb care este 165 x 250pt, aliniați-l cu placa de artă și plasați-o 40px din partea de jos a tabloului de artă.

Duplicați acest dreptunghi și completați-l cu negru. Duplicați-l încă o dată și loviți-l 4px atunci Minus Front în deschizător de drumuri panou. Apoi puteți renunța la opacitate 15%.


Pasul 2

Duplicați din nou dreptunghiul alb și umpleți-l cu negru, care este redus la 15% Opacitate. Desenați o altă formă de dreptunghi peste asta 79pt înălțime și orice lățime și aliniați-l până la partea superioară a formei dreptunghiului de dedesubt. Selectați noul dreptunghi și cel mai mare negru completat de mai jos, apoi alegeți intersecta de la deschizător de drumuri panou.


Pasul 3

Activați Instrumentul tip (T) și introduceți o temperatură aleasă de dvs. Am vrut să mă asigur că am suficient spațiu pentru a se extinde, așa că am ales numărul "100". Pentru aceasta, voi folosi fontul "Gothic Missing" în greutatea "Black". Textul în sine va fi, de asemenea, un plat negru cu Opacitate a scăzut la 15%. Apoi îl aliniem în partea de sus a secțiunii albe a containerului nostru.


Pasul 4

Din moment ce se presupune că va fi proiectată vremea nu va fi atât de precisă, așa că vom include și posibilele "scăzute" și "înalte". Cu Instrumentul tip (T) creați din nou estimările dvs. și în loc să utilizați greutatea "Negre", vom folosi în schimb "Thin". Aliniați acest lucru spre partea de jos, asigurându-vă că există destul spațiu pentru respirație.


Pasul 5

Bara mai închisă în sus va fi indicatorul nostru de timp. Copiați pictograma ceasului pe care am creat-o anterior în acest tutorial și plasați-o centrat și în partea stângă a acestei zone de culoare mai închisă. De asemenea, puteți să copiați și textul Timp de mai înainte. Asigurați-vă că ați scos-o Umbra din aceste elemente, deoarece nu este necesar.


Pasul 6

În cele din urmă, adăugați a Umbra la dreptunghiul alb principal, apoi grupați aceste elemente împreună. Acum puteți copia această grupare și plasați-o 20px în afară de fiecare parte a elementelor centrale, asigurându-vă că ajustați timpul pentru fiecare copie nouă. Ca un bonus adăugat, am scos widget-urile de timp care ies de pe pagină și le-au redus dimensiunea 235pt înalt. Dacă aveți restricția blocată atunci când redimensionați înălțimea, widgetul va urma exemplul. Acesta va avea un număr zecimal în spatele lui, deci nu este exact. Deoarece acestea sunt în afara paginii de a folosi sau masca am creat mai devreme pentru a ascunde elementele care pleacă de pe ecran.

Cu faptul că pagina noastră principală este completă. Asigurați-vă că ați activat amestecul de fond și testați pentru a vedea cum arată dispozitivul mobil.



6. Creați meniul Locație

Pasul 1

Acum, să începem să lucrăm la meniurile noastre. Mi sa părut foarte ușor să copiați stratul cu toate elementele din pagina principală, apoi selectați placa de artă din stânga paginii principale și inserați-o în stratul duplicat. Poziționați-o astfel încât numai pictograma locației să fie vizibilă în partea dreaptă a tabloului de artă. Acum creați o mască care are aceleași dimensiuni ale tabloului nostru de artă și ascundeți elementele care sunt în afara paginii.


Pasul 2

Având în vedere că designul nostru global este "plat" în locul unei umbre gradate pentru a indica faptul că pagina principală se află peste elementul de meniu, vom folosi un dreptunghi plat plin negru setat 10% opacitate acesta este 4PT larg și la aceeași înălțime cu tabloul nostru de artă.


Pasul 3

În acest meniu vom avea nevoie de o zonă pentru a adăuga o nouă locație, precum și lista de locațiile setate și comutatoarele pentru a activa / dezactiva detectarea automată a locației și a unităților în care este afișată temperatura. Să începem prin crearea unei noi secțiuni de locație.

Selectează Instrumentul dreptunghiular (M) și a crea un dreptunghi care este 640 x 100pt și aliniați-l la partea superioară a tabloului de artă, apoi adăugați a Umbra.

Activați acum Instrument rotunjit dreptunghi și a crea un dreptunghi care este 8 x 32pt și umple-l cu negru. Duplicați acest dreptunghi și rotiți-l astfel încât să intersecteze forma anterioară formând un simbol "+". Selectați ambele dreptunghiuri și Uni ei de la deschizător de drumuri panou. Reduce Opacitate la 25% și centrați-o vertical cu elementul dreptunghi pe care l-am creat cu Umbra dinainte. Odată centrat vertical, să-l înăbuși, așa că este la aceeași distanță față de stânga, așa cum este de la marginile de sus și de jos.

În cele din urmă, selectați Instrumentul tip (T) și introduceți propoziția "Adăugați o nouă locație ..." folosind fontul "Mission Gothic" trimis la "Thin" și renunțați la Opacitate la 15%.


Pasul 4

Duplicați dreptunghiul anterior și aliniați-l la partea inferioară a celui anterior, apoi ajustați Umbra.

Copiați peste forma noastră rotundă pătrată pe care am folosit-o pentru pictogramele noastre în prealabil și în loc de un accident vascular cerebral umpleți-o cu negru plat apoi reduceți Opacitate la 15%. Copiați simbolul "+" pe care l-am făcut în pasul anterior și rotiți-l astfel încât să formeze un "X" și să-l centrați în interiorul formei pătrate rotunde, apoi alegeți Minus Front opțiune de la deschizător de drumuri panou.

Copiați acum textul elementului Locație din pagina noastră principală și eliminați Umbra și setați culoarea fontului la negru și reduceți Opacitate la 25%. Simțiți-vă liber să adăugați mai multe instanțe, astfel încât să vedem cum se va adăuga lista pe măsură ce se adaugă elemente noi.


Pasul 5

Să lucrăm la elementul de comutare pentru acest meniu. Acest element va fi blocat în partea de jos a acestui meniu, indiferent cât timp devine lista locațiilor. Începeți prin a crea un dreptunghi care este 640 x 200pt și adăugați a Umbra.

Cu Instrumentul tip (T), scrieți etichetele pentru comutatoarele pe care urmează să le facem. Una va fi pentru detectarea automată a locației, iar cealaltă va stabili dacă temperatura este afișată în Fahrenheit sau Celsius. Deoarece elementul principal în care se află aceste întrerupătoare este 200pt spațiu mare.

Să adăugăm un separator între aceste două etichete. Cu Instrumentul pentru segmentul de linie (\), creați o linie care este 476pt și dă-i un accident 2PT. Acest accident vascular cerebral va fi negru cu Opacitate redus la 10pt.


Pasul 6

Pentru a crea întrerupătoarele în sine, vom reuși să utilizăm din nou forma rotunjită. Copiați această formă și redimensionați-o 50pt și umple-l cu negru. Click dreapta această formă și alegeți Transformați> mutați ... apoi mutați-o orizontal 80PT și faceți clic pe "Copiere", nu pe "OK". Acum ar trebui să aveți două pătrate rotunjite una lângă cealaltă.

Selectează Instrumentul dreptunghiular (M) și trageți un dreptunghi care are aceeași înălțime cu pătratele noastre rotunjite și se întâlnește fiecare direct în mijloc. Selectați toate aceste trei elemente și Uni acestea în deschizător de drumuri panou. Reduce Opacitate de această formă la 15% și aliniați-l corect lângă eticheta noastră.


Pasul 7

Lipiți din nou pătratul nostru rotunjit și umpleți-l cu alb și ajustați mărimea 40 x 40pt. Aliniați-l la partea stângă sau la dreapta, astfel încât să existe distanța în jurul pieselor de margine. Acum puteți duplica aceste forme și le puteți răsturna orizontal pentru a indica starea opusă a comutatorului. Apoi adăugați textul pentru a reprezenta starea comutatorului. Faceți asta atât pentru pornire cât și pentru oprire.

În cele din urmă, puteți duplica acest element pentru selectorul de unități. Și cu asta meniul nostru de locație este complet. Să trecem la meniul nostru Data.



7. Adăugați meniul Date

Pasul 1

Acest meniu de dată va afișa vremea pentru zilele următoare. Să repetăm ​​primii câțiva pași din meniul Locație și să copiem peste întregul strat al paginii principale, apoi să ascundem elementele care ies din pagină și să adăugăm un dreptunghi pentru a reprezenta umbra meniului.


Pasul 2

Acum creați un dreptunghi care este 640 x 160pt și aliniați-l la partea superioară a tabloului de artă, apoi dați-i a Umbra.


Pasul 3

Vom avea nevoie de ceva pentru a reprezenta ziua și data, ca și înainte de a crea o pictogramă de calendar. Creați un dreptunghi rotunjit care este 120 x 120pt și adăugați o lovitură interioară care este 8px. Acum du-te la Obiect> Extindeți aspectul pentru a transforma cursa într-o formă reală. Cu Instrumentul de selecție directă (A) activat, selectați punctele de ancoră de sus și îndreptați-le în jos 30px folosind tastele săgeți de pe tastatură. Apoi reduceți Opacitate la 15%.


Pasul 4

Acum, adăugați textul în pictogramă. Vrem ca acțiunea de sus să fie ziua din săptămână. Acesta va fi textul alb. Data însăși va fi neagră cu Opacitate a scăzut la 15%. Ambele folosind "Maven Pro" în greutate "Medie".


Pasul 5

În sfârșit, adăugați temperatura așteptată. Fontul va fi "Mission Gothic" pentru numere și "Maven Pro" pentru simbolul gradului. De asemenea, vom adăuga o selecție "mare / scăzut" în partea dreaptă jos a elementului.

Dacă doriți, puteți duplica acest element și ajustați ziua / data pentru restul săptămânii.



Aici aveți cele trei ecrane

Asigurați-vă că ați luat notă de spațierea dintre elemente și de orice locație exactă despre care vă puteți gândi pentru a face munca dezvoltatorilor mai ușoară. Cele mai multe informații pe care le furnizați cu atât mai ușor va fi pentru dezvoltator să codifice produsul pentru a se potrivi cu designul. De asemenea, nu pot să subliniez cât de important este să testați mereu în timp ce proiectați, astfel încât să știți că designul dvs. se va traduce pe ecranul mobil. Cel mai bun noroc cu designul aplicației!