Oblikujte čisto in elegantno postavitev bloga v Photoshopu CS6

V tej vadnici vam bom pokazal proces izdelava enostavnega in čistega oblikovalskega bloga uporabo najnovejšega Photoshopa. Uporabili bomo novo Slogi znakov in Slogi odstavkov nam pomagali racionalizirati postopek.

Če želite slediti tej vadnici, potrebujete naslednje vire:

• Brezplačna Font Sansation od Bernda Montaga.
• 26 Ponovljiv vzorec pikslov iz PSDfreemium.
• Brezplačne ikone socialnih medijev Daniela Selvitella.

• Demo

Priprava platna

Korak 1

V tej zasnovi bomo kot okvir uporabili 960 gs. Prenesite predlogo iz njene glavne strani in znotraj datoteke zip, poiščite datoteko photoshop. Odprite datoteko '12 stolpca Grid 'v Photoshopu.

Kliknite ikono očesa za sloj 12 Col Grid, da ga skrijete; za zdaj ga ne bomo potrebovali.

2. korak

Trenutna velikost platna je premajhna. Kliknite Slika> Velikost platna (ali Ctrl + Alt + C). Dodajte večjo velikost in se prepričajte, da je njena sidrna točka nastavljena na sredino.

3. korak

Pritisnite Ctrl + R, da prikažete ravnilo. Kliknite Pogled> Novo Vodnik za izdelavo novega vodnika, ki nam bo pomagal oblikovati natančno. Izberite Navpično in na položaju: 185 px da naredimo navpično vodilo 185 px od zgornjega levega vogala platna.

4. korak

Na mestu namestite še eno navpično vodilo 150 px, 1095 px in 1130 px.

Spodaj je naš končni vodnik znotraj platna.

Priprava teme barve

Korak 5

Za to zasnovo bomo uporabili lepo barvno kombinacijo iz Colorlouverja. Kliknite povezavo Predogled, da odprete barvno kombinacijo kot datoteko jpeg.

Shranite barvno kombinacijo in jo postavite v datoteko Photoshop. S tem, ko sliko postavimo neposredno v platno, jo lahko hitreje in lažje vzorčimo.

Priprava ozadja

6. korak

Izberite Ozadje plast in kliknite ikono za zaklepanje na vrhu plošče Plasti, da jo odklenete. Dvokliknite sličico, da spremenite njeno barvo.

Kliknite drugo barvo, # 948371, , da jo izberete.

7. korak

Na platno narišite pravokotno obliko. To bo drugo ozadje.

Korak 8

Obliko naj bo izbrana. V Bar z možnostmi, odprto Izpolnite Barva in nato kliknite ikona barvnega kolesa. Ko se odpre pogovorno okno Picker Color, kliknite prvo barvo, da jo izberete. Za njegovo Možganska kap izbira barve Jih ni.

9. korak

Naredite novo plast in nato izberite zgornje platno s pomočjo pravokotnega orodja. Aktivirajte orodje za gradient in ga izpolnite radialno gradient od bele do črne. Prepričajte se, da je gradient centriran na vrhu platna.

Spremenite njegovo Mešanica način do Zaslon in zmanjša njeno Nepreglednost do 37%.

Korak 10

Naredite novo plast in jo poimenujte "senca".

Narišite pravokotno izbiro na dnu sekundarnega ozadja, kot je prikazano. Kliknite Uredi: Izpolni. Set Uporaba do Črna. Kliknite v redu za zapolnitev izbire s črno.

11. korak

Zmehča ga z uporabo Gaussian Blur. Kliknite Filter> Blur> Gaussian Blur.

Korak 12

Držite tipko Alt in nato postavite kurzor med senca in zgornje ozadje plast. Ne da bi sprostili tipko Alt, kliknite pretvorite plast v Clipping Mask. S pretvorbo v Clipping Mask, senca zdaj gre znotraj zgornjega ozadja.

Korak 13

Spustite senco Nepreglednost do 50% da bi bila subtilna. Spodaj lahko vidite rezultat v 100-odstotni povečavi.

Korak 14

