Vytvorte čisté a elegantné rozloženie blogu vo Photoshope CS6

V tejto príručke vám ukážem proces robiť jednoduchý a čistý dizajnový blog pomocou najnovšieho programu Photoshop. Budeme používať nový Znakové štýly a Styly odseku aby sme pomohli zjednodušiť proces.

Ak chcete postupovať podľa tohto návodu, budete potrebovať nasledujúce zdroje:

• Bezplatná písomná odpoveď od Bernd Montag.
• 26 Opakovateľný obrazový bod z PSDfreemia.
• Voľné ikony sociálnych médií od Daniele Selvitelly.

• demonštrácie

Príprava plátna

Krok 1

V tomto dizajne budeme používať 960 g ako svoj rámec. Stiahnite si šablónu z jej hlavnej stránky a vnútri zip súboru, vyhľadajte súbor photoshopu. Otvorte súbor "12 stĺpcov" vo Photoshope.

Kliknutím na ikonu oka pre vrstvu 12 Mriežky mriežky ju skryjete. teraz to nepotrebujeme.

Krok 2

Aktuálna veľkosť plátna je príliš malá. kliknite Obrázok> Veľkosť plátna (alebo Ctrl + Alt + C). Pridajte väčšiu veľkosť a uistite sa, že nastavíte jej kotvový bod do stredu.

Krok 3

Stlačením klávesov Ctrl + R odhalíte pravítko. kliknite Zobraziť> Nové Sprievodca vytvorením nového sprievodcu, ktorý nám pomôže presne navrhnúť. vybrať vertikálne a na pozícii: 185 px aby vertikálny vodca 185 px od ľavého horného rohu plátna.

Krok 4

Nakreslite ďalšie vertikálne vodidlo na pozíciu 150 px, 1095 px a 1130 px.

Nižšie je náš posledný sprievodca vnútri plátna.

Príprava témy farieb

Krok 5

Pre tento dizajn budeme používať peknú farebnú kombináciu z Colorlouveru. Kliknutím na odkaz Náhľad otvoríte farebnú kombináciu ako súbor jpeg.

Uložte farebnú kombináciu a vložte ju do súboru Photoshop. Umiestením obrazu priamo vo vnútri plátna môžeme vzorkovať jeho farbu rýchlejšie a ľahšie.

Príprava pozadia

Krok 6

vybrať Pozadie vrstva a kliknutím na ikonu uzamknutia v hornej časti panelu Vrstvy ju odomknete. Dvojitým kliknutím na miniatúru zmeníte jej farbu.

Kliknite na druhú farbu, # 948371, vyberte ho.

Krok 7

Nakreslite obdĺžnikový tvar na vrchole plátna. Toto bude druhé pozadie.

Krok 8

Udržujte tvar zvolený. V Panel s možnosťami, otvorené vyplniť farba a potom kliknite na tlačidlo farebná ikona kolieska. Keď sa otvorí dialógové okno Zber farieb, kliknite na prvú farbu a vyberte ju. Pre svoje Mŕtvica výber farby nikto.

Krok 9

Vytvorte novú vrstvu a potom pomocou horného plátna pomocou obdĺžnikového nástroja. Aktivujte funkciu gradient nástroj a naplňte ho radiálne stúpanie od bielej po čierne. Presvedčte sa, či je gradient umiestnený na vrchu plátna.

Zmeniť jeho zmes režim na plátno a znížiť jeho nepriehľadnosť na 37%.

Krok 10

Vytvorte novú vrstvu a pomenujte ju "tieň".

Nakreslite obdĺžnikový výber v spodnej časti sekundárneho pozadia, ako je znázornené. kliknite Upraviť: Vyplniť. nastaviť použitie na čierna. kliknite OK na vyplnenie výberu čiernym.

Krok 11

Zmäknite ho pomocou Gaussovho rozmazania. kliknite Filter> Blur> Gaussian Blur.

Krok 12

Podržte Alt a potom umiestnite kurzor medzi tieň a horné pozadie vrstvu. Bez uvoľnenia klávesu Alt kliknite na preveďte vrstvu na orezovú masku. Prevedením do orezávacej masky sa teraz stín nachádza vo vnútri horného pozadia.

Krok 13

Zatvorte tieň nepriehľadnosť na 50% aby to bolo jemné. Nižšie vidíte výsledok pri 100% zväčšení.

Krok 14

Vždy je dobré umiestniť tieto vrstvy do jednej skupiny. Urobiť toto, vyberte všetky vrstvy a potom kliknite na tlačidlo Ctrl + G.

