Proiectați un layout de blog curat și elegant în Photoshop CS6

În acest tutorial vă voi arăta procesul de făcând un blog simplu și curat de design utilizând cele mai recente aplicații Photoshop. Vom folosi noul Stiluri de caractere și Stiluri de paragrafe pentru a ne ajuta să simplificăm procesul.

Pentru a urma acest tutorial, veți avea nevoie de următoarele resurse:

• Font gratuit Sansa de la Bernd Montag.
• 26 Model Pixel Repetabil din PSDfreemium.
• Free Social Media Icons de la Daniele Selvitella.

• Demo

Pregătirea canvasului

Pasul 1

În acest design, vom folosi 960 GB ca cadru. Descărcați șablonul din pagina principală și din fișierul zip, căutați fișierul Photoshop. Deschideți fișierul "12 Grid Column" din Photoshop.

Faceți clic pe pictograma pentru ochi pentru stratul 12 Col Grid pentru al ascunde; nu vom avea nevoie de ea pentru moment.

Pasul 2

Dimensiunea actuală a pânzei este prea mică. Clic Imagine> Dimensiunea canvasului (sau Ctrl + Alt + C). Adăugați o dimensiune mai mare și asigurați-vă că ați stabilit punctul de ancorare în centru.

Pasul 3

Apăsați Ctrl + R pentru a dezvălui rigla. Clic Vizualizare> Nou Ghid pentru a face un nou ghid care ne va ajuta să proiectăm cu exactitate. Selectați Vertical și la Poziție: 185 px pentru a realiza un ghid vertical de 185 px de la colțul din stânga sus al pânzei.

Pasul 4

Desenați un alt ghidaj vertical în poziție 150 px, 1095 px și 1130 px.

Mai jos este ghidul nostru final în interiorul pânzei.

Pregătirea temei de culoare

Pasul 5

Pentru acest design, vom folosi o combinație de culori frumoase de la Colorlouver. Faceți clic pe linkul Previzualizare pentru a deschide combinația de culori ca fișier jpeg.

Salvați combinația de culori și plasați-o în interiorul fișierului Photoshop. Prin plasarea imaginii direct în interiorul pânzei, putem încerca mai rapid și mai ușor culoarea.

Pregătirea fundalului

Pasul 6

Selectați fundal strat și faceți clic pe pictograma blocare din partea de sus a panoului Straturi pentru a o debloca. Faceți dublu clic pe miniatură pentru a schimba culoarea.

Faceți clic pe a doua culoare, # 948371, pentru ao selecta.

Pasul 7

Desenați o formă dreptunghiulară deasupra pânzei. Acesta va fi cel de-al doilea fundal.

Pasul 8

Păstrați forma selectată. În Bara de opțiuni, deschis Completati Culoare apoi faceți clic pe color icon roată. Când se deschide caseta de dialog Color Picker, faceți clic pe prima culoare pentru ao selecta. Pentru ei Accident vascular cerebral selectați culoarea Nici unul.

Pasul 9

Efectuați un nou strat și apoi selectați panza superioară utilizând instrumentul dreptunghiular. Activați funcția instrument de gradient și completați-l cu radial gradient de la alb la negru. Asigurați-vă că gradientul este centrat pe partea de sus a pânzei.

Schimbă-l Amestec mod la Ecran și să-i reducă Opacitate la 37%.

Pasul 10

Faceți un nou strat și denumiți-l "shadow".

Desenați o selecție dreptunghiulară în partea de jos a fundalului secundar așa cum este arătat. Clic Editați: Completați. A stabilit Utilizare la Negru. Clic O.K pentru a umple selecția cu negru.

Pasul 11

Îmbrăcați-l folosind Gaurus Blur. Clic Filtru> Blur> Gaussian Blur.

Pasul 12

Țineți butonul Alt și apoi plasați cursorul între umbră și fundal superior strat. Fără a elibera tasta Alt, faceți clic pe convertiți stratul la Mască de tăiere. Prin transformarea lui în Mască de tăiere, umbra se îndreaptă acum în interiorul fundalului superior.

Pasul 13

Aduceți umbră Opacitate la 50% pentru ao face subtilă. Mai jos, puteți vedea rezultatul în mărire de 100%.

Pasul 14

