Cara Membuat Tombol 3D Menggunakan Adobe Photoshop

Ada banyak hal menakjubkan yang bisa kamu ciptakan Adobe Photoshop yang berguna secara online, mulai dari bingkai foto sederhana hingga UI 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.

Dalam artikel ini kami akan menunjukkan cara membuat tombol 3D menggunakan Photoshop, bersama dengan status visual 'naik' dan 'turun', sehingga Anda dapat menganimasikannya. (Kami tidak akan membahas animasi itu sendiri dalam artikel ini.)

Langkah 1: Siapkan Dokumen Anda

Meskipun tombol 3D paling sering muncul di situs web, penting untuk dicatat bahwa ada aplikasi lain untuk tombol tersebut, seperti GIF animasi, tampilan produk tiruan, dan game seluler. Bergantung pada untuk apa Anda membuat tombol ini, format file akhir Anda dan dimensinya mungkin berbeda.

Untuk membuat tombol 3D di Photoshop, Anda harus membuat dokumen khusus untuk itu. Untuk melakukan ini, buka Photoshop, dan klik Buat Baru > Kustom . Mulai ketikkan nilai Anda.

Untuk membuat tombol 3D, Anda membutuhkan dokumen horizontal. Untuk milik kami, kami menggunakan:

900 x 300 piksel tinggi
300 Piksel/Inci
Mode Warna RGB

Meskipun spesifikasi ini jelas bukan aturan yang keras dan cepat, ini akan memastikan bahwa Anda memiliki lebih dari cukup ruang untuk bekerja, dan kemampuan untuk meningkatkan dan menurunkan ukuran tombol sesuai kebutuhan.

Langkah 2: Atur Persegi Panjang Anda untuk Tombol 3D Anda

Setelah Anda mengatur spesifikasi untuk file Anda, Anda akan dibawa ke ruang kerja Anda. Anda akan memiliki kanvas putih horizontal dalam satu lapisan, dan di sinilah Anda akan mulai membuat tombol.

Untuk membuat tombol 3D Anda, klik pada Alat Persegi Panjang Bulat di sisi kiri layar Anda, terlihat di sini dengan warna merah. Anda juga dapat menggunakan pintasan kamu untuk mengaksesnya.

Klik sekali pada layer putih Anda: ini akan secara otomatis memunculkan . Anda Buat Persegi Panjang Bulat kotak. Anda akan menggunakan kotak ini untuk menentukan dimensi persegi panjang Anda.

Untuk tombol kami, kami menggunakan:

Lebar 300 piksel
75 piksel tinggi

Kami juga memastikan bahwa sudutnya dibulatkan 10 piksel. Tidak terlalu tinggi, dan juga tidak terlalu rendah. Kemudian kami menekan oke .

Catatan: Tombol bervariasi menurut ukuran dan bentuknya, jadi Anda tidak perlu menggunakan dimensi yang tepat ini. Selain itu, jika Anda mencari info lebih lanjut tentang pintasan, berikut adalah beberapa di antaranya perintah keyboard Photoshop yang paling berguna .

Saat Anda menekan oke , Photoshop akan membuat persegi panjang bulat dengan dimensi ini di dalam lapisan Anda. Anda dapat mengubahnya Mengisi dan Pukulan warna dengan menggunakan menu tarik-turun di sudut kiri atas layar Anda.

Untuk tujuan tutorial ini---dan untuk mengilustrasikan seperti apa tombol 'naik' dan 'turun'---kita akan membuat tombol 'turun' menjadi merah.

Langkah 3: Jadikan Tombol Anda 3D

Setelah Anda membuat tombol dasar dan memilih warnanya, Anda akan ingin menyesuaikannya di Gaya Lapisan kotak dialog. Ini agar terlihat lebih 3D.

