Langkah 1. Membuat dokumen baru 102*50 piksel. Isi latar belakang dengan warna #838383 . Pilih alat Bulatalat(Persegi panjang dengan tepi membulat). Tetapkan pengaturan berikut:

Mengubah warna latar belakang pada #111111 . Gambarlah sebuah persegi panjang agar sesuai dengan ukuran kanvas.

Langkah 2. Klik dua kali pada layer persegi panjang dan terapkan layer style berikut:

Bayangan jatuh:

Cahaya batin

Bevel dan Emboss (timbul/bevel)

Hamparan gradien

Stroke

Hasil:

Langkah 3. Pilih alat Pensil(pensil) dengan ukuran 2 piksel. Ubah warna dasar menjadi #eee1cd. Melakukan garis horizontal melintasi persegi panjang Anda.

Terapkan gaya lapisan berikut:

Bayangan batin

Cahaya luar

Hasil:

Langkah 4. Pastikan layer garis masih aktif. Jalankan perintah Lapisan >LapisanMasker>MengungkapSemua(Lapisan > Lapisan Masker > Ungkapkan Semua). Pilih alat Gradien(Gradien) dan atur pengaturan berikut:

Terapkan gradien seperti yang ditunjukkan pada gambar:

Hasil Anda:

Langkah 5. Pilih alat Pena(Pena) dan buat bentuk seperti yang ditunjukkan pada gambar.

Jalankan perintah menyaring>Kabur >Gauassianmengaburkan(Filter > Blur > Gaussian Blur) dengan radius 0,6 piksel.

Langkah 6. Aktifkan layer persegi panjang.

Pilih konten lapisan ini. Mengapa menekan CTRL dan klik pada simbol topeng.

Balikkan pilihan ( SHIFT +CTRL+SAYA). Kembali ke layer dengan bentuk yang Anda gambar dengan pena. Hapus pilihan. Hapus pilihan ( CTRL+D).
Hasil Anda:

Langkah 7 Gandakan layer dan posisikan secara simetris.

Langkah 8 Aktifkan layer persegi panjang dan pilih isinya. Membuat lapisan baru di atas lapisan persegi panjang dan jalankan perintah Sunting >Stroke(Sunting > Goresan). Pengaturannya ditunjukkan pada gambar.

Hari ini kita akan berbicara tentang hal kecil yang penting seperti sebuah tombol, atau lebih tepatnya, bagaimana sebuah tombol dibuat di Photoshop.

Tombolnya mungkin untuk berbagai keperluan dan aplikasi misalnya untuk situs, antarmuka perangkat lunak. Tombol untuk situs web atau antarmuka, jika Anda mengikuti semua aturan, seharusnya memiliki 3 - 4 status. Mengapa menanyakan tiga atau empat bergantung pada apakah beberapa status tombol akan cocok, dan apakah diperlukan status keempat.

Saat ini, tidak semua status tombol digunakan di mana pun, tetapi ini tidak sepenuhnya benar. Semua status dibuat untuk memudahkan pengguna dalam menavigasi antarmuka. Berbicara dalam bahasa yang sederhana, tombol untuk tindakan pengguna apa pun menunjukkan apa yang terjadi dan menunjukkan tindakan terkait.
Tidak sulit untuk mengembangkan sebuah tombol di Photoshop, mari kita tetap mendefinisikan apa itu tombol.

Tombol adalah elemen kontrol yang bereaksi terhadap tindakan pengguna tertentu.

Mari kita lihat empat negara bagian ini:

1. Keadaan statis adalah keadaan tombol di mana pengguna tidak melakukan tindakan apa pun dengannya.
2. Panduan adalah keadaan tombol ketika pengguna mengarahkan kursor mouse ke atasnya.
3. Mendesak adalah keadaan tombol ketika pengguna mengkliknya.
4. Aktif– ini adalah keadaan tombol yang disorot dan menunjukkan kepada pengguna di mana dia berada (biasanya ini digunakan agar pengguna memahami lokasinya, misalnya, di halaman situs mana dia berada).

