Share
Să creați un gif animat de pre-încărcare pentru următorul dvs. proiect UI. Veți avea nevoie de versiunea extinsă Photoshop CS3 sau de mai sus.
Vom crea un animat GIF care poate fi folosit pentru o multitudine de widget-uri, ori de câte ori ajax este solicitat, fișierele sunt încărcate, indiferent de ce vă place. Simțiți-vă liber să amestecați propriile stiluri și variante cu încărcătorul pe măsură ce mergem împreună. Există trei secțiuni majore pe care le vom întreprinde:
Gata. A stabilit. Merge…
Începeți prin configurarea dimensiunii pânzei și adăugați un fundal rapid pentru a începe.
Doar pentru lovituri, vom adăuga un model căptușit în fundalul nostru și apoi vom începe să lucrăm la încărcător.
Creați un nou document transparent: (7px-7px). Desenați o linie diagonală cu un instrument creion neagră de 1px (faceți clic pe pixelul din stânga sus, țineți apăsată tasta de deplasare și faceți clic pe pixelul din dreapta jos)
Definiți și denumiți modelul (meniul Editare> Definiți modelul).
Atingeți acest lucru, reveniți la documentul original și creați un stil de strat de "Suprapunere de tip" pe stratul nostru de fundal gri: (meniu Layer> Style Layer> Overlay Pattern). Alegeți modelul din caseta de model și reduceți opacitatea (am folosit 20%).
Vom crea câteva mărci care vor acționa ca ghiduri pentru a ne ajuta în timp - vom folosi comanda "Transform Again" pentru a grăbi lucrurile.
Desenați o linie albă verticală de 1px cu instrumentul de linie de pe documentul dvs.:
Pentru a vă asigura că este aliniat în centru, selectați atât stratul său, cât și stratul de fundal, apucați instrumentul de mutare și faceți clic pe opțiunea "Aliniere centre orizontale" astfel:
Rotiți linia de 45 ° (Selectați meniul Editați> Transformare liberă || Control / Comandă + T)
Selectați meniul Editare> Transformare> "Transformați din nou" în timp ce țineți apăsată tasta "Option / Alt" (Comandă / Control + Opțiune / Alt + Shift + T)
Efectuați acea comandă de mai multe ori până când linia se rotește tot drumul, ca de exemplu:
Folosind aceeași tehnică ca cea explicată mai sus, vom adăuga câteva semne de bifare pe fiecare linie a grilei pentru a face ca încărcătorul să meargă rotund și rotund ... Aici merge.
Adăugați niște ghidaje în jurul locului în care doriți să apară semnul "Tick Mark" inițial (asigurați-vă că ghizii sunt pe pixeli întregi, nu împărțiți pixeli).
Creați un dreptunghi rotunjit cu o rază de 1px în liniile noastre de ghidare (asigurați-vă că ați activat apăsarea pentru ghidaje: meniul Vizualizați> Snap)
Folosind Instrumentul de selecție directă mișcați colțurile inferioare (nodurile) de formă dreptunghiulară a căpușei spre interior, astfel încât forma se înclină.
Utilizați același truc "Transform Again" pe care l-am folosit mai sus, pentru a duplica forma în jurul marcajelor noastre (Când rotiți 45 °, asigurați-vă că ați setat punctul de transformare în centrul grilajului, nu centrul căderii dreptunghiului forma, în cazul în care acesta este implicit).
Selectați meniul Editare> Transformare> "Transformați din nou" în timp ce țineți apăsată tasta "Opțiune / Alt" (Command / Control + Option / Alt + Shift + T). Ar trebui să arate astfel:
Verificarea stratului: asigurați-vă că panoul dvs. de straturi arată astfel:
Pfiu. Avem toate formele de încărcare pre-încărcate, acum vom adăuga o grămadă de stiluri de straturi pentru a sparge lucrurile puțin. Ca de obicei, sare la gust. Vom adăuga stiluri de straturi care pot fi găsite în meniul "Layer> Styles Layer".
Adăugați un strat de strat "Color Overlay" la stratul de căpușe (am folosit # 242424).
Adăugați un strat de strat "Drop Shadow" la stratul de căpușe:
Adăugați un strat de strat "Inner Shadow" la stratul de căpușe:
Încărcătorul ar trebui să arate astfel:
Există câteva moduri în care putem trece la acest următor bit, dar pentru a simplifica lucrurile vom dubla stratul de căpușe de cinci ori și apoi vom șterge toate căpușele de formă care nu aparțin acelor straturi de formă specifice. Nu vrem să se suprapună semnele de căpușe din straturile de mai jos, pe măsură ce stilurile de straturi pe care le adăugăm s-ar putea stivui, provocând efecte de vedere exagerate.
Duplicați stratul de bază de bifați de patru ori, apoi începeți ștergerea marcajelor pe fiecare dintre straturi până când ajungeți la următoarele:
Puteți utiliza instrumentul Selecție directă pentru a șterge formele de bifare din fiecare strat.
Acum vom adăuga câteva stiluri pentru fiecare dintre straturile individuale de marcare pe care le-am separat. Voi face referire la propriile nume de straturi.
Pentru stratul denumit "Shine-Active", adăugați / modificați stilul stratului "Outer Glow":
La același strat, adăugați / modificați stilul stratului "Inner Glow":
Apoi adăugați / modificați stilul stratului de culoare "Overlay" (am folosit # 0087c6):
Pentru stratul numit "Shine-Fading1", adăugați stilurile exact aceleași de mai sus, omițând stilul stratului "Outter Glow":
Pentru stratul denumit "Shine-Fading2", adăugați / modificați stilul stratului "Inner Shadow":
În același strat, adăugați / modificați stilul stratului "Inner Shadow" (am folosit # 0087c6).
Apoi, la stratul numit "Shine-Fading3", adăugați / modificați stilul stratului "Inner Shadow" (notați și schimbarea opacității):
Încărcătorul ar trebui să arate acum ceva asemănător (stiluri de strat tweak la preferințele dvs.):
Bine, avem stilurile de bază configurate, acum e timpul să replicăm straturile o grămadă întregă (ceea ce va face animație un snap) și să ne creăm animatul .gif
Grupează toate straturile care alcătuiesc marca noastră (evidențiați-le pe toate + meniul stratului> straturi de grup)
Duplicați întregul grup, apoi rotiți-l cu 45 ° (meniul Editare> Transformare liberă). Repetați pasul 2 până când ați rotit marcajul în întregime (veți avea în total opt grupuri).
Încărcătorul dvs. ar trebui să arate astfel:
Bine, straturile noastre sunt pregătite și suntem gata să animăm. O să rămânem cu o schemă obișnuită de animație cu cadre, deși am putea realiza aceleași lucruri cu animația bazată pe cronologie.
Deschideți Panoul de animație: (Fereastră> Animație). Dezactivați toate straturile de grupuri de bifare, cu excepția primului, apoi faceți clic pe butonul "Duplicați cadrele selectate" din panoul de animație.
Opriți primul strat grupat și activați al doilea strat grupat.
Repetați pasul anterior pentru fiecare dintre straturile de grup. Evidențiați toate cadrele din stratul de animație (Shift + Faceți clic pe fiecare cadru) și setați durata cadrului la 0,1 sec
Selectați Fișier> Salvare pentru Web și dispozitive și utilizați următoarele setări pentru animația .gif
Deschideți .giful într-un browser web și admirați noul dvs. încărcător de fantezie! În cele din urmă, faceți niște înghețată.
Asta e. Sper că ți-a plăcut să creezi încărcătorul! A fost distractiv pentru mine să înființez. Încărcați și conectați-vă la unele dintre creațiile dvs. din comentarii și adresați-vă întrebărilor pe care le puteți avea.
Accentsconagua