Vedno je dobra ideja, da te plasti postavite v eno skupino. Storiti to, izberite vse plasti in nato Ctrl + G.

Glava

Korak 15

Na zgornjem platnu narišite pravokotnik, kot je prikazano.

Korak 16

V Bar z možnostmi, nastavite Možganska kap barve # af9f8e.

Korak 17

Za njegovo Izpolnite izberite barvo linearni gradient od # d0c4b9 do # a89c91.

Spodaj je rezultat v 100-odstotnem pogledu.

Ime mesta

Korak 18

Dodajte ime spletnega mesta na levo stran oblikovanja. Upoštevajte položaj, kot je prikazano spodaj. Dvokliknite besedilo in dodajte Drop Shadow. Za pisavo uporabite Sansation.

Meni

Korak 19

Risanje menijev na drugi strani menijske vrstice. Uporabite pisavo Sansation 14 pt. Spet opazite umestitve.

Korak 20

Za aktivni meni nastavite pisavo na krepko.

21. korak

Aktiviraj Orodje za mnogokotnike in nastavite Strani do 3. Narišite trikotno obliko z Izpolnite: # 3d3123 in Hod: Brez. Dodaj Slog sloja > Spusti senco.

Korak 22

Poudarimo aktivni meni z dodajanjem vrstice pod njim. Aktivirajte Orodje za vrstice in določiti njegovo težo 5 px. Izberite # f76b6a za njegovo polnjenje, brez udarca.

Postavite črto desno pod aktivni meni in dodajte 1 px presledek na dno menijske vrstice.

Uporaba slogov znakov

Korak 23

Shranimo nastavitev znakov kot slog znakov. Ta funkcija je poenostavljena različica slogov znakov v programu InDesign. Če ga želite shraniti, aktivirajte besedilo in kliknite ikono »Nov znakovni stil«.

Dvakrat kliknite novi slog znakov in uporabite naslednjo nastavitev.

24. korak

Izberite drugi meni in nato kliknite slog znaka, da ga uporabite. Če poleg znakovnega znaka najdete znak plus, to pomeni, da ima znak drugačno nastavitev. Če želite razveljaviti nastavitve, kliknite ikono s krožno puščico.

Korak 25

Ponovite prejšnji korak, da ustvarite nov slog znakov za aktivni meni.

Korak 26

Torej, kaj je smisel uporabe znakovnih stilov? Slogi znakov nam pomagajo centralizirati nastavitev znakov. Slog sloga lahko preprosto uredimo in tako uredimo vsako besedilo s tem slogom. Glej primer spodaj. Če urejamo vrsto pisave v znakovnem slogu Glavni meni - Normalno na Corbel, vsi običajni meniji se samodejno spremenijo v Corbel.

27. korak

Naredite novo plast in jo postavite pod menijsko vrstico. Ctrl kliknite na menijsko vrstico, da naredite novo izbiro glede na njeno obliko. Napolnite ga z Črna.

Korak 28

Odstranite izbiro z uporabo Ctrl + D. Mehčanje z dodajanjem Gaussova zameglitev, Filter> Blur> Gaussian Blur.

Drsnik

29. korak

Narišite pravokotno obliko s širino 10 stolpcev (glej spodaj).

Za njegovo Barva polnila izberite # dfd1c2. Za njegovo Možganska kap izberite # c8baac z velikostjo 10 pt. Kliknite majhno puščico ob predogledu vrstice in se prepričajte Poravnaj znotraj je izbrana.

Korak 30

Prilepite sliko na vrh okvira. Pretvorite ga v Clipping Mask s pritiskom na Ctrl + Alt + G. Slika bo samodejno prešla v okvir drsnika. Po potrebi lahko sliko premaknete in spremenite velikost, ne da bi vplivali na njen okvir.

Korak 31

Za drsnikom z isto barvo narišite še eno pravokotno obliko. Poskrbite, da se zaskoči na skrajni vodnik. Dodaj Slog sloja> Prekrivanje vzorca z vzorcem pikslov iz PSDfreemium. Utišajte Nepreglednost narediti njeno subtilno.

Korak 32

