A rajongói oldal tervezése lépésről lépésre

Ez a poszt már régóta érlelődött és készült. Eredetileg egy ciklust kellett volna folytatnia a "Fan oldal létrehozása" cikkeknek (ez és kettő). De mégis miért van ez a cikk a Fable 3 blogban? A válasz egyszerű: ha a design nem egy adott példán alapul, akkor szinte semmit sem lehet elmagyarázni. A design nem létezik üres térben. Ezért amikor egy ideje úgy döntöttünk, hogy újraindítunk egy Fable játéksorozattal foglalkozó fan oldalt, úgy éreztem, hogy ez az a példa, amivel "megoszthatom a tudásomat".

Valójában nem az volt a célom, hogy felfedjem a világmindenség nagy titkát, vagy hogy egyetlen cikkel megtanítsak egyedi design-t készíteni a fan oldalatokhoz. A design témája hatalmas és sokrétű ahhoz, hogy egyetlen designer teljes mértékben kifejtsen egyetlen munkán keresztül... Szeretném egyértelművé tenni, hogy ez nem egy Photoshop oktatóanyag. Számos van belőlük, a Google segít. Mint szerző azt feltételezem, hogy már ismeritek a Photoshop funkcióit, így a lépésről lépésre történő útmutatót, mint "kattints ide", "ugorj oda", ne is várjátok. Ez nem egy Photoshop óra, hanem egy design mesterkurzus. Elmondom, hogyan dolgozom, néhány trükköt és titkot osztok meg, amelyek valójában nem titkok, de valamiért gyakran elfelejtik őket. Lássunk neki :)

Készítsük elő a festővásznat

A mi esetünkben a festővászon, ahogy már kitalálhattátok, Photoshop CS4, a vászon pedig az alap, még üres új fájlunk. A "fotózást" leszámítva más programok is léteznek, például Gimp. Néhány ember képes Corel Draw-ban dolgozni is. De úgy tűnik, hogy a Photoshopon kívül az emberiség még nem talált ki jobb programot a webes designhoz. Ez a webdesigner fő eszköze. A Corel Draw vagy az Adobe Illustrator használható az egyes design elemek létrehozásához, de a makett "összerakása" a Photoshopban a legegyszerűbb.

Megértettük a "festővásznat", most jöjjön a vászon. Itt érdemes megemlíteni a képernyőfelbontást. Körülbelül öt évvel ezelőtt a 1024x768 felbontás uralkodott, és a 1280x960 csak most kezdett el teret hódítani. Pár évvel ezelőtt a 1680x1050 és 1600x1200 nagy felbontásnak számított. Ma viszont a Full HD monitorok már a mindennapok normájává válik, így a maximális felbontás szempontjából érdemes a 1920x1080-ra orientálódni. Ellenben a 1024x768 még nem siet a nyugdíjba vonulással, tehát ez a mi alsó határunk. Valójában a szélesség sokkal fontosabb, mivel a weboldalunk magassága nagyon hosszú lesz, mint ahogy a weben található oldalak 90%-a.

Régen divatos volt "nyúlós" oldalakat létrehozni. Azaz a design különálló elemei ismétlődő elemekből álltak, így az weboldal a felhasználó képernyőjének felbontásához igazodott. De a Full HD megjelenésével ez a módszer nem tűnik esztétikusnak. Az emberi szem úgy van kialakítva, hogy az egy karnyújtásnyira lévő információt nagyon jól észleli, ha szélessége körülbelül A4-es ívnyi. Minden, ami szélesebb, már nem a fókuszban van. Ezért az utóbbi időben a tartalmi részt szűknek szokták alakítani, a bal és jobb oldali részeket pedig valamilyen háttér dekorral töltik ki. Így mindegy, hogy a juhok jóllakjanak, és a farkasok is épek maradjanak :) Tehát a tartalmi részünk szélessége 1000 pixel lesz (ne feledjétek, hogy a böngészőben jobbra van egy görgetősáv, ami "elvisz" 24 pixelt a 1024-ből). Így a "mezőink" a háttér dekorációval (1920-1000)/2=460 pixel lesz balra és jobbra. Hogy véletlenül se lépjünk ki ebből a területből, irányítószalagokat használok. A rács megjelenítési módjában egyszerűen áthúzom az egeret, és "átviszem" a segédvonalakat a megfelelő helyekre. A középpontot is ki lehet jelölni. Én még körülbelül a magasságon is megjelöltem azt a helyet, amit a honlap fejlécének szánok, a jövőben az el fog mozdulni, de a "vágás" megvan. Ennyi, az előkészület befejeződött. Lépjünk át a felkészülésre :)