Kami menemukan apa itu tombol dan statusnya. Mari kita mulai membuat tombol di Photoshop, atau lebih tepatnya tombol dan empat statusnya.

Kami membuka Photoshop, membuat dokumen baru dengan dimensi yang kami butuhkan, disarankan untuk mengisi latar belakang dengan warna antarmuka yang kami buat, ini dilakukan agar dapat melihat dengan jelas tampilannya dalam pekerjaan. Dan kita mulai membuat tombol di Photoshop. Mari kita ambil alat persegi panjang dengan tepi membulat dan buat bentuk tombol masa depan kita.

Dengan bantuan gaya lapisan isi bentuk tombol dengan gradien linier, untuk ini kita lanjutkan Lapisan > Gaya Lapisan > Hamparan Gradien atau klik dua kali pada layer dengan bentuk tombol.

Mari buat volume dan bayangan untuk tombol kita dengan menyalin layer kita. Untuk melakukan ini, seret layer kita dengan tombol ke piktogram (ikon) membuat lapisan baru, atau buat layer kita dengan tombol aktif lalu buka lapisan> lapisan duplikat. Mari kita lakukan tindakan ini dua kali. Lalu beri nama tombol layer, volume, bayangan. Kemudian klik pada layer bayangan klik kanan mouse dan hapus layer style, lakukan hal yang sama dengan layer volume. Kemudian ubah warna layer volume. Dan pindahkan lapisan ke bawah menggunakan alat tersebut bergerak (V).

Untuk membuat tombol lebih bervolume, mari buat sedikit cahaya dan garis luar, kita akan melakukan ini melalui cahaya bagian dalam dalam gaya lapisan. Mari kita atur warna untuk cahayanya.

Sekarang mari kita selesaikan layer bayangan. Ayo pergi lapisan> rasterisasi. Kurangi opacity menjadi 13%. Selanjutnya, terapkan filter Gaussian blur, dengan parameter seperti yang ditunjukkan pada gambar di bawah.

Tombol di Photoshop hampir siap, yang tersisa hanyalah menambahkan keterangan pada tombol; baca lebih lanjut tentang bekerja dengan teks di artikel. Untuk melakukan ini, mari kita ambil alat teks horisontal ayo pilih font yang diinginkan dan tulis prasasti yang kita butuhkan.

Sekarang kita akan membuat teks tertekan, dan juga membuat sorotan dan garis besar di tepi prasasti, kita akan melakukan semua ini melalui gaya lapisan.

Tombolnya digambar di Photoshop. Hasil akhirnya bisa dilihat di atas, sekarang kita akan membuat status sisa untuk tombol kita.

Pertama-tama, mari lampirkan tombol yang dibuat dalam grup lapisan dan panggil status statis grup. Untuk melakukan ini, tekan tombol Menggeser dan pilih semua layer kecuali background, lalu klik Ctrl+G dan ganti nama grup. Mari kita duplikat grup untuk status tombol yang tersisa, untuk ini kita lanjutkan lapisan> grup duplikat dan beri nama status tombol. Mari susun grup di bawah ini secara berurutan; untuk melakukan ini, pilih alatnya bergerak (V) pilih grup dan tekan panah bawah pada keyboard.

Sekarang mari kita ubah setiap grup ke keadaan yang kita perlukan. Hal pertama yang akan kami ubah adalah kelompok bimbingan. Untuk melakukan ini, di grup lapisan bernama hover, pilih lapisan tombol dan edit gaya lapisan. Di dalamnya kita hanya akan mengedit overlay gradien dan membuatnya lebih terang.

Selanjutnya mari kita edit keadaan tombol saat ditekan. Untuk tombol ini kita akan mengedit overlay gradien seperti pada keadaan sebelumnya, kita juga perlu mencentang kotak inversi, ditambah lagi kita akan mengurangi volume sehingga kita akan mendapat kesan bahwa ketika ditekan tombol tersebut ditekan. Untuk mengurangi volume, kita harus memilih lapisan volume dan bayangan, karena bayangan kita juga akan menjadi lebih kecil, dan menggunakan alat ini bergerak (V) gunakan panah pada keyboard untuk memindahkannya ke atas.

