Tutorial Photoshop Mascot design – Part I (ink)
Seperti yang sudah pernah saya janjin yaitu tutorial photoshop, kali ini saya akan memberikan sedikit ilmu tentang menggambar, untuk kali ini aku akan membuat sebuah design maskot
sebelumnya maskot adalah sebuah icon tertentu dari sebuah perusahaan atau pun organisasi yang berbentuk macam-macam namun biasanya sebuah benda , hewan, tumbuhan yang di design seakan-akan seperti manusia.
mascot hampir sama kegunaanya dengan logo yaitu sebuah jati diri dimana jika orang lain melihat akan langsung tau kalo ini mascot si A ini mascot si B.
sebagai seorang blogger kita juga tidak mau kalah donk, oleh karena itu untuk lebih men”terkenal”kan blog kita kepada orang lain apa salahnya kita membuat maskot untuk web/blog kita sendiri. karena dengan adanya mascot orang lebih mengenal dan mengingat blog kita.
nah untuk langkah pertama tentu saja kita coret-coret dulu designnya di kertas. Gak perlu takut bagi yang gak pede dengan gambarnya, design mascot tidak ada batasnya jadi mau dibuat gimanapun juga gak masalah yang penting menarik.
di sini aku men”skets” denga bentuk yang sangat mudah yaitu gambar petak/kotak dan di tambah beberapa tambahan seperti mata, kaki, dan tangan.
gak lama kok cuma sebentar ini juga aku lakukan waktu lagi kuliah, sst.. janga bilang dosen ku ya..
nah ini dia yang aku “sketsa”…
pasti semua juga bisa gambar seperti itu..
nah tugas kita kali ini adalah men”trase” skets tersebut atau menggambar ulang gambar tersebut di komputer, untuk kali ini aku tetap menggunakan software kebanggaan kita semua yaitu photoshop..
langkah yang harus dilakukan adalah buka gambar tersebut di photoshop, setelah gambar tersebut ada di photoshop, kita harus memeriksa dulu area kerja kita , klik image>image size..
perhatikan resolusinya, ubah menjadi 300..
nah baru kita memulai langkah berikutnya..
buat layer baru, dengan cara tekan “shift+Ctrl+N”
di layer baru, pilih tools pen.. atau di key bord tekan huruf “P”, masih ingat kan cara penggunaanya, jika tidak klik disini..
nah sekarang ikuti seperti di gambar ya.
ingat harus ditutup garis pen tool nya setelah itu lakukan hal yang sama seperti di atas namun sekarang di bagian dalam kotak..
perhatikan gambar lagi..
jika telah selesai, masih pada tool pen dan layer 1 , klik kanan>fill path..
akan muncul box, perhatikan “use” berisi foreground color.
sebelumnya pada foreground color di photoshop kita ubah warna hitam..

kembali pada topix muncul box tadi, setelah memperhatikan foregroundnya, klik ok dan perhatikan gambar..
klik “enter“, untuk menghilangkan garis pen tool nya.
Bagaimana? setelah melihat gambar, mengertikan maksud saya?? yup betul kita membuat gambar baru di layer baru. lakukan hal yang sama sampai kita selesai menggambar ulang skets yang kita scan tadi di photoshop.
cara men”tinta” atau men “ink” ini digunakan untuk kerapian, karena kita ingin membuat design yang bagus berarti kita harus membuatnya serapi mungkin, mungkin agak susah namun tidak masalah karena hasilnya di jamin akan bagus nantinya.
sebelumnya aku juga akan memberikan sekali lagi cara yang sama seperti di atas namun ini untuk membuat garis yang melengkung.
kalo diatas tadi kan tidak melengkung..
untuk lebih jelas lagi perhatikan gambar berikut..

seperti yang kita lakukan tadi namun sekarang di lakukan di kaki si mascot, tapi jangan di isi foregroundnya dulu..
pilih tool direct selection tool atau ketik A di keyboard. setelah itu klik garis pen tool antara sudut yang ingin di lengkungkan. untuk lebih jelasnya perhatikan gambar di bawah ini.