hlavička

Krok 15

Nakreslite obdĺžnik na hornom plátne, ako je znázornené.

Krok 16

V Panel s možnosťami, sada Mŕtvica farba na # af9f8e.

Krok 17

Pre svoje vyplniť farbu, vyberte lineárny gradient z # d0c4b9 do # a89c91.

Nižšie je výsledok v 100% zobrazení.

Názov stránky

Krok 18

Pridajte názov stránky na ľavej strane dizajnu. Pozorujte umiestnenie, ako je uvedené nižšie. Dvakrát kliknite na text a pridajte Vrhať tieň. Pre jeho písmo používajte Reč.

Ponuka

Krok 19

Nakreslite ponuky na druhej strane panela s ponukami. Použite písmo Opis 14 pt. Znova si všimnite umiestnenia.

Krok 20

V aktívnej ponuke nastavte typ písma tučným písmom.

Krok 21

Aktivovať Nástroj na mnohouholník a nastavte strany na 3. Nakreslite trojuholníkový tvar Vyplňte: # 3d3123 a Zdvih: Žiadne. pridať Štýl vrstvy > Drop Shadow.

Krok 22

Zdôrazňujeme aktívne menu pridaním riadku pod ním. Aktivujte funkciu Line nástroj a nastavte jeho hmotnosť na 5 px. vybrať # f76b6a pre jeho výplň bez zdvihu.

Položte riadok priamo pod aktívnym menu a pridajte 1 x medzery v dolnej časti panela s ponukami.

Používanie štýlov znakov

Krok 23

Uložme nastavenie znakov ako Štýl znakov. Táto funkcia je zjednodušená verzia štýlov znakov v aplikácii InDesign. Ak ho chcete uložiť, aktivujte text a kliknite na ikonu "Nový štýl štýlu".

Dvakrát kliknite na nový štýl štýlu a použite nasledujúce nastavenie.

Krok 24

Vyberte ďalšie menu a potom kliknite na štýl štýlu, ktorý chcete použiť. Ak nájdete znak plus vedľa štýlu znakov, znamená to, že znak má iné nastavenie. Ak chcete zmeniť nastavenia, kliknite na ikonu kruhovej šípky.

Krok 25

Opakujte predchádzajúci krok a vytvorte nový štýl štýlu pre aktívnu ponuku.

Krok 26

Takže, aký je zmysel používať štýly znakov? Znakové štýly nám pomáhajú centralizovať nastavenie znakov. Jednoducho upravíme štýl štýlov, ktorý upraví každý text pomocou tohto štýlu. Pozrite si príklad nižšie. Ak upravíme typ písma v štýle znakov Najvyššia ponuka - Normálna do Corbel, všetky normálne menu sa automaticky zmení na Corbel.

Krok 27

Vytvorte novú vrstvu a umiestnite ju pod panel s ponukami. Ctrl-kliknite na panel s ponukami, aby ste si vybrali nový výber na základe jeho tvaru. Vyplňte ho čierna.

Krok 28

Odstráňte výber pomocou klávesov Ctrl + D. Zmäknite ho pridaním Gaussovské rozostrenie, Filter> Blur> Gaussian Blur.

slider

Krok 29

Nakreslite obdĺžnikový tvar so šírkou 10 stĺpcov (pozri nižšie).

Pre svoje Vyplňte farbu vybrať # dfd1c2. Pre svoje Mŕtvica vybrať # c8baac s veľkosťou 10 bodov. Kliknite na malú rozbaľovaciu šípku vedľa náhľadu a uistite sa Zarovnajte vnútri je vybratá.

Krok 30

Prilepte obrázok na hornú časť rámu. Preveďte to Maska na orezávanie stlačením klávesov Ctrl + Alt + G. Obraz sa automaticky dostane do rámčeka posuvníka. V prípade potreby môžete pohybovať a meniť veľkosť obrázka bez toho, aby ste ovplyvnili jeho rámček.

Krok 31

Nakreslite iný obdĺžnikový tvar za posúvačom rovnakej farby. Uistite sa, že ho zachytete na vonkajší vodítko. pridať Štýl vrstvy> Vzorová vrstva pomocou pixelového vzoru od PSDfreemium. Tónovanie nadol nepriehľadnosť aby sa jeho jemné.

Krok 32

Nakreslite obdĺžnikový tvar nad tvarom Vyplňte: # b3aca5 a žiadny zdvih. Stlačte Ctrl + T a potom otočte ho o 45 °. Previesť tvar vrstvy na Maska na orezávanie.