Dan terakhir, mari kita aktifkan tombolnya. Untuk melakukan ini, Anda perlu mengubah warna hamparan gradien seperti tombol hover, dan juga menghilangkan bayangan dan volume seperti tombol klik. Kita sudah tahu cara melakukan ini, saya hanya akan mengatakan bahwa tombol aktif perlu diberi gradien warna yang berbeda agar terlihat dengan latar belakang tombol lainnya. Anda tentu saja juga dapat mengubah warna tulisan kami, tetapi saya tidak akan melakukan ini.

Itu saja, tombol kita sudah dibuat di photoshop, menurut saya pelajarannya cukup jelas, jika ada pertanyaan tulis di kolom komentar, saya akan coba jawab jika memungkinkan. Jangan lupa berlangganan buletin untuk menjadi orang pertama yang mengetahui artikel baru. Anda juga dapat membaca pelajaran tentang membuat jejaring sosial.

Tingkat kesulitan: Sedang.

Waktu tayang: 1 jam.

Dalam pelajaran ini saya akan mengajari Anda cara menggambar tombol untuk pemain. Kali ini - ungu dan merah muda, karena abu-abu dan hitam terkadang tampak sedikit membosankan. Tombolnya tidak sulit untuk digambar. Dalam pekerjaan kami, kami akan menggunakan efek seperti External Glow dan Gaussian Blur, serta alat Transform dan Transform.

Langkah 1

Buka dokumen web baru. Lingkaran luar tombolnya tembus cahaya, jadi latar belakangnya penting bagi kita kali ini. Pilih Rectangle Tool (M), gambarkan bentuk 720 x 170 px dan isi itu ungu. Pergi ke palet Appearance dan pilih Add New Fill dari menu sekunder. Untuk isian baru ini, pilih warna abu-abu gelap (85% hitam). Lalu pergi ke Effect > Simulate dan terapkan efek Film Grain. Atur Opacity menjadi 70% dan latar belakang siap.

Langkah 2

Pilih Ellipse Tool (L) dan gambarlah sebuah lingkaran berukuran 83 x 83 px. Isi dengan gradien linier dan atur sudutnya menjadi 90 derajat. Lalu pergi ke Effect > Blur > Gaussian Blur dan terapkan Radius 1,5 px. Untuk membuat lingkaran semi-transparan, atur Opacity menjadi 50%.

Langkah 3

Salin lingkarannya, tempel salinannya di depan dan hapus semua desain. Copy dan paste kembali lingkaran baru (hijau) untuk membuat lingkaran lain (merah). Sebelum melanjutkan, buka Edit > Preferensi > Umum dan atur Kenaikan Keyboard menjadi 0,5 px. Sekarang pilih lingkaran merah dan pindahkan dengan menekan tombol panah bawah dua kali. Pilih kedua lingkaran dan di palet Pathfinder, klik tombol Menghapus dari objek komposit (Kurangi dari area bentuk)> Transformasi (Perluas).

Pindahkan bentuk yang dihasilkan kembali dan isi gradien radial dari putih menjadi hitam. Lalu pergi ke Effect > Blur > Gaussian Blur dan terapkan Radius 1 px. Atur Blend Mode ke Screen (hitam akan menjadi transparan) dan Opacity menjadi 60%.

Langkah 4

Dengan memilih lingkaran pertama, pergi ke Object > Path > Make rangkaian paralel, atur dan terapkan offset -8 px untuk mendapatkan lingkaran yang lebih kecil. Hapus semua hiasan dan isi dengan warna ungu. Buka Effect > Stylize dan terapkan efek Outer Glow (parameternya ditunjukkan pada gambar). Sebuah bayangan akan muncul di sekitar lingkaran kedua.

Langkah 5

