Suntuubi-palvelussa käytetään evästeitä. Palvelua käyttämällä hyväksyt evästeiden käytön. Lue lisää. OK

Ohjeet ulkoasun tekoon

Razeback, miten teet ulkoasusi?

Minulta on usein kysytty apua ja vinkkejä ulkkien tekoon. Monet ovat kysyneet jopa, voisinko opettaa heitä tekemään ulkkia. Tämä on kaikille teille, jotka olette kiinnostuneet ulkkien teosta ettekä osaa, tai vaikka vain tavasta, jolla minä ulkoasuja väkrään. Tässä on ohje, kuvien kera, miten minä itse ulkoasuja teen. 

Kuvassa, seurananne ulkan teossa, on äitini belggari-rouva Ronja. Kuvan olen itse ottanut. Tekstuurit joita käytän ulkassa on shizoosta. HUOM! Muistakaa, että minun tapani tehdä ulkkia ei ole se ainoa oikea. Meillä kaikilla on omat tapamme, halumme ja tyylimme. Olen kirjoittanut tekstin ohjeistavalla tyylillä, enkä "minä teen näin" -tyylillä. Näppäinkomennot ovat PC:lle! Jos jollakulla on Mac, otan mieluusti vastaan myös sen näppäinkomennot.

Teen ulkoasut ohjelmalla Gimp 2.8

Kuvia klikkaamalla saat ne suuremmiksi!

Ensimmäisenä vaiheena on tietenkin kuvan etsiminen ja ulkan leveyden valinta. Aukaise kuva gimpiin tai vaihtoehtoisesti kopioi ja liitä se vaikka nettisivulta. Uuden tiedoston luot painamalla Tiedosto → Uusi...
Tämän ulkoasun leveydeksi päätin 780px. Korkeudella ei ole väliä, mutta kannattaa pitää se suuhteelisena leveyteen nähden. Minulla se on 800px.

Kun olet tehnyt uuden tiedoson, liitä kuvasi siihen. Kuvan liittäminen netistä tapahtuu niin, että painat hiiren oikeaa näppäintä kuvan päällä ja klikkaat Kopioi. Jos olet tallentanut kuvan koneellesi, avaa kuva Gimpissä (oikea hiiren painike → avaa sovelluksessa → Gimp), ja kopioi kuva. Kumman tahansa jälkeen mene luomaasi pohjaan ja paina taustan päällä oikeaa hiiren nappulaa uudestaan. Valitse Muokkaa → Liitä ja kuvasi on paikoillaan. Pidä huoli että kuvasi tulee uudeksi tasoksi, eikä liity Taustaväriin.

Jos et ole tyytyväinen kuvasi väreihin, voit muokata niitä menemällä valikkoon Värit ja valitsemalla haluamasi asetus. Muista että asetus muokkaa vain sitä kuvaa, joka on valitsemallasi tasolla. Muokkausvaihtoehtoja on monia, enkä ala kaikkia avamaan, vaan saatte itse koittaa ja ihmetellä. Itse muokatessani kuvia, käytän eniten Säätöarvoja ja Käyrää

Jos kuvasi on liian iso tai pieni, voit muokata kuvan kokoa Skaalaustyökalulla. Sen ikoni kaksi sinistä laatikkoa, pienemmästä laatikosta menee valkoinen nuoli suurempaan. Kun painat työkalua, avautuu ikkuna, josta kannattaa kiinnittää kettingin näköinen ikoni. Näin kuva suurenee ja pienenee suhteessa


 


 

Seuraavaksi lisäämme tekstuurit. Tekstuureja kannattaa tallentaa omalle koneelleen ja monilta sivuilta niitä saa vain ladattuna. Itse mietin ensin, millaiseksi haluan ulkan värimaailman ja tässä ulkassa päädyin vaaleaan ruskeaan. Avaa tekstuurit gimpiin ja ne avautuvat erillisille välilehdille, joka näkyy yläpalkissa. Tekstuurit siirretään ulkan pohjaan ihan vain kopioimalla ja liittämällä. Kun lisäät kuvan pohjaan, paina liittämisen jälkeen sivun näköistä ikonia. Tämä tekee kuvista oman tasonsa.