Krok 33

Duplikujte tvar a upravte jeho veľkosť. Zmeniť jeho vyplniť na tmavšiu farbu. Previesť tvar vrstvy na Maska na orezávanie.

Krok 34

Opakujte rovnaký krok, ak chcete nakresliť ďalšiu šípku na druhej strane.

Krok 35

Kliknutím na tlačidlo Ctrl posuňte rámček, čím vykonáte nový výber. Vytvorte novú vrstvu a preveďte ju na a Maska na orezávanie. Vyplňte výber s čierna.

Krok 36

Zrušte výber (Ctrl + D) zmäkčiť to používa Gaussovské rozostrenie.

Ak je to potrebné, môžete znížiť opacitu tieňa.

Krok 37

Nakreslite zaoblený obdĺžnik na rohu posúvača Vyplňte # c8baac.

Krok 38

Nakreslite kruh vo vnútri tvaru. Nastavte jeho Mŕtvica na čierna s veľkosťou 1 bod a odstráňte položku Vyplniť.

Krok 39

Vyberte položku kružnice cesta pomocou Výber cesty nástrojom. Shift + Alt - pretiahnite cestu, aby ste ju duplikovali.

Opakujte toto, ak chcete nakresliť viac kruhov.

Krok 40

Vyberte jednu z kruhových ciest. Stlačte Ctrl + Shift + J, aby ste ju prebrali na novú vrstvu.

Krok 41

V Panel s možnosťami, odstrániť Mŕtvica a zmeniť jeho vyplniť na a radiálne gradient od # e38989 do # bb5c5c. pridať Štýl vrstvy> Vonkajšia žiara a Vrhať tieň.

Krok 42

Nakreslite eliptický výber pod posuvníkom. Vytvorte novú vrstvu a vyplňte ju čierna.

Krok 43

Zrušte výber (Ctrl + D). Zmäkčujte ho Gaussovské rozostrenie.

Dolné pozadie

Krok 44

Nakreslite ďalší obdĺžnikový tvar spodného pozadia. Použite to isté vyplniť a Mŕtvica ako tvar posúvača.

Ako vždy, buďte veľmi opatrní pri jeho umiestnení. Chceme, aby pokryla každého vodcu na plátne.

pridať Štýl vrstvy> Vzorová vrstva.

Nižšie je výsledok pri 100% zväčšení.

Krok 45

Zvoľte svoju oblasť uper pomocou nástroja Rectangular Marquee.

Krok 46

Vytvorte novú vrstvu a umiestnite ju za tvar. Vyplňte výber s čierna. Stlačte Ctrl + T, kliknite pravým tlačidlom a vyberte perspektíva.

Presuňte horné rohy smerom von.

Opäť kliknite pravým tlačidlom a vyberte mierka. Presuňte hornú rukoväť nadol.

Kliknite pravým tlačidlom a vyberte osnova. Presuňte ľavý a pravý segment smerom dovnútra.

Zmäkčujte ho Gaussovské rozostrenie.

Tónovanie nadol nepriehľadnosť na 20%.

Krok 47

Na pozadí nakreslite biely obdĺžnik. To bude základom pre hlavný obsah stránky.

Do ľavej, pravej a hornej strany pozadia pridajte 10 px. Rozstup by mal byť jednoduchý, pretože sme urobili sprievodcu v skorých krokoch. pridať Štýl vrstvy> Vonkajšia žiara.

Krok 48

Pridajte novú sprievodcu, 25 px od hornej strany tvaru.

Názov oddielu

Krok 49

Pridajte nový štýl štýlu pre názov sekcie stránky a jej opis.

Pridajte názov sekcie a jej opis pomocou nástroja Typ. Použiť štýly, ktoré sme urobili skôr. Uistite sa, že ste pridali 25 pixelov priestoru z hornej strany jeho pozadia pomocou pomocníka z predchádzajúceho sprievodcu.

Krok 50

Na základe popisu webových stránok nakreslite riadok s 5 px Vyplňte: # 938270 a Zdvih: Žiadne.

Príspevok v blogu

Krok 51

Vytvorte iný štýl štýlu pre názov príspevku.

Krok 52

Pridať názov príspevku a použiť predchádzajúci štýl štýlu.

Krok 53

Nakreslite tvar obdĺžnika pod názvom so šírkou 4 stĺpce. nastaviť biely pre jeho vyplniť a #bebebe pre jeho Mŕtvica. pridať Štýl vrstvy> Zdvih.