Nad obliko narišite pravokotno obliko Izpolnite: # b3aca5 in brez možganov. Pritisnite Ctrl + T in nato zavrtite ga 45 °. Pretvarjanje oblike plasti v Clipping Mask.

Korak 33

Podvoji obliko in jo spremeni velikost. Spremenite njegovo Izpolnite temnejši barvi. Pretvarjanje oblike plasti v Clipping Mask.

Korak 34

Ponovite isti korak, da narišete drugo puščico na drugi strani.

Korak 35

Ctrl-klikni drsni okvir za novo izbiro. Naredite novo plast in jo pretvorite v a Clipping Mask. Izpolnite izbor z Črna.

36. korak

Nato prekličite izbiro (Ctrl + D) mehka uporablja Gaussova zameglitev.

Če je potrebno, lahko zmanjšate neprozornost senc.

37. korak

Na vogalu drsnika narišite zaobljen pravokotnik Izpolnite # c8baac.

38. korak

Narišite krog znotraj oblike. Nastavite njegovo Možganska kap do Črna z Velikostjo 1 pt in odstranite polnilo.

39. korak

Izberite krog poti Izbira poti orodje. Shift + Alt - povlecite pot, da jo podvojite.

To ponovite za risanje več krogov.

Korak 40

Izberite eno od poti kroga. Pritisnite Ctrl + Shift + J, da ga razrežete na novo plast.

Korak 41

V Bar z možnostmi, odstranite Možganska kap in spremeni njegovo Izpolnite do a radialno gradient od # e38989 na # bb5c5c. Dodaj Slog sloja> Outer Glow in Drop Shadow.

Korak 42

Narišite eliptični izbor pod drsnikom. Naredite novo plast in jo izpolnite Črna.

Korak 43

Prekličite izbiro (Ctrl + D). Zmehča z uporabo Gaussova zameglitev.

Spodnje ozadje

Korak 44

Za spodnje ozadje narišite drugo pravokotno obliko. Uporabite isto Izpolnite in Možganska kap barva kot oblika drsnika.

Kot vedno, bodite zelo previdni pri njegovi umestitvi. Želimo, da pokrije vsak vodnik na platnu.

Dodaj Slog sloja> Prekrivanje vzorca.

Spodaj je rezultat v 100-odstotni povečavi.

Korak 45

S pomočjo orodja Rectangular Marquee izberite njegovo gornje območje.

Korak 46

Naredite novo plast, jo postavite za obliko. Izpolnite izbor z Črna. Pritisnite Ctrl + T, desni klik in izberite Perspektiva.

Povlecite njegove zgornje robove navzven.

Znova kliknite z desno tipko in izberite Lestvica. Povlecite zgornji ročaj navzdol.

Desni klik in izberite Warp. Povlecite levo in desno navznoter.

Zmehča z uporabo Gaussova zameglitev.

Utišajte Nepreglednost do 20%.

Korak 47

V ozadju narišite bel pravokotnik. To bo ozadje za glavno vsebino spletnega mesta.

Na levo, desno in zgornjo stran ozadja dodajte razmik 10 px. Razmik mora biti preprost, ker smo vodnik naredili v zgodnjih korakih. Dodaj Slog sloja> Outer Glow.

Korak 48

Dodajte nov vodnik, 25 px od zgornje strani oblike.

Naslov oddelka

49. korak

Dodajte nov slog znaka za naslov strani in njegov opis.

Dodajte naslov razdelka in njegov opis z orodjem Type. Uporabi sloge, ki smo jih naredili prej. Prepričajte se, da dodate 25 px prostora z zgornje strani ozadja s pomočjo predhodnega vodnika.

Korak 50

Narišite 5 px vrstico pod opisom mesta z Izpolnite: # 938270 in Hod: Brez.

Objava v spletnem dnevniku

Korak 51

Naredite nov slog znaka za naslov objave.

Korak 52

Dodajte naslov objave in uporabite prejšnji slog znakov.

Korak 53

Pod naslovom narišite pravokotno obliko s širino 4 stolpcev. Set bela za njegovo Izpolnite in #bebebe za njegovo Možganska kap. Dodaj Slog sloja> Stroke.