Tasot ovat erittäin tärkeä asia ja ne auttavat ulkan rakentamisessa. Tasot näkyvät oikessa työkalupalkissa kuvina ja tekstinä. Niitä voi siirrellä toistensa päälle tai alle ja niitä voi muokata niin ettei muu kuva sotkeennu. Kuten huomaatte, kaikki tekstuurit tulivat omille tasoilleen. Tekstuureja minulla saattaa alussa olla jopa yli 15, mutta karsin seuraavassa vaiheessa turhat pois.

Tasojen blendausta, eli tilaa, voi muokata taso-listan yläpuolelta, kohdasta Tila. Kuten kuvasta huomaatte, tekstuurin läpi näkee ja se saa nimensä mukaisen tarkoituksen. Valitsen jokaiselle tekstuurille oman, ulkoasuun sopivan tilan ja läpinäkyvyyden ja näin katson, sopiiko tekstuuri ulkkaan vai ei. Voit piilottaa muut tekstuurit silmän kuvasta, joka on tason kuvan vierellä. Kuva ei poistu, vaan piiloutuu niin, että voit tarkastella sen alla olevia elementtejä vaivattomasti. Voit poistaa tason painamalla roskakoria listan oikeasta alanurkasta. Muista että voit siirtää kuvia Siirtotyökalulla ja muuttaa niiden kokoa Skaalaustyökalulla.


 

Kun olen asettanut tekstuurit paikoilleen, poistanut kaiken turhan ja päättänyt, että yläkuva näyttää hyvältä, voi alkaa miettimään millaisen teen lopusta ulkasta. Teenkö navigaatiosta ylänavin vai sivunavin. Onko sisällön tausta tasavärinen, vai jatkuuko ulkoasu yläkuvasta alas päin. Tästä ulkasta päätin tehdä sivunavillisen, jonka tausta jatkuu yläkuvasta.

Älkää häiriintykö taustaväristä, vaihdoin sen välissä. Väri vaihdetaan valitsemalla uusi edustaväri ja painamalla tasoa ämpärityökalulla.

Tehdään uusi taso. Paina taso-listan alapuolelta sivun näköistä ikonia ja eteesi pitäisi avautua popup-ikkuna, jossa on samat asetukset kuin kuvassa. Tasolle ei tarvitse antaa nimeä, ellei halua. Ainoa asetus, joka pitää varmistaa, on Tason täyttötapa. Me ei haluta tasosta minkään väristä, vaan läpinäkyvän. Niimpä ruksaamme sen rastin ja painamme OK. 


 

Muista varmistaa että luomasi taso menee listan ylimmäiseksi!

Sisällön taustan jatkuessa yläkuvasta, sinun tulee valita valintatyökalulla ensin pieni soiro kuvan alaosasta, läheltä sitä kohtaa, josta haluat sisällön alkavan. Muista vetää soiro kuvan vasemmalta ja oikealta yli, että varmasti kuvan koko leveys tulee valintaan mukaan.

Tuon jälkeen mene suurennustyökalulla lähemmäs kuvan reunaa. Niin lähelle, että näet kuvan pikselit selvästi. Tämän jälkeen valitse uudestaan valintatyökalu ja siirrä valinta vain yhteen pikseliriviin. Siitä rivistä alkaa sisällön jatkuva tausta. Kun tausta on täynnä vain yhden pikselin korkuisia soiroja, se ei katkea, vaan näyttää jatkuvalta yläkuvalta. Omasta mielestäni tämä on todella mukava tapa tehdä sisältöjä ja se sopii melkein kaikkeen.


Sitten pitää kopioida soiro. Paina valinnan sisällä oikeaa hiiren nappia ja mene Muokkaa-valikkoon. Valitse Kopioi näkyvä.

