Vytvořte rozvržení psd ve Photoshopu. Časté chyby při vytváření vzhledu webové stránky. Jak se to dělá

Cacoo vám umožňuje vytvářet diagramy online. Je to zcela bezplatný nástroj, který vám dává možnost vytvářet drátěné modely, diagramy a UML pomocí webového prohlížeče a aplikací.

Gliffy podporuje vytváření bezplatných drátových modelů webových stránek a aplikací. Gliffy můžete používat na webu, nebo jako plugin pro různé aplikace od Google a Confluence. Podporuje také náhled drátových modelů HTML5.

MockFlow vám umožňuje vytvářet drátové modely aplikací přes internet nebo pomocí chytrých telefonů. Aplikace je schopna vyhodnotit použitelnost návrhu.

Tiggzi je mobilní aplikace pro vývoj aplikačních frameworků a webových stránek určených pro mobilní telefony. Program umožňuje vytvářet aplikace pro HTML5 a JQuery běžící na mobilních telefonech. Můžete také exportovat aplikace pro Android, IOS a Mobile Web.

Frame Box je jedním z nejjednodušších způsobů vytváření rámců online pomocí jednoduchých nástrojů přetahování. Program je velmi jednoduchý a nevyžaduje mnoho studia, můžete si jen sednout a pracovat.

iPhone Mockup je další drátěný nástroj, který vám umožňuje vytvářet makety pro aplikace pro iPhone. Tento program se také velmi snadno používá, stačí přetáhnout potřebné prvky z panelu nástrojů.

Pencil Project je další grafická aplikace, která umožňuje vytvářet drátěné modely pro webové stránky a podporuje export drátových modelů v různých formátech, jako jsou HTML, PNG a PDF.

iPlotz je bezplatný nástroj, který vám umožňuje vytvářet navigaci pro webové stránky a aplikace. Je založen na komponentách, které lze použít k vytvoření rozvržení projektu.

Crealy podporuje vytváření diagramů, diagramů a rozvržení pro různé typy projektů pomocí map a drátěných modelů. Navíc podporuje současné řízení více projektů.

Hlavní specializací Naview je konstrukce drátové navigace a vizualizace navigačních nápadů a tento program také podporuje testování hlavního projektu.

Flair Builder je další široce používaný nástroj pro tvorbu drátěných modelů, který vám umožňuje vytvářet rozvržení pro webové stránky a bohaté internetové aplikace. Podporuje různé platformy jako Windows, Mac a Linux. Program byl vytvořen pomocí Adobe AIR, což zajistilo lepší integraci a snadnou instalaci.

Simple Diagrams je dalším jednoduchým nástrojem pro vytváření diagramů a drátěných modelů, program vám umožňuje rychle a snadno vytvářet rozvržení, a co je nejdůležitější, je velmi snadno pochopitelný. Můžete jej jednoduše otevřít a začít vytvářet rozvržení.

Doufáme, že pro vás budou tyto nástroje pro rozvržení projektu užitečné. Pokud víte o dalších podobných nástrojích, neváhejte nám o nich říct v komentářích.

Studio Layout-Master Nikolaje Saganenka nabízí tvorbu vysoce komplexních layoutů v co nejkratším čase. Bezplatná návštěva specialisty.
Pro objednání pište na Tato e-mailová adresa je chráněna před spamboty. Pro její zobrazení musíte mít povolený JavaScript.. Podrobnosti o společnosti: LLC "Architectural Standard". Dodávka v rámci Ruské federace.

Photoshop je mezi webovými designéry extrémně oblíbený program, pro mnohé dokonce standard. A pokud jde o vzhled webových stránek, ve většině případů to znamená soubor .PSD.

Před přímým vytvořením rozvržení se musíte rozhodnout o struktuře webu, promyslet navigaci a představit si, kde se které bloky a prvky budou nacházet.

Z čeho se rozložení skládá?

Převážnou většinu webových stránek tvoří:

• Horní část (záhlaví), ve které je umístěno logo, slogan, navigační menu atd.;
• hlavní blok, ve kterém je umístěn obsah;
• postranní panel (sidebar);
• spodní část (zápatí), která obvykle obsahuje podpůrné informace, informace o autorských právech, užitečné odkazy atd.

Jak vytvořit?

