Navrhněte čisté a elegantní rozvržení blogu ve Photoshopu CS6

V tomto tutoriálu vám ukážu proces dělat jednoduchý a čistý design blog pomocí nejnovějšího Photoshopu. Budeme používat nové Styly znaků a Styly odstavců aby nám tento proces pomohl zefektivnit.

Chcete-li se řídit tímto návodem, budete potřebovat následující zdroje:

• Zdarma písma Sansation od Bernd Montag.
• 26 Opakovatelný obrazový vzorek z PSDfreemium.
• Ikony zdarma sociální média od Daniele Selvitella.

• Demo

Příprava plátna

Krok 1

V tomto návrhu budeme používat 960 gs jako jeho rámec. Stáhněte si šablonu ze své hlavní stránky a do souboru zip a vyhledejte soubor photoshopu. Otevřete soubor '12 Column Grid 've Photoshopu.

Kliknutím na ikonu oka vrstvy 12 Col Grid ji skryjete; teď to nebudeme potřebovat.

Krok 2

Aktuální velikost plátna je příliš malá. Klikněte na Obrázek> Velikost plátna (nebo Ctrl + Alt + C). Přidejte větší velikost a nezapomeňte nastavit kotevní bod na střed.

Krok 3

Stiskem Ctrl + R zobrazíte pravítko. Klikněte na Zobrazit> Nový Průvodce, aby nový průvodce, který nám pomůže přesně navrhnout. Vybrat Vertikální a na pozici: 185 px vytvořit vertikální vodítko 185 px z levého horního rohu plátna.

Krok 4

Nakreslete další vertikální vodítko v poloze 150 px, 1095 px a 1130 px.

Níže je náš poslední průvodce uvnitř plátna.

Příprava barevného motivu

Krok 5

Pro tento design použijeme pěknou barevnou kombinaci od společnosti Colorlouver. Kliknutím na odkaz Náhled otevřete kombinaci barev jako soubor jpeg.

Uložte barevnou kombinaci a umístěte ji do souboru Photoshopu. Umístěním obrazu přímo do plátna můžeme rychleji a snadněji ochutnat jeho barvu.

Příprava pozadí

Krok 6

Vybrat Pozadí vrstva a klepněte na ikonu zámku v horní části panelu Vrstvy, abyste jej odemkli. Dvojitým kliknutím na miniaturu změníte barvu.

Klikněte na druhou barvu, # 948371, vyberte.

Krok 7

Na plátně nakreslete obdélníkový tvar. To bude druhé pozadí.

Krok 8

Udržujte vybraný tvar. V Možnost Bar, otevřeno Vyplnit Barva a potom klepněte na tlačítko ikona barevné kolo. Po otevření dialogového okna Výběr barvy klepněte na první barvu, kterou chcete vybrat. Pro jeho Mrtvice vyberte barvu Žádný.

Krok 9

Vytvořte novou vrstvu a poté vyberte horní plátno pomocí obdélníkového nástroje. Aktivujte funkci gradient nástroj a vyplňte ji radiální spád od bílé po černou. Ujistěte se, že je gradient nahoře na plátně.

Změnit jeho Směs režimu na Obrazovka a omezit jeho Neprůhlednost na 37%.

Krok 10

Vytvořte novou vrstvu a pojmenujte ji jako stín..

Nakreslete pravoúhlý výběr ve spodní části sekundárního pozadí, jak je zobrazeno. Klikněte na Upravit: Vyplnit. Soubor Použití na Černá. Klikněte na OK vyplnění výběru černou barvou.

Krok 11

Změkčete ji pomocí Gaussova rozostření. Klikněte na Filtr> Rozostření> Gaussovské rozostření.

Krok 12

Podržte Alt a umístěte kurzor mezi stín a horní pozadí vrstva. Bez uvolnění klávesy Alt klepněte na převést vrstvu na ořezovou masku. Převedením na ořezovou masku se stín nyní dostane do horního pozadí.

Krok 13

Přineste stín Neprůhlednost na 50% aby to bylo jemné. Níže můžete vidět výsledek se 100% zvětšením.

Krok 14

Je vždy dobré umístit tyto vrstvy do jedné skupiny. Udělat toto, vyberte všechny vrstvy a potom klepněte na Ctrl + G.

