Aug 1, 2010

Membuat Icon Menu Kontak Dengan Photoshop

contack icon dengan photoshop
Membuat Icon Kontak dengan photoshop, adalah salah satu tutorial photoshop yang banyak menggunakan layer style, dengan sedikit sentuhan layer style, gambar yang awalnya hanya berdimensi 2 (2D) akan nampak timbul (emboss) dimensi 3 (3D), yang hingga kini sedang menjadi trend design saat ini.

Kali ini, Jaka ingin berbagi tutorial mendesain icon dengan photoshop yang dapat anda praktekkan sendiri dimanapun, kapanpun, dan siapapun asalkan komputer anda hidup dan mempunyai program Adobe Photoshop.


Untuk icon gambar hasil praktek kita kali ini, kita dapat dapat mengimputnya ke website/blog anda tapi jangan lupa terlebih dahulu untuk menresize gambarnya. Dan untuk tata cara mengimportnya ke website/blog, saya tidak membahasnya disini. tapi jika ada yang ingin membahas caranya (memasukkan gambar icon ke website/blog) jangan sungkan-sungkan diberitahukan kepada saya dan nanti saya buat link dibawah tutorial ini.

Langkah 1
Buka lembar kerja baru pada photoshop dengan cara klik menu File >> New, buat dengan ukuran 400 x 400 px. Untuk Background contentnya buat menjadi White dengan 72 Resolution.

Langkah 2
Pilih custom shape tool pada toolbox, pada menu shape pilih gambar telepon, caranya klik segitiga kecil disamping box shape dan pilih symbols.symbols
Buat shape telephone pada kanvas kerja anda.shape tool

Langkah 3
Resterize gambar telephone tersebut dengan cara klik kanan pada layer shape pilih resterize layer, sehingga gambar tersebut menjadi sebuah gambar bitmap. Pilih Magic Wand tool lalu seleksi bagian putih (gambar telepon). Dalam keadaan terseleksi, buat layer baru diatas layer shape dan isi warna seleksi dengan Paint Bucked Tool. Lalu deselect ( Ctrl+D ).design menu contack
Langkah 4.
Pilih brush tool pada toolbox dan brus “Shape 1” dengan warna yang sama ( misalnya hitam untuk gambar ini ).
Tips : untuk memudahkan saat melakukan brush, hilangkan tanda “mata” pada layer 1
layer

Langkah 5.
Tambahkan beberapa Layer style (Blending Option) untuk kedua layer tersebut. dengan cara klik 2x pada setiap layer yang ingin diberi blending option.

  1. Untuk layer “Shape 1”
    Drop Shadowdrop shadowGradient OverlayGradient Overlay 
    StokeStroke
  2. Untuk layer “Layer 1”
    Inner Shadowinner shadow
    Gradient OverlayGradient Overlay

Hasil gambarnya, dapat anda lihat pada gambar dibawah ini.gambar menu contack
Gimana hasil akhir gambarnya? keren kan?, gambar tersebut dapat juga kita masukkan kedalam desain website kita, untuk contoh penggunaannya, berikut gambar template desain yang saya desain sendirijaka zulham web design

Semoga bermanfaat.
Tertarik dengan tutorial diatas? klik tombol tweet diatas untuk berbagi kepada teman anda. Dan untuk yang ingin membuat tutorial “cara mengimput icon gambar diatas ke website/blog” beritahukan saya agar saya membuat link balik ke tutorial tersebut.
About Me

11 comments:

  1. Sebetulnya tidak perlu di-rasterize. Lebih baik keduanya dibuat tetap dalam format vektor. Ini untuk mempermudah ketika ikon ingin di-resize ke ukuran lain. Biasanya kan ikon perlu dibuat dalam beberapa ukuran, sesuai keperluan. Kalau dibuat dalam format pixel seperti ini, akan pecah ketika di-resize.

    ReplyDelete
  2. Untuk referensi coba lihat tutorial yang ini. http://www.desaindigital.com/cara-mudah-desain-ikon-glossy/

    ReplyDelete
  3. @Jeprie : iya mas, resterize disini berguna untuk memecah kedua gambar tersebut (antara bg icon dan gambar telepon) sehingga kita mendapat 2 layer yang berbeda dengan layer style yang berbeda pula. agar tidak pecah pada saat diresize nantinya, alangkah baiknya saat kita buat pertama kali kita buat dengan ukuran yang lebih besar (3000x3000 px) misalnya
    =D

    ReplyDelete
  4. Salam.
    Rupanya anak aceh juga, he he
    Good job bro. Two thumbs buat blog dan penulisnya.

    ReplyDelete
  5. @ Joel : thanks bg joel, maju terus designer aceh!
    =)

    ReplyDelete
  6. dah betul kaya bag jep bilang, gak perlu di resterize, syang ntar klo mo di cetak besar.

    dan klo awalnya di buat dengan file besar, mubazir buat memori komputer, bayangin jika ada berapa job, semuanya di save dengan kapasitas yang besar, sayang komputer juga jadi lambat.

    tapi klo emang punya komputer yang high spech sih ya gak ngaruh,

    makin lama makin menarik penyungguhan dan ide tutorial-tutorialnya, maju terus, tetap belajar dan low profile..

    ReplyDelete
  7. hmmmmmm thanks yah info nya

    ReplyDelete
  8. Sip mantap! Tetap berkarya Jaka..
    mungkin suka warna hijau ya? tutorial sama logonya hijau terus..hehe :D

    ReplyDelete
  9. terus berjuang jaka.. :)

    ReplyDelete

Masukkan komentar Anda dan tekan "Subscribe by Email" untuk melihat balasan komentar