Dizajnirajte čist i elegantan izgled bloga u Photoshopu CS6

U ovom tutorialu ću vam pokazati proces izradu jednostavnog i čistog dizajnerskog bloga koristeći najnoviji Photoshop. Koristit ćemo novi Stilovi znakova i Stilovi odlomaka kako bismo pomogli pojednostaviti proces.

Da biste slijedili ovaj vodič, trebat će vam sljedeći resursi:

• Besplatno Font Sansation iz Bernda Montaga.
• 26 Ponovljeni uzorak piksela iz PSDfreemium.
• Besplatne ikone društvenih medija iz Daniele Selvitella.

• Demo

Priprema platna

Korak 1

U ovom projektu koristit ćemo okvir od 960 gs. Preuzmite predložak s njegove glavne stranice i unutar zip datoteke, potražite datoteku photoshop. Otvorite datoteku '12 grid stupca' u Photoshopu.

Kliknite ikonu oka za sloj 12 Col Grid da biste ga sakrili; za sada nam to neće trebati.

Korak 2

Trenutna veličina platna premala je. Klik Slika> Veličina platna (ili Ctrl + Alt + C). Dodajte veću veličinu i provjerite je li točka sidra postavljena na sredinu.

Korak 3

Pritisnite Ctrl + R da biste otkrili ravnalo. Klik Prikaz> Novo Vodič za izradu novog vodiča koji će nam pomoći da točno projektiramo. Odaberi vertikala i na poziciji: 185 px napraviti okomitu vodilicu 185 px od gornjeg lijevog kuta platna.

4. korak

Nacrtajte još jednu okomitu vodilicu na mjestu 150 px, 1095 px i 1130 px.

Ispod je naš konačni vodič unutar platna.

Priprema teme boja

Korak 5

Za ovaj dizajn koristit ćemo lijepu kombinaciju boja iz Colorlouvera. Kliknite vezu Pregled kako biste otvorili kombinaciju boja kao jpeg datoteku.

Spremite kombinaciju boja i smjestite je u datoteku Photoshop. Postavljanjem slike izravno u platno možemo brže i lakše uzorkovati njezinu boju.

Priprema pozadine

Korak 6

Odaberi pozadina sloj i kliknite ikonu zaključavanja na vrhu ploče Slojevi da biste je otključali. Dvaput kliknite na sličicu da biste promijenili boju.

Kliknite drugu boju, # 948371, za odabir.

Korak 7

Nacrtajte pravokutni oblik na vrhu platna. Ovo će biti druga pozadina.

Korak 8

Zadržite odabrani oblik. U Opcija Bar, otvorena ispuniti Boja i zatim kliknite ikona kotača boja. Kada se otvori dijaloški okvir Odabir boje, kliknite prvu boju da biste je odabrali. Za svoje udar odabir boje nijedan.

9. korak

Napravite novi sloj i zatim odaberite gornje platno pomoću pravokutnog alata. Aktivirajte alat za gradijent i ispunite ga radijalan gradijent od bijele do crne. Provjerite je li gradijent centriran na vrhu platna.

Promijeni svoj Mješavina način do Zaslon i smanjiti Neprozirnost do 37%.

Korak 10

Napravite novi sloj i nazovite ga "sjena".

Nacrtajte pravokutni odabir na dnu sekundarne pozadine kao što je prikazano. Klik Uredi: Ispuni. Set Koristiti do Crno. Klik u redu da biste ispunili odabir crnom bojom.

11. korak

Omekšajte ga pomoću Gaussian Blur. Klik Filter> Blur> Gaussian Blur.

Korak 12

Držite Alt, a zatim postavite pokazivač između sjena i gornja pozadina sloj. Bez otpuštanja tipke Alt kliknite na pretvoriti sloj u Clipping Mask. Pretvaranjem u Clipping Mask, sjena sada ulazi u gornju pozadinu.

Korak 13

Spustite sjenu Neprozirnost do 50% da bude suptilan. U nastavku možete vidjeti rezultat u povećanju od 100%.

Korak 14