klik kanan pilih add anchor point untuk membuat titik baru.. tarik titik itu ke bawah ikutin bentuk gambar sketsa. Nah untuk menyesuaikannya tinggal tarik garis lengkungnya seperti gambar di bawah ini.
sudah mengerti kan maksud saya?? nah lakukan hal yang sama untuk membuat garis lengkung lainnya, kira-kira seperti ini.
setelah itu baru kita isi dengan warna hitam seperti langkah yang tadi, jadinya begini..
perhatikan ada garis yang putus
nah garis yang putus ini di sambung dengan cara yang sama, jadinya seperti ini..
nah dah tau kan sekarang gimana caranya?? ya dah lanjut terus..
untuk tangan dan kaki cukup buat satu saja ntar tinggal di copy, caranya, gunakan lasso tool atau tekan huruf L, select area kaki, lihat gambar.
terus pilih move tool atau ketik (V), copy kaki tersebut dengan mengarahkan cursor kekaki dan tarik kesamping, sebelumnya tahan “alt” pada keyboard, baru di tarik..
pindahkan kekaki sebelahya, masih dalam keadaan terseleksi, klik menu edit>transform>flip horizontal. Lalu sesuaikan dengan sketsa, setelah itu tekan ctrl+D untuk menghilangkan seleksi..
kira-kira seperti ini jadinya. Lihat gambar.
lakukan hal yang sama pada tangan dan mata, dari pada buat satu-satu kan lama hehe..
ingat semuanya dikerjakan di layer 1 ya, cukup 1 layer aja, kalo mau berapa layer bisa juga tapi ntar di flatten.tapi tidak di flatten dengan backgroundnya. Hal ini dilakukan untuk memudahkan kita pada saat pewarnaan.
nah tinggal kita lanjutkan kerjaan kita , ikut petunjuk yang telah diberikan untuk menggmbar ulang gambar mascot kita tadi di photoshop.
akhirnya selesai juga , ini dia isi layer 1 setelah layer background di tutup..

gimana hasilnya lumayan rapi kan??
oh iya jangan lupa setiap langkah di save, sayangkan tiba-tiba mati lampu padahal sudah jauh.( pengalaman pribadi nih hehehe)
nah sekarang kita memiliki mascot yang telah di tinta..
tugas kita sekarang adalah mewarnainya, mau tau caranya, tunggu tutorial photoshop berikutnya ya.
akhirnya selesai juga tutorial photoshop bagian 1 ini, semoga tutorial photoshop kali ini bermanfaat, jangan lupa komentarnya ya..
Bila ingin mengetahui update terbaru dari zonanarsis.com ini, kalian bisa mengikutinya di RSS, atau bergabung di FB, dan follow Twitter ZonaNarsis.com!!
Jangan lupa sharing juga sama-sama teman-teman FB, dan Twitter kamu dengan mengklik icon gambar di bawah















October 18th, 2009 - 16:41
yahh..bg martop makin top aja neh..
kapan-2 design logo tuk blog aq ye??
October 19th, 2009 - 04:51
Hai…
Terima kasih atas comment di blogku….blog ttg aplikasi ini keren loh…..tutorialnya bermanfaat… Salam kenal juga..
October 19th, 2009 - 09:14
keren,… makin mantap aja, ayo trus diasah.. oh ya gimana dengan desain web alumni tu, desain trus psd ya, nanti baru kita ubah menjadi html…
October 19th, 2009 - 09:17
oi buatin logo tulisan trieng.net macam zona narsis, keren logonya
October 19th, 2009 - 09:36
Lengkap abis!!!!. hehehhe..cakep abis dah.
October 19th, 2009 - 16:12
mantap sob tipsnya :thumbsup:
October 20th, 2009 - 00:38
wah seru mas tutorialnya…saya tunggu nih cara mewarnainya…
October 19th, 2009 - 20:52
Horee…ketemu blog yang bagus! Aku perlu banget artikel tutorial seperti ini. Nice post…and nice blog
October 20th, 2009 - 08:26
Nice post… makasih udah berkunjung ke blog saya
October 20th, 2009 - 09:18
disini bisa pesan logo ya?
terlihat mudah, tapi pas nyoba kok….
October 20th, 2009 - 12:14
jah banyak kali nih yang koment.. hehehe..
yang pertama buat
@bang marco alias gudang suram: Halah sok merendah ni bang marco situkan master, hehe
@ Mala :salam kenal juga buat mala jangan segan – segan untuk mampir ya.. hehe
@ Bang rian alias My brother: Seep ntar di atur lagi tu gampang hehe..
@ Aneka Tips: hehe.. yup di buat sedemikian detail biar gak pada bingung.. makasih bang
dah mau mampir..
@ NumB3R : thanks you2..
@ Desri : Maksih atas pujiannya walaupun saya dah sering di puji ( dalam mimpi maksudnya hehe) terma ksh2..
@ kenyo : ya tungggu aja ntar pasti di update tutorial warnanya ya..
@ tuteh : Yup sama2 saling mengunjungi itu penting..
@ampundeh : mau pesan logo?? bisa kok tenang aja.. mudah kok coba aja terus..
terima kasih yang dah koment ya, jadi semngat buat lanjutannya ..
October 20th, 2009 - 15:20
Weeeew…tidak semudah yang dilihat ternyata…
Butuh proses yang panjang, ixixixix…
Susah juga yah
October 21st, 2009 - 00:24
Lengkap banget caranya kawan.Jadi tahu caranya membuat maskot.
Trims ya
October 21st, 2009 - 03:36
Postingan menarik.Terimakasih kunjungannya ya.
October 21st, 2009 - 05:29
wah,pengen,pesen satu,wakakakkakakaa
October 21st, 2009 - 10:26
@ Zippy: Untuk yang bagian I emng agak panjang, ntar di pewarnaan gak panjang kok..
@ Desri Susilawani : udah siap tapi blom di posting insyaallah besok malam, karena masih ada kerjaan lain.. di tunggu aja ya..
@ Sino : mau pesan 1?? bisa aja tinggl PM aja hehe..
@ Bisnis Online ala Eros : Untuk hasil yang bagus ya harus sedikit teliti biar hasilnya pun gak mengecewakan.. klo ingateros.com bagusnya pake mascot muka saya aja bang? gimana hahaha..
October 21st, 2009 - 04:03
belon ada lanjutannya yah?sibuk kah?
October 21st, 2009 - 11:32
wah keren…
simple tapi elegant…semedi berapa lama mas biar dapet ide kayak gini
October 21st, 2009 - 11:33
wow…
silent for a while -astonished-
ga pengen nyoba bikin desain mainan mas
hehhe
October 21st, 2009 - 11:54
Mantap mas..keren hasilnya…ide yg cemerlang
October 21st, 2009 - 12:12
om bikinin lah.. Nyubi
October 21st, 2009 - 13:51
Mantap bro tutorialnya.
Oh ya gw ada sedikit pertanyaan neh. Walau kurang nyambung sama artikel tp aku harap bisa bntu menjwb pertanyaan saya.
Kalau untk mengcompress gambar supaya berat/size nya menjadi minimaliz tanpa mengurangi warna/pixel pada gambar biasa pakai alat apa ya bro?
Maksud saya hanya mengurangi bite nya aja tanpa mengurangi ukuran,warna,pixel dan lainnya
October 21st, 2009 - 14:54
@webmaster.info : waduh klo yang kaya gitu saya ga tau tuh gimana caranya mas, biasanya di photoshop aja maininnya, kalo saya biasanya melihat resolusinya, biasa untuk web pake resolusi yang tajam yaitu 300 untuk yang ukuran sangat kecil.. karena kan untuk web rata-rata kecil, trus saya biasanya di photoshop pakai tool save for webs, FILE > Save for Web & Devices > baru pilih kriterianya di box yang muncul, klo mengecilkan byte berarti secara gak langung mengurangi lainnya jadi tinggal di seimbangkan menurut keperluan… jadi tidak kehilangan, warna, pixel.. mungkin cuma itu yang bisa saya jawab.. maap kalo jawaban bagi mas kurang puas..
October 21st, 2009 - 13:56
@belajar blog : terima kasih mas dah mau berkunjung, ini gak pake semesi mas cuma bertapa aja di toilet berpa menit, itu pun bukan untuk buat tutorial ini, cuma enag lagi gak enak perut aj ahehe..
@ action Figure Toy : pengen juga design mainan tapi ada yang bua gak ya?? hihi..
@ Dinoe : belum selesai lagi hasilnya ini baru tintaiin aja, ntar baru pewarnaanya..
@Nyubi : wadoh di panggil om masih muda saya nih, masih imut.. hihi
October 21st, 2009 - 16:42
Ternyata, bwt logo atw maskot yg berkualitas mmng panjang prosesny. belum lg proses pewarnaannya. Jd mikir, kasian jg, gw yg slama in bs ny cm ngjiplak n ngeditin gmbar yg sdh ad. Tulisan in bnar2 nginpirasi Gw biar bs bwt logo hsil karya sndiri.
October 21st, 2009 - 09:57
wuihh meski kelihatan sederhana mmusti butuh ketelitian extra yaks ckckckck
minta saran donk, kalao ingateros.com enaknya pakai maskot apa ya mas
October 21st, 2009 - 18:36
Wah..rumit juga yach.. tapi dicoba dulu dech..
Bagus tutorialnya sob.. nice post
October 22nd, 2009 - 00:38
cakep mas tutorialnya
btw mey mo ngucain makasih ya atas kunjungannya
salam persahabatan
October 22nd, 2009 - 06:23
ditunggu bagian 2 nya om
October 22nd, 2009 - 06:46
Salam Cinta Damai dan Kasih Sayang
‘tuk Sahabatku terchayaaaaaaaank
I Love U fuuulllllllllllllllllllllllllllll
October 22nd, 2009 - 07:14
creatif and invatif.. mantap Friends….
October 22nd, 2009 - 01:54
great job…
October 22nd, 2009 - 06:43
HADIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIRRRRRRRRRRRRRR..
Menyapa sahabatku chayank..
MAAF..
Baru jalan jalan dan keliling lagi.. pokoknya saya ngabsen dulu yaaaa.. masih banyak tugas keliling maklum habis istirahat tugas banyak yaaaa.. harap di persorry..
salam sayang
October 22nd, 2009 - 17:58
Hmmm…kemampuan desain mas keren
mas, desain baju distro juga ga…??
October 22nd, 2009 - 17:59
Cooll…
mantab…
hebat…
hehehe….
bagus mas..melet2 tapi kyiut banget
October 23rd, 2009 - 11:48
@ jeri : ya lumayan panjang , tp klo dah biasa cepat kok..
@ tukang corat coret : yup di coba dulu mas..
@ mey : iya sama-sama makasih juga ya dah berkunjung ke sini..
@ maya sari: job great!! hehe
@ nyubi : oke.. tunggu aja..
@ kangboed : pikir kangen banda taunya kang boed..
@ lagi belajar edit template : makasih..
@ Financial advicer: ya kadang design baju juga, tergantung orderan hehe..
@ berita unik : iya kyiut kaya yang buatnya halah, hehehe..
October 23rd, 2009 - 12:25
wah..nemu lagi nih blog keren..suka maen di sotosop ya..salam dari corelholic nih…
October 24th, 2009 - 15:19
@zonamerah : wah saya emang keren mas, heheh, salam juga buat corelholic.. saya vektor ama pixel holic,
October 27th, 2009 - 04:36
keren sob..mantaffff jago desain ni…semngat ya..aku dukung terus
October 27th, 2009 - 11:36
terima kasih dukunganya..
November 2nd, 2009 - 03:22
wah bisa di coba nih….mantap aku senang nggambar tapi nggakbisa ngeditnya di photosop mas.mantap nih….infonya
November 6th, 2009 - 15:07
@grandchief : yup sama-sama mas..
December 11th, 2009 - 17:08
weeess.. mantav ne omm..
klo buatin karikatur like my face bisa gk om..??
January 20th, 2010 - 08:59
brur, ko gw pas klik fill patch tuh, malah keisi warna hitam smua ya, g kaya di tutorial yg diatas, jadi garis2 patch nya yg keisi hitam,,tu knp brur?thanks
January 20th, 2010 - 13:04
@ dhanyrasi : waduh kok di bilang om sih?? bisa aja sih di buat..
@ AmmaR : garis pathnya yang berubah jadi hitam?? mungkin waktu klik kanan bukan pilih fill gak?? klo itu bukan fill tapi stroke!! apa itu maksudnya??
February 15th, 2011 - 13:01
fery good mas Ian.
sangat menginspirasi…
saya suka artikel design mas Ian
moga2 saya bisa paham tentang pelajarna kali ini
heeee…..