keskiviikko 4. heinäkuuta 2012

Miten tehdään banneri blogiin?

Heips! Minulta on todella usein kyselty, miten teen bannerini. Olen aina koittanut selittää kommenttiboksiin, mutta ohjeista on tullut niin sekavia ja pitkiä, että kukaan ei varmaan edes ole jaksanut lukea niitä :D
Joten päätin tehdä tutoriaalin (tällaisen bannerin kuin minulla) tekemisestä. 
Tämä tulee olemaan todella pitkä, pienetkin yksityiskohdat on selitetty, joten et tarvitse omaa osaamista valmiiksi aloittaessasi. 

Huom! Tein nämä ohjeet aika kauan aikaa sitten. Kuvia muokkaillessani olen oppinut parempia  ja nopeampia tekniikoita. Teen tällaiset (paremmat) ohjeet hieman uudistettuna joku päivä :) Jaan mielelläni vinkkejä muille blogin tekijöille!

Katso tästä 1. bannerintekovideoni

1. Lataa tietokoneellesi Picasa -kuvakatseluohjelma. Se on todella monikäyttöinen ja selkeä, eli ei ole vaikea opetella käyttämään. Picasa näyttää kaikki tietokoneen kuvat, ja sieltä käsin voi esimerkiksi poistaa kuvia kansioista, tehdä niistä kopioita eri kokoisina, muokata kuvia yms. Se on ilmainen.
2. Siirrä haluamasi kuva/kuvat Picasaan, jos ne eivät jo ole latautuneet sinne. Voit viedä kuvat picasaan raahaamalla ne hiirellä kansiosta. Huom! Kun siirrät kuvan kansiosta, kaikki muutkin saman kansion kuvat tulevat Picasaan.
3. Tässä Kuvakirjasto -näkymä. Eli aloitan bannerin tekemisen siitä, että lisään tuohon kuvaan ''tilaa'' eli valkoista seinää oikealle, jotta teksti mahtuisi siihen paremmin. Kuvaa ei nimittäin alunperin kannata ottaa niin, että olet itse reunassa, koska silloin tarkennus ei ole niin hyvä. Käytän viereistä (oikeanpuoleista) kuvaa lisätäkseni tilaa varsinaiseen bannerikuvaan.
5. Tässä nyt viereinen kuva muokattavana. Se siis aukeaa tällaiseen näkymään, kun kaksoisklikkaat sitä kuvakirjastossa. Valitsen Kuvanrajaus -toiminnon.
6. Sitten Vapaa -rajaus..
7. Sitten rajaan tarvitsemani valkoisen :D Ei kannata ''säikähtää'' mitään muokkauksia, joita tekee, koska ne saa aina pois.
8. Käytä, eli ota rajaukset käyttöön. Sitten menet takaisin kuvakirjastoon. (Nappula ylhäällä vasemmalla)
9. Eli tässä yhä edelleen varsinainen bannerikuva (vasemmanpuoleinen) sekä apusuikale, jonka äsken rajasimme (oikeanpuoleinen)
10. Valitse/maalaa bannerikuva sekä suikale, ja paina Luo kuvakollaasi -painiketta.
11. Kuvakollaasi -tilassa kuvia voi suurentaa, pienentää ja käännellä. Laita bannerikuva sekä suikalekuva vierekkäin niin suureksi/leveälle kuin mahtuu. Älä vielä välitä ylijäävistä valkoisista reunoista.
12. Klikkaa Piirrä varjostus -ruutu tyhjäksi. Kuvassa näkyy myös muita muokkausvaihtoehtoja kollaasille, jos sinun tarvitsee käyttää niitä.
13. Sitten klikkaat Luo kollaasi -painiketta. Huom! Kuva tallentuu nyt kollaasit kansioon, löydät sen suoraan Picasasta. Alkuperäiset kuvat jäävät kansioon sellaisenaan, kuin olivatkin.
14. Rajaa ylimääräiset valkoiset reunat pois. Kannattaa jälleen käyttää Vapaa-rajaustyyliä.
15. Valitset Retusoi -toiminnon.
16. ..ja alat retusoida, eli tässä tapauksessa häivyttämään suikaleen ja bannerikuvan rajaa. Huom! Säädä siveltimen koko maksimiin. 
Vaalea/yksivärinen tai sävyinen tausta helpottavat huomattavasti. Minun bannerissani tiiliseinää on muokattu siihen lisää, ja se oli todella hankalaa saada juuri kohdilleen. Kun kärsivällisyys ja aika riittävät, tulee lopputulos olemaan siistin näköinen. Tähän kuvaan en oikein jaksanut panostaa :D 
Valitse Käytä.
17. Sitten rajasin kuvaa taas vähän lisää, vapaalla edelleen :)
19. Sitten lisäät kuvaan tekstiä! :)
20. Picasalla on paljon kivoja fontteja. Kun käytät erilaisia värejä, kokoja ja laitat erilaisia fontteja sekaisin saat takuulla omannäköisesi, ainutlaatuisen bannerin :)
21. Värin tekstiin voi helposti napata valitsimella, tai perus ''värikartasta.''
22. Käytä.
23. Tadaa! :)
24. Vie kuva kansioon. Se siis tarkoittaa sitä, että kuvasta tehdään kopio, ja se siirretään haluttuun kansioon.
25. Selaa... Eli valitse kansio, johon haluat tämän muokatun kuvan. Tässä vaiheessa voit muokata kuvan kokoa tai lisätä siihen vesileiman. Itselläni bannerikuva on 1000 kuvapistettä leveä, ja muut kuvat blogissa 700. Bannerikuvan koon valitsemiseen vaikuttavat tietysti blogin leveydet (niistä lisää lopussa.)
26. Mene blogisi Ulkoasu -kohtaan. Valitse ylätunnisteen muokkaamisen.
27. Valitse bannerikuva tietokoneeltasi, eli siitä kansiosta, johon ''veit'' muokatun kuvan. Klikkaa Mainospaikka: Otsikon ja kuvauksen tilalla. Klikkaa tallenna.
28. Sitten vielä Tallenna asettelu.