Az előkészületek befejeződtek

Merítsünk inspirációt

Ez a szakasz egyszerű és egyszerre nehéz. Össze kell gyűjtened az anyagot, amelyből kialakítjuk a design-t. Ha profi művész vagy, természetesen saját magadnak elkészítheted az összes szükséges illusztrációt és elemét, vagy megkérheted a csapatodat... Másrészt, ebben az esetben mit keresel itt, Artemy Tatyanych Andreevich? :) Ez egy kezdőknek szóló cikk. Tematikus illusztrációkra és elemekre lesz szükségünk a felhasználói felülethez, vagy legalábbis arra, amiből ezeket az elemeket elkészíthetjük. Valószínű, hogy az első alkalommal nem tudsz mindent összegyűjteni, amire a munkádhoz szükséged van, így a képkeresés és az inspiráció valószínűleg többször is vissza fog vinni. Általában a hivatalos weboldallal kezdem a keresést, majd átmegyek a nagyobb fanoldalakra, ha léteznek. Aztán átváltok a Google és Yandex képfkeresésére. Fontos megjegyezni, hogy mindkét keresőmotorban való keresés szükséges, mivel az eredmények nagyon eltérnek. Ahol az egyik összeomlik, a másik tonnányi anyagot talál. Jól jön, ha sok illusztráció van, ha nagy képernyőképek készültek a játék interfészéről, vagy ha a fejlesztő sok háttérképet publikált... de a legtöbb esetben azért valamiből hiányozni fog.

A kereséseim során sok illusztrációt találtam a Fable-hez és más játékokhoz is. De a harmadik részhez alig találtam szép illusztrációkat. De gyűjtsd össze mindet: háttérképek, koncepciók, képernyőképek... Soha nem tudhatod, mi fog jönni majd jól. A talált anyagok teljes gyűjteményével nem foglak untatni. A spoilerben megtalálod azokat az elemeket, amelyek végül lettek a design alapjai.

Ez a keret végül egy csomó különálló felhasználói interfész elemre lett szétszedve


Az első normális illusztráció, amit a harmadik részhez találtam

Ez a második illusztráció. Ennyi, nem találtunk más szükséges stílusban semmit

Ez az illusztráció azonnal háttérként került. Nem tökéletes, de jobbat nem találtunk.

Az art a második részhez a munka végén már szükségessé vált

Hová ismernénk logó nélkül?

Kezdjük el a munkát

Most már nekiláthatunk a munkának. Azonnal megosztok egy kis trükköt, rendszeresen új néven mentem el a munkáim eredményeit, így nyomon követve a verziótörténetet. Alapértelmezés szerint az első eredmény a 0_1 verzió, ezt követi a 0_2, 0_3 és így tovább. Az 1_0 verzió akkor jön el, amikor úgy érzed, hogy mindent megcsináltál, amit akartál, és elkezdheti megmutatni a munkádat a kritikusoknak/barátoknak/megrendelőknek. Valószínű, hogy a design módosításokat igényel. Akkor jönnek a verziók 1_1, 1_2 stb. Ez kényelmes, hogy nyomon követhessük a saját fejlődésünket, és ha szükséges, visszatérhessünk régi verziók ötleteihez, vagy felvegyünk valami elemet, amit a jelenlegi verzióban megváltoztattál vagy eltüntettél.

Még egy tanács, a Photoshopban minden elemed külön rétegekben tárolódik. Ne légy lusta, hogy értelmes neveket adj nekik, majd csoportosítsd a különböző elemek rétegeit a ctrl+b funkcióval. Amikor a fájlodban 100 réteg fölé nő, a jelzések és csoportosítás nélkül rendkívül nehéz eligibilizálni.

De elég a fecsegésből, ideje megnézni az első eredményt. Bár ez nem is az első, ez szinte nulla:

Ezen a ponton körülbelül körvonalazva van a tartalom területe, az illusztrációk körülbelül azokon a helyeken vannak, ahol annak lenniük kellene. Mindenütt láthatóak már a látható és nem látható elemek, amelyeknek a jövőben illeszkedniük kell a designba. Vagy nem. Tovább lépünk. Ezen a szakaszon egyébként két fontos technikai munkát végeztem. Nagyon gondosan eltávolították a háttérből a karakterünket, és a keretet apró darabokra földelték.

Az átvágáshoz gyakran nem az radírt, hanem rétegmásolókat használok. Feketén festjük azokat a területeket, amelyeket rejteni szeretnénk, és a fehérnek hagyjuk a látható részeket. A szürkék a félig átlátszóság területei. Ennek köszönhetően, ha eltávolítok valamit, amit csak eltávolítottunk, egyszerűen vissza tudom állítani a helyükre. A maximális felbontású kiemelt karaktert külön mentettem el, hogy ne vesszen el.

