Cara Membuat Tombol 3D Menggunakan Adobe Photoshop
Ada banyak hal luar biasa yang dapat Anda buat dalam Adobe Photoshop yang berguna, dari bingkai foto sederhana hingga antarmuka pengguna yang kompleks. Salah satu hal paling berguna yang dapat Anda buat di Photoshop adalah tombol 3D, yang akan berguna jika Anda menjalankan blog atau situs web dengan antarmuka khusus.
Pada artikel ini, kami akan menunjukkan cara membuat tombol 3D menggunakan Photoshop, serta status visual "naik" dan "turun", sehingga tanpa seperti hidup.
Langkah 1: Siapkan dokumen Anda
Meskipun tombol 3D paling sering muncul di situs web, penting untuk dicatat bahwa mereka memiliki aplikasi lain, seperti GIF animasi, tata letak tampilan produk, dan permainan ponsel. Bergantung pada penggunaan tombol ini, format dan dimensi file akhir mungkin berbeda.
Untuk membuat tombol 3D di Photoshop, Anda perlu membuat dokumen khusus. Untuk melakukan ini, buka Photoshop dan klik Create New> Custom. Mulailah.
Untuk membuat tombol 3D, setelah membuka dokumen horizontal, kami menggunakan:
Meskipun spesifikasi ini jelas bukan aturan yang ketat, ini akan memastikan bahwa Anda memiliki cukup ruang untuk bekerja dan kemampuan untuk mengubah ukuran ukuran tombol Anda sesuai dengan kebutuhan Anda.
Langkah 2: Atur Rectangle Anda untuk Tombol 3D Anda
Setelah Anda menyiapkan spesifikasi untuk file Anda, Anda akan diarahkan ke ruang kerja Anda. disitu akan terbuka kanvas putih horizontal dalam satu lapisan, dan dari sana Anda akan mulai membuat tombol Anda.
Untuk membuat tombol 3D Anda, klik alat Rounded Rectangle di sebelah kiri layar Anda, ditampilkan di sini dengan warna merah. Anda juga dapat menggunakan pintasan U untuk mengaksesnya.
Klik sekali pada lapisan putih Anda: ini secara otomatis akan memunculkan kotak Create Rounded Rectangle Anda. Anda akan menggunakan kotak ini untuk menentukan dimensi persegi panjang Anda.
Untuk tombol kami, kami pergi dengan:
Kami juga memastikan bahwa sudut-sudutnya dibulatkan oleh 10 piksel. Tidak terlalu tinggi, dan juga tidak terlalu rendah. Lalu tekan OK.
Ketika Anda menekan OK, Photoshop membuat persegi panjang bulat dengan dimensi-dimensi ini di dalam lapisan Anda. Anda dapat mengubah warna Fill and Stroke menggunakan menu drop-down di sudut kiri atas layar Anda.
Untuk keperluan tutorial ini - dan untuk mengilustrasikan tampilan tombol "atas" dan "bawah" - kami akan mengubah tombol "turun" menjadi merah.
Langkah 3: Jadikan Tombol Anda 3D
Setelah Anda membuat tombol dasar dan memilih warnanya, Anda akan ingin menyesuaikannya di kotak dialog Layer Style. Ini agar terlihat lebih 3D.
Untuk mengakses kotak dialog Layer Style Anda, Anda bisa pergi Layer> Layer Style dari menu atas. Anda juga dapat mengklik dua kali pada lapisan yang berisi tombol Anda, untuk membawanya secara otomatis. Cara ini jauh lebih cepat dan kami lebih suka secara pribadi.
Setelah kotak Layer Style Anda naik, buka opsi Bevel & Emboss. Hidupkan.(turn on)
Ini adalah cara cepat dan mudah untuk memberi tepi tombol Anda tampilan yang lebih tinggi, "3D". Untuk tutorial ini, ini adalah pengaturan yang kami gunakan:
Structure
Triknya adalah membuat pengaturan cukup tinggi sehingga Anda dapat melihat beberapa perbedaan, tetapi tidak terlalu kuat sehingga membuat Anda kewalahan.
Setelah selesai dengan Bevel & Emboss, kami pergi ke Contour dan menyalakannya juga. Contour membuat definisi Bevel & Emboss sedikit lebih kuat, dan untuk tutorial ini kami memilih pengaturan Cone - Inverted.
Selanjutnya, nyalakan Gradient overlay. Inilah yang memberi tombol yang terlihat bulat, sedikit "mengkilap". Pengaturannya adalah sebagai berikut:
Pada artikel ini, kami akan menunjukkan cara membuat tombol 3D menggunakan Photoshop, serta status visual "naik" dan "turun", sehingga tanpa seperti hidup.
Langkah 1: Siapkan dokumen Anda
Meskipun tombol 3D paling sering muncul di situs web, penting untuk dicatat bahwa mereka memiliki aplikasi lain, seperti GIF animasi, tata letak tampilan produk, dan permainan ponsel. Bergantung pada penggunaan tombol ini, format dan dimensi file akhir mungkin berbeda.
Untuk membuat tombol 3D di Photoshop, Anda perlu membuat dokumen khusus. Untuk melakukan ini, buka Photoshop dan klik Create New> Custom. Mulailah.
Untuk membuat tombol 3D, setelah membuka dokumen horizontal, kami menggunakan:
- Tinggi 900 x 300 piksel
- 300 piksel / inci
- Mode warna RGB
Meskipun spesifikasi ini jelas bukan aturan yang ketat, ini akan memastikan bahwa Anda memiliki cukup ruang untuk bekerja dan kemampuan untuk mengubah ukuran ukuran tombol Anda sesuai dengan kebutuhan Anda.
Langkah 2: Atur Rectangle Anda untuk Tombol 3D Anda
Setelah Anda menyiapkan spesifikasi untuk file Anda, Anda akan diarahkan ke ruang kerja Anda. disitu akan terbuka kanvas putih horizontal dalam satu lapisan, dan dari sana Anda akan mulai membuat tombol Anda.
Untuk membuat tombol 3D Anda, klik alat Rounded Rectangle di sebelah kiri layar Anda, ditampilkan di sini dengan warna merah. Anda juga dapat menggunakan pintasan U untuk mengaksesnya.
Klik sekali pada lapisan putih Anda: ini secara otomatis akan memunculkan kotak Create Rounded Rectangle Anda. Anda akan menggunakan kotak ini untuk menentukan dimensi persegi panjang Anda.
Untuk tombol kami, kami pergi dengan:
- Lebar 300 piksel
- Tinggi 75 piksel
Kami juga memastikan bahwa sudut-sudutnya dibulatkan oleh 10 piksel. Tidak terlalu tinggi, dan juga tidak terlalu rendah. Lalu tekan OK.
Ketika Anda menekan OK, Photoshop membuat persegi panjang bulat dengan dimensi-dimensi ini di dalam lapisan Anda. Anda dapat mengubah warna Fill and Stroke menggunakan menu drop-down di sudut kiri atas layar Anda.
Untuk keperluan tutorial ini - dan untuk mengilustrasikan tampilan tombol "atas" dan "bawah" - kami akan mengubah tombol "turun" menjadi merah.
Langkah 3: Jadikan Tombol Anda 3D
Setelah Anda membuat tombol dasar dan memilih warnanya, Anda akan ingin menyesuaikannya di kotak dialog Layer Style. Ini agar terlihat lebih 3D.
Untuk mengakses kotak dialog Layer Style Anda, Anda bisa pergi Layer> Layer Style dari menu atas. Anda juga dapat mengklik dua kali pada lapisan yang berisi tombol Anda, untuk membawanya secara otomatis. Cara ini jauh lebih cepat dan kami lebih suka secara pribadi.
Setelah kotak Layer Style Anda naik, buka opsi Bevel & Emboss. Hidupkan.(turn on)
Ini adalah cara cepat dan mudah untuk memberi tepi tombol Anda tampilan yang lebih tinggi, "3D". Untuk tutorial ini, ini adalah pengaturan yang kami gunakan:
Structure
- Style: Inner Bevel
- Technique: Chisel Soft
- Depth: 605
- Direction: Up
- Size: 5
- Soften: 1
- Angle: 90
- Altitude: 37
- Highlight Mode: Color Dodge, 55% Opacity
- Shadow Mode: Multiple, 25% Opacity
Triknya adalah membuat pengaturan cukup tinggi sehingga Anda dapat melihat beberapa perbedaan, tetapi tidak terlalu kuat sehingga membuat Anda kewalahan.
Setelah selesai dengan Bevel & Emboss, kami pergi ke Contour dan menyalakannya juga. Contour membuat definisi Bevel & Emboss sedikit lebih kuat, dan untuk tutorial ini kami memilih pengaturan Cone - Inverted.
Selanjutnya, nyalakan Gradient overlay. Inilah yang memberi tombol yang terlihat bulat, sedikit "mengkilap". Pengaturannya adalah sebagai berikut:
- Blend Mode: Overlay
- Opacity: 90
- Gaya: Linear
- Angle: 90
- Skala: 100
Akhirnya, kami menyalakan Drop Shadow, untuk membuat tombolnya terlihat sedikit "diangkat" dari latar belakang putih situs web atau blog. Sekali lagi, ini adalah pengaturannya:
Struktur
- Blend Mode: Banyak
- Opacity: 35
- Angle: 90
- Jarak: 2
- Spread: 6
- Ukuran: 8
Kualitas
- Kontur: Linear
- Kebisingan: 0
- Layer Knocks Out Drop Shadow: Aktif
Sekarang saatnya untuk menyimpan spesifikasi ini sebagai Layer Style.
Langkah 4: Simpan sebagai Gaya Layer
Setelah Anda selesai dengan pengaturan tombol Anda, itu akan mulai terlihat 3D. Karena kemungkinan besar Anda akan membuat lebih dari satu tombol 3D, kami perlu menemukan cara cepat dan mudah untuk melakukan ini.
Begini caranya.
Sebelum mengklik OK di kotak dialog Layer Style, klik pada New Style. Ketika Anda melakukannya, Photoshop akan menyimpan gaya layer ini yang telah Anda buat untuk tombol Anda.
Jika Anda menggunakan Photoshop CC, gaya baru ini akan disimpan ke bagian Libraries Anda, seperti yang Anda lihat di atas. Ini sangat cepat dan mudah diakses.
Langkah 5: Cara Menggunakan Layer Style Tersimpan
Sekarang setelah Anda merancang tombol Anda dan Anda menyimpannya sebagai Layer Style, mari kita lihat dalam aksi untuk keadaan "naik". ini akan memotong waktu kerja Anda menjadi dua.
Pertama, mari kita buat tombol lain langsung di atas lapisan tombol merah, seperti itu. Mari kita buat hijau, untuk penekanan.
Selanjutnya — mengklik dua kali pada layer itu sendiri untuk memunculkan kotak dialog Layer Styles — klik dua kali pada layer style di panel Libraries Anda.
Ketika Anda melakukannya, Photoshop akan secara otomatis menerapkan gaya simpanan Anda ke lapisan tombol baru Anda, sambil tetap mempertahankan warna dan bentuknya yang baru. Anda sekarang memiliki dua tombol — satu dalam keadaan naik, dan satu lagi di bawah — dan itu sangat mudah dilakukan.
Langkah 6: Tambahkan Teks ke Tombol Anda
Selanjutnya, kita akan menambahkan teks ke tombol.
Untuk menambahkan teks, buat layer baru di atas dua lapisan tombol Anda. Klik Type tools untuk mulai mengetik.
Untuk tutorial ini, kami akan menulis kata "Subscribe" karena itu adalah sesuatu yang Anda lihat cukup sering di situs web dan platform media sosial.
Kami juga akan menggunakan font aman-web san serif. Pilihan terakhir yang Anda gunakan untuk tombol Anda sendiri terserah Anda. Montserrat, Proxima Nova, Arial, dan Verdana adalah alternatif yang banyak digunakan, dan aman untuk web.
Namun, setelah ini selesai, masih ada beberapa perubahan halus yang perlu Anda lakukan untuk membuat teks ini menjadi "pop."
Pertama, klik dua kali pada layer yang berisi teks Anda sehingga Anda bisa membawanya di kotak dialog Layer Style Anda.
Selanjutnya, klik Inner Shadow, untuk menambahkan sedikit depresi (atau daerah cekung) ke teks Anda. Ini membuatnya tampak seperti huruf-huruf yang telah terukir di tombol. Pengaturan persis yang kami gunakan untuk tutorial ini ada di bawah.
Structure
- Blend Mode: Multiply
- Opacity: 35
- Angle: 90
- Distance: 2
- Choke: 4
- Size: 1
- Contour: Linear
- Noise: 0
Selanjutnya, terapkan Gradient Overlay pada surat-surat itu, untuk membuatnya lebih mudah berbaur ke dalam tombol tanpa terlihat datar. Sekali lagi, pengaturan untuk kita adalah:
- Blend Mode: Color Burn
- Opacity: 90
- Style: Linear
- Angle: 90
- Scale: 100
Langkah 7: Menyelesaikan
Setelah Anda membuat gaya teks ini — terutama jika Anda ingin menggunakannya lagi — buka New Style dan simpan sebelum Anda mengklik OK.
Dengan dibungkus itu, Anda dapat dengan cepat beralih bolak-balik pada visibilitas antara dua lapisan tombol Anda, untuk melihat seperti apa keadaan "atas" dan "bawah".
Cukup keren, ya? Untuk menyimpan file Anda, buka File> Save As, dan simpan sebagai format file yang tepat untuk proyek apa pun yang sedang Anda kerjakan.
Baca Juga:
Kustomisasi Blog Anda Dengan Tombol dan Widget 3D
Sekarang setelah Anda tahu cara membuat tombol 3D di Photoshop, Anda bisa berkreasi dengannya, merancang tombol 3D Anda sendiri sesuai dengan kebutuhan Anda. Dan dengan keahlian ini di gudang senjata Anda, Anda dapat membuat produk yang tidak hanya profesional, tetapi juga pribadi.