Bagaimana Membuat Siggy or Signature Bars





Hahahahahaha, pas saya mencari postingan saya ke Guide yg sudah saya buat tahunan lalu sudah hilang.. akhirnya saya menemukan lagi tetapi semua creditnya di oper ke orang lain. bahkan nama saya tidak di cantumkan sama sekali...

Tetapi tidak mengapa dan saya tetap bersyukur karena setidaknya saya tinggal mengcopy paste dan mengklaim data tersebut kembali..

---------------------------------------------------------

Hi...
berhubung, banyak sekali peminat siggy atau signature dan banyaknya yg ingin di mintai untuk dibuatkan siggy.. Saya berpikir lebih baik saya membantu teman-teman lebih daripada sekedar membuatkan siggy. yaitu mengajarkan bagaimana caranya membuatkan siggy dengan mudah, gampang dan juga terlihat profesional. :)

Saya sendiri tidak ada maksud menjatuhkan teman-teman yg berprofesi pembuat siggy disini, sama sekali tidak. karena ada saja orang-orang yg sudah di berikan ilmunya tetapi tidak punya banyak waktu untuk diluangkan untuk membuat siggy. bahkan memang ada orang yg tidak berbakat seni sehingga hasil siggy yg dihasilkan tidak sebaik seperti para siggy-siggy maker... saya pribadi juga masih belajar banyak dalam hal photoshop beginian, jadi maafkan saya apabila hasil yg di buat tidaklah memuaskan apa yg di inginkan oleh teman-teman. :)

tetapi apabila saya masih menyinggung teman-teman siggy maker, harap maafkan saya. :(

informasi yg saya tuangkan disini hanya bersifat mensharingkan apa yang saya buat, dan juga untuk memenuhi keinginan teman-teman yg sering kali bertanya, "gimana sih caranya bisa buat siggy keren seperti itu?" :)

siggy yg kali ini akan saya ajarkan adalah membuat siggy dengan tipe "userbar". dimana kalian bisa saja mendapatkannya dari sini.. http://www.userbars.com/ atau http://www.userbars.org/ dan apabila anda malas dengan itu semua anda bisa kok membuat nya dengan lebih mudah menggunakan fasilitas disini.. "Siggy yang menggunakan aplikasi Facebook" dan http://userbarmaker.com/

Atau bisa menggunakan program dibawah ini :

Kode:
http://www.brothersoft.com/amitysource-userbar-generator-download-93603.html

banyak sekali teman-teman yg bertanya,

"sin, kok kecil bgt sih siggy loe? apa ga bisa lebih besar lagi?"

atau

"sin, di gedein dong.. biar lebih jelas..."

hahahahahaha, bukannya saya tidak mau... siggy itu sendiri ada banyak macamnya... dan userbar ini memang di desain untuk tampilan kecil dan compact. knapa?


  1. seninya memang disitu..
  2. tidak memakan file yg cukup besar pada saat di lihat karena kecil tetapi eye catchy.
  3. ukuran internasional dari userbar adalah 350x19 pixels dengan alasan supaya bisa masuk ke forum manapun (peraturan forum pada umumnya melarang penggunaan siggy yg besar2), jadi memang di desain untuk kecil. ^_^ tetapi tidak ada larangan untuk membuat ukuran yg berbeda.. itu tergantung dari pribadinya masing2 juga kok.. lebih suka dengan mengikuti standard internasional atau tidak. :)


lalu apabila ada yg bertanya..

"lah kok loe tau sin? apa loe anak desain grafis?"

jawab saya..

"hahahahaha.. kebetulan saya bekerja di perusahaan percetakan yg di dalamnya ada desain grafis sendiri (ada production housenya) dari smp.. jadi hal2 seperti ini saya sudah saya geluti.. dan bukan, saya bukan anak desain grafis... saya ga ada title apapun yg bawa2 embel2 desain grafis.. cuma org awam yg mau belajar ini dan itu doang kok.." :)

lalu apabila ada yg bertanya lagi..

"lah kok bisa sejak smp? gimana ceritanya tuh?"

jawaban saya...

"ente mau belajar buat siggy atau mau belajar tentang saya? kalo mau belajar tentang saya.. kapan2 aja yaaaahh" :p

ok back to the topic... :D

Gambar yg saya buat pada tutorial ini menggunakan adobe photoshop CS 4, tapi jgn panik dulu.. pas SMP kan ga ada photoshop CS 4... yg ada kan photoshop versi-versi bawah.. jadi ga usa khawatir yah, hasil yg di ciptakan juga sama kok. sekarang saya akan mencoba membuat siggy userbar point blank. :)



dan dibawah ini adalah hasil finalnya, saya usahakan sesimple mungkin supaya teman-teman yg baru belajar dapat mudah mengerti..



sekarang let's the fun begin~ :D


STEP 1

pertama2, kita harus membuat new picture pada photoshop yg kita miliki.. ingat, yg saya gunakan adalah CS 4 jadi jgn takut apabila berbeda dengan punya kamu. Smile

pilih lah, program photoshop seperti dibawah ini...



lalu buatlah new atau new pictures dengan ukuran seperti dibawah



lalu tentukan warna apa yg akan kamu gunakan buat sebagai warna dasarnya. akan lebih baik apabila warna yg kamu gunakan sesuai dengan theme atau tema yg kamu ambil.. dalam hal ini saya akan menggunakan warna putih dan abu2 (karena warna point blank pada gemscool yg berwarna putih yg bersifat netral, jadi kebanyakan warna bisa masuk kecuali warna2 yg terlalu terang).

STEP 2

lalu, sekarang kita akan membuat garis2 menyamping yg terlihat tipis tetapi membuat userbar menjadi lebih menarik... pertama2 caranya adalah buatlah file>new atau file>new picture dengan ukuran 6x6 pixels dan transparan. lalu buatlah garis menyamping ini menggunakan pencil toolsyg berada pada samping kiri anda

dengan hasil seperti dibawah ini.



setelah kamu selesai menggambar garis menyamping itu, pencet edit>define patern seperti gambar dibawah...



dan berilah nama yg sesuai dengan apa yg kamu inginkan, disini saya memberikan namanya garis menyamping seperti gambar dibawah "garis menyamping"



setelah sudah selesai memberi nama, sekarang kita balik lagi ke gambar pertama kita yang sudah kita berikan gambar gradient (gradasi). lalu pilih lah patern stamp toolslalu gunakan lah gambar garis menyamping tadi..

karena untuk saya garis yg dihasilkan terlalu tebal, saya menurunkan opacitynya menjadi 15% sehingga hasilnya seperti bawah ini.. untuk mengenai opacity ini bisa suka2 dari teman2.. bisa saja, teman-teman menyukai 25% atau bahkan 10%.. itu semua tergantung kebutuhan dan kesukaan masing2 teman2...



STEP 3

sekarang waktunya kita menaruh logo gemscool. usahakan logo yg digunakan bersifat transparan. sehingga pada saat di gabungkan hasilnya akan seperti dibawah ini. jgn lupa, kamu bisa berkreasi sendiri disini.. pada tutorial kali ini saya usahakan se simple mungkin sehingga tidak ribet dan bingung buat temen2 yg baru belajar.. Smile

utk gambar di bawah, saya mengambil logo gemscool dan logo point blank dari http://www.gemscool.com/index.php cukup klik kanan tulisan gemscoolnya dan point blanknya lalu di save image as (utk pengguna mozilla).

utk garis yg ada di bawah, saya membuat garisnya menggunakan tools line 


STEP 4

sekarang mari kita buat gambar pada tepi2 nya untuk garis sehingga pada saat kita taro di forum manapun, hasilnya akan lebih naiz.. :D

ada 3 cara, tetapi saya akan mengajarkan 2 cara saja.. takutnya beda antara cara yg ketiga pada adobe photoshop yg berbeda. Kedua caranya adalah klik tools line atau buatlah garis secara manual menggunakan pencil toolsApabila menggunakan pencil tools gunakannya pake layer baru.. karena apabila tidak, akan susah untuk mengurangi opacitynya.. :)


inilah hasilnya...



kurangilah opacitynya menjadi 22% sehingga hasilnya menjadi seperti dibawah.




STEP 5

sekarang kita tinggal menaro sedikit efek bayangan pada atas tulisan gemscool dan garis.. caranya adalah membuat gambar elips dengan efek transparan.. untuk bisa menghasilkan gambar lingkaran dengan hasil transparan, pilih lah tools lingkeranlalu berilah warna putih.. setelah sudah selesai kurangilah opacitynya menjadi dibawah 27% untuk hasil yg maksimal.

maka hasil finalnya adalah seperti ini..



btw ini buat temen2 yg tidak dapat melihat lingkaran elips..




apabila teman-teman ada pertanyaan silahkan ajukan disini,  :)

Terima Kasih. Dan bagi yg suka dengan Guide ini you can follow my post in my Blog


You may also like

Diberdayakan oleh Blogger.