A keretet darabokba vágtam, apró darabkokat levágva és átkonvertálva textúrává. A sarkok háromszor visszaverődött bal felső sarkai. Így szimmetriát kínálok.

Eredetileg sötét stílusú designot terveztem, ami a két első fő illusztrációinkkal állt kapcsolatban. Puha ecsetek és különböző keverési módok segítségével elértem, hogy egy alapjában színes háttérképet sötét vászonná alakítsak. A tartalmi részt úgy próbáltam ábrázolni, mint egy háromszorosra hajtogatott pergament, amelyet arany keret körül ölelt. A korona, mint a kulcsfontosságú elem, továbbra is ott volt a designban. Lassanként kezdtem el figyelni a választott betűtípust a menüszöveg számára.

Szép cirill betűtípusok nehezen elérhetők. Mivel általában nincsenek. Azaz léteznek angol karakterek, de oroszok nem. Vagy az orosz verzióért sok pénzt kérnek, vagy az orosz megcsinálást amatőr ötelmeiből gyártották, ami vacakul van. Vagy minden rendben van, de a betűtípus nehezen olvasható :) Az illusztráción a betűtípus neve bonzai. Akinek szüksége van rá, szóljon. Megosztom. Folytassuk.

Néhány szenvedés után fokozatosan kezdett valami értelmes körvonalazódni. Elkészült az első verziója a főmenünek (később változni fog, de a minta többször is jól fog jönni). A figyelmes kollégák észlelhetik, hogy a bal és a jobb oldali menü elemei a mi koronáink összeillesztett kanyarai a keret ból. Ne félj kombinálni különböző felhasználói interfész elemeket. Együtt gyakran meglepő, de kellemest eredményt adnak. Ezen kívül megváltozott a fő tartalmi rész koncepciója. Próbáltam valami olyan típusú királyi mantilt ábrázolni, de az eredmény nagyon nem tetszett. Ezért jött a tudatos döntés, hogy megváltoztatom a koncepciót.

Ez még nem új iteráció, ez oikeed az a funció, ahol kísérletezem, hogy hogy fog ez kinézni egy világosabb verzióban és "mantia" nélkül? - Nyilvánvalóan jobb, de ezért tovább kell gondolkodnunk. Az elemek a bal felső sarokban "betűi" a fleur betűtípusból. Nagyszerű dolog felhasználói interfész elemek készítéséhez. Egy teljes csokor kanyart és virágot egységként.

És itt már valami új. Kísérleteztem a karakterünk helyével az oldal fejléceában, de a fő dolog nem ez. Elhagytam a vízszintes menüt és megpróbálkoztam egy függőleges menü létrehozásával. Hát, tulajdonképpen nem rossz. A középső menü az értelekben az aljára került.

Még egy közbülső iteráció, ahol összehasonlítom a vízszintes menüt és a függőffset, és gondolkodok azon, hogy a kattintásra szétnyíló oldalblokkokat kéne csinálni.

Ez az a pillanat, amikor biztosan szükséged van a korábban elmentett verziókra. A design teljesen eltévedt. A széltől megtöltött görgetővel és a kerettel a közepén, csökkentett keretekkel a mellékletekhez nagyon rosszul néz ki. Elhagytam ezt a verziót, visszatértem egy lépést hátra, és egy másik irányba indultam.

Ez az a pillanat, amelyre vártunk! Visszatérve egy lépést hátra, játszadoztam az elemeinkkel, végül elkészült egy makett, amely közel áll a végsőhöz. Minden alap elemet összesítettem, és a helyén van: fő menü, oldalsó blokkok, tartalom, fejléc és lábléc. Ha megnézed, akkor észreveheted, hogy néhány dolog a korábban sikertelen iterációból jól jött össze. A szöveges elrendezést a Dragon Age weboldaláról vettem, csupán hogy megbecsüljem a szöveg elhelyezkedését. A főszöveget a Palatino Linotype-tól vettem. Ez egy szép, klasszikus betűtípus, ami nagyon fontos. Igazából ez azt jelenti, hogy az oldaladat minden Windows felhasználó zökkenőmentesen láthatja. Van mód, természetesen, saját betűtípusokat használni, amiket az oldal be tud tölteni a felhasználónak, de ez plusz forgalom és zűrzavart okozhat a betűtípus megjelenésében különböző böngészőkben. Nem javaslom, hogy ezzel sokat szórakozz. Az interneten nagyszerű táblázat található a Windows szokásos betűtípusaival. Én használom, nektek is javaslom. A fejlécben azonban dekoratív betűtípusokat is lehet és kell is használni. A weboldal nevét ebben a szakaszában találtam egy fantasztikus betűtípust, amelynek neve Algerius Caps. Érezd a különbséget, ahonnan ez volt!