Uvijek je dobra ideja staviti ove slojeve u jednu skupinu. Uraditi ovo, odaberite sve slojeve , a zatim kliknite Ctrl + G.

Zaglavlje

Korak 15

Nacrtajte pravokutnik na gornjem platnu kao što je prikazano.

Korak 16

U Opcija Bar, set udar boja na # af9f8e.

Korak 17

Za svoje ispuniti boja, odaberite linearni gradijent iz # d0c4b9 u # a89c91.

Ispod je rezultat u 100% prikazu.

Naziv web-lokacije

Korak 18

Dodajte naziv web-lokacije na lijevu stranu dizajna. Promatrajte položaj kao što je prikazano dolje. Dvaput kliknite na tekst i dodajte Baci sjenku. Za svoj font koristite Sansation.

izbornik

Korak 19

Crtanje izbornika na drugoj strani trake izbornika. Koristite font Sansation 14 pt. Opet, primijetite položaje.

Korak 20

Za aktivni izbornik postavite vrstu fonta na podebljano.

Korak 21

Aktivirati Alat za poligone i postavite strane do 3. Nacrtajte oblik trokuta Ispunite: # 3d3123 i Moždani udar: Nema. Dodati Stil sloja > Baci sjenu.

Korak 22

Naglasimo aktivni izbornik dodavanjem retka ispod njega. Aktivirajte Alat za linije i postavite težinu 5 px. Odaberi # f76b6a za njegovo ispunjenje, bez udarca.

Stavite liniju pravo ispod aktivnog izbornika i dodajte 1 px razmak na dno trake izbornika.

Korištenje stilova znakova

Korak 23

Spremimo postavku znakova kao stil znakova. Ova značajka je pojednostavljena verzija stilova znakova u InDesignu. Da biste je spremili, aktivirajte tekst i kliknite ikonu "Novi stil znaka".

Dvaput kliknite novi stil znakova i koristite sljedeće postavke.

Korak 24

Odaberite drugi izbornik, a zatim kliknite Stil znakova da biste ga primijenili. Ako uz znakovni znak pronađete znak plus, to znači da znak ima drugačiju postavku. Da biste poništili postavke, kliknite ikonu kružne strelice.

Korak 25

Ponovite prethodni korak kako biste napravili novi stil znakova za aktivni izbornik.

Korak 26

Dakle, koja je svrha korištenja stilova znakova? Stilovi znakova pomažu nam centralizirati postavke znakova. Možemo jednostavno urediti stil znakova da bismo uredili svaki tekst pomoću tog stila. Pogledajte primjer u nastavku. Ako uredimo vrstu fonta unutar znakovnog stila Glavni izbornik - Normalno u Corbel, sve normalno izbornik se automatski mijenja u Corbel.

Korak 27

Napravite novi sloj i postavite ga ispod trake izbornika. Ctrl-kliknite traku izbornika da biste napravili novi odabir na temelju oblika. Napunite ga crno.

Korak 28

Uklonite odabir pomoću Ctrl + D. Ublažite ga dodavanjem Gaussian Blur, Filter> Blur> Gaussian Blur.

klizač

Korak 29

Nacrtajte pravokutni oblik širine 10 stupaca (pogledajte dolje).

Za svoje Ispunite boju Odaberi # dfd1c2. Za svoje udar Odaberi # c8baac s veličinom 10 pt. Kliknite malu strelicu padajućeg izbornika pored pregleda retka i provjerite je li Poravnaj iznutra je odabrano.

Korak 30

Zalijepite sliku na vrh okvira. Pretvori u Maska za rezanje pritiskom na Ctrl + Alt + G. Slika će se automatski pojaviti unutar okvira klizača. Ako je potrebno, sliku možete pomicati i mijenjati bez utjecaja na njen okvir.

Korak 31

Povucite još jedan pravokutni oblik iza klizača iste boje. Pazite da ga postavite na krajnji vodič. Dodati Stil sloja> Prekrivanje uzorka pomoću uzorka piksela iz PSDfreemium. Utišajte Neprozirnost da napravi njezinu suptilnost.

Korak 32

