Blogin Ulkoasun Uusiminen - Esittely

No jopas!

Koulussa oli nyt meneillään Graafisen Suunnitelun kurssi, jossa meidän pitää vetää uusiksi joku olemassa oleva tuote. Itse päätin käyttää tilaisuuden hyväksi ja päivittää tämän cosplay-blogin ulkoasun oikein tarkalla silmällä. Maanantaina (eli huomenna) meillä on toteutetun tuotteen esittelyn aika, joten päätin esitellä blogin ulkoasun näyttämällä blogia ja tätä merkintää, jossa vähän kertoilen mitä tein ja miten ja miksi. Saatte kestää siis hieman ei-cosplay tekstiä.

Olin tehnyt ja valinnut muutettavat asiat jo aikaisemmin, mutta vasta tänään iskin ne järjetyksessä blogiin. Esittelen vaiheet ja suunnitelmat siinä järjetyksessä, missä ne blogiin asetin.

Kaikki uudet piirrokset, taustat, favicon ja banneri on tehty Adobe Illustrator CS6 vektoriohjelmalla, jonka käyttämistä kyseisellä kurssilla harjoiteltiin InDesignin lisäksi.

Ensiksi siirryin blogin perusteisiin, eli mallin suunnittelutyökaluun. Aivan esimmäisenä vaihdoin mallin edellisestä "Hento ote" mallista Mielettömään malliin ja vielä sellaiseen, jossa mallin valmiit värit ja asettelut olisivat mahdollisimman yksinkertaiset. Tällä tavalla mallin omat jutut eivät olisi häiritsemässä omia värimaailmojani tai asetteluja.

Taustakuva oli yksi isoimmista säädöistä, mitä jouduin kohtaamaan ja teinkin niitä useamman kuin yhden. Valitsin pitkän aikaa sivuston värimaailmaa ja taustan värit määräytyisivät sen mukaan. Alun perin värejä oli tarkoitus olla kuusi kappaletta, mutta koska sivustolla ei ole niin paljoa väritettävää rajoitin paletin neljään väriin.

Alkuperäinen väripaletti. Lähde

Valitut värit

Vähän harmitti tiputtaa tuo ihana vahva punainen pois, mutta blogissani pääasiana on kuitenkin enemmän itse teksti ja cosplay kuin se, kuinka näyttävä tausta tai ulkomuoto muuten on. Punainen kiinnitti liikaa huomiota ja sai siksi jäädä pois.

Tein yhteensä kolme taustaa. Kaksi enemmän alkuperäisen väripaletin mukaan ja yhden tuolla neljän värin paletilla. Raidat olivat kivat, mutta se teki blogista ehkä liian levottoman kiitoradan näköisen.

Paksut raidat

Ohuet raidat

Ja mikäs tämä on??

Kun Operaatio Raidat epäonnistui aloin epätoivoisesti etsimään inspiraatiota erilaiseen taustaan. Yritin etsiä mukavia toistuvia kuvioita sisältäviä taustakuvia googlen kuvahaulla, koska en tuntenut olevani vielä tarpeeksi taitava luomaan sellaista tyhjästä.

Tämmöiset löytyi. Lähde

Rajasin tuon ylärivin keskellä olevan kuvion, heitin Illustratorissa taustalle ja kokosin oman taustani omilla väreilläni siihen päälle. Poistin kuvan sitten lopullisesta tietysti taustalta. Kokeilin kaikkia taustoja vuoronperään blogiin mallin muokkauksessa ja tuskailin niiden kanssa. Lopulta rauhallisin ja hillityin voitti. Näissä kuvissa on vielä käytössä vanha malli ja siksi se näyttää erilaiselta kuin lopullinen.

Palstojen leveyksiin en juurikaan puuttunut, enkä myöskään sivun asetteluun. Halusin kaikkien gadget-juttujen olevan sivun vasemmassa reunassa kuten aikaisemmin.

Asettelua

Tämän jälkeen siirryin suunnittelutyökalussa "lisäasetukset"-kohtaan, missä pääkohteeni olivat sivun tekstit. Bloggerin oma fontti-valikoima rajoitti tekemistäni jonkin verran, kun yritin muka ensin katsella netistä hyviä ohjeita ja ehdotuksia eri fonttien yhdistämisestä. Kun löysin hyvän parin, jompaa kumpaa tai kumpaakaan ei löytynyt bloggerin kirjastosta ja jouduin jatkamaan etsintään. Lopulta valitsin yhden suositellut fontin ja selasin bloggerin omaa kirjastoa ja testailin eri fontteja yhteen, kunnes löysin omasta mielestäni hyvän parivaljakon.

Illustratorissa tekemäni bannerin otsikon fontti on Thonburi, mutta koska banneri on niin erillään muusta tekstistä niin en kauheasti mallaillut sitä muiden tekstien kanssa yhteen. Otsikoiden fontiksi valikoitui Cuprum ja muun tekstin (kuten leipäteksti) fontiksi Calibri. Calibri valikoitui leipätekstin fontiksi, koska se on tarpeeksi luettavaa muttei kuitenkaan mitään maailman tylsintä. Cuprum taas, koska se on luettavaa pienissä määrin, mutta vähän erilaista luomaan kontrastia Calibrin kanssa.