Záhlaví

Krok 15

Nakreslete obdélník na horní plátno jako na obrázku.

Krok 16

V Možnost Bar, soubor Mrtvice barva na # af9f8e.

Krok 17

Pro jeho Vyplnit vyberte barvu lineární gradient z # d0c4b9 až # a89c91.

Níže je uveden výsledek ve 100% zobrazení.

Název webu

Krok 18

Přidejte název webu na levé straně návrhu. Sledujte umístění, jak je zobrazeno níže. Poklepejte na text a přidejte Vrhat stín. Pro jeho písmo použijte Sansation.

Jídelní lístek

Krok 19

Kreslení nabídek na druhé straně panelu nabídek. Použijte písmo Sansation 14 pt. Znovu si všimněte umístění.

Krok 20

Pro aktivní nabídku nastavte typ písma na tučné.

Krok 21

aktivovat Nástroj mnohoúhelník a nastavit Strany na 3. Nakreslete tvar trojúhelníku Vyplňte: # 3d3123 a Zdvih: Žádný. Přidat Styl vrstvy > Vržený stín.

Krok 22

Pojďme zdůraznit aktivní menu přidáním řádku pod něj. Aktivujte funkci Nástroj čáry a nastavte jeho váhu na 5 px. Vybrat # f76b6a pro jeho výplň, bez mrtvice.

Umístěte řádek vpravo pod aktivní nabídku a přidejte 1 px prostoru do dolní části panelu nabídek.

Použití znakových stylů

Krok 23

Uložme nastavení znaku jako znakový styl. Tato funkce je zjednodušenou verzí stylů znaků v aplikaci InDesign. Chcete-li ji uložit, aktivujte text a klepněte na ikonu Nový znakový styl.

Poklepejte na nový styl znaků a použijte následující nastavení.

Krok 24

Vyberte jinou nabídku a klepněte na Styl znaků, abyste ji použili. Pokud vedle znakového stylu najdete znak plus, znamená to, že znak má jiné nastavení. Chcete-li nastavení přepsat, klepněte na ikonu kruhové šipky.

Krok 25

Opakováním předchozího kroku vytvoříte nový znakový styl pro aktivní nabídku.

Krok 26

Takže, jaký je smysl použití znakových stylů? Styly znaků nám pomáhají centralizovat nastavení znaků. Styl znaků můžeme jednoduše upravovat tak, aby každý text používal tento styl. Viz příklad níže. Pokud upravíme typ písma uvnitř znakového stylu Top Menu - Normální do Corbelu se veškeré normální menu automaticky změní na Corbel.

Krok 27

Vytvořte novou vrstvu a umístěte ji pod panel nabídek. Chcete-li provést nový výběr na základě jeho tvaru, stiskněte klávesu Ctrl a klepněte na panel nabídek. Naplňte ho Černá.

Krok 28

Odstraňte výběr pomocí Ctrl + D. Změkčete jej přidáním Gaussovské rozostření, Filtr> Rozostření> Gaussovské rozostření.

Posuvník

Krok 29

Nakreslete obdélníkový tvar o šířce 10 sloupců (viz níže).

Pro jeho Vyplň barvu vybrat # dfd1c2. Pro jeho Mrtvice vybrat # c8baac s velikostí 10 pt. Klikněte na malou šipku rozevíracího seznamu vedle náhledu řádků a ujistěte se Zarovnat dovnitř je vybráno.

Krok 30

Vložte obrázek na horní část rámečku. Převést na Ořezová maska stiskem Ctrl + Alt + G. Obraz se automaticky přepne do rámu posuvníku. V případě potřeby můžete obrázek přesouvat a měnit jeho velikost bez ovlivnění jeho rámce.

Krok 31

Za posuvníkem nakreslete další obdélníkový tvar stejnou barvou. Ujistěte se, že je zasunete do krajního vodítka. Přidat Styl vrstvy> Překrytí vzoru pomocí pixelového vzoru z PSDfreemium. Tónovat jeho Neprůhlednost aby se stala jemnou.

Krok 32