Copy dan paste lingkaran kedua di depan, biarkan warna isiannya, dan hilangkan efek Outer Glow (di palet Appearance). Dengan memilih lingkaran baru, pergi ke Object > Path > Offset Path. Atur dan terapkan offset -7 px untuk mendapatkan lingkaran yang lebih kecil. Ubah warna isian menjadi ungu. Pilih kedua lingkaran yang dibuat pada langkah ini, pergi ke Object > Blend > Blend Options, pilih Set Steps to 20. Dan kemudian kembali ke Object > Blend dan pilih Make.

Langkah 6

Selanjutnya, buka palet Layers, pilih lingkaran ungu kecil dari grup Blend. Copy paste di depan, tapi keluarkan dari grup karena tidak diperlukan disana. Isi lingkaran baru (merah) dengan gradien linier dari putih ke hitam dan atur sudutnya menjadi 90 derajat. Atur Blending Mode ke Screen (hitam akan menjadi transparan) dan Opacity menjadi 40%.

Langkah 7

Copy dan paste lingkaran terakhir di depan dan beri guratan biru. Kemudian copy dan paste lingkaran biru di depan untuk membuat lingkaran merah dan pindahkan dengan menekan tombol panah bawah sebanyak lima kali. Dengan kedua lingkaran dipilih, di palet Pathfinder, klik tombol Kurangi dari area bentuk > Perluas. Isi bentuk yang dihasilkan dengan gradien radial dari hitam ke abu-abu. Lalu pergi ke Effect > Blur > Gaussian Blur dan terapkan Radius 1,7 px. Atur blending modenya ke Multiply. Dan tekan tombol panah bawah dua atau tiga kali untuk sedikit menggerakkan bentuknya.

Langkah 8

Selanjutnya, mari kita lihat ikon pada tombol. Untuk membuat ikon tombol Putar, aktifkan alat Poligon, klik dokumen dan masukkan nilai seperti yang ditunjukkan untuk membuat segitiga. Putar -90 derajat, buka Effect > Stylize > Rounded Corners dan terapkan Radius 5px. Untuk membuat ikon untuk tombol Stop, gunakan Rectangle Tool (M) untuk menggambar persegi berukuran 20 x 20 px dan terapkan lagi efek Rounded Corners. Ikon untuk tombol Jeda dibuat dari dua persegi panjang tipis (4x22 piksel). Hanya saja kali ini, dengan menerapkan efek Rounded Corners, pilih Radius sebesar 2 px.

Kemudian pilih ketiga ikon, pilih Transform Appearance dari menu Object, lalu Ungroup. Ubah ukuran ikon tombol Putar, buat beberapa salinan, dan gabungkan dengan ikon tombol Jeda untuk membuat ikon tombol Putar Lebih Cepat dan Putar Berikutnya (lihat gambar di bawah). Setelah selesai, kelompokkan bentuk-bentuk yang menyusunnya. Lalu pergi ke Objek > Transformasi > Gambar cermin, pilih Vertikal dan klik Salin. Dan Anda akan memiliki ikon siap pakai untuk tombol Putar Lebih Lambat dan Putar Sebelumnya.

Langkah 9

Isi ikon untuk tombol Putar dengan warna ungu. Pergi ke palet Appearance dan pilih Add New Fill dari menu sekunder. Untuk pengisian kedua, pilih warna seperti pada gambar, lalu buka menu Effect > Distort and Transform > Transform dan pada blok Move atur nilai vertikal menjadi 1,5 piksel. Lakukan hal yang sama dengan ikon lainnya.

Langkah 10

Mari kita kembali ke tombol dari langkah 7. Kelompokkan semua bentuk yang membentuknya. Lalu pergi ke Objek > Transform > Pindah. Atur bidang Horizontal menjadi 100 piksel dan klik Salin. Ulangi tindakan ini lima kali (Ctrl + D). Yang tersisa hanyalah menempatkan ikon pada tombol dan selesai.

Langkah 11

Latar belakang tombol merah jambu sama dengan tombol ungu. Anda cukup menyalinnya dan mengubah warna isian (lihat gambar di bawah).

Untuk membuat kancing berwarna merah muda, cukup ganti warna ungu dengan warna merah jambu. Gambar di bawah menunjukkan langkah-langkah dasar dan warna yang dibutuhkan. Jika warna atau gradien tidak ditentukan, maka tidak ada yang perlu diubah.

