Share
În acest tutorial vă voi îndruma prin procesul de creare a unei interfețe simple, festive pentru o aplicație web în Photoshop CC. Conceptul din spatele aplicației este că utilizatorii se pot conecta cu Twitter și pot scrie o dorință de Crăciun pe o consiliu public, creând efectiv o mare carte poștală de Crăciun. Ne vom uita la tipografia de styling, combinând o paletă de culoare plată și realizând o compoziție curată și spațioasă.
Pentru a finaliza acest tutorial, veți avea nevoie de următoarele (disponibile în mod gratuit)
Creați un document nou (Fișier> Nou ... ) folosind setările de mai jos.
Nu uitați să vă asigurați că rezoluția este setată la 72 pixeli / inch Să stabilim niște ghidaje astfel încât aspectul nostru să fie centrat corect și secțiunea principală (deasupra "ori") să fie separată. Mergi la Vizualizare> Ghid nou ... și setați următoarele linii directoare: vertical la 200px, 700 de pixeli și 1200px, și orizontală la 200px, 800px și 1590px.
Vom păstra documentul bine organizat încă de la început, așa că creați grupuri cu trei straturi numite Antet, Corp și Subsol. Lipirea acestei etichete Photoshop va păstra lucrurile organizate și va fi ușor de navigat sau editat. Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictogramă.
În interiorul Antet grupul crea un nou grup și îl numește TOP BG. După aceea, selectați Instrumentul dreptunghiular (T) și trageți a 1400x800px dreptunghi. Acesta trebuie plasat în partea de sus a documentului la prima orientare orizontală.
Descărcați fotografia de pe cerul de noapte de pe unsplash.com (o resursă genială pentru 100% imagini gratuite) și plasați-o peste dreptunghiul creat (puteți glisa imaginea direct din browser în fereastra Photoshop). Apoi, țineți apăsată tasta ALT și mouse-ul deasupra fundului stratului de fotografie. Când apare săgeata, eliberați-o pentru a crea o mască de tăiere. Odată ce ați terminat cu acel clic T Cmd + și redimensionați fotografia pentru a se încadra în interiorul dreptunghiului, ținând apăsat Schimb cheie pentru ao reduce proporțional.
Acum, faceți clic pe butonul drept al mouse-ului de pe stratul de fotografie (pentru a afișa un meniu contextual) și selectați Opțiuni amestecate… . Apoi faceți clic pe Suprapunere de culori și setați culoarea la negru # 000000. În cele din urmă, reduceți Opacitate la 40%.
Acum pentru un grup nou. Faceți clic pe săgeata mică de lângă TOP BG pentru ao restrânge, creați apoi un grup nou numit Arborele Badge deasupra.
Schimbați culoarea primului la alb #FFFFFF și selectați Instrument de poligon (U). Seteaza feţe opțiunea pentru 6 și trageți a 128x146px formă. Asigurați-vă că acesta se află în poziție verticală.
Acum vom crea o formă de Crăciun. Schimbați culoarea primului rând la # 42a747 și alegeți Instrument Pen (P). Creați un strat nou deasupra formei poligonului și plasați câteva puncte cu instrumentul creion pentru a crea jumătate din copac. Deținere Schimb în timp ce face acest lucru va constrânge unghiul de căi, dacă aveți nevoie.
După ce trageți o jumătate din copac, faceți clic pe CMD + J pentru a duplica stratul. Apoi transformați forma (T Cmd +) și modificați lățimea la -100.00%, acest lucru ne va inversa efectiv forma peste axa verticala. Poziționați această nouă formă alături de original și faceți clic de două ori pe miniatură de strat pentru a schimba culoarea acesteia într-un verde mai închis # 38993d. Acum avem o ilustrație plăcută a insignei noastre de pom de Crăciun.
Încă mai lipsim trunchiul copacului. Creați un nou strat și alegeți Instrumentul dreptunghiular (U). Setați culoarea primului la maro # 795000 și trageți a 10x11px dreptunghi sub copacul nostru de Crăciun.
Cu semnul nostru de copac completat, dați clic pe săgeata mică de lângă numele grupului pentru ao minimiza, astfel că este nevoie de mai puțin spațiu în panoul nostru de straturi. După aceea, creați un grup nou numit Copie, apoi schimba culoarea primului la alb #FFFFFF și selectați Instrument tip orizontal (T). Apoi, presupunând că ați instalat deja fontul în sistemul dvs., selectați Klinic Slab. Alege Ușoară și setați dimensiunea punctului la 62pt. Scrieți copia după cum se arată mai jos sau creați propria linie de legătură, plasându-o 50px sub prima orientare orizontală.
Utilizați varianta de font Light Italic pentru versiunea "Thank You" Schimbați dimensiunea fontului la 42pt și scrie "și doresc prietenilor tăi un". Pune-l 30px sub nivelul textului anterior, asigurându-vă că acesta este centrat.
Întoarceți-vă la Arborele Badge grup, extindeți-l și țineți apăsat CMD butonul selectați straturile celor două jumătăți ale arborelui. Lovit CMD + J pentru a le duplica. Apoi, redenumiți layerul la brad de Crăciun și mutați-l în Copie grup. Faceți clic de două ori pe miniatură și modificați culoarea alb #FFFFFF. Lovit T Cmd + pentru a transforma obiectul și țineți apăsat Schimb butonul (pentru a restrânge proporțiile) scala-l până la 32x27px , plasându-l în fața stratului nostru de text creat anterior.
Acum duplicați stratul de arbore Xmas făcând clic pe CMD + J și plasați-o imediat după stratul de text, păstrând același spațiu între aceste două straturi, în jur 20px. Apoi selectați Instrument tip orizontal (T) din nou, păstrând același font ca înainte și modificând varianta fontului Ușoară la Carte. Introduceți următorul text "Crăciun fericit!".
Timp pentru ceva diferit. Selectează Instrumentul de linie (U), a stabilit Greutate la 3px (puteți găsi această setare în bara de sus) și trageți o linie, ținând apăsată Schimb deci este perfect drept. Pune-l 20px sub "Crăciun fericit!" text. Duplicați această linie lovind CMD + J, apoi mutați-o 3px sub prima.
Asta este pentru grupul de copiere, deci minimizați-l făcând clic pe săgeata mică de lângă numele grupului. Creați un grup nou și denumiți-l Conectează-te cu Twitter, alegeți Instrument rotunjit dreptunghiular (U), a stabilit Rază la 99px și schimba culoarea primului la un roșu de Crăciun # cf2f32. După aceea, trageți a 250x57px dreptunghi și plasați-o 60px sub liniile create anterior.
Faceți clic dreapta pe stratul de formă pentru a afișa meniul contextual și selectați Opțiuni amestecate… . Apoi schimbați Accident vascular cerebral, setarea la 2px. Modificați culoarea la roșu folosit anterior # cf2f32 și stabilit Interior pentru Poziţie. Lovit O.K.
Setați stratul de butoane Completati la 0%.
Avem nevoie de un text pentru butonul nostru. Cu Instrument tip orizontal (T) selectați, alegeți Open Sans (Regular), setați dimensiunea la 18pt și utilizați aceeași culoare roșie ca înainte. Scrie "Conectează-te cu Twitter". După aceea, țineți apăsată tasta CMD și treceți deasupra miniaturii de strat de formă dreptunghiulară creată anterior până când vedeți o nouă pictogramă cu margini punctate. Când o vedeți, faceți clic pe ea pentru a face o selecție a acelui strat. Apoi, selectați stratul de text, apăsați V și aliniați-o orizontal și vertical folosind instrumentele de aliniere afișate în imaginea de mai jos.
Lovit CMD + D pentru a deselecta butonul. Minimizați grupul și găsiți Arborele Badge grup. Selectați-l și apăsați CMD + J pentru a le duplica, sau faceți clic dreapta pe el și selectați Grup duplicat ... . Extindeți grupul și ștergeți totul, cu excepția celor două jumătăți ale copacului. Plasați noul nostru copac 50px sub buton.
Minimizați Antet grup și deschideți Corp grup. Alegeți Instrumentul dreptunghiular (U), schimba culoarea primului la # E9E9E9 și trageți a 1400x790px dreptunghi între prima și a doua orientare orizontală. Faceți dublu clic pe numele stratului și redenumiți-l la BG.
Acum creați un grup nou numit Dori. Schimbați culoarea primului la alb #FFFFFF și alegeți Instrument rotunjit dreptunghiular (U) cu Rază de 5px . Desenați un dreptunghi de 485x175px.
Din nou, creați un nou strat, alegeți Instrument de rectangulare (U) și ținând apăsată tasta Schimb trageți cheia a 30x30px dreptunghi. Lovit T Cmd + și, ținând Schimb cheie, rotiți-l la 45.00 ° , plasându-l 10px deasupra dreptunghiului rotunjit și 10px la dreapta de la prima orientare verticală.
După ce ați creat două forme, țineți apăsat CMD selectați ambele forme și mergeți la Layer> Forme de îmbinare. După aceea, dați clic pe butonul din dreapta al mouse-ului pe stratul de formă nou îmbinat și selectați Opțiuni amestecate… . Verifica Umbra, Schimbare Mod amestec la Normal, Opacitate la 5%, Unghi 90 °, debifați Lumina globală opțiune, setat Distanţă la 2px, Spread și mărimea la 0. (Pfiu!)
Alegeți Instrument tip orizontal (T), Selectați Open Sans (Bold), setați dimensiunea la 13pt, schimba culoarea primului la gri # a3a3a3 și scrieți ora și data exemplului dorit, de ex. 22:13 - 28 NOIEMBRIE 2013.
Timp pentru un avatar. Creați un grup nou numit PIC și plasați-o deasupra stratului de formă rotunjită. Selectează Instrument de elipsă (U) și, ținând jos Schimb cheie, trage un cerc de 90x90px. După aceea, mutați-o 20px de sus și de sus 20px la dreapta de la prima orientare verticală.
Acum, mergeți la uifaces.com, un site de stocuri cu drepturi de autor gratuit (puteți chiar să vă adăugați propria dvs. dacă doriți să o sprijiniți). Alegeți o față cu care vă simțiți atrasă și copiați-o în clipboard. După aceea, reveniți la documentul Photoshop și lipiți-l făcând clic CMD + V, asigurându-vă că se află chiar deasupra stratului de cerc.
Apoi țineți apăsat ALT cheie și mouse peste stratul de imagine lipit până când vedeți o săgeată în jos. Când o vedeți, faceți clic pe ea pentru a crea o Mască de tăiere. Apoi utilizați Mutați instrumentul (V) să o plasați în centrul cercului și să o loviți T Cmd + să îl redimensionați dacă este necesar.
Minimizați PIC grup și selectați Instrument tip orizontal (T) din nou, setați culoarea primului la # 2f2f2f, Selectați 26pt dimensiuni Klinic Slab (Medium) și scrieți numele autorului. Pune-l 30px de sus și de sus 20px chiar din imaginea autorului.
Din nou, schimbați culoarea prim-planului la culoarea roșie folosită anterior # cf2f32, modificați fontul la Open Sans (Semibold) 16pt dimensiunea și scrieți numele de utilizator Twitter al autorului. Folosim această culoare pentru a diferenția de text, astfel încât este percepută ca o legătură.
Schimbați culoarea primului la gri închis # 878787, reduceți dimensiunea fontului la 14pt, schimbați greutatea fontului la Regulat și scrieți un mesaj de tip tweet (dorință). Asigurați-vă că înălțimea liniei este setată la 21pt, pentru a oferi o cameră de respirație, astfel încât dorința noastră să fie lizibilă. Pentru a face acest lucru, du-te la Fereastră> Caracter iar pe panoul caracterului setați înălțimea liniei la 21pt.
Al nostru Dori grupul este făcut, deci minimalizați-l, apoi utilizați Mutați instrumentul (V) mișcă-l 60 px sub zona antetului. Duplicați Dori grup prin lovire CMD + J sau făcând clic pe butonul din dreapta al mouse-ului pe numele grupului și selectând Grup duplicat ... . Mutați acest grup duplicat spre dreapta, astfel încât colțul să se alinieze cu ultima orientare verticală. Modificați numele, imaginea avatarului și dorința prea.
Acum dublează încă patru Dori grupați și plasați-le în două coloane. Utilizare 30px de spațiu de dedesubt și de mai sus. Pentru ultimul rând, utilizați 50px din spațiul de sub grupuri, pentru ao menține în concordanță cu distanța din partea de sus a paginii Corp grup. Schimbați numele, numele de utilizator Twitter, dorințele și avatarele, pentru a face să pară mai naturală, în loc să lăsați conținut dublu.
Ultimul pas pentru zona de dorințe este adăugarea unor hyperlink-uri și hashtags (deoarece acestea sunt dorințe de la Twitter). O să luăm verdeața folosită anterior # 42a747 și Semibold greutate font pentru a face link-uri și hasthtags diferite și percepute ca clickable. Pur și simplu utilizați Instrument tip orizontal (T) pentru a selecta o hashtag sau url, evidențiați-o, schimbați greutatea fontului Semibold și culoarea verde.
Miscând mai mult în jos aspectul paginii, acum vom proiecta zona subsolului.
Începeți prin a minimiza Corp grup și extinderea Subsol grup. Setați culoarea primului rând la # 727272, alegeți Instrument tip orizontal (T) și alegeți Klinic Slab (Mediu) la 26pt . După aceea, scrieți următorul mesaj: "Vă mulțumim familiei, prietenilor și urmașilor". Pentru a-l menține consecvent, dați-i suficient spațiu alb și mutați-l 60 px în jos din grupul Body.
Creați un grup nou numit Caseta cu mesaje, setați culoarea primului la # f7f7f7 și alegeți Instrument rotunjit dreptunghiular (U) cu un rază de 5 pixeli. Desenează un 525x220px dreptunghi, plasându-l 30px sub titlul.
Extindeți acum Corp grup, găsiți Dori grupați și extindeți, de asemenea, apoi găsiți PIC grupați-l și duplicați-l lovind CMD + J. Trageți grupul duplicat la dvs. Caseta cu mesaje grup, plasându-l deasupra stratului anterior creat. Acum minimalizați toate grupurile deschise, selectați copia recentă PIC grupați și redimensionați-l 28x28px prin lovirea T Cmd +.
Trebuie să arătăm o identificare, cine postă dorința, așa că vom folosi numele de utilizator Twitter al utilizatorului. Setați culoarea primului rând la # 878787, alegeți Instrument tip orizontal (T) și alegeți Open Sans (Semibold) la 14pt. Scrieți următoarele: "Conectat ca @ nume de utilizator".
Să creați un buton de deconectare, deci dacă utilizatorii doresc să-și schimbe contul sau doar să deconecteze, vor avea opțiunea de a face acest lucru. Creați un grup nou numit Deconecta, setați culoarea de fundal la alb #FFFFFF și alegeți Instrument rotunjit dreptunghiular (T) cu o rază de 99px . Desenează un 90x24px dreptunghi.
Schimbați culoarea primului la gri # 878787 și alegeți Instrument tip orizontal (T). Alege Open Sans (Bold) la 10pt și scrieți "Deconectați". Puneți-o în centrul butonului.
Minimizați Deconecta , setați culoarea primului la alb #FFFFFF și alegeți Instrumentul de linie (U), setați Greutatea la 1px și mențineți apăsată tasta Schimb trageți o linie orizontală peste forma casetei de mesaj. Pune-l 10px în jos de la imagine.
Schimbați culoarea primului rând la # b2b2b2 și alegeți Instrument tip orizontal (T). Alege Open Sans (Regular), setând dimensiunea fontului la 18pt și scrieți o copie după eșantion.
Minimizați Caseta cu mesaje grupați și creați unul nou numit Mulțumesc Button. După aceea, setați culoarea primului la verde # 42a747 și alegeți Instrument rotunjit dreptunghiular (U) cu o rază de 5px și trageți a 525x60px dimensiunea dreptunghiului. Pune-l 20px sub forma casetei de mesaj.
Faceți dublu clic pe stratul de formă sau faceți clic dreapta și selectați Opțiuni amestecate… . Selectați Umbra și aplicați opțiunile afișate mai jos, codul de culoare pentru verde utilizat este # 349239.
Schimbați culoarea primului la alb #FFFFFF și alegeți Instrument tip orizontal (T) cu următoarele setări: Open Sans (Îndrăzneţ) 18pt. După aceea, scrieți "Postați" Vă mulțumim "și plasați textul în centrul butonului.
Minunat că aproape am terminat! Acum minimalizați Mulțumesc Button grupați și creați unul nou numit Stare de nervozitate. Modificați culoarea primului rând la culoarea mărcii Twitter # 00acee și alegeți Instrument rotunjit dreptunghiular (U) cu Rază de 99px. După aceea, trageți a 160x35px dreptunghi și puneți-l 30px sub butonul verde și 10px la stânga ghidului de mijloc.
Schimbați culoarea primului la alb #FFFFFF și alegeți Instrument tip orizontal (T) cu următoarele setări: Open Sans (Semibold) la 12pt. Scrieți "TWEET THE LOVE" și puneți-l în mijlocul butonului.
Minimizați Stare de nervozitate grupați-l și duplicați-l lovind CMD + J. După aceea, faceți dublu clic pe numele grupului și redenumiți-l la Facebook. Plasați-o pe partea opusă, schimbați formularea, apoi schimbați culoarea butonului # 3b5998.
Minimizați Facebook grup, schimbați culoarea primului # 878787, alegeți Instrument tip orizontal (T) și alegeți Open Sans (Semibold) la 14 pct . Notați-vă linia de drepturi de autor și ... ați terminat!
Deci, tu o ai. Te-am urmărit prin crearea unui layout de site-uri, de la zero, într-o manieră organizată și eficientă.
Sper că ați învățat ceva nou în urma acestui tutorial. Dacă aveți întrebări sau aveți dificultăți, vă rugăm să nu ezitați să mă pingați în secțiunea de comentarii sau prin Twitter.
Accentsconagua