Návod na design fanouškovské stránky krok za krokem

Tento příspěvek se chystal a připravoval už velmi dlouho. Původně měl vyjít jako pokračování cyklu článků „Vytvoření fanstránky“ (první a druhá). Co tedy dělá tento článek na blogu Fable 3? Odpověď je jednoduchá: v případě designu bez jasného konkrétního příkladu se o čemkoliv těžko hovoří. Neexistuje „sférický design ve vakuu“. Proto, když jsme před nějakým časem rozhodli o restartu jednoho z našich fanstránek věnovaných sérii her Fable, rozhodl jsem se, že to bude právě ten příklad, kterým budu „sdílet své znalosti“.

Ve skutečnosti jsem samozřejmě neměl v úmyslu odhalit velké tajemství vesmíru nebo naučit pomocí jednoho článku, jak vytvořit jedinečný design pro vaši fanstránku. Téma designu je obsáhlé a mnohostranné, tak aby ho jeden designér mohl plně rozebrat na příkladu jedné práce... Ještě chci hned na začátku poznamenat, že to není lekce používání Photoshopu. Těchto lekcí je dost i bez mě, Google pomáhá. Jako autor předpokládám, že již znáte základy funkčnosti Photoshopu, takže nečekejte krokové instrukce „klikněte sem“, „přejděte tam“. To není lekce Photoshopu, to je workshop o vytváření designu. Řeknu vám, jak pracuji, naznačím některé triky a tajemství, o kterých se často zapomíná, i když to nejsou žádná tajemství. Pojďme na to :)

Připravujeme malířský stojan a plátno

V našem případě bude malířským stojanem, jak jste si asi mohli domyslet, Photoshop CS4, a plátnem náš výchozí, zatím prázdný nový soubor. Kromě „fotomontáží“ existují také další programy, například Gimp. Někteří se dokonce dokážou orientovat v Corel Draw. Ale tak či onak, lidstvo zatím nevymyslelo lepší program pro webdesign než Photoshop. To je hlavní nástroj webdesignéra. Ten samý Corel Draw nebo Adobe Illustrator mohou být použity k vytvoření jednotlivých prvků vašeho designu, ale „skládat“ maket je nejjednodušší ve Photoshopu.

S „malířským stojanem“ jsme se vypořádali, je čas na plátno. Zde stojí za to zmínit rozlišení obrazovky. Před pěti lety vládlo všude rozlišení 1024x768, zatímco 1280x960 začínalo teprve dobývat mysl lidí. Před pár lety se rozlišení 1680x1050 a 1600x1200 považovalo za vysoké. Dnes se monitory s výchozím Full HD stávají stále více normou, tj. orientovat se v kvalitě maximálního rozlišení bychom měli na 1920x1080. Nicméně 1024x768 stále nespěchá do důchodu, takže to je naše dolní hranice. Ve skutečnosti je principielní větší šířka, protože naše stránka bude dlouhá jako 90 % všech stránek na internetu.

Dříve bylo módní vytvářet „táhnoucí se“ weby. Tedy jednotlivé prvky designu se skládaly z opakujících se prvků, čímž se stránka rozšiřovala do šířky podle rozlišení uživatele. Ale s příchodem Full HD se tato metoda úpravy stránky podle rozlišení uživatele stala neestetickou. Člověk oko je uspořádáno tak, že informace umístěné v dosahu paže jsou dobře vnímané ze šířky přibližně rovné listu A4. Vše, co je širší - už není zaostřeno. Proto je naposledy běžně obvyklé dělat obsahovou část úzkou, přičemž zbývající prostor vlevo a vpravo je vyplněn nějakou pozadím. Tak, aby byly ovce syté a vlci celí :) A tak naše obsahová část bude mít 1000 pixelů (nezapomeňte, že v prohlížeči je vpravo lišta scroll, která „sežere“ 24 pixelů z 1024). Podle toho naše oblast pro „okraje“ s pozadím bude (1920-1000)/2=460 pixelů vlevo a vpravo. Abych se náhodou nedostal mimo tuto oblast, používám vodítka. V režimu zapnutých pravítek jednoduše posunu kurzor a „přetahuji“ vodítka na potřebná místa. Můžete také okamžitě označit střed našeho plátna. Ještě jsem zhruba označil výšku místa, které si rezervuji pro záhlaví stránky, v budoucnu se bude pohybovat, ale „záseky“ jsem si označil. Všechno, předběžná práce je dokončena. Přecházíme k přípravné :)

