Jak vytvořit rozvržení ve Photoshopu cs6. Odhalit možné problémy v rané fázi. Na co byste neměli zapomenout
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 musí být kombinovány a odpovídat tématu a směru 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.
- Vytvořte dokument pro budoucí rozvržení. Nezapomeňte na velikost.
- 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.
- 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.
- 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.
- 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.
- 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.
- Vyberte nástroj vnoření. Nachází se na paletě ve skupině Rámeček.
- Chcete-li odříznout část svého návrhu, 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.
- Další řez proveďte stejným způsobem a tak dále, dokud nebude práce dokončena.
- 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ů .
- Uvnitř vybraného adresáře se objevila složka obrázků s grafickými soubory, z nichž každý obsahoval část rozvržení.
- 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.
Umístěte místo se štětcem do levého horního rohu:
Poté pomocí nástroje Přesunutí zvedněte vrstvu se skvrnou mírně nahoru a nastavte krytí vrstvy na 70 %:
V panelu nástrojů vybereme nástroj „Text“, v pruhu voleb klikneme na ikonu pro zapnutí panelu symbolů, kde nastavíme následující hodnoty:
- Rodina písem: Avanti Regular (stažení písma z odkazu níže)
- Velikost písma: - 59pt
- Sledování: 5
- Horizontální měřítko – 115 %
- Barva: #91d4f5
Pro usnadnění zapněte pravítka (Ctrl+R) a umístěte vodítka vodorovně 92 px, svisle – 104 px do nitkového kříže vodítek a toto bude počáteční pozice textu loga webu. Napíšeme logo "Auta" nebo něco podobného Obrázek ukazuje měřítko dokumentu v plné velikosti:
Pro písmo sloganu nastavte následující parametry:
- Rodina písma: Avanti Regular
- Velikost písma: - 19pt
- Sledování: -35
- Horizontální měřítko – 100 %
- Barva: #cdcdcd
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).
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.
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 Spád(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(Vrhat 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 stránku:
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.
Vzhledem k četným žádostem čtenářů dnes uděláme návrh, respektive rozložení webu ve Photoshopu. Samozřejmě, pokud jste se s tím nikdy nesetkali, je docela obtížné udělat mnoho otázek, na které se dnes pokusím odpovědět. Jak se ukazuje, na internetu není mnoho materiálů na toto téma. Existuje spousta designérů, ale nikdo vám neřekne, jak vytvořit vzhled webu. Možná jsem se jen špatně díval? :)
Pokračování
Obecně platí, že už to udělejme.
Pro začátek jsem připravil jednoduchý layout, který s vámi plně rozebereme. Vypadá to takto:
Jak vidíte, šablona není přirozeně složitá, jedná se o šablonu blogu, kterou později rozložíme do HTML. No, zatím budeme jen kreslit. Tak a teď pojďme.
Software
První věc, kterou potřebujete, je Photoshop. Pokud ho nemáte, kupte si ho :-)
Tvorba dokumentu a rozměry
Chcete-li vytvořit nový dokument ve Photoshopu, musíte přejít na „Soubor“ a kliknout na „Vytvořit“, poté se zobrazí okno, ve kterém musíte nastavit příslušné rozměry.
Rozměry závisí na tom, jak široký bude váš budoucí web. Například jste se rozhodli, že hotový web bude mít šířku 1000 px, proto je potřeba velikost dokumentu trochu zvětšit, někde kolem 1200 px. To se provádí především pro pohodlí, aby vaše rozložení vypadalo stejně jako v prohlížeči.
Co se týče výšky, velikost se nastavuje na základě motivu šablony. Ale je vhodné udělat víc, myslím, že 4000 px stačí. To se provádí tak, aby se všechny prvky později vešly. Protože jsem tu výšku nějak zmenšil a pak jsem musel vše přenést do nového dokumentu.
V mém případě bude mít web šířku 1200px. Udělal jsem tedy dokument o šířce 1300 px a výšce 4000 px. Zbytek nastavení ponechte tak, jak jsou.
Pozadí šablony webové stránky
Poté, co jsme vytvořili dokument, první věc, kterou musíte udělat, je vytvořit pozadí pro web. Nezáleží na barvě nebo obrázku, prostě to udělejte. V mém případě je to jen bílé pozadí. Vyberte nástroj Výplň v paletě barev, vyberte bílou a poté jednoduše klikněte na pozadí.
Šířka budoucího webu je 1200 px
Nyní musíme nastavit velikost budoucího webu tak, aby vypadal stejně, jako bude vypadat v prohlížeči. To provedeme pomocí pravítka. Pokud pro vás není aktivní, musíte přejít na „Zobrazit“ a zaškrtnout políčko vedle „Pravítko“. Poté by se měl objevit ve vašem zobrazovacím okně.
A takhle vypadá:
Vyberte naši vrstvu, stačí na ni jednou kliknout:
Nyní musíme umístit pravítko do středu našeho dokumentu, nebo spíše najít střed. Chcete-li to provést, přesuňte kurzor na pravítko na něm, podržte levé tlačítko myši a nakreslete čáru na náš dokument. Zatáhněte přibližně doprostřed, pravítko si střed najde samo.
Poté, co jsme našli střed, musíme umístit náš web o šířce 1200 px do středu dokumentu, který má velikost 1300 px. Chcete-li to provést, vyberte nástroj „Obdélníková oblast“, nastavte Styl nahoře na Zadanou velikost, kde napíšeme následující hodnoty: šířka - 1200px, výška 400px. Dále jednoduše klikněte na naše bílé pozadí a budeme mít vybranou oblast šířky, kterou potřebujeme.
Nyní umístíme myší námi vybranou oblast do středu, najde střed sám. Poté je třeba vytáhnout 2 další pravítka a umístit je na obě strany vybrané oblasti. Tímto způsobem naznačíme hranice našeho budoucího webu, který bude mít šířku 1200 px. Toto pravítko také usnadní úpravu designových prvků. Pokud nerozumíte, postupujte stejně jako na obrázku níže.
Pravítko budeme používat i v budoucnu, bez něj se zde neobejdeme;
Nyní máme téměř kompletně připravený náš dokument. Zjistili jsme střed a také určili přesnou velikost, za kterou už nemusíte lézt. Nyní přejděme k tomu nejzajímavějšímu, a to k vytvoření návrhu webu (layoutu).
Vytvoření designu nebo rozvržení webových stránek
Důležité!
Vždy vytvořte skupiny pro vrstvy a pojmenujte je. Protože v budoucnu budete určitě zmateni!
Skupiny
Vytvoříme skupinu a nazveme ji „Hider“ (Klobouk) a v ní vytvoříme skupinu „Top Menu“, protože s ní začneme. Ve skupině vytvořte novou vrstvu a nazvěte ji „pozadí“. Toto bude pozadí našeho horního menu.
Toto byste měli dostat:
Horní menu
Opět vytáhneme pravítko a nastavíme jej jako na obrázku:
Vyberte nástroj „Obdélníkový výběr“ a podél vodorovného pravítka vyberte:
V paletě barev zadejte tuto barvu #0dbfe5, vyberte nástroj Výplň a vyplňte vybranou oblast, poté musíte výběr zrušit na kartě „Výběr“ a klikněte na „Odznačit“:
Klikněte na nástroj „Horizontální text“. V horním panelu vyberte písmo „Segoe UI“. Nyní klikněte na modré pozadí nabídky a napište název našich stránek. Poté můžete text přesunout, kam potřebujete.
Nyní vytvoříme oddělovače mezi stránkami. A dáme tomu mírný depresivní efekt. Vytvořte novou vrstvu a vyberte nástroj Čára. Poté podržte Shift a nakreslete svislou čáru přes celé modré pozadí naší nabídky.
Dvakrát klikněte na vrstvu s tvarem a otevře se okno se stylem vrstvy. Zaškrtněte políčko vedle „Color overlay“ a přidejte tam tuto barvu #0aaacc.
Přejděte na položku „Stín“ a nastavte následující parametry:
Toto byste měli dostat:
Poté vrstvu jednoduše zkopírujeme s naším řádkem a umístíme za každé slovo. Zde je to, co jsem dostal:
Sociální záložky ikony
Zde v menu pouze na pravé straně přidáme ikony záložek. V mém případě je to , ale můžete nainstalovat i běžné stažené ikony. Stáhnout si ho můžete zde.
Nejprve pomocí pravítka musíte nastavit výšku našich ikon tak, aby byly rovnoměrné. Co dělat:
Poté vytvoříme skupinu, nazveme ji „Sociální záložky“, vytvoříme v ní novou vrstvu. Nyní klikněte na nástroj „Vlastní tvar“ a vyberte požadovaný tvar:
Přesuňte kurzor na místo, kde bude ikona, podržte Shift (tak, aby ikona vypadala rovně) a roztáhněte ji na požadovanou velikost. A stejný postup opakujeme s následujícími obrázky. Nakonec byste měli získat toto:
Pojďme k logu. Opět vytvořte samostatnou skupinu pro logo a přidejte jej do nové vrstvy.
Logo
Přejděte na tuto stránku a stáhněte si písmo. Vyberte nástroj „Horizontální text“. V poli písma hledáme název našeho písma Olivier. Klikněte na místo, kde bude logo umístěno a napište název v angličtině, protože toto písmo nepodporuje azbuku. Toto byste měli dostat:
Vytvořte skupinu „Spodní nabídka“ a novou vrstvu.
Spodní nabídka (hlavní)
Nastavíme pravítka jako na obrázku:
Vyberte nástroj Obdélníkový výběr a proveďte výběr. Poté vyplňte vybranou oblast touto barvou #303030. Toto byste měli dostat:
Zrušte výběr na kartě „Výběr“. Nyní přejděte na kartu Filtry – Šum a vyberte Přidat šum. Poté nastavíme následující hodnoty:
Přidávání řádků. Dělají se stejně jako v horním menu, pouze se mění barva samotné čáry. Myslím, že to zvládnete a mělo by to vypadat takto:
Nyní přejdeme na panel s informacemi, které uživateli napoví, kde se na webu nachází.
Jako obvykle ve skupině „Hider“ vytvořte skupinu „Info Panel“ s novou vrstvou.
Informační panel
Nejprve přidejte pruhy z pravítka jako na obrázku níže:
Vyberte nástroj „Rectangular Marquee“ a vyberte oblast přímo pod nabídkou a vyplňte ji černou barvou #000000
Zrušte výběr, vyberte „Horizontální text“, změňte velikost písma na 48 bodů a barvu #a4a4a4. Píšeme „Nejnovější záznamy“. U toho byste měli skončit:
Obsah
Pojďme k označení středu našeho budoucího webu. Potřebujeme pomocí pravítka označit, kde budou umístěny bloky příspěvků a blok sitebaru (pravý sloupec).
Okamžitě musíte vytvořit 2 samostatné skupiny:
- Tagy— do této skupiny přidáme text o velikosti našich sloupců.
- Obsah— skupina, kde bude umístěn celý náš web.
Ve skupině vytváříme obsah pro skupinu „Vlevo“, která bude obsahovat naše bloky s příspěvky.
Vyberte nástroj „obdélníková oblast“, dejte mu styl „nastavit velikost“ a nastavte šířku na 800 pixelů a výšku na 100 pixelů. Zde je výsledek:
Přidejte čáry z pravítka jako na obrázku a zrušte výběr:
Ve skupině „Obsah“ vytvoříme skupinu s názvem „Vpravo“ (Sitebar). Označíme místo pro pravý sloupec webu.
Opět vezmeme „obdélníkovou oblast“, ale ve stylu oblasti nastavíme o něco menší velikost s šířkou 350px a výška zůstane stejná na 100px. A pak uděláme vše jako na obrázku:
Nyní přesně víme, kde budou bloky s příspěvky a sitebar. A vše bude hladké.
Pamatujete si, že jsme vytvořili skupinu štítků? Tam stačí vytvořit vrstvu s označenými velikostmi bloků, jako je ta moje:
Tyto značky budou velmi užitečné při rozvržení. Nemusíte si pamatovat velikosti.
Bloky se záznamy
Začněme bloky se záznamy, v tomto případě jsou vyrobeny velmi jednoduše.
Ve skupině „Vlevo“ vytvořte podskupinu „blok“ a novou vrstvu.
Znovu vyberte nástroj Obdélníkový výběr. Ve stylu nastavíme rozměry 800 x 300. Přizpůsobíme čarám. Poté jej vyplňte touto barvou #d9d9d9. Toto je naše miniatura.
Ve stejné skupině přidejte štítek pomocí textu, jako mám na obrázku výše.
Nyní k příspěvku přidáme název. Vezměte „Horizontální text“ a nastavte velikost na 35 bodů a barvu na černou. Přidejte přímo pod miniaturu:
Doplnění informací do příspěvku. Nastavte velikost písma na 14 bodů a barvu blíže k šedé:
A popis k příspěvku:
Nyní přidejte nějaký text a podívejte se, co máme:
Abychom záznamy alespoň trochu oddělili, vytvoříme jednoduchý oddělovač od kruhů.
Vytvořte skupinu „Separator“, vyberte „Oval Area“ a vytvořte vrstvu. A pod blokem položek, zatímco držíte Shift, nakreslete kruh a vyplňte jej touto barvou #efefef.
Zrušte výběr a pomocí pravítka vyhledejte střed kruhu
Vyberte vrstvu s naším kruhem, klikněte pravým tlačítkem a vyberte „Vytvořit duplicitní vrstvu“. Přetáhněte ji trochu doleva.
V horním panelu přejděte na kartu „Úpravy“ - Transformace a vyberte možnost Měřítko. A uděláme kruh o něco menší než ten první, zatímco držíme Shift, aby byl kruh rovný.
Toto byste měli dostat:
Zkopírujte vrstvu tohoto malého kruhu a přesuňte ji znovu doleva. Také přesně zmenšíme jeho velikost, jak je napsáno výše, takže to dopadne takto:
Nyní musíte vytvořit duplikát prostředního kruhu a posunout jej doprava a totéž udělat s malým kruhem. Aby to bylo jasnější, udělejte to jako na obrázku:
Ale to se stalo pouze v normální velikosti:
Nyní umístíme blok záznamů pod blok. Vytvořte duplikát naší skupiny „Blok“ Vyberte kurzor (nahoře) na panelu nástrojů. A přetáhněte náš blok záznamů dolů. a děláme to 5x.
Postranní panel (pravý sloupec)
Najdeme naši skupinu „Sidebar“ a vytvoříme v ní podskupinu „Search“. Pomocí řádku uděláme toto:
Vyberte nástroj Obdélníkový výběr a vyberte vyhledávací pole a vyplňte ho touto barvou #eeeeee
Nezapomeňte zrušit výběr, klikněte na nástroj „Horizontální text“ a do šedého pole napište slovo Hledat
Vlevo vyberte nástroj Volný tvar a nahoře vyhledejte tvar lupy. Je k dispozici ve standardních číslech. Vytvořte vrstvu ve skupině „Hledat“, namiřte ji na pole a nakreslete naši postavu se stisknutou klávesou Shift.
Vyhledávací pole je připraveno. Nyní přejdeme k widgetům.
Vytvořte skupinu „widgetů“ a v ní novou vrstvu. Poté přidejte čáry jako na obrázku. Toto bude pozadí naší hlavičky a vyplňte ji touto barvou #eeeeee
Nyní potřebujeme přidat samotný titul k našemu titulku, uděláme to pomocí textu. Přidáme také ikonu do názvu. Chcete-li to provést, musíte si vybrat jakýkoli tvar, který se vám líbí a který odpovídá významu :) Při přidávání tvaru nezapomeňte podržet Shift. A vyplňte ji touto barvou #0dbfe5
A samozřejmě musíme přidat položky do našich widgetů. Musíte vybrat nástroj pro vodorovný text a poté nastavit velikost na 16 bodů. A udělejte ka na obrázku níže
Poté jednoduše vytvoříme duplikát skupiny a přetáhneme widget dolů. Děláme to samé jako s příspěvky.
Nyní můžeme vidět téměř hotové a jednoduché uspořádání našeho budoucího webu.
Zápatí (dolní část webu)
No, co bychom si bez něj počali? V této šabloně to také není příliš složité.
Jako obvykle vytvořte skupinu „Zápatí“ a v ní vrstvu. A označte jej pomocí pravítka, vyberte náš již oblíbený nástroj „obdélníková plocha“, vyberte jej a vyplňte #0dbfe5
Zrušte výběr. Vezměte „Horizontální text“, najděte písmo, které jsme stáhli (Olivier), a zadejte naše logo, pouze barvu textu trochu ztmavte.
A na pravou stranu našeho zápatí přidáme menu stejné jako nahoře pouze bez řádku. Můžete jej dokonce jen zkopírovat a přesunout dolů.
To je vše, přátelé, máme připravený layout, který se již dá napsat :)
Zde je také jeho PSD soubor. Stáhněte si a zjistěte, zda něčemu nerozumíte.
Přátelé, pokud něčemu nerozumíte, určitě se zeptejte v komentářích.
Brzy se uvidíme.
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 vytváření 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.
