Share
În acest tutorial vom folosi Adobe Photoshop pentru a proiecta o interfață web elegantă care poate fi utilizată pentru orice site web pentru aplicații mobile. Vom acoperi o serie de tehnici, inclusiv forme, texturi, măști, icoane personalizate, tipografie și multe altele care pot fi ușor adaptate și aplicate pe propriile dvs. modele web.
Tutorial publicatLa fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în ianuarie 2011.
Acest tutorial se bazează pe designul întunecat, curat al site-urilor pentru Leaflet, o aplicație iPhone concepută pentru editori de piață Envato. Eric Alli de la Trilab Media a ajutat la proiectarea și codarea site-ului, așa că ne va umbla prin tutorialul pas cu pas. Indiferent dacă doriți să utilizați un design similar pentru proiectele proprii sau doriți doar să vedeți cum a fost făcut, există o mulțime de trucuri și tehnici excelente în acest tutorial pe care veți putea să le preluați. se bucura!
Să începem prin crearea unui nou document Photoshop selectând File> New.
Setați atât lățimea pantei, cât și înălțimea până la 1100 pixeli, Rezoluția la 72 și Conținutul de fundal alb.
Apoi, trebuie să creați două ghidaje care vor acționa ca container pentru pagina noastră.
Selectați Vizualizare> Ghid nou ...
Pentru primul ghid, setați orientarea pe verticală și poziția la 70 px.
Pentru cel de-al doilea ghid, selectați din nou Afișați> Ghid nou ... și creați un alt ghid vertical cu poziția setată la 1030 px.
Ar trebui să avem acum un spațiu prezentat în lățime de 960 de pixeli pentru pagina noastră.
Pasul următor este fundalul. Selectați Instrumentul Bucket Paint (G) și setați Swatch-ul culorii Foreground la "1e1e1e". Apoi, faceți clic oriunde pe panza pentru a aplica culoarea în stratul nostru de fundal.
Să adăugăm, de asemenea, un pic de textură în fondul nostru, selectând Filtrare> Noise> Adăugare zgomot ...
Setați suma la 2.5 și faceți clic pe OK.
Apoi vom crea un reflector care să vă ajute să adăugați focalizare în zona de sus a paginii noastre.
Selectați instrumentul Perie (B) și schimbați Diametrul Master la 400px și setați Duritatea la 0%.
Creați un nou strat selectând Layer> New> Layer ... și dați-i numele de "Spotlight".
Schimbați Swatchul Foreground Color la "FFFFFF" (alb) și creați un cerc în partea de sus a pânzei folosind instrumentul Brush.
Pentru a ajuta la amestecarea reflectorului în fundal, permiteți adăugarea unui zgomot în stratul de reflecție selectând Filtrare> Adăugare zgomot ...
Setați suma la 20, bifați Monocromatic și faceți clic pe OK.
Pentru a netezi lumina reflectoarelor, selectați Filter> Blur> Blur Gaussian ...
Setați Radius la 50.0 și faceți clic pe OK.
În cele din urmă, setați opacitatea pe stratul Spotlight la aproximativ 25%.
Apoi vom adăuga graficul telefonului nostru. Pentru acest tutorial voi folosi grafica iPhone de la superbul Vector iPhone 4 PSD din PSdtuts + care poate fi descărcat gratuit aici. De asemenea, rețineți că puteți utiliza orice grafic pe telefon care să se potrivească nevoilor dvs. speciale (Android, BlackBerry, etc ...).
Odată descărcat, deschideți PSD-ul în Photoshop. Extindeți folderul "Telefoane" din panoul Straturi, faceți clic dreapta pe dosarul "FRONT" și selectați Duplicați grup ... Aici dați grupului un nume ușor de recunoscut (am folosit "iPhone"), setați destinația la "Leaflet" vă denumiți PSD-ul pentru acest tutorial) și faceți clic pe OK. După ce ați terminat, închideți acest PSD.
Poziționați primul iPhone care atinge ghidul din stânga și în jur de 100 de pixeli din partea de sus a pânzei.
Acesta este, de asemenea, un moment bun pentru personalizarea ecranului în cadrul iPhone-ului.
O modalitate ușoară de a face acest lucru este de a extinde folderul "iPhone" din panoul nostru de straturi, apoi faceți clic pe folderul "SCREEN CONTENTS". Acum, selectați Fișier> Loc, alegeți captura de ecran din browser, apoi faceți clic pe Locați.
Glisați stratul plasat peste iPhone și redimensionați pentru a se încadra în ecran. După ce terminați, faceți clic pe Enter pentru a salva modificările.
Duplicați grupul "iPhone" selectând Layer> Duplicate Group ... nume-l "iPhone 2" și faceți clic pe OK în dialog.
Selectați Editare> Transformare> Scalare și extindeți iPhone duplicat la lățime și înălțime 107.0%. Poziționați acest iPhone în jur de 50 de pixeli din partea de sus și 200 de pixeli din ghidul din stânga.
Repetați pasul menționat mai sus pentru a înlocui captura de ecran din dosarul "iPhone 2".
Atingerea finală a iPhone-urilor noastre este de a crea o reflectare a acestora. Să începem prin selectarea ambelor grupuri iPhone ("iPhone" și "iPhone 2"), apoi selectați Layer> Duplicate Layers ... și faceți clic pe OK. Apoi selectați Layer> Merge Layers.
Apoi trebuie să ne răsturnăm iPhone-urile cu susul în jos. Selectați Editare> Transformare> Flip Vertical, apoi poziționați stratul răsturnat direct sub iPhone-urile originale.
Adăugați o mască de straturi făcând clic pe pictograma Mască strat din panoul Straturi.
Selectați instrumentul Gradient (G) și alegeți un specimen alb-negru. Desenați o linie de sus în jos pe iPhone-urile răsucite care au o înălțime de aproximativ 50px.
În cele din urmă, reduceți opacitatea stratului la 30%.
Următorul este să adăugați detaliile principale ale aplicației noastre în partea dreaptă a telefoanelor noastre. Înainte de a începe, permiteți adăugarea unui alt ghid pentru a păstra lucrurile aliniate. Selectați Vizualizare> Ghid nou ... selectați "Vertical" pentru orientare și 550 px pentru poziție.
La aproximativ 100 de pixeli din partea de sus a pânzei noastre, vom adăuga logo-ul nostru. Folosesc un logo pe care l-am făcut anterior, puteți folosi doar textul sau puteți insera aici propriul logo.
Sub sigla, vom adăuga un paragraf de text pentru descrierea aplicației noastre. Selectați instrumentul Tip orizontal (T) și desenați un dreptunghi între ghidajul central și ghidajul drept. Setați setările de caractere după cum urmează:
Apoi vom crea un buton pentru ca vizitatorii să achiziționeze aplicația noastră. Cu ajutorul instrumentului Rounded Rectangle (U), desenați un dreptunghi de 240x75px cu o rază de 4px. Aliniați-o, astfel încât partea stângă a butonului atinge ghidul central și este sub 45px sub text.
Acum vom aplica stiluri de straturi. Faceți dublu clic pe partea dreaptă a stratului din panoul Straturi și utilizați imaginea de mai jos pentru referință.
Pentru a adăuga pictograma Apple, trageți o mică casetă de text în interiorul butonului folosind Instrumentul de tip orizontal (T), apoi copiați și inserați acest simbol: în caseta de text și setați setările de caractere după cum urmează:
În cele din urmă, modificați opacitatea pe acest strat la 30%.
Creați o altă casetă text în partea dreaptă și adăugați 2 linii de text (ex .: "Descărcați acum în App Store"). Aplicați următoarele setări de caractere:
Adăugați un stil de strat la acest text utilizând următoarea imagine pentru referință:
Apoi, vom adăuga un separator în partea dreaptă a textului pe care tocmai l-am adăugat. Selectați instrumentul Linie (U) și ținând apăsată tasta SHIFT, desenați o linie de 1px din partea de sus a butonului spre partea de jos, apoi schimbați culoarea liniei în "FFFFFF" (alb).
Modificați opacitatea acestei linii la 15% și duplicați-o selectând Layer> Duplicate Layer ... și faceți clic pe OK. Modificați culoarea acestei linii duplicate la # 000000 (negru) și modificați opacitatea la 10%. Apoi, mutați linia duplicată 1px spre stânga.
Ultimul element care trebuie adăugat la acest buton este o pictogramă care indică descărcarea. Începeți prin selectarea instrumentului Ellipse (U) și creând un cerc cu diametrul de 25px.
Apoi, adăugați următoarele stiluri de straturi:
În final, apucați Custom Shape Tool (U) și alegeți o formă de săgeată (folosesc o formă implicită numită "Arrow 9"). Creați o săgeată mică în lățime de 10px în cerc și modificați culoarea la "FFFFFF" (alb).
Acum, pentru a crea o cutie mică pentru a afișa prețul aplicației noastre. Selectați Instrumentul rotunjit dreptunghiular (U), setați Radiusul la 4px și creați un dreptunghi care se suprapune butonul de descărcare și are o înălțime de 52px și orice lățime mai mare de 100px.
Modificați culoarea acestei casete la "2B2B2B" și mutați-o sub butonul de descărcare din panoul Straturi.
Apoi, adăugați un stil Stroke Layer în această casetă cu următoarele setări:
Acum putem adăuga informațiile despre prețuri reale. Pentru aceasta, vom crea două casete de text separate, deoarece conținutul necesită un stil diferit.
Pentru prima casetă de text, adăugați un text (am folosit "NUMAI") și aplica următoarele setări de caractere:
Pentru cea de-a doua casetă de text, adăugați-vă prețul (am folosit "$ 1.99") și aplicați următoarele setări de caractere:
Mergem în partea de jos a paginii noastre, trebuie să creăm o separare. Pentru aceasta, vom folosi tehnica de două linii pe care am aplicat-o mai devreme pe butonul de descărcare pentru a da separatorului un aspect "inset".
Selectați Instrumentul Linie (U) și mențineți apăsată tasta SHIFT, desenați o linie de 1px din ghidul din stânga la ghidul din dreapta, apoi schimbați culoarea liniei în "000000" (negru).
Modificați opacitatea acestei linii la 80% și duplicați-o selectând Layer> Duplicate Layer ... și faceți clic pe OK. Modificați culoarea acestei linii duplicat la "FFFFFF" (alb) și modificați opacitatea acesteia la 10%. Apoi, mutați linia duplicată de 1px în jos, deci este sub linia neagră.
În secțiunea de sub separatorul de linii pe care tocmai l-am creat, vom adăuga două coloane, pentru capturi de ecran și o listă de caracteristici.
Începând cu capturile de ecran, începeți să importați prima dvs. captură de ecran selectând File> Place. Alegeți captura de ecran din browserul de fișiere și faceți clic pe Locați. Redimensionați imaginea de ecran la o lățime și înălțime de 80%, apoi mutați screenshot-ul lângă ghidul din stânga și faceți clic pe Enter.
Selectați stratul din panoul Straturi și faceți dublu clic pe butonul "Adăugați masca" pentru a adăuga o mască vectorică.
Acum, selectați Instrumentul rotunjit dreptunghi (U) și modificați raza la 6px și creați un dreptunghi peste captura de ecran cu dimensiunea de 175x120px.
În cele din urmă, vom adăuga un stil Stroke Layer cu următoarele setări:
Repetați pașii de mai sus pentru toate capturile de ecran și le dați 35px spațiu între ele.
Pentru a separa capturile de ecran de caracteristici, trageți o linie de 1px din partea de sus a primei imagini în capătul ultimei imagini din ecran, care este în jur de 55 de pixeli din capturile de ecran.
Modificați culoarea liniei în "FFFFFF" (alb) și setați opacitatea la 5%.
Să adăugăm un titlu care să descrie caracteristicile noastre (am folosit "Caracteristicile listei"). Poziționați textul de 55px din linia de separare din stânga și utilizați următoarele setări de caractere:
Acum, să creați lista noastră de caracteristici și să o poziționați sub titlul. Creați o casetă text și adăugați cinci sau șase linii de caracteristici și le dați următoarele setări de caractere:
Repetați pașii de mai sus pentru a adăuga cerințele aplicației.
Pentru a face ca lista noastră de caracteristici să iasă în evidență, să creăm câteva gloanțe simple, personalizate.
Începeți prin deplasarea casetei de text cu 25px în partea dreaptă.
Acum, selectați instrumentul Ellipse (U) și creați un cerc cu diametrul de 9px la stânga primei caracteristici. Modificați culoarea cercului la "bce086".
Adăugați următorul stil de strat în cerc:
Acum trebuie să repetăm gloanțele noastre și să le aliniem la fiecare caracteristică. Începeți prin duplicarea stratului cerc selectând stratul, apoi făcând clic pe Layer> Duplicate Layer ...
Apoi, mutați stratul duplicat în jos cu 28 de pixeli (suma de titluri pe care am aplicat-o în lista de caracteristici). Repetați pașii de mai sus de trei ori.
Trecând la partea de subsol a paginii noastre, vom aplica din nou tehnica de două linii pe care am aplicat-o mai devreme Pasul 9 pentru a adăuga o separare.
Acum putem adăuga câteva linkuri utile în zona subsolului nostru. Mai întâi trebuie să creăm patru cutii de text, una lângă cealaltă, care să țină legăturile noastre.
Începeți prin a crea o casetă de text de aproximativ 160x40 px. Adăugați un text la acesta și repetați de 3 ori. Iată câteva exemple de text pe care le puteți utiliza:
Utilizați următoarele pentru setările de caractere:
Așa cum ați putea observa că cutiile noastre sunt neuniforme și nu sunt aliniate corect, nu vă faceți griji, vom stabili acest lucru în pasul următor.
Pentru a rezolva problemele legate de aliniere, începeți prin plasarea celor patru cutii de text pe care le-am creat mai sus într-un dosar și denumiți-o "Subsol".
Mai întâi, poziționați prima casetă de text 55px din ghidul din stânga, iar ultima casetă de text atingeți ghidul din dreapta.
Acum, selectați cele patru straturi de text din dosarul Footer și apucați Instrumentul de mutare (V). Faceți clic pe butonul Align center vertical (Centru vertical vertical), apoi pe butonul Distribute center centers (Centru distribuție orizontală) din bara de instrumente Move (Mișcare).
Acum putem adăuga câteva icoane personalizate pentru a accentua legăturile noastre.
Selectați instrumentul Ellipse (U) și creați un cerc cu diametrul de 36px lângă prima noastră casetă de text. Modificați culoarea acestui cerc la "FFFFFF" (alb).
Acum, selectați Layer> Rasterize> Layer.
Următorul pas este să adăugați pictograma noastră în acest cerc. Pentru prima pictogramă, folosesc Twitter "t" pe care l-am descărcat gratuit aici.
Odată descărcat, selectați Fișier> Plasare în Photoshop pentru a importa pictograma în documentul nostru. Odată importat, redimensionați pictograma la 28% lățime și înălțime, poziționați-o peste cercul nostru, apoi faceți clic pe enter.
Apoi, dați clic dreapta pe miniatura pictogramei Twitter din panoul Straturi și faceți clic pe Selectați pixeli.
Acum, selectați stratul cerc din panoul Straturi, apoi selectați Editare> Ștergere.
Ștergeți pictograma Twitter importată selectând-o în panoul Straturi și faceți clic sau trageți-o în pictograma Trash.
În cele din urmă, reduceți opacitatea pe stratul de cerc la 15%.
Pentru restul icoanelor prezentate mai sus, repetați pașii din Pasul 18 utilizând alte icoane sau cu forme personalizate în Photoshop.
Pentru a adăuga o notă finală la link-urile noastre din subsol, permiteți-i să le dea un șut de culoare pentru a le ajuta să iasă în evidență.
Utilizând Instrumentul pentru text orizontal (T) evidențiați o parte din text în fiecare casetă de text și modificați culoarea la "83b546".
Asta e tot! Sper că v-ați bucurat de acest tutorial și ați găsit câteva tehnici utile pe care le puteți adapta / aplica la următorul design.
Accentsconagua