Vymyslete a promyslete strukturu. Nebylo by na škodu si to nakreslit na kus papíru nebo v samotném Photoshopu.

Věnujte pozornost barevnému schématu - tóny by měly být kombinovány a v souladu s tématem a směrem webu. Text by měl být dobře čitelný a stránky by se měly rychle načítat. Nepřehánějte to s dekoracemi, interaktivními prvky a efektními fonty – pohodlí je důležitější než honosný design, protože uživatelé nenavštěvují stránky proto, aby na ně zírali, ale s předem stanoveným účelem, a čím rychleji to váš zdroj dokáže vyřešit, tím více se cení.

Rozhodněte se, zda bude váš design roztažitelný nebo pevný. Šablona s pevnou velikostí vypadá na všech obrazovkách stejně, zatímco „gumová“ šablona měnící se velikosti se přizpůsobuje zařízení. Pokud je design „gumový“, musíte se rozhodnout, co vyplní pozadí webu.

Rozvržení tohoto webového zdroje jsme však vytvořili v, který je součástí (vřele doporučuji) a můžete v něm najít komplexní příklad.

Zde, abych nebyl rozptylován detaily a použitím již prostudovaných nástrojů, budu uvažovat o podmíněném příkladu rozvržení, schématu šablony, ale pomocí popsaného algoritmu můžete snadno pracovat s vlastním rozvržením.

1. Vytvořte dokument pro budoucí rozvržení. Nezapomeňte na velikost.
2. Rozvržení ohraničte pomocí vodítek nakreslených z pravítek.

Pravítka povolíte buď stisknutím kombinace kláves Ctrl+R, nebo příkazem Zobrazit -> Pravítka z hlavní nabídky programu.

Chcete-li vytáhnout vodorovné vodítko, klikněte na horní pravítko pomocí tlačítka myši a bez jeho uvolnění posuňte ukazatel dolů, dokud nebude vodítko v požadované poloze. Chcete-li prodloužit svislou čáru, proveďte totéž, pouze přesuňte ukazatel napravo od pravítka vlevo.

V důsledku toho by měla být vaše šablona ohraničena.

1. Nakreslete rozložení. Přidejte grafiku, čáry, tlačítka a další prvky. Vše je zde individuální a po celou dobu jsme se podívali na nástroje pro práci.

1. Přidejte nějakou barvu, pokud jste tak ještě neučinili. Pamatujte na harmonii a jemnost tónů. Znalost interakce člověk-stroj a umělecké školy bude jen plus.

Jak řezat

Hotový layout je potřeba rozřezat „na kousky“, aby bylo možné použít jeho prvky v designu webu, z čehož část bude implementována pomocí HTML, část přes CSS a část přes samotné obrázky, do kterých bude layout rozřezán. Pamatujte na to, když chcete ponechat několik obrázků s bílým pozadím, text stránky nebo názvy odkazů - musíte ponechat pouze to, co bude převzato z grafických souborů a nebude implementováno jinými prostředky.

Rozložení je tedy připraveno a otevřené. Rozřízneme to.

1. Vypněte vrstvy s nepotřebnými prvky rozvržení – text, tlačítka, formuláře atd. Chcete-li vrstvu skrýt, klikněte na oko v její linii.

1. Přizpůsobte vodítka nakreslená z pravítek konstrukčním prvkům webu. V zásadě lze rozložení podél nich řezat, ale v tomto případě to nemusí dopadnout přesně podle potřeby, takže použijeme jiný nástroj.
2. Vyberte nástroj vnoření. Nachází se na paletě ve skupině Rámeček.

1. Chcete-li odříznout část rozvržení, přesuňte ukazatel na místo, kde chcete začít, a chovejte se, jako byste vybírali obdélníkovou oblast. Odříznutá část bude očíslována. Modrá barva čísla znamená, že fragment je aktivní a lze jej upravit. Části, u kterých program očekává, že budete řezat, jsou očíslovány na šedém pozadí. Vystřižený fragment je zvýrazněný a má fixy, díky kterým lze upravit jeho velikost a polohu.

1. Další řez proveďte stejným způsobem a tak dále, dokud nebude práce dokončena.
2. Když je vše hotovo, uložte výsledek. Chcete-li to provést, spusťte příkaz Soubor -> Export -> Uložit pro web (stará verze), zkontrolujte nastavení (zvolte formát, kvalitu atd.), klikněte na Uložit a zadejte složku, ve které se vytvoří katalog grafických souborů .

1. Uvnitř vybraného adresáře se objevila složka obrázků s grafickými soubory, z nichž každý obsahoval část rozvržení.
2. Nyní můžete ukládat tlačítka, ikony a další dříve skryté prvky.

Rozložení je vytvořeno, vyříznuto a kompletně připraveno.

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:

1. Sada ikon (wefunction.com)
   Alternativní sada ikon
2. Ikona Twitteru (iconeden.com)
3. 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í plochy 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.

Zvýrazněte vrstvu vertikálně (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 krytím 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 k vrstvě čáry masku a použijte přechod k vytvoření hladkého přechodu na okrajích.

Jakékoli rozvržení je vytvořeno s ohledem na určité technické požadavky. U rozvržení tištěných materiálů a rozvržení pro webové stránky jsou zcela odlišné. Mnoho začínajících designérů to nebere v úvahu a začnou tvořit, po čem jejich srdce touží.
V tomto článku napíšu, jak vše dělat správně (a naznačit časté chyby), což zvýší produktivitu návrháře a uleví od bolestí hlavy frontend programátorovi.

teze

Nejprve nastíním hlavní body. Řada z nich tvrdí, že jde o díla známé postavy jménem K.O., ale přesto o tom ne každý ví.

• Rozvržení v programech pro rozvržení
• Vytvořte dokument správně
• Použijte mřížku
• Použijte funkci šablony
• Zvažte, že stránky nejsou statické
• Pracujete s rybami, skutečné texty budou jiné
• Připravte materiály pro rozložení

Rozvržení v programech pro rozvržení

Často slyším o tom, co se snaží dělat s designem ve Photoshopu.
Je pro mě těžké pochopit, kde se tento trend vzal. Na všech specializovaných univerzitách (dobře, pokud vím) je vše rozloženo správně:

• Pro design je zde InDesign (nebo QuarkXPress).
• Pro kreslení je zde Illustrator (nebo CorelDRAW).
• Pro úpravu fotek je tu Photoshop. (no, Gimp a milion dalších programů). No, jen ve webdesignu se používá i k ukládání obrázků.

Jedna z mých teorií v této věci je neznalost zákazníka. Myslím, že vše je nakresleno ve Photoshopu a zákazník říká: „Potřebuji layout v psd, zítra v 6:34 a bude to vonět jako skutečný design.“
Nebojte se zákazníkovi vysvětlit, že layouty se nedělají ve Photoshopu a zítra přesně v 6:34 dostane layout v PDF.

Vytvořte dokument správně

Při vytváření dokumentu mnoho lidí nečte dialog a okamžitě klikne na „OK“. Ale je zde několik úprav. Příklad správného nastavení:


Účel: Web – Převede všechny rozměry na pixely. Na webu pracujeme s nimi a jen s nimi, žádné „posuňte to o 1 centimetr“.
Velikost stránky: 960 je standardní velikost. Pokud si nejste jisti a děláte web design poprvé, neváhejte. Ale samozřejmě to může být cokoliv. Hlavní věc je nezapomenout, že posuvník zabere šířku, takže neberte šířku absolutně rovnou nějakému rozlišení obrazovky, berte o něco méně.
Jo a ano, šířka musí být násobkem dvou. Jednou jsem narazil na web o šířce 1227 pixelů.
O mřížce vám povím v další části, můžete ji kdykoli změnit v Rozložení->Okraje a sloupce.

Nápověda: mnoho, i zkušených designérů, neví, že výšku (stejně jako šířku) lze nastavit individuálně pro každou stránku v dolní části záložky stránek, hned první ikona. Při prezentaci rozvržení v PDF není potřeba dlouhých bílých ocasů ve spodní části stránek.

Použijte mřížku

Aby rozložení vypadalo dobře, musí být všechny prvky systematizovány. Zde mluvíme nejen o webových stránkách, ale také v zásadě o jakémkoli rozložení.
Mřížka je základem každého rozvržení. Tančí se z ní. Proto je její výběr velmi důležitý. Jeho „grafické“ vlastnosti zde ale popisovat nebudu. Technické požadavky jsou pro nás důležité.

1 - okraj, 2 - šířka sloupce, 3 - okap, 4 - standardní odsazení

Všechny velikosti mřížky musí být celočíselné a nejlépe násobky dvou.
Zde je seznam parametrů:

• Šířka rozložení
• Šířka vnějších okrajů (margin)
• Počet sloupců
• Rozteč sloupců (žlab)

Když jsme se rozhodli pro všechny tyto parametry, dosadíme je do vzorce
Šířka rozvržení = okraj*2 + x*Počet sloupců + okap*(Počet sloupců - 1)
Například pro dokument vytvořený výše v příkladu to bude
960 = 10*2 + x*6 + 14*5
x = 145
x (šířka sloupce) se ukázalo jako celé číslo, což znamená, že je vše v pořádku, pokud ne, změňte odsazení.

A ještě něco, jsou rozložení, kde je marže nulová. A řeknou vám „proč je mají, všechno vypadá skvěle bez nich“. Ano, toto tvrzení platí pro počítače, kde na obrazovce bude stále prázdné místo, ale na mobilních zařízeních bude mít web přesně šířku obrazovky a písmo přilepené k okraji bude vypadat hrozně.

Nezapomeňte také označit to, čemu říkám „standardní odsazení“. Nebudete si muset lámat hlavu nad tím, jaké odsazení udělat. Odsazení může být samozřejmě dvojité. Svislé odsazení se také může lišit od vodorovného.

A nezapomeňte použít samotnou síťku podél ní;
Obecně je návrháři jedno, kde se prvek nachází, ale programátor prvky připojuje k mřížce, takže je pro něj nesmírně důležité, aby z ní prvky nevylézaly.

Použijte funkci šablony

Stránky mají různé prvky rozhraní a co je nejdůležitější, obecná šablona zůstává na všech stránkách stejná.
Proto musí být uložen na vzorových stránkách. Otázky „která z těchto stránek má správný vzhled“ již nebudou kladeny.

Totéž platí pro květiny. Všechny barvy používáme pouze prostřednictvím vzorníků. To vám umožní vyhnout se vytváření hromady barev a jejich změně všude jedním kliknutím.

Zvažte, že stránky nejsou statické

Na rozdíl od tištěných materiálů je web dynamický objekt. Nezapomeňte vytvořit prvky v různých fázích rozvržení (například pouze odkaz, odkaz, na který jste umístili kurzor, aktivní odkaz).

Pracujete s rybami, skutečné texty budou jiné

Mnoho designérů, kteří dříve pracovali s tištěnými materiály, má stále ve zvyku věnovat pozornost malým detailům formátování textu.
Mluvím o věcech, jako je nemít krátká slova na konci řádku nebo použití dělení pouze na jedno konkrétní dlouhé slovo.
Máte statický obsah, můžete ovládat každé písmeno a každou mezeru samostatně.
To je samozřejmě správné a jasný znak profesionality, pokud jde například o časopis, ale na webu nebudete mít pod kontrolou uživatelský obsah.
Nezapomeňte si tedy u nadpisů a podobných věcí nastavit maximální možnou délku.

Připravte materiály pro rozložení

Nejprve se zeptejte frontend programátora, jaké prvky na obrázcích potřebuje.
Mnoho zkušených designérů již ví, že programátor nakreslí toto okno s border-radius a box-shadow (neříkám, že je potřeba znát názvy vlastností, jen se postupem času odkládá, že mnohé i docela složité tvary a efekty se kreslí v CSS)
Ale pokud jste v této věci nový, zeptejte se konkrétně „co je potřeba?“
Něco málo o ukládání obrázků.
Vše musí být uloženo nejen prostřednictvím uložení ve Photoshopu, ale také uložením pro web.
Malé prvky, prvky, které vyžadují průhlednost nebo obsahují písma, jsou uloženy v png-24.
Grafika, obrázky a jpeg pozadí. Sledujte velikost souboru a dělejte jej co nejmenší, dokud nebude rozdíl vizuálně velmi patrný.

Poskytněte seznam barev použitých v HEX formátu.

Nezapomeňte do rozvržení zahrnout všechna použitá písma.

A nakonec vše proberte ústně s programátorem, to se hodí všem.

Tagy: design webu, rozvržení webu, frontend, manuál, kurz