Nyt kun soiro on kopioitu, voit liittää sen. Liitä soiro hiiren oikealla näppäimellä tai vaihtoehtoisesti näppäinkomennolla ctrl-V. (Maceilla cmd-V) Paina ensin ctrl-nappi pohjaan ja napauta V-kirjainta. Kun olet liittänyt soiron, valitse Siirtotyökalu. Tämän jälkeen sinun pitää liittää soiroja allekkain. Nopein tapa on vain liittää näppäinkomennolla soiro, napauttaa sitä kerran siirtotyökalun kanssa ja painaa nuolinäppäin alas. Tämän jälkeen voit painaa ctrl-V ja nuoli alas vuorotellen, jolloin liität soiron ja siirrät sen aina alemmas. Voit jatkaa näin ulkan alaosaan saakka, taikka zoomata pois, valita suuremman alueen jo liitettyjä soiroja ja liittää niitä allekkain.

Lopputuloksen pitäisi näyttää yläkuvasta lähteviltä viivoilta. Mutta eihän sitä voi näin jättää, sillä tekstihän ei näkyisi tästä mihinkään. Välihuomautuksena, että olen nähnyt todella monta tapausta, joissa sisältö on tehty tällä tavalla ja jätetty ilman tasaista väriä. Se on kamalan näköistä, eikä tekstistä saa mitään selvää, sekä saattaa lukihäiriöiset migreeniin. Lukihäiriöisen ystäväni ansiosta sain tietää, että tasainen tausta tekstille on aina parempi vaihtoehto, kuin kuvallinen. Ja koska haluan antaa asiakkailleni vain parasta, otan kaikki ihmiset huomioon.



Mutta millaisen taustan teemme? Se on sinun päätettävissäsi. Jotta tähän ohjeeseen tulisi mahdollisimman paljon tietoa, teen pyöreäreunaisen taustan, johon yhtyy sekä sisältö että navi. Muista että voit tehdä millaisen taustan tahansa! Tausta tehdään niin, että valitset valintatyökalulla kohdan, johon taustan tahdot. Älä laita sitä alkamaan liian ylhäältä, sillä silloin yläkuvasta menee vain turhaa tilaa. Jos haluat pyöreät kulmat valintaan, valitse vasemman työkalupalkin alaosasta Pyöristetyt kulmat. Kulmien suuruutta saa säädeltyä mittarista.

Sitten kun taustan valinta miellyttää silmääsi, sinun pitää valita väri. Se kannattaa tehdä Pipetillä. Pipetillä voit valita värin mistä tahansa kuvastasi, muista vain ruksittaa asetus Yhdistetty valinta vasemman palkin alaosasta. Valitse väri siitä kohdasta, jossa väri on lähimpänä sitä, mitä ajattelit taustaksi. Sen jälkeen voit muokata väriä vielä painamalla ylempää värilaattaa työkalupakin alapuolella.


 

Sopivan värin päätettyäsi, valitse Ämpärityökalu, myös nimellä täyttötyökalu. Samassa kuvassa näette vielä väripaletin, jonka avulla väriä voi vaihtaa. Kun haluat täyttää alueen värillä, ota ämpäri ja klikkaa valinnan sisäosaa. Valinnassa oleva kohta täyttyy värillä.

Jos et ole tyytyväinen väriin, voit vaihtaa väriä ja täyttää sen uudelleen. Jos taustan muoto ei miellytä, voit aina poistaa tason ja tehdä uuden. Voit myös tehdä navigaatiolle oman taustansa ja se tapahtuu aivan samalla tavalla kuin sisällön taustan luominen.

Nyt kun sisällön taustan väri on paikoillaan, emme tarvitse enää valintaa. Sen saa otettua pois menemällä Valitse-valikkoon ja painamalla kohtaa Ei mitään. Yhtä hyvin voit taas käyttää oikeaa hiiren painiketta, jonka jälkeen ilmestyy kaikki samat valikot, mitkä näet ylhäällä, tai sitten näppäin komentoa. Jos ette ole vielä huomanneet, näppäinkommennot näkyvät aina valinnan vierellä. Tässä tapauksessa valinnan voi poistaa shift-ctrl-A komennolla. 


 

Sitten teemme varjon taustalle. Pakko ei ole, mutta varjo tuo hieman ulottuvuutta ulkoasulle. Varjon saa tehtyä siten, että valitset ensin tason, jossa esineesi on, mille haluat varjon. Varmista että oikea taso on valittuna. Sen jälkeen paina Suotimet-valikosta → Valo ja varjoVarjo. Suotimia on todella paljon ja jokainen tekee erilaista jälkeä. Näitäkin oppii vain koittamalla ja tekemällä.

Painettuasi Varjoa, avautuu tämän näköinen ikkuna. Siitä voit valita varjosi kohdistuksen, pehmeyden ja värin. Siirtymä X ja Y tarkoittavat varjon kohtaa. Nolla kummassakin tarkoittaa, että varjo on keskellä kohdetta. Jos laitat X-kohtaan suuremman numeron, varjo siirtyy oikealle. Jos taas Y-kohtaan, varjo siirtyy alas. Jos laitat miinus numeroita (esim -5) varjo siirtyy vastakkaiseen suuntaan. Pehmennyksen säde kertoo kuinka pehmeä ja kuinka pitkälle varjosi ylettyy. 0 tarkoittaa kovareunaista varjoa ja siitä suuremmat numerot pehmeämpiä. Minulla arvo on 15. Se tarkoittaa että varjosta tulee pehmeä ja se ylettyy 15 pikselin päähän taustasta. Lopuksi painat OK.


 

Kun varjo on tehty, teemme ulkoasulle rajat. Olen numeroinut kuvaan vaiheet ja toivon että saatte tästä kuvasta jotian selvää. Rajojen tekeminen ei ole mikään suuri juttu.

1. Ensin tehdään taas uusi taso. Tee siitä myös läpinäkyvä.
2. Valitse koko kuva joko valintatyökalulla, tai ValitseKaikki, tai näppäinkomennolla ctrl-A. (Mac: cmd-A)
3. Täytä valinta haluamallasi värillä, eli minkä väriset reunat haluat ulkoasuusi.

Kun sinulla on valinnassa koko kuvan täyttämä väri, mene ValitsePienennä. Tässä vaiheessa päätät kuinka suuret reunat haluat. Muista että puhumme pikseleistä, eli pienistä neliöistä, joista kuva muodostuu. Minä valitsin 1px reunat, eli kaikista ohuimmat, mutta sinä saat itse päättää, mikä näyttää hyvältä. Kun painat OK, huomaat ehkä kuinka valintasi pienenee ja jättää ulkan reunat valinnan ulkopuolelle.


 

Ylimääräinen väri kumitetaan raa'asti pois. Valitse Kumi ja tee kumista melko iso. Pienellä kumilla on inhottava jynssätä väriä pois.

HUOM muistakaa tarkistaa, että kuminne läpinäkyvyys on 100%. Kuten huomaatte, minulle kävi pieni kämmi, eikä läpinäkyvyys ole täysillä ja jouduin kumittamaan jäämät uudelleen pois. Saatatte huomata seuraavissa kuvissa, mitä käy kun kumin läpinäkyvyys ei ole 100%. Korjasin virheen lopuksi.

Nyt kun ulkoasu on melkein valmis, teemme uuden, värillisen tason. Väri saa olla mikä tahansa. Taso tulee Taustaväri-tason yläpuolelle ja tämän tason avulla teemme varjon koko lopulle ulkoasulle. Poista Taustaväri-taso, ettei se häiritse tekemistäsi.

Ennen kuin teet varjon, tee tämä kaikille tasoille: Paina tasoa oikealla hiiren näppäimellä ja valitse Taso kuvan kokoiseksi. Jos tätä ei tee, tekstuurit ja muut kuvat menevät haluamasi ulkoasun yli, eikä näytä hyvältä. Muista siis tehdä tämä aina, kun teet ulkoasua. Kun olet tämän tehnyt, mene alimmalle tasolle ja tee varjo niin kuin aijemmin teit. Muista varmistaa varjon asetuksia laittaessasi, että kohdassa Salli koon muuttaminen on raksi.