Este întotdeauna o idee bună să puneți aceste straturi într-un singur grup. Pentru a face acest lucru, selectați toate straturile apoi faceți clic pe Ctrl + G.

Antet

Pasul 15

Desenați un dreptunghi pe panza superioară așa cum este arătat.

Pasul 16

În Bara de opțiuni, a stabilit Accident vascular cerebral culoare la # af9f8e.

Pasul 17

Pentru ei Completati culoare, selectați gradient linear din # d0c4b9 la # a89c91.

Mai jos rezultă o vizualizare de 100%.

Numele site-ului

Pasul 18

Adăugați numele site-ului în partea stângă a desenului. Observați destinația de plasare după cum se arată mai jos. Faceți dublu clic pe text și adăugați Umbra. Pentru fonturile sale, utilizați Sansa.

Meniul

Pasul 19

Desenați meniuri pe cealaltă parte a barei de meniu. Utilizați fontul Sansare 14 pt. Din nou, observați destinațiile de plasare.

Pasul 20

Pentru meniul activ, setați tipul fontului la caractere aldine.

Pasul 21

Activati Instrument de poligon și set feţe la 3. Desenați o formă de triunghi cu Umpleți: # 3d3123 și Accident vascular cerebral: Nici unul. Adăuga Stratul de stil > Drop Shadow.

Pasul 22

Să subliniem meniul activ adăugând o linie sub el. Activați funcția Instrument linie și a stabilit greutatea lui 5 px. Selectați # f76b6a pentru umplere, fără accident vascular cerebral.

Pune linia chiar sub meniul activ și adăugați un spațiu de 1 px în partea inferioară a barei de meniu.

Utilizarea stilurilor de caractere

Pasul 23

Să salvăm setarea caracterului ca stil de caracter. Această caracteristică este o versiune simplificată a stilului de caractere din InDesign. Pentru ao salva, activați textul și apoi faceți clic pe pictograma "Stil de caracter nou".

Faceți dublu clic pe noul stil de caractere și utilizați următoarea setare.

Pasul 24

Selectați celălalt meniu și faceți clic pe Stilul de caractere pentru al aplica. Dacă găsiți un semn plus lângă stilul de caractere, înseamnă că caracterul are o altă setare. Pentru a înlocui setările, faceți clic pe pictograma săgeată circulară.

Pasul 25

Repetați pasul anterior pentru a crea un stil de stil nou pentru meniul activ.

Pasul 26

Deci, care este scopul folosirii Stilurilor de caractere? Stilurile de caractere ne ajută să centralizăm setarea caracterului. Putem pur și simplu edita stilul de caractere pentru a edita fiecare text folosind acel stil. Vedeți un exemplu de mai jos. Dacă editează tipul fontului în stilul de caractere Meniul de sus - Normal la Corbel, toate meniurile normale se schimbă automat la Corbel.

Pasul 27

Faceți un strat nou și plasați-l sub bara de meniu. Ctrl faceți clic pe bara de meniu pentru a face o nouă selecție pe baza formei sale. Completați-l cu negru.

Pasul 28

Eliminați selecția utilizând Ctrl + D. Se înmoaie prin adăugare Gaussian Blur, Filtru> Blur> Gaussian Blur.

cursor

Pasul 29

Desena o formă dreptunghiulară cu lățimea de 10 coloane (vezi mai jos).

Pentru ei Umpleți culoarea Selectați # dfd1c2. Pentru ei Accident vascular cerebral Selectați # c8baac cu dimensiune 10 pt. Faceți clic pe săgeata de mici dimensiuni din dreptul previzualizării liniei și asigurați-vă Aliniați interiorul este selectat.

Pasul 30

Lipiți o imagine deasupra cadrului. Transformați-l în Clipping Mask apăsând Ctrl + Alt + G. Imaginea va intra automat în interiorul cadrului cursorului. Dacă este necesar, puteți muta și redimensiona imaginea fără a afecta cadrul.

Pasul 31

Desenați o altă formă dreptunghiulară în spatele culisorului cu aceeași culoare. Asigurați-vă că ați fixat-o în ghidul cel mai îndepărtat. Adăuga Stratul de stil> Suprapunerea modelului folosind model pixel din PSDfreemium. Tonează-o Opacitate pentru a-și face subtilitatea.

Pasul 32