Nagyon érdekes szakasza, ami jól megmutatja, hogy még a befejező designban is mindig lehet valami javítani. Először is, végleg elhagytam az alsó menüt és végleg átalakítottam footeré. Emlékeztek, hogy azt mondtam, hogy a vízszintes menü a későbbiekben jól fog jönni? - Jól is jött. Az elkészített makett eltakarítva lett a már nem szükséges elemekkel, hogy ne zsúfolják el a design-t. De a legfontosabb az, hogy a koronának végül megtaláltuk a helyét a designban. Isten veled, kard a hüvelyben! Egyik illusztrációnkat kiszabadítjuk a kezeinkből a koronát és a kardot rejtve. Az átfedés munka a logó eltávolításakor, ami a kesztyű felett lógott, egyszerűen filigrán volt. Ez az eset, amikor a 1000%-os nagyítás nem árt. Az is elkezdtem dolgozni a háttér színkorrekcióján. Túl sárgás-zöldellő volt. Elnyomtam. Erre általában egy külön réteges réteget használok, amit szükséges színnel töltök fel, soft light (lágy fény) keverési móddal, de az igényeknek megfelelően más keverési módokat is ki lehet próbálni. Ebben az esetben a gamma kék rétegen keresztül érzékelhető kielégíteni.

Folyamatosan finomítottam a design-t. Kiigazítottam a háttér illusztrációját, ismét rejtekes színkorrectrálás amit eddig maradt. Szinte az összes elmaradott maradéknak eltávolítottam. De még észrevettem, hogy a háttérben a cím színe halványan néz ki. Ezért megváltoztattam a stilizálást, és kontrasztossá tettem a háttérrel, de ennek ellenére a weboldal fő színeivel dolgozva.

A célegyenes

Pááááááááámm! Íme, a 1_0 verzió. Valójában nem végső, de ezen a ponton úgy döntöttem, hogy megmutatom a makettet a barátaimnak, és meghallgatom a kritikákat. Itt már nincs elhanyagolás, a háttér újra átszínezve lett. De ami még fontosabb, hozzáadtunk egy kereső menüt és közösségi média gombokat. Kezdetben csak az RSS fog működni, de hamarosan megnyitják a Twitter, YouTube csatornák és Facebook oldalt.

Az első fontos megjegyzés - a karakterünkre nyilvánvalóan magányos az oldal fejlécében. Szüksége van társra. Sajnos, a harmadik részhez nem találtam szép női illusztrációkat, de a második részhez készült vándorról érkezett az utolsó percekben. És igazából is. Hiszen az oldal nem csak a harmadik részről szól. A fiúnknak el kellett hagynia, mivel ő felesleges volt.

De ez még nem minden, újabb megjegyzések érkeztek. Az oldal túlságosan arany hatású lett, és az aranykeret a központi tartalmi blokkban túl sok helyet foglalt el. Nos, a színt az oldali effektek használatával tompítottam, a keretet csökkentettem. A láncok, amelyek rontották a design-t és bonyolították a vágást, szintén eltávolításra kerültek. Elérkezett a pillanat, amelyre vártunk. A végleges verzió:

www.Fable-game.ru

Utószó

Valójában előttünk volt még a vágás, amely szintén néhány apróbb módosítást hozott. Például a háttér és a hősök elhelyezkedését. További stílusjavítások, hibák és bugok keresése. De ez már technikai ügy. A legnehezebb már mögöttünk van. Ha ezt a fázist elérted, akkor nyugodtan megdicsérheted magadat, és merészen elhelyezheted az új munkádat a portfóliódban. Aztán pedig foglalkozhatsz az oldal tartalmának feltöltésével és kiegészítésével, megtervezve az optimális struktúrát... de ez már egy teljesen más történet :)

Őszintén remélem, hogy a "képekkel és képekről szóló történetem" elnyerte a tetszéseteket, és főleg, hogy segíteni fog az általatok saját magatok kreatív, egyedi, csodálatos designek elkészítésében a saját oldalaidhoz. Várom a kérdéseiteket, javaslataitokat vagy megjegyzéseiteket a kommentekben.

*A design és a szöveg szerzője én vagyok, Ksandr\_Warfire

A tartalom kifejezetten a GAMER.ru számára készült