Alemmissa pienissä kuvissa näette, mitä tapahtuu jos tasoja ei rajaa kuvan kokoiseksi. Vasemman puoleisessa en rajannut tasoja ja tein varjon. Kuten huomaatte, tasot näkyvät yläkuvan sivuilla, eikä niitä haluta näkymään. Oikealla puolella taasen olen rajannut tasot ja tehnyt varjot, eikä ne tule yli yläkuvasta. Huomatkaa että minulla on ulkan alla valkoinen tausta. Sitä ei saa näkyä teillä, se vaan auttaa huomaamaan eron. Ulkan alla pitäisi näkyä harmaasävyinen ruudukko, joka osoittaa läpinäkyvyyttä.


 


 

Onneksi olkoon, sinulla on nyt kokonainen layout valmiina! Mutta et ole täysin valmis vielä. Jos haluat, voit lisätä alakuvaan nimesi. Se tehdään Tekstityökalulla. Valitse A-ikoni ja tee rajaus siihen kohtaan mihin haluat tekstiä. Samalla tavalla voit tehdä vaikka sivusi nimen yläkuvaan. Kirjoita haluamasi teksti valintaan ja muokkaa sitä joko valinnan yläpuolelle tulevasta valikosta, tai vasemman palkin alaosasta. Voit myös tehdä tekstillesi varjon, jos haluat.

Kun kaikki on valmista, alkaa osien irroittaminen. Ensimmäisenä yläkuva. Ota valintatyökalu ja rajaa yläkuva siitä kohtaa, mihin sen haluat loppuvan. Vedä rajaus reunoilta yli, ettet vahingossa rajaa kuvasta palaa pois. Yläkuva kannattaa rajata aina siitä kohtaa, mistä olet tehnyt jatkuvan sisällön ja navin. Muista ottaa myös sisällöntausta mukaan yläkuvaan.

Rajattuasi kuvan, mene valikkoon KuvaRajaa valintaan. Näin kuvasi rajautuu juuri siitä kohtaa mistä halusit. Älä huolehdi muista osista, palaamme niihin kyllä myöhemmin.

Ja rajaamasi kuvan pitäisi näyttää nyt tältä. Se on valmis tallennettavaksi. Tallentaaksesi kuvan, valitse TiedostoVie.

Jos painat Tallenna, se tallentaa kuvan vain gimpin lukemaan .xcf -tiedostoksi. Eli jos jätät ulkoasusi kesken, paina tallenna. Jos painat tässä tapauksessa Vie, et pysty enää muokkaamaan tasoja, vaan kaikesta tulee yksi, sama taso. 

Kun painat Vie, pystyt valitsemaan tallennusmuodon itse. Tässä tapauksessa valitset .png-päätteen. Png-tiedostomuoto kykenee lukemaan läpinäkyvyyttä ja sen me haluamme tapahtuvan, sillä ulkoasun varjot ovat läpinäkyviä. Jos valitset tiedostomuodoksi jpg, tulee kuvalle automaattisesti valkoinen taustaväri siihen kohtaan, missä on läpinäkyvyyttä. 

Gimp pystyy lukemaan myös photoshopin psd-tiedostoja!



Tiedoston nimeä miettiessäsi, muista muutama asia: älä käytä ääkkösiä tai merkkejä (. , ; : - ~ ^), sillä monissa paikoissa ne tuottavat ongelmia. Pahimmassa tapauksessa jopa korrputoida, eli rikkoa, tiedostosi. Eli käytä vain aakkosia ja numeroita. Ja muista pistää nimen perään .png, niin kone tallentaa sen oikeaan muotoon. Kun painat Vie, avautuu eteesi uusi ikkuna. Tarkistat, että kohdat, jotka minulla on ruksitettu, on samanlailla myös sinulla. 