Iznad oblika nacrtajte pravokutni oblik Ispunite: # b3aca5 i bez moždanog udara. Pritisnite Ctrl + T, a zatim rotirajte 45 °. Pretvori oblik sloja u Maska za rezanje.

Korak 33

Udvostručite oblik i promijenite veličinu. Promijeni svoj ispuniti na tamniju boju. Pretvori oblik sloja u Maska za rezanje.

Korak 34

Ponovite isti korak kako biste nacrtali drugu strelicu na drugoj strani.

Korak 35

Pritisnite Ctrl-klikni okvir slajda kako biste napravili novi odabir. Napravite novi sloj i pretvorite ga u Maska za rezanje. Ispunite odabir pomoću crno.

Korak 36

Zatim poništite odabir (Ctrl + D) ublažiti koristeći Gaussian Blur.

Ako je potrebno, možete smanjiti neprozirnost sjene.

Korak 37

Nacrtajte zaobljeni pravokutnik na uglu klizača Ispunite # c8baac.

Korak 38

Nacrtajte krug unutar oblika. Postavite njegovu udar do crno s veličinom 1 pt i uklonite Fill.

39. korak

Odaberite krug koristeći put Odabir staze alat. Shift + Alt-povucite putanju da biste ga duplicirali.

Ponovite ovo kako biste privukli više krugova.

Korak 40

Odaberite jednu od kružnica. Pritisnite Ctrl + Shift + J da biste ga izrezali na novi sloj.

Korak 41

U Opcija Bar, uklonite ga udar i promijenite njezin ispuniti do a radijalan gradijent od # e38989 na # bb5c5c. Dodati Stil sloja> Vanjski sjaj i Baci sjenku.

Korak 42

Nacrtajte eliptičan odabir ispod klizača. Napravite novi sloj i ispunite ga crno.

Korak 43

Poništite odabir (Ctrl + D). Omekšajte ga pomoću Gaussian Blur.

Donja pozadina

Korak 44

Nacrtajte drugi pravokutni oblik za donju pozadinu. Koristite isti ispuniti i udar boja kao oblik klizača.

Kao i uvijek, budite vrlo oprezni s njegovim položajem. Želimo da pokrije svaki vodič na platnu.

Dodati Stil sloja> Prekrivanje uzorka.

Ispod je rezultat u 100% povećanju.

Korak 45

Odaberite njegovo gornje područje pomoću alata Rectangular Marquee.

Korak 46

Napravite novi sloj, stavite ga iza oblika. Ispunite odabir pomoću crno. Pritisnite Ctrl + T, desni klik i odaberite Perspektiva.

Povucite njegove gornje kutove prema van.

Ponovno kliknite desnom tipkom i odaberite ljestvica. Povucite gornju ručku prema dolje.

Desni klik i odaberite osnova. Povucite lijevi i desni segment prema unutra.

Omekšajte ga pomoću Gaussian Blur.

Utišajte Neprozirnost do 20%.

Korak 47

U pozadini nacrtajte bijeli rectangule. To će biti pozadina za glavni sadržaj web-lokacije.

Dodajte razmak od 10 px lijevoj, desnoj i gornjoj strani pozadine. Razmak bi trebao biti jednostavan jer smo napravili vodič u ranim koracima. Dodati Stil sloja> Vanjski sjaj.

Korak 48

Dodajte novi vodič, 25 px s gornje strane oblika.

Naslov odjeljka

49. korak

Dodajte novi stil znakova za naslov odjeljka stranice i njegov opis.

Dodajte naslov odjeljka i njegov opis pomoću alata Tip. Primijenite stilove koje smo ranije napravili. Pobrinite se da dodate 25 px prostora s gornje strane pozadine uz pomoć prethodnog vodiča.

Korak 50

Nacrtajte redak od 5 px ispod opisa web-lokacije Ispunite: # 938270 i Moždani udar: Nema.

Blog post

Korak 51

Napravite drugi stil znakova za naslov posta.

Korak 52

Dodajte naslov posta i primijenite prethodni stil znakova.

Korak 53

Ispod naslova nacrtajte pravokutni oblik s 4 širine stupaca. Set bijela za svoje ispuniti i #bebebe za svoje udar. Dodati Stil sloja> Moždani udar.

