Fanisivuston suunnittelu askel askeleelta

Tämä julkaisu on kypsynyt ja valmisteltu jo pitkään. Alun perin sen piti tulla jatkoksi artikkelisarjalle "Fanikäytävän perustaminen" (yksi ja kaksi). Mikä siis tuo artikkeli tekee Fable 3 -blogissa? Vastaus on yksinkertainen: mitä tulee suunnitteluun, ilman aivan konkreettista esimerkkiä on vaikea selittää mitään. Ei ole olemassa pallomaista suunnittelua tyhjiössä. Siksi, kun päätimme hetki sitten käynnistää yhden fanisivustomme, joka on omistettu Fable-pelisarjalle, ajattelin, että tämä on se esimerkki, jonka avulla voin "jakaa viisauteni".

Itse asiassa en tietenkään ollut tavoittelemassa elämän suuren salaisuuden paljastamista tai opettamassa, miten luoda ainutlaatuisia suunnitelmia fani-sivustolle yhdellä artikkelilla. Suunnittelun aihe on valtava ja monipuolinen, jotta yksi suunnittelija voisi täysin selittää sen yhden työn esimerkillä... Haluan myös heti ilmaista, että tämä ei ole Photoshop-opetus. Sellaisia löytyy riittävästi ilman minua, googlaa avuksi. Kirjoittajana oletan, että olet jo perehtynyt Photoshopin perustoimintoihin, joten älä odota vaiheittaisia ohjeita "napsauta tätä", "siirry tuonne". Tämä ei ole Photoshop-opetus, vaan mestarikurssi suunnittelun luomisessa. Kertoon kuinka itse työskentelen, ja annan vinkkejä ja salaisuuksia, jotka eivät oikeasti ole salaisuuksia, mutta joista usein unohtaa. Aloitetaan :)

Valmistele maalausteline ja kangas

Tässä tapauksessa maalaustelineenä on, kuten olet jo voinut arvata, Photoshop CS4, ja kankaana on alkuperäinen, vielä tyhjennetty uusi tiedosto. "Photoshop-työt" ohella on myös muita ohjelmia, esimerkiksi Gimp. Jotkut pystyvät työskentelemään Corel Draw'ssa. Mutta jollain tapaa, parempaa ohjelmaa verkkosuunnitteluun ei ole vielä keksitty. Tämä on verkkosuunnittelijan perusväline. Myös Corel Draw tai Adobe Illustrator voivat olla käytössä erilaisten komponenttien luomiseen, mutta "kokoamaan" maketista on kaikkein kätevintä Photoshopissa.

Olemme selvittäneet maalaustelineen, nyt on aika siirtyä kankaaseen. Tässä kannattaa muistaa näytön tarkkuudet. Viisi vuotta sitten 1024x768 resoluutio hallitsi kaikkialla, ja 1280x960 oli vasta alussa. Pari vuotta sitten 1680x1050 ja 1600x1200 pidettiin korkeana resoluutiona. Tänään oletuksena Full HD -näytöt ovat yhä yleistymässä, joten korkeimpana tarkkuutena meidän pitäisi suunnata 1920x1080. Silti 1024x768 ei ole kiirehtinyt jäämään eläkkeelle, joten se on meidän alarajamme. Itse asiassa leveys on tärkein, koska sivustomme on pitkä kuten 90 % kaikista verkkosivustoista.

Aiemmin oli muotia tehdä "venyviä" verkkosivustoja. Eli, erilliset suunnitteluelementit koostuivat toistuvista komponenteista, minkä ansiosta sivusto venyi käyttäjän näyttöresoluutiossa. Mutta Full HD: n tultua tällaisesta mukauttamisesta käyttäjän näyttöön on tullut epäesteettistä. Inhimillinen silmä on sellainen, että tietoa, joka on sijoitettu käsivarren etäisyydelle, on helppo havaita, kun se on leveydeltään A4-paperin kokoinen. Kaikki, mikä on laajempaa, ei ole enää tarkennuksessa. Siksi sisältöosa on viime aikoina tavallisesti tehty kapeaksi, ja vasemmalle ja oikealle jäävät tilat täytetään jonkinlaisella taustakoristeella. Ja näin lampaiden on oltava tyytyväisiä, ja sudet pysyvät hengissä :) Joten, sisältöalueemme on 1000 pikseliä (älä unohda, että selaimessa oikealla on vieritysnauha, joka "vie" nuo 24 pikseliä 1024: stä). Siten meidän taustakoristeiden "marginaalit" ovat (1920-1000)/2=460 pikseliä vasemmalla ja oikealla. Jotta en vahingossa menisi tämän alueen yli, käytän ohjaimia. Käytän kunnon viivoja ja "vetelen" ohjaimia haluttuihin paikkoihin. Voit myös merkitä heti keskikohdan kankaastamme. Olen vielä suunnilleen merkinnyt korkeutta arvioimaani kohtaa, johon varaan sivuston yläosan, johon se tulee liikkuvat, mutta "muistutuksen" olen itselleni jättänyt. Kaikki, ennakkotyö on päätetty. Siirrymme valmistavaan :)