Předběžná příprava je dokončena

Čerpáme inspiraci

Tato fáze je zároveň nejjednodušší i nejtěžší. Budete muset nasbírat materiál, z něhož budeme tvarovat náš design. Pokud jste profesionální umělec, samozřejmě můžete si všechny potřebné arte a prvky rozhraní nakreslit sami nebo to svěřit svému týmu... Na druhou stranu, v takovém případě, co jste, Artemij Tatyanyč Andrejeviči, zapomněl v tomto článku? :) Tento článek je určen pro začátečníky. Budeme potřebovat tematické arte a prvky pro naše rozhraní, nebo alespoň to, z čeho tyto prvky můžeme udělat. Pravděpodobně, že na první pokus nashromáždíte všechno potřebné pro svou práci, takže se k hledání artů a inspirace budete muset vrátit ještě několikrát. Obvykle začínám hledat na oficiální stránce, pak se přesouvám na velké fanstránky, pokud takové jsou. A po tom se přepínám na hledání obrázků Googlem a Yandexem. A to jak v obou vyhledávačích, protože výsledky se podstatně liší. Tam, kde selže jeden, jiný najde tuny materiálu. Dobře, pokud je art hodně, jsou velké screenshoty rozhraní hry, vývojář vydává spoustu tapet... ale častěji než ne vám něco, ale bude chybět.

V důsledku mých hledání bylo nalezeno nemalé množství artů k Fable a nejen, k různým částem hry. Ale k třetí části krásných artů bylo poskrovnu. Ale shromážděte vše: tapety, koncepty, screenshoty... Nikdy nevíte, co se vám může hodit. Plnou sbírku nalezeného materiálu vás nebudu mučit. V spoileru naleznete ty prvky, které nakonec položily základ designu.

Tenhle rám byl nakonec rozebrán na pěknou hromadu jednotlivých prvků rozhraní


První normální art, nalezený k třetí části

Tohle je druhý art. Víc nic v potřebné stylistice nebylo nalezeno

A tenhle art byl rovnou vzat jako pozadí. Není ideální, ale lepší nebylo.

Art ke druhé části se nakonec použil v samém závěru práce

Kam bez loga?

Začínáme práci

Teď můžeme začít pracovat. Hned vám poradím malou fintu, pravidelně ukládám výsledky práce pod novým jménem, abych dodržel historii verzí. Ve výchozím nastavení je první výsledek verzí 0_1, poté následují 0_2, 0_3 atd. Verze 1_0 nastává tehdy, když se domníváte, že jste udělali vše, co jste chtěli, a můžete začít ukazovat práci recenzentům/přátelům/zakazníkům. Pravděpodobně design vyžaduje úpravy. Pak se objeví verze 1_1, 1_2 atd. To je výhodné pro sledování vlastního pokroku, a také pro případ, že byste se chtěli vrátit k nápadům z starší verze nebo vytáhnout odtud nějaký prvek, který jste v současné verzi odstranili nebo změnili k nepoznání.

A ještě jedna rada, ve Photoshopu jsou všechny vaše prvky uloženy na jednotlivých vrstvách. Nezapomeňte jim dávat smysluplné názvy, a vrstvy nějakého zvláštního prvku seskupovat pomocí funkce ctrl+b. Když se ve vašem souboru hromadí přes 100 vrstev, bez podpisů a seskupení se je skutečně těžké odlišit.

Ale dost povídání, je čas podívat se na první výsledek. I když to není první, to je téměř nula:

V této fázi je přibližně naznačena oblast pro obsah, arty jsou umístěny orientačně na místech, kde by mohly být. Všechny viditelné i neviditelné prvky, které se později musí integrovat do designu, jsou už viditelné. Nebo se neintegrují. Posouváme se dál. Na této fázi byla také provedena dvě důležité technické práce. Velmi pečlivě byl vyříznut náš charakter z pozadí, a rám byl rozebrán na malé části.

