Share
Acest tutorial vă va îndruma prin procesul și ideile care stau la baza designului unui site profesional cu un îndemn funky în Photoshop. Tutorialul va citea mult ca un roman "alege-ti propria aventura" in speranta ca va incuraja creativitatea si unicitatea in design-ul tau cu cateva sfaturi si instructiuni de-a lungul drumului. Timpul pentru aventură!
Un lucru pe care îl veți observa pe măsură ce treceți prin acest tutorial este cât de ușor acest site ar putea fi transformat într-un blog despre design, pagina de pornire a unei companii de software sau o comunitate open source. Toate modulele de pe barele laterale din stânga și din dreapta pot fi schimbate și deplasate cu ușurință, iar conținutul este proiectat să fie flexibil.
Pe parcursul acestui tutorial veți vedea un accent deosebit pe principiile de proiectare și pe metodele utile Photoshop pentru a vă îmbunătăți fluxul de lucru și designul site-urilor Web. În timp ce acest site are un stil propriu, scopul principal al acestui tutorial nu este acela de a replica acel stil exact, mai degrabă speranța este că veți obține o perspectivă mai bună a designului web în Photoshop, care vă poate îmbunătăți abordarea și vă poate grăbi producția.
Uitați-vă la imaginea pe care o vom crea.
Dacă nu sunteți deja, săriți peste 960.gs și familiarizați-vă cu sistemul de grilă 960 și de ce va fi atât de util pentru acest tutorial. În timp ce sunteți acolo asigurați-vă că pentru a descărca șablonul.
Odată ce ați descărcat fișierul, dezarhivați-l și deschideți "960_grid_12_col.psd" care poate fi găsit sub 960_download> Șabloane> Photoshop. Când deschideți fișierul, va fi evident cât de repede acest lucru vă va permite să creați și să mențineți structura în desenele dvs. web. Luați notă de liniile de ghidare, acestea vă vor permite să creați obiecte care se aliniază perfect cu grila.
Dacă urmați ghidajele până la riglă, puteți vedea clar dimensiunile pixelilor exacte ale grilei - cu coloane lățime 60px și 10px pe fiecare parte (creând 20px între fiecare coloană). Dacă nu vedeți conducătorul sau doriți să scăpați de el, atunci îl puteți comuta cu Command + R.
Ghizii sunt aproape exagerați; odată ce începeți să proiectați, acestea vor fi într-adevăr în cale. Puteți să le comutați făcând clic pe Vizualizați> Extra sau pur și simplu utilizând comanda rapidă Command + H.
Veți avea nevoie de mai mult spațiu pe panza pentru acest tutorial. Extindeți panza (Command + Alt + C) la 1400px la 1340px. Puteți șterge totul, cu excepția stratului de fundal. Faceți dublu clic pe stratul de fundal și apăsați pe OK pentru al debloca. Redenumiți-o "BG".
Salvați (Command + S) acest fișier ca "my_web_tut01.psd" în folderul său propriu numit "meu web tut" După fiecare pas în acest tutorial trebuie să apăsați Command + S și fiecare câțiva pași loviți Command + Shift + S și salvați noul exemplar "my_web_tut02.psd", "my_web_tut03.psd", etc ... Salvarea pare ca un creator nu pentru o mulțime de designeri, dar am constatat că încă nu oprește o mulțime de profesioniști de la slacking pe acest.
OK, ați pregătit pânza, acum aveți nevoie pentru a desena în fundal și zona de sus. Trageți pe rigla de sus pentru a crea un nou ghid; adu-l la 120px. Aceasta va fi limita inferioară a spațiului antet. Aduceți încă două ghidaje la 130px și 140px. Acum există aceeași lățime de spațiu între antet și conținutul pe care îl avem între coloane. Începe să arate ca o rețea adecvată!
Utilizați instrumentul Rectangle (U) pentru a desena un dreptunghi negru în zona antetului. Aceasta presupune că aveți setul negru prestabilit ca culoare de prim plan, dacă nu puteți apăsa pur și simplu tasta D pentru ao reseta. Porniți dreptunghiul în afara pânzei de-a lungul ghidajului și încheiați-l afară și în cealaltă parte. Avantajul extinderii acestui element este acela că nu veți vedea niciun efect aplicat perimetrului pe care doriți să-l aplicați la marginea inferioară a dreptunghiului dvs., cum ar fi un accident vascular cerebral, strălucire interioară etc. Denumiți dreptunghiul "Header BG. "
E timpul să începeți să vă blocați grila. Acest design este alcătuit din trei coloane de conținut - bara laterală din stânga va cuprinde trei coloane, conținutul de mijloc / principal va cuprinde șapte coloane și bara laterală din dreapta va cuprinde două coloane.
În timp ce funcționează bine pentru ca antetul să conțină linii directoare, restul designului va fi un proces mai fluid, astfel încât nu veți desena ghiduri orizontale între fiecare secțiune. Nu dispera! Veți putea totuși să realizați spațierea perfectă a pixelilor apăsând Shift + Arrow Keys în timp ce aveți selectat instrumentul de mutare (V). De fiecare dată când faceți acest lucru, stratul selectat se va deplasa la 10px.
Veți crea colțuri rotunjite pentru acest design. Culorile rotunjite fac ca conținutul tău să fie foarte clar secționat. Uită-te înapoi la imaginea finală; observați modul în modul "Twitter Feed" există mai multe casete într-o cutie cu colțuri rotunjite? Acum, ia în considerare dacă colțurile au fost toate ascuțite - "Twitter Feed" nu ar simți ca un singur modul la fel de mult.
De asemenea, trebuie să țineți cont de faptul că culorile, gradienții și fonturile ajută la transformarea acestei entități într-o entitate definită, dar colțurile rotunjite ajută cu siguranță. În plus, trebuie să știți că doar pentru că colțurile rotunjite funcționează pentru acest design, există mii de site-uri frumoase care nu utilizează colțuri rotunjite. Aruncați o privire la Psdtuts + - fiecare colț este ascuțită; cu toate acestea, alte strategii, cum ar fi contrastul și accidentele vasculare cerebrale, sunt folosite pentru a menține aspectul clar. Citirea ulterioară se găsește aici și aici
Proiectați destul de mult! Selectați Instrumentul pentru colțuri rotunjite și setați raza de colț la 8px. Desenați o casetă în partea de sus a coloanelor din stânga și din dreapta; dă-ți niște spațiu pentru a adăuga mai târziu conținut.
Mai întâi, creați o zonă de text în zona de conținut de mijloc / principal și completați-o cu un singur captusitor ca în imaginea finală. Utilizați fontul Rockwell sau altă placă de serigrafie la 40pt cu 48pt Leading (Line Height). Rockwell poate fi descărcat aici.
Apoi, adăugați niște text fictiv de mai jos și setați în Verdana la 12pt cu 20pt Leading. Adăugați, de asemenea, într-un cuplu sub-anteturile care sunt Verdana Bold la 17pt cu 30pt Leading.
Acum că aveți specificul, să vorbim de tipografie. O regulă generală pe care o veți găsi repetată în întreaga comunitate de design web este că un site web ar trebui să utilizeze numai două fonturi. În acest aspect am ales să folosesc fonturile Rockwell și Verdana. Verdana este un font sigur în timp ce Rockwell nu este. Din acest motiv, toate instanțele lui Rockwell vor trebui să fie imagini atunci când acest design este convertit în XHTML / CSS.
Aceasta înseamnă două lucruri pentru tine. Mai întâi, pentru a menține timpul de încărcare scăzut, trebuie să luați în considerare o utilizare minimă a fonturilor care nu sunt compatibile cu web-ul. Imaginea finală conține mai puțin de zece exemple de Rockwell, majoritatea dintre ele stau pe partea de sus a unui element grafic ca un buton care va fi deja o imagine când codificați. În al doilea rând, puteți adăuga efecte cum ar fi umbrele și gradientele drop la text. Aceste două motive se combină cu includerea lui Rockwell, care este cel mai potrivit pentru elementele tradiționale mai decorate ale unui design precum anteturi, titluri și butoane.
Există o ultimă considerație care poate sau nu se poate aplica designului dvs. și care ia în considerare orice activitate viitoare de optimizare a motoarelor de căutare (SEO). Toate textele bazate pe imagine - orice instanță a Rockwell pentru acest design web - nu sunt accesate cu crawlere și analizate de către Google. Acest lucru înseamnă că va trebui să proiectați astfel încât să existe o mulțime de fonturi în siguranță în cazul în care cuvinte cheie pot fi preluate de Google.
Următorul punct al tipografiei și al designului web în general este consecvență, coerență, consistență! Dacă utilizați Rockwell pentru un buton, utilizați-l pentru toate butoanele! Dacă faceți unele link-uri roz, faceți toate link-urile roz! A fi consistent va permite designul dvs. să arate ascuțit și coerent.
În sfârșit, un cuvânt despre utilitate și tipografie. Copia dvs. are nevoie de cameră pentru a respira, a da o înălțime liniară decentă și veți observa o lume a diferenței. Site-ul ilovetypography.com sugerează că înălțimea liniei dvs. ar trebui să fie de cel puțin 140% din dimensiunea fontului. De asemenea, ar trebui să știți că o zonă de text mai mare de 600 de pixeli este o presiune asupra ochilor, dar dacă veți merge mai mult, ar fi o idee bună să măriți în mod proporțional înălțimea liniei. Este întotdeauna mai mult de învățat despre tipografie - aici este un început bun.
Alb-negru este plictisitor, timp pentru o culoare! Culorile acestui design au fost inspirate de tema Hash One Wordpress
Aș putea să vă arăt cum să creați un specimen personalizat pentru a încărca culorile site-ului dvs., dar eu nu o folosesc singură. În schimb, utilizând instrumentul dreptunghi, puteți desena o grămadă de pătrate mari în marginile pânzei dvs. și completați-le cu culorile pe care le veți folosi. Consider că această metodă este mai rapidă și mai accesibilă.
Culorile selectate oferă un contrast deosebit pentru a da adâncime site-ului. Simțiți-vă liber să utilizați orice combinație dorită, dar vă rugăm să luați în considerare contrastul, lizibilitatea și armoniile atunci când alegeți culorile. Dacă aveți probleme cu culorile dvs., încercați să utilizați Designerul de culori.
Culorile acestui tutorial sunt (de la stânga la dreapta, de sus în jos):
Adăugați toate aceste dreptunghiuri într-un dosar și denumiți-l "SWATCHES". Folosirea tuturor capacelor pentru numele de foldere face vizual mai ușor să găsești straturi de foldere atunci când straturile încep să se încurce. Acum ar fi un moment bun pentru a porni dosarele "HEADER", "LEFT SIDEBAR", "MAIN CONTENT" și "RIGHT SIDEBAR". Una dintre cele mai bune practici pentru a intra este colorarea straturilor pentru a vă îmbunătăți fluxul de lucru. Pur și simplu faceți clic dreapta pe pictograma ochi de lângă fiecare strat pentru a selecta o culoare.
Gradienții pot îmbunătăți cu adevărat designul; cu toate acestea, dacă nu sunteți atent, gradienții pot dezactiva cu adevărat designul. Iată sugestia mea: du-te înnebunit cu gradientele tale, fă-le doar foarte subtile.
Faceți dublu clic pe stratul "Header BG" și selectați Overlay Overlay. Faceți clic pe gradientul care apare pentru a deschide Editorul Gradient. Ștergeți toate eșantioanele, cu excepția primelor două elemente primare în fundal și prim plan, până la transparență. Acum creați un gradient de la cel mai întunecat gri până la griul mediu și apăsați pe nou pentru al adăuga la presetări. Repetați acest lucru până când veți avea opt gradienți noi - patru întuneric până la mids și patru mids până la întuneric. Faceți clic pe Salvați pentru a le salva într-un dosar nou numit "Active". Apoi, plasați-l în dosarul rădăcină pentru acest proiect. Acum, ori de câte ori vă veți întoarce la acest proiect sau veți avea toate declivitățile de acolo.
Pentru stratul dvs. "Headers BG", utilizați gradientul mediu până la lumină de la globurile gri închis.
Pentru gradientul dvs. pe stratul "BG", veți dori să creați un gradient puțin mai complex. În gradientul "BG" vor exista două gradiente. Când vine momentul să codificăm, vor fi fișiere imagine separate, dar pentru noi trebuie doar să facem un gradient complex.
Observați cum există o mică parte a gradientului care va avea aceeași culoare? Aceasta va fi culoarea de fond a fișierului dvs. HTML și va permite ca pagina web să crească, dar gradientul din partea superioară pentru a rămâne în partea de sus și gradientul din partea de jos pentru a rămâne în partea de jos.
Photoshop este un program uimitor, dar dacă aflu că creați logo-uri în Photoshop, vă voi raporta la Adobe. Logosul ar trebui creat într-un program vectorial - pentru acest tutorial vom folosi Illustrator.
Deschideți un nou fișier în Illustrator și creați logo-ul dvs. (Notă: în proiecte reale nu trebuie să începeți niciodată designul dvs. web înainte de a avea un logo). În timp ce logo-ul din acest exemplu utilizează Rockwell, având un al treilea font pentru emblema dvs. nu este o mare preocupare. Salvați sigla în dosarul "Active" unde ați plasat fișierul de gradient.
Odată ce aveți acest logo, trebuie să îl reintroducem în Photoshop pentru un stil. Purtați mereu Illustrator și Photoshop unul lângă celălalt și glisați bucățile de logo-ul dvs. în Photoshop. Deoarece fiecare piesă va avea un stil unic, tragerea ei peste individual, spre deosebire de un întreg, vă va ajuta atunci când începeți stilul.
Pentru alinierea pieselor separate aduceți o versiune a întregului logo, micșorați transparența și utilizați-o ca un ghid pentru potrivire. Ștergeți-l când ați terminat. Faceți clic pe toate straturile logoului și apăsați Command + G pentru a le grupa într-un nou dosar. Redenumiți acest dosar "LOGO" și plasați-l în interiorul directorului "HEADERS".
Fiecare piesă se va transforma automat într-un obiect inteligent. Aceasta inseamna ca vor continua sa actioneze ca un obiect vectorial ca in Illustrator - puteti folosi instrumentul Transform (Command + T) in mod liber fara a pierde calitatea.
După ce ați format și plasat logo-ul dvs., va trebui să îl stilizați. Utilizați gradienții pe care le-ați creat înainte pentru a da logo-ului o anumită adâncime - amestecați culorile în sus, dar păstrați culoarea mai întunecată a înclinărilor de jos pentru ambele cuvinte.
Apoi adăugați o umbră la una dintre piese. Setați modul de amestecare la Multiplicare la 100%. Asigurați-vă că ați selectat Utilizarea luminii globale și l-ați setat la 120 de grade, cu distanțe de 1px, 0% și 1px. Dacă activați Global Light, veți seta toate efectele cu umbre pentru a fi la fel - amintiți-vă de coerență, consecvență, coerență!
Am citit în jurul valorii de oameni care arată cum să copiați și să lipiți stilul unui strat, în timp ce aceasta este o metodă bună pentru straturi care sunt foarte îndepărtate, aici sunt câteva modalități rapide de a muta și de a duplica efectele. La fel ca atunci când doriți să multiplicați un strat pe panza și în Paleta de straturi, ținând apăsat Alt și trăgând o nouă copie a acelui strat - puteți duplica efecte cu aceeași metodă.
Alt-trageți pe fx simbolul din stratul sursă la stratul nou și veți înlocui noul strat cu toate efectele primului strat. Dacă doriți doar să duplicați Drop Shadow, deși, în loc de fx simbol, apoi Alt - trageți efectul individual pe un strat nou și veți înlocui doar acel efect sau îl adăugați dacă noul strat nu îl are activat. Utilizați această metodă pentru a vă asigura că toate straturile logo-ului au aceeași umbră.
Selectați stratul "Header BG". Deschideți efectele și adăugați o margine neagră 1px cu poziția setată la Inside. Apoi, dați-i o strălucire exterioară care are modul de amestecare: Multiplicare, Opacitate la 40%, Culoare negru și Dimensiune 9px.
Du-te înapoi în Illustrator și creați câteva forme interesante și creative care vor fi folosite ca fundal luminos pentru zona antetului. Culoarea formei albe, trageți-le în Photoshop, setați modul de amestecare la ecran și Opacitatea lor în cantități diferite de la 2-10%. Luați o altă privire la imaginea finală, veți observa că există multe cercuri și lovituri de cercuri folosite, toate acestea au fost create în Photoshop. Pentru formele mai complexe, Illustrator este mai rapid, dar pentru cercuri veti economisi timp doar pentru a le crea in Photoshop.
Acum vom face un cerc cu doar accidentul alb afișat în Photoshop. Creați un cerc negru cu instrumentul Ellipse, apoi deschideți efectele pentru acel strat și dați-i o lovitură albă. Închideți efectele și apoi setați Modul de amestecare la ecran, veți vedea totul, în afară de cursa albă, care va dispărea. Cel mai mare avantaj este capacitatea de a schimba lățimea cursei prin simpla deschidere a efectelor și editarea acesteia.
Petreceți ceva timp cu acest lucru, experimentați cu diferite opacities și compoziții - creați niște forme funky care vă pot ajuta să individualizați acest design. Nu vă faceți griji dacă unele forme sunt vizibile sub antet, vom avea grijă de asta în pasul următor.
Selectați toate formele și plasați-le într-un dosar deasupra stratului "Header BG". Apăsați comanda pe masca vectorială (caseta gri) din "Header BG" pentru a vedea întregul antet selectat pe panza. Acum, selectați dosarul pe care tocmai l-ați creat și faceți clic pe butonul mic din partea inferioară a ferestrei straturilor numit "Add Mask Layer"
Mascarea este ceva ce într-adevăr nu văd suficient în practica mea profesională, este foarte util și rapid, iar partea cea mai bună este că este o metodă nedistructivă. Luați în considerare faptul că ați putut să aplatizați formele într-un singur strat și să ștergeți zona. Dar apoi ați vrut să schimbați o parte din compoziție sau accident vascular cerebral într-unul din cercuri - mascarea face din nou înapoi și face schimbări mai repede.
Sub antetul veți observa o serie de grafică care seamănă cu dealuri în relief. Folosind culorile swatch și jucând cu transparența puteți obține acest aspect. În cele din urmă, acestea vor trebui să fie ajustate în țiglă pe orizontală.
Să luăm în considerare pentru o secundă aceste și restul elementelor nefuncționale ale designului. Există o sumă decentă, bine, doar o grafică oarecum aleatoare. Ce contribuție le adaugă la proiectare? În primul rând, o astfel de grafică reprezintă o modalitate excelentă de a direcționa simțul și starea de spirit a unui site web, o modalitate foarte bună de a ajuta un brand să se răspândească.
Deși nu prea am experiența de a explica brandingul, voi încerca să vă dau o scurtă analiză, astfel încât să puteți pune totul în perspectivă. O marcă este totul despre o companie pe care o simte un consumator - emoțiile, amintirile, sunetele, culorile, experiențele etc. Marty Neumeier, în cartea sa The Brand Gap, explică foarte clar că "O marcă nu este ceea ce spui este. ce spun ei că este. " Deci, ce are de-a face cu grafica? În timp ce nu puteți construi un brand, îl puteți ajuta să crească în mintea unui client prin furnizarea continuă a imaginilor care evocă esența companiei dvs..
OK, uitați-vă la imaginea finală, ce vă spune despre această companie? Accentul meu a fost acela de a face culorile și formele să traducă un sentiment de distracție și funkyiness, dar structura și structura strictă a rețelei dau un sentiment de profesionalism și seriozitate. Aceasta este marca exactă pe care fiecare companie dorește să o construiască? Cu siguranță, nu, fiecare companie ar trebui să fie unică și fiecare pagină web să extindă o aură diferențiată.
Ascunde totul, dar stratul "BG". Fundalul acestui design este încadrat de un dreptunghi mare rotunjit. Aceasta adaugă o structură și o adâncime mai mică designului dvs. Deoarece nu veți da conținutului principal o cutie proprie, cum ar fi barele laterale, aceasta este o abordare bună pentru spălarea graficelor de fundal și îmbunătățirea lizibilității. Dreptunghiul alb rotunjit are o rază de 8px, la fel ca cutiile - un alt detaliu de consistență. Veți găsi mai multe detalii despre efecte în imaginea de mai jos.
Folosind aceeași metodă ca și cu antetul, aduc niște forme din Illustrator și le mutați în jurul lor pentru a face puțină grafică. Pe măsură ce veți continua să vă proiectați, probabil veți găsi că vă întrebați cu ei pentru a găsi o compoziție care funcționează bine. Se amestecă nuanțele de culori închise și transparență.
Este posibil să observați că pictograma din logo este utilizată foarte mult, un fel de memento subliminală. Am avut un profesor de film în colegiu care ma învățat că o imagine, o culoare, etc. trebuia repetată de cel puțin trei ori într-un film pentru ca un utilizator să-și amintească și să se înțeleagă de la el. Încerc să folosesc acest principiu cu designul meu - logo-ul a fost repetat de mai multe ori (cu bun gust și în rațiune) cu speranța că utilizatorul se va familiariza cu compania și va aminti de pictograma.
Navigarea acestui design este puternic influențată de site-ul curent preferat - aviary.com.
Micul grafic acasă și cuvântul Acasă sunt puțin mai strălucitoare și în spatele lor există un fundal gri mai deschis - aceasta este pentru a îmbunătăți gradul de utilizare. Gândiți-vă ca utilizatorul! Lăsați-i să știe cu ușurință la ce pagină se află. Modalități comune de a face acest lucru sunt prin file, culoare, subliniază, evidențiază și grafice suplimentare. Gândește-te la aceste opțiuni și fii creativă cu abordarea ta.
Pentru legături și butoane, starea de hover este o imensă îmbunătățire a utilizabilității. Uită-te din nou la imaginea finală și uita-te la unele dintre legături. Un design bine gândit va lua în considerare cum vor arăta acestea și cum vor funcționa acestea. Dacă nu codificați propriile site-uri, utilizați o mică imagine a unui cursor de legătură pentru a indica programatorilor ce se întâmplă. Funcțiile ascunse ca un meniu derulant (imaginea de mai jos) trebuie să fie luate în considerare și proiectate complet. Așteptarea pentru a găsi designul dvs. frumos este asociat cu unele meniuri ascunse deranjant va conduce nebun. Dacă sunteți designerul, depinde de dvs. să luați în considerare toate acestea.
Imaginea cursorului de legătură poate fi găsită ca PNG împreună cu mai multe resurse gratuite de design aici.
Ai observat asta NOU! insignă? Tocmai am încălcat una dintre primele mele reguli! Ei bine, vom face o mică excepție pentru fonturile de pixeli! Fonturile pixelilor nu au nici un anti-aliasing, astfel încât le face foarte clare. Această claritate poate fi de multe ori inofensivă pentru un font de dimensiuni normale, dar fonturile pixelilor funcționează minunat la dimensiuni mici. Aruncați o privire la cât de puțin iluzibil Verdana și Georgia sunt la 8pt față de fonturile pixelilor, o mare diferență, da?
Fonturile pixelilor sunt populare în Flash, se încarcă mai repede și mențin acea crocantă, dar funcționează bine și în designul web! OK, acum că știți despre bucuriile de fonturi pixel, asigurați-vă că le folosiți cu ușurință. Pentru aplicații ca acest mic NOU! insigna functioneaza foarte bine, dar in cea mai mare parte nu ar trebui sa le folositi pentru multe alte aplicatii - nimeni nu vrea sa citeasca mai mult de cateva cuvinte intr-un font pixel. Fontul utilizat în acest exemplu se numește Uni 5063 și poate fi descărcat gratuit de la Miniml.
Acum, examinați colțurile rotunjite ale meniului derulant. Fundalul alb este de fapt construit din trei dreptunghiuri colț rotunjite. Al treilea a fost întors înăuntru cu Instrumentul de selecție directă pentru a face un colț interior rotunjit.
Întoarceți barele laterale albe și creați ghidaje care dau fiecăruia dintre barele laterale o cusătură de zece pixeli. Adăugați tot textul fictiv pe care îl veți folosi și duplicați barele laterale după cum este necesar. Pentru a le extinde sau a le contracta pe verticală, utilizați Instrumentul de selecție directă pentru a selecta cele patru puncte de ancorare de jos și pentru a le împinge cu tastatura în jos sau în sus. Următorul pas este reglarea fină a stilului întregului text.
Tot textul a fost aranjat într-o ierarhie de importanță și concentrare, iar acest lucru este semnalat prin stilul acelui text. Cea mai mare dimensiune a fontului și cea mai întunecată culoare (citiți: cel mai mare contrast) este rezervată titlului de conținut principal. Subtitlul este mai mare și mai întunecat decât corpul principal, iar corpul principal este mai mare decât conținutul barei laterale și așa mai departe. Fiți conștienți de faptul că toate culorile sunt din mărimi - consecvență, coerență, consistență!
Acum că ați organizat toate casetele bara laterală și textul este colorat corespunzător, puteți începe să stylizați casetele. Dați fiecăruia intrare un gradient de fundal foarte luminos și folosiți instrumentul de linie pentru a desena o linie orizontală în partea de sus a gradientului. Acestea vor separa vizual fiecare intrare. Dați cutiei bara laterală o umbră de cădere ușoară.
Pentru fundalul suprafeței titlului secțiunilor bara laterală, desenați un dreptunghi sub celelalte forme / forme și adăugați o suprapunere cu gradienți de roz și un curs 1px plin cu un gradient reflectat orizontal de roz spre alb. Apoi, dați stratului de fundal titlu o mască de strat sub forma casetei din bara laterală.
Repetați acești pași pentru toate dulapurile laterale ale designului dvs. Dacă sunteți interesat să creați caseta de înscriere la newsletter, lăsați-i loc și îl vom acoperi în următorii pași.
Pentru a crea acel mic grafic în partea inferioară a fiecărei casete din bara laterală, va fi mult mai rapid dacă lucrați cu Illustrator doar puțin mai mult. Illustratorul este adesea configurat pentru a fi în modul de culoare CMYK; cu toate acestea, deoarece proiectați pentru ecran, modul de culoare va trebui să fie schimbat în RGB. Treceți la Illustrator și mergeți la File> Document Color Mode> RGB Color. În continuare, va trebui să desenați graficul de subsol dorit.
Acum, reveniți la Photoshop, selectați cele trei swatches de mijloc de culoare închisă, roz și ciană - trageți-le spre Illustrator. Utilizați instrumentul Eyedropper (I) în Illustrator pentru a colora graficul dorit. Trageți graficul în Photoshop, dimensiune și locul în consecință. Puteți adăuga și unele efecte, m-am dus cu o ușoară Drop Shadow și o suprapunere subtilă de gradient (alb-negru, cu un mod amestec de multiplicare și opacitate de 10%)
Avantajul acestei proceduri este acela de a avea un obiect inteligent care este deja colorat. Dacă ați fi tras acest lucru în Photoshop și încercarea de a colora piesele individuale ar fi un proces mai lung care ar necesita rasterizarea obiectului inteligent și crearea a mai mult de un strat.
Nu voi deveni prea nebun în ideile din spatele graficei și brandingului ca înainte, dar vreau să atinge unele din grafica primordială a site-ului. În imaginea finală există o serie de grafică asemănătoare celei de la pasul 18, dar ele sunt puțin mai complexe. Odată ce ați desenat formele graficului, deschideți efectele și adăugați o suprapunere Gradient.
Puteți vedea cum sunt aranjate culorile în gradient pentru a da aspectul unei divizări clare între nuanțele mai deschise și nuanțele mai întunecate. Rețineți că există mai multe modalități de a realiza acest lucru, inclusiv utilizarea dreptunghiurilor albe și a măștilor de straturi.
Aceste imagini grafice sunt excelente pentru închiderea și personalizarea icoanelor. Ca și semnul întrebării din secțiunea principală a corpului Știați… orice pictogramă sau simbol ar putea fi plasate acolo. Exemplele de mai jos utilizează icoane din pachetul gratuit Simplicio și multe alte pachete gratuite de pictograme pot fi găsite la Icon Pot.
În mod surprinzător, pentru mine, una dintre cele mai dificile părți ale designului web este crearea butoanelor personalizate. Aceste butoane urmează ceea ce a fost denumit "Web 2.0 Design" de către comunitatea de design web.
Mai întâi, să examinăm câteva butoane din imaginea finală. Pentru consistență, textul de pe fiecare buton este Rockwell bold, cu excepția butonului de conectare din cauza dimensiunii sale mici - Rockwell nu funcționează bine la astfel de dimensiuni mici. În plus, tot stilul textului și al butoanelor de fundal sunt aceleași.
Privind în continuare la butonul mărite puteți vedea mai multe dintre efectele mai îndeaproape. Multe dintre efectele utilizate sunt foarte frecvente pentru crearea stilului Web 2.0, mai ales un accident de 1px în jurul butonului, umplerea umbrelor atât pe text, cât și pe cutie, pictograme, ceva care dă impresia 3D și gradientele. Puteți vedea butonul Urmăriți-ne folosește toate acestea. Pentru a crea efectul 3D, a fost aplicată o umbră de dungă interioară în caseta de fundal. Uită-te atent și vei vedea că textul are o umbră foarte puternică - asta creează aceeași impresie ca și cum ai fi duplicat textul. Colorați copia de jos negru și mutați-o în jos și la un pixel drept.
Nu simțiți că există un mod corect sau greșit de a crea butoane. Aruncați o privire la ceea ce este în jurul valorii de Web, juca în jurul valorii de cu unele dintre efectele și se stabilească pe ceva care vă simți ambele arata ca un buton și este un meci atrăgătoare pentru designul pe care lucrați pe.
Oricât de important este ca designul dvs. web să urmeze grila, ocazional ruperea grilei aici și acolo vă poate ajuta să vă dați designului un caracter. Locul principal în care rețeaua este ruptă în acest design web este în zona antetului lângă logo. Această mashup grafică ușurează tensiunea structurii rețelei și conferă site-ului un simt mai funk și diferențiat. Trebuie remarcat faptul că designul și conținutul încalcă graficul vizual în această zonă. Descrierea companiei aderă la coloană, dar pauzele în rând și grafica sunt aproape aleatorii în plasamentul lor. Mashupul grafic este alcătuit din forme, gradienți și umbre; ar trebui
Accentsconagua