Cara membuat tombol website menggunakan photoshop

Di dalam artikel ini saya akan menjelaskan tentang cara membuat sebuah tombol yang digunakan untuk web, dan artikel ini merupakan artikel untuk pemula yang baru menggunakan photoshop. Saya akan menjelaskan secara mendalam fitur tersebut agar dapat mudah untuk dipahami bagi pemula. Pada bagian pertama dari tutorial ini saya sudah menjelaskan cara membuat 2 tombol elegan khusu untuk web.

Sekarang saya akan melanjutkan untuk membuat 2 tombol lainnya. Secara khusus kita akan bekerja menggunakan filter, tekstur, dan masker.

Preview:

Karena tutorial ini sangat detail, maka saya memutuskan untuk membaginya dalam 2 bagian. Pada bagian pertama Anda telah belajar bagaimana untuk membuat tombol # 1 dan # 2. Hari ini Anda akan melihat bagaimana untuk membuat tombol # 3 dan # 4.

Seperti pada tutorial pertama, kita mulai membuka dokumen baru dengan detail 640 × 480 piksel di 72pixels / inch:

Lakukan modifikasi sedikit latar belakang putih ini, menambahkan overlay gradien. Klik kanan pada layer background dan pilih "Blending Options". Berikut pilih gradient overlay (radial) dan menambahkan gradien pergi dari abu-abu terang (# f3f3f3) ke gelap satu (c6c6c6 #)
.

Step 2

Tombol yang akan kita buat adalah tombol elegan kompak yang memberikan ilusi 3d. Mari kita mulai menciptakan bentuk utama menggunakan Rounded Rectangle Tool (U) dengan radius 10px.

Step 3

Klik kanan pada layer yang berbentuk thumbnail dan pilih "Blending Options" untuk menambahkan  gradien overlay yang dimulai dari hijau muda (# 49e45c) ke yang lebih gelap (# 0fb122).

Step 4

Untuk menambahkan efek 3d sangatlah mudah. Cukup menduplikasi bentuk utama dengan menuju Layer> Duplicate Layer (atau tekan Ctrl + J) dan memindahkan hasil layer duplikasi di bawah yang asli. Klik kanan dan pilih opsi blending. Berikutnya menambahkan hijau gelap Color Overlay (# 055d03).



Klik panah ke bawah pada keyboard Anda 4-5 kali untuk bergerak lebih ke bawah dari bentuk awal. Sekarang efek 3d yang muncul sudah mulai jelas:

Step 5

Masih melalui opsi blending, sekarang kita menambahkan Drop Shadow lembut dengan bentuk di bawah ini:

Step 6

Untuk menambahkan efek lebih mendalam pada tombol, buatlah layer baru di atas objek utama dan beri judul  "white border". tekan Ctrl + klik pada vektor mask di objek utama untuk memilih pikselnya, kemudian klik Paint Bucket Tool (G) dan isi seleksi yang dipilih dengan warna putih (#FFFFFF).

Step 7

Dengan seleksi masih dalam keadaanaktif, klik Elliptical Marquee Tool dan klik sekali tombol anak panah ke atas pada keyboard Anda. langkah ini akan bergerak 1px ke atas.



Akhirnya tekan delete untuk menghapus area yang dipilih dari bentuk putih. Kemudian tekan ctrl + D untuk membatalkan dan mengurangi opacity menjadi sekitar 50%. Berikut ini adalah batas putih nya :

Step 8

Kita sekarang dapat menambahkan efek suara untuk tombol. Seperti yang kita buat pada langkah 6, membuat layer baru, pilih area dari bentuk utama (ctrl + klik pada vector mask-nya) tapi kali ini mengisi seleksi dengan warna hitam (# 000000). Tekan ctrl + D untuk membatalkan pilihan.



Pergi ke Filter> Noise> Add Noise dan masukkan nilai berikut:



Atur blending mode layer untuk "screen" dengan opacity 50%. Dengan cara ini daerah hitam akan hilang.

Step 9

Sentuhan terakhir sebelum menambahkan teks :  membuat lapisan lain dan beri judul itu dengan "top light". ulangi lagi ctrl + klik pada vektor mask pada objek utama, mengatur putih sebagai warna foreground, siapkan soft brush dengan kekerasan 0% dan klik sekali pada daerah di atas tombol untuk menciptakan efek cahaya. Kemudian kurangi opacity menjadi sekitar 50%.

Step 10

Kita sekarang dapat menambahkan teks. Font yang digunakan adalah Arial, set pada miring tebal karena itu memberi kesan perspektif. Satu-satunya gaya untuk menambah teks adalah dengandrop shadow (# 0c3801):



Tombol # 3 sudah selesai dan ini adalah hasilnya:

Button 4

Seperti biasa, mari kita mulai dari bentuk utama. siapkan Rounded Rectangle Tool dan menggambar bentuk dengan radius sudut 5px.

Step 2

Mari kita menambah gaya pada tombol. Dari opsi blending, pilih gradient overlay. 2 warna coklat yang digunakan adalah # 744a08 dan # bf9149.



Tambahkan stroke 2px (# 6a3d07) untuk efek naik pada tombol:



Akhirnya tambahkan white inner glow  untuk memberikan efek dalam:

Step 3

Sekarang saatnya untuk menggunakan tekstur. Dalam kasus ini, saya telah memilih tekstur kayu. Anda bebas untuk menggunakan segala jenis tekstur, jika Anda sedang mencari tekstur kayu gratis Anda bisa browsing ke Stock.XCHNG. Setelah Anda menemukan, download dan letakan ke dalam dokumen Photoshop, di atas tombol. (File> Place ...).
Bagaimana untuk bisa mengubah ukuran tekstur? Tekan ctrl + T untuk mengaktifkan transform tool, kemudian mengubah ukuran tekstur menggunakan anchor poin. Jangan lupa untuk tekan tombol shift sambil Resize untuk mempertahankan proporsi konstan.

Step 4

Atur blending mode layer untuk overlay. Dengan cara ini Anda bisa melihat bagaimana tekstur akan mempengaruhi tombol:



Untuk menghilangkan daerah kosong kita bisa menggunakan masking. Jadi ctrl + klik pada bentuk  utama vektor masker untuk memilih piksel dan tekan "add layer mask" tombol di bagian bawah jendela layer. sehingga dapat mengurangi opacity menjadi sekitar 90%.

Step 5

Sekarang kita membuat tombol "download now". Jadi ribbon yang menampilkan harga bisa sangat berguna. Buat grup baru dan beri judul dengan "Ribbon". Klik Rectangle Tool (U) dan menggambar bentuk seperti ditunjukan pada gambar di bawah:



Hal ini membutuhkan beberapa gaya, sehingga membuka jendela pilihan Blending dan menambahkan overlay gradien diawali dari # d11616 ke # f24141, stroke 1px (# 930606), white inner glow 1px dan efek bayangan yang lembut.






Dan di sini adalah hasil setelah diterapkan gaya:

Step 6

Zoom in, klik laso Polygonal tool dan membuat pilihan seperti yang ditunjukkan pada gambar di bawah:


Kemudian tahan alt dan tekan tombol  "add layer mask" untuk menghapus area yang dipilih.

Step 7

Dengan pen tool , buatlah bentuk seperti yang ditunjukkan pada gambar. Gunakan opsi blending untuk menambahkan overlay warna merah gelap (# 5d0202) dan memindahkan bentuk segitiga ini di bawah bentuk utama pita.



Dengan Rectangular Marquee Tool buatlah pilihan dari sisi kiri bentuk segitiga (meliputi bentuk stroke yang utama juga).




Tahan Alt dan tekan tombol layer mask (seperti yang kita buat pada langkah 6) untuk menghapus seleksi.

Step 8

Untuk melengkapi Ribbon , kita dapat menambahkan harga. Font yang digunakan selalu Arial (regular, 13pt).

Step 9

Sentuhan terakhir adalah teks "Download". Kita bisa mencoba menggunakan font serif kali ini, Georgie (Bold italic, 18pt). Satu-satunya gaya yang saya telah ditambahkan ke teks adalah bayangan (# 3f2a02):

Selesai

Tutorial selesai! Selamat mencoba untuk membuat desain tombol website yang keren.