Share
În acest tutorial, vom realiza un aspect creativ de blog folosind forme foarte simple, câteva tehnici de periere, câteva imagini și o doză de ingeniozitate Photoshop. Crearea de machete de design web este mai ușor decât credeți. Puteți învăța să construiți rapid modele atractive. Crearea acestui design va dura mai puțin de două ore și veți învăța câteva sfaturi profesionale de-a lungul drumului. Să începem!
Uitați-vă la imaginea pe care o vom crea. Imaginea finală este mai jos sau puteți vedea aici o imagine de dimensiune completă.
Pentru a finaliza acest tutorial, trebuie să descărcați sistemul 960 Grid. Acum, să începem.
Deschideți șablonul "960_grid_12_col.psd" din Photoshop. Acesta va arata ca imaginea de mai jos. Sistemul Grid este util deoarece vă permite să aliniați rapid aspectul.
Selectați stratul de fundal și apăsați Command + J. Aceasta este comanda rapidă pentru duplicarea unui strat. Utilizarea comenzilor rapide va accelera procesul de proiectare. Pentru acest strat nou vom adăuga o culoare gradient frumos. Acum mergeți la Layer> Layer Style> Gradient Overlay și utilizați următoarele setări.
Ascundeți acum grila pentru a vedea mai bine designul. Păstrați-vă grila vizibilă, deoarece puteți alinia forma mai bine. Selectați Instrumentul rotunjit dreptunghi și creați o formă deasupra aspectului.
Pentru această bară de navigare, adăugați următoarele stiluri de straturi.
Folosind aceeași unealtă (Instrumentul rotunjit dreptunghi), creați o altă formă și completați-o cu culoarea: # 001424.
Adăugați următorul stil pentru acest strat.
Creați o altă formă cu Instrumentul rotunjit dreptunghi folosind culoarea albă.
De asemenea, pentru această formă adăugați câteva stiluri simple de straturi și modificați valoarea de umplere la 10%.
Mai jos este rezultatul până acum.
Peste această ultimă formă plasați o imagine. Am folosit câteva imagini din câteva tutoriale pe care le-am făcut pentru Grafpedia, care servesc ca exemple bune de imagine pentru acest design. Ar trebui să folosiți propriile imagini, desigur.
Acum trebuie să încărcați selecția pentru această imagine. Pentru a încărca selecția, selectați stratul din paleta de nivel și apoi alegeți Selectare> Încărcare selecție. Veți vedea o selecție în jurul imaginii ca în imaginea următoare.
Creați un strat nou pe toate nivelurile, utilizând această comandă rapidă: Command + Shift + Alt + N. Selectați Perie Tool și alegeți o perie rotundă netedă. Pe noul strat trageți o linie orizontală. Țineți apăsată tasta Shift când faceți desenul. În acest fel desenul va fi perfect orizontal.
Apăsați Command + D pentru a deselecta. Acum folosiți Instrumentul Rounded Rectangle pentru a crea o altă formă cu culoarea # 4b6e82.
Pentru ambele forme adăugați următoarele stiluri de straturi.
Prindeți instrumentul Ellipse și creați o formă chiar sub forma barei laterale.
Mergeți la Filter> Blur> Gaussian Blur și utilizați următoarele setări. Photoshop vă va întreba dacă doriți să Rasterizeze forma, mergeți mai departe și apăsați OK.
După cum puteți vedea din pasul anterior, am creat o umbră acolo. Acum, să accentuăm această umbră prin adăugarea unor lumini. Selectați instrumentul Linie și setați greutatea liniei la 1 pixel și apoi creați o linie verticală după cum se arată.
Faceți clic dreapta pe strat și alegeți Răsfoiți stratul.
Selectați instrumentul Eraser și alegeți o perie netedă, rotundă la aproximativ 100 de pixeli. Utilizați-l pentru a șterge partea superioară și partea de jos a liniei.
Cu aceeași tehnică creați o altă linie în partea superioară a barei laterale.
Chiar sub această linie albă se creează un altul care este negru.
În mijlocul layout-ului creați o altă formă cu instrumentul Rounded Rectangle Tool.
Creați unele forme cu instrumentul Rectangle. Peste aceste forme vom adăuga câteva imagini mai târziu.
Adăugați aceleași stiluri de strat pentru toate aceste trei forme.
Acum este momentul să adăugați imaginile peste aceste forme albe. Adăugați, de asemenea, un text cu instrumentul Tip orizontal în partea dreaptă.
Creați o linie punctată între posturi cu instrumentul de tip orizontal.
Creați alte trei forme și plasați-le sub textul Post Metadata.
Deasupra barei laterale creați o casetă de căutare utilizând Instrumentul rotunjit dreptunghi. În același timp, puteți vedea că am plasat și un text pe bara de navigare.
Adăugați următoarele stiluri de strat pentru această casetă de căutare.
Acum folosiți Instrumentul rotunjit dreptunghi pentru a crea o altă formă. Plasați această formă peste forma anterioară. De asemenea, adăugați o pictogramă în partea dreaptă.
Chiar deasupra diapozitivului creați o altă formă albă.
Adăugați următoarele stiluri de strat pentru această formă.
Țineți apăsată tasta de comandă și cu instrumentul Pen selectat apăsați de două ori pe marginea formei. Punctul de ancorare va deveni activ și vom putea modifica aspectul formei.
Cu tasta de comandă încă apăsată, selectați următorul punct de ancorare.
Țineți apăsată tasta Shift și apăsați o dată pe tasta săgeată în jos de pe tastatură. Punctul de ancorare se va deplasa în jos și veți avea următorul rezultat.
Utilizați instrumentul Ellipse pentru a crea un cerc.
Faceți clic dreapta pe strat și alegeți Rasterize Layer. Cu instrumentul Rectangular Marquee faceți o selecție precum cea indicată mai jos.
Asigurați-vă că ați selectat stratul cu acest cerc mic și apoi apăsați tasta Ștergere. Glisați acest strat deasupra stratului de fundal din paleta de straturi. Acesta este rezultatul meu până acum.
Acum vom adăuga două butoane pentru a permite utilizatorilor site-urilor să schimbe imaginea de diapozitive. Va trebui să utilizați Instrumentul rotunjit dreptunghi pentru a crea forma și apoi puteți utiliza instrumentul Custom Shape Tool pentru a adăuga săgețile.
Pe bara laterală creați niște forme albe, după cum se arată mai jos.
Pentru toate aceste forme albe, vă rugăm să adăugați aceleași stiluri de straturi.
Adăugați niște bannere în bara laterală. De asemenea, adăugați câteva iconițe sociale de marcare pe partea superioară a designului site-ului. Există numeroase icoane gratuite disponibile pe web pentru a alege de la.
Acum adăugați un text cu Instrumentul de tip orizontal din partea inferioară a barei laterale. De asemenea, adăugați semne minusculare între text utilizând Instrumentul de tip orizontal pentru a crea reguli orizontale sparte.
Să adăugăm alte detalii pe bara de navigare. Utilizați instrumentul Linie pentru a crea două linii mici. Măriți această imagine pentru a vedea mai bine ce faceți.
Selectați ambele straturi din interiorul paletei de straturi. Pentru a selecta ambele straturi, trebuie să țineți apăsată tasta Command atunci când selectați ambele straturi. După ce ați selectat liniile, apăsați Command + E pentru a îmbina straturile într-un singur strat. Selectați instrumentul Eraser și utilizați-l pentru a șterge partea superioară și partea de jos a liniilor. Rețineți că aveți nevoie de o perie rotundă moale, cu o dimensiune de 20 de pixeli.
Schimbați modul de amestecare pentru acest strat la Soft Light. Duplicați-l de câteva ori și plasați linia între celelalte butoane de text.
Acum creați textul pentru această siglă a layout-ului Wordpress la o dimensiune care vă arată bine.
Adăugați următoarele stiluri de strat pentru acest logo de text.
Drept deasupra stratului "fundal" creați un nou strat (Command + Shift + Alt + N). Cu ajutorul instrumentului perie faceți o marcă de evidențiere acolo cu o perie rotundă moale, așa cum se arată.
Schimbați modul de amestecare pentru acest strat la Soft Light.
Proiectul a fost finalizat! Sper că ți-a plăcut să creezi! Imaginea finală este mai jos sau puteți vedea aici o imagine de dimensiune completă.
Accentsconagua