Korak 54

Zalijepite sliku na vrh oblika. Pretvori ga u isječak maske (Ctrl + Alt + G).

Korak 55

Nacrtajte zaobljeni pravokutnik s Ispunite: # 8e8380 i Moždani udar: Nema. Pretvori u Maska za rezanje.

Korak 56

Napravite nove stilove znakova za metapodatke bloga.

Korak 57

Dodajte tekst metapodataka na vrh oblika i primijenite stil znakova koji smo ranije napravili.

Korak 58

Aktivirati Tip i pritisnite povucite kako biste stvorili tekstualni okvir. Postavite njegovu širinu na 4 stupca. Klik Tip> Zalijepi Lorem Ipsum ispuniti ga automatskim generiranjem Lorem Ipsum iz Photoshopa.

Korak 59

Izradite novi stil stavka za sadržaj znakova. Kliknite na novu ikonu na ploči Stilovi pasusa.

Dvaput kliknite na stil stavka i koristite sljedeću postavku.

Korak 60

Primijenite ovaj stil na sadržaj posta. Također možete eksperimentirati s postavkama za uvlačenje i razmak.

Za web-dizajn deaktivirajte Raspoređivanje.

Korak 61

Nacrtajte zaobljeni pravokutnik s Ispunite: # 8e8380 i Moždani udar: Nema. Dodati Stil sloja> Prekrivanje uzorka. Za dosljednost koristite isti uzorak kao u klizaču.

Korak 62

Dodajte oznaku gumba. Predlažem da ga spremite kao stil karaktera. Na taj način možemo ga lako koristiti za druge gumbe.

Korak 63

Prethodni gumb je za normalno stanje. Duplicirajmo i promijenimo boju na # f76b6a. Također, postavite njegovu oznaku na bold.

Korak 64

Postavite post unutar grupe i zatim pritisnite Ctrl + J da biste ga duplicirali. Alt-povucite za dupliciranje grupe.

Ponovite isti korak da biste postavili još postova. Ne zaboravite promijeniti sliku i naslov svakog posta.

Korak 65

Duplikat Čitaj više i promijenite oznaku na broj. Koristit ćemo ga za navigaciju po stranicama. Ne zaboravite postaviti jedan od gumba na stanje lebdjenja.

Korak 66: Podnožje

Počnimo raditi na podnožju. Dodajte naslov widgeta i njegov opis.

Korak 67

Dodajte vezu i nacrtajte 1 px liniju ispod nje. Set Ispunite: Nema i Moždani udar: # 8e8380.

Korak 68

Klik Više mogućnosti i odaberite isprekidana linija.

Korak 69

Dodajte više veza u widget.

Korak 70

Udvostručite widget.

Korak 71

Također moramo dodati stanje lebdjenja. Postavite jednu od poveznica na podebljano.

Ispod te aktivne veze dodajte liniju od 5 px. Postavite boju na # f76b6a. Zbog dosljednosti, izgled ove veze sličan je aktivnom izborniku na traci izbornika.

Korak 72

Na donje područje dodajte još jedan pravokutnik. Postavite njegovu ispuniti do # 3d3123.

Informacije o podnožju

Korak 73

Dodaj podatke o podnožju pomoću Tip alat. Pusti mrak Baci sjenku da biste dodali kontrast pozadini.

Društvena mreža

Korak 74

Dodajte neke ikone društvenih medija iz Daniele Selvitella. Dodati Stil sloja> Vanjski sjaj.

Korak 75

Utišajte normalnu ikonu na 50%. Za stanje lebdjenja, zadržimo ga Neprozirnost na 100%.

Korak 76

Zgrabite ikonu kursora slobodne ruke i postavite najmanji pokazivač iznad aktivne ili lebdeće veze.

Konačni rezultat

To je naš konačni rezultat. Možete vidjeti da najnovija verzija Photoshopa ima neke zanimljive značajke za izradu web izgleda. Stilovi znakova i stilovi odlomaka značajno su poboljšanje za svakog web-dizajnera.

• Demo
• Preuzimanje izvora