Yläkuva on tallennettu, mutta haluamme tallentaa loputkin osat ulkasta. Paina MuokkaaToimintahistoria. Tämän pitäisi avata listan tekemistäsi asioista joko oikean puoleiseen palkkiin, tai erilliseen ikkunaan. Oli miten oli, lopputulos on sama. Uusimmat tapahtumat tulevat alimmaiseksi.

Toimintahistoriasta sinun tulee etsiä viimeisin kuvan rajauksesi. Sitä ennen pitäisi olla sellainen kohta kuin Suorakulmiovalinta. Kun painat sitä, kuvasi menee muutaman askeleen taaksepäin, siihen kohtaan missä rajasit yläkuvaasi.  Valinnan pitäisi olla vielä voimassa ja voit muokata sitä ottamalla valintatyökalu ja raahaamalla valinnan reunoilla olevia laatikoita. Nyt sinun pitää tehdä alakuvalle aivan samanlailla kun teit yläkuvalle. Rajaa tahtomasi alakuva ja tallenna se. Sen jälkeen mene takaisin muutama askel ja selitän kuinka navi ja sisältö saadaan irti toisistaan.


 

Sinulla on nyt ylä- ja alakuva. Seuraavaksi pitää rajata pieni soiro keskeltä kuvaa, siten että lopputulos näyttää kutakuinkin tältä. Paksuudella ei oikeastaan ole väliä, kunhan näet muokata soiroa.

Tässä vaiheessa on hyvä miettiä, minkä kokoisen navigaation haluaa tehdä. Koon näkee vasemman palkin alaosasta. Vasemman puolinen numero on leveys, oikea korkeus. Itse valitsen yleensä viidellä jaollisia lukuja, sillä ne on helpompi muistaa ulkoasuja tehdessä. Mutta tosiaan, sinulla on oltava valintatyökalu koko ajan käytössäsi. Voit vetä valinnan pienemmäksi valinnan oikeassa sivussa olevan palkin avulla. Älä vaihda korkeutta, vaan anna sen olla. Jos korkeus vahingossa vaihtuu, voit vetää valinnan vain kuvan reunojen yli, se ei haittaa. Kun navigaatiosi on sopivan kokoinen, rajaa se valintaan ja tallenna.

Sisällön taustan tekeminen onkin hieman vaikeampi juttu. Kun olet tallentanut navigaatiosi, mene takaisin siihen kohtaan missä rajasit navigaation oikean kokoiseksi. Tällöin saamme sisällöstä tasan oikean kokoisen, eikä se mene yli tai ali yläkuvan.

Nyt sinun pitää kääntää valinta. Paina ValitseKäänteinen. Tällöin valitset juuri sisällön taustan. Rajaa kuva valintaan. Mutta älä hoppuile tallennuksen kanssa, sillä sisällön taustassa on pieni ongelma suntuubissa. Sisällön tausta jostain syystä toistaa itsensä kaksi kertaa päällekkäin. Jos jätät läpinäkyvän varjon samanlaiseksi kuin muissa osissa, sisällön taustan varjo tummentuu kaksinkertaiseksi, eikä näytä hyvältä.

Senpä takia viimeisenä hommana on alentaa varjon läpinäkyvyyttä 50% prosentilla. Prosentti ei ole niin tarkka, eikä muutaman prosentin heitto näy ihmissilmään. Mene alimmalle drop shadow -tasolle ja valitse se. Vaihda läpinäkyvyyttä. Muista että tätä ei tarvitse tehdä, jos ulkoasullasi ei ole varjoa. Eikä tätä myöskään tarvitse tehdä varjolle, jonka teimme tasaiselle väripinnalle. Vain ulkoiset varjot ovat vaarrassa, mennessään sisällön taustaksi. Kun kaikki on valmista, voit tallentaa kuvan ja layouttisi on valmis sivuille ladattavaksi!

   

 

©2017 VİİMΔĶΘŮЯΔ - suntuubi.com