Korak 54

Prilepite sliko na vrh oblike. Pretvori ga v odrezalno masko (Ctrl + Alt + G).

Korak 55

Narišite zaobljen pravokotnik z Izpolnite: # 8e8380 in Hod: Brez. Pretvorite ga v Clipping Mask.

Korak 56

Naredite nove sloge znakov za metapodatke spletnega dnevnika.

Korak 57

Dodajte besedilo metapodatkov na vrh oblike in uporabite slog znakov, ki smo ga ustvarili prej.

Korak 58

Aktiviraj Vrsta in kliknite in povlecite, da ustvarite polje z besedilom. Nastavite njegovo širino na 4 stolpce. Kliknite Tip> Prilepi Lorem Ipsum da ga zapolnimo s samodejno ustvarjenim Lorem Ipsum iz Photoshopa.

Korak 59

Naredite nov slog odstavka za vsebino znakov. Kliknite novo ikono na plošči Slogi odstavkov.

Dvokliknite slog odstavka in uporabite to nastavitev.

Korak 60

Uporabite ta slog za vsebino objave. Prav tako lahko poskusite z nastavitvami za zamik in razmik.

Za spletno oblikovanje izklopite razdelitev.

Korak 61

Narišite zaobljen pravokotnik z Izpolnite: # 8e8380 in Hod: Brez. Dodaj Slog sloja> Prekrivanje vzorca. Za doslednost uporabite enak vzorec kot v drsniku.

Korak 62

Dodajte oznako gumba. Predlagam vam, da ga shranite kot slog znakov. Na ta način jo lahko enostavno uporabimo za druge gumbe.

Korak 63

Prejšnji gumb je za normalno stanje. Poskusimo ga podvojiti in spremeniti barvo na # f76b6a. Prav tako nastavite njeno vrsto oznake na krepko.

Korak 64

Postavite objavo znotraj skupine in nato pritisnite Ctrl + J, da jo podvojite. Alt-povlecite, da podvojite skupino.

Enak korak ponovite za več objav. Ne pozabite spremeniti slike in naslova vsake objave.

Korak 65

Podvoji Preberi več in spremenite oznako na številko. Uporabili ga bomo za navigacijo po straneh. Ne pozabite nastaviti enega od gumbov na stanje lebdenja.

Korak 66: Noga

Začnimo z delom na nogi. Dodajte naslov gradnika in njegov opis.

Korak 67

Dodajte povezavo in narišite 1 px linijo pod njo. Set Izpolnite: Brez in Hod: # 8e8380.

Korak 68

Kliknite Več možnosti in izberite črtkana črta.

Korak 69

Dodajte več povezav v pripomoček.

Korak 70

Podvojite pripomoček.

Korak 71

Dodati moramo tudi stanje hover. Nastavite eno od povezav na krepko.

Pod to aktivno povezavo dodajte linijo 5 px. Nastavite barvo na # f76b6a. Zaradi doslednosti je videz te povezave podoben aktivnemu meniju v menijski vrstici.

Korak 72

Na spodnje območje dodajte še en pravokotnik. Nastavite njegovo Izpolnite do # 3d3123.

Podatki za nogo

Korak 73

Dodajanje podatkov o podnožju z uporabo Vrsta orodje. Daj temo Drop Shadow da bi dodali kontrast njegovemu ozadju.

Socialno omrežje

Korak 74

Dodajte nekaj ikon družabnih medijev iz Daniele Selvitella. Dodaj Slog sloja> Outer Glow.

Korak 75

Utišajte običajno ikono na 50%. Za stanje lebdenja hranimo njegovo Nepreglednost na 100%.

Korak 76

Vzemite ikono kazalca proste roke in postavite najmanjši kazalec nad aktivno ali hover povezavo.

Končni rezultat

To je naš končni rezultat. Vidite lahko, da ima najnovejša različica Photoshopa nekaj zanimivih funkcij za oblikovanje spletne postavitve. Slogi znakov in slogi odstavkov so pomemben napredek za vsakega spletnega oblikovalca.

• Demo
• Prenesi vir