Untuk mengakses Gaya Lapisan kotak dialog, Anda bisa pergi Lapisan > Gaya Lapisan dari menu atas. Anda juga dapat mengklik dua kali pada layer yang berisi tombol Anda, untuk memunculkannya secara otomatis. Cara ini jauh lebih cepat dan kami pribadi lebih menyukainya.

Setelah kotak Layer Style Anda habis, buka opsi Bevel & Emboss . Hidupkan.

Ini adalah cara cepat dan mudah untuk memberikan tepi tombol Anda tampilan '3D' yang lebih menonjol. Untuk tutorial ini, ini adalah pengaturan yang kami gunakan:

Struktur

Gaya: Bevel Dalam
Teknik: pahat lembut
Kedalaman: 605
Arah: Ke atas
Ukuran: 5
Melunakkan: 1

naungan

Sudut: 90
Ketinggian: 37
Mode Sorotan: Penghindaran Warna, Opacity 55%
Mode bayangan: Beberapa, 25% Opacity

Triknya adalah membuat pengaturan cukup tinggi sehingga Anda dapat melihat beberapa perbedaan, tetapi tidak terlalu kuat sehingga berlebihan.

Setelah kami selesai dengan Bevel & Emboss, kami pergi ke Kontur dan menyalakannya juga. Kontur membuat definisi Bevel & Emboss sedikit lebih kuat, dan untuk tutorial ini kami memilih pengaturannya Kerucut - Terbalik .

Selanjutnya, hidupkan Hamparan gradien . Inilah yang membuat tombol terlihat membulat, sedikit 'mengkilap'. Pengaturannya adalah sebagai berikut:

Modus Campuran: Hamparan
Kegelapan: 90
Gaya: Linier
Sudut: 90
Skala: 100

Akhirnya, kami menyalakan Bayangan Jatuh , untuk membuat tombol terlihat sedikit 'dibesarkan' dari latar belakang putih situs web atau blog. Sekali lagi, berikut adalah pengaturannya:

temukan semua akun yang tertaut ke alamat gmail saya

Struktur

Modus Campuran: Beberapa
Kegelapan: 35
Sudut: 90
Jarak: 2
Sebaran: 6
Ukuran: 8

Kualitas

Kontur: Linier
Kebisingan: 0
Lapisan Knock Out Drop Shadow: Pada

Sekarang saatnya untuk menyimpan spesifikasi ini sebagai Layer Style.

Langkah 4: Simpan sebagai Layer Style

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 melakukannya.

Begini caranya.

Sebelum mengklik oke dalam Gaya Lapisan kotak dialog, klik Gaya baru . Ketika Anda melakukannya, Photoshop akan menyimpan gaya lapisan ini yang telah Anda buat untuk tombol Anda.

Jika Anda menggunakan Photoshop CC, gaya baru ini akan disimpan ke Perpustakaan bagian, seperti yang Anda lihat di atas. Ini sangat cepat dan mudah diakses.

Langkah 5: Cara Menggunakan Gaya Lapisan Tersimpan

Sekarang setelah Anda mendesain tombol Anda dan Anda telah menyimpannya sebagai Layer Style, mari kita lihat aksinya untuk status 'naik' Anda. Tidak ada kata bohong, ini akan memotong waktu kerja Anda menjadi dua.

Pertama, mari buat tombol lain tepat di atas layer tombol merah, seperti itu. Mari kita membuatnya hijau, untuk penekanan.

Selanjutnya --- alih-alih mengklik dua kali pada layer itu sendiri untuk memunculkan Gaya Lapisan kotak dialog --- klik dua kali pada gaya lapisan di . Anda Perpustakaan panel.

Ketika Anda melakukannya, Photoshop akan secara otomatis menerapkan gaya yang Anda simpan ke layer tombol baru Anda, sambil mempertahankan warna dan bentuknya yang baru. Anda sekarang memiliki dua tombol --- satu dalam keadaan naik, dan satu dalam keadaan turun --- dan itu sangat mudah dilakukan. Saya suka jalan pintas ini.