Krok 54

Vložte obrázok na vrchole tvaru. Previesť ju na orezovú masku (Ctrl + Alt + G).

Krok 55

Nakreslite zaoblený obdĺžnik s Vyplňte: # 8e8380 a Zdvih: Žiadne. Preveďte to Maska na orezávanie.

Krok 56

Vytvorte nové štýly znakov pre metadáta blogu.

Krok 57

Pridajte text metadát na vrchole tvaru a použite štýl štýlu, ktorý sme urobili skôr.

Krok 58

Aktivovať typ nástrojom a pretiahnutím po kliknutí vytvoríte textové pole. Nastavte jeho šírku na 4 stĺpce. kliknite Typ> Vložiť Lorem Ipsum naplniť ho auto-generované Lorem Ipsum z Photoshopu.

Krok 59

Vytvorte nový štýl odseku pre obsah znakov. Kliknite na novú ikonu na paneli Styly odstavcov.

Dvakrát kliknite na štýl odseku a použite nasledujúce nastavenie.

Krok 60

Použite tento štýl na príspevok obsah. Môžete tiež experimentovať s nastaveniami odsadenia a rozstupu.

Pri návrhu webových stránok deaktivujte funkciu Zoskupovanie.

Krok 61

Nakreslite zaoblený obdĺžnik s Vyplňte: # 8e8380 a Zdvih: Žiadne. pridať Štýl vrstvy> Vzorová vrstva. Pre konzistenciu použite rovnaký vzor ako v posúvači.

Krok 62

Pridať štítok s tlačidlami. Navrhujem, aby ste to uložili ako znakový štýl. Týmto spôsobom ho môžeme ľahko použiť pre iné tlačidlá.

Krok 63

Predchádzajúce tlačidlo je pre normálny stav. Poďme to duplikovať a zmeniť farbu na # f76b6a. Tiež nastavte typ označenia na tučné.

Krok 64

Vložte miesto do skupiny a potom stlačte klávesy Ctrl + J, aby ste ju duplikovali. Alt-drag pre duplikovanie skupiny.

Zopakujte rovnaký krok a vytvorte viac príspevkov. Nezabudnite zmeniť obrázok a názov každého príspevku.

Krok 65

duplikát Čítaj viac tlačidlo a zmeniť jeho označenie na číslo. Použijeme ju na navigáciu na stránke. Nezabudnite nastaviť jedno z tlačidiel, aby sa zobrazila podmienka vznášania.

Krok 66: Päta

Začnime pracovať na päte. Pridajte názov miniaplikácie a jeho popis.

Krok 67

Pridať odkaz a nakreslite línie s veľkosťou 1 px pod ním. nastaviť Vyplniť: Žiadne a Zdvih: # 8e8380.

Krok 68

kliknite Viac možností a vyberte prerušovaná čiara.

Krok 69

Pridajte do widgetu ďalšie odkazy.

Krok 70

Duplikovať miniaplikáciu.

Krok 71

Musíme tiež pridať podmienku vznášania. Nastavte jeden z odkazov na tučné.

Pod týmto aktívnym odkazom pridajte riadok s 5 px. Nastavte farbu na hodnotu # f76b6a. Pre konzistenciu je vzhľad tohto odkazu podobný aktívnej ponuke na paneli s ponukami.

Krok 72

Do dolnej oblasti pridajte ďalší obdĺžnik. Nastavte jeho vyplniť na # 3d3123.

Informácie päty

Krok 73

Pridajte informácie o päte pomocou typ nástrojom. Dajte to tmavé Vrhať tieň na pridanie kontrastu k pozadiu.

Sociálna sieť

Krok 74

Pridajte niektoré ikony sociálnych médií od Daniele Selvitelly. pridať Štýl vrstvy> Vonkajšia žiara.

Krok 75

Zmeňte normálnu ikonu na 50%. Pokiaľ ide o stav vznášania, nechajme ju nepriehľadnosť na 100%.

Krok 76

Uchopte ikonu kurzora voľnej ruky a umiestnite najmenší kurzor nad aktívny alebo vznášajúci sa odkaz.

Konečný výsledok

Toto je náš konečný výsledok. Môžete vidieť, že najnovšia verzia aplikácie Photoshop obsahuje niekoľko zaujímavých funkcií pre návrh rozloženia webu. Štýly znakov a štýly odsekov je významným zlepšením pre každého web dizajnéra.

• demonštrácie
• Stiahnuť zdroj