16. maaliskuuta 2013

Näin teen bannerin


Tarvitset:

... Gimpin, jonka voit ladata tästä
... paljon aikaa, minkä määritelmään voit tutustua tästä
... ja sitäkin enemmän kärsivällisyyttä - pahoittelen linkin puuttumista
... ja tärkeinpänä googlen hakukoneen, jonne pääset tästä

Jos kerta kaikki on valmiina, niin aloitetaan vaan.

Aloitan bannerien tekemisen luomalla gimpissä uuden tiedoston (Tiedosto - Uusi). Ruudulle avautuu valkoinen, määrittelemiesi mittojen kokoinen pohja. Tehdessäni bannereita päätän yksi tai kaksi kuvaa, joiden ympärille alan rakentaa banneria. Kun löydän sopivat kuvat, pienennän ne pain-ohjelmalla, koska jostain syystä gimp sumentaa kuvia pienentäessä tosi paljon. Pienennyksen jälkeen avaan ne gimpissä.

Ensimmäinen asia, jonka pohjalle sijoitan, on lähes poikkeuksetta otsikko. Valitsen kivan fontin ja sijoitan otsikon hyvään paikkaan. Sen jälkeen alan rakentamaan banneria kuvien kanssa. Laitan pohjalle ensin valitsemani pääkuvat, ja mietin, miten ne sijoittaisin. Joskus ne ovat todella pienessä roolissa ja joskus taas bannerin pääosassa. Postauksen alussa näkyvää esimerkkibanneria lähdin rakentamaan silmäkuvasta.


Jos päätän rajata kuvan, teen sen vapaa valinta -rajauksella (Työkalut - Valintatyökalut - Vapaa valinta tai Työkalupalkki - Vapaa valinta). Reunaa voi halutessaan pehmentää työkalupalkin alaosassa olevilla asetuksilla, mutta nykyään jätän reunat yleensä pehmentämättä koska niin ne näyttävät luonnollisemmilta. Rajauksen jälkeen asettelen kuvan sopivalle paikalle ja alan miettimään seuraavan sijoittamista.

Rajauksen lisäksi kuville on paljon muitakin vaihtoehtoja. Läpinäkyvään banneriin voi asetella vaikka kehystettyjä kuvia (Suotimet - Koristeet - Lisää reunus). Reunojen värin ja koon Voi valita itse. Kannattaa kokeilla, mikä näyttää omaan silmään parhaimmalta. Värin muutosarvo -kohta kertoo sen, kuinka paljon väri muuttuu reunuksessa. Itse pistän sen ykköseen, koska haluan samanväriset reunat, mutta tässäkin tapauksessa kokeilemalla selviää paras lopputulos.


Jos bannerista ei tule läpinäkyvää, taustallekin voi asetella kuvia. Kun olen valinnut sopivat kuvat ja pienentänyt ne, avaan ne banneripohjan päälle (Tiedosto - Avaa tasona). Kun laittaa uuden kuvan jonkun päälle, kannattaa muistaa painaa Tasopalkista 'Uusi taso' nappulaa, jotta kuva ei yhdisty alempaan. Taustakuvia voi laittaa yhden tai useamman. Useamman kuvan kanssa ne kannattaa häivyttää yhteen kumittamalla.

Kumin (Työkalut - Maalaustyökalut - Kumi tai Työkalupalkki - Kumi) muotoa voi vaihtaa Työkalupalkin alaosassa olevan Sivellin-painikkeen kautta. Siveltimeksi kannattaa valita Circle Fuzzy. Alempaa Skaalaus-kohdasta voi muuttaa siveltimen kokoa mielen mukaan. Muistathan, että kuvien häivyttäminen yhteen toimii vain, jos ne ovat eri tasoilla. Samalla tavalla voi häivyttää myös esimerkiksi rajatun kuvan alaosan, jos näkee sellaisen tarpeelliseksi.


Haluatko rajattuun tai kehystettyyn kuvaan varjon (Suotimet - Valo ja varjo - Varjo)? Valitse haluamasi kuva tasopalkista ja paina hiiren oikeaa näppäintä. Etsi valikosta Alfa valinnaksi -nappula ja klikkaa sitä. Sen jälkeen voit laittaa varjon. Siirtymät X ja Y kertovat, kuinka paljon varjo siirtyy kuvan alta pois pysty- ja leveyssuunnassa. Jos haluat varjon suoraan kuvan alle, vaihda luvuiksi nollat. Pehmennyksen säde muokkaa varjon olemusta - mitä pienempi luku, sitä terävämpi varjo.

