Share
În acest tutorial, vom continua această serie de creare a unui site promoțional pentru aplicațiile iPhone, prin luarea noii fireworks construite în Fireworks și prin adăugarea de culori, texturi, imagini și efecte pentru a elimina acest design în Photoshop. Vom folosi câteva elemente interesante, cum ar fi imaginile iPhone și o ilustrație de fundal ilustrată cu aurora. Vom termina cu un design profesional al site-ului gata de codificare! Hai să ajungem la asta!
Aruncați o privire la designul site-ului pe care îl vom crea. Puteți vedea imaginea finală a imaginii de mai jos sau imaginea de dimensiune completă aici.
Prindeți "wireframe_final.psd" pe care l-am exportat în ultimul nostru tutorial din această serie (Creați un site promoțional iPhone App Wireframe în Fireworks). Redenumiți acest fișier la "final.psd" sau numele preferat.
Observați mai jos cum se deschide destul de bine fișierul importat în Photoshop. Există o problemă în care casetele de text sunt mai lungi decât documentul (a doua imagine de mai jos, observați modul în care caseta este lungă și continuă în partea de jos a documentului). Nu știu o cale rapidă de a rezolva asta. Este o particularitate pe care am menționat-o în ultimul tutorial. Dacă cineva știe o soluție bună, anunță-mă cu siguranță. Deci, treceți și copiați textul fiecărui element, apoi recreați o nouă casetă de text și inserați textul în loc sau lăsați-l ca în.
De asemenea, continuați și ștergeți dosarul "Note", deoarece nu avem nevoie de notele de aici.
Adesea îmi place să lucrez mai întâi asupra elementelor vizuale (și mai importante) ale designului, apoi să construiesc de acolo. Deci, să începem cu zona de promovare.
Vom adăuga o ilustrație aurora în fundal aici. Ian Yates a scris un minunat tutorial Illustrator privind realizarea unui vector Aurora Borealis Vector Sky în Illustrator. Există câteva avantaje pentru utilizarea graficului vectorial aici. Una dintre ele este faptul că se deosebește stilistic cu un aspect unic. De asemenea, îl putem folosi și pentru alte zone de branding.
După finalizarea tutorialului vectorului aurora borealis, continuați și importați rezultatul unic în Photoshop. Puteți vedea că singura schimbare pe care am făcut-o a fost aceea de a schimba designul. Ar trebui, bineînțeles, să vă creați propria pentru munca voastră. Am inserat ilustrația ca pixeli, deoarece nu am nevoie să fac modificări ale fișierului sursă vectorială după ce l-am introdus, deci nu este nevoie să folosiți un obiect inteligent.
Acum glisați masca vectorului din forma noastră de fundal promoțional pe designul nostru aurora borealis.
Acest lucru va aplica masca vectorului așa cum este arătat mai jos, doar asigurați-vă că liniile sunt așa cum doriți.
Există un freebie spectaculos de o imagine iPhone cu o mulțime de grafice iPhone GUI. Continuați și descărcați iPhone GUI PSD 3.0. Deschideți fișierul și trageți imaginea iPhone în documentul de lucru. Apoi scalați-l și aliniați-l cu ghidajele așa cum se arată în a doua imagine de mai jos. Asigurați-vă că ați apucat imaginea după cum se arată. Singura componentă de ecran capturată în afară de telefon este o strălucire transparentă a ecranului.
Acum vom adăuga ilustrația aurora borealis la iPhone. Acest lucru face ca designul să arate puțin mai interesant. În site-ul final un fișier video ar arăta bine aici, care arată aplicația în acțiune. Aduceți o altă copie a ilustrației aurora borealis. Puteți să aduceți o versiune mai mică de această dată, deoarece noi ocupăm un spațiu mai mic. Lipiți-l din nou ca pixeli.
Acum, cu ilustrația plasată pe iPhone în poziția în care doriți și ilustrația selectată, mergeți la Layer> Vector Mask> Reveal All. Apoi, apucați Instrumentul dreptunghi (U), asigurați-vă că acesta este setat pe Căi în colțul din stânga sus și trageți ecranul. Dacă nu obțineți dimensiunea exactă de care aveți nevoie pentru prima dată, apăsați Command + T și redimensionați masca vectorial dreptunghi după cum este necesar.
Asigurați-vă că păstrați straturile dvs. organizate pe măsură ce continuăm să construim acest design.
Tocmai am adăugat două elemente dominante pe pagină. De asemenea, ilustrația aurora pe care am adăugat-o este o sursă excelentă pentru a apuca o anumită culoare pentru a face schema de culori a acestei pagini. Continuați și faceți dublu clic pe stratul implicit "Fundal" pentru al debloca, denumiți-l "fundal" și plasați-l într-un nou director "fundal".
Prindeți instrumentul Bucket Paint (G), apoi schimbați Culoarea primului rând într-un gri închis (# 536475), pe care l-am selectat din ilustrație. Acum schimbați fondul de navigație primar situat în directorul "antet" un albastru închis (# 212b3f), care a fost, de asemenea, prelevată din ilustrație. Dați fundalului zonei "de fund" aceeași culoare albastru închis pentru fundal.
De asemenea, vom schimba și culoarea unora dintre butoanele noastre de navigare în acest moment. Imaginea de mai jos arată unde suntem la acest moment în acest design. Modificați culorile de fundal ale butonului de navigare primar într-o ușoară briză gri-albastră (# 5e7285) decât fundalul paginii, cu excepția butonului paginii curente. Vrem să oferim butonului pentru pagina curentă impresia de a fi apăsat. Deci, faceți aceeași culoare cu pagina (# 536475). Vom îmbunătăți acest aspect mult mai târziu în tutorial când adăugăm stilul.
În zona "secondary_nav", selectați fundalul mai mare din spatele pictogramei Aurora și schimbați culoarea spre albastru-gri (# 475665), care este puțin mai întunecată decât fundalul paginii. Din nou, vom face acest aspect indreptat. De asemenea, utilizați același brichetă gri-albastru (# 5e7285) ca butoane de navigare primare de pe butoanele subsolului.
Puteți vedea cum merge întuneric cu designul paginii noastre face dureros de evident că este timpul să lucrăm la culorile textului. Am proiectat textul în cea mai mare parte cu întuneric pe lumină pentru sârmă, dar acum trebuie să mergem la lumină la întuneric. Schimbați majoritatea textului dvs. în alb. Voi sublinia câteva excepții de mai jos. De asemenea, curățați orice text, repoziționați elementele și experimentați greutatea fontului pe măsură ce treceți prin aceasta.
Am setat câteva texte în Myriad Pro, deși în zonele care vor fi codate și nu în imagini, am folosit de multe ori Helvetica pentru acest design, care este omniprezent în sistemele informatice. De asemenea, am folosit Helvetica pentru unele zone pe care am vrut să le aibă un aspect ușor diferit de cel utilizat de Myriad Pro. Am setat numele Aurora în Futura Condensed Extra Bold unde ar fi folosit pentru branding.
Puteți vedea textul în majoritatea "antetului", "secondary_nav", "promovarea" și "body" este alb. Câteva excepții sunt zona de logo (care va fi doar un înlocuitor pentru moment), textul "Aurora App" care este albastru închis (# 131828) pentru ao ajuta să iasă în evidență, iar titlurile pentru corp care sunt aceleași.
Trebuie, de asemenea, să lucrăm la textul secțiunii "de fund". Am setat toate titlurile în Myriad Pro Bold la 20pt. Culoarea este albastru (# 85a1bc). Am folosit același albastru pentru legăturile text. Am setat restul textului în alb folosind un Helvetica Bold mai mic.
"Foaierul" are doar câteva schimbări de culoare. Legăturile au fost modificate la un albastru mai albastru (# 97b8d8), cu excepția linkului activ care este alb și subliniat. Textul de copyright este de 12pt Helvetica și albastru închis (# 212b3f).
Mai întâi, luați o captură de ecran a fișierului PSD al zonei pe care o vom plasa în (cu textul pentru înlocuirea textului pentru logo). Activați Illustrator. Plasați captura de ecran pe stratul propriu și închideți-l. De asemenea, am dezactivat vizibilitatea artboard-ului (Shift + Command + H). Acum, creați un strat pentru sigla dvs. și introduceți textul "iLoveMyApps", care servește drept denumirea companiei pentru acest tutorial. Setați textul în Cooper Std Black Italic la 30pt și dați-i o umplere albă, după cum se arată mai jos. Acum, cu textul selectat, mergeți la Text> Creare contururi, apoi dezagregați textul (Shift + Command + G). De asemenea, ștergeți "o", deoarece o vom înlocui cu o inimă.
Acum să lucrăm la forma inimii. Mai întâi, activați grila (Command + ") și activați Snap to Grid (Shift + Command +), ceea ce vă va permite să desenați ușor forma. Continuați și creați o formă de inimă cu instrumentul Pen. Acum mergeți la Object> Transform> Reflect și aplicați o copie cu setările afișate mai jos. Acum aliniați marginea interioară a ambelor forme de inimă, apoi în paleta Pathfinder faceți clic pe Merge, ceea ce ne dă o formă finală a inimii.
Acum scalați forma de inimă în jos și puneți-o așa cum este arătat. De asemenea, lucrați la distanțarea fiecărei litere a textului până când acesta pare potrivit pentru dvs. Am vrut ca întregul text să apară ca unul, dar am distanțat fiecare cuvânt doar puțin pentru a crește lizibilitatea. Încă mai citește ca un singur cuvânt. Acum copiați și inserați logo-ul final ca obiect inteligent în Photoshop.
Vom continua să ne dăm drumul de sus în jos, dar țineți cont de faptul că, pe măsură ce proiectați, puteți săriți mai mult în diferite domenii ale designului și experimentați cu aspect și stiluri diferite, ceea ce este minunat și vă simțiți liber pentru a face asta.
În secțiunea "antet", selectați fundalul, apoi aplicați stilurile de strat prezentate mai jos. Acest lucru oferă o suprafață superioară a zonei corpului un punct culminant mic și o umbră subtilă este aruncată pe zona antetului, ceea ce îl împinge puțin.
Acum aplicați stilurile prezentate mai jos pe sigla noastră. Pentru acoperirea cu gradient, gradientul trece de la gri (# c0c4c9) la gri deschis (# e3e5e7).
Mai întâi vom lucra la stilurile de fundal inactive de legătură primară, ceea ce înseamnă toate, cu excepția linkului "Aplicații". Aplicați stilurile prezentate mai jos și utilizați culori care vă stau la dispoziție. Notă: Am inspirat mult din site-ul Meta Lab pentru această parte a designului. Îmi place munca făcută de această companie, verificați folio-ul în timp ce sunteți acolo.
Este întotdeauna important să vă imaginați unde este sursa de lumină în design. Aplicăm câteva efecte de iluminare subtile, care vor da acestui design un aspect modern, deși trebuie să ținem cont de sursa de lumină.
Imaginați-vă că există o sursă de lumină care vine din partea de sus a paginii, fotografiată direct în jos, ceea ce ne oferă direcția ușoară pentru multe dintre stilurile pe care le vom adăuga. Desigur, vă puteți imagina mai mult de o sursă de lumină și puteți să vă abateți de la o anumită măsură, dar păstrarea în minte a sursei de lumină primară vă va ajuta să faceți stilurile pe care le aplicați să aibă sens și să lucreze împreună vizual.
Aplicați acum stilurile afișate mai jos la fundalul linkului "Aplicații", care este legătura noastră activă și o va face să pară apăsată.
Acum aplicați următorul stil Bevel și Emboss la textul din navigația primară pentru ao face să iasă puțin. Efectul asupra textului este subtil, dar vizibil.
Mai întâi, să adăugăm icoanele pentru aplicațiile iPhone. Pentru pictograma principală Aurora, utilizați aceeași ilustrație aurora utilizată în zona promoțională. Glisați masca vectorală care este aplicată ca o pătrată gri în prezent, pe o versiune redusă a ilustrației aurora, consultați Pasul 2 despre cum să faceți acest lucru. Acum să adăugăm un stil aici. Adăugați următoarele stiluri de straturi la pictogramă.
Aplicați aceleași stiluri la fundalul pictogramei exterioare, așa cum am făcut-o și pe butonul de fundal "Apps" din pasul 7. Faceți clic pe clic pe miniatura de strat a fundalului "Aplicații" și selectați Copiere stiluri strat. Apoi selectați fundalul existent, faceți clic pe butonul de control al miniaturii de strat și alegeți Paste Style Layer, după cum se arată mai jos.
Acum vom adăuga un stil la celelalte pictograme ale aplicației noastre. Acestea sunt doar titularii de locuri pentru a arăta clientul în cazul în care alte icoane ar merge. Vreau să le dau un aspect similar cu pictograma Aurora, dar nu-i face să iasă în evidență. Deci, să începem prin umplerea lor cu un model. Mai întâi vom face modelul.
Deschideți un document nou de 4 x 4 pixeli creat pentru web. Prindeți instrumentul Creion, setați dimensiunea periei la 1px și pictați patru dreptunghiuri, după cum se arată mai jos. Cel mai întunecat dreptunghi este # 05020a și cel mai ușor este # 251440 această culoare. Apăsați Command + A pentru a selecta All, apoi mergeți la Edit> Define Pattern și numiți-o "Purple Rain". Da, am facut un tricou cu acest tipar inapoi in anii optzeci in scoala primara.
Selectați prima pictogramă placeholder. Observați cum este în prezent un strat de formă. Trebuie să rasterizăm asta. Deci, mergeți la Layer> Rasterize> Completați conținutul, care păstrează masca noastră vector în loc, dar rasterize umple. Observați că rezultatul este un strat rasterizat cu o mască vectorică aplicată - rapid și simplu. Mergeți și faceți acest lucru pentru fiecare pictogramă de substituent.
Prindeți instrumentul Bucket Paint (G) și în colțul din stânga sus alegeți modelul din meniul derulant, asigurați-vă că este selectat modelul "Purple Rain", apoi faceți clic o dată pe fiecare pictogramă pentru a aplica modelul. Acum, faceți clic pe pictograma Aurora și copiați stilul stratului, apoi lipiți-l pe fiecare pictogramă a aplicației substituent. De asemenea, reglați distanța dintre numele aplicațiilor pentru a face loc stilurilor.
De asemenea, să reglată butonul de substituție pentru magazinul de aplicații implicit din partea dreaptă a acestei secțiuni. O modalitate simplă de a face acest buton să se amestece mai bine cu designul nostru este de a schimba culoarea de fundal. Accesați Imagine> Ajustări> Nuanță / Saturație și aplicați setările prezentate mai jos sau cele alese de dvs..
Să începem cu fundalul și butoanele. În primul rând, vom aplica stil în zona noastră mare de fundal. Selectați ilustrația aurora și aplicați următoarele stiluri de straturi. Acest lucru ne oferă un punct culminant în partea de sus și un accident vascular cerebral în jurul zonei.
Aplicați aceleași stiluri în fundalul zonei de preț dreapta sus, dar adăugați și stilurile prezentate mai jos. Culorile folosite pentru acoperirea cu gradient purpuriu sunt prelevate din graficul aurora. Culorile gradientului merg de la purpuriu (# 68448f) la purpuriu închis (# 320580) și apoi înapoi la o nuanță de mijloc purpurie (# 65428c).
Aplicați aceleași stiluri de strat principalei rubrici "Lumină-ți iPhone-ul", așa cum am făcut-o în pasul 7. Puteți copia și lipi stilul stratului de acolo. Aplicați același stil Bevel și Emboss la textul prețului și la subcapitol, așa cum am aplicat la textul de navigare primar din pasul 7. Este posibil să doriți să modificați opacitatea modului Highlight sau Shadow Mode pentru umbrirea, totuși, experimentați cu ce arata cel mai bine pentru tine. De asemenea, selectați regula orizontală, care are o înaltă formă de 1px, și schimbați culoarea spre negru. De asemenea, aplicați setările indicate mai jos.
Acum, aplicați următoarele stiluri de strat principalului buton de chemare la acțiune. Am plasat o umbră în acest sens, astfel încât să se evidențieze mai mult din fundal. Are o culoare strălucitoare, care va atrage atenția. De asemenea, plasarea atrage atenția. Suprapunerea gradientului are culori similare cu cea utilizată pentru fundalul prețului, dar are numai două culori aplicate, care merg de la purpuriu (# 68448f) la purpuriu închis (# 320580). Vom adăuga o săgeată într-o clipă pentru a face să fie mai bine.
Acum, apucați instrumentul Ellipse (U) și utilizați-l pentru a crea un strat de formă, după cum se arată mai jos. Culoarea nu contează, deoarece stilurile o vor suprapune oricum. Rearanjați textul butonului pentru a arăta echilibrat cu elementul adăugat. Vom folosi acest cerc pentru a plasa în scurt timp o săgeată de descărcare. Aplicați următoarele stiluri de straturi butonului (culorile din stratul de gradient merg de la # 9cc67e la # 3a4f66).
Acum vom crea săgeata noastră, o vom plasa în Photoshop și vom schimba stilul.
Deschideți Illustrator și creați un document web. Activați Vizualizare> Afișare grilă și Vizualizare> Snap la rețea. Utilizați instrumentul Pen pentru a desena o săgeată folosind grila. Dimensiunea nu contează. Acum, redimensionați-l la o formă care se referă la mărimea săgeții mai mari indicate mai jos. Acum, mergeți la Efect> Stil> Colțuri rotunde și aplicați cu un rază de 0.139 in. Acum copiați săgeata și lipiți ca obiect Vector Smart în Photoshop. Notă: Folosesc negru mai jos pentru demonstrații, dar săgeata ar trebui să fie albă.
Aplicați aceleași stiluri pe săgeată, așa cum am făcut-o în pasul 7 și dimensiunea pentru a se potrivi spațiului. Rezultatul este prezentat în a doua imagine de mai jos.
Iată ce avem până acum. Secțiunea de sus arată bine. Acum hai să ne mutăm pe corpul următor. Avem acum cea mai mare parte a site-ului. Va fi o navigație netedă de aici.
Nu există prea multe stiluri care trebuie aplicate aici - doar câteva. Să începem cu titlurile. Vrem să le facem să pară indreptate prin evidențierea marginilor interioare ale caracterelor de fund, care este un stil des folosit de multe ori pe site-urile Apple. Aplicați stilul prezentat mai jos la textul titlului "Aurora". De asemenea, aplicați același stil titlurilor "Imagini de ecran" și "Caracteristici". Cu aceste două titluri mai târziu, schimbați opacitatea la 40%, totuși (orice altceva în acest stil de straturi de straturi este același).
Aplicați același stil de strat la punctele de sub gloanțe din coloana "Feature", aplicată titlului acestuia. Rezultatele obținute până în prezent sunt prezentate mai jos.
Acum copiați regula orizontală din secțiunea "promovare", schimbați culoarea în albastru închis (# 131828) și scalați-o pentru a se potrivi cu zona de deasupra titlului "Imagini". Observați cum este păstrat stilul.
Acum, copiați aceeași regulă orizontală și utilizați mai multe copii ale acesteia în ultima coloană a acestei secțiuni, după cum se arată mai jos. Asigurați-vă că ștergeți regulile orizontale neuniforme existente.
Acum, urmați aceiași pași pentru aceste imagini cu substituent aici, ca și în pasul 10. Aplicați aceleași stiluri de strat și umpleți modelul de fundal "Purple Rain". Aceasta este doar o modalitate rapidă de a face acest domeniu să arate bine pentru revizuirea clienților înainte de a obține o reținere a fotografiilor reale care vor merge acolo mai târziu. Secțiunea finală a "corpului" este prezentată mai jos.
Mai întâi, să aplicăm aceleași stiluri de stil Bevel și Emboss la titlurile noastre, așa cum am făcut în textul din navigarea primară din pasul 8. Acum glisați patru copii ale regulii orizontale stilizate în jos și redimensionați după necesități sau aplicați aceleași stiluri și colorarea la liniile orizontale existente așa cum le-am făcut în secțiunea "corp".
Înlocuiți regulile orizontale rămase din această secțiune cu liniuțe. Puteți utiliza Instrumentul de tip și tasta Dash pentru aceasta. Am folosit Myriad Pro la 14pt pentru asta. Acesta este un lucru care va fi codificat în CSS, dar vrem să ne asigurăm că comunicăm acest lucru eficient în design.
Aplicați aceleași stiluri de strat la butoanele noastre ca în navigarea principală. Doar copiați acele stiluri de straturi în jos. Asigurați-vă că stilizați și textul butoanelor. Acum înlocuiți pasărea noastră twitter cu o versiune full color, pe care o puteți descărca gratuit în pachetul Practica Icon de la Smashing Magazine.
Aplicați următoarele stiluri de straturi pe fundalul secțiunii "de jos" și am terminat!
Există o mulțime de soluții creative pe care le puteți crea folosind doar o mână de elemente alese, o schemă de culori interesantă, utilizarea stilurilor potrivite și atenția la efectele luminoase subtile. Imaginea finală este de mai jos. Puteți vedea o versiune mai mare aici.
Accentsconagua