Membuat Tombol Toggle Switch On Off Dengan Photoshop

Jika anda seorang desainer interface maka tutorial berikut merupakan sebuah skill yang harusnya anda miliki. Karena pada turorial ini kita akan Membuat Tombol Toggle Switch On Off Dengan Photoshop yang biasanya digunakan untuk mematikan dan menghidupkan fitur dan sering digunakan pada aplikasi web maupun juga smartphone.

Pada tutorial ini kita akan membuat toggle switch yang sangat sederhana dengan beberapa langkah mudah. Pada akhir tutorial anda juga dapat mengganti warna tombol saklar ini baik hijau untuk hidup, merah untuk mati dan ribuan macan warna lainnya.

PREVIEW DESAIN

Berikut ini gambar yang akan kita desain dengan beberapa tool dan efek layer style menggunakan aplikasi desain adobe photoshop.

DETAIL TUTORIAL

• Tingkat kesulitan : Menengah
• Software yang digunakan : Adobe Photoshop CS 5
• Materi : Membuat efek modern dengan layer style
• Lama pembuatan : 25 Menit

TUTORIAL PHOTOSHOP

Langkah 1

Untuk memulai tutorial membuat toggle switch dengan photoshop buatlah lembar kerja baru dengan menekan menu File > Open. Lalu beri nama lembar kerja dengan Toggle Switch dengan width 600px dan height 500px dengan resolusi 72 pixels/cm.

Setelah lembar kerja baru terbuat klik 2 kali layer background pada pallete layer sehingga layer yang terlocked akan bebas dan tidak dikunci lagi.

Klik lagi 2 kali pada layer tersebut untuk menambah layer style. Klik pada gradient overlay dan buat gradient Radial seperti berikut ini.

Langkah 2

Membuat objek dasar toggle switch

Pada toolbox dibagian kiri photoshop, pilih Rounded Rectangle tool dan setting radius menjadi 50 pixels serta warna hijau #a8bb4a dan buat objek dasar untuk toggle switch seperti gambar berikut.

Kembali klik 2 kali pada layer yang telah terbuat oleh Rounded rectangle tool tadi untuk menambahkan layer style. Isikan layer-layer style seperti yang gambar berikut ini.

Berikut contoh tombol toggle switch sementara yang telah kita hasilkan hingga langkah ini.

Gambar toggle diatas adalah bagian background yang pada langkah berikutnya baru kita menambahkan switch on/offnya.

Langkah 3

Pada toolbox photoshop, pilih Ellips tool untuk membuat objek lingkaran. Lalu sambil menahan keyboard shift tarik lingkaran seperti yang kita buat pada gambar dibawah ini.

Pada layer lingkaran tersebut, klik 2 kali untuk menambahkan layer style dan buat layer style seperti gambar berikut.

Gambar dibawah merupakah hasil yang telah kita dapatkan setelah menambahkan efek seperti layer style diatas.

Langkah 4

Agar terlihat lebih realistis, buat layer baru diantara objek pertama toggle switch dan lingkarang, anda bisa memberi nama layer menjadi Bayangan dengan mengklik 2 kali pada nama layer.

Lalu pilih warna foreground menjadi hitam dan pilih brush tool dan brush dengan hardness 0% seperti yang terlihat pada gambar berikut.

Langkah 5 

Pilih kembali layer lingkarang, lalu duplicate dengan menekan Ctrl + J. Pilih Edit > Free Transform Path dan dengan bantuan tombol shift + alt pada keyboard perkecil lingkarang seperti yang kita buat pada gambar dibawah.

Klik kanan pada layer lingkaran kecil tersebut dan hilangkan layer style dengan memilih clear layer style, Klik 2 kali untuk memberi layer style dan buat beri efek layer style berikut.

Langkah 6

Sekarang kita akan menambahkan teks pada tombol toggle switch yang telah kita desain. Pilih type tool dan buat teks dengan font Myriad Pro dengan style bold dan warna #4c4c4c.

Pada teks tersebut berilah efek layer style (lagi) seperti berikut.

Langkah 7

Jika anda ingin mengganti warna pada seperti warna merah saat sedang OFF anda bisa klik 2 kali pada thumbnail warna pada shape yang telah kita buat pada langkah 2. Setelah klik 2 kali akan muncul window warna dan anda bebas memilih warna yang anda inginkan.

Download file hasil tutorial ini pada Toggle switch.

Keyword: Membuat Tombol Toggle Switch On Off Dengan Photoshop...
Membuat Tombol Toggle Switch On Off Dengan coreldraw... memasang Toggle Switch On Off di blog atau website... Toggle Switch On Off rar... Toggle Switch On Off free download.. Toggle Switch On Off png... Toggle Switch On Off psd.. Toggle Switch On Off cdr.. pengaturan Toggle Switch On Off dengan php... Toggle Switch On Off dengan javascribe ...