Vytvoření rozvržení ve Photoshopu. Snadno vytvářejte marketingové materiály. Věnujte pozornost detailům

Překlad článku designéra Claudia Guglieriho popisujícího proces navrhování vzhledu webu od začátku do konce.

Při navrhování vzhledu webu jsem si vzpomněl na běžné chyby, kterých se mnoho lidí dopouští, zejména mezi stážisty a novými designéry.

Tento krátký seznam tipů, otestovaných v mých zkušenostech, vám pomůže při práci na dalším rozvržení webu.

1. Dejte své myšlenky na papír

Je to zřejmé, ale mnoho designérů dělá tu chybu, že skočí do Photoshopu, než se zamyslí nad problémem, který se snaží vyřešit. Zkuste nejprve pracovat s papírem. Věřte mi, je jednodušší a lepší o tom přemýšlet. A pak všechno ostatní. Zamyslete se nad obsahem, funkčností projektu atd.

2. Vytvořte skici nejvyšší úrovně

To je první věc, kterou je třeba udělat. Musíte také okamžitě vytvořit rámce uživatelského rozhraní, které obklopují text, pomáhají vám provádět různé akce a procházet rozhraním. Patří mezi ně navigace a komponenty, jako jsou spodní lišty, postranní lišty atd. Pokud s tím začnete, budete mít obecnou představu o svém projektu.

3. Přidejte do svého souboru PSD mřížku

Je to jednoduché. Než začnete navrhovat, potřebujete mřížku. Pokud to neuděláte, věřte mi, že projekt nakonec nebude vypadat moc dobře. Mřížka vám pomůže strukturovat rozložení různých oblastí, pomůže vám být konzistentní, pokud jde o rozestupy, a mnoho dalšího.

4. Vyberte typografii

Zkoumání různých písem a barev je důležitou součástí projektu. Nedoporučoval bych na webu používat více než dvě písma. Výjimka však může záviset na povaze webu. Poté, po zvážení všeho, si můžete vybrat více než dva fonty, nebo dokonce nastavit pouze jeden. Text by ale měl být s vaším fontem čitelný a na některých místech by měl vyzývat k akci. A hlavně buďte důslední.

5. Vyberte barevné schéma

V průběhu pracovního postupu výběru písma byste měli pracovat na barevném schématu celého uživatelského rozhraní (barva pozadí, text atd.). Barvy by měly být zvoleny v závislosti na funkčnosti prvku. Věnujte pozornost webům jako Facebook, Twitter, Quora nebo Vimeo.

6. Rozdělte rozložení

Je nutné, aby každá sekce na webu vyprávěla příběh. Chce to příčinu a konečný výsledek. Text by měl mít zvýraznění, zvýraznění atd. pro nejdůležitější části textu. A ve skutečnosti by stránka neměla mít příliš mnoho „výstupů“ do jiných zdrojů a zdrojů. Uživatel by se měl ptát „Co zde mohu dělat?“ Stanovte si cíl vytvořit co nejjednodušší rozložení. A budete překvapeni, jak těžké je toho dosáhnout.

7. Reorganizační sada

Jako designéři utváříme image webových stránek pro uživatele na internetu. Je nutné rozhodnout, kolik kroků bude uživatel muset udělat, aby provedl nějakou akci, jak efektivní bude web ve výsledku atd. Návrhové vzory existují, protože si nikdo neudělal čas na jejich vyhodnocení. Je důležité přehodnotit, otestovat, refaktorovat zavedené interaktivní modely na jakékoli součásti a zjistit, jak je můžeme vylepšit.

8. Vyzvěte se

Doporučuji každému designérovi, aby to udělal ve všech svých projektech. Příklady různých úkolů pro to mohou být: použití nového systému sítě při vytváření nových komponent; malé úkoly, jako je vyhýbání se režimu prolnutí nebo použití konkrétní barvy

9. Věnujte pozornost detailům

Toto prohlášení bylo v poslední době zneužito. Detailem může být nějaká malá interakce mezi prvky, neočekávaná animace nebo estetická dekorace atd. A každá maličkost je nakonec významná. Ještě lepší je, když ji máš rád.

10. Zacházejte s každou komponentou, jako byste ji přihlašovali do soutěže.

Musím přiznat, že tato rada není moje. Slyšel jsem to na Fantasy Interactive a byl jsem šokován, jak jasně a pravdivě to znělo. Každý detail musí být navržen tak, aby byl co nejlepší.

11. Vypilujte svou práci

Při estetickém vnímání jakéhokoli díla vás mohou některé věci zaujmout. A měli byste se jim vyhýbat. Například pruhy přechodu, rozmazané okraje, písmo nastavení vykreslování, tahy štětcem, které špatně splývají s pozadím. Toto je jen několik příkladů. Ale ve skutečnosti je seznam nekonečný. Vždy věnujte pozornost svému návrhu jako celku, abyste zjistili, zda vše funguje dobře. Každý komponent pak může být analyzován jednotlivě podrobněji.

12. Odložte PSD

To je (společně s použitím mřížky) jedním z důležitých tipů při práci s Photoshopem. Navzdory množství lidí pracujících na projektu a úkolech musíte ve svých souborech udržovat pořádek. Díky tomu bude projekt lehčí a exportují se různé sekce pro urychlení návrhu a sdílení souborů mezi všemi lidmi zapojenými do projektu.

13. Pracujte a doufejte v nejlepší, ale buďte připraveni na nejhorší.

Naším úkolem jako návrhářů je řešit problémy pomocí různých omezení. Musíme vytvořit web, který bude fungovat nejen za těch nejideálnějších podmínek, ale i v situacích vyšší moci. Uživatel například používá nejmenší obrazovku k prohlížení webových stránek, na kterých by měl také vypadat pohodlně. To je náš úkol. Stránka musí perfektně fungovat na všech obrazovkách.

14. Posedněte designem, dokud ho nebudete nenávidět.

Pokud jste zapálení pro svou práci, je to skvělé. Kdykoli něco dodělám, pilně to zkontroluji, výsledek si vychutnám a dokonce si to vytisknu jako screenshot a pověsím na zeď. Jak pracuji, dostávám se k poslednímu bodu práce, kdy projekt nenávidím v tom smyslu, že pokud se vám vaše předchozí práce nelíbí, je to známka růstu a zralosti. Můžete to pak nějak předělat, nebo se prostě v budoucnu poučit z chyb.

15. Než se o ně podělíte s klienty, nevěnujte jim příliš mnoho času.

Při prezentaci konceptů interaktivního designu klientům se ujistěte, že jste na stejné vlně. Pak nebudete muset dělat tisíc designových možností a můžete pokračovat v práci klidně a sebevědomě. Ale pokud se klient nezamiluje do vaší původní designové vize, pak bude stát hodně úsilí dát dohromady vše, co bude milovat. Ať se dá říct cokoli, klienti jsou různí. Věci nepůjdou vždy hladce.

16. Návrhář! Staňte se nejlepším přítelem vývojáře!

Vývojáři jsou kreativní lidé a svou práci milují stejně jako vy. Ne všichni jsou ale do projektu zahrnuti od samého začátku a často zasahují až do samotného procesu, když už jejich úsilí není potřeba. Není to správné. Mnoho skvělých nápadů pochází od týmu vývojářů, se kterými se spojíte pro společnou věc. Proto i zde byste se měli ujistit, že jste s nimi na stejné vlně. Společná práce pomůže dokončit projekt efektivně s využitím všech nápadů.

17. Vysvětlete vše, jako bych byl čtyřleté dítě.

Důležité je nejen design dotvořit, ale i adekvátně prezentovat. A hlavně je to všem jasné. Vaše nejlepší práce může být ignorována, pokud jiní nemohou přijít na to. Vždy mějte na paměti, že ustanovení, kterým rozumíte, mohou být pro běžného člověka jako vyšší matematika, tedy temný les. Prezentujte svou práci přístupným způsobem.

18. Milujte každý ze svých nápadů, ale nepřipoutejte se k nim příliš.

Existuje tenká hranice mezi státem na místě a respektem k ostatním v týmu. Jako designér pevně věřím v to, co dělám, ale také musím být otevřený kompromisům. Nezapomeňte, že existuje více než jedno unikátní řešení. A ne nutně vaše.

19. Postupujte podle návrhu

Pokud pracujete v agentuře, pravděpodobně jste již pochopili, jaké to je zkoušet si poradit s novým projektem, když ten předchozí byl právě dokončen. Na rozdíl od všeobecného přesvědčení vaše práce nekončí doručením PSD a stylů. Pokud vám skutečně záleží na vašich klientech a vašem zisku, promluvte si o projektu se svými vývojáři. Možná budete potřebovat pomoc s pixely atd. Ujistěte se, že je vše perfektní.

20. Sledujte svůj pokrok

V designérských kruzích všichni rádi uvažujeme nejen o výsledku, ale také o samotném procesu. Může se stát, že nejlepší část projektu se z nějakého důvodu ztratí v archivech. Poté, co je projekt dokončen a schválen zákazníkem/vývojářem, zkuste vytvořit tematickou krátkou recenzi speciálně pro jednotlivé fáze vaší práce. To je velmi užitečné, protože získáte souhlas, zkušenosti a zpětnou vazbu, čímž zvýšíte úroveň důvěry klienta.

Pojďme vytvořit plnohodnotné rozložení designu webových stránek ve Photoshopu. Začneme rozložením stránky a poté přejdeme k navrhování jejích jednotlivých prvků. Výsledkem bude moderní rozložení webové stránky připravené k rozložení:

Jeho klíčovými vlastnostmi jsou vodorovné pruhy pro oddělení obsahu, barevné záhlaví, portfolio, dvouřádkové hlavní rozložení a zápatí s odkazy:

Před jako vytvořit webovou stránku ve Photoshopu, je lepší načrtnout hlavní obrysy na papír:

Návrh rozložení vám také pomůže vytvořit strukturu a získat představu o nejlepších pozicích pro klíčové prvky návrhu:

Při vytváření nového dokumentu v Adobe Photoshopu upravím velikost rozvržení tak, aby se vešlo na běžný širokoúhlý monitor, abych měl dobrou představu o celkovém vzhledu webu:

Pomocí vodítek změřte šířku 960 pixelů ve středu dokumentu a vytvořte základní mřížku pro umístění prvků stránky:

Začněme vytvářet design webových stránek ve Photoshopu s hlavičkou. Proveďte výběr přes celou šířku dokumentu a vyplňte jej bílou barvou. Dvojitým kliknutím na vrstvu otevřete Styly vrstev a přidejte " Překrytí přechodem» ( Překrytí přechodem) s vertikálním přechodem z šedé do bílé:

Dále nakreslíme hlavní oblast záhlaví, kde bude umístěn doporučený materiál. Na nové vrstvě proveďte výběr a poté použijte styl " Překrytí přechodem„se dvěma barvami. Přidejte také jemný vnitřní stín, který dodá náčrtu hloubku:

S oblastí záhlaví s vybranou maskou stiskněte CTRL+SHIFT+C pro zkopírování kombinovaných dat a poté je vložte do nové vrstvy. Přejděte na kartu Filtr > Šum > Přidat šum pro vytvoření jednoduché textury, pak nastavte režim prolnutí na "Multiply" a snižte krytí na vhodnou hodnotu:

Dále pokračujeme tvorbou webu ve Photoshopu, vložením loga společnosti a jeho umístěním do mřížky. Přidat styl" Překrytí přechodem" s nastavením odpovídajícím barvám záhlaví a poté vytvořte měkký vnitřní stín:

Pomocí textového nástroje vytvořte hlavní navigační nabídku, nastavte barvu písma na středně šedou a pro aktivní odkaz použijte mírně tmavší odstín:

Záhlaví je skvělé místo pro představení vašich stránek. S jasným pozadím přitahuje hlavní pozornost uživatele. Použijte tento prostor k umístění atraktivního úvodního nadpisu s vlastním písmem, které odpovídá image společnosti:

Pokračujte v podrobnostech úvodního obsahu, ale tentokrát použijte rodiny písem Arial nebo Helvetica, aby bylo možné text umístit do html bez nahrazování obrázků:

Před dokončením webu ve Photoshopu umístěte obrázek notebooku doprostřed. To dobře zapadá do obrazu fiktivní společnosti a vytváří skvělý tematický prostor pro zobrazení ukázek práce na obrazovce počítače:

Zdůrazněte tuto oblast radiálním gradientem přicházejícím zpoza počítače. Tento dodatečný dotyk pomůže zvednout prvek nad stránkou:

Pod hlavním nadpisem vytvořte další výběr a vyplňte jej bílo-šedým přechodem:

Rozdělte střední část stránky na dva sloupce s vodítky připojenými k čarám mřížky. Vlevo budeme mít panel hlavního obsahu a vpravo tenký postranní panel. Pomocí nástroje Text přidejte ukázkový text:

Oblast hlavního obsahu níže může obsahovat prostor pro zobrazení nejnovějších blogových příspěvků. Rozdělte tento sloupec na další dva sloupce a načrtněte vzorové položky. Odkazy v záhlaví by uživatelé měli považovat za klikatelné, takže změňte jejich barvu, abyste získali vizuální vodítko:

Při vytváření webových stránek od začátku ve Photoshopu a rozložení používáme „ Obdélník se zaoblenými rohy", abyste na postranním panelu nakreslili obdélník. Na původní barvě nezáleží, protože její styl změníme v dalším kroku:

Poklepejte na vrstvu a přidejte několik stylů vrstev, včetně přechodu z šedé do bílé, tenkého šedého tahu a jemného vnitřního stínu:

Tento postranní panel použijte k návrhu sekce Doporučený projekt ( Vybraný projekt). Jeho prvky mohou zahrnovat malé fotografie a pasáže textu:

Nakreslete další obdélník, který použijete jako tlačítko. Přidejte několik stylů vrstev jako " Překrytí přechodem" a "Tah", aby styl tlačítka odpovídal celkovému šedému motivu:

Vytvořte krátký a smysluplný popisek tlačítka, který uživatele povzbudí k procházení webu a zobrazení budoucích projektů:

Označte konec obsahu nakreslením oblasti zápatí na obrazovce. Vyplňte tento prostor světle šedou barvou, abyste jej odlišili od oblasti hlavního obsahu:

Pokračujme ve vytváření webu ve Photoshopu nakreslením kulaté masky a jejím vyplněním radiálním přechodem od černé po průhlednou. Stiskněte Ctrl+T pro transformaci výběru, zmáčkněte a roztáhněte vytvořenou oblast tak, abyste vytvořili dlouhý, stínový obrázek:

Vycentrujte stín na obrazovce a poté odstraňte přebytečný prostor nad suterénem. Výsledkem je jemný stín, který „zvedá“ hlavní stránku a přidává do designu trochu detailů:

Zápatí je skvělé místo pro zobrazení nepodstatných prvků stránky. Například formuláře pro autorizaci uživatele. Upřesněte návrh pomocí textového nástroje a poté nakreslete několik vstupních polí. Okraje doplňte jemným vnitřním stínem.

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 se obsah nachází;
• 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.

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 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.

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.