Siveltimellä (Työkalut - Maalaustyökalut - Sivellin tai Työkalupalkki - Sivellin) voit laittaa banneriin myös erilaisia brusheja. Gimpissä on valmiina pari tylsää ja yksinkertaista sivellintä, mutta netistä löytyy paljon kivoja. Brushipaketit latautuvat koneellesi Zip-tiedostoina. Pura ne ja vie kansio sen jälkeen Gimpin tiedostoihin (Program Files x86 - GIMP 2.0 - share - gimp - 2.0 - brushes). Avatessasi Gimpin brushit löytyvät sivellinvalikosta.


Muokkausmahdollisuuksia on tosi monta. Kokeilemalla oppii kaikista eniten. Ei kannata tyytyä aina samanlaiseen työtapaan, vaan yrittää tehdä jotain erilaista. On olemassa hyviä ja huonoja bannerintekijöitä. Huonot toistavat itseään, vaikka olisivatkin hyviä. Hyvät ovat monipuolisisa ja massasta erottuvia, vaikka jälki olisikin vähän huonompaa. Loppujen lopuksi hyvänkin jälki voi olla hyvää, mutta huono ei välttämättä koskaan pääse irti kaavoistaan. Kannattaa miettiä, kumpaa kategoriaa haluaa edustaa.

Esimerkkibannerin tekemiseen kului pari tuntia. Pitkästä aikaa olen lopputulokseen tyytyväinen, vaikka toisen rajatun kuvan kypärä venähti inhottavan näköiseksi peilityökalun käytön seurauksena. Muistakaa olla itsekriittisiä, mutta älkää rasittako päätänne jos tuntuu, ettei joku kohta onnistu ollenkaan. Loppujen lopuksi banneri saattaa näyttää muiden mielestä tuhat kertaa paremmalta, kuin omasta.

Pari käytännön vinkkiä:

... Ctrl + C kopioi
... Ctrl + X leikkaa
... Ctrl + V liittää
... Ctrl + Z kumoaa
... Ctrl + S tallentaa
... Kannattaa käyttää tasoja
... Muista tallentaa työ tasaisin väliajoin
... Suosittelen yhdistämään varjot niille kuuluviin tasoihin


Toivottavasti postaus oli hyödyllinen, sillä näin oikeasti sen eteen paljon vaivaa. Jos kysymyksiä ilmenee, niin saa kysyä! (:

78 kommenttia:

  1. Tää oli tosi kiva, täytyypä kokeilla joku päivä! :)

    VastaaPoista
  2. Uu! Tää oli just kiva :) Mua vaa suututtaa ku en saa sitä gimppii ladattuu.. Tai siis joo se lataa sen, mut sitä ei saa auki. :(

    VastaaPoista
    Vastaukset
    1. Mulla on sama ongelma, oon ladannu sen varmaa 15 kertaa, mut en vaa saa sitä auki! ;(

      Poista
    2. Oottehan varmistanu et teidän käyttöjärjestelmä sopii sille? Lataussivulla pitäis lukea, et mihin käyttöjärjestelmiin se sopii. (:

      Poista
    3. Mulla oli hei sama ongelma joskus kauan sitten, kun en tajunnut valita sieltä sitä Windows juttua:)
      -Riia

      Poista
  3. Tää oli tosi kiva täytyy kokeilla

    VastaaPoista
  4. Täytyypä näitä ohjeita kokeilla, kun on tosiaan sitä aikaa :D

    VastaaPoista
  5. jejee, nyt mä e h k ä osaan häivyttää niit kuvii tollein kivasti :--) + jejee mun banneri tuol noin ;)

    VastaaPoista
    Vastaukset
    1. Osaat sä ja mä neuvon sua jos et sit osaakkaa. ;)

      Poista
  6. Ihhih, mä oon niin surkee bannerintekijä että näistä oli suuri apu:D

    VastaaPoista
  7. mulle tuli mieleen, että miten voi ladata fontteja gimppiin? :)

    VastaaPoista
    Vastaukset
    1. http://www.dafont.com/
      tuolta löytyy kivoja fontteja selaamalla. Lataus toimii samalla periaatteella, kuin grushejen lataus :)

      Poista
    2. Mistä voi ladata grusheja? Kun koitin ladata nämä fontit en osannut? Pystytkö neuvomaan jotenkin?

      Poista
  8. + kuvat mitä lisää, kannattaa jälkikäsitellä. Esimerkiksi sinertävistä kuvista tulee paljon kivemman näköisiä ilman sinisyyttä (ellei se sovi banneriin), tai hailakosta kuvasta tulee pirteämmän näköinen lisäämällä vähän kontrastia. :)

    VastaaPoista
    Vastaukset
    1. .... Siis kontrastia ja(/tai) värikylläisyyttä :D Gimpissä on mahtava se käyrätoiminto ("värit" -> "käyrät"), saa kirkastettua ja tummennettua, enemmän punertavaksi/sinertäväksi/vihertäväksi jne.

      Poista
  9. Miten saat tolla kumilla häivytettyä tollai läpinäkyväksi tai ne tasot yhteen? Minulla kokeiltuna se häivyttää/pyyhkii vaan tavallaan valkoiseksi eikä se toinen kuva/taso näy sieltä läpi :D

    VastaaPoista
    Vastaukset
    1. Onhan sulla molemmat kuvat eri tasolla? Äläkä valitse sitä teräväreunasta kumia, vaan se Circle Fuzzy, jonka reunat on sellaset haalenevat. :p

      Poista
    2. Miks mulla ei oo tommosta Circle Fuzzya :(

      Poista
    3. Tässä on hyvä kuva, tollanen pitäis olla! (:

      Poista
    4. AHAAA! Jees, hienoa kiitos paljon! :)

      Poista
    5. Moikka! Mites, mulla gimpissä ei ole tuota, mistä voi valita noi circle fuzzyt yms. :S Joskus ennen se siellä oli, mutta kesällä se katosi, ja takaisin ei ole enää tullut. Eli, tarkoitan siis tuota Työkalupakin alareunaa. Siinä lukee tällä hetkellä: "Voit pudottaa telakoitavat ikkunat tähän", mutta se ei anna raahata yms. niitä siihen. Olisiko sinulla vinkkejä? + toivottavasti sait ees jotenkin selvää selityksistä :DD

      Muuten, tosi kiva ja hyödyllinen postaus! :)

      Poista
    6. Kaksoisklikkaa siitä työkalupalkista sitä työkalua mitä haluat käyttää. Siihen PITÄIS ilmestyä sellanen uus pieni ikkuna missä se työkalu on. Vedä se jommalla kummalla hiiren näppäimellä siihen oikealle paikalle niin pitäis mennä. (:

      Poista
    7. Kiitos tosi hirveesti! :) Pitää kokeilla, kohan tässä koneelle kerkiää! :)

      Poista
  10. tosi kiva blogi ja postaus! liityin lukijaks:)

    VastaaPoista
  11. Kun mä latasin jotai brushei nii ne menee vaa sillai et ne aukee ns kuvina... Eli oisko jotai sivuu mist sais brushei ku google ei oikee taho taas nyt olla mun kaveri...

    VastaaPoista
    Vastaukset
    1. Juu alla yksi linkki mistä saa ladattua & kysy vaikka fb jos tulee jotain ongelmaa! ^^

      Poista
  12. mist noit brushei saa ladattuuu??? osote

    VastaaPoista
  13. Tää tuli juuri oikeaan aikaan, latasin juuri gimpin mutten osannut käyttää sitä, niin nyt pitäisi onnistua! :)

    VastaaPoista
    Vastaukset
    1. Haha, kiva kuulla, että tästä on hyötyä!

      Poista
  14. Hei tää oli tosi hyvä! Itsekin bannerintekijänä sain näistä vähän lisää irti tuon gimpin suhteen, kun jotain juttuja en ollutkaan itse vielä huomannut! Vähän lisää intoa tilausbannereiden tekoon :)

    VastaaPoista
  15. rajaatko tolla vapaa valinnalla siis ihan kättä& hiirtä käyttäen? (: miten saat ne reunat niin hyväks

    VastaaPoista
    Vastaukset
    1. Juu rajaan. Kannattaa zoomata kuvaa tarpeeksi niin näkee paremmin ääriviivat! (;

      Poista
  16. Kiva postaus ja varsinkin tuo alku hauska!

    VastaaPoista
  17. Tää oli tosi hyödyllinen mutta yks kuva puuttu multa niin pitää odotta kuvaa niin saan bannerin valmiikisi :D

    VastaaPoista
  18. Tää oli kiva! Vaikka Gimpiä käyttäneenä kyllä tiesinkin jo vähän näistä :D

    VastaaPoista
  19. nää sun bannerit on nii hienoii!!

    ja toosi kiva postaus! :)

    mistä muuten sait sun blogin taustan?

    VastaaPoista
    Vastaukset
    1. Kiitos paljon. (: Googlen kautta löysin, sivua en muista. :/

      Poista
  20. o m g miten järjettömän hieno toi eka banneri on o.o

    VastaaPoista
  21. Miten saan ne brushit gimp:iin latauksen jälkee? Ku ne tulee mulla kuvina??

    VastaaPoista
    Vastaukset
    1. Pura se brush kansio, sitten kopioi kansio ja vie postausten ohjeiden mukaan Gimpin tiedostoihin (:

      Poista
    2. Miten se puretaan:D(Olentiedoton.com)

      Poista
    3. Paina kansiota hiiren oikealla näppäimellä ja valitse pura tiedosto tms. En viitsi ihan joka asiassa neuvoa, kuten postauksessa lukee niin google on tosi hyödyllinen. ;)

      Poista
  22. Hej, tää oli kiva ! :D Nyt sain vihdoinkin tietoon, että miten gimppiin saa brusheja 8) Muuten, miten saat tossa tekstissä ns. "kaksivärisyyttä", eli tekstin tonne alareunaan se häipyy niinkun eri väriseksi ? :D

    VastaaPoista
    Vastaukset
    1. Kokeilemalla selviää. ;) Mutta tosi kiva, että oli apua! ^^

      Poista
  23. jos tuota "circle fuzzy" sivellintä ei ole, saako sen ladattua jostain?

    VastaaPoista
    Vastaukset
    1. Kyllä sen pitäs olla, kun se on ihan normaali sivellin. Linkkasin vähän ylemmäs Ainolle sen, käy kattoo ja tutki sitten sun gimp uudestaan. Enempää en osaa auttaa. (:

      Poista
  24. Tota miten saan laitettuu noita kuvia?? :DD

    VastaaPoista
  25. mä en pysty "häivyttää" noita kuvia toisiinsa kumittamalla, vaikka ne ei ole samoissa tasoissa. Osaatko auttaa? :o

    VastaaPoista
    Vastaukset
    1. Mahdollisesti, mutta selitä vähän tarkemmin, näin on vaikee miettiä mikä tossa olis vikana. (:

      Poista
  26. Miten saat kuvista niinkuin haaletia niin sanotusti?

    VastaaPoista
  27. Mielestäni todella epäselvä! En tajunnut mitään ja mönkään meni. Voitko tehdö videon ja teet samanlaisen bannerin kun nyt? Siis vaikka näytiks vaan!
    KIITOS JOS TEET... SILLÄ PETYIN KOVASTI JA KIINNOSTUS BLOGIISI TÄMÄN AVULLA KUOLI.. <3 Sydämmellä Hevostyttö

    VastaaPoista
    Vastaukset
    1. JOO TEE TEE BLIIDE!!!!!!!!!!!!!! <3333333333XDDDDDD

      Poista
    2. Anna-Sofia ja Tianna30. heinäkuuta 2013 20.49

      Joo tee vaan.. Sofia, oletko iältäsi 5.. Älä yliliioittele :D

      Poista
    3. Anonyymi.. Joka kirjoitti tuon epäselvä jutun..
      Jotka haluaa sellatteen videon kommentoi JAA

      Poista
    4. Kirjoittaja on poistanut tämän kommentin.

      Poista
    5. Kirjoittaja on poistanut tämän kommentin.

      Poista
    6. Valitettavasti en usko, että tuun toteuttamaan videota. Teen bannerit lähes poikkeuksetta monessa osassa, joten videon teko olis tosi hankalaa :( Jos joku juttu on epäselvä, sitä saa kysyä (:

      Poista
    7. Kysympä nytten kun tämän postauksen huomasin.. En tajua miten saat kaikki nuo tuonne, sillä itse en osaa ?!

      Poista
  28. miten laitat tommosia kiemuroita ym?

    VastaaPoista
  29. en osaa ladata tuolta deviantart.com paikasta ja lataatko sä sieltä?

    VastaaPoista

Millä ohjelmalla teet bannerisi?
- Gimpillä.

Voitko tehdä minulle bannerin?
- En valitettavasti tällä hetkellä.

Miten blogiotsikkoihin saa varjot?
- CSS koodilla, Google on kaveri.

Mikä sähköpostisi on?
- s0fiaa123@hotmail.com.

Miten saat niin usein tunnille kuvaajan?
- Rahalla saa, hevosella pääsee ja mulla on aivan mahtavia tallikavereita. ;)