Share
Nu numai că accidentele perie acuarelă devin o tendință populară în designul web modern, dar și ele au niveluri avansate de transparență (sau ceea ce eu numesc, translucență). Noul design Envato a primit o mulțime de kudos pentru utilizarea acestui efect, și acest tutorial vă va arăta cum să creați un efect similar, combinându-l cu alte tendințe web populare.
Uitați-vă la imaginea pe care o vom crea.
Să ne pregătim documentul. Am tendința de a crea site-urile mele cu o lățime fixă de 960px și înălțime variabilă. Pentru acest tutorial, am ales o înălțime de 800px pentru a ne asigura că avem suficient spațiu pentru toate secțiunile de conținut pe care dorim să le includem. Crearea documentului original la dimensiunea exactă pe care doriți ca site-ul să fie făcută ușurează crearea ghidurilor.
Apoi, vom stabili ghizii. Trageți linii directoare de la riglele de documente la cele patru margini ale documentului.
Acum trebuie să alocăm spațiu pentru fundalul pe care îl vom crea. Accesați Imagine> Canvas Size și extindeți documentul la 1100 pixeli la 1000 de pixeli. Acest lucru ar trebui să ne dea o mulțime de zonă pentru a umple în fundal unic noastre.
Umpleți stratul de fund cu alb (Shift + F5). Redenumiți acest strat ca "fundal". Documentul ar trebui să arate acum ca imaginea de mai jos.
Faceți clic dreapta pe stratul "fundal" și selectați Opțiuni de amestecare. Vom adăuga o suprapunere de gradient în stratul nostru de fundal. Am ales un gradient cu trei culori, cu unele blues și tansuri, cu toate acestea, puteți alege în esență orice culori doriți. Frumusețea utilizării opțiunilor de amestecare pentru fundal este că oricând puteți să dezactivați culorile și să reglați gradientul după gust.
Documentul dvs. ar trebui să arate astfel:
Poate doriți să treceți peste acest pas, însă simt că un gradient ascuțit este puțin prea lucios pentru acest design. Vom adăuga niște zgomote pentru ao tonifica puțin.
Creați un nou strat. Redenumiți acest strat "zgomot". Apoi, completați stratul cu alb (Editați> Umplere). Odată ce aveți stratul umplut cu alb, trebuie să adăugăm un zgomot prin aplicarea filtrului> zgomot> adăugare zgomot. Setați suma la 400%, cu o distribuție uniformă și non-monocromatică. Toate culorile zgomotului ne vor da mult mai multă adâncime în fundalul nostru.
Setați stratul "zgomot" pentru a multiplica și setați opacitatea la 5%. Acest lucru ar trebui să ne dea suficient graininess pentru a reduce gradientul.
În primul rând, va trebui să descărcați niște perii Brush Stroke, dacă nu le aveți deja. Iată câteva dintre ele pe care le-am folosit în trecut: "Accident vascular cerebral."
Creați un strat nou, deasupra straturilor "fundal" și "zgomot". Redenumiți acest strat la "brush1" (vom crea mai multe straturi ca acesta). Setați acest strat la Multiplicare. Alegeți o culoare caldă în prim plan (pentru a compensa sunetele reci) în fundalul nostru de fundal albastru. Am ales un maro cald: # 996726. Selectați peria pe care doriți să o desenați și plasați-o în partea din stânga sus a documentului, asigurându-vă că cursa periei este în afara limitelor orientărilor dvs. (dorim ca fundalul să se extindă în afara).
Ajustați opacitatea stratului la 50% (astfel încât granulația să fie afișată). Repetați pașii anteriori pentru mai multe perii pentru a vă potrivi gustului. Fundalul dvs. ar trebui să arate acum ca imaginea de mai jos.
Felicitări, fundalul personalizat și unic este complet. Din moment ce ați plasat perii aleatoriu, acesta vă va diferenția de acele modele care au cumpărat un fond de stoc similar.
În primul rând, va trebui să luăm instrumentul Rounded Rectangle Tool și să setăm raza la 20 de pixeli. Mai presus de toate straturile de fundal (perii + zgomot + gradient), trageți și trageți un dreptunghi rotunjit în cadrul orientărilor originale pe care le-am înființat. Dreptunghiul dvs. ar trebui să fie de 960px la 800px. Redenumiți acest layer "container" și faceți clic dreapta pe strat și selectați Rasterize Layer (vom face mai multe modificări la acest strat mai târziu, așa că am putea să renunțăm la acest lucru acum).
Pentru a face ca stratul "container" să pară opac, va trebui să facem câteva lucruri:
Odată ce ați setat toate stilurile de strat, stratul dvs. "container" ar trebui să arate astfel:
Pentru a ne asigura că rămânem cu un strat consistent pe stratul "container" (presupunând că nu dorim să numărăm pixelii de fiecare dată când plasăm un element), să adăugăm ghidaje la 40px în caseta de ghidare originală.
După cum ați văzut în Final Preview, vrem să facem navigația să arate așa cum este scufundat sau elimina a stratului "container". Pentru a face acest lucru, vom elimina doar o parte din stratul "container" și vom lăsa Style Style să facă magia lor.
Pentru a crea selecția pentru decupare, vom crea o nouă formă dreptunghiulară în spațiul în care dorim să fie decupajul de navigație. Utilizați o rază de 10 pixeli aici (care este jumătate din raza stratului "container"), pentru a vă asigura că colțul are spații coerente unde este rotunjită.
Dacă este necesar, mutați forma în colțul din dreapta sus al liniilor de ghidare interioară. După ce ați instalat stratul, faceți clic pe elementul din Layer's Palette, astfel încât acesta să fie selectat. Alegeți stratul "container" și apăsați Ștergeți. Puteți acum să vă ascundeți dreptunghiul rotund de 10px pentru navigare și stratul "container" va afișa acum o decupare după cum se vede mai jos.
Observați cât de netedă sunt colțurile rotunjite. Dacă am fi selectat doar o suprafață pătrată și am rotunjit selecția, colțurile de decupare ar fi arătat foarte tulbure. De asemenea, nu este frumos modul în care stilul stratului este aplicat automat stratului, iar toate zgomotele și umbrele pe care le-am adăugat arată foarte bine.
Acum avem nevoie de un text. Am ales Rockwell ca fontul meu (vine standard cu MS Office, dar poate fi de asemenea achizitionat). Spațiu uniform elemente de navigație în decupare, după cum se arată.
Vrem să oferim un text gravată în piatră efect, și pentru a face acest lucru, adăugăm o umbră la text (am adăugat și o umbră interioară, totuși face ca textul să pară mai subțire decât este de fapt). Iată setările de umbră de umbră pe care le folosesc în general.
Pentru a obține efectul dorit, vom crea un nou strat chiar sub textul pe care l-am adăugat pentru navigare. Redenumiți acest strat "nav activ". Completați această selecție cu orice culoare (nu contează).
Apoi, va trebui să adăugăm câteva stiluri de straturi în stratul "nav activ". Le-am furnizat mai jos (veți avea nevoie de o Umbre Drop, Gradient Overlay, Stroke și Glow Inner).
Duplicați stratul "nav activ" (Command + J) și aplatizați toate stilurile de straturi. Redenumiți acest strat "nav active". Vom aplica câteva culturi acestui strat și nu mai dorim stilurile de strat.
Utilizați Instrumentul de selecție pentru a șterge Stroke și Glow Inner din partea superioară și inferioară a stratului "active flattened".
Acum trebuie să adăugăm umbrele pentru a face stratul "activ nav" să pară că este țesut prin stratul "container". Vom crea aceste umbre folosind instrumentul Ellipse.
Creați o elipsă neagră care este cu 20px mai mare decât lățimea stratului activ "aplatizat" și cu o înălțime de aproximativ 5px. Centurați elipsa pe marginea superioară a stratului "acvacat" activ. Faceți clic dreapta pe strat și selectați Rasterize Layer. Redenumiți acest strat la "umbra activă de top".
Trebuie să ștergem puțin elipsa, să mergeți la Filter> Blur> Gaussian Blur și să aplicați cu o rază de 2px. Acum că elipsa arata mai mult ca o umbră, vom merge mai departe și vom șterge topul de 50% din umbră.
Reglați opacitatea stratului "top activ shadow" la 75%. Umbra de sus a fost făcută. Pentru a crea umbra de jos, duplicați stratul (Command + J), aplicați Editare> Transformare> Flip Vertical și mutați umbra în partea inferioară a stratului activ navigabil.
Înainte de a ajunge la logo-ul, să terminăm antetul puțin. Mai întâi vom adăuga încă câțiva ghizi. Desenați un ghid orizontal 40px sub partea inferioară a decupării de navigare, după cum se arată.
Vom crea linia de separare, care va da impresia că stratul "container" are o gravură sau este îndoit în acest loc. Pentru a crea acest efect, trageți o linie orizontală de 1px pe un strat nou care rulează lățimea stratului "container". Umpleți linia orizontală cu un verde închis (am ales mina din fundal). Redenumiți acest strat "separând linia".
Pentru a obține simțul de gravare, duplicați stratul de "linie de separare" și umpleți acest strat cu alb. Mutați acest strat cu 1px în jos, astfel încât partea superioară a acestuia să atingă stratul inițial de "linie de separare".
Acum trebuie să adăugăm logo-ul nostru. Nu prea sunt un designer de logo-uri, așa că am ales un font cool (Gill Sans) și am scris un text mare în colțul din stânga sus. La fel cum am făcut și decupajul pentru navigare, faceți o selecție a textului de logo și apoi ștergeți-o din stratul "container". Încă o dată Stilurile stratului se vor adapta la noua formă și se vor actualiza.
Asteriscul a fost realizat folosind aceeași tehnică ca și elementul de navigație activă, pentru a face ca acesta să pară ca și cum ar fi scos din stratul "container".
Încă o dată, vom folosi aceeași tehnică de decupare pe care am folosit-o pentru secțiunea de navigare.
Creați un dreptunghi rotunjit cu o rază de graniță de 10px. Asigurați-vă că permiteți spațiu de 40px pe toate laturile (am creat ghidurile mai devreme pentru a ajuta la acest lucru).
Apăsați clic pe stratul dreptunghi rotunjit pentru ao selecta, apoi selectați stratul "container" și apăsați Ștergeți. Puteți elimina dreptunghiul rotunjit, deoarece nu îl mai folosim.
Apoi trebuie să creați săgețile de pe fiecare parte, astfel încât să puteți avea mai multe elemente de portofoliu pe prima pagină și să le treceți într-un fel de prezentare de diapozitive. Pentru a face acest lucru, creați un cerc cu diametrul de 40px cu instrumentul Shape. Deplasați cercul în poziție în partea stângă, centrându-l pe marginea decupajului.
Duplicați cercul pentru cealaltă parte și centrați-o din nou pe cealaltă margine a orificiului (orizontal și vertical).
Deoarece nu lucrăm aici cu măști de vector (și Fill este setat la 0% în stratul "container"), trebuie să ajustăm momentan acest lucru pentru a ne asigura că putem adăuga la stratul "container".
Deci, să setăm stratul de umplere al containerului la 100%. Acum Merge Down (Command + E) ambele cercuri create pentru săgeți în stratul "container". Odată ce ați fuzionat, puteți seta apoi stratul de umplere al containerului la 0%. Iată efectul dorit:
Observați cum cele două cercuri au devenit parte din stratul "container".
În continuare, va trebui să adăugăm câteva săgeți. Le-ai putea crea ușor folosind paranteze, oricum am ales să-mi creez propria mea.
Creați un dreptunghi rotunjit cu un rază de graniță de 3px, Lățime de 20px, Înălțime de 6px; și plasați-o chiar deasupra locului în care doriți săgeata. Transformați și rotiți (Command + T) dreptunghiul rotunjit cu 45 de grade în sens invers acelor de ceasornic, astfel încât acesta este înclinat. Acesta este modul în care vom face referire la săgeată.
Duplicați dreptunghiul rotunjit (Command + J) și Editați> Transformați> Flip Vertical. Mutați stratul în poziție, astfel încât colțurile din stânga să fie aliniate, producând un suport. În Paleta de straturi, selectați ambele dreptunghiuri rotunjite și îmbinați straturile împreună (Command + E). Redenumiți stratul "săgeată stânga". Iată cum arată săgeata dvs.:
Trebuie să adăugăm câteva stiluri de straturi pe săgeată pentru a se potrivi cu restul desenului după cum urmează:
Duplicați stratul "săgeată stânga" (Command + J) și Editați> Transformare> Flip orizontal. Redenumiți acest strat "săgeată dreapta" și mutați-l în partea dreaptă a decupajului.
Un ultim lucru pe care trebuie să-l adăugăm pentru portofoliul nostru de articole portofoliu este o umbră care să-i dea o anumită adâncime. Adăugați un gradient transparent la negru în partea de jos a decupării, după cum se arată.
Pentru a tăia orice gradient în exces în afara decupajului, pur și simplu Comandă + Faceți clic pe stratul "container" și apăsați Ștergeți. Vom plasa capturile de ecran sub acest strat pentru a da iluzia profunzimii.
Luați o captură de ecran a site-ului dvs. preferat (am folosit unul din portofoliul meu, ryanscherf.net). Redenumiți acest strat "screenshot".
Adăugați un Stroke și Shadow Inner pe stratul "screenshot" utilizați Styles Layer:
Duplicați stratul "screenshot" și aliniați toate stilurile de strat (îmbinați stratul "copie de ecran" cu un strat nou, gol). Rotiți stratul "copie ecran" 45 de grade în sens invers acelor de ceasornic, la fel ca în cazul săgeților din pasul 9.
Plasați captura de ecran în stânga jos a decupajului de portofoliu, asigurându-vă că partea superioară a ecranului se află în afara decupajului (o să-i dăm o anumită adâncime) și facem să pară că este ascuns în spatele stratului "container". Decupați orice exces de "copie de ecran" din partea de jos, după cum se arată.
Acum, când avem screenshot-ul nostru, să adăugăm o scurtă descriere în dreapta. Nimic prea fantezist aici, dar tot încercând să rămânem cu tema noastră de adâncime și straturi.
Creați un text cu o culoare aproape alb (sau foarte albastru / verde). Utilizați aceeași umbră de picătură gravură tehnica de navigație (Unghi la -60 de grade, Distanță de 1px și Dimensiune de 1px).
Creați un patrat opac în spatele textului. Am folosit un strat negru, la o opacitate de 30%. Efectul ar trebui să arate astfel:
Avem nevoie de câteva puncte de navigare, cum ar fi vederile iPhone. Vom crea un punct activ care va utiliza aceleași stiluri de strat ca stratul activ nav (sperăm că nu l-ați șters) și un punct inactiv care folosește stilurile de straturi din stratul "săgeată stânga".
Notă: Reutilizarea stilurilor de straturi este importantă nu numai pentru că economisește timp din necesitatea de a crea stiluri similare, ci și pentru că va păstra consistența designului dvs..
Creați un cerc utilizând Instrumentul Shape, cu un diametru de 20px (îmi plac punctele de navigare mari, deoarece uneori sunt prea greu pentru a face clic și pentru a naviga). Faceți clic dreapta pe stratul "nav activ" și selectați Copiere stil strat. Selectați cercul din paleta Straturi, faceți clic dreapta și selectați Paste Style Layer.
Repetați acești pași pentru cât mai multe puncte inactive pe care le doriți, asigurându-vă că utilizați stilul stratului din stratul "săgeată stânga".
Trebuie să lăsăm vizitatorii noștri să știe exact ce prezentăm aici. Vom crea o panglică folosind exact aceeași tehnică pe care am folosit-o pentru stratul "activ nav", care a fost prezentat mai sus în pasul 7.
Singura diferență aici este că am adăugat o opacitate puțin mai mare pentru umbra picăturilor pentru a se asigura că pare să se odihnească mult mai sus de tot.
Pentru a finaliza această secțiune, dorim să duplicăm (Command + J) stratul nostru de "separare linie" pe care l-am creat la Pasul 8 și să-l mutăm cu 40 de sub submeniul decupajului din portofoliu. Asta e!
Mai întâi vom crea mai multe ghiduri pentru a ne asigura că avem trei coloane egale. Nu te teme, dar va trebui să facem niște matematici aici:
Site de 960 pixeli lățime - 80 de pixeli de spațiu interior = 880 de spațiu disponibil pentru coloanele noastre. De asemenea, vom dori să adăugăm umplutura de 40px între coloane, astfel încât, în esență, avem 800px disponibile pentru cele 3 coloane.
800 pixeli împărțit la 3 este egal cu 266 de pixeli pe coloană (am ales coloanele mele ca 267, 266 și 267 de pixeli din stânga în dreapta pentru a menține soldul). Așadar, trageți ghidajele la aceste intervale, asigurându-vă că vă răspundeți la padele de 40px de pe fiecare parte a coloanei centrale.
Creați un nou grup în Paleta dvs. de straturi numită "Ultimele de pe blog". Aici vom păstra toate straturile care aparțin acestei secțiuni.
Creați un text pentru titlu. Încă o dată, am folosit fontul Rockwell cu aceleași stiluri de strat pentru gravură așa cum am folosit pe navigație. În cazul în care ați uitat, este prezentat în pasul 6.
Selectați o formă personalizată pentru a ancora fiecare parte a textului. Am ales o formă personalizată standard Photoshop, dar există literalmente mii de forme personalizate pe care le puteți adăuga în bibliotecă.
Trebuie să adăugăm câteva stiluri de straturi în forme pentru a le face să pară mai mult 3D:
Produsul final ar trebui să arate ca imaginea următoare.
Avem nevoie de un text de mai jos pentru postările noastre de pe blog. Asigurați-vă că culoarea textului este o nuanță deschisă a fundalului albastru / verde. Putem folosi atâtea nuanțe diferite de acest albastru / verde cum ne place, și cu siguranță va face ca textul nostru să iasă în evidență.
Pentru a face textul să arate gravat încă o dată, vom încerca o mișcare diferită pe tehnica anterioară. Înainte de a adăuga o umbră de culoare neagră în partea stângă sus a textului, totuși, din moment ce folosim un mic text mai ușor, vom adăuga umbra noastră în partea dreaptă jos, folosind albul. Puteți vedea efectul de mai jos:
Am folosit forma obișnuită, rotundă pentru gloanțe și am reutilizat stilul stratului de la formele personalizate pe care le-am adăugat în antetul acestei secțiuni.
Această secțiune ar trebui să fie destul de ușoară. Duplicați grupul "Ultimele din blog" și redenumiți duplicatul la "Actualizări Twitter".
Ajustați textul pentru a indica mai mult despre o actualizare Twitter (linkuri, mențiuni, marcaj de timp etc.). Mutați acest grup la coloana din centru - și ați terminat!
Duplicați grupul "Actualizări Twitter" și redenumiți-l la "Newsletter". Deplasați acest grup în coloana din partea dreaptă.
Reglați conținutul mai mult ca un paragraf descriptiv, precum și eliminați toate gloanțele (în general, paragrafele introductive nu necesită gloanțe).
Pentru a crea formularul de e-mail, vom crea un dreptunghi rotunjit cu raza de graniță de 10px și înălțimea de 40px. Lățimea ar trebui să fie 266px (sau orice ați ales ca lățimea coloanei dvs. din dreapta). Redenumiți acest strat la "formularul de intrare" și setați Stilurile stratului după cum urmează:
În cele din urmă, avem nevoie de un buton pentru a trimite formularul. Vom folosi stilurile noastre de straturi din stratul "activ nav" pentru buton, deoarece dorim să păstrăm aspectul consistent al tuturor elementelor noastre.
Creați un alt dreptunghi rotunjit, Înălțime de 40px, Lățime de 140px și Rază de graniță de 20px. Redenumiți acest strat la "buton".
Copiați stilul stratului din stratul "nav activ" și lipiți-l pe stratul "buton".
Duplicați textul din navigație (Command + J) și schimbați-l pentru a spune "Abonați-vă". Mutați textul care trebuie centrat în buton. Rezultatul ar trebui să arate ca imaginea de mai jos.
Clienții o vor cere mereu, și ar trebui să-l adăugați întotdeauna. În afara și sub stratul dvs. "container", adăugați câteva informații privind drepturile de autor. Utilizarea gravură tehnica din nou pentru a da o adancime.
Sper că acest lucru îi ajută pe toată lumea să exploreze niște noi limite cu propriile modele. După cum ați văzut, multe dintre tehnicile discutate aici sunt simple și elegante; și ar trebui să fie ușor de implementat în modelele proprii.
Accentsconagua