Haloo.. sekitar tiga minggu lalu saya share di Facebook infografis tentang cara menggunakan Cetaphil Cleanser. Ternyata banyak teman yang menanyakan tutorial cara membuat infografis ini. Ya sebenernya bukan iseng juga sih seperti yang saya tulis di caption, tapi infografis ini memang dibuat sebagai konten pendukung untuk ikut lomba blog-nya. Meskipun tidak terpilih jadi 20 besar (T_T) saya tetap mau sharing cara buat infografisnya ya gapapa ya 😀
Bahan-bahan
- Stock vector untuk sosok perempuan yang sedang membersihkan wajah
- Foto kemasan botol Cetaphil
Alat
- Adobe Illustrator
- Adobe Photoshop
Cara Membuat
1 | Buat konsep infografisnya
Langkah pertama ini paling penting. Sebelum membuka browser dan program Adobe di komputer saya urek-urek di kertas dulu mau seperti apa infografis ini jadinya. Rancang konsep, tentukan informasi apa yang ingin disampaikan melalui infografis ini, kira-kira layoutnya akan seperti apa. Dari sini saya akan tahu apa saja bahan-bahan yang dibutuhkan.
Informasi yang ingin saya sampaikan melalui infografis ini adalah ada 2 cara menggunakan Cetaphil untuk membersihkan wajah, yaitu dengan dan tanpa air. Jadi garis besarnya saya akan buat 2 section, section 1 cara membersihkan dengan air dan section 2 cara membersihkan tanpa air.
2 | Cari stock vector sosok perempuan yang sedang membersihkan wajah dan edit sesuai kebutuhan
Saya belum cukup pede untuk menampilkan foto bare face before-after di blog, jadinya memutuskan pakai vector aja 😀
Karena saya ngga terlalu bisa gambar, jadi untuk bisa dapat image ini saya hunting stock vector. Pertama saya nyari yang gratisan dulu di Pixabay, Vecteezy dan all-free-downloads.com. Ngga ketemu yang cocok. Akhirnya saya cari di Vectorstock, dan nemu royalty-free stock photo yang ini 😉
Setelah saya beli dan download file-nya, saya edit menggunakan Adobe Illustrator untuk :
- menghilangkan cepol rambutnya
- mengganti gambar botol semprot di stock vector dengan botol Cetaphil (foto produk saya ambil dari website Cetaphil dan diedit untuk menghilangkan background putihnya dengan Adobe Photoshop).
- menyesuaikan posisi tangan
3 | Susun layout infografis di Adobe Photoshop
Untuk membuat infografis sebetulnya bisa menggunakan Photoshop, Illustrator ataupun InDesign. Untuk project ini saya memilih Photoshop karena tidak banyak menggunakan text dan akan menggunakan efek dropshadow dan outerglow . Ini personal preference saja ya karena sebenarnya dengan IA maupun ID juga bisa pakai efek seperti itu.
Dalam menyusun layout ini ada beberapa hal yang saya perhatikan :
– Kombinasi warna
Karena infografis ini berpusat pada 1 brand, jadi saya gunakan warna-warna dari brand tersebut yaitu biru tua dan hijau untuk aksen. Untuk background saya tetap memilih warna netral.
– Negative space
Negative space – atau white space – adalah bagian yang tidak berisi gambar atau teks yang menarik perhatian. Saya memastikan tersedia cukup banyak negative space dalam layout infografis supaya terkesan nggak ramai, jadi lebih enak dibaca karena easy on the eyes.
– Teks
Saya menambahkan teks deskriptif sesingkat mungkin untuk tiap tahap pembersihan wajah. Untuk judul, karena agak panjang jadi saya bagi menjadi dua baris. Baris pertama menggunakan serif typeface Georgia italic berukuran lebih kecil, dan baris kedua saya buat kontras dengan pilih font sans serif berukuran lebih besar, yaitu Montserrat. Kedua font ini gratis ya 😉
Baca juga: http://www.almazia.co/7-tips-memilih-styling-font-agar-blog-lebih-enak-dibaca/
– Dekorasi
Agar lebih cantik dan feminin saya menambahkan elemen dekorasi berupa lace atau renda sebagai frame di bagian atas dan bawah. Saya buat subtle aja supaya nggak “balapan” sama elemen grafis utamanya.
– Identitas
Infografis ini dibuat untuk materi pendukung blog post, jadi wajib banget untuk memberikan tanda identitas pemilik blog atau nama blog-nya. Jika suatu saat infografis ini dishare ke mana-mana, tetap akan bisa dilacak balik ke website aslinya.
Ya kira-kira begitulah behind the scene pembuatan infografisnya ^_^ Tidak jauh beda dari konsep urek-urek awal yang dibuat sebelumnya, meskipun juga tidak persis sama. Step by step tahap pembersihan wajah-nya sih sama dengan konsep awal, yang berbeda itu di penempatan frame atas bawah yang warna biru dan hijau, penambahan unsure dekorasi renda. Sambil jalan aja, trial and error, coba ini gak bagus, coba itu kurang cakep, sampai akhirnya nemu yang cukup decent untuk dipajang 🙂 Makanya jangan heran kalo file-file desain grafis itu filenamenya kayak gini :
- infografis.psd
- infografis2.psd
- infografis-rev.psd
- infografis-rev2.psd
- infografis-rev2-final.psd
T_T
Untuk cara-cara edit di Photoshop dan Illustrator saya ngga jabarkan di sini ya, karena ribet kalo ditulis hehehe. Instead, saya share aja ya kelas online di mana kalian bisa belajar untuk menggunakan Adobe Photoshop dan Illustrator.
Adobe Illustrator Essentials by Laura Coyle – GRATIS
Dulu saya belajar Illustrator dari Laura Coyle saat kelasnya masih berbayar. Sekarang dia sudah mengajar di platform yang berbeda (Train Simple), jadi kelas lama-nya digratiskan. Cukup subscribe ke newsletter-nya, nanti kita akan diberikan password untuk bisa mengakses online class-nya.
Untuk pemula bisa belajar dari kelas beginning-illustrator – http://www.illustratoring.com/class-beginning-illustrator/.
Photoshop CC tutorials from novice to expert by Adobe – GRATIS
Mba Al, aku nggak jago blas untuk buat infografis seperti ini. Udah nyerah duluan. Salut deh kerjakerasnya mba Al. Terima kaih telah berbagi. Akhirnya punya stok website untuk gambar di blog 🙂
Saya mah bikin infografis nya pake yg program instan online Mbak Alma… haha.
Malu, blm bisa photoshop apalagi ilustrator… heuuu.. harus belajar banyak nih. Belum belajar video dan editingnya.
Gapapa mba pakai program apapun ngga masalah yang penting kita bisa makenya sesuai kebutuhan ^^ Ini mah karena saya udah kebiasaan aja pakenya Photoshop. Disuruh pake yang lain sama aja bengongnya hahaha
makaish infonya mbak, lagi suka animasi dan tertarik tuk belajar lebih lanjut tentang ilustrator. langsung mampir ke link yang mbak berikan 🙂
Sama-sama Sandi, iya mumpung ada kelasnya Laura Coyle yg gratisan itu harus dimanfaatin banget hehehe…
hmm, aq tetap ora mudeng mba al, udah baca juga, sediihhh
Musti sambil praktek Des, kalo baca doang ga sambil praktek emang bingungin 😀
aku ga mudeng sotosop kaaaak, nyerah dehhh
duuhh kalo punya mba aja ga masuk 20 besar….apalagi punyaku :/
yang penting kewajiban sudah terpenuhi aja deh
Jangan nyerahhh, kalo mau belajar pasti bisa ^^ Dan ga harus Photoshop juga sih, banyak tools lain yang bisa dipakai 😉
Aku juga pakai Vecteezy trus di olah lagi pakai Arcsoft Photo Studio 🙂
Enak kah pakai Arcsoft? Aku udah ketergantungan gini sama produk Adobe T_T
Harus pelan-pelan bacanya dan berulang-ulang. Saya belum bisa pake kedua alat tadi Mba. Hiks.
Gapapa mbak pelan-pelan sajaaa, harus sambil praktek sih supaya “ngeh” 🙂
Allhamdulillah dapet ilmu lagi. Beberapa kali saya pikir untuk bikin infografis kudu gambar sendiri. Walah saya ga bisa gambar, akhirnya ga jadi2 bikin infografis. Lah sekarang baru tau nih, sekaligus izin save tautan vektornya. Thanks mba Alma.
Idealnya sih gitu kali ya, semua elemen dibuat sendiri from scratch. Tapi kalau untuk keperluan blogging kaya gini aja sih ngga masalah pakai stock vector (makanya ada stock photo dan stock vector untuk mempermudah kerjaan kita hehehehe). Dan saya emang ga bisa gambar, jadi ya daripada bentuk orangnya nanti pletat pletot mending beli yang udah cantik aja 😀
Kalau kita menguasai program pengolah vector (CorelDraw, Illustrator, atau lainnya) udah enak banget bisa edit dan modif stock vector sana-sini supaya sesuai yang dibutuhkan.
Keren tulisan Mbak Almazia ini, tp bunda gak malu koq utk bilang kl bunda tuh bingung, hihihii…soalnya ada juga yg gak or blom nyampe ilmunya ke situ – ada temennya yg juga masih bingung.
Seneng aja kl baca tulisan dari para pakatnya, rasanya iriiii banget pengen bisa, apa daya sulut digapai, hiks, hiks… Salut mbak Almaxia yg berbagi ilmu melalui tulisan ini.
Gapapa Bun, dulu aku juga bengong kok kalo baca tutorial beginian hihihi Butuh waktu dan kemauan buat belajar, baca-baca, praktek, dst 😀
Wahh..pengen bisaaa…
Harus belajar klo mau bisa hehehhe
Ilmu baru lagi.. Alhamdulillah. Walaupun emang harus pelan-pelan bacanya. Perlu berulang-ulang dan emang baik sambil praktek. Tapi aku mah suka bingung kalo ngga ada gurunya. Jadinya, kalau bingung malah bengong deh hehehe.
Kalau memang mau belajar I strongly suggest ikut kelas gratisnya Laura Coyle di illustratoring.com; dia ngajarnya enak, step by step dan gak cepet-cepetan hehehe
ngeja katanya satu-satu kak alma, keren lah buat kak alma yang jago banget. Saya masih berdoa dan berusaha memahami setiap kata.
Ahhhaaa akupun jg lg sakit hati sama lomba blog ini :))))
Anw makasih info tutorial infografisnya mba Alma. Mau aku coba praktekkan dan belajar ah.
Dan sayapun hanya bisa menyesali, kenapa gak dari dulu belajar sotosop.. mau belajar sekarang kok ya berat banget. 🙁
Mau nyobain ah. Makasi tips nya
saya juga pake vector yang gratisan. Untuk membuat sendiri sebagai bahan blogpost terlalu lama, bener gak mbak. Tapi, ada juga yg membuat saya mikir, setelah saya utak-atik perlukah saya tuliskan sumber gambar darimana?
Satu lagi, ternyata mbak Alma bisa membaca pikiran reader, soalnya saya emang penasaran gimana ‘dia bikin gambar cewek mandi itu ya?’ eh, ternyata..hihihihi
Penulisan sumber itu tergantung license yang penyedia stock vector / stock photo-nya sih mbak, ada yg minta dituliskan license-nya, ada juga yg enggak (biasanya yg berbayar tidak minta pencantuman sumber sih).
Keren bgt!
Pgn belajar jg ah…
Yuk belajar ^^
harus banyak latihan yg pasti… apalagi untuk pemula (kayak aku), udah selesai ngikutin step tapi hasilnya acak kadut >.<
eikeh selalu suka sama yang gratisan #eh
Tapi sebetulnya lebih pada pertimbangan, is it that I’m looking for and will it be worthed? Kalo semua jawabannya ‘iyes’ , Insya Allah jadi ngga nyesel buka dompetnya.
Anyway, thanks for sharing.