HE: Bannerit ja -widgetit kampanjatuotteista

Updated: May 22

-Bannerit kahdessa kooossa: Deskari ja mobiili (n. 10 erilaista) -Materiaalien keräys ja työstäminen oman maun mukaan -Widget painikkeen kuva samasta materiaalista/kampanjasta -Työvälineenä Illustrator, Photoshop ja After effect animointiin -Kaikki(?) tehty on julkaistu verkkosivustolla

Tehtävänä oli tehdä bannereita eri kampanjoihin kahdessa koossa:

-Desk topiin koossa 980 x 400 -Mobiiliin koossa 300 x 600


Pienen koon lisäksi bannerien tuli olla "painoltaan" deskari max. 150kt ja mobiili max. 100kt. Huomasin äkkiä, että pikselikoon kanssa ei ollut ongelmia vaan harmaita hiuksia tuotti pieni vaadittu tiedostokoko, joka laski resoluutiota huimasti.




Itse bannerit tein Illustrator-ohjelmalla. Bannereissa toivottiin olevan selvä kuva kampanjatuotteista, hinnasta/alennuksesta sekä toimintokutsu. Aluksi kuvassa piti näkyä myös kampanjan voimassaoloaika mutta viimeisissä bannereissa siitä luovuttiin sillä bannerit otettin pois, kun kampanja oli ohi. Copy-lauseen sain valmiina. Muuten sain vapaat kädet. "Toimintopainikkeen" osalta ajattelin niin, että deskariversioissa sijoitin kaikki toimintokutsut oikeaan reunaan, koska oma hiireni ainakin seikkailee siellä aika luontevasti. Mobiiliversiossa sijoitin painikkeen ruudun alaosaan, koska puhelinta pidetään yleensä yhdellä kädellä ja siihen olisi peukalolla helppo painaa. Materiaalit keräsin itse. Esimerkiksi kirjakampanjassa pyysin aluksi tiedot "niputettavista" kirjoista sekä toivotun copyn niihin. Tämän jälkeen hain kirjojen kannet Otavan kuvapankista ja vein tallennetut kirjojen kansikuvat netistä löytyvään palveluun, joka muuttaa ne 3D-kuvaksi kirjasta. LINKKI PALVELUUN

Tallensin kirjakuvat omaan kansioon, jotta niitä ei tarvitse tehdä uudestaan. Tämänkin kansion latasin HE-Driveen. Korttikampanjaan sain mukavasti materiaalit itse kuvaamistani ja syvätyistä korttipakoista.


Kun materiaali oli valmiina, aloitin työn luomalla Illustrattoriin artboardit kaikissa toivotuissa mitoissa. Käytin mm. seuraavan kokoisia artboardeja eri tarkoituksiin: -300x660 px mobiilibanneriin -980x400 px deskaribanneriin

-1080x1350 px Instagramin potrettimalliin

-1080x1080 px Instagramin neliömalliin

-1080x1920 px Instagramin Storykuvaan

-770x580 px nettisivujen Widgetiin

Samoja kokoja on käytetty myös uutiskirjeissa ja Facebook-mainonnassa.


Illustratoriin toin place-toiminnolla materiaalin ja loin yleensä väripaletin kirjojen väreistä ja aloitin suunnittelun käyttämällä näitä värejä. Yleensä käytin kuvituksessa taustakuvaa jostain kampanjan kirjan kannesta joko sijoittamalla osan suoraan tai räjäyttämällä (Expand) kuvan ja erottelemalla tarvittavat osat (Ungroup). Taustan liukuväri tuli myös tutuksi.




Deskariversio paikallaan nettisivuilla. www.hidastaelamaa.fi

Tämän bannerin kuvituksessa muistelin koulun harjoitusta, missä teimme lumihiutaleita Illustratorissa. Poppa-kissan sain valmiina png-tiedostona.



Kun bannerit olivat valmiit, siirsin tiedoston Photoshoppiin, missä exporttasin sen uudestaan ja sain näin säädettyä tiedoston erittäin lähelle sallittuja rajoja.


Samalla periaatteella Illustratorissa oli helppo muuntaa materiaali eri kokoisille pohjille. Näin sain suhteellisen tehokkaasti muokattua materiaalista widgetit sekä somemateriaalia instan feediin ja storyihin.

Mikäli tein materiaalista myös animaation, kopioin tiedoston, poistin ylimääräiset artboardit ja jätin vain instagramin koon. Tähän sijoittelin materiraalit eri kerroksille tarpeen mukaan. Mikäli toiveena oli myös storyversio, kopioin edelleen tiedoston ja muutin sen vaadittuun kokoon. Joissakin storyversioissa koon muuntelu sujui suoraan myös After effectsissä kopioimalla Compositio ja muuntamalla se compositio settingseissä oikeaan kokoon. Tämän jälkeen sijoittelin vain kuvat uudestaan.

Widgetin alepallurassa on käytetty Illustratorin Type on a path- työkalua.


Kuvassa näkyy Illustraattorista After effectsiin eri kerroksille tuodut materiaalit. Yksinkertaisessa animaatiossa kirjan kuva vaihtuu, teeman pysyessä samana.


Copy ja tarjous tulevat eri kohdissa, jotta yhteen ruutuun ei tulisi liikaa tekstiä. Tässä animaatiossa huomioin myös lähtökuvan sillä joissakin animaatioissa näjyy vain tyhjä ruutu ennen kuin animaatio lähtee pyörimään. Tämän vältin niin, että sijoitin lähtökuvaan suoraan yhden kirjan, puolitin sen ajan, mitä jokainen kirjaruutu oli näkyvissä ja sijoitin saman kirjan loppuun. Näin kuvassa ennen animointia näkyy tämä kirja eikä videon pyöriessä näy hyppykohtaa sillä video alkaa samasta ruudusta, mihin se on loppunut.




5 views0 comments

Recent Posts

See All

©2020 by Mia Sumell