Share
În cea mai mare parte, designul web nu este cu adevărat despre tehnica Photoshop, deci este întotdeauna dificil de scris un tutorial Photoshop pe această temă. Chiar astăzi o să vă duc printr-un design pe care l-am pus de curând. Vom trece prin niște pași de Photoshop și voi încerca să vă dau câteva raționamente în spatele acțiunilor mele.
Puteți găsi fișierele Photoshop PSD într-un director numit "PSD" care a apărut în fișierul ZIP pe care l-ați descărcat. Poate doriți să le priviți pe scurt înainte de a începe.
În primul rând o privire la desene sau modele. Scriu o carte despre tematica WordPress numita Cum sa fii un designer Rockstar WordPress. Cartea a necesitat o temă de exemplu, așa că am proiectat-o pe cea pe care o numesc "Creatif"- pentru că sună franceză și destul de cool.De fapt, este un set de modele pe care le vom construi în două teme WordPress - unul este un blog obișnuit, și unul este o temă care vă permite să utilizați WordPress pentru a face un portofoliu.
Ceea ce vedeți mai jos sunt cele patru ecrane de proiectare principale pe care le-am folosit pentru a construi tema. În general, creez două ecrane pentru majoritatea site-urilor web - o pagină de pornire și o pagină de conținut. Dacă un site este mai complicat, aș crea un ecran pe o pagină critică. Într-o anumită măsură, puteți crea anumite pagini atunci când vă aflați în faza de construire a HTML-ului, dar este bine să cartografiați toate paginile cheie, astfel încât să puteți fi siguri că totul arată și se simte bine.
Ecranele de mai jos sunt:
Una dintre primele mele decizii când proiectez un nou site este să aleg o paletă de culori. Există câteva site-uri bune acolo pentru a vă ajuta să alegeți un set frumos, dar de multe ori am venit doar cu propria mea de a experimenta. O formulă simplă pe care o folosesc uneori este să aleg un set de nuanțe neutre și o singură culoare pentru a ridica paleta. În acest caz, am ales o paletă de culoare beigy-gri, cu un albastru deschis, albastru, ca culoarea mea de culori.
Începem tutorialul cu un mic logo. În timp ce designul de logo-uri este, în general, un proces complex, în acest caz, vreau doar un pic grafic pentru a ancora pagina mea. Așa că am ignorat toate procesele obișnuite și am făcut o simplă mică siglă de text / cutie. Dacă sunteți interesat de designul logo-ului, un blog bun pe această temă este Logo Design Love de David Airey, și o galerie bună de logouri poate fi găsită, desigur, la Faveup.
Oricum, am ales fontul News Gothic Condensed Bold. Cred că acesta este un font implicit pentru Mac, dar nu sunt sigur dacă instalați fonturi bazilion oriunde mă duc. Am folosit un simplu Stratul de stil (pentru care puteți vedea setările în pasul următor) care face ca tipul să arate cam web2 și la modă. Utilizează un gradient slab, o umbră subtilă și o margine de 1px pentru a ridica tipul de pe pagină.
Iată setările pentru stilul stratului:
Apoi am adăugat un dreptunghi rotunjit în spatele textului. Puteți crea acest lucru cu Instrument rotunjit dreptunghiular (U). Așa cum puteți vedea în imaginea de mai jos am adăugat un gradient slab la cutie, de asemenea. Puteți face asta prin CTRL-clic stratul cutiei pentru a-și selecta pixelii, mergând la Selectați> Modificare> Contract și contractarea de către 1px și apoi într-un nou strat desen a Radial Gradient de la o versiune mai ușoară a culorii întunecate până la transparență.
Așa cum am menționat mai devreme, acest design are un pic de simț al unui web2 - este curat și simplu, are unele declivități și este destul de curat. Unii designeri se opresc ferm de tendințele, personal nu mă deranjează să le folosesc atât timp cât se potrivesc scopului meu. În acest caz, am vrut un aspect curat, care nu a împiedicat conținutul, ci a oferit un ambalaj frumos. Oricum, totul e un pic subiectiv.
Acum, pânza pe care o folosesc aici este de aproximativ 1100px lățime x 1400px înălțime. În realitate, tot conținutul este de 1000px, astfel încât acesta va fi vizibil pe un ecran de 1024 x 768. Îmi place să am o pânză mai largă, astfel încât să pot planifica ce se întâmplă atunci când spectatorul are o rezoluție mai mare.
În acest pas am adăugat elementele de bază ale antetului meu, și anume un bar închis în partea de sus, o nuanță mai închisă a culorii de fundal ca bara de meniu, o linie de 1px pentru a închide bara de meniu și un subtext sub sigla mea în News Gothic Condensat din nou).
Există două lucruri de reținut:
Aici adăugăm primul bit al culorii noastre evidențiate. Este o linie subtilă de 1px de-a lungul vârfului. Mai târziu, când adăugăm mai multe elemente, culoarea evidențiată va apărea din nou în diferite locuri și va trage acele elemente împreună pentru a le uni într-un design unic, cu aspect uimitor. Deoarece nu există prea mult pentru acest design, cu excepția elementelor bine poziționate și a culorii, este foarte important să obțineți dreptul de colorare.
Acum, pagina este puțin cam plată, deci am adăugat un strat chiar deasupra stratului de fundal. Apoi am tras la un Gradient Radial, mergând de la culoarea mea întunecată de culoare bej / gri la transparență și am stabilit acel strat pentru Color Dodge pentru a lăsa fundalul. Deoarece bara de meniu este de fapt trasată cu transparență, efectul de lumină arată și prin bara de meniu.
Este important să vă amintiți, totuși, că trebuie să construiți acest design în HTML mai târziu. Din acest motiv, veți observa că, în momentul în care ajungeți la marginea zonei vizibile de 1000 pixeli, revenim la culori monotone. Aceasta înseamnă mai târziu că voi putea să creez o singură felie de imagini și să o folosesc ca imagine de fundal CSS. Apoi voi avea o altă imagine de fundal cu zona mare de evidențiere și aceasta va fi o imagine de fundal în corpul principal de conținut.
Este important să știți despre site-urile de construcție, astfel încât să le puteți proiecta astfel încât să evitați complicațiile ulterioare pe pista. Cred că aceasta provine cel mai mult din experiență și de învățare a deciziilor de proiectare care pot face viața mai dificilă mai târziu. Aici face ca viața să fie mult mai ușor să aibă un fundal ușor de repetat în afara zonei vizibile de 1000 pixeli.
Apoi este timpul să începeți să adăugați prima mea zonă albă de conținut. Aici am folosit un contur de 1px al unei versiuni mai întunecate a culorii de fundal, apoi o margine interioară de 1px și, în final, un gradient slab bej care merge în jos. Acest stil se potrivește cu sigla mea anterioară. În plus, având o schiță mai întunecată, urmată de conturul interior mai ușor, vom obține un aspect foarte ascuțit al paginii. Claritatea provine de la contrast - adică de la întuneric la lumină.
Personal, cred că claritatea sau claritatea sunt cu adevărat vitale în designul web. Nimic nu mă deranjează mai mult decât o lipsă de atenție la detalii, făcând lucrurile clare și clare.
Acum adaug ceva de aici. Deoarece acest text trebuie să fie text HTML, este important să alegeți cu atenție fonturile. Nu este nimic mai deprimant decât alegerea unor fonturi frumoase și apoi amintirea mai târziu că acestea nu sunt fonturi implicite și, în consecință, designul dvs. va arăta complet diferit de modul în care v-ați imaginat. Am folosit Helvetica pentru titlul îndrăzneț și Arial pentru text.
În Photoshop este o idee bună să setați Anti-Aliasing la "Sharp" pentru a imita modul în care textul va arăta în browser. În vremurile vechi am folosit-o "Nici unul", dar în aceste zile majoritatea PC-urilor și tuturor Mac-urilor utilizează chestiile astea clare pentru a face fonturile să pară netede.
Rețineți că linkurile subtextului utilizează culoarea albastră a culorilor, luând pe linia de 1px pe care am adăugat-o mai devreme.
Apoi am adăugat un mic element de design sub forma unei benzi de mesaj de-a lungul colțului din dreapta sus al cutiei. Într-un design simplu ca acesta (unde sunt linii și cutii foarte simple), este frumos să ai unul sau două elemente care într-adevăr scapă. În acest caz, vom folosi culoarea noastră de culori combinată cu un unghi de 45 de grade pentru a face un element răcoros care arată minunat.
Așadar, desenați un dreptunghi și adăugați un text peste partea de sus. Apoi am folosit Instrumentul Dodge (O) pentru a ușura partea de mijloc și a adăugat un stil de strat pentru a da textului un pic de umbră. Apoi selectând ambele straturi împreună, am lovit CTRL-T pentru a transforma și roti 45 '.
După ce ați pus-o peste cutia mea, taie marginile așa cum se arată. Acum veți observa că am putut să o plasăm astfel încât să fie aliniat cu cutia, dar m-am gândit că ar fi frumos să se pară că această bandă se înfășoară în jurul cutiei, așa că este cam de 4px de pe cutie.
Apoi am selectat manual pixelii din modelul pe care îl vedeți mai jos, a creat un strat sub stratul de bandă și a atras culoarea albastru închis. Este mai întunecată, astfel încât să pară partea din spate a benzii de mesaje și veți observa că am făcut-o astfel încât să fie mai întunecată spre dreapta, unde este într-o umbră martoră.
Apoi mi-am copiat folia și i-am rotit-o 90 'și l-am așezat și pe partea dreaptă a cutiei, așa cum am arătat. Și voila, elementul nostru de design!
Apoi am creat mai multe elemente. Nu e nimic nou aici. De fapt, am reușit să folosesc aceleași elemente de design - același stil de text, aceeași bandă de mesaje, aceleași cutii - și le-am atras în locul în care îmi doresc conținutul meu.
Apoi am adăugat o zonă de subsol. Nu este un subsol foarte interesant, dar folosește aceleași culori ca și bara de sus pentru a le reflecta încă o dată și în acest caz sigilați designul.
Acum, pentru că creez o temă WordPress, am decis, de asemenea, să creez o versiune a logo-ului meu care ar putea fi creată cu text simplu. Puteți vedea mai jos și în componenta HTML a acestui tutorial vom crea acea casetă "logo".
În acest moment am crezut că îți arăt paleta de straturi. Eu nu sunt mare pe nume straturi (pentru că eu sunt leneș), dar cred că în gruparea straturi în seturi. Aici, designul logo-ului logo vs logo, blog-ul vs portofoliul și pagina internă sunt toate în același fișier PSD, doar în seturi diferite de straturi. Deci, pot să le pornesc și să le iau aranjamente diferite. Acest lucru este util pentru că, dacă dintr-o dată decid să muiesc logo-ul de 2px spre stânga, nu trebuie să deschid trei fișiere și să mut 2px în fiecare sau riscând să aibă discrepanțe. De asemenea, este doar frumos și a ordonat și mă face să mă simt foarte cald și fuzzy înăuntru să se uite la.
Acum ar trebui să subliniez că, în practică, nu am proiectat destul acest design așa cum am prezentat în tutorial. De fapt, momeala mea cea mai timpurie părea mai mult ca imaginea de mai jos.
Apoi mi sa părut să opresc stratul de culoare brun închis și am crezut că părea răcoroasă doar pe culoarea mai deschisă. Acesta este ceea ce se numește Accident fericit. Aș vrea să pot spune că eram suficient de inteligent pentru a fi responsabil pentru toată frumusețea muncii mele, dar sincer jumătate din ea este pura noroc.
In orice caz, cand am ajuns la sfarsitul design-ului meu m-am uitat inapoi la acest mockup timpuriu si am crezut ca design-ul arata destul de frumos cu o culoare de fundal inchis. Deci, de ce să nu faceți o versiune unde este întunecată, atunci pot crea o opțiune pentru a comuta foi de stil, care ar fi bine!
Așa că am creat o copie nouă a fișierului meu de design și am schimbat fundalul în maro închis. Din fericire, nu este de fapt prea mult de schimbat, am întunecat logo-ul la negru, astfel încât acesta se remarcă încă, am ajustat, de asemenea, alte câteva culori pentru a face designul toate au sens. Nu este la fel de frumos ca originalul, ci un plus frumos pentru familie.
După cum am menționat la începutul acestui tutorial, nu este vorba despre tehnica Photoshop. Realitatea este că designul web folosește adesea doar tehnici de bază de umplere în blocuri de culoare. Acest design se referă mai mult la alegerea culorilor și nuanțelor, a fonturilor și apoi la decizia de a pune totul în afară. Sper că ai ieșit din proces.
Desigur, proiectarea unui site în Photoshop este doar o parte a unui proiect de web design. Următorul pas este să luați designul în HTML.
Accentsconagua