Entinen

Uusi

Värien puolesta vaihdoin kaikkea uuden paletin mukaan. Itse leipäteksti sai (jälleen luettavuuden nimeen) tummimman värin, mitä paletistani löytyi. Päivämäärä sai Calibri fontin ja vaaleanpunaisen värin, koska päivämäärä ja aika eivät ole yleisesti merkinnän olennaisimpia asioita. Sitä korkeintaan vilkaistaan, eikä tarvitse lukea riveittäin. Otsikoista tuli turkooseja.

Sivupalkista löytyvät linkit ovat klikkaamattomina samaa tummaa sinistä kuin muu pienempi teksti, mutta muuttuu vaaleaksi punaiseksi klikkauksen jälkeen. Gadget-osioiden otsikot ovat muiden otsikoiden tapaan turkooseja.

Vanhat sivujutut

Uudet sivujutut

Pidän myös erittäin paljon siitä, kuinka uusi malli teki jokaisesta gadgetista erillisen laatikon leijumaan taustan päälle, kun edellisessä ne olivat kaikki yhdessä pötkössä ja eroteltu vain ohuella viivalla. Tämä tekee niistä selvästi erillisiä osia ja tekee ulkonäöstä selkeämmän.

Säätöä. Valkoinen tausta ja vaalea reunus, jota tuskin näkee?

Kun kaikki asiat oli hommailtu kuntoon niin siirryin pois suunnittelutyökalusta ja aloin säätämään blogia sen ulkoasun puolelta.

Ulkoasun ja gadget-juttujen muuntelu näyttääpi tältä

Ensimmäisenä latasin tekemäni Favicon-tunnuksen ja uuden bannerin. Molemmat on tehty Illustrator-ohjelmalla.  Favicon ei ole vielä nyt sen pari tuntia sitten ladattuani suostu näkymään blogissa, mutta toivon että se piakkoin sinne ilmestyy. Ajatus puhekuplasta oli heti ensimmäisenä mielessäni, koska se olisi tarpeeksi yksinkertainen muoto näkyäkseen noinkin pienessä kuvassa. Kuplan sisälle kokeilin kirjoittaa Woodi Cosplayn lyhennessä WC mutta siitäpä tulikin liian vessameininki joten piti keksiä muuta. Gessoa Matolla GS ei myöskään ollut järkevä. Cosplay oli sanana liian pitkä ja Woodi samaten. Kokeilin myös esim. sydäntä tai tähteä, mutta lopulta päädyin nerokkaaseen OHO sanaan. Tarpeeksi lyhyt ja hauska ja kuvastaa minua ja blogiani ihan tarpeeksi paljon, hahaha!

Ikkupikkuinen Favicon

Isompi versio ihan vaan for the lulz

Favicon noudattaa blogin muuta värimaailmaa, mutta bannerissa se ei oikein onnistunut, koska kyseessä on tekemiäni asuja ja niiden värimaailmat vaihtelevat toisistaan hyvin paljon. Tein uuden bannerin aiemman käsintehdyn bannerin päälle ja vaihdoin useita siinä olleita asuja uudempiin. Alkuperäinen idea ja design banneriin oli niin kiva, etten halunnut sitä ruveta muuttamaan. Tein siitä vain siistimmän ja asuiltaan päivitetyn.

Entinen banneri

Bannerit päälekkäin Illustratorissa

Lähes lopullinen banneri (iso)

The Lopullinen

Bannerin asettelun jälkeen pohdin omien blogin sisällä olevien sivujen listan paikkaa. Kokeilin siirtää niitä ylös bannerin alapuolelle, mutta totesin sen näyttävän huonolta ja siirsin ne takaisin oikeaan reunaan muiden gadgettien sekaan. Kannatti kuitenkin kokeilla. Olisin voinut kokeilla paikan vaihdosta vielä eri teemoilla, mutta kaikki tähän astinen työni (fontit, niiden koot, värit ym.) olisivat hävinneet kuina tuhka tuuleen, joten en halunnut alkaa säätämään.

Joo ei

Lopuksi tein vielä pari uutta muutosta gadget-osioon, kuten lisäsin sivuihin itsestäni kertovan osion sekä lyhyen listan luettavista cosplay-blogeista. Lista on tällä hetkellä aika suppea, mutta lisäilen sinne tulevaisuudessa vielä blogeja.

Emuinfo

Cosplay-lukemista

Muuta en sitten blogista tainnut muuttaakkaan, mutta olihan tuossa jo aika monta asiaa laitettu uusiksi. Päivitys myös "asut" listaan uusimmat asut (Naomi ja Sphintus), sekä kirjoittelin uusiksi tuon oman avatarini vierestä löytyvän esittelyn. "Valmiit Tekemäni Cosplay-asut" pitkä sivun nimi muuttui lyhemmäksi "Asut"osioksi.

Toivottavasti te lukijat pidätte uudesta ulkoasusta yhtä paljon kuin minä! (nyt pitäisi vielä tehdä se taitettava ja painoon laitettava juttu tätä kurssia varten uh oh)

Entinen (ps. random valkoinen palkki ei kuulu joukkoon en tiedä mistä se tuli?)

Lopullinen

Lupaan päivittää pian taas cosplay-aiheisesti!

- Woodi