Pro vyřezávání obvykle častěji používám nikoli gumu, ale masky vrstev. Černou barvou zakrýváme oblasti, které je třeba skrýt, a bílé barvy ponecháváme viditelné části. Polotóny šedé - oblasti poloprůhlednosti. Díky tomu, pokud něco zbytečně vymažu, lze to snadno vrátit zpět. Vydělanou postavu v maximálním rozlišení jsem uložil zvlášť, aby se neztratila.

Rám byl rozebrán na části odřezáním stejně malých kousků a přetvořením na textury. Rohy - to jsou ještě třikrát odražené levé horní rohy. Tak jsem dosáhl symetrie.

Původně byl design plánován temný, stylem blízký našim prvním dvěma hlavním artům. Pomocí jemných štětců a různých režimů míchání se podařilo přetvořit pozadí docela světlý obrázek na docela temnou plátno. Obsahovou část jsem se pokusil zobrazit ve formě složeného pergamenu, který měla obklopovat vám známá zlatá rám. Koruna, jako jeden z klíčových prvků, stále přetrvávala v designu. Začal jsem se pomalu rozhlížet po písmu pro menu.

S krásnými cyrilickými písmem je menší napětí. Protože, jak to obvykle bývá, není jich příliš. To znamená, že anglické písmena existují, ale ruské ne. Buď za ruskou verzi žádají nemalé peníze, nebo ruská verze je udělaná lidovými mistry křivě a prasácky. No, nebo je vše dobře, ale písmo je nečitelně :) Písmo na obrázku se jmenuje bonzai. Kdo potřebuje, neváhejte se ozvat. Podělím se. Jdeme dál.

Po některých mučivých chvílích začalo po kouskách prokreslovat něco smysluplného. Byla vytvořena první verze hlavního menu (to se pak změní, ale příprava se nám hodí vícekrát). Pozorní lidé si mohou všimnout, že levá a pravá část tohoto menu je naše koruna spojená se vzorem z rámu. Nebojte se kombinovat různé prvky rozhraní. Společně často dávají nečekaný, ale příjemný výsledek. Kromě toho se změnila koncepce hlavní obsahové části. Snažil jsem se to ztvárnit jako královský plášť, ale výsledek mi vůbec nelíbil. A proto přišlo pevné rozhodnutí, koncepci změnit.

Toto ještě není nová iterace, toto je v podstatě jen zkouška „jak to bude vypadat ve světlém provedení a bez „pláště“? - Zřetelně lépe, ale je třeba přemýšlet dál. Mimochodem prvky vlevo nahoře jsou „písmena“ písma fleur. Skvělá věc pro vytváření prvků rozhraní. Celá řada spirál a květin v jedné lahvi.

A tady je něco nového. Experimentoval jsem s umístěním našeho hrdiny v záhlaví stránky, ale hlavní není to. Vzdal jsem se horizontálního menu a pokusil se udělat vertikální. A co, vypadá to docela dobře. A centrální menu se nám přesunulo do patičky.

Ještě jedna mezifázová iterace, kde jsem srovnával horizontální menu a vertikální, přičemž jsem uvažoval nad tím, zda udělat boční bloky rozšiřující se po kliknutí.

Toto je ten případ, kdy vám přijdou vhod uložené předchozí verze. Design šel úplně tím nesprávným směrem. Rolovací list přes celou šířku obsahu spolu s rámem uprostřed a zmenšenými rámy pro boční bloky vypadá odporně. Tento variant jsem odmítl, vrátil jsem se o krok zpět a dmých se jiným směrem.

A zde je moment pravdy! Vrátil se o krok zpět, kouzlil s našimi prvky, nakonec vzniknul maket, který je již velmi blízko k finálnímu. Všechny základní prvky jsou shromážděny a na svém místě: hlavní menu, boční bloky, obsah, záhlaví a patička. Pokud se pozorně podíváte, můžete si všimnout, že něco z předchozí neúspěšné iterace se mi přece jen hodilo. Textová úprava byla brána od boku z webu o Dragon Age, jen abych prozkoumal umístění textu. Jako hlavní bylo přijato Palatino Linotype. To je krásné standardní písmo, což je velmi důležité. V tomto případě se vaše stránky bez problémů zobrazí u všech uživatelů Windows. Existuje samozřejmě způsob, jak používat vlastní písma, která si stránky načtou do cache uživatelům, ale to je zbytečný provoz a problémy se zobrazením písma v různých prohlížečích. Nedoporučuji tím být příliš fascinovaný. Na internetu existuje skvělá tabulka standardních písem Windows. Sám ji používám a doporučuji i vám. A v záhlaví, můžete a dokonce byste měli používat dekorativní písma. Pro název stránky jsem na této fázi našel úžasné písmo, které se jmenuje Algerius Caps. Poznejte rozdíl s tím, co bylo!