Desenați o formă dreptunghiulară deasupra formei cu Completați: # b3aca5 și fără accident vascular cerebral. Apăsați Ctrl + T și apoi rotiți-o cu 45 °. Conversia formei stratului la Clipping Mask.

Pasul 33

Duplicați forma și redimensionați-o. Schimbă-l Completati la o culoare mai închisă. Conversia formei stratului la Clipping Mask.

Pasul 34

Repetați același pas pentru a desena o altă săgeată de cealaltă parte.

Pasul 35

Ctrl faceți clic pe cadru glisant pentru a face o selecție nouă. Faceți un strat nou și convertiți-l la a Clipping Mask. Completați selecția cu negru.

Pasul 36

Deselectați (Ctrl + D) apoi slăbi folosind Gaussian Blur.

Puteți reduce opacitatea umbrei, dacă este necesar.

Pasul 37

Desenați un dreptunghi rotunjit pe colțul cursorului cu Completați # c8baac.

Pasul 38

Desenați un cerc în interiorul formei. Setați-o Accident vascular cerebral la negru cu dimensiunea 1 pt și îndepărtați funcția Completați.

Pasul 39

Selectează cerc folosind calea Alegerea traseului instrument. Shift + Alt - trageți calea pentru ao duplica.

Repetați acest lucru pentru a atrage mai multe cercuri.

Pasul 40

Selectați una dintre căile de cerc. Apăsați Ctrl + Shift + J pentru al tăia pe un nou strat.

Pasul 41

În Bara de opțiuni, îndepărtați-o Accident vascular cerebral și schimba Completati la a radial gradient de la # e38989 la # bb5c5c. Adăuga Straturi> Strălucire exterioară și Umbra.

Pasul 42

Desenați o selecție eliptică sub glisor. Faceți un strat nou și completați-l negru.

Pasul 43

Deselectați (Ctrl + D). Îndepărtați-l folosind Gaussian Blur.

Fundal inferior

Pasul 44

Desenați o altă formă dreptunghiulară pentru fondul de fund. Utilizați același lucru Completati și Accident vascular cerebral culoarea în formă de glisor.

Ca întotdeauna, fiți foarte precauți cu plasarea sa. Vrem să acopere fiecare ghid pe pânză.

Adăuga Stratul de stil> Suprapunerea modelului.

Mai jos rezultă o mărire de 100%.

Etapa 45

Selectați zona sa uper folosind instrumentul Rectangular Marquee.

Pasul 46

Faceți un strat nou, plasați-l în spatele formei. Completați selecția cu negru. Apăsați Ctrl + T, faceți clic dreapta și selectați Perspectivă.

Trageți colțurile superioare spre exterior.

Faceți clic dreapta din nou și alegeți Scară. Trageți mânerul superior în jos.

Faceți clic dreapta și alegeți Urzeală. Trageți spre stânga și spre dreapta segmentul.

Îndepărtați-l folosind Gaussian Blur.

Tonează în jos Opacitate la 20%.

Pasul 47

Desenați un dreptunghi alb în interiorul fundalului. Aceasta va fi fundalul pentru conținutul principal al site-ului.

Adăugați un spațiu de 10 px la stânga, la dreapta și la partea superioară a fundalului. Spațierea ar trebui să fie ușoară, pentru că am făcut ghidul în primii pași. Adăuga Straturi> Strălucire exterioară.

Pasul 48

Adăugați un nou ghid, de 25 de secunde, din partea superioară a formei.

Titlul secțiunii

Pasul 49

Adăugați un nou stil de caractere pentru titlul secțiunii paginii și descrierea acesteia.

Adăugați titlul secțiunii și descrierea acesteia utilizând instrumentul Tip. Aplicați stilurile pe care le-am făcut mai devreme. Asigurați-vă că adăugați un spațiu de 25 de pixeli din partea superioară a fundalului său cu ajutorul ghidului făcut mai devreme.

Pasul 50

Desenați o linie de 5 px sub descrierea site-ului cu Umpleți: # 938270 și Accident vascular cerebral: Nici unul.

Postare pe blog

Pasul 51

Creați un alt stil de caracter pentru titlul postului.

Pasul 52

Adăugați un titlu de postare și aplicați stilul de caractere anterior.

Pasul 53

Desenați o formă de dreptunghi sub titlul cu o lățime de 4 coloane. A stabilit alb pentru ei Completati și #bebebe pentru ei Accident vascular cerebral. Adăuga Stratul de stil> Accident vascular cerebral.