Valmistava työ on suoritettu

Hae inspiraatiota

Tämä vaihe on kaikkein yksinkertaisin ja samalla vaikein. Sinun on kerättävä materiaalia, josta muotoilemme suunnitelman. Jos olet ammattilaiskuvataiteilija, voit tietenkin itse piirtää kaikki tarvittavat taustakuvat ja käyttöliittymäelementit tai antaa sen tiimillesi... Toisaalta, silloin kysymys kuuluukin, mitä sinä, Artemi Tatjanovich Andrejevich, teet tässä artikkelissa? :) Tämä artikkeli on aloittelijoille. Tarvitsemme teemalevyjä ja elementtejä käyttöliittymäämme tai ainakin sitä, josta voimme luoda nämä elementit. Todennäköisesti ensimmäisellä kerralla et saa kaikkea tarvittavaa työhösi, ja siksi taiteen ja inspiraation etsimiseen on palattava vielä useita kertoja. Aloitan yleensä viralliselta verkkosivustolta, sitten liikun suurille fanisivustoille, jos niitä on. Ja sitten siirryn Google- ja Yandex-kuva-hakuun. Huomaa, että käytän molempia hakukoneita, koska hakutulokset eroavat voimakkaasti. Siellä, missä yksi epäonnistuu, toinen löytää tonnikaupalla materiaalia. On hyvä, että taidetta on paljon, suuria pelin käyttöliittymien kaappauskuvia, kehittäjä julkaisee paljon taustakuvia... mutta useimmiten sinulta puuttuu jotain.

Etsintäni tuloksena löysin paljon taidetta Fablesta ja muulta eri pelisarjalta. Mutta kolmannesta osasta kauniita taideteoksia on vain kourallinen. Mutta kerää kaikki: taustakuvat, konseptit, kaappauskuvat... Et koskaan tiedä, mikä saattaa tulla käyttöön. En tule rasittamaan sinua täydellisillä löydetyillä materiaaleilla. Spoilerissa löydät ne elementit, jotka lopulta muodostivat käytännön suunnittelun pohjan.

Tämä kehys jaettiin lopulta moneksi erilliseksi käyttöliittymäelementiksi


Ensimmäinen kunnollinen taideteos, joka löydettiin kolmannesta osasta

Tämä on toinen taide. Kaikki, enempää ei löytynyt tarvittavasta tyylistä

Ja tämä taide otettiin heti taustaksi. Se ei ole täydellinen, mutta parempaa ei löytynyt.

Taidetta toisesta osasta tarvittiin jopa työn loppuvaiheessa

Missä olisi logot?

Aloita työ

Nyt voimme alkaa työstää. Vinkkinä, tallennan säännöllisesti työni tulokset uusilla nimillä, pitäen kirjaa versioista. Oletusarvoisesti ensimmäinen tulos on versio 0_1, sitten seuraavat 0_2, 0_3 jne. Versio 1_0 tulee, kun uskot, että olet saanut kaiken haluamasi aikaan ja voit alkaa näyttämään työsi arvioijille/ystävillesi/asiakkaille. Todennäköisesti, että suunnittelu vaatii muokkauksia. Sitten tulevat versiot 1_1, 1_2 jne. Tämä on kätevää seurata omaa edistystäsi ja myös, että tarvittaessa voit palata vanhempien versioiden ideoihin tai poimia sieltä jonkin elementin, jonka nykyisessä versiossa olet poistanut tai muuttanut tunnistamattomaksi.

Ja yksi neuvo, Photoshopissa kaikki elementtisi on säilytettävä erillisillä kerroksilla. Älä laiskottele antamasta niille heti mielekkäitä nimiä, ja koota erään tietyn elementin kerrokset ctrl+b-toiminnolla. Kun tiedostossasi on yli 100 kerrosta, niiden tunnistaminen ilman merkintöjä ja ryhmittelyä on erittäin vaikeaa.

Mutta tarpeeksi puhetta, on aika katsasta ensimmäinen tulos. Vaikka tämä ei ole edes ensimmäinen, tämä on melkein nollaversio:

Tässä vaiheessa on piirretty suurin piirtein alue sisällölle, taiteet ovat suunnilleen paikoillaan, missä niiden pitäisi olla. Kaikkialla näkyy jo sekä näkyviä että näkymättömiä elementtejä, joiden pitäisi myöhemmin