v tomto tutoriálu pro webový design Photoshopu navrhneme rozbíjení, čisté a profesionální rozvržení webových stránek ve Photoshopu. Rozložení, které děláme v tomto tutoriálu, lze použít jako osobní nebo firemní design webových stránek. Tento design je velmi uživatelsky přívětivý, takže by měl být skvělý pro pověst vašeho webu.
aktualizace: Toto je první část dvoudílné série, která vás naučí, jak vytvořit rozvržení ve Photoshopu, a poté, jak jej převést na webový design HTML kompatibilní se standardy (X).
série „čistý a profesionální webdesign“
- Část 1: Vytvořte čistý a profesionální webdesign ve Photoshopu
- Část 2: kódování čistého a profesionálního webdesignu
konečný náhled
podívejte se na rozvržení, které budeme vytvářet v tomto tutoriálu. Můžete vidět konečný náhled obrázku níže nebo kliknutím sem zobrazíte verzi v plné velikosti. 
připravte dokument Photoshopu
1 Vytvořte nový dokument ve Photoshopu (Ctrl / Cmd + N) pomocí nastavení z následujícího obrázku.
nastavte jednotky a pravítka nastavení
2 Ujistěte se, že pracujete v jednotkách pixelů, což je standardní pevná jednotka pro web design.
z dialogového okna Předvolby nastavte následující nastavení pro pravítka (Ctrl/Cmd + K); klikněte na jednotky & pravítka a ujistěte se, že máte vše nastaveno, jak je znázorněno na obrázku níže. 
přidejte vodítka pro označení oblasti obsahu
3 aktivujte pravítka Photoshopu z pohledu > pravítka.
přepněte viditelnost pravítek stisknutím klávesy „Ctrl / Cmd + R“.
také otevřete panel Info z okna > Info (klávesová zkratka: F8).
informační panel poskytuje užitečné informace v závislosti na vybraném nástroji.
stisknutím tlačítka “ M “ vyberte nástroj obdélníkový výběr a vytvořte z levého rohu plátna rámeček široký 120px. Velikost můžete upravit tak, že se při výběru podíváte do informačního panelu.
Nyní klikněte na levé pravítko a přetáhněte průvodce vpravo od výběru markýzy, jak je znázorněno na obrázku níže. 
4 přesuňte tento výběr na pravý okraj plátna. Na levé straně výběru přiřaďte další průvodce.
vaše plátno by nyní mělo vypadat takto: 
vytvoření loga
5 Nyní vytvoříme logo pro naše webové stránky.
logo bude velmi jednoduché a bude mít efekt barevného gradientu. Vytvořte novou skupinu (vrstva > Nová > skupina) a pojmenujte ji „logo“.
6 vyberte nástroj Horizontální typ (T) a velkými písmeny zadejte „SMASHING“ (nebo název vašeho webu).
7 Poté v panelu znaků nastavte písmo na Arial, styl na tučné a velikost na 42pt. Nastavte také možnost Anti-aliasing method na Sharp a použijte barvu #101112.
tyto možnosti můžete také nastavit na panelu možností, když je nástroj typu aktivním nástrojem. 
8 poklepáním otevřete dialogové okno Styl vrstvy. Vyberte překrytí přechodu, klikněte na Editor přechodu a použijte nastavení, jak je uvedeno níže.
9 vložte vrstvu typu „SMASHING“ ve vzdálenosti 35px shora a 0px z levého vodítka. Můžete to udělat přesně pomocí nástroje Přesunout (V) a kláves se šipkami. Duplikovat tento typ vrstvy (vrstva > Duplikovat vrstvu).
přesuňte duplikovanou vrstvu hned vedle slova“ SMASHING „a upravte text na „Dzine“. Opakujte kroky 6, 7, 8, ale použijte různé barvy přechodu (levá barva stop: #b27625, pravá barva stop: #e5ad27) pro slovo „Dzine“.
10 Vyberte nástroj Horizontální typ (T)a pod logo přidejte řádek značky s následujícími nastaveními. 
11 konečné logo by mělo vypadat jako obrázek níže.
Chcete-li aktivovat / deaktivovat vodítka, přejděte na Zobrazit > Zobrazit > mřížku nebo použijte zkratku Ctrl / Cmd + ; 
vytvoření navigační lišty
12 vytvoření nové skupiny a pojmenování „navigace“, měla by být nad skupinou“ logo“. Přetáhněte vodítko z horního pravítka, 150px pod horní okraj plátna. Vyberte nástroj Obdélník (U) a nakreslete vodorovnou čáru výšky 4px s barvou #e3ab27 přes plátno.
13 přidejte navigační odkazy na 12px-vysoké z této vodorovné čáry a 20px napravo od levého vodítka.
vyberte nástroj Zaoblený obdélník (U) a nakreslete rámeček o velikosti 72px x 35px. Přesuňte tuto vrstvu pod textové odkazy a pojmenujte vrstvu „hover“.
vyrovnejte spodní zaoblené rohy pomocí nástroje převést bod. Posuňte strany nerovných okrajů níže s okrajem 8px, aby se okraje rovnaly ostatním vnitřním okrajům dole.
poklepáním na vrstvu „hover“ otevřete dialogové okno Styl vrstvy a přidejte barvy přechodu (levý barevný stop: #e5ad27, pravý barevný stop: #b27625). Vyberte nástroj Horizontální typ (T), vyberte text, „domů“ a změňte barvu na #ffffff (bílá). 
vytvoření sekce „zavolejte nám“
14 dále vytvoříme sekci „zavolejte nám“ v pravém horním rohu našeho návrhu (přesně opačná strana loga).
Stáhněte si tuto ikonu telefonu a umístěte ji do pravého průvodce. Pojmenujte tuto vrstvu „ikona telefonu“. Vyberte nástroj Horizontální typ (T).
přidejte telefonní číslo na levé straně ikony telefonu pomocí písma Arial, s velikostí nastavenou na 20pt a barvou #292929.
přidejte nějaký související text pod telefonní číslo pomocí písma Arial, nastaveného na tučné, s velikostí 11pt a barvou #595959. 
vytvoření záhlaví
15 Nyní se chystáme vytvořit sekci záhlaví. Vytvořte novou skupinu a pojmenujte ji „záhlaví“.
16 vyberte nástroj Obdélník (U)a vytvořte tvar obdélníku o velikosti 1200px o 440px.
umístěte tento obdélník ve vzdálenosti 1px pod navigační lištu a pojmenujte tuto vrstvu „hlavička bg“. Poklepejte na vrstvu „hlavička bg“, vyberte styl vrstvy překrytí přechodu a tyto dvě barvy v editoru přechodu (levý barevný stop: #2e2226, pravý barevný stop: #7a7556).
viz obrázek níže pro pozici obdélníku a barvy detail. 
17 vytvořte další obdélník z nástroje obdélník (U) o velikosti 960px x 360px.
umístěte tento obdélník ve vzdálenosti 40px od horní části vrstvy „hlavička bg“ a 0px od levého vodítka. Pojmenujte tuto vrstvu „kontejner záhlaví“. Náhled níže, co jsme dosud s designem dělali.
vytvoření sekce „nejlepší projekt“
18 dále vytvoříme sekci doporučený projekt. Vytvořte novou skupinu uvnitř skupiny záhlaví a pojmenujte ji „fp“. Vyberte nástroj Obdélník (U) a vytvořte obdélník o velikosti 630px o 340px ve vzdálenosti 10px od horní a levé části kontejneru záhlaví.
dejte této vrstvě barvu # 000000 a pojmenujte ji „FP container“. 
19 otevřete obrázek ve Photoshopu a umístěte jej jako svůj doporučený projekt. Přejděte na položku > vše (Ctrl/Cmd + A) a poté upravte > kopírovat (Ctrl / Cmd + C).
vraťte se k našemu webdesignu.
vytvořte novou vrstvu nad vrstvou“ FP container “ a přejděte na Upravit > vložit (Ctrl / Cmd + V ) pro vložení do vybraného obrázku projektu. Přejmenujte tuto vrstvu na „obrázek fp“. Klepněte pravým tlačítkem myši na vrstvu „obrázek fp“ a vyberte vytvořit ořezovou masku.
nyní je obraz viditelný pouze uvnitř obdélníku („FP kontejner“).
proveďte úpravy tak, aby byl váš doporučený obrázek projektu podobný obrázku uvedenému níže. 
20 přejděte na Upravit > transformovat > měřítko (Ctrl / Cmd + T). Na panelu možností klikněte do pole rotace a zadejte -4 a dvakrát stiskněte klávesu enter pro nastavení úhlu.
zůstaňte na stejné vrstvě („fp image“) a zvolte světelnost jako režim prolnutí této vrstvy. 
21 dále vytvoříme Nadpis a popisný pruh pro vybraný obrázek projektu. Vyberte nástroj Obdélník (U) a vytvořte tvar obdélníku o velikosti 630px o 90px pomocí barvy #161718.
změňte krytí této vrstvy na 90% a pojmenujte ji „title bg“. Umístěte tento obdélník, jak je znázorněno na obrázku níže. 
22 vytvořte další obdélník o velikosti 630px o 1px pomocí barvy #9c9c9c a pojmenujte jej „vodorovná čára názvu“.
umístěte tento obdélník na horní okraj obsahu vrstvy“ title bg“.
23 přidejte název a popis do obdélníku, který jsme vytvořili v kroku 21, pomocí následujícího nastavení pro název a popis.
pro název:
- písmo: Arial, barva: #ffffff, velikost: 25pt a anti-aliasing metoda volba: Sharp
pro popis:
- písmo: Arial, barva: #a4a4a4, velikost: 12pt a možnost metody vyhlazování: Žádné
vytvoření sekce „Rychlá nabídka“
24 vytvořte další skupinu uvnitř skupiny záhlaví a pojmenujte ji „Rychlá nabídka“. Vyberte nástroj Obdélník (U) a vytvořte obdélník o velikosti 300px o 340px. Umístěte tento obdélník ve vzdálenosti 10px napravo od doporučené sekce projektu a pojmenujte jej „kontejner qq“.
25 zkopírujeme Styl vrstvy z jiné vrstvy, kterou jsme vytvořili v předchozím kroku.
přejděte do skupiny „navigace“, Klepněte pravým tlačítkem myši na vrstvu“ hover“, vyberte Kopírovat Styl vrstvy, vraťte se do vrstvy“ QQ container“, klepněte pravým tlačítkem myši a vyberte Vložit Styl vrstvy. Nyní máme stejný styl vrstvy vrstvy“ hover „pro náš kontejner „qq“. 
26 vyberte nástroj Horizontální typ (T).
napište „Quick Quote“ uvnitř „QQ container“ ve vzdálenosti 20px od horního a levého okraje obsahujícího boxu. Nastavte rodinu písma na Trebuchet MS (nebo web-safe písmo podle vašich preferencí) s thecolor of white (#ffffff) a anti-aliasing metoda volba nastavena na Sharp. Použijeme nástroj Zaoblený obdélník (U) k vytvoření tří polí formuláře.
vyberte nástroj Zaoblený obdélník (U) a nastavte poloměr na 3px. Poté vytvořte dva zaoblené obdélníky o velikosti 260px x 35px pomocí barvy bílé (#ffffff). Poté pojmenujte vrstvy tvaru jako „field1“ a „field2“.
vytvořte třetí Zaoblený obdélník o velikosti 260px o 75px pomocí bílé barvy (#ffffff) a pojmenujte jej „field3“. Vyberte nástroj Horizontální typ (T) a vytvořte štítky pro každé pole formuláře. 
27 vyberte nástroj Zaoblený obdélník (U) a vytvořte pole 80px o 35px a pojmenujte jej „odeslat btn“.
28 poklepáním na vrstvu otevřete dialogové okno styly vrstev a zaškrtněte políčko překrytí přechodu zleva.
klikněte na Editor přechodu a změňte barvy přechodu, jak je uvedeno níže. 
29 vyberte nástroj Horizontální typ (T) a zadejte „odeslat“ pomocí písma Arial, styl tučně a velikost na 13pt. Vyberte obě vrstvy v panelu Vrstvy („odeslat btn“ a „odeslat text“).
30 vyberte nástroj Přesunout (V)na panelu Nástroje a klikněte na zarovnat svislé středy a zarovnat vodorovné středy na panelu možností.
(Alternativně můžete získat stejný výsledek přechodem na vrstvu > zarovnat > svislé středy a vrstvu > zarovnat > vodorovné středy). 
vytvoření hlavní oblasti obsahu
31 vytvořte novou skupinu a pojmenujte ji „obsah“. Vyberte nástroj Obdélník (U).
vytvořte obdélník 300px o 175px a pojmenujte jej „c01“. Umístěte tuto vrstvu 30px pod záhlaví a 0px z levého vodítka. Poklepejte na vrstvu a použijte nastavení z následujícího obrázku.
32 do tohoto pole nyní přidáme obsah. Vyberte nástroj Horizontální typ (T) a přidejte text „o SmashingDzine“. Pomocí nástroje Horizontal Type Tool (T) vyberte slovo „About“ a poté změňte jeho barvu na #b47825.
poté proveďte výběr slova „rozbíjení“ a poté změňte barvu na #2f2f2f. pod nadpis přidejte malý popis a text odkazu. Pro název, popis a text odkazu byly použity následující možnosti.
(tyto možnosti můžete upravit podle potřeby). 
pro název:
- písmo: Trebuchet MS, styl: Normální, velikost: 24pt, metoda vyhlazování: ostrý
pro popis:
- písmo: Arial, styl: Normální, velikost: 12pt, metoda vyhlazování: žádná, barva: #767676
pro text odkazu:
- písmo: Arial, styl: tučné, velikost: 13pt, anti-aliasing metoda: Žádný, barva: #252525, podtržení
33 nyní přidáme vedle popisu čtvercové pole. Vyberte nástroj Obdélník (U) a barva #ffffff, podržte klávesu Shift pro udržení proporcí a vytvořte čtverec o velikosti 88px o 88px. Přesuňte tento čtverec ve vzdálenosti 10px zleva od obdélníku („c01“).
Pojmenujte tuto vrstvu „border“. Poklepáním na vrstvu otevřete dialogové okno Styl vrstvy a přidejte styl vrstvy tahu s následujícím nastavením: 
34 vytvořte další krabici o velikosti 82px x 82px a umístěte ji do středu „hraniční“ vrstvy. Pojmenujte tuto vrstvu “ box “ a změňte barvu tohoto čtverce na #d5d5d5.
Vyberte všechny vrstvy v této skupině (skupina“ obsah“), přejděte na vrstvu > Nová skupina > z vrstev (Ctrl / Cmd + G) a přejmenujte tuto novou skupinu „o“. 
Poznámka: Vnitřní šedá čtvercová krabička je držákem místa pro obrázek a může být nahrazena libovolným obrázkem podle vašeho výběru.
35 duplikujte skupinu „o“ (klikněte pravým tlačítkem myši na skupinu a vyberte duplikovat skupinu) a pojmenujte ji „služby“. Klepněte pravým tlačítkem myši na skupinu „služby“a znovu vyberte duplikovat skupinu a pojmenujte ji „portfolio“.
máme nyní tři skupiny („O nás“, „služby“ a „portfolio“). Přesuňte poslední skupinu („portfolio“) do pravého průvodce, jak je uvedeno níže. 
36 Vyberte všechny tři skupiny v panelu Vrstvy a poté přejděte na vrstvu > distribuovat > vodorovné středy, abyste je rovnoměrně rozložili.
kliknutím sem zobrazíte obrázek v plné velikosti následujícího obrázku. 
37 změňte názvy pro skupinu“ služby „(uprostřed) a skupinu“ portfolio “ (vpravo), jak je uvedeno níže. (Tyto tituly můžete změnit podle svého požadavku.) 
vytvoření zápatí
38 vytvořte novou skupinu a pojmenujte ji „zápatí“.
vyberte nástroj Obdélník (U) a vytvořte obdélník o velikosti 1200px x 100px ve spodní části našeho návrhu. Pojmenujte tuto vrstvu „zápatí bg“. Použijte stejný styl překrytí přechodu jako vrstva „header bg“ kliknutím pravým tlačítkem myši na vrstvu „header bg“ a výběrem kopírovat styl vrstvy.
vraťte se do skupiny zápatí, klepněte pravým tlačítkem myši na vrstvu“ zápatí bg “ a vyberte Vložit Styl vrstvy. 
39vyberte nástroj Horizontální typ (T) a přidejte text autorských práv a text zápatí odkazy vlevo pomocí písma Arial, velikost 12pt a šedá barva (#dddddd). 
40 napravo přidáme sekci předplatného e-mailu.
vytvořte novou skupinu uvnitř skupiny „zápatí“ a pojmenujte ji „přihlásit se“. Vyberte nástroj Zaoblený obdélník (U) a vytvořte obdélník 85px o 35px. Pojmenujte tuto vrstvu „subscribe btn“.
41 opakujte krok 26 pro přidání polí formuláře a štítků.
42 vyberte nástroj Horizontální typ (T)a zadejte „Přihlásit se“ pomocí písma Arial, styl nastaven na tučné písmo a velikost na 13pt.
vyberte obě vrstvy („subscribe btn“ a „Subscribe text“).
43 opakujte krok 28 pro vytvoření tlačítka Přihlásit se k odběru.
44 vyberte nástroj Zaoblený obdélník (U) a nastavte poloměr na 3px. Vytvořte Zaoblený obdélník o velikosti 210px o 35px pomocí bílé barvy (#ffffff) a pojmenujte tuto vrstvu tvaru jako „pole e-mailu“. Přidejte textový řádek nad „pole e-mailu“.
konečný výsledek
OK, to je vše a jsme hotovi. Zde je konečný výsledek.
kliknutím na obrázek níže zobrazíte rozložení v plné velikosti. Děkujeme za sledování spolu s mým tutoriálem. Doufám, že jste si všichni užili a naučili se něco nového z tohoto tutoriálu.
laskavě zanechte své komentáře níže a podělte se o své myšlenky a názory, rád bych je slyšel. Tento výukový program můžete také sdílet se svými přáteli, pokud si myslíte, že by jim to mohlo být užitečné!
Stáhněte si zdrojový soubor
soubor Photoshopu (PSD) tohoto tutoriálu si můžete stáhnout z níže uvedeného odkazu jako archiv ZIP.
- clean-professional-weblayout (ZIP, 2.4 MB)
shrnutí
pokud se rozhodnete použít tento návrh, nezapomeňte optimalizovat obrázky, abyste zkrátili dobu načítání. Toto rozhodnutí by mělo být skvělé pro malé weby, jako je například golfové hřiště, protože je to jednoduché, snadno použitelné a uživatelsky přívětivé.
související obsah
- jak vytvořit čistý design blogu pomocí Photoshopu
- kódování čistého webu 2.0 Style Web Design z Photoshopu
- Vytvořte úhledný a minimalistický Web Layout ve Photoshopu
o autorovi
Waheed Akhtar je nezávislý webový designér z Dubaje ve Spojených arabských emirátech. Je zakladatelem a editorem Boost Inspiration, kde představuje různé kreativní zdroje digitálního umění, grafický Design, ilustrace, fotografie a typografie pro inspiraci. Můžete se k němu dostat přes Twitter nebo Facebook.