Share
Faceți-o, există o aplicație pentru aproape orice. Cu aplicații noi vine inovația în modul în care putem prezenta produsele noastre mobile clienților potențiali. Apple ne-a binecuvântat cu un brand frumos lucios și elegant, care construiește, de fapt, site-uri web excelente pentru noi. Acest tutorial va duce un pas mai departe, încorporând un stil ilustrativ sub glossul Apple, pentru a reuni o pagină de destinație unică.
Faceți-o, există o aplicație pentru aproape orice. Cu aplicații noi vine inovația în modul în care putem prezenta produsele noastre mobile clienților potențiali. Apple ne-a binecuvântat cu un brand frumos lucios și elegant, care construiește, de fapt, site-uri web excelente pentru noi. Acest tutorial va duce un pas mai departe, încorporând un stil ilustrativ sub glossul Apple, pentru a reuni o pagină de destinație unică.
Poate că sunt școală veche, dar încă mai iubesc site-ul fixat la 960 de pixeli. Este un număr atât de frumos rotund, divizibil cu 1, 2, 3, 4, 5, 6, 8, 10, ceea ce face mult mai ușor să lucrezi cu o pseudo-grilă. Acest tutorial nu este diferit; așa că am creat un document nou de 1000px la 1200px cu indicații care scot centrul pentru un design de 960px la 1200px.
Apoi vom seta coloanele pe care le vom folosi pentru restul proiectului. Am ales 3 coloane, cu 40 de pixeli între ele. Coloanele de la stânga la dreapta sunt 240px, 390px, 240px.
Din moment ce dorim ca designul nostru să arate ca și când stă într-un raft, avem nevoie de un tip de tapet care să stea în spatele acestuia.
Creați un nou strat și umpleți întregul strat cu alb (Shift + F5). Apoi, mergeți la proprietățile stratului dvs. și suprapuneți modelul dvs. ornat (depășesc crearea modelului, deoarece presupun că toată lumea știe deja cum să facă acest lucru).
După aplicarea stilului stratului, documentul nostru ar trebui să arate astfel:
Vom crea un strat nou care se va întinde pe întregul document și va avea în jur de 140 de pixeli înălțime. Vom folosi aceeași tehnică ca și pasul 2, deși vom fi aplicați o textura de lemn în loc de textura ornamentată. Încă o dată, există sute de site-uri care dau departe texturi gratuite de lemn: Google caută texturi din lemn liber
Rezultatul ar trebui să fie așa:
Redenumiți acest raft al stratului.
Rafturile arată puțin plat, așa că trebuie să adăugăm o adâncime folosind gradiente, umbre și accente. Adăugați noi stiluri de straturi pentru: Stroke, Drop Shadow & Gradient Overlay după cum urmează:
S-ar putea să vă spuneți că umbra picăturilor arată chiar urât acum. De acord; dar nu va arăta așa de aspru când vom primi cărțile în fața ei. Acesta ar trebui să arate documentul dvs. acum:
Apoi, vom crea marginea din față a raftului. Duplicați (Command + J) stratul "raft" și redenumiți-l "partea frontală a raftului". Deplasați stratul "frontal al raftului" în jos, astfel încât partea inferioară a stratului "raft" să se alinieze cu partea superioară a stratului "superior al raftului". Decupați 20 de pixeli din partea de jos a stratului superior al raftului, astfel încât înălțimile să fie diferite. Vrem să dăm iluzia că raftul este mai adânc decât partea din față a raftului este înaltă.
Apoi, trebuie să modificăm unele stiluri de strat pentru stratul "de sus al raftului". În primul rând, trebuie să mutați stratul "frontal al raftului" sub stratul "raft" din paleta Straturi. Apoi vom inversa gradientul (și vom scădea opacitatea acestuia), deoarece vrem ca umbra să fie pe partea inferioară în loc de partea de sus. Procedând astfel, vom crea o sursă de lumină care se află în colțul din față al raftului - chiar în cazul în care vom arăta cărțile noastre și ecranul iPhone.
După aplicarea tuturor stilurilor de straturi, imaginea ar trebui să arate astfel:
Acum ne-am putea opri aici, dar cred că există doar un mic detaliu care lipsește pe raft. Colțurile încă par a fi puțin plane și dorim ca aceasta să aibă o adâncime de adâncime, așa că vom adăuga câteva linii simple de înalte de 1px, pentru a da acea extra plusare a adâncimii.
Creați linia chiar sub limita de 2px a cursei de tip "raft". Apoi, puteți alege o culoare care să fie umplută (Shift + F5) care este mai ușoară decât toată boabele de lemn ale raftului sau pur și simplu completați cu alb și reglați opacitatea. Rezultatul, vă va oferi acel extra bit de adâncime:
Ne vom reutiliza modelul de lemn de la crearea raftului de mai sus pentru a crea un tip de "spate" în raftul nostru de bibliotecă. Ideea de aici este să facem să pară ca și cum am setat iPhone-ul și cărțile din partea superioară a raftului, și să avem informațiile noastre suplimentare înăuntru. Vom crea acest strat sub straturile de raft din stiva.
Creați o selecție, o umplere cu modelul dvs. de lemn (Shift + F5). Redenumiți acest strat "din spatele raftului".
Deoarece sursa noastră de lumină este îndreptată spre colțul din față al raftului, trebuie să facem ca spatele să fie puțin mai întunecat pentru a face să pară mai mult ca un raft de carte cu adâncime și mai puțin ca podele din lemn. Este ușor să faceți acest lucru cu stiluri de straturi; Adăugați un strat de strat "Color Overlay" pe stratul "spate al raftului" și setați culoarea la Negru. Reglați opacitatea la 50%, iar acum ar trebui să vedeți pădurea mai întunecată pentru partea din spate a raftului.
După o ușoară ajustare cu opacitatea fundalului meu ornat, imaginea ar trebui să arate cam așa:
Acum, după ce am creat tot documentul nostru, precum și toate straturile de fundal create pentru temă, vom continua și vom crea toate elementele care vor sta deasupra fundalului (din punct de vedere tehnic, în fundal).
Pentru emblemă, am ales fontul Rockwell (este obsesia mea din târziu) la 60px. Creați un nou text cu text: "Citiți-l". Pentru a obține senzația de balon, trebuie să adăugăm câteva stiluri de straturi pentru cursa, suprapunerea gradientului, umbra interioară, strălucirea exterioară (aproape fiecare stil de stil pe care îl puteți adăuga). Iată setările:
Odată ce ați aplicat stilurile de straturi, aliniați-vă logo-ul la ghidul din dreapta. Ar trebui să arate ceva de genul:
Acum avem nevoie de panglica pentru "i". Vom începe prin a crea o nouă formă (pe care am creat-o de la zero cu instrumentul Polygonal Lasso). Completați selecția cu orice culoare. Ar trebui să fie în acest sens:
Deoarece un marcaj negru solid este extrem de urât, trebuie să adăugăm ceva strălucire. Tot ce avem nevoie aici este o Shadow Drop, Stroke & Gradient Overlay pentru a face ca panglica să iasă în evidență:
Panglica de marcaj ar trebui să se placă acum:
Tot ce a mai rămas este să adăugați "i", pe care vom folosi același font (Rockwell) cu text alb. Adăugați o umbră interioară ușoară (70% opacitate, 90 de grade, distanță: 1; Choke: 0; dimensiune: 1) și ar trebui să fiți setați. Am adăugat un model la marcajul meu, de asemenea, dar aici este în esență ceea ce ar trebui să vedeți:
Nu-ți face griji; nu aveți nevoie să creați toate acestea de la zero. Frumusețea webului este acum că există mii de opțiuni pentru ilustrații stoc - ceea ce vă va economisi timp în cele din urmă. Am găsit cărțile de la iStockphoto aici. Aceste cărți exacte nu sunt complet critice pentru acest tutorial, așa că dacă preferați, puteți trece mereu la secțiunea următoare.
Dacă alegeți să cumpărați cărțile, plasați-le pe imaginea dvs. până la jumătatea raftului:
Cărțile sunt mult prea netede, așa că vom adăuga câteva umbre de perspectivă (așa cum am făcut-o cu colțurile raftului) pentru a le face să pară ca și cum ar sta pe raft. Mai întâi, mai întâi, redenumiți noul strat cu cărțile la "cărți".
Adăugați o umbră Drop la stratul "cărți" cu următoarele setări: Opacitate: 19%; Unghi: -90; Distanță: 10; Răspândire: 10; Dimensiune: 15. Pentru culoare, alegeți un maro de pe stratul "spatele raftului". Folosim maro aici pentru că negrul pare prea mult și nu se potrivește.
Pentru a crea umbra de sub cărți, vom crea o nouă elipsă neagră, care să acopere întreaga lățime a cărților care stau pe verticală. Ne vom ocupa ulterior de cartea înclinată.
Rasterizați elipsa neagră și mergeți la Filter> Blur> Gaussion Blur. Utilizați o rază de 4,7 pentru a obține răspândirea dorită. Setați opacitatea stratului de elipsă neagră la 70% pentru a se înmoaie puțin. Rezultatul ar trebui să arate astfel:
Repetați aceeași tehnică pentru cartea înclinată, dar cu o elipsă mult mai mică. Ar trebui să arate ceva de genul:
Nici o pagină de destinație iPhone nu este completă fără un iPhone mare, lucios - și acest tutorial nu face excepție. Am folosit șablonul iPhone de la cei mai buni la teehan + lax pentru a emula pe dispozitiv. Scoateți straturile pe care nu doriți să le includeți pe iPhone și trageți-le în document. Plasați-o puțin mai jos pe raftul de sus pentru a da iluzia că iPhone-ul este mai aproape de tine decât cărțile. Vrem ca fata si centrul iPhone destul.
Evident, acesta este locul în care captura de ecran a eroului v-ar duce de la aplicația dvs. Nu voi adăuga nimic la a mea, dar cu siguranță sunteți bineveniți în timp ce urmați tutorialul. De asemenea, vom folosi aceeași tehnică de la Pasul 6 pentru a adăuga o umbră în partea de jos a iPhone-ului. Rezultatul dvs. ar trebui să semene cu:
Doar un ultim element (unul dintre cele mai importante) este autocolantul de preț. Începeți prin a crea un cerc în colțul din dreapta sus al iPhone-ului. Redenumiți acest cerc la "autocolant preț":
Apoi, aplicați următoarele stiluri de straturi pentru Drop Shadow, Bevel & Emboss, Gradient Overlay și Stroke. Acesta va fi un stil de strat important, deoarece îl vom folosi de mai multe ori pe tot restul site-ului pentru butoane etc..
Acest lucru creează ceva complet dulce:
Adăugați un text pentru preț cu o picătură de picătură de 1px în partea de sus și autocolantul nostru este gata:
Până acum, aceasta este ceea ce am creat (arătând destul de bine și, cel mai bine, foarte unic):
Încă mai lipsim butonul "Apelați la acțiune" pentru a ajunge la AppStore pentru a achiziționa aplicația noastră. Vom crea acest text ca și cum ar fi fost "chiseled" în fața raftului (cu un font perfect).
Deci, aici merge: creați un text nou; Am folosit: "Colecția dvs. de cărți vă va plăcea pentru asta". Am folosit Gotham la 36px pentru a obține aspectul dorit.În acest text, trebuie să aplicăm stiluri de două straturi pentru a da acelui aspect arătat:
Rezultatul dorit, în funcție de font, ar trebui să fie ceva de genul:
Acum trebuie să adăugăm butonul AppStore. Am folosit o pictogramă iPhone de la IconFinder.net pentru a recrea tasta "Disponibil în AppStore".
Pentru a crea butonul, creați un nou dreptunghi rotunjit cu o rază de margine de 10px. Mi-am creat dreptunghiul 240px lățime de 74px înălțime.
Din moment ce am creat deja stilul nostru mic de stil Layer pentru butoane atunci când am creat autocolantul de preț în Pasul 7, putem copia stilul stratului din acel autocolant și inserați stilul stratului pe noul nostru strat de buton. Pentru a face acest lucru, faceți clic dreapta pe stratul pe care doriți să îl copiați stilul stratului și alegeți "Style Layer Copy" din meniul pop-up. Selectați stratul pe care doriți să îl aplicați acestui stil de strat și faceți clic dreapta și selectați "Paste Layer Style"..
Plasați pictograma iPhone descărcată de pe IconFinder pe partea de sus a butonului, oferindu-i stiluri de straturi de:
Adăugați textul AppStore și reutilizați stilul stratului pe care l-ați creat pentru pictograma iPhone pe text. Rezultatul dvs. ar trebui să semene cu:
Aceasta este probabil cea mai puțin interesantă parte a designului, dar cea mai interesantă pentru oricine caută să cumpere aplicația ta. Creați o nouă rubrică, text de dimensiune de 30px (am folosit din nou Rockwell) și introduceți textul "Caracteristici". Amintiți-vă acele ghiduri pe care le-am creat înapoi la începutul acestui tutorial? Le vom folosi acum pentru cele 3 coloane ale noastre; astfel încât să aliniați textul Caracteristici la ghidul din dreapta.
Aplicați câteva stiluri de straturi acestui text:
Apoi, creați un text italic de mai jos și adăugați câteva gloanțe. Destul de corect?
Trebuie să prezentăm aplicația noastră. Nu numai că captura de ecran iPhone va avea imagini ale aplicației noastre, dar ar trebui să afișăm și imagini extinse ale aplicației noastre, astfel încât oamenii să știe exact ce pot aștepta.
Mai întâi, vom duplica (Command + J) layerul nostru de texte "Caracteristici" de la Pasul 9. Modificați textul pentru a citi "Imagini de ecran" și mutați-l astfel încât acesta să fie plasat în coloana centrală.
Apoi vom crea capturile de ecran. Vom începe prin crearea stratului exterior de inserție. Începeți prin a crea o nouă formă dreptunghiulară rotunjită, cu 180px-180px, cu o rază de 10px. Copiați stilul stratului din textul format din pasul 8 și lipiți-l pe forma dreptunghiulară rotunjită. Duplicați stratul (Command + J) și spațiați-le în mod uniform în coloana lățime de 390px:
Acum vom crea un substituent pentru imagini (le-ați înlocui în mod evident pe acestea cu capturile de ecran ale aplicației dvs. mai târziu). Creați un alt dreptunghi rotunjit, dar de data aceasta cu setări:
Duplicați stratul și mutați stratul duplicat deasupra celeilalte capturi de ecran medalion.
Adăugați o suprapunere de culoare în ambele aceste straturi (cu culoarea # f6f3eb) pentru substituent.
În cele din urmă, trebuie să adăugăm pictograma Zoom. Începeți prin desenarea unui cerc în colțul din dreapta sus (după cum ați făcut pentru autocolantul de preț). Mina are un diametru de aproximativ 30 de pixeli.
Lipiți același stil de strat de pe autocolantul prețului pe noul cerc. Am ajustat culorile Gradient și culoarea Stroke pentru a obține un aspect ușor diferit față de culoarea verde.
În cele din urmă, trebuie să adăugăm pictograma "Zoom". Folosesc pictograma zoom din setul uimitor de pictograme Glyphish. La
completați pictograma zoom, trebuie doar să adăugați o umbre interioară ușoară (1px sau cam asa ceva) pentru a da o anumită adâncime.
Duplicați grupul de pictograme zoom pe care l-ați creat și mutați-l la cealaltă miniatură. Pe măsură ce ați făcut acest lucru, ar fi bine să faceți ceva
zoom-ul minunat pe aceste capturi de ecran pe măsură ce le-ați dat clic pe ele. Poate pentru prima mea Nettuts :).
Nu în ultimul rând pentru secțiunea principală sunt mărturiile. Am creat bule de vorbire dintr-un dreptunghi rotunjit și o formă personalizată.
Vom începe cu dreptunghiul rotunjit. Creați un nou dreptunghi rotunjit cu setări:
Acum, alegeți instrumentul Custom Shape Tool și localizați bulele de vorbire pentru a crea coada:
Creați un balon de vorbire deasupra stratului dreptunghi rotunjit, astfel încât doar coada să nu se suprapună.
Selectați ambele straturi și îmbinați-le împreună (Command + E). Rezultatul ar trebui să fie o formă pe care să putem aplica apoi un stil.
Încă o dată, să copiem stilul nostru de straturi de pe autocolantul de preț și să lipim stilul stratului pe balonul mărturiei (vom face textura lemnului într-o secundă). Facem asta pentru că vrem majoritatea stilurilor de la autocolant, cum ar fi stilurile Beveling, Drop Shadow și Stroke - Vom purta doar textura și culorile pentru a da aspectul potrivit. Prin reutilizarea stilurilor de strat ca acesta, puteți să păstrați design-urile consecvente, precum și să vă salvați o tona de timp prin a nu fi nevoie să recreați aceleași efecte de peste și peste din nou.
Mai întâi vom schimba suprapunerea gradientului. Trebuie să fie de la o culoare la o culoare transparentă (de vreme ce vom dori ca boabele de lemn să apară din spatele acesteia). Am ales să decupeze un gradient până la un maro foarte închis: # 292115.
În cele din urmă, vom face o suprapunere de textură a texturii lemnului pentru a face să se amestece mai mult cu fundalul.
Reglați culoarea cursei pentru a fi mai maro închis (nu verde) și sunteți setați!
Tot ce trebuie să faceți acum este să adăugați recenziile clienților dvs. și aveți un balon de mărturie. Duplicați grupul de mărturii
și mutați-o chiar sub cealaltă și asta este!
Vom începe prin crearea containerului înconjurător în care se va afla textul și formularul. Am creat un dreptunghi rotunjit, cu o rază de 40px și o lățime de 960px (lățimea paginii noastre). Am inserat Stratul de Strat din textul de la Pasul 8 pentru a-i da acea intrare simt. După cum am menționat mai devreme, întotdeauna am tendința de a reutiliza stilurile mele de strat cât mai mult posibil, deoarece asigură coerența.
M-am îndreptat din nou la IconFinder pentru a găsi pictograma poștală - din fericire pentru noi
pictograma de 64 x 64 pixeli era exact ceea ce aveam nevoie. Plasați pictograma în colțul din stânga al paginii noastre medalion bar - va fi ancora
pentru buletinul informativ și pentru a ajuta la echilibrarea butonului Trimitere.
Apoi, adăugați "Vrei ultimele știri? Alăturați-vă listei de discuții." text. Am folosit Gotham-ul din nou, dar cu o dimensiune puțin mai mică la 24px. Face
culoarea textului # 161008 (deoarece nu vrem să iasă prea mult) și să adăugăm o umbră de culoare maro deschisă de 1px mai jos (încă o dată creăm acea adâncime).
Wow! Suntem atât de aproape. Tot ce trebuie să faceți este să adăugați formularul de poștă electronică și butonul și vom fi terminați. Creați un alt dreptunghi rotunjit, cu o rază de 20px
(jumătate din ceea ce este dreptunghiul rotunjit exterior) și înălțimea de 40px (astfel încât să nu avem nici marginile drepte pe cele două laturi).
Un lucru de observat este cât de consistentă este distanța între partea dreaptă. Prin înjumătățirea razei interioare, păstrăm o umplutură consistentă între containerul exterior și recipientul interior.
Folosind aceleași presetări pentru dreptunghiul rotunjit (rază 20px, înălțime 40px), creați un nou buton dreptunghi rotunjit. Copiați stilul stratului din imaginile de mărire de la pasul 10 (culoarea portocalie roșie). Inserați stilul stratului pe noul dvs. buton. Ar trebui să aveți ceva de genul:
Tot ce trebuie să faceți acum este să adăugați textul "Trimiteți" și ați terminat!
Asta e. Am creat o pagină de destinație iPhone unică; îmbinați un nou stil ilustrativ cu senzația lucioasă de iPhone. Acest tutorial nu este doar pentru o aplicație de carte - ați putea scoate cărțile de pe raft pentru aproape orice (adică transformați-o într-o masă pentru băuturi). Sper ca ti-a placut!
Accentsconagua