Blog Design: Membuat Tombol Blog dengan Corel Draw

Kemampuan blogging akan sangat baik jika di dukung kemampuan desain yang mumpuni. Sehingga, Anda dapat membuat blog Anda benar-benar berbeda. Jika selama ini Anda memakai tombol-tombol dari blog lain, baik itu ememang blog penyedia 'free button' atau Anda mengambil dari teman Anda, alangkah sebaiknya kini Anda belajar membuatnya sendiri agar blog Anda benar-benar tampil berbeda. Saya datang hari ini merintis tutorial segitiga blog-coreldraw-photoshop dan tentu saya masih tetap memegang topic blog dan tak akan keluar jauh membahas tutorial yang tak berkaitan.


Silahkan download yang belum memiliki corel draw. Jika sudah, Buka corel draw Anda. (Strat - All Programs - CorelDRAW Graphic Suite - CorelDraw). Kita langsung masuk ke tutorial.

Buat Kotak
Yang pertama Anda lakukan adalah membuat kotak. Cari tool untuk membuat kotak di sebelah kiri. Ada banyak barisan tool (toolbox) dan Anda bisa sorot dulu untuk mengetahui namanya. (Untuk membuat kotak Anda gunakan Rectangle Tool atau Anda bisa memanggil fungsinya dengan klik F6.
Pembuatan
Tentukan posisi awal dimana pojok kiri atas kotak akan berada. Klik disana dan tahan kemudian lakukan drag ke arah kanan dan bawah untuk menciptakan kotak. Anda bisa ubah tinggi dan lebar kotak dengan memanfaatkan 9 tombol hitam di sekeliling kotak.

Buat Efek Melengkung di Pojok Kotak
Kembali lagi perhatikan barisan tool (tolbox) disebelah kiri. Pilih shape tool atau Anda bisa memanggilnya dengan klik F10. 
Pembuatan
Shape tool berbentuk panah segitiga hitam pada layar. Ketika Anda menggunakan shape tool Anda hanya menemukan 4 titik hitam di masing-masing pojok kotak yang tadi Anda buat. Klik kotak hitam pojok kiri atas dengan shape tool, kemudian tahan dan geser sedikit ke kanan. Efek akan langsung terlihat. Semakin ke kanan efek melengkung semakin besar, jika dirasa pas. Lepaskan tombol mouse dan jadi.


Buat 2 Objek Pembantu
Sekarang kita akan membuat efek timbul dengan sangat mudah. Anda tadi telah membuat satu kotak dengan efek melengkung di masing-masing pojoknya. Buat dua kotak serupa sehingga menjadi 3.

Pembuatan
Sekarang kita menggunakan tombol Pick Tool.
Klik objek utama yang telah Anda buat. Lalu tekan CTRL + D untuk duplikasi objek serupa. Lakukan dua kali sehingga sekarang objek menjadi tiga. Sekarang Anda akan menggunakan 2 objek. Drag dan amankan objek pertama ke area lain karena akan kita gunakan nanti.

Letakkan objek ke 3 di atas objek ke 2 dengan posisi bertumpuk seperti berikut ini:
Aktifkan ke dua kotak tadi. Caranya: Silahkan Anda klik area kosong di sebelah kiri atas diluar area dua objek. Drag ke kanan dan ke bawah dan berhenti di sebelah kanan bawah di luar area dua objek sehingga kotak biru dengan garis putus-putus melingkari dua objek. Lepaskan dan sekarang dua objek tersebut telah aktif. Cara lain aktifkan dua objek, klik objek pertama, tekan tombol shift lalu klik objek kedua.

Dalam keadaan dua objek aktif, sekarang silahkan Anda klik Arrange kemudian klik Shaping dan terakhir kik Back minus Front.
Sekarang kedua objek akan berpotongan dan menghasilkan objek seperti berikut ini:
Nah, buat objek tersebut lagi. Caranya sama saat kita tadi menduplikasi kotak. Silahkan klik objek seperti di atas dan masih ingat bukan kita gunakan CTRL + D untuk membuatnya menjadi dua. Setelah Anda memiliki dua objek tersebut, sekarang putar objek 180 derajat sehingga menjadi berlawanan arah dengan objek pertama. Perhatikan Property Bar pada bagian atas di bawah menubar, pada kolom isian rotate isikan 180 kemudian tekan Enter.
 
Kini objek Anda telah berputar menjadi seperti berikut ini.
Kita memiliki tiga objek, satu kotak dan dua objek lain (saya tidak tahu namanya :D)

Pasang Ke Kotak
Klik kedua yang tidak terbalik, kemudian tekan shift pada keyboard jangan dilepas dulu sampai Anda klik objek utama kotak. Nah, sekarang Anda mengaktifkan dua objek. Pada keadaan dua objek aktif, silahkan Anda tekan tombol T kemudian tekan L pada keyboard. Otomatis sekarang objek kedua berada di atas objek kotak mojok ke atas dan ke kiri.

Lakukan hal yang sama, klik objek ketiga (objek terbalik), tekan tombol shift dan jang di lepas sampai Anda klik objek utama yakni kotak. Kemudian tekan tombo B lalu R pada keyboard dan objek tersebut akan berada di atas kotak mojok kiri dan kanan. Hasilnya seperti di bawah ini.

Pewarnaan
Nah, memasuki bagian-bagian akhir seakrang kita lakukan pewarnaan. Sekarang 3 objek berada pada satu lokasi dan bertumpuk. Klik (aktifkan) objek kotak. Klik bagian tengah agar Anda tak salah klik 2 objek lain. Perhatikan Toolbox, silahkan klik Fountain Fill Dialog.
 
Anda akan masuk ke kotak dialog pewarnaan. Atur sesuai keinginan. Untuk latihan ikuti saja tutor berikut.
- Type pilih Radial
- Color Blend pilih Two Color, tentukan warna pertama dan kedua disana
- Sorot ke bagian kotak preview warna dan drag simbol plus untuk menentukan posisi warna kedua terhadap warna pertama.
Jika sudah klik OK.

 
Hasilnya menjadi seperti ini.

Efek Shadow Untuk 2 Objek Pembantu
Nah objek kotak telah Anda beri warna, kini saatnya Anda memberi effect pada dua objek lain. Silahkan klik objek pertama dan beri warna hitam. Kemudian pada Toolbox pilih Interactive Transparency Tool.
 
Klik pada bagian kiri atas di luar objek dan kemudian drag ke kanan bawah hingga bagian dalam kotak seperti gambar berikut. Jika sudah lepaskan tombol mouse.
Hasilnya menjadi seperti ini
 
Lakukan hal yang sama pada objek terakhir. Sehingga menjadi seperti ini.

Hilangkan Garis
Pembuatan tombol telah selesai namun akan lebih cantik jika kita hilangkan garis setiap objek. Caranya aktifkan semua objek (Ctrl+A) lalu pada Toolbox silahkan klik No Outline.
 
Tampilannya menjadi lebih halus seperti ini
Sekarang tekan CTRL+A lagi, jika semua objek sudah aktif silahkan tekan CTRL+G untuk menggabungkan semua objek.

Terakhir, Buat Tulisan
Pada toolbox silahkan pilih text tool atau Anda bisa memanggilnya dengan tekan F8. Setelah anda tekan Text Tool cursor Anda berubah menajdi huruf A dengan tanda plus di dekatnya. Klik pada bagian tombol di mana Anda ingin menuliskan teks Anda.
 
Anda bisa membesarkan atau mengecilkan, arahkan mouse ke tanda kotak kecil hitam di pojok-pojok area huruf kemudian seteah berubah menjadi tanda panah silahkan drag keluar untuk membesarkan atau drag ke dalam untuk mengecilkan.
Untuk membuat huruf benar-benar berada di tengah tombol, silahkan pada Toolbox Anda klik Pick Tool. Klik tulisan Anda kemudian tekan tombol shift pada keyboard dan jangan dilepas hingga Anda klik tombol. Jika tombol dan tulisan sudah dalam keadaan aktif, silahkan tekan tombol C dan E pada keyboard dan otomatis tulisan Anda akan berada di tengah-tengah tombol

Sedikit shadow untuk sentuhan terakhir. Sekarang text Anda berposisi di atas button. Klik text Anda saja, kemudian pada toolbox pilih Interactive Drop Shadow Tool. Posisikan mouse Anda tepi kiri huruf C (atau huruf pertama Anda jika Anda menggunakan kata lain) kemudian drag ke kanan dan akhiri (lepas) di bagian tepi kanan huruf terakhir Anda.
 Hasilnya menjadi seperti ini:

Nah, sekarang objek Anda sudah jadi. Sedikit panjang namun saya rasa banyak meawkili tool-tool dari coreldraw yang sebelumnya tidak Anda pakai. Semoga bermanfaat.

Komentar

  1. memang seorang blogger itu sangat membutuhkan ilmu desain....
    selain bisa membuat blog itu berbeda, sekaligus bisa menjadi daya tarik tersendiri....

    thanks masdoyok....

    BalasHapus
  2. saya setuju dengan pendapat mas doyok..bahwa setipa blogger memerlukan ketrampilan dalam hal desain. paling tidak sedikit- sedikit menguasai software aplikasi desain grafis seperti photoshop, corel draw, macromedia flash, dan software editing yang lainnya..jadi blog kita bisa lebih hidup dengan karya- karya kreatifitas kita dan tentunya paling tidak kita akan merasa bangga terhadap blog yang kita miliki.karena kita hias sendiri dan kita modif sendiri..makanya kita belajar mulai sekarang.YUKKKK!!!

    BalasHapus
  3. memang bagus, tetapi sangat tidak fleksibel. kenapa, karena satu gambar/file hanya untuk satu tombol. bagi saya sudah temasuk pemborosan :)

    penggunaan CSS3 semacam rounded corner, RGBA, box shadow & gradient dapat digunakan untuk membuat tombol yang serupa, meskipun kekurangannya tidak dapat dibaca oleh trident dan presto

    :)

    BalasHapus
  4. @ardian
    yang tekenal IE bahkan belum maksimal :D
    hm gimana ya...
    dan menurut saya ini sama sekali lebih simpel dan ringan :D

    Coba mas perhatikan walau hasilnya simple saya hampir terangkan berbagai macam tool yang bisa Anda kembangkan sendiri

    pemilihan hasil simple utk mempermudah pemahaman :D

    BalasHapus
  5. @angin
    sama sama terima kasih ya kunjungannya

    BalasHapus
  6. @yusuf abdul
    bener mas :D
    saya setuju banget
    nanti kan ini mengarah ke yg lain yg lebih detail

    BalasHapus
  7. @aditx
    monggo
    monggo
    semoga bermanfaat

    BalasHapus
  8. @super
    kapan kapan dibahas tentang flash :D

    BalasHapus
  9. bagus nih jadi pembelajaran,pake coreldraw bagus banget

    BalasHapus
  10. View ya http://sites.google.com/site/indamsite/myfile/slowpinkwhitev0.1.zip

    sebelum ku publih, ku minta saran.

    Thanks

    BalasHapus
  11. Buat posting ni, kykx sulit bwt qu krn g da sotosop (photoshop) bwt hp. Drpd itu, q msh pnsrn ma kasus blogx tmenq yg diredirect, ni urlx: http://akuakuh.blogspot.com

    BalasHapus
  12. klo saya lebih suka pake yg online aja mas untuk membuat tombol2 kayak gitu...

    BalasHapus
  13. mas salam kenal...gimana cara penempatan nya diblog misalnya menempatkan gambar yang kita sudah bikin di corell atau photoshop ...mohon pencerahan nya..thnks

    BalasHapus
  14. @infokomp
    tunggu saja tutorial berikutnya ya :D
    mungkin besok sore :D

    BalasHapus
  15. @berita
    kalu buisa corel
    lebihe nak mas
    itu kan cuma contohnya simple :D

    BalasHapus
  16. @ame
    gampang buat redirect dgn script di blog

    ini http://www.masdoyok.co.cc/2009/08/url-forwardng-pemindahan-tujuan.html

    BalasHapus
  17. @indam
    kalau menurut saya enteng indham :D

    BalasHapus
  18. salam sahabat
    wah telat,memang sok sibuk he..he..masDoy untuk memasukkan huruf itu bila memakai copas bisa ga ya?setelah ta coba bisa namun bila di set up kok ilang..thnxs n good luck

    BalasHapus
  19. Wah mantapz mas doy... Tx atas ilmunya

    BalasHapus
  20. wah... mas doyok emang jago desain grafis... jdi iri saya... he,,he,,

    BalasHapus
  21. Multitalenta. Sangat jarang blogger yang mempunyai kemampuan blogging dengan kemampuan design grafis. salut mas atas postingannya ^_^

    BalasHapus
  22. ternyata jago disain juga mas doyok ki...

    BalasHapus
  23. @dhana
    sipp monggo diutik utik biar jadi lebh manteppp

    BalasHapus
  24. @akhmad
    makasih mas dukungannya
    makasih juga kunjungan selalu

    BalasHapus
  25. @akhatam
    terima kasih kunjungannya yaaa

    BalasHapus
  26. mas kl mo buat huruf putus-putus untuk anak TK gmn ya??? makasih

    BalasHapus
  27. Sekalian izin copas master

    BalasHapus
  28. mantap kang..
    coba kang posting laporan PTK untuk pelajaran TIK..

    BalasHapus
  29. boleh d coba...
    mksh ats posting y..

    BalasHapus
  30. cara kerjanya gmn mas doyok kalao diklik perlu tmnbhan bahasa pmrograman jg doong

    BalasHapus
  31. cara uploadnya gman mas doyok,request dong

    BalasHapus

Posting Komentar

Postingan Populer