Thursday, January 7, 2010

Membuat Button Dengan Photoshop

Photoshop Dasar
Salah satu keistimewaan dari program Photoshop adalah dapat membuat  button unik dengan berbagai variasi bentuk dan warna. Anda dapat membuat button tersebut sesuai selera. Di bawah ini akan saya jelaskan step by step cara membuat button atau tombol sederhana menggunkanan photoshop. nantinya tombol tersebut bisa digunakan pada blog atau website yang Anda buat. Gambar di paling bawah adalah beberapa contoh tombol yang didesain dengan photoshop yang bisa Anda download dengan gratis.

  • Buka program Photoshop kemudian click menu File dan pilih New
Photoshop Dasar
  • Tentukan ukuran lebar (width) dan tinggi (height) area gambar misalnya 300 pixel x 300 pixel
Photoshop Dasar

  • Tentukan warna latar dan warna depan arean tersebut kemudian click gradient tool (perhatikan tanda panah merah),
Photoshop Dasar

  • Drag mouse pada area putih sesuka Anda misalnya dari sudut kiri atas menuju sudut kanan bawah, lanjutkan dengan meng-click Horizontal Type Tool (T) untuk membuat tulisan kemudian tulis text sesuai tombol yang Anda butuhkan misalnya "NEXT" dengan warna hijau, hasilnya akan seperti gambar di bawah ini :
Photoshop Dasar

  • Double click layer text pada window layer biasanya di kanan bawah untuk memunculkan Window Layer Style. Pada jendela ini Anda dapat mengatur efect tulisan dengan men-checklist option-option dibawahnya, misalnya Drop Shadow, Beavel and Emboss. Scrollbar dan angka disamping berpungsi untuk mengatur intensitas efect atau shadow tersebut. Setelah selesai click OK.
Photoshop Dasar
  • Crop tulisan "NEXT" yang telah diatur pada window Layer Style dengan ukuran yang nantinya disesuaikan dengan kebutuhan.
Photoshop Dasar
  • Hasil setelah dicrop seperti tampak pada gambar di bawah :
Photoshop Dasar
  • Langkah terakhir, save dengan memilih menu File kemudian click Save For Web. Pilih jenis file yang Anda butuhkan misalnya GIF, JPG, PNG. Resolusi gambar tersebut bisa diatur dengan menggeser scrollbar atau mengisi anggka sesuai option yang tadi dipilih. Pengaturan resolusi ini akan sangat berpengaruh pada besar kecilnya file gambar dalam byte.
Photoshop Dasar
  • Gambar atau image dengan kapasitas file yang kecil akan lebih cepat dibuka atau diakses pada saat online tetapi gambar dengan kapasitas file yang besar akan lebih jelas. Di sinilah Anda harus pintar mengatur format image dan resolusi sesuai kebutuhan sehingga gambar akan tetap terlihat jelas dengan loading yang tetap cepat.
  • Berikut ini adalah contoh-contoh tombol atau button yang didesain dengan photoshop, Anda boleh men-download file tersebut gratis. 
 
Photoshop Dasar