Share
Ești în starea de spirit pentru ceva diferit? Vă voi îndruma în procesul de creare a designului Stuff - blog și portofoliu orientat pe orizontală. Asigurați-vă că vizitați versiunea Stuff online pentru a vedea rezultatul final!
Asigurați-o 1300 x 800 px. Tot spatiul nu este cu adevarat necesar, dar este bine sa simtiti caracterul panoramic al designului in timp ce lucram.
Creați un nou strat de umplere utilizând culoarea solidă # bfc6cd
Conversați noul strat într-un "obiect inteligent" (faceți clic dreapta> Conversia la Filtrul inteligent) și aplicați filtrul> Adăugați zgomot (puteți modifica ulterior, dacă este necesar, datorită funcției de filtre inteligente). Blocați stratul. Pentru a menține proiectul curat și organizat, puteți să ștergeți masca stratului și să o transformați în stratul implicit de fundal (opțional).
Creați o nouă formă de săgeată utilizând presetarea "instrumentul de formă". Apoi, folosiți instrumentul de selecție directă pentru a regla forma pentru a face să arate frumos (mutați punctele în jur după cum doriți).
Selectați instrumentul de transformare liberă, deplasați săgeata 310px de sus, apoi apucați și mutați conducătorul orizontal pentru a crea un ghid nou. Trageți-l în mijlocul săgeții. De acum va reprezenta axa orizontală a sitului.
Adăugați 4 săgeți (făcând dublu clic pe strat): umbră, umbră interioară, strălucire exterioară și suprapunere în gradient (de la # cbcbcb la #ffffff).
Adăugați un nou strat de text deasupra stratului săgeată.
Adăugați stiluri la text: umbra interioară, suprapunerea gradientului și cursa. Pentru un efect de adâncime mai bun, faceți cursa vizibilă numai în jumătatea inferioară a textului, utilizând un curs "gradient" cu setările alfa din jumătatea superioară setată la opacitatea "0".
Umbrele exterioare și interioare dau săgeții mai mult aspect 3D, dar pentru a face chiar mai bine, să creăm un efect simplu de luciu luminos. Creați un dreptunghi nou și utilizați instrumentul punct de conversie pentru a modifica forma acestuia pentru a crea o ușoară curbură. Vom masca acest lucru peste stratul Arrow pentru a crea un efect lucios.
Setați acest nivel de umplere la 0% și adăugați un stil de suprapunere cu gradient cu alb subtil.
Pentru a evita ca stratul de lumină să meargă dincolo de săgeată: ctrl + faceți clic pe stratul săgeții pentru a face o selecție adăugați masca stratului în stratul ușor
Pentru a focaliza atenția spectatorilor asupra logo-ului, faceți o lumină să stea săgeata din fundal. Puteți utiliza o metodă primitivă care este:
Creați un dreptunghi de lățime 240px alb (înălțimea trebuie să fie un pic mai înaltă decât documentul).
Deasupra fotografiei, creați o nouă casetă text și completați-o cu titlul blogului. Utilizați un font condensat, cum ar fi League Gothic (gratuit la Liga de tip mutabil). Sub fotografie, creați o altă casetă text pentru conținutul general.
Faceți o selecție pentru conținut și creați un nou strat de mască pentru dreptunghiul mare. Schimbați densitatea măștii la 80%
Adăugați stiluri strălucitoare (negre) și interioare (albe) la stratul de benzi pentru a vă arăta 3D mai mult.
Adăugați textul meta info deasupra postării. Am folosit înălțimea liniei 12px Georgia, înălțime de 17px. Amintiți-vă să utilizați ghiduri pentru a păstra textele într-o singură linie
Creați textul "citiți mai mult" de sub postare
Un strat sub el, crea un dreptunghi nou pentru a fi un buton citit mai mult.
Adăugați stiluri de gradient și accident vascular cerebral. Sfat: faceți din interiorul stoarce, pentru a avea colțuri perfect ascuțite ale butonului
Adăugați un gradient subtil și la nivelul de text.
Pentru a crea insigna utilizați un alt dreptunghi, adăugați text (am folosit Arial) și rotiți ambele straturi împreună 45 de grade.
Adăugați masca pentru a rectangula stratul pentru a ascunde colțurile inutile
... și adăugați 2 dreptunghiuri mici ca o iluzie a insignei care trece sub imagine.
Adăugați o insignă subtilă la insigna. Sfat: pentru modul de amestecare în umbre, utilizați funcția Normal în loc de implicit multiplicat, deci va avea efect chiar dacă utilizați insigna ca fișier PNG transparent
Creați un nou strat de text. În loc de culoare neagră (care se poate simți nefiresc pe fundaluri ușoare), utilizați gri închis pentru a obține un aspect mai natural.
Sfat: Pentru a crea linii orizontale în loc să utilizați instrumentul de linie, nu creați un text analitic folosind sublinierea glicului "_" Acesta va fi întotdeauna pixel-ascuțit și spațiile între linii vor fi ușor de controlat datorită parametrului înălțimii liniei. Utilizați aceeași înălțime a liniei ca în textul din meniu și creați mai multe linii ca elementele de meniu, minus unul. Faceți liniile mai lungi decât este necesar.
Setați acest nivel de umplere la aproximativ 15% și adăugați o umbră albă.
Adăugați masca la stratul de linii și vopsiți cu perie netedă pe ea pentru a obține muchii de dispariție.
Creați un dreptunghi cu colțuri rotunjite (3 pixeli) pentru o intrare de căutare.
Adăugați umbra interioară la cutie și faceți umplerea stratului la 70%
Deasupra, adăugați textul de căutare și creați forma personalizată ca săgeată de trimitere. Adăugați umbra interioară la cutie și faceți umplerea stratului la 70%
Deoarece imaginile vectoriale sunt recomandate în acest scop, vă recomand să găsiți logo-urile necesare în serviciul www.brandsoftheworld.com. În cele mai multe cazuri este cel mai rapid mod. Deschideți logo-ul în Illustrator, copiați contururile și lipiți în Photoshop ca forme. Puteți utiliza, de asemenea, Buddy Icons de la Orman Clark.
Setați umplerea stratului la 0% și adăugați stiluri (umbră de umplere, umbră interioară și suprapunere de culoare) pentru a obține aspectul 3D. Pentru a obține logo-ul în starea activă (luminată), schimbați culoarea și intensitatea stilului Color Overlay.
Copiați acest stil și copiați-l în alte logo-uri (faceți clic dreapta pe strat / stil strat de copiere)
Pentru a adăuga o casetă de comentarii, creați un alt dreptunghi cu colțuri rotunjite de aproximativ 520px și adăugați stil Drop Shadow.
Selectați partea mai mare și adăugați masca la acest strat.
Duplicați stratul și inversați-l. Faceți umplerea cu noul strat cu 25%.
În setările de amestecare, bifați opțiunea "Efecte de ascundere a maselor stratului", pentru a evita incoerența liniei de umbră a ambelor straturi.
Creați linia verticală neagră la granița dintre aceste casete, faceți-o să se umple de asemenea cu 25% și adăugați umbra albă de 1px îndreptată spre dreapta.
Adăugați un exemplu de avatar și texte folosind culorile folosite anterior.
Creați forma cercului și lipiți stiluri de strat de pe săgeata siglei. Tăiați forma săgeții din cerc utilizând modul personalizat și modul de tăiere.
Sub acest strat de buton creați un alt cerc - aceeași dimensiune sau mai mic și lipiți stilul de gradient din logo. Sfat: Dacă un anumit strat are mai multe stiluri și doriți să copiați doar unul, puteți glisa stilul în timp ce apăsați altul și îl aruncați într-un alt strat.
Adăugați luminile (la fel ca cele de mai sus la săgeata siglei).
Dacă doriți să faceți niște îmbunătățiri mici, pe care nimeni nu le va observa, creați lumini separate pentru buton și gaură în formă de săgeată și mutați-o pe cea de-a doua. Și dacă aveți deja două lumini separate, puteți ușor (fără mascare suplimentară) să faceți lumina butonului mai puternică pentru a fi mai bine vizibilă pe butonul foarte luminos.
Selectați toate straturile de butoane și creați un obiect inteligent din ele.
Strat duplicat, mutați și îndoiți orizontal. Acum, dacă editați o săgeată (dublu clic pe strat inteligent), ambele se vor schimba.
Toate celelalte elemente pot fi realizate prin copierea, lipirea și redimensionarea elementelor existente pe care le-am proiectat.
Sfat: Fonturile Ligii Gothic și alte fonturi gratuite cool cu licențe web designer-friendly pot fi găsite la www.fontsquirrel.com
OK, deci aveți PSD mai mult sau mai puțin pregătit și doriți să mergeți mai departe. Întrucât Stuff are nevoie de o abordare diferită a conținutului, datorită caracterului său orizontal, este foarte dificil să îl codifici corect. Nu cunosc numeroase site-uri orizontale care au reușit să evite erorile comune (de exemplu, nu funcționează defilarea mouse-ului). Vă rugăm să lăsați un comentariu dacă doriți să cunoașteți cele mai bune modalități de codificare a acestui design și vom vedea dacă nu putem aduce tutorialul pe site!
Oricum, dacă doriți să salvați ceva timp și să aveți totul pe placa de argint, puteți descărca HTML șablon sau WordPress versiunea de Stuff pentru câțiva dolari. Mulțumiri!
Accentsconagua