Domov › Telefon › Kreslíme rozvržení. Maketa během procesu vývoje produktu. Nevýhody grafického editoru

Kreslíme rozvržení. Maketa během procesu vývoje produktu. Nevýhody grafického editoru

Niranth; Překlad: Slutskaya Světlana

Vytváření atraktivních a funkčních webů je nedílnou součástí života webdesignéra. V této lekci Photoshop vytvoříme profesionální vzhled webu od začátku. Během lekce se naučíte pár užitečných triků při tvorbě designu.

Zdroje lekce:

Sada ikon (wefunction.com)
Alternativní sada ikon
Ikona Twitteru (iconeden.com)
Písmo Bebas (dafont.com)

Krok 1. Maketa

Než se pustíme do tvorby layoutu webu, musíme si vytvořit náčrt budoucího layoutu, který ukáže jeho funkčnost a přibližný vzhled.

Krok 2. Vytvořte dokument.

Vytvoříme vám layout webu o šířce 960 pixelů. Chcete-li to provést, vytvořte nový dokument o velikosti 1200 x 1500 pixelů. Rozlišení 72 pixelů.

Vzhledem k tomu, že rozložení webu bude široké 960 pixelů, musíme tuto oblast definovat přidáním vodítek. Vyberte celý dokument ( Ctrl+A).

Přejděte do nabídky Vybrat - Transformovat výběr(Vybrat > Transformovat výběr). Na panelu vlastností v horní části obrazovky nastavte šířku na 960 pixelů. Toto bude pracovní oblast rozvržení.

Nastavte vodítka přesně podél hranic výběru.

Musíme vytvořit okraj mezi okraji pracovní oblasti rozvržení a oblastí obsahu, kterou přidáme později. S aktivně vybraným dokumentem přejděte znovu do nabídky Výběr - Výběr transformace(Vybrat > Transformovat výběr). Zmenšete šířku výběru na 920 pixelů. To znamená, že na každé straně rozvržení bude 20 pixelů výplně, celkem tedy 40 pixelů.

Nastavte vodítka podél nového výběru:

Krok 3. Vytvořte záhlaví webu.

Pojďme k vytvoření záhlaví webu. V horní části rozvržení vytvořte výběr o výšce 465 pixelů.

Vyplňte výběr šedou barvou a poté použijte styly vrstev k použití barev a přechodů.

Přidejte do záhlaví přechodovou výplň pomocí stylu vrstvy Překrytí přechodem(Překrytí přechodem). Vytvořte přechod dvou barev.

Nyní bude záhlaví vypadat takto:

Nyní musíte do záhlaví přidat osvětlení. Vytvořte novou vrstvu ( Ctrl + Alt + Shift + N) a vyberte měkký štětec o velikosti 600 pixelů. Vyberte barvu #19535a a pomocí štětce klikněte jednou na horní střed záhlaví.

V záhlaví vytvořte výběr o velikosti 110 pixelů.

Stiskněte klávesu Vymazat pro smazání vybrané části.

Překlopte vrstvu zvýraznění svisle (Ctrl+T).

Musíte se ujistit, že světlý bod na uzávěru je přesně ve středu. Chcete-li to provést, aktivujte vrstvy se záhlavím a zvýrazněním a vyberte nástroj Stěhování(Nástroj pro přesun) (V). Na panelu vlastností v horní části obrazovky klikněte na tlačítko Zarovnat vodorovné středy.

Vytvořte novou vrstvu (Shift + Ctrl + N) a nástrojem kreslit Tužka(Nástroj tužka) bod o velikosti 1 pixel. Pro kreslení použijte barvu #01bfd2.

Vyhladíme okraje této vrstvy pomocí masky přechodu. Vyberte nástroj Gradient(Nástroj Přechod) a vytvořte přechod, jak je znázorněno níže:

Naneste novou vrstvu s maskou a vyplňte ji přechodem, který jste právě vytvořili.

Krok 4. Vytvořte vzor

Nyní si vytvoříme jednoduchý vzor, který přidáme do záhlaví. Nástroj Tužka(Nástroj tužka) o velikosti 2 pixely nakreslete dva body, jak je znázorněno na obrázku. Vypněte na chvíli viditelnost vrstvy pozadí (klikněte na ikonu oka vedle vrstvy pozadí) a vytvořte vzor (Úpravy – Definujte vzor)(Upravit > Definovat vzor):

Vytvořte novou vrstvu (Shift + Ctrl + N) a umístěte jej pod vrstvu zvýraznění. Vyberte oblast, na kterou chcete použít vzor, a otevřete okno Vyplnit(Vyplnit) (Shift + F5). Klepněte na tlačítko OK.

Po přidání textury vypadá záhlaví takto:

Udělejte plynulý přechod ze vzoru do záhlaví: přidejte masku do vrstvy vzoru a pomocí měkkého bílého štětce (#ffffff) s krycí schopností 60 % masku přetřete.

Výsledek:

Krok 5. Přidejte logo

Pojďme k přidání loga. Vyberte měkký štětec s barvou #19535a a namalujte skvrnu.

Napište text:

Přidejte styl vrstvy do vrstvy loga Stín(Vržený stín).

Krok 6: Navigace

Přidejte navigační text.

Nakreslete navigační tlačítko pomocí nástroje Obdélníkový výběr. Vyplňte výběr libovolnou barvou a snižte parametr Výplň na nulu.

Přidejte styl do vrstvy tlačítka Překrytí přechodem(Překrytí přechodem).

Krok 7: Posuvník obsahu

Vytvořte výběr o velikosti 580 x 295 pixelů.

Vyplňte výběr libovolným odstínem šedé.

Umístěte obrázek. Ořízněte ji vrstvou, kterou jste vytvořili dříve.

Nyní přidáme efekt do posuvníku. Vytvořte novou vrstvu (Shift + Ctrl + N), vyberte Štětec(Brush Tool) o průměru 400 pixelů. Otevřete paletu Brush (F5) a nastavte parametry zobrazené na snímku obrazovky:

Vyberte černou barvu (#000000) a nakreslete bod:

Použijte filtr ke změkčení okrajů Gaussovské rozostření(Gaussovské rozostření).

Vyberte spodní polovinu stínu a odstraňte (Vymazat).

Umístěte vrstvu stínu nad posuvník:

Stiskněte vrstvu stínu za střední rukojeť (Ctrl + T) a poté znovu vycentrujte vrstvu stínu: vyberte obě vrstvy a klikněte na tlačítko na panelu vlastností Zarovnání středů vodorovně(Zarovnat vodorovné středy).

Duplikujte vrstvu stínu (Ctrl + J) a umístěte duplikát na spodní okraj posuvníku.

Pomocí nástroje nakreslete tlačítka na posuvníku Obdélníkový markýz(Obdélníkový Marqee Tool ) . Vyplňte tlačítka černou barvou (#000000).

Snižte krytí vrstvy tlačítka na 50 %.

Přidejte k tlačítkům posuvníku tvar šipky:

Ve spodní části posuvníku nakreslete pruh a vyplňte jej černou barvou (#000000).

Snižte neprůhlednost proužkové vrstvy na 50 %.

Přidejte popis svého projektu na tuto lištu:

Krok 8. Přidejte text pozdravu

Napište text pozdravu:

Krok 9. Dokončení záhlaví webu

Téměř jsme dokončili práci na záhlaví webu. Pomocí nástroje přidejte jemný stín Štětec(Nástroj štětec).

Mezi stínem a nadpisem ponechte mezeru 1 pixel.

Vytvořte novou vrstvu pod vrstvou záhlaví (Shift + Ctrl + N) a aplikujte na něj přechod.

Krok 10. Přidejte tlačítka pro posuvník

Nakreslete tlačítka pro změnu snímku.

Přidejte styl vrstvy na jedno tlačítko Vnitřní stín(Vnitřní stín) a poté požadovanou vrstvu duplikujte (Ctrl + J).

Krok 12. Vytvořte oddělovač obsahu

Použijte nástroj tužka a nakreslete světle šedou (#aaaaaa) čáru o šířce 1 pixel.

Přidejte masku k vrstvě čar a použijte přechod k vytvoření hladkého přechodu na okrajích.

Krok 13. Přidejte obsah

Je čas přidat oblasti pro obsah. Oblast obsahu bude rozdělena do 3 stejně vzdálených sloupců. Mezi každým sloupcem bude odsazení 25 pixelů.

Vytváření atraktivních a funkčních webů je nedílnou součástí života webdesignéra. V tomto tutoriálu vytvoříme profesionální vzhled webu od začátku. Během lekce se naučíte pár užitečných triků při tvorbě designu.

Zdroje lekce:

Sada ikon (wefunction.com)
Alternativní sada ikon
Ikona Twitteru (iconeden.com)
Písmo Bebas (dafont.com)

Krok 1. Maketa

Než se pustíme do tvorby layoutu webu, musíme si vytvořit náčrt budoucího layoutu, který ukáže jeho funkčnost a přibližný vzhled.

Krok 2. Vytvořte dokument.

Vytvoříme vám layout webu o šířce 960 pixelů. Chcete-li to provést, vytvořte nový dokument o velikosti 1200 x 1500 pixelů. Rozlišení 72 pixelů.

Vzhledem k tomu, že rozložení webu bude široké 960 pixelů, musíme tuto oblast definovat přidáním vodítek. Vyberte celý dokument ( Ctrl+A).

Nastavte vodítka přesně podél hranic výběru.

Nastavte vodítka podél nového výběru:

Krok 3. Vytvořte záhlaví webu.

Pojďme k vytvoření záhlaví webu. V horní části rozvržení vytvořte výběr o výšce 465 pixelů.

Vyplňte výběr šedou barvou a poté použijte styly vrstev k použití barev a přechodů.

Přidejte do záhlaví přechodovou výplň pomocí stylu vrstvy Překrytí přechodem(Překrytí přechodem). Vytvořte přechod dvou barev.

Nyní bude záhlaví vypadat takto:

V záhlaví vytvořte výběr o velikosti 110 pixelů.

Stiskněte klávesu Vymazat pro smazání vybrané části.

Zvýrazněte vrstvu vertikálně (Ctrl+T) .

Vytvořte novou vrstvu (Shift + Ctrl + N) a nástrojem kreslit Tužka(Nástroj tužka) bod o velikosti 1 pixel. Pro kreslení použijte barvu #01bfd2.

Vyhladíme okraje této vrstvy pomocí masky přechodu. Vyberte nástroj Gradient(Nástroj Přechod) a vytvořte přechod, jak je znázorněno níže:

Naneste novou vrstvu s maskou a vyplňte ji přechodem, který jste právě vytvořili.

Krok 4. Vytvořte vzor

Vytvořte novou vrstvu (Shift +Ctrl +N) a umístěte jej pod vrstvu zvýraznění. Vyberte oblast, na kterou chcete použít vzor, a otevřete okno Vyplnit(Vyplnit) (Shift + F5). Klepněte na tlačítko OK.

Po přidání textury vypadá záhlaví takto:

Udělejte plynulý přechod ze vzoru do záhlaví: přidejte masku do vrstvy vzoru a pomocí měkkého bílého štětce (#ffffff) s krycí schopností 60 % masku přetřete.

Výsledek:

Krok 5. Přidejte logo

Pojďme k přidání loga. Vyberte měkký štětec s barvou #19535a a namalujte skvrnu.

Napište text:

Přidejte styl vrstvy do vrstvy loga Stín(Vržený stín).

Krok 6: Navigace

Přidejte navigační text.

Nakreslete navigační tlačítko pomocí nástroje Obdélníkový výběr. Vyplňte výběr libovolnou barvou a snižte parametr Výplň na nulu.

Přidejte styl do vrstvy tlačítka Překrytí přechodem(Překrytí přechodem).

Krok 7: Posuvník obsahu

Vytvořte výběr o velikosti 580 x 295 pixelů.

Vyplňte výběr libovolným odstínem šedé.

Umístěte obrázek. Ořízněte ji vrstvou, kterou jste vytvořili dříve.

Vyberte černou barvu (#000000) a nakreslete bod:

Použijte filtr ke změkčení okrajů Gaussovské rozostření(Gaussovské rozostření).

Vyberte spodní polovinu stínu a odstraňte (Vymazat).

Umístěte vrstvu stínu nad posuvník:

Duplikujte vrstvu stínu (Ctrl +J) a umístěte duplikát na spodní okraj posuvníku.

Pomocí nástroje nakreslete tlačítka na posuvníku Obdélníkový markýz(Obdélníkový Marqee Tool ) . Vyplňte tlačítka černou barvou (#000000).

Snižte krytí vrstvy tlačítka na 50 %.

Přidejte k tlačítkům posuvníku tvar šipky:

Ve spodní části posuvníku nakreslete pruh a vyplňte jej černou barvou (#000000).

Snižte neprůhlednost proužkové vrstvy na 50 %.

Přidejte popis svého projektu na tuto lištu:

Krok 8. Přidejte text pozdravu

Napište text pozdravu:

Krok 9. Dokončení záhlaví webu

Téměř jsme dokončili práci na záhlaví webu. Pomocí nástroje přidejte jemný stín Štětec(Nástroj štětec).

Mezi stínem a nadpisem ponechte mezeru 1 pixel.

Vytvořte novou vrstvu pod vrstvou záhlaví (Shift +Ctrl +N) a aplikujte na něj přechod.

Krok 10. Přidejte tlačítka pro posuvník

Nakreslete tlačítka pro změnu snímku.

Přidejte styl vrstvy na jedno tlačítko Vnitřní stín(Vnitřní stín) a poté požadovanou vrstvu duplikujte (Ctrl + J).

Krok 12. Vytvořte oddělovač obsahu

Použijte nástroj tužka a nakreslete světle šedou (#aaaaaa) čáru o šířce 1 pixel.

Přidejte masku k vrstvě čar a použijte přechod k vytvoření hladkého přechodu na okrajích.

Zdroje lekce:

Sada ikon (wefunction.com)
Alternativní sada ikon
Ikona Twitteru (iconeden.com)
Písmo Bebas (dafont.com)

Krok 1. Maketa

Než se pustíme do tvorby layoutu webu, musíme si vytvořit náčrt budoucího layoutu, který ukáže jeho funkčnost a přibližný vzhled.

Krok 2. Vytvořte dokument.

Vytvoříme vám layout webu o šířce 960 pixelů. Chcete-li to provést, vytvořte nový dokument o velikosti 1200 x 1500 pixelů. Rozlišení 72 pixelů.

Vzhledem k tomu, že rozložení webu bude široké 960 pixelů, musíme tuto oblast definovat přidáním vodítek. Vyberte celý dokument ( Ctrl+A).

Nastavte vodítka přesně podél hranic výběru.

Nastavte vodítka podél nového výběru:

Krok 3. Vytvořte záhlaví webu.

Pojďme k vytvoření záhlaví webu. V horní části rozvržení vytvořte výběr o výšce 465 pixelů.

Vyplňte výběr šedou barvou a poté použijte styly vrstev k použití barev a přechodů.

Přidejte do záhlaví přechodovou výplň pomocí stylu vrstvy Překrytí přechodem(Překrytí přechodem). Vytvořte přechod dvou barev.

Nyní bude záhlaví vypadat takto:

V záhlaví vytvořte výběr o velikosti 110 pixelů.

Stiskněte klávesu Vymazat pro smazání vybrané části.

Zvýrazněte vrstvu vertikálně (Ctrl+T) .

Vytvořte novou vrstvu (Shift + Ctrl + N) a nástrojem kreslit Tužka(Nástroj tužka) bod o velikosti 1 pixel. Pro kreslení použijte barvu #01bfd2.

Vyhladíme okraje této vrstvy pomocí masky přechodu. Vyberte nástroj Gradient(Nástroj Přechod) a vytvořte přechod, jak je znázorněno níže:

Naneste novou vrstvu s maskou a vyplňte ji přechodem, který jste právě vytvořili.

Krok 4. Vytvořte vzor

Po přidání textury vypadá záhlaví takto:

Udělejte plynulý přechod ze vzoru do záhlaví: přidejte masku do vrstvy vzoru a pomocí měkkého bílého štětce (#ffffff) s krycí schopností 60 % masku přetřete.

Výsledek:

Krok 5. Přidejte logo

Pojďme k přidání loga. Vyberte měkký štětec s barvou #19535a a namalujte skvrnu.

Napište text:

Přidejte styl vrstvy do vrstvy loga Stín(Vržený stín).

Krok 6: Navigace

Přidejte navigační text.

Nakreslete navigační tlačítko pomocí nástroje Obdélníkový výběr. Vyplňte výběr libovolnou barvou a snižte parametr Výplň na nulu.

Přidejte styl do vrstvy tlačítka Překrytí přechodem(Překrytí přechodem).

Krok 7: Posuvník obsahu

Vytvořte výběr o velikosti 580 x 295 pixelů.

Vyplňte výběr libovolným odstínem šedé.

Umístěte obrázek. Ořízněte ji vrstvou, kterou jste vytvořili dříve.

Vyberte černou barvu (#000000) a nakreslete bod:

Použijte filtr ke změkčení okrajů Gaussovské rozostření(Gaussovské rozostření).

Vyberte spodní polovinu stínu a odstraňte (Vymazat).

Umístěte vrstvu stínu nad posuvník:

Duplikujte vrstvu stínu (Ctrl +J) a umístěte duplikát na spodní okraj posuvníku.

Pomocí nástroje nakreslete tlačítka na posuvníku Obdélníkový markýz(Obdélníkový Marqee Tool ) . Vyplňte tlačítka černou barvou (#000000).

Snižte krytí vrstvy tlačítka na 50 %.

Přidejte k tlačítkům posuvníku tvar šipky:

Ve spodní části posuvníku nakreslete pruh a vyplňte jej černou barvou (#000000).

Snižte neprůhlednost proužkové vrstvy na 50 %.

Přidejte popis svého projektu na tuto lištu:

Krok 8. Přidejte text pozdravu

Napište text pozdravu:

Krok 9. Dokončení záhlaví webu

Téměř jsme dokončili práci na záhlaví webu. Pomocí nástroje přidejte jemný stín Štětec(Nástroj štětec).

Mezi stínem a nadpisem ponechte mezeru 1 pixel.

Vytvořte novou vrstvu pod vrstvou záhlaví (Shift +Ctrl +N) a aplikujte na něj přechod.

Krok 10. Přidejte tlačítka pro posuvník

Nakreslete tlačítka pro změnu snímku.

Přidejte styl vrstvy na jedno tlačítko Vnitřní stín(Vnitřní stín) a poté požadovanou vrstvu duplikujte (Ctrl + J).

Krok 12. Vytvořte oddělovač obsahu

Použijte nástroj tužka a nakreslete světle šedou (#aaaaaa) čáru o šířce 1 pixel.

Přidejte masku k vrstvě čar a použijte přechod k vytvoření hladkého přechodu na okrajích.

Pokud si chcete vytvořit webovou stránku sami, zjistěte, jak vytvořit web ve Photoshopu. je grafický editor. Můžete v něm kreslit rozvržení a jejich jednotlivé prvky. Jedná se o poměrně dlouhý a složitý proces. Webdesignéři se léta učí navrhovat šablony a rozkládat internetové stránky na jejich základě. Jednoduché rozložení ale zvládne sestavit každý. Vše, co potřebujete, je základní znalost Photoshopu a představivosti.

Nakreslit jednoduchý design webových stránek ve Photoshopu zvládne i začátečník

Poprvé je nepravděpodobné, že budete schopni navrhnout stránku jako návrhářští mistři. Budete ale moci čerpat atraktivní a nenáročnou službu.

Vysvětlení některých pojmů.

CSS (Cascading Style Sheets) a HTML (HyperText Markup Language) jsou počítačové jazyky, které se používají k vytváření webových zdrojů. Pokud otevřete zdrojový kód jakékoli stránky na internetu, budou tam značky HTML.
Layout - uspořádání a instalace materiálů z layoutu, převedení do html šablony. Záleží na tom, jak jsou předměty uspořádány, zda vypadají krásně v celkové kompozici, zda je vhodné číst text a podobně.
Vrstvy jsou součástí rozvržení. Společně tvoří celkový obraz. Lze je však upravovat a přesouvat odděleně od sebe.
Tělo je tam, kde se nachází obsah. Kolem toho může být pozadí.
Rámeček – prvek stránky. Blok s nějakou informací, obrázkem, formulářem.

Pouze profesionál může vytvořit ohromující web od nuly. K tomu je potřeba rozumět webdesignu a znát HTML. Vzhledem k tomu, že hotové rozložení musí být stále správně rozvrženo.

Existují ale jednodušší způsoby. Existují online služby a programy, které automaticky převádějí .psd (formát souboru Photoshopu) do HTML a CSS. Stačí jen správně sestavit šablonu.

Chcete-li používat Photoshop, nemusíte být umělec nebo rozumět všem možnostem programu. Ale pokud jste jej spustili poprvé a nevíte, jak vložit text, nakreslit geometrický tvar, duplikovat vrstvu, změnit barvu nebo vybrat libovolnou oblast, měli byste začít něčím jednodušším. K vytvoření rozvržení ve Photoshopu potřebujete alespoň základní dovednosti v práci s nástrojem a porozumění základním funkcím (jak nakreslit čáru, nastavit vodítko, vybrat písmo atd.).

Užitečné budou také obecné informace o síťových službách. Stránky lze charakterizovat podle následujících kritérií:

Jednostránkový. Všechny prvky, obsah, veškerý obsah zdroje jsou na jednom místě. Na jedné stránce. Chcete-li zobrazit obsah služby, nemusíte sledovat odkazy ani otevírat nové karty. Kromě toho může být samotný web libovolně velký. Pojme jak malou reklamní brožuru, tak i obrovský román o 600 listech.
Vícestránkový. V souladu s tím obsahuje mnoho stránek. Mohou to být například „Domů“, „Fórum“, „Kniha hostů“, „Odpovědi na často kladené otázky“, „Kontakty“. Pro každý z nich musíte vytvořit rozložení. Budete také potřebovat navigaci a mapu webu: samostatnou sekci s odkazy na všechny části služby. Aby uživatel mohl rychle najít záložku, kterou potřebuje.
"Pryž". Mění velikost v závislosti na rozlišení obrazovky. Roztahuje se s oknem prohlížeče. Je potřeba si předem spočítat, jak bude web vypadat. Pokud je při šířce 1300 vše zobrazeno normálně, pak při 900 pixelech může část článku „překročit“ hranice rámce, obrázky se nezobrazí tak, jak by měly, a flash animace zavře vstupní formulář.
Opraveno. Tělo webu nemění velikost. Nejjednodušší a nejpraktičtější varianta. Aby stránka vypadala pevně a po roztažení okna nezůstalo na okrajích žádné „prázdné“ místo, můžete pozadí udělat gumou.

Rozložení

Nejprve se rozhodněte, jaký design chcete. Nestačí si to jednoduše „představit“ a následně navrhnout ve Photoshopu. Musí existovat jasná představa. Nakreslete šablonu na obyčejný papír. Není třeba překreslovat každý obrázek. Stačí diagram: několik obdélníků a kruhů, které konvenčně označují prvky webové stránky. Vymyslete, jak budou rámečky umístěny, kam nejlépe umístit logo, kam umístit informace pro návštěvníky.

Podívejte se na příklady stránek na internetu. Přemýšlejte o tom, které se vám líbí a proč. Je to pohodlné uspořádání rámů, pěkné barvy nebo zajímavý přístup k designu. Neměli byste kopírovat design někoho jiného. Stačí z toho čerpat „inspiraci“. Poté můžete zjistit, jak nakreslit web ve Photoshopu.

Vytvořte nový dokument (Soubor - Nový). Rozměry jsou vybrány pro malé monitory nebo nízké rozlišení: 1024x720 pixelů. Toto je šířka „informační“ části, nikoli celého výkresu. Pokud chcete stránku o velikosti 1100 pixelů, musíte vytvořit dokument o šířce 1300 pixelů. Délka ve skutečnosti není pevná – záleží na tom, kolik obsahu chcete na zdroj umístit. Toto jsou doporučení, nikoli pravidla. Pokud chcete, můžete vytvořit velké rozvržení.
Zapněte pravítka. Stiskněte Ctrl+R nebo přejděte na Zobrazit - Pravítka. Toto je měřítko. Objeví se mimo kresbu. Bez něj budete muset odhadovat velikosti a vzdálenosti „od oka“, což nebude mít na konečný výsledek příliš dobrý vliv. Tuto funkci můžete nakonfigurovat v menu Úpravy - Nastavení - Jednotky a pravítka. Tam je lepší změnit centimetry na pixely, abyste mohli pracovat s jedním parametrem a nepočítat, kolik bodů je v jednom palci.
Mřížka by měla být také aktivována. Zobrazit - Zobrazit - Mřížka nebo Ctrl+E (můžete také zakázat). Jedná se o jakousi obdobu kostkovaného notebooku. Photoshop zobrazí svislé a vodorovné čáry. V samotném výkresu se neobjeví. Jsou vidět pouze při úpravách. Tato funkce je potřebná k rovnoměrnému uspořádání prvků šablony. Někomu vyhovuje práce s mřížkou, jinému bez ní. Nejlepší je povolit, pokud vytváříte web poprvé.
Chcete-li jej nakonfigurovat, přejděte na Úpravy - Předvolby - Vodítka, Mřížka a Fragmenty. Tam si můžete vybrat velikost buněk a také barvu a typ čar (plné, tečkované, tečkované).

Nainstalujte vodítka. Mezi nimi bude hlavní zdroj obsahu - pevné tělo webu. A za nimi je gumové pozadí. Chcete-li to provést, klikněte na Zobrazit - Nový průvodce. V bloku „Orientace“ zaškrtněte políčko „Vertikální“. Do pole „Pozice“ napište, v jaké vzdálenosti bude objekt od levého okraje. Jako vodítko použijte stupnici pravítka.
Potřebujete dvě vodítka – vpravo a vlevo od těla stránky. Vzdálenost mezi nimi by měla být maximálně 1003 pixelů pro displeje s rozlišením 1024x720. Můžete zadat jinou šířku. Ale velké zdroje jsou nepohodlné pro zobrazení na malých monitorech.
Proč 1003 a ne 1024? Pokud je třeba web posunout („posunout“) dolů, bude mít prohlížeč svislý posuvník. Velikost tohoto posuvníku je přibližně 21 pixelů. Pokud jej ignorujete, zobrazí se vodorovný posuvník. A návštěvník zdroje bude muset posunout stránku doleva a doprava, aby viděl všechny informace.
Tělo by mělo být ve středu plátna.

Toto jsou přípravné fáze práce. Jak navrhnout rozvržení ve Photoshopu závisí na vaší fantazii a vkusu. Proto budou následovat pouze obecná doporučení technického charakteru.

Chcete-li začít, vaše rozvržení potřebuje pozadí. Můžete si ho vyrobit sami nebo stáhnout z internetu. Existuje mnoho zdrojů s texturami zdarma. Neumisťujte na své stránky obrázky chráněné autorským právem. Neměli byste používat světlé nebo kontrastní pozadí. Je lepší nepoužívat textury se spoustou malých výrazných detailů. Odvedou pozornost návštěvníka od těla stránky.
Pokud jednoduše otevřete výkres ve Photoshopu, objeví se na nové kartě a nebude přidán do rozvržení. Vyberte celé pozadí. K tomu potřebujete klávesovou zkratku Ctrl+A nebo nástroj Výběr (nachází se v panelu vlevo). Zkopírujte jej a vložte do šablony.
Tato možnost je také dostupná, když kliknete na Upravit - Vložit.

V seznamu vpravo dole se objeví nová vrstva. Kliknutím pravým tlačítkem na něj zobrazíte možné akce. V nabídce Možnosti vrstvy můžete změnit její název. „Možnosti prolnutí“ obsahuje základní nastavení obrazu. Můžete mu dát záři, ražbu, lesk, tah, přechod. Pokud vyberete možnost, změny se okamžitě projeví ve Photoshopu. Existuje sada hotových stylů. Takto vznikají originální designová řešení ze standardních textur. A nemusíte kreslit nic dalšího.
Na liště nabídek je tlačítko Filtry. Najdete tam různé imitace (pastel, vodové barvy, tužky), stylizace, textury, skici, melír, rozostření.
Můžete si vybrat obyčejné pozadí. Barva závisí na vašich osobních preferencích. Ale je lepší, aby to nebylo černé nebo jedovaté. Vhodné jsou postelové a jemné tóny nebo průhledné studené (například světle šedá, bledě modrá).
Po texturách můžete sestavit samotný web. Zde máte volnost pro kreativitu.
Chcete-li přidat tvar (segment, čtverec, ovál), klikněte na odpovídající tlačítko vpravo. Bude mít vzhled a název objektu, který je aktuálně vybrán pro kreslení. Například „Ellipse Tool“, „Polygon Tool“. Ve Photoshopu je počet tvarů omezen. Lze je však nalézt na internetu, stáhnout a nainstalovat prostřednictvím nabídky Úpravy - Správa sad. V poli „Typ“ uveďte, kterou kolekci objektů načítáte.
Tyto obrázky se v různých verzích programu nazývají odlišně. Buď tlačítko v podobě malého černého trojúhelníku (je vpravo), nebo ikona v podobě ozubeného kola nebo položka „Tvar rastrové tečky“ (je pod lištou nabídek). Objekty lze kombinovat, seskupovat a vytvářet kompozice.
Chcete-li vytvořit textový rámeček, klikněte na tlačítko, které vypadá jako velké písmeno "T". Poté vyberte místo, kde se mají postavy nacházet, klikněte tam a napište, co potřebujete.
Je lepší umístit každý prvek na samostatnou vrstvu. Díky tomu bude pohodlnější přesun a úpravy bez ovlivnění celého webu. Chcete-li přidat tento objekt, přejděte na Vrstvy - Nové.

Chcete-li promítnout obrázek do předem vybrané oblasti, nejprve jej vyberte a poté otevřete Upravit - Vložit jinak. K dispozici budou možnosti „Vložit na místo“ a „Vložit vně“.
Část jednoho výkresu můžete přenést do nové vrstvy. Chcete-li to provést, vyberte ji, klikněte na ni pravým tlačítkem a vyberte „Vyjmout do nové vrstvy“.
U tvarů, štítků a obrázků jsou k dispozici stejné možnosti jako u pozadí: efekty, filtry a tak dále.
Ve Photoshopu je mnohem více nástrojů pro kreslení: štětce, pera, tužky.

I z jednoduchých geometrických objektů můžete vyrobit kvalitní zdroj.

Existují zdroje s bezplatnými rozvrženími. Vložte je do Photoshopu a v případě potřeby upravte. Je to jednodušší a rychlejší než kreslení od začátku.

Jak převést rozvržení do souboru html?

Přišli jste na to, jak vytvořit web ve Photoshopu, a navrhli jste své první rozvržení. Co s tím dál dělat? Koneckonců, nemůžete to jen nahrát na svůj hosting.

Můžete to dát designérovi layoutu, který vám udělá kvalitní html šablonu. Ale je tu ještě jedna možnost. Pomocí služeb převeďte soubor PSD do HTML a CSS.

Psd2Html převodník. Placená online služba. Rychle převede formát Photoshopu na šablonu webové stránky. S tímto zdrojem můžete vytvořit slušný web i z nekvalitního rozvržení.
PSDCenter
Přirážka 40 dolarů.

Konstruktéři

Rozvržení lze také shromažďovat na speciálních webových stránkách. Obvykle existuje jasné a vizuální rozhraní. Šablonu jednoduše sestavíte z různých dílů. Některé prvky se lépe kreslí ve Photoshopu. Získáte tak originální design. Nehledě na to, že byl vytvořen pomocí konstruktoru.

Od autora: dobré odpoledne, přátelé! Dnes máme na programu nelehké a velmi objemné téma – tvorba designu webu ve Photoshopu. Vše, co souvisí s vytvářením pracovních rozvržení webových stránek, jsou obecně praktické lekce a na internetu je o tom velmi málo informací. Je spousta řemeslníků, spousta inzerce a placených kurzů, webinářů... ale ve skutečnosti nikdo nechce sdílet tajemství a jemnosti zadarmo. Líbí se, zkuste to, trpte a ujistěte se, že „beze mě“ to nezvládnete.

V tomto článku se pokusím odpovědět na nejčastější otázky a vyzdvihnout takříkajíc obecný směr. Jsem si jistý, že se vám moje tipy budou hodit!

Photoshop a webdesign

98 % projektů webdesignu začíná vytvořením funkčních rozvržení budoucích stránek a téměř všechny jsou nyní nakresleny ve Photoshopu. Co je rozložení?

Rozvržení webové stránky je prototypem internetového zdroje (portál, blog, obchodní platforma atd.), jeho individuální stránka, vstupní stránka, grafický obrázek s nakreslenými detaily různých úrovní. Obrázek může být obecný, nebo může poskytnout dostatečně podrobnou představu o celém strukturálním obsahu webu, navigaci a dokonce i obsahu informací.

V ideálním případě by výstup měl být vícevrstvý, zcela připravený pro rozložení a kódování. Návrh webových stránek ve Photoshopu má řadu požadovaných prvků:

umístění menu;

navigace;

barevné schéma;

fonty atd.

Vše ale přirozeně začíná konceptem. Mohou existovat dvě možnosti: buď návrhář obdrží hotový plochý výkres, který je třeba převést do objemu, nebo „koncept“. Podle konceptu má každý zákazník své vlastní chápání: jméno, cílové publikum, jen obecný seznam určitých funkcí a úkolů, cokoliv.

Ale designový layout už není bla bla bla, ale funkční rozhraní, s hotovou formou pro prezentaci informací, estetické a praktické.

Kde začít s vývojem layoutu?

Zákazníci nejsou vždy kreativní lidé, ne každý dokáže definitivně vysvětlit, co chce a jak by to mělo vypadat. Úkolem webdesignéra je klást chytré otázky a získávat chytré odpovědi! Čím chytřeji se zeptáte, tím méně budete muset opakovat.

Jak navrhuji přistupovat k vývoji designu webových stránek ve Photoshopu, doslova krok za krokem.

Bod číslo jedna. Rozložení musí být nakresleno na papíře. Použijte obecné grafické formy - čtverce, kolečka, obdélníky pro umístění záhlaví, hlavního menu, článků, fotografií, rubrik, postranních panelů, reklamy. Detaily zde nejsou důležité, hlavní je naplánovat prostor.

Jakékoli rozložení má technické požadavky, takže na ně musíte navléknout kostru. Udělejte si pár náčrtů, vše bude lépe poznat porovnáním. Některé možnosti lze kategoricky odmítnout, to je také dobré, negativní výsledek je také výsledkem. Jdeme dál.

Bod dva. Papírová verze tužkou je domluvena, můžete přejít na barevné schéma. Opět si vystačíte s kresbami, ale profesionálnější bude práce v grafických programech. Může být plochý, na tom nezáleží.

Bod tři. Chcete-li vytvořit skutečně vysoce kvalitní designové uspořádání, neváhejte navštívit zdroje konkurence. Rozhodli jsme se pro výklenek a hlavní klíčové dotazy, které zadáváme do Googlu nebo Yandexu.

Zajímá nás maximálně TOP 10. Analyzujte funkčnost těchto stránek. Neponořujte se příliš hluboko do obsahu, vyzkoušejte navigaci. Staňte se na chvíli běžným uživatelem, který na stránku přišel na požádání a hledá ten nejpohodlnější a nejrelevantnější zdroj.

Pokud jsou všechny vaše pohyby intuitivní a neztrácíte čas hledáním potřebných tlačítek a ukazatelů, zkuste si poznamenat, co jste použili k dosažení tohoto výsledku. A naopak, opravte si sami, co vás štvalo, překáželo, možná křiví menu nebo je tam hodně bannerů či reklam. No atd. Vaším úkolem je objektivně zhodnotit své hlavní konkurenty, vzít na vědomí jejich přednosti a odstranit zjevné nedostatky.

No, jak jste pochopili, je to teorie, věnujte nějaký čas praxi a uvidíme, jak vytvořit design webových stránek ve Photoshopu, když už přesně víte, co potřebujete nakreslit.

Návrh rozložení ve Photoshopu

Vytváření designu webových stránek ve Photoshopu, bez ohledu na to, jak primitivní nebo mega cool, vždy začíná vytvořením dokumentu.

Dokument

Standardní rozložení je široké 960 pixelů. Otevřete „Dokument“ - Nový - nastavte rozměry. 1200*1500 pixelů bude stačit, rozlišení ponechte na 72.

Moderní trendy a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

Nyní vyberte celý dokument (klávesy Ctrl+A), musíme definovat oblast 960 pixelů a přidat vodítka.

V nabídce programu vyberte „Výběr / Výběr“ - „Transformovat výběr / Transformovat vybranou oblast“. Ve vlastnostech nastavte šířku na 960 a opravte pracovní plochu rozložení. Ponechte vodítka na hranicích výběru.

Častou chybou návrhářů je umístění obsahu v pracovním prostoru rozvržení a jeho ruční odsazení. Na standardní obrazovce je to v pořádku, ale při otevření stránky na telefonu nebo tabletu se text jednoduše přilepí na okraj. Jak to opravit?

Přejděte na „Výběr/Výběr“ – „Transformovat výběr/Transformovat vybranou oblast“ a zmenšete výběr na 920 pixelů. Rozvržení se automaticky vycentruje, takže na každé straně získáte 20 pixelů výplně. Při změně šířky nezapomeňte znovu nastavit vodítka.

2. Hlava a textura

Chcete-li vytvořit záhlaví, musíte oddělit prostor v horní části rozložení, například 460 pixelů. Barevné přechody vypadají docela působivě. Dělají se takto:

vybraná oblast je vyplněna 1 barvou;

Styly vrstev se vybírají v nabídce;

"Překryvný přechod"

Hlasitost lze přidat osvětlením:

je vytvořena nová vrstva;

vyberte měkký kartáč o velikosti 600 px;

Barva štětce je nastavena na #19535a;

Jedním kliknutím se v požadované části záhlaví vykreslí zvýraznění.

Prozradím vám ještě jednu funkci – texturu. Obrázek textury můžete vytvořit z libovolné barvy:

Pomocí nástroje Tužka nakreslete 2 body;

dočasně vypnout viditelnost vrstvy pozadí;

Prostřednictvím nabídky „Edit“ - „Define Pattern“ získáme hotovou texturu.

Něco jako toto:

No a jak to dopadlo? Zajímá vás proces? Začátek byl učiněn, jste na cestě úžasných experimentů, které vám grafický Photoshop otevírá.

Nyní je čas otevřít Photoshop, který se již dlouho stal nepostradatelným pomocníkem pro webdesign, a udělat si náčrt nějakého jednoduchého rozvržení 2-3 barev a záhlaví, jsem si jistý, že uspějete a brzy máte vyhráno Nemusím koukat, co ten či onen dokáže udělat jiný nástroj. Praxe a upřímný zájem o věc jsou klíčem k úspěchu! Přeji hodně štěstí. To je pro mě vše! Přihlaste se k odběru aktualizací a neuniknou vám ty nejzajímavější články. Čau, uvidíme se znovu!

Moderní trendy a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

Oblíbené v kategorii: