Share
Ce veți creaV-ați dorit vreodată să transformați o interfață de aplicație PSD într-un demo complet animat pentru clienții sau site-ul dvs.? Se pare că puteți folosi și Photoshop pentru asta.
În acest tutorial, vom proiecta o aplicație de știri simple pentru iPhone, apoi o animăm pentru prezentarea clientului și o vom exporta ca fișier GIF. Veți învăța tot ce aveți nevoie pentru a trece de la idee la demo animat, toate în orice versiune recentă a Photoshop.
Am folosit Photoshop CC în acest tutorial, dar CS5 sau 6 ar funcționa la fel de bine ca să urmeze. De asemenea, veți avea nevoie de următoarea fotografie pentru a finaliza acest tutorial. Descărcați-le înainte de a începe sau înlocuiți-le cu o imagine similară și ajustați etapele în consecință:
În primul rând, vom începe proiectarea interfeței aplicației. Creați un fișier nou (Control-N) cu dimensiunea pânzei 640 px de 1136 px, apoi apasa O.K.
Dacă, în schimb, aveți deja o interfață de aplicație proiectată, o puteți deschide în Photoshop și apoi sari la Atingeți din acest tutorial.
Clic Vizualizare> Ghid nou pentru a face un nou ghid, care ne va ajuta în plasarea corectă a elementelor GUI. Setați-l la Vertical cu poziție 15 px.
Adăugați un alt ghid vertical pe fiecare parte a panzei, cu o distanță de 15 de pixeli între fiecare ghid.
Desenați un alt ghid, de data aceasta la orizontală 40 px, 128 px, și 220 px.
Adăugați o bară de stare în cea mai mare parte a pânzei. Dacă aveți nevoie de instrucțiuni detaliate cu privire la asta, verificați secțiunea barei de stare din tutorialul nostru anterior Cum de a proiecta o aplicație de e-mail cu iOS 7 în Photoshop.
Apoi, faceți un nou strat, apoi selectați secțiunea a doua și apoi completați-l cu o culoare gri, # 2c3137.
Adăugați textul titlului aplicației în partea de sus a interfeței.
Adăugați un logo la titlu. Tocmai am desenat niște dreptunghiuri simple pentru logo, dar dacă aveți o pictogramă de aplicație existentă, o puteți importa într-un strat nou.
Desenați o pictogramă de lupă utilizând o combinație de două forme de cerc și un dreptunghi rotunjit, folosind aceeași culoare ca și sigla aplicației. Plasați-l în partea dreaptă a aplicației.
Pe de altă parte, trageți patru dreptunghiuri rotunjite pentru pictograma opțiune.
Creați un nou strat cu o secțiune dreptunghiulară care se potrivește sub bara de titlu. Umpleți următoarea secțiune cu o culoare gri, la fel ca și secțiunea anterioară.
Adăugați o mască de strat pe strat și apoi adăugați un gradient alb-negru până când fundul este estompat.
Adăugați un meniu utilizând Tip Tool, care conține categoriile de știri. Setați primul meniu - în acest caz, Toate opțiune - pentru a fi îndrăzneț, pentru a indica că categoria este activă. Duplicați-l (Control-J) și apoi setați alt meniu - în acest caz, sportiv-pentru a fi îndrăzneț, pentru a indica încă o dată categoria selectată.
Acum, de la straturi panou, setați sportiv meniul Opacitate la 0% pentru al ascunde, așa cum vrem Toate categorie pentru a fi îndrăzneț înainte.
Adăugați o săgeată subțire pentru navigarea prin meniuri, realizată din dreptunghiuri rotunjite.
Adăugați o altă săgeată pe cealaltă parte.
Umpleți restul interfeței cu culoarea gri. Asigurați-vă că ați pus acest fundal sub toate elementele GUI.
Desenați un dreptunghi gri deschis pentru fundalul secțiunii de știri individuale.
aplica Accident vascular cerebral, Inner GlAu, și Lumină exterioară pentru a adăuga un contrast mai mare cu zona de știri. Faceți dublu clic pe strat și apoi utilizați următoarele setări din capturile de ecran de mai jos:
Desenați un dreptunghi rotund alb pe partea superioară a formei anterioare. Vom pune imaginea de știri aici.
aplica Stralucire interioara în forma albă, cu următoarele setări:
Selectați o fotografie din setul Tuts + Stock Foto pe care l-ați descărcat anterior sau orice altă fotografie pe care doriți să o utilizați și plasați-o acoperind forma dreptunghiului rotund alb.
Lovit Control-Alt-G pentru a converti stratul de fotografie selectat într-o mască de tăiere. Fotografia va intra automat în interiorul stratului din spatele acesteia. Și iată ce vedeți: o fotografie perfect plasată în partea superioară a zonei de știri individuale.
Adăugați text pentru conținutul de știri. Asigurați-vă că adăugați contrast la textul de știri pentru o mai bună experiență de citire, variind tipul, culoarea și dimensiunea fontului.
Să adăugăm icoane în designul elementului de știri. Desenați două mici dreptunghiuri rotunjite fără Completati și 1 pt un accident vascular cerebral alb.
Faceți dublu clic pe strat și apoi adăugați stilul stratului Suprapunere de culori. Utilizare # 708196 pentru culoarea sa.
Repetați procesul anterior, dar de această dată utilizați o combinație de dreptunghi rotunjit și dreptunghi.
Adăugați o formă de cerc mic. Acum, avem o pictogramă de etichetă. Dulce!
Până acum, acesta este designul aplicației noastre la o mărire de 100%.
Adăugați alte articole de știri individuale în aplicație duplicând straturile elementelor de știri, personalizându-le în mod corespunzător.
Adăugați o zonă de știri mai mare. Aceasta va fi afișată atunci când este selectată o știre individuală.
Puneți toate elementele de știri individuale și știrile mari în grupuri separate de straturi. Vreți să vă asigurați că fiecare strat este atent plasat într-un grup de straturi în funcție de elementul său.
De exemplu, doriți ca fiecare strat care a făcut prima secțiune de știri individuale să fie plasată împreună într-un grup de straturi, precum și elementele pentru articole de știri cu ecran complet din alte grupuri. Acest lucru vă va ajuta să lucrați mai ușor în timpul realizării animației.
Pentru moment, nu vom folosi această secțiune de știri. Deci, setați opacitatea la 0%.
Acum trebuie să proiectăm indicatorul de robinet. Creați un nou grup de straturi și denumiți-l Atingeți. Apoi, trageți o formă de cerc alb. Setați-o Opacitate la 50%.
Duplicați forma cercului apăsând Control-J. Faceți-o mai mare, setați accident vascular cerebral la 3 pct cu o culoare albă și scoateți-o Completati culoare.
Adăugați o altă formă de cerc, de data aceasta mai subțire. Setați dimensiunea cursei la 2 pt.
Ascundeți toate straturile din interiorul grupului de straturi pe care tocmai l-am făcut, deoarece nu doriți ca butoanele să apară atunci când UI este încărcat pentru prima oară, dar în schimb le va afișa numai când animația se fixează pentru a trece la un element selectat.
Acum, suntem gata să începem să construim animația din interfața cu utilizatorul. Deschide Cronologie apoi faceți un nou cadru.
Faceți un alt cadru nou.
Acum este momentul să dezvăluiți grupul de straturi de atingere. Atunci când afișezi o scenă derulantă, ascunde cele două cercuri mersi și vom folosi această condiție pentru a indica gestul de derulare. Acesta va apărea mai mult ca un accident vascular cerebral continuu, în timp ce cercurile mersului exterior dau un aspect de ripple mai consistent cu un singur robinet pentru a selecta un element.
Modificați durata la 1 secunda pentru primul cadru și 0,2 secunde pentru al doilea cadru.
Adăugați un alt cadru.
Activați funcția Atingeți grupul de straturi și toate straturile de rețea de știri. Utilizare Mutați instrumentul pentru a le muta în lista de straturi.
Pentru a face automat o animație netedă între cadrul curent și cel anterior, faceți clic pe Tween din Cronologie panou meniu.
Setați tween-ul la 5 pentru cadrul adăugat.
Acum, avem o animație a rețelei de știri care se mișcă în sus pe fiecare cadru.
Dacă credeți că animația este prea rapidă, puteți face mai lent selectând toate cadrele și stabilind durata până la 0,2 secunde.
Testați animația făcând clic pe pictograma de redare din Cronologie panou. Nu uitați să setați animația la Pentru totdeauna; în acest fel animația este înclinată.
Actuala noastră animație conține grila de știri care se mișcă în sus. În următorul cadru, trebuie să readusem la starea anterioară, astfel încât să continue fără probleme cu primul cadru. Pentru aceasta, copiați cel de-al doilea cadru și apoi lipiți-l în ultima poziție selectând Lipiți după selecție în caseta de dialog.
Aplicați Tween comanda din nou pentru a face o nouă animație între ultimele și ultima cadre.
Adăugați un nou cadru și ascundeți indicatorul de robinet.
Până acum, aceasta este animația pe care o primim, ceea ce ne oferă un interfață de bază de derulare.
Acum este momentul să animați selectarea unei linkuri din meniu. Mai întâi, faceți un nou cadru. În acest cadru, setați Opacitate meniul de text cu varianta boldă selectată din Toate din meniul setat la 0% și sportiv„stransparența variantei selectată este setată la 100%.
Activați grupul de straturi de atingere și dezvăluiți toate straturile acestuia. Schimbați durata cadrului la 0,2 secunde.
Creați un nou cadru cu o durată de 0,1 secunde. De data aceasta ascunde cercul cel mai subțire.
Adăugați un alt cadru și ascundeți cercul următor.
Adăugați un nou cadru și ascundeți grupul de straturi de atingere.
Faceți un cadru nou și apoi setați Opacitate din fiecare poveste de știri din rețea fără eticheta sportului 0%.
Tot în acest cadru, trageți știrile sportive individuale în sus în grilă, umplând spații goale deasupra lor.
Treceți între cadrul curent și cel anterior. Pentru animație mai rapidă, setați cadrele adăugate la 3.
Setați durata ultimului cadru la 2 secunde.
Pentru această atingere, aceasta este animația pe care o avem.
Apoi, vom selecta unul dintre articolele de știri și îl vom dezvălui pe ecran complet. Mai întâi, faceți un nou cadru cu durata 0,2 secunde apoi dezvăluie toate straturile din interiorul grupului de straturi de atingere.
Adăugați un cadru nou și stabiliți durata lui la 0,1 secunde. Ascundeți accidentele de cerc mai subțiri.
Adăugați un alt cadru și apoi ascundeți cercul următor.
Adăugați un alt cadru cu durata 0,1 secunde. Ascundeți grupul de straturi de atingere și creați un nou cadru. Descoperă secțiunea de știri pe care am făcut-o mai devreme Secțiunea 1 Etapa 28 prin setarea lui Opacitate la 100%. Ascundeți grila de știri mici prin setarea lui Opacitate la 0%.
Adăugați animație tween între cadrul curent și cele anterioare.
Asta este ceea ce avem pentru această animație.
Din Cronologie panou, faceți clic pe Ajustați cadrele în straturi.
Fiecare cadru va fi transformat într-un strat plat. Dacă aveți 33 de cadre, veți obține de asemenea 33 straturi plane: strat Cadrul 1 luate din conținutul cadrului 1, strat Cadrul 2 luate din cadrul 2 și așa mai departe.
Selectați toate straturile de cadre în straturi panou.
Trageți straturile pe fotografia iPhone pe care ați descărcat-o anterior.
În Cronologie panou, selectați Creați animație cadru apoi faceți clic pe Noul cadru buton.
Asigurați-vă că toate straturile sunt încă selectate. Lovit Control-T pentru a efectua o transformare. ține Control apoi trageți fiecare colț și plasați-le pe colțul ecranului.
Faceți un cadru nou pentru fiecare strat. Puneți stratul Cadrul 1 în primul cadru, strat Cadrul 2 în al doilea cadru, strat Cadrul 3 în al treilea cadru și așa mai departe. De asemenea, doriți să potriviți durata fiecărui cadru. Asigurați-vă că ați setat buclei la Pentru totdeauna, astfel încât animația va continua să se încrunte.
Uită-te la imaginea de mai jos pentru un exemplu. Strat Cadrul 23 este dezvăluit pe cadrul 23. Strat Cadrul 25 este dezvăluit pe cadrul 25 și așa mai departe. Continuați pentru fiecare cadru.
Este timpul să exportați rezultatul ca fișier GIF animat. Selectați Salvați pentru Web din meniul Fișier și selectați GIF ca tip de fișier. Redați-vă cu setările disponibile pentru a obține dimensiunea optimă a fișierului. Testați rezultatul animației făcând clic pe butonul de redare. Asigurați-vă că ați setat-o Opțiuni de buclă la Pentru totdeauna.
Și asta este: ați proiectat un UI demo pentru aplicații, l-ați animat și ați pus animația într-o imagine iPhone pentru a face animația să pară ca ea să fie difuzată pe un dispozitiv real.
Sper că ați găsit acest tutorial util. Puteți modifica pașii incluși pentru a lucra cu orice tip de aplicație pe care doriți să o demonstrați și puteți utiliza o altă imagine a dispozitivului pentru a afișa, de exemplu, o aplicație tabletă sau un site Web. De asemenea, puteți încerca și alte tipuri de interacțiune multi-touch în prezentarea finală, cum ar fi derularea înclinării sau mișcarea prin înșurubare, dacă modificați animațiile.
Dacă faceți propriile animații demo ale aplicațiilor utilizând acest tutorial, ne-ar plăcea să le vedem în comentariile de mai jos!
Accentsconagua