Pasul 54

Lipiți o imagine deasupra formei. Convertiți-o în Mască de tăiere (Ctrl + Alt + G).

Pasul 55

Desenați un dreptunghi rotunjit cu Umpleți: # 8e8380 și Accident vascular cerebral: Nici unul. Transformați-l în Clipping Mask.

Pasul 56

Creați noi stiluri de caractere pentru metadatele blogului.

Pasul 57

Adăugați text de metadate în partea de sus a formei și aplicați stilul de caractere pe care l-am făcut mai devreme.

Pasul 58

Activati Tip instrument și trageți cu mouse-ul pentru a face o casetă de text. Setați lățimea la 4 coloane. Clic Tip> Lipiți Lorem Ipsum pentru ao umple cu Lorem Ipsum generat automat din Photoshop.

Pasul 59

Efectuați un nou stil de paragraf pentru conținutul de caractere. Faceți clic pe noua pictogramă din panoul Stiluri de paragrafe.

Faceți dublu clic pe Stilul paragrafului și utilizați următoarea setare.

Pasul 60

Aplicați acest stil conținutului postării. De asemenea, puteți să experimentați setările Indent și Spacing.

Pentru designul web, dezactivați funcția de desenare.

Pasul 61

Desenați un dreptunghi rotunjit cu Umpleți: # 8e8380 și Accident vascular cerebral: Nici unul. Adăuga Stratul de stil> Suprapunerea modelului. Pentru consistență, utilizați același model ca și în cursor.

Pasul 62

Adăugați o etichetă cu buton. Îți sugerez să o salvezi ca pe un stil de personaj. În acest fel, îl putem folosi cu ușurință pentru alte butoane.

Pasul 63

Butonul anterior este pentru condiții normale. Să o duplicăm și să ne schimbăm culoarea # f76b6a. De asemenea, setați tipul de etichetă la caractere aldine.

Pasul 64

Plasați postul în interiorul unui grup și apoi apăsați Ctrl + J pentru al duplica. Trageți altul pentru a duplica grupul.

Repetați același pas pentru a crea mai multe postări. Nu uitați să schimbați imaginea și titlul fiecărei postări.

Pasul 65

Duplicat Citeste mai mult și schimbați eticheta la număr. O vom folosi pentru navigarea pe pagini. Amintiți-vă să setați unul dintre butoane pentru a supraviețui condiția.

Pasul 66: Subsol

Să începem să lucrăm la subsol. Adăugați un titlu widget și descrierea acestuia.

Pasul 67

Adăugați un link și desenați o linie de 1 px dedesubt. A stabilit Completați: Niciuna și Accident vascular cerebral: # 8e8380.

Pasul 68

Clic Mai multe opțiuni și selectați linie întreruptă.

Pasul 69

Adăugați mai multe linkuri în widget.

Pasul 70

Duplicați widget-ul.

Pasul 71

Trebuie, de asemenea, să adăugăm condiția de hover. Setați unul dintre link la bold.

Sub această legătură activă, adăugați o linie de 5 px. Setați culoarea la # f76b6a. Pentru consistență, aspectul acestei legături este similar cu meniul activ din bara de meniu.

Pasul 72

Adăugați un alt dreptunghi în zona inferioară. Setați-o Completati la # 3d3123.

Subsoluri Informații

Pasul 73

Adaugă informații despre subsol folosind Tip instrument. Dă-i un întuneric Umbra pentru a adăuga contrastul la fundal.

Rețea socială

Pasul 74

Adăugați unele icoane sociale de la Daniele Selvitella. Adăuga Straturi> Strălucire exterioară.

Pasul 75

Tonează pictograma normală la 50%. Pentru condiția de hover, hai să ne păstrăm Opacitate la 100%.

Pasul 76

Luați o pictogramă cursor de mână liberă și plasați cel mai mic cursor de mână deasupra linkului activ sau hover.

Rezultat final

Acesta este rezultatul nostru final. Puteți vedea că ultima versiune Photoshop are câteva caracteristici interesante pentru proiectarea unui aspect web. Stilurile de caractere și stilurile paragrafelor reprezintă o îmbunătățire semnificativă pentru fiecare designer web.

• Demo
• Descărcați sursa