Tästä eteenpäin olet omillasi :D Bannerikuva on todella haastavaa saada juuri siihen keskelle ja oikeaan kohtaan. Jos kuvan haluaa täsmällisesti, sinun täytyy leikkiä kuvan koon sekä blogin leveyksien kanssa. Kun vaan kärsivällisyys riittää, sen kyllä saa oikeaan kohtaan lopulta. :) 

Mallin suunnittelutyökalu -kohdasta löytyy Säädä leveyksiä -asetus, josta voit sitten säädellä blogisi leveyksiä tarpeen mukaan. Minulla toimii nyt tuollaiset leveydet blogissa :)

Tässä nyt oli karkea perusohje, pieniin yksityiskohtiin ja muutenkin sellaiseen omannäköisyyteen voi vaikuttaa monin tavoin tekemällä erilaisia muokkauksia ym. Tavat, joita käytin eivät ehkä ole niitä nopeimpia ja helpoimpia, mutta niillä ainakin olen oman bannerini tehnyt :D

Onnea bannerin tekoon ryhtyville, toivottavasti tästä saa edes jotain hyödyllistä vinkkiä, ja kysykää jos jäi jotain epäselvää :)

88 kommenttia:

  1. Mikä ton sun fontin nimi on :O katoin tosta yhestä kuvasta että se olis joku F:llä alkava mutta ei multa vaan tommosta löytyny :O :(

    VastaaPoista
    Vastaukset
    1. Toi Lempi on kirjoitettu sellaisella kuin Fiolex Girls. Voi olla, että mulla on Picasasta toinen, uudempi tai vanhempi versio ja siksi sinulta ei löydy sitä. Meillä on Picasa 3 :)

      Poista
    2. meilläki on picasa 3 mutta en löytäny kumpaakaan fonttia :OO

      Poista
    3. Fontit on tietokoneesta kiinni ei picasan versiosta.. Fotteja voi ladata netistä tietokoneeseen jolloin niitä voi käyttää kaikissa ohjelmissa :D Tiedän tää postaus on vanha mut tuli Google haus vastaan ;)

      Poista
    4. Haha, itsekin tajusin tämän vasta vähän aikaa sitten :D Olet aivan oikeassa :) Eräs tuttuni latasi meille ''purkamisohjelman'' jonka avulla saan fontteja tietokoneelle :) Siihen tarkempia ohjeita löytyy varmasti googlettamalla :)

      Poista
  2. Säästyy aika suurelta vaivalta, jos ottaa kuvan silleen, että on "kuvan reunassa" valmiiksi ja valitsee tarkennuspisteen itse tai tarkentaa manuaalisesti :) Mutta tosi selkeät ohjeet oot tehny! :)

    VastaaPoista
    Vastaukset
    1. Olet oikeassa :)
      Itselläni on vaan kaikissa bannereissa käynyt niin, että vielä kuvaa ottaessa ei tullut mieleen, että tekisin siitä bannerin, ja siksi se on otettu ihan tavallisesti niin, että olen keskellä. Silloin tällainen muokkaus on pelastanut :D Mutta kiitos paljon! :)

      Poista
  3. Meetkö nyt niinkun ysille Lempi:)
    Ja miks Linnealla ei oo blogia, sehän menee nyt seiskalle;)

    VastaaPoista
    Vastaukset
    1. Joo meen :) Ja Linnea menee 6. eikä hän ole oikein kiinnostunut bloggaamisesta (ainakaan ihan vielä) ;)

      Poista
  4. etkö aijokaan leikata hiuksiasi lyhyemmiksi ollenkaan ? :)

    VastaaPoista
    Vastaukset
    1. Joo ajattelin kyllä :D Se on nyt vain vähän jäänyt, mutta kun Anette tulee takaisin, varaamme ajan eräältä hänen parturi-kampaaja -ystävältään :)

      Poista
  5. Voitko tehdä ohjepostauksen niistä sun pehmoista?

    VastaaPoista
  6. Hei, miten ton picasan saa poistettuu koneelta, kun se jää vaikka heitin sen roskakoriin?

    VastaaPoista
    Vastaukset
    1. Siihen en kyllä osaa oikein vastata, koska minun ei ole koskaan tarvinnut poistaa picasaa koneeltani :o

      Poista
    2. Ohjauspaneelin kautta, jos haluaa lopullisesti poistaa. :) Sieltä löytyy semmonen kohta missä on "poista ohjelma" tjsp, ja sit sieltä hakee picasan ja poistaa. :)

      Poista
  7. Ihan tosi hyvä postaus! :) kiitti!

    VastaaPoista
  8. oot nähny varmasti vaivaa tän postauksen eteen ja kiitos tästä.. oon aina aika kujalla kaikkien muokkausten kans ja tää helpotti :) thänks !

    VastaaPoista
  9. Kiitos sun, sain bannerin tehtyä ja blogin aloitettua! Kiitoos :)
    Tällänen tuli(Jos viittit vilkaista)

    http://arroyodelaflor.blogspot.fi/

    VastaaPoista
  10. AUTTO TOSI PALJON! En ennen ollu osannu tehä ja nyt on sitte banneri blogissa. :) KIIITOS!

    VastaaPoista
  11. mulla on tuo picasa 3, miten saan nuo kaksi kuvaa ns. 'maalattua' niin että molemmat kuvat ovat maalattuja ? :D:D:D

    VastaaPoista
    Vastaukset
    1. Paina hiiri pohjaan, ja vedä niiden yli :) samalla tavalla, kuin teet työpöydällä oleville kuvakkeille järjestellessäsi niitä uudelleen :D

      Poista
  12. Kiitos paljon! näistä oli todellakin apua. (:

    VastaaPoista
  13. Kiitos tosi paljon! Yritin tooosi kauan Photoscapella tehdä banneria, mutta tämä oli paljon helpompi ja onnistui heti! Kiitos!! :) :)

    VastaaPoista
  14. Tosi hyvät ohjeet, kiitos. :) Tuohon jäi silti pieni raja vaikka sitä häivytettiin. Saako sitä pois mitenkään?

    VastaaPoista
    Vastaukset
    1. Ole hyvä :) Tämän kuvan muokkasin aika kauan aikaa sitten, nyt osaisin kieltämättä aika paljon paremmin ;D
      Tuohon kuvaan jäi pieni raja, koska muokkasin sen aika pikaisesti. Jos kuitenkin kärsivällisesti jaksaa häivyttää rajaa, sen saa aika haaleaksi ja näkymättömiin :)

      Poista
  15. Mulla on blogin leveytenä 1000px ja tallensin uuden bannerini noin kun kerroit, tai siis "vein" sen toisee kansioo myöskin 1000px levyisenä, mut silti osa mun banneria jää ikäänkuin piiloon reunasta :O ja sit jos laittaa blogin kautta pienentämään kuvan automaattisesti, niin se pienentää sen 968px levyseks, enkä todellakaan tiiä mistä tommonen leveys tulee... Ootko törmänny tämmöseen ite?

    VastaaPoista
    Vastaukset
    1. Niin ja jos käyt katsomassa mun blogia, niin jos säädän leveydet niin, että se reuna ei jää piiloon, silloin banneri tietysti on kapeampi kuin muu blogi, mutta jos taas muutan bannerinkin koon samankokoiseksi kuin muu blogi, niin taas reuna menee piiloon :/

      Poista
    2. Siinä vaiheessa kannattaa tsekata uudelleen blogin leveydet. Kun säädät leveyksiä, saat kuvan varmasti näkymään kokonaisena :)

      Poista
    3. .. tai sitten voit kokeilla viedä (kohta 24) kuvan uudelleen, ja vaihtaa kokoa. Kokeile esimerkiksi 800 tai 900 kuvapisteen leveyttä :)

      Poista
  16. Mä sain selvää, että fontti oli fiolex girls, mut en löytäny! O.O

    VastaaPoista
    Vastaukset
    1. Tajusin itsekin vasta vähän aikaa sitten, että muokkausohjelmissa on perusfonttien lisäksi ne fontit, jotka on ladattu omalle koneelle netistä. Erilaisten fonttien lataamiseen netistä löytyy varmasti ohjeita googlettamalla. Itse olen ladannut paljon fontteja, suurin osa netissä ladattavissa olevista fonteista on ilmaisia :)

      Poista
  17. Miksi meidän koneella tuo Picasa ei toimi? Se kyllää suostuu latautumaan koneele mutta sittenkun sitä yrittää avata niin siihen tulee että Picasan tietokannan lataamisessa on tapahtunut virhe! Olen kokeillut ladata saman ohjelman 10 kertaa eikä koskaan onnistu!

    VastaaPoista
    Vastaukset
    1. Hmph. Omituista. Tietenkään en osaa varmaksi sanoa, mistä on kyse. Jos olisin sinä, minä kuitenkin yrittäisin poistaa Picasan ohjauspaneelin kautta, ja sitten yrittäisin ladata vielä kerran uudelleen :)

      Poista
  18. Heii, saanko kysyy miten sait tonne ylös ton pikkusen kengän kuvan? :)

    VastaaPoista
    Vastaukset
    1. Menet aluksi sinne ''Blogin ulkoasu'' -paikkaan. Siellä on sellainen kohta kuin ''Favicon''. Menet sinne, ja liität koneeltasi kuvan. Muista, että kuvan pitää olla neliönmuotoinen, ja alle 100 kuvapistettä. Sinun täytyy siis mahdollisesti muokata kuvaa aluksi. Se onnistuu kätevästi juurikin Picasan avulla. :)

      Poista
  19. Eli siis picasa on ihan kokonaan ilmainen (:? ja viekö paljon tilaa koneesta?

    VastaaPoista
    Vastaukset
    1. Kyllä on :)
      Hallintapaneelissa sitä ei kerrota, mutta uskohn, että ei kovin paljoa. Se kuitenkin on kuvankatseluohjelma, eli siitä ei tule mitään ylimääräisiä tiedostoja koneelle, vaan se vain näyttää kuvia :)

      Poista
  20. Kiitos, nyt banneri onnistui!!! :)

    VastaaPoista
  21. Onko pakko taustan olla valkonen ? o_o

    VastaaPoista
    Vastaukset
    1. Ei tietenkään :) Itse olin vain joskus tehnyt tällaisen. Kerran blogissani oli banneri, jossa oli tiiliseinä taustana. Tein siitä kuvasta bannerin samalla tyylillä, mutta se oli huomattavasti vaikeampaa, koska tiilien rajat oli hankalaa saada osumaan kohdilleen :D

      Poista
  22. miten sä rajaat ton valkosen tohon sillein tossa 7.kohdassa?

    VastaaPoista
    Vastaukset
    1. Painan hiiren pohjaan ja vedän halutun kokoisen alueen :) Muista käyttää ''vapaata'' rajaustyyliä :)

      Poista
  23. Osaisin tehdä hienoja bannereita, mutta niistä tulee aina niin isoja, että niistä häviää puolet kun ne laittaa blogiin. Etsin apua tähän ongelmaan ja löysin tämän postauksen josta sain apua ja virheeni oli ollut tuo kuvan koko ja kun laitoin 1000 kuvapistettä niin banneri oli sopiva blogiini. Jes, vihdoinkin on banneri blogissa, suurkiitos sinulle! :) Kiva blogi muuten sinulla, liityin lukijaks :)

    VastaaPoista
    Vastaukset
    1. Kiitoksia! :) Voi miten kiva, että löysit ratkaisun ongelmaasi :)

      Poista
  24. Onko teillä tullu tuosta pisacasta mtn viruksii? (:

    VastaaPoista
    Vastaukset
    1. Ei ole tullut ainakaan minun tietääkseni. Picasa on kuitenkin Googlen, joten pidän sitä täysin turvallisena :)

      Poista
  25. moikka! hei, katoin neuvoa tästä sun ohjeesta, hienost oot sen tehny! :) mutta, miten sitä saa pienemmäks? Kun mun blogissa on nyt se toosi isona! mun blogi: lauppa.blogspot.com

    VastaaPoista
    Vastaukset
    1. Hei! :) Tsekkaa kohta 24.
      Kun ''viet'' kuvan Picasasta, vaihda koko (joka minulla oli siis 1000 kuvapistettä) esimerkiksi 800 tai 700 :) Kokeilemalla selviää, kuinka leveäksi kuva kannattaa säätää, jotta se ''istuisi'' blogin banneriksi :)

      Poista
  26. ennenkun saa ladattua tuohon sen uuden banneri kuvan, pitääkö painaa siitä "poista kuva" , missä näkyy entinen banneri?

    VastaaPoista
  27. voiko pisacassa muokata kuvaa niin, että jos kuvan keskellä on (esim.) ihminen, niin voinko rajata ihmisen tavallaan pois kuvasta ja siiträä uudelle taustalle? kiitos jos vastaat(:! ja sun blogi on ihana;)

    VastaaPoista
    Vastaukset
    1. Kiitoksia :)
      Picasassa ei valitettavasti ole sellaista toimintoa. Esimerkiksi tämän hetkisen bannerini olen tehnyt Gimpillä, koska sillä saa siististi ja tarkasti rajattua yksittäisiä kohteita kuvista (esimerkiksi juuri ihmisen) =)

      Poista
  28. Hei! Löysin tämän ihanan ohjeen, ja kokeilin tehdä banneria, MUTTA... Testailin ihan vain ensin tuota rajailua, otin sellaisen kuvan missä itse olen, ja yritin tehdä samalla lailla kuin ohjeissasi, että rajasin reunasta vähän pois. Ongelmaksi tuli se, että kun rajauksen jälkeen painoin sitä "käytä" (ota rajaukset käyttöön) ja menin sinne kirjastonäkymään, niin tämä rajattu kaistale kyllä näkyi siellä, mutta se alkuperäinen kuva josta rajasin, oli kadonnut. Peruutin rajauksen monta kertaa ja kokeilin uudestaan, mutta joka kerta se minun kuvani katosi, ja tallella oli vain se kuvasta rajattu kaistale :( Osaatko sanoa mitä teen?

    VastaaPoista
  29. Käyppä kattoon: www.nomarlove.blogspot.com :)

    Kiitos muuten himo hyvistä vinkeistä!(:

    VastaaPoista
  30. Moikka!
    Itselläni ei ole omaa konetta, joten en voi ladata iskän koneelle mitään ohjelmia, mutta teetkö muille bannereita? Jos teet, niin otatko yhteytää sähköpostiin : lina.hepat@hotmail.fi ;)))

    VastaaPoista
  31. Tosta oli mulle todella paljon apua! :) Sain uuden hienon bannerin blogiini, kiitti!

    VastaaPoista
  32. Ite tein pickmonkeyllä ja onnistu tosi kätevästi, mutta voisin kokeilla tota Picasan tapaa. :)

    http://ishouldhaveknowbetter.blogspot.fi/

    VastaaPoista
  33. oot tosi hyvä bloggaaja:D

    VastaaPoista
  34. Millä sä oot tehny ton sun nykysen bannerin??
    http://musicismylifesoffu.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Nykyisen bannerin olen tehnyt käyttäen Picasaa ja Photofiltreä. Voin jossain vaiheessa tehdä videon, jossa näytän kuinka tällainen kollaasityylinen banneri on syntynyt :)

      Poista
  35. tästä oli niiiiin paljon apua <3 en ennen edes osannut tehdä minkäänlaista banneria

    VastaaPoista
  36. Tää on varmaan tosi vanha kirjoitus mutta aattelin vielä kysyä että miten tehdä sillai että se sama kuva on niikuin kolmesti jos olet kattonut nette aron blogia nii sen tyylinen osaatko sanoo miten :D?

    VastaaPoista
    Vastaukset
    1. Osaisin varmaan nykyään tehdä sellaisen, täytyypä siis harkita jos tekisin senkin teosta jonkinlaisen ohjevideon :)

      Poista
  37. Kiitos ohjeesta. Hienot sivut. :)

    anskunaskartelu.blogspot.fi

    VastaaPoista
  38. Voi ei kiitos ihan sairaasti :) ♥!

    VastaaPoista
  39. Kiitos Lempi! <3 Tuhrasin eilen illalla ja kolmeen asti yöllä tuskan hiki otsallani tuon blogini bannerin kanssa mutta siitä ei tullut edes sinne päinkään hyvä kuin hurjissa kuvitelmissani uskoin. NYT näillä Sinun ohjeilla teen uuden! Iik olen jo nyt innoissani. KIITOS!

    VastaaPoista
    Vastaukset
    1. Luin huolellisesti läpi ohjeesi ja laiskuuttani päätinkin kokeilla itse niillä tiedoilla jotka muistin. =D Muistin väärin mutta onnistuin. Valitsin pohjaksi koko bannerin kokoisen kuvan jonka leikkasin toisen kuvan alaosasta ja kun sijoitin sen pohjan paikalle pohjan kokoon sain sen päälle liitettyä varsinaisen kuvan. Tallensin nämä kaksi kuvaa kollaasina ja avasin kuvan uudelleen jonka jälkeen lisäsin kollaasiin tekstin. Oon niin tyytyväinen lopputulokseen koska se näyttää nyt omalle. Kiitos! Terveisin mummi 46v. =D

      Poista
    2. Moikka! :) Kiitos paljon kommenttistasi, on tosi mukavaa kuulla että tästä on ollut hyötyä, vaikka tämä ohje onkin aika vanha. Toteutin tämän postauksen kun olin vasta ihan vähän harjoitellut kuvien muokkaamista. Nykyään tietoa, taitoa ja vinkkejä löytyisi enemmän, mutta ajattelin kuitenkin antaa tämänkin ohjeen olla täällä, koska se näköjään on vielä hyödyksi :)

      Poista
  40. Kiitos kiitos kiitos toosi paljon!! Ilman tätä en ois varmaa ikinä oppinu laittaa blogiin banneria ja jos kiinnostaa käydä blogissa niin se on
    janskunhevoselamaa.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Kiitos itsellesi, kiva kuulla että tästä oli apua vaikka aika vanha postaus onkin :) Menenpäs katsomaan blogiasi ja uuden bannerisi! :)

      Poista