Langkah 6: Tambahkan Teks ke Tombol Anda

Selanjutnya, kita akan menambahkan teks ke tombol.

Untuk menambahkan teks, buat layer baru di atas dua layer tombol Anda. Klik Ketik alat untuk mulai mengetik.

Untuk tutorial ini, kita akan menulis kata 'berlangganan' karena itu adalah sesuatu yang cukup sering Anda lihat di situs web dan platform media sosial.

Kami juga akan menggunakan font web-safe san serif. Pilihan terakhir yang mana yang Anda gunakan untuk tombol Anda sendiri terserah Anda. Montserrat, Proxima Nova, Arial, dan Verdana semuanya merupakan alternatif yang banyak digunakan, dan aman untuk web.

Namun, setelah ini selesai, masih ada beberapa perubahan halus yang perlu Anda lakukan agar teks ini menjadi 'pop'.

Pertama, klik dua kali pada layer yang berisi teks Anda sehingga Anda dapat memunculkannya di Gaya Lapisan kotak dialog.

Selanjutnya, klik Bayangan batin , untuk menambahkan sedikit depresi (atau area cekung) ke teks Anda. Ini membuatnya tampak seperti huruf-huruf telah terukir di tombol. Pengaturan persis yang kami gunakan untuk tutorial ini ada di bawah.

Struktur

Modus Campuran: Berkembang biak
Kegelapan: 35
Sudut: 90
Jarak: 2
Tersedak: 4
Ukuran: 1

Kualitas

Kontur: Linier
Kebisingan: 0

Selanjutnya, terapkan Hamparan Gradien ke huruf-huruf itu, untuk membuatnya lebih mudah menyatu dengan tombol tanpa terlihat rata. Sekali lagi, pengaturan untuk kita adalah:

Modus Campuran: Warna Terbakar
Kegelapan: 90
Gaya: Linier
Sudut: 90
Skala: 100

Langkah 7: Menyelesaikan

Setelah Anda membuat gaya teks ini --- terutama jika Anda ingin menggunakannya lagi --- buka Gaya baru dan simpan sebelum Anda mengklik oke .

Dengan itu, Anda dapat dengan cepat beralih bolak-balik pada visibilitas antara dua lapisan tombol Anda, untuk melihat seperti apa tampilan status 'naik' dan 'turun'.

Cukup keren, ya? Untuk menyimpan file Anda, buka File > Simpan Sebagai , dan simpan sebagai format file yang tepat untuk proyek apa pun yang sedang Anda kerjakan.

Sesuaikan Blog Anda Dengan Tombol dan Widget 3D

Sekarang setelah Anda mengetahui cara membuat tombol 3D di Photoshop, Anda dapat berkreasi dengannya, merancang tombol 3D Anda sendiri agar sesuai dengan kebutuhan Anda. Dan dengan keterampilan ini di gudang senjata Anda, Anda dapat membuat produk yang tidak hanya profesional, tetapi juga terlihat pribadi.

Ingin tahu tentang hal lain yang dapat Anda lakukan dengan program ini? ini cara menghapus latar belakang di photoshop .

Membagikan Membagikan Menciak Surel Cara Mengakses Tingkat Gelembung Bawaan Google di Android

Jika Anda pernah ingin memastikan ada sesuatu yang rata dalam keadaan darurat, Anda sekarang bisa mendapatkan level gelembung di ponsel Anda dalam hitungan detik.

Baca Selanjutnya Topik-topik yang berkaitan

Kreatif
Adobe Photoshop
Kiat Mengedit Gambar
Tutorial Photoshop

Tentang Penulis Shianne Edelmayer(136 Artikel Diterbitkan)

Shianne memiliki gelar Sarjana Desain dan latar belakang podcasting. Sekarang, dia bekerja sebagai Penulis Senior dan Illustrator 2D. Dia meliput teknologi kreatif, hiburan, dan produktivitas untuk MakeUseOf.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan