Share
În ultimele zile, căutam inspirație în faimoasele picturi vechi și am fost interesat de "Starry Night" din Van Gogh și m-am gândit: Pot aplica acest lucru web designului? Și răspunsul este Da! Apoi, după mai multe ore de muncă, iată tutorialul pentru dvs., un design web artistic care descrie un concept "Magic Night".
Să începem designul! În primul rând, acesta nu este un tutorial de bază, așa că voi trece peste câteva explicații de bază. Oricum, oricine are un nivel intermediar de avansare a abilităților Photoshop va fi capabil să o facă. În al doilea rând, este foarte greu să obțin exact același rezultat pe care îl am și trebuie să vă folosiți imaginația și bunul gust pentru a obține ceva similar sau mai bun decât designul meu. În al treilea rând, acest lucru a fost proiectat prin examinarea aplicației într-un șablon Wordpress, dar puteți să-l convertiți rapid într-o temă a altui motor sau chiar pe un site personalizat.
Mergând înainte! Creați un nou document 960 pixeli până la 1000 de pixeli și RGB. Desenați niște ghiduri pentru a marca limitele și accesați Image> Canvas Size pentru a redimensiona documentul făcând lățimea panzei mai mare (1460 x 1000 px). În acest fel, designul dvs. va fi centrat pe un document mare și veți vedea cum arată acesta în rezoluțiile de ecran lat. De asemenea, trageți un ghid pentru a marca înălțimea antetului.
Desenați un ghidaj orizontal în mijlocul documentului și utilizați-l pentru a umple stratul "Fundal" cu un Gradient radial albastru închis (# 0D2B53 - # 010D1F). De asemenea, adaug câteva ghidaje ca limite ale padding-ului paginii principale pe stânga și pe dreapta.
Este foarte posibil să schimbați înălțimea documentului mai târziu, deci adăugați un strat nou de umplere (# 010D1F) sub nivelul "fundal".
Deoarece unul dintre cititorii Psdtuts + a sugerat să folosească imagini reale în locul filtrului clasic Clouds, vom încerca din nou acest lucru. Inserați această imagine a unor nori de furtună într-un nou strat numit "Nori" și schimbați Modul de amestecare pentru a suprapune. Apoi, mergeți la Layer> Mask Layer> Ascundeți toate și desenați un Gradient Radial de la alb la negru (#FFFFFF - # 000000), care merge de la mijlocul sus până aproape de fundul de mijloc. Apoi reglați nivelele "Nori" puțin pentru a face ca norii să fie mai întunecați.
Acum lipiți această panoramă frumoasă a unui mal spaniol într-un nou strat numit "skyline". Apoi creați un nou nivel de ajustare> Mixer de canale ... și selectați Black & White cu filtru albastru (RGB). Apoi, pentru a aplica acest efect doar la stratul "skyline" din paleta de straturi, țineți apăsată tasta Option și faceți clic între stratul Mixer de canale și stratul "skyline". În cele din urmă, schimbați modul de amestecare a stratului "skyline" pentru a suprapune.
Aplicați o mască de strat> Afișează tot pe stratul "orizontal". Apoi, folosind o perie moale mare și neagră (# 000000), ascundeți marginea imaginii, apoi selectați o perie Grunge (folosesc acest set de perii Grunge de Kelzky13, în special periile 250 și 181) și faceți marginile puțin mai mult neregulat.
Introduceți în continuare titlul "Magic" utilizând fontul Scriptina. Apoi aplicați stilurile de strat prezentate mai jos: o strălucire exterioară (# 9EB6D0) și o suprapunere cu gradient (# 70ABF6, #FFFFFF, # B4CBE7, #FFFFFF). De asemenea, acum este un moment bun pentru a organiza designul nostru în curs de dezvoltare în dosare. Puneți toate straturile într-un folder nou numit "Fundal" și textul din interiorul altui folder denumit "Logo".
Acum vom adăuga câteva stele la designul nostru, puteți folosi orice set Brush set, dar eu folosesc acest set: perii Star field de BL1nX. Apoi, folosind peria 550 din set, vopsiți stelele în alb (#FFFFFF) într-un nou strat din interiorul unui dosar numit "Stele". Observați că pun cea mai strălucitoare stea deasupra punctului eu. Aplicați apoi o suprapunere de gradient utilizând trei culori (# 3A8FEF, #FFFFFF și # 66C9FC) în stratul "Stars1".
Apoi, folosind peria 615 a setului de câmpuri de stele, adăugați mai multe stele pe cer într-un nou strat numit "Stars2", apoi cu un Eraser moale, ștergeți stelele de pe clădiri. Apoi, adăugați o strălucire exterioară (# 8AB2FF) la "Stars2".
Adăugați mai multe stele în stratul "Stars 2" peste tot în plan, apoi utilizați instrumentul Eraser, ștergeți câteva zone ale stelelor. În cele din urmă, aplicați un efect de acoperire cu gradient pe stratul "Stars2", utilizând patru culori: # 6AB1D1, #FFFFFF, # 94CFED și #FFFFFF.
Acum descarcati aceste Perii Star de jen-ni si pastrati periile la indemana pentru ca le vom folosi de mai multe ori in acest tutorial. Selectați o perie de 65 px (folosind numărul 148) și desenați o stea albă (#FFFFFF) într-un nou strat imediat deasupra punctului eu. Apoi aplicați o strălucire exterioară (# 00BCF9) stelei pentru ao face mai strălucitoare.
Duplicați textul "Magic", selectați textul și introduceți cuvântul "Noapte" în locul acestuia. Apoi, setați Suprafața exterioară la alb (#FFFFFF) și stratul de gradient la trei culori (# F9DA5B, # FEAE00 și # FFD403), consultați imaginea de mai jos pentru a verifica valorile filtrului.
Să adăugăm niște nori în noaptea noastră! Descărcați pensulele Clouds II de la Redheadstock. Apoi, selectați numărul de perie 2464 și setați dimensiunea acesteia la 960 pixeli (potrivite pentru lățimea principală a aspectului de aspect). Setați culoarea primului rând la # 234B7F și inserați un singur nor într-un nou strat numit "cloud1". Pentru a păstra straturile organizate, pun norii într-un dosar separat în interiorul dosarului "Fundal". Acum întindeți înălțimea "nor" 1 puțin.
Urmați, Dodge și Burn norul un pic. Observați că eu luminez zonele de lângă steaua logo-ului și luminez fundul norului. De asemenea, modificați opacitatea "cloud1" la 50%.
Adăugați un nou nor într-un nou strat denumit "cloud2". Puteți utiliza orice nor care vă place, dar utilizați această culoare ca un prim plan: # 5F83A5. Dodge puțin fundul norului pentru a îmbunătăți senzația de iluminare.
Repetați pasul anterior, dar de această dată utilizați o altă pensulă cu această culoare: # 36638C și plasați-o deasupra "cloud1". Redimensionați-l, apoi Dodge și / sau Burn nor, dacă este necesar.
Selectați un Eraser mare și ștergeți fundul stratului "cloud1" pentru a crea un efect de estompare.
Acesta este de fapt un pas critic, vom adăuga fundalul principal al containerului, nu trebuie să uitați niciodată că proiectați pentru web. Folosind instrumentul Rectangle trageți un dreptunghi vectorial (# 0A1D37) într-un nou strat, toate sub folderul "Clouds". Observați că dreptunghiul meu se află în interiorul ghidajelor de umplutură. Apoi selectați stratul de dreptunghi și mergeți la Layer> Mask Layer> Reveal all ... și desenați un gradient alb-negru, care adaugă un efect frumos la partea de sus a dreptunghiului. În cele din urmă, aruncați un ghid sub flancul dreptunghiular, care ne va ajuta atunci când transformăm acest design în HTML + CSS. Observați că din ghid spre fundul culorii ar trebui să fie clar.
Acum adăugați un alt dreptunghi, dar de data aceasta ca fundalul Barei laterale, ajutați-vă din nou cu un Ghid și utilizați culoarea # 091525. Apoi, aplicați noului dreptunghi o mască a stratului puțin asemănătoare cu cea din pasul anterior.
În acest moment, am terminat fundalul antetului de bază. Acum este momentul să adăugați câteva detalii. Voi pune o pictogramă unică RSS pe antet. Copiați această imagine a lunii pline și lipiți-o într-un nou strat numit "luna-rss". Apoi ajustați valorile Hue / Saturation pentru a face luna mai puțin galbenă și adăugați filtre interioare și exterioare (vezi valorile prezentate mai jos).
Adăugați o formă mică a norului cu culoarea # 7997B3 într-un strat nou deasupra lunii din paleta de straturi. Apoi, folosind un radieră mare moale, ștergeți unele zone ale noului nor.
Adăugați forma RSS clasică (# DCA30B) într-un nou strat în fața stratului "lună", dar în spatele stratului "nor". Apoi, aplicați filtrele afișate mai jos (o suprapunere de gradient, o strălucire exterioară și o umbră de picătură). În cele din urmă, adăugați o stea undeva peste forma RSS (vezi Pasul 10).
Inserați această imagine într-un nou strat, îl vom folosi ca fundal al barei de navigare a paginilor principale. Deoarece imaginea originală este puțin întinsă, trebuie să o facem mai largă, am jucat cu ambele selecții și cu instrumentul Mutare (Transformare liberă) pentru a mări lățimea parolei. Apoi răsuciți derularea doar puțin, folosind urzeala Flag.
Dodge unele zone ale scroll pentru a crește umbrele și pentru a îmbunătăți iluzia warp.
Pentru a îmbunătăți textura scrolului, aplicați un filtru de acoperire cu gradient (# 045F96 și # FBF4BD) și o suprapunere de tip, de asemenea.
Acum adăugați o Shadow Drop la defilare. Puteți utiliza filtrul Drop Shadow sau faceți ceea ce am făcut, duplicați stratul de defilare, iar pe Hue / Saturation reglați luminozitatea la -100, Blur copia neagră puțin și distorsionați-o cu ajutorul instrumentului Transformare liberă pentru al face neregulat.
Apoi, adăugați un nor peste derulare, Dodge, Burn și Ștergeți exact ca în Pasul 15. Apoi adăugați textul linkului Pagini folosind fontul Georgia - Italic. Utilizați culoarea # 0B1827 pentru linkurile standard și culoarea # 211808 pentru linkul hover. De asemenea, adăugați câteva detalii suplimentare, cum ar fi stelele pe fundal și o linie ca efectul de hovering. Puteți vedea structura straturilor în partea de jos a imaginii de mai jos.
Ca un detaliu final în bara de navigare a paginilor, creați un nou strat deasupra defilării și folosiți o perie de particule, trageți o linie asemănătoare unei picturi cu acuarelă (a se vedea imaginea de mai jos). Fă-o de câteva ori, dar folosind culori diferite. De asemenea, în jos bara de navigare "Stele" Opacitate sub 40%.
Adăugați textul asociat RSS. Folosesc 10 px Aria, cu galben (# F2C90D) și alb (#FFFFFF). Nu uitați să setați metoda Anti-aliasing la None, deoarece majoritatea browserelor redă textul fără nici o alianță (IE7 și Safari sunt excepțiile).
Ca un detaliu suplimentar adăugați această imagine a unui balon frumos. Extrageți balonul din fundal și plasați-l undeva sub siglă, adăugați o suprapunere de culoare (# 1F416E - Blending Mode: Overlay) în stratul "Balon" pentru a se potrivi cu culorile scenei. De asemenea, puteți arde partea stângă a balonului doar puțin.
Apoi, folosind peria 615 a periilor de câmp stele (vezi Pasul 8) adăugați mai multe stele deasupra balonului și defilați. De asemenea, adaug un coardă la balon prin pictarea unei linii albe curbate cu o perie solidă de 3 px. De asemenea, utilizați Eraserul aici și acolo pentru a reduce cantitatea de stele.
Este timpul să adăugați o postare. Mai întâi, adăugați titlul și rândul metadatelor într-un nou strat denumit "Postare". Vedeți imaginea de mai jos pentru a vedea valorile caracterului. De asemenea, adaug o stea mică în apropierea metadatelor ca un detaliu vizual.
Să adăugăm mai multe informații în dosarul "Postare", deoarece lista de pe pagina de pornire va avea o previzualizare a mai multor postări. Vom adăuga o imagine de previzualizare la stânga (200 px la 200 px cu un efect Stroke Stroke) și un scurt text în partea dreaptă. De asemenea, vom adăuga o previzualizare a numărului de comentarii pe care postul le are în partea dreaptă sus. Pentru câmpul de comentarii, creați un nou folder denumit "Comentarii" și adăugați un fundal mic, cu un nor mic și câteva stele mici. Practic, repetați unul dintre pașii anteriori când proiectăm antetul, dar într-o măsură mică. Apoi adăugați numărul comentariilor și cuvântul Comentarii de mai jos.
Apoi, adăugați o Etichete line sub post și adăugați o stea în partea dreaptă a acelei linii. Adăugați un câmp cu stea mică ca fundal pentru post, doar dacă doriți. În cele din urmă, trageți un divider (# 1D324F) pentru post utilizând Instrumentul de linie.
Apoi duplicați dosarul "Post" și editați copiile pentru a crea două sau trei postări diferite. Este foarte posibil ca înălțimea documentului dvs. să fie mărită în acest moment, faceți-o doar cu ajutorul instrumentului Crop or Image> Canvas size, jut ca în pasul 1. Când ați redimensionat documentul principal, creșteți înălțimea atât a principalului fundal și fundal bara laterală, de asemenea.
Să lucrăm acum pe bara laterală. Vom adăuga formularul de căutare. Creați un nou folder numit "Sidebar", iar în interiorul acestuia creați un alt dosar și îl denumiți "Căutare". Desenați un nor într-un dosar și evitați-l și faceți-l să pară imaginea următoare. Apoi, folosind Instrumentul Rounded Rectangle, desenați un dreptunghi peste nor. Aplicați un efect 1px Inside Stroke (# 697372) pe dreptunghiul și modificați valoarea de umplere la 50%.
Adăugați câteva stele albe deasupra stratului de nor folosind orice strat de câmp stele, amintiți-vă că ștergeți toate stelele suplimentare. Apoi duplicați, micșorați și Editați> Flip orizontal stratul "balon" din Etapa 29. Puneți-l în folderul "Căutare". De asemenea, adăugați textul titlu folosind Georgia Italic și o culoare galbenă frumoasă (# D5A934). Apoi, adăugați instrucțiunile de căutare și butonul "Merge!"Puteți vedea valorile caracterului în partea inferioară a imaginii următoare: Ca un detaliu final trageți o singură stea luminată în spatele textului.
Adăugați textul conținutului bara laterală, titlurile, linkurile și puneți fiecare secțiune într-un folder separat. De asemenea, adăugați un fundal câmp moale pe fiecare dosar și o stea strălucitoare în spatele fiecărui titlu. În plus, adăugați o stea strălucitoare ca exemplu de efect de hover pe orice legătură. Nu uitati atat ghidajele, cat si padele.
Ajungem la final. Să adăugăm un subsol pentru bara laterală. Mai întâi, decolorați puțin din fundul picturii de fond a barei laterale cu o perie moale pe masca stratului. În continuare trageți câteva nori, apoi Dodge și Ardeți-i. Asigurați-vă că norii nu invadează fondul de conținut principal sau nu depășesc lățimea barei laterale. Apoi adăugați un câmp de culoare albă în spatele norilor și duplicați balonul încă o dată. Salvez toate acestea într-un dosar numit "Footer lateral".
În cele din urmă, vom crea subsolul. Mai întâi, pe masca stratului principal de conținut, folosind o periuță moale, ascundeți fundul pentru ao elimina. Apoi selectați niște perii de nor și le vopsiți pe toată fundul desenului. Am combinat nori de albastru închis (# 0B1C38) și nori mici (# 223E63), așa cum se arată în imaginile de mai jos. Amintiți-vă, acele nori vor deveni o imagine de fundal, așa că încercați să nu traversați un Ghid între conținut și subsol. În plus, nu uitați să puneți toate straturile legate de footer într-un folder nou numit "Footer".
Ardeți cei mai ușori nori. Apoi, vopsiți un câmp de culoare albă folosind peria 615 a setului de stele. În continuare, vopsea un câmp de culoare mai strălucitor cu o perie diferită, în acest caz numărul 656 al setului. În cele din urmă, ștergeți câmpul de stea cu un Eraser mare.
Sper că ați găsit acest tut util. Membrii PLUS pot descărca fișierul PSD și pot modifica orice doriți, adăugați sau eliminați detaliile și creați propriul dvs. design înstelat.
.
Aboneaza-te la feed-ul Psdtuts + RSS pentru cele mai bune tutturi Photoshop și articole de pe web.
Accentsconagua