Nad tvarem nakreslete obdélníkový tvar Vyplňte: # b3aca5 a žádný zdvih. Stiskněte klávesy Ctrl + T a poté otočte o 45 °. Převést tvar vrstvy na Ořezová maska.

Krok 33

Zkopírujte tvar a změňte jeho velikost. Změnit jeho Vyplnit na tmavší barvu. Převést tvar vrstvy na Ořezová maska.

Krok 34

Opakujte stejný krok a nakreslete další šipku na druhé straně.

Krok 35

Chcete-li provést nový výběr, stiskněte klávesu Ctrl a klepněte na snímek. Vytvořte novou vrstvu a převeďte ji na Ořezová maska. Vyplňte výběr tlačítkem Černá.

Krok 36

Zrušte výběr (Ctrl + D) změkčit pomocí Gaussovské rozostření.

V případě potřeby můžete snížit stínovou opacitu.

Krok 37

Nakreslete zaoblený obdélník v rohu jezdce pomocí Vyplňte # c8baac.

Krok 38

Nakreslete kruh uvnitř tvaru. Nastavte jeho Mrtvice na Černá s velikostí 1 bod a odstranit výplň.

Krok 39

Vybrat kruh pomocí cesty Výběr cesty nástroj. Shift + Alt-přetáhněte cestu, abyste ji duplikovali.

Opakováním tohoto postupu nakreslíte více kruhů.

Krok 40

Vyberte jednu z cest kruhu. Kliknutím na klávesy Ctrl + Shift + J jej přerušíte na novou vrstvu.

Krok 41

V Možnost Bar, odstranit jeho Mrtvice a změnit jeho Vyplnit až a radiální gradient od # e38989 až # bb5c5c. Přidat Styl vrstvy> Vnější záře a Vrhat stín.

Krok 42

Nakreslete pod posuvníkem eliptický výběr. Vytvořte novou vrstvu a vyplňte ji Černá.

Krok 43

Zrušte výběr (Ctrl + D). Změkčete jej pomocí Gaussovské rozostření.

Dolní pozadí

Krok 44

Nakreslete další obdélníkový tvar pro spodní pozadí. Použijte stejné Vyplnit a Mrtvice barvy jako tvar jezdce.

Jako vždy buďte velmi opatrní s umístěním. Chceme, aby pokryla všechny průvodce na plátně.

Přidat Styl vrstvy> Překrytí vzoru.

Níže je výsledek 100% zvětšení.

Krok 45

Pomocí nástroje Rectangular Marquee vyberte jeho horní plochu.

Krok 46

Vytvořte novou vrstvu, umístěte ji za tvar. Vyplňte výběr tlačítkem Černá. Stiskněte Ctrl + T, klikněte pravým tlačítkem myši a vyberte Perspektivní.

Přetáhněte jeho horní rohy ven.

Klikněte znovu pravým tlačítkem myši a vyberte Stupnice. Přetáhněte horní rukojeť dolů.

Klikněte pravým tlačítkem myši a vyberte Warp. Přetáhněte levý a pravý segment dovnitř.

Změkčete jej pomocí Gaussovské rozostření.

Tón dolů Neprůhlednost na 20%.

Krok 47

Nakreslete bílé pozadí uvnitř pozadí. Toto bude podklad pro hlavní obsah webu.

Do levého, pravého a horního okraje pozadí přidejte mezeru 10 px. Vzdálenost by měla být snadná, protože jsme učinili průvodce v prvních krocích. Přidat Styl vrstvy> Vnější záře.

Krok 48

Přidat nový průvodce, 25 px z horní strany tvaru.

Název oddílu

Krok 49

Přidat nový styl znaků pro název sekce stránky a jeho popis.

Přidejte název oddílu a jeho popis pomocí nástroje Typ. Použijte styly, které jsme vytvořili dříve. Ujistěte se, že jste přidali 25 pixelů z horní strany pozadí s nápovědou z předchozího průvodce.

Krok 50

Nakreslete čáru 5 px pod popisem stránky Vyplňte: # 938270 a Zdvih: Žádný.

Blog Post

Krok 51

Vytvořte další styl znaků pro název příspěvku.

Krok 52

Přidat název příspěvku a použít předchozí styl znaků.

Krok 53

Nakreslete tvar obdélníku pod názvem se 4 šířkami sloupců. Soubor bílý pro jeho Vyplnit a #bebebe pro jeho Mrtvice. Přidat Styl vrstvy> Zdvih.

Krok 54

Vložte obrázek na horní část tvaru. Převést na masku oříznutí (Ctrl + Alt + G).

Krok 55

Nakreslete zaoblený obdélník Vyplňte: # 8e8380 a Zdvih: Žádný. Převést na Ořezová maska.

Krok 56

Vytvořit nové styly znaků pro metadata blogu.

Krok 57

Přidání textu metadat na začátek tvaru a použití znakového stylu, který jsme vytvořili dříve.

Krok 58

aktivovat Typ Nástrojem a přetažením vytvořte textové pole. Nastavte jeho šířku na 4 sloupce. Klikněte na Zadejte> Vložit Lorem Ipsum vyplnit ho automaticky generovaným Lorem Ipsum z Photoshopu.

Krok 59

Vytvořte nový styl odstavce pro obsah znaku. Klikněte na novou ikonu na panelu Styly odstavců.

Poklepejte na Styl odstavce a použijte následující nastavení.

Krok 60

Použít tento styl na obsah příspěvku. Můžete také experimentovat s nastavením Odsazení a Mezery.

Pro web design deaktivujte dělení slov.

Krok 61

Nakreslete zaoblený obdélník Vyplňte: # 8e8380 a Zdvih: Žádný. Přidat Styl vrstvy> Překrytí vzoru. Pro konzistenci použijte stejný vzor jako v posuvníku.

Krok 62

Přidat popisek tlačítka. Navrhuji, abyste ji uložili jako znakový styl. Tímto způsobem ji můžeme snadno použít pro další tlačítka.

Krok 63

Předchozí tlačítko je pro normální stav. Pojďme to duplikovat a změnit jeho barvu # f76b6a. Také nastavte jeho typ štítku na tučné.

Krok 64

Umístěte příspěvek do skupiny a stiskněte klávesu Ctrl + J, abyste jej duplikovali. Alt-drag pro duplikování skupiny.

Opakujte stejný krok, abyste vytvořili více příspěvků. Nezapomeňte změnit obrázek a název každého příspěvku.

Krok 65

Duplikát Přečtěte si více a změňte jeho označení na číslo. Budeme ho používat pro navigaci po stránkách. Nezapomeňte nastavit jedno z tlačítek, abyste se dostali k podmínce.

Krok 66: Zápatí

Začněme pracovat na zápatí. Přidejte název widgetu a jeho popis.

Krok 67

Přidejte odkaz a nakreslete pod něj 1 px řádek. Soubor Vyplňte: Žádné a Zdvih: # 8e8380.

Krok 68

Klikněte na Více možností a vyberte přerušovaná čára.

Krok 69

Přidat další odkazy do widgetu.

Krok 70

Duplikovat widget.

Krok 71

Musíme také přidat podmínku přechodu. Nastavte jeden z odkazů na tučné písmo.

Pod tímto aktivním odkazem přidejte řádek 5 px. Nastavte jeho barvu na # f76b6a. Z důvodu konzistence je vzhled tohoto odkazu podobný aktivnímu menu na panelu nabídek.

Krok 72

Přidejte další obdélník do dolní oblasti. Nastavte jeho Vyplnit na # 3d3123.

Informace o zápatí

Krok 73

Přidat informace o zápatí pomocí Typ nástroj. Dej to temně Vrhat stín přidat kontrast k jeho pozadí.

Sociální síť

Krok 74

Přidat některé sociální media ikony z Daniele Selvitella. Přidat Styl vrstvy> Vnější záře.

Krok 75

Ztlumte normální ikonu 50%. Pro stav vznášení, pojďme si udržet jeho Neprůhlednost v 100%.

Krok 76

Uchopte ikonu kurzoru volné ruky a umístěte nejmenší kurzor ruky nad aktivní nebo vznášející se odkaz.

Konečný výsledek

To je náš konečný výsledek. Můžete vidět, že nejnovější verze Photoshopu má některé zajímavé funkce pro návrh webového rozložení. Styly znaků a styly odstavců jsou významným zlepšením pro všechny webové designéry.

• Demo
• Stáhněte si zdroj