Ubah juga warna isian ikon (lihat gambar di bawah). Ulangi langkah 10 dan ikon merah muda sudah siap.

Langkah 12

Jika Anda tidak menyukai warna feminin, Anda bisa membuat kancing berwarna hitam. Mulailah dengan latar belakang dan ubah warna isian...

Kemudian ganti warna ungu pada tombol dengan warna abu-abu (lihat gambar di bawah).

Kemudian ubah warna ikon, letakkan di tombol, dan selesai.

Ini adalah gambar yang sudah selesai. Anda dapat membuat tombol dengan warna berbeda jika Anda mau. Cocokkan saja warna tombol dengan warna latar belakang, karena lingkaran besarnya tembus cahaya. Dan jika Anda ingin mengubah ukuran tombol, konversikan semua efeknya terlebih dahulu.

Apakah Anda memiliki pertanyaan atau sesuatu untuk ditambahkan tentang topik artikel?

06.07.2015 27.01.2018

Dalam tutorial ini kita akan menggambar tombol untuk situs web dengan gaya tertentu. Untuk mengikuti perkembangan zaman, gaya modern dipilih dan digunakan di banyak situs.

Menggambar tombol di Photoshop tidak menjadi masalah. Sebenarnya saya akan menunjukkan caranya menggunakan contoh tombol ini. Dengan menggunakan pengetahuan yang bisa Anda ciptakan tombol khusus, menghubungkan dan menggunakan gaya Anda.

Hal utama adalah tombol tersebut sesuai dengan desain situs atau desain tempat Anda akan menggunakannya.

Buat dokumen baru di Photoshop. Kami akan menggambar tombol menggunakan alat ini Persegi panjang dengan sudut membulat.

Sekarang Anda perlu mengkonfigurasi alat tersebut. Warna yang saya gunakan adalah oranye - #ff8b00. Dan atur radius sudutnya 4 piksel.

Sekarang kita menggambar tombol itu sendiri. Buatlah dimensi dengan mempertimbangkan kira-kira panjang tulisan pada tombol – sedikit lebih panjang agar terdapat telinga.

Sekarang mari kita membuat volume kecil dengan gaya datar. Ini sebuah paradoks, tetapi volumenya akan sama gaya datar. Untuk melakukan ini, buat salinan layer dengan persegi panjang ( CTRL+J) dan persegi panjang yang berada di bawah lapisan - pindahkan 2-3 piksel ke bawah ruang kerja. Ubah warnanya menjadi lebih gelap, in dalam hal ini — #bf6800

Hasilnya akan terlihat seperti ini. Pada prinsipnya, Anda dapat memperbesar volumenya, semuanya tergantung seberapa banyak Anda menggerakkan persegi panjang bagian bawah. Ini pada dasarnya adalah sebuah tombol di bawah sebuah tombol.

Sekarang untuk membuat tombolnya lebih menarik dan menarik, saya sarankan menambahkan gaya Gradien ke persegi panjang atas. Untuk melakukan ini, klik klik dua kali pada layer persegi panjang dan temukan gayanya Hamparan gradien.

Penyesuaian perlu dilakukan - sudut kemiringannya 90 derajat.

Dan juga gradien itu sendiri, warnanya - #ff8c00 Dan #ffcc3f.

Tombolnya telah berubah.

Yang tersisa hanyalah menambahkan prasasti. Saya menggunakan font Myriad Pro dan warnanya putih. Ukuran dan warna font - Anda juga harus memilih berdasarkan desain di mana tombol Anda akan ditempatkan.

Tapi tulisannya putih Beberapa orang mungkin merasa sulit untuk membaca. Untuk mengatasi masalah tersebut, Anda dapat membuat bayangan kecil yang rapi, jelas.

Untuk melakukan ini, buat salinan layer dengan tulisan dan pindahkan yang di bawah 1 piksel ke bawah dan ubah warnanya - #be6d00. Kami melakukan hal yang sama dengan persegi panjang.