Vcelku zajímavá fáze, která názorně ukazuje, že i v blízkosti dokončení designu je vždy možné něco zlepšit. Za prvé, přece jsem se vzdal dolního menu a definitivně se vtěsnalo do patičky. Pamatujete, říkal jsem, že horizontální menu se nám ještě hodí? - Hodilo se. Maketa byla zbavena již nepotřebných prvků, aby se nám design nezahltil. Ale nejdůležitější je, že koruna v designu našla konečné místo. Dolů meč z pouzdra! Bereme jeden z našich artů a vyřezáváme z něj ruku s mečem a korunou. Práce na vykreslení loga, které viselo přes rukavici, byla prostě filigránská. To je ten případ, kdy měřítko nad 1000% je někdy neškodné. A navíc jsem začal pracovat s barevnou korekcí našeho pozadí. Bylo příliš žluto-zelené. Utlumil jsem ho. Na to obvykle používám další vrstvu, vyplněnou potřebnou barvou, s typem míchání soft light (jemné světlo), ale podle potřeby lze zkusit i další typy míchání. V tomto případě byla gamma upravena pomocí modré vrstvy.

Pokračoval jsem v vylepšování designu. Opravil jsem umístění artu na pozadí, znovu jsem upravil jeho barevnou harmonii. Smazal jsem téměř celý zbytek po předchozím čištění, jen jeden spirál jsem zmeškal. Ale také jsem si všiml, že název stránky se na pozadí nebe je bledý. Proto jsem upravil styl a udělal ho kontrastním k pozadí, ale přesto s použitím základních barev stránky.

Finální rovina

Párraaaam! Tady je verze 1_0. Ve skutečnosti to není konečná, ale právě v této fázi jsem se rozhodl ukázat maketu svým přátelům a poslechnout si kritiku. Už žádný odpad zde není, znovu byl pozadí retušován. Ale co je ještě důležité, byla přidána meníčko s vyhledáváním a tlačítky sociálních sítí. Původně bude fungovat pouze RSS, ale brzy bude otevřen Twitter, YouTube kanál a stránka na Facebooku.

První důležité poznámka - našemu hrdinovi je jasně osamělo v záhlaví stránky. Potřebuje společnost. Bohužel, krásné ženské arty k třetí části nebyly nalezeny, ale na pomoc přišla cikánka z artu k druhé části. Je to vlastně v pořádku. Sice je stránka nejen o třetí části. Výměnou za dívku našemu hrdinovi bylo nutné se zbavit pistole, ta byla evidentně zbytečná.

Ale tím to neskončilo, přibyla další várka poznámek. Stránka vyšla až příliš křiklavě zlatá a zlatý rám centrální blok obsahové zpotřebovával příliš mnoho místa. No co, odstín se tlumil pomocí vrstvových efektů, rámec zmenšil. Řetězy, které zatěžovaly design a komplikovaly rozložení, byly také odstraněny. Nastal moment pravdy. Finální verze:

www.Fable-game.ru

Po prejdě

Ve skutečnosti nás ještě čekala kvalitní vyrobení, což také přineslo své malé korekce. Například umístění pozadí a hrdinů v jeho přístupnosti. Byly také revize stylů, hledání chyb a nekalostí. Ale to je již technika. To nejhorší je za námi. Když jste se dostali do této fáze, můžete si oddychnout, pochválit se a bez váhání zařadit do svého portfolia novou práci. Poté se pustit do naplňování a naplňování webu materiály, pečlivě promýšlet optimální strukturu... ale to je už úplně jiný příběh :)

Upřímně doufám, že můj „příběh s obrázky a o obrázcích“ se vám líbil, a hlavně, že vám pomůže při vytváření vašich vlastních krásných, jedinečných, překvapivých designů pro vaše stránky. Čekám na vaše otázky, návrhy nebo připomínky v komentářích.

*Autorem designu a textu jsem já, Ksandr\_Warfire

Materiál byl speciálně připraven pro GAMER.ru