Cara Membuat Butang 3D Menggunakan Adobe Photoshop

Cara Membuat Butang 3D Menggunakan Adobe Photoshop

Terdapat banyak perkara menakjubkan yang boleh anda buat Adobe Photoshop yang berguna dalam talian, mulai dari bingkai gambar sederhana hingga UI kompleks. Salah satu perkara paling berguna yang boleh anda buat di Photoshop adalah butang 3D, yang akan berguna jika anda menjalankan blog atau laman web dengan antara muka tersuai.





Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat butang 3D menggunakan Photoshop, bersama dengan keadaan visual 'atas' dan 'bawah', sehingga anda dapat menghidupkannya. (Kami tidak akan membahas animasi itu sendiri dalam artikel ini.)



Langkah 1: Sediakan Dokumen Anda

Walaupun butang 3D muncul paling kerap di laman web, perlu diketahui bahawa terdapat aplikasi lain untuknya, seperti GIF animasi, paparan produk mock-up, dan permainan mudah alih. Bergantung pada apa yang anda buat butang ini, format fail akhir anda dan dimensinya mungkin berbeza.





Untuk membuat butang 3D di Photoshop, anda perlu membuat dokumen khusus untuknya. Untuk melakukan ini, buka Photoshop, dan klik Buat Baru> Custom . Mula menaip nilai anda.

Untuk membuat butang 3D, anda memerlukan dokumen mendatar. Untuk kami, kami menggunakan:



  • Tinggi 900 x 300 piksel
  • 300 Piksel / Inci
  • Mod Warna RGB

Walaupun spesifikasi ini jelas bukan peraturan yang sukar dan cepat, ini akan memastikan anda mempunyai lebih banyak ruang untuk digunakan, dan kemampuan untuk meningkatkan ukuran butang anda ke atas dan ke bawah mengikut keperluan.

Langkah 2: Sediakan Segi Empat untuk Butang 3D Anda

Selepas anda menetapkan spesifikasi fail anda, anda akan dibawa ke ruang kerja anda. Anda akan mempunyai kanvas putih mendatar dalam satu lapisan, dan di sinilah anda akan mula membina butang anda.



Untuk membina butang 3D anda, klik pada Alat Segi Empat Bulat di sebelah kiri skrin anda, berwarna merah. Anda juga boleh menggunakan jalan pintas U untuk mengaksesnya.

Klik sekali pada lapisan putih anda: ini secara automatik akan memunculkan lapisan anda Buat Segi Empat Bulat kotak. Anda akan menggunakan kotak ini untuk menentukan dimensi segi empat tepat anda.



Untuk butang kami, kami pergi dengan:

  • Lebar 300 piksel
  • Tinggi 75 piksel

Kami juga memastikan bahawa sudut dibundarkan dengan 10 piksel. Tidak terlalu tinggi, dan juga tidak terlalu rendah. Kemudian kami menekan okey .

Catatan: Butang berbeza mengikut ukuran dan bentuk, jadi jangan merasa anda harus menggunakan dimensi yang tepat ini. Selain itu, jika anda mencari lebih banyak maklumat mengenai jalan pintas, berikut adalah beberapa arahan papan kekunci Photoshop yang paling berguna .

Semasa anda menekan okey , Photoshop akan membuat segi empat bulat dengan dimensi ini di dalam lapisan anda. Anda boleh menukarnya Isi dan Pukulan warna dengan menggunakan menu lungsur di sudut kiri atas skrin anda.

Untuk tujuan tutorial ini --- dan untuk menggambarkan seperti apa butang 'atas' dan 'bawah' --- kita akan menjadikan butang 'bawah' menjadi merah.

Langkah 3: Buat Butang Anda 3D

Setelah anda membuat butang asas anda dan memilih warnanya, anda akan mahu menyesuaikannya di Gaya Lapisan kotak dialog. Ini untuk menjadikannya kelihatan lebih 3D.

Untuk mengakses anda Gaya Lapisan kotak dialog, anda boleh pergi Lapisan> Gaya Lapisan dari menu atas. Anda juga boleh mengklik dua kali pada lapisan yang mengandungi butang anda, untuk memunculkannya secara automatik. Cara ini jauh lebih pantas dan secara peribadi kami lebih suka.

Setelah kotak Gaya Lapisan anda habis, pergi ke pilihan Bevel & Emboss . Hidupkannya.

Ini adalah cara yang cepat dan mudah untuk memberikan bahagian tepi butang anda yang lebih tinggi, '3D'. Untuk tutorial ini, ini adalah tetapan yang kami gunakan:

Struktur

  • Gaya: Bevel dalaman
  • Teknik: Pahat lembut
  • Kedalaman: 605
  • Arah: Ke atas
  • Saiz: 5
  • Melembutkan: 1

Pembayang

  • Sudut: 90
  • Ketinggian: 37
  • Mod Sorotan: Color Dodge, Kelegapan 55%
  • Mod Bayangan: Pelbagai, Kelegapan 25%

Caranya adalah dengan membuat tetapan yang cukup tinggi sehingga anda dapat melihat beberapa perbezaan, tetapi tidak begitu kuat sehingga sangat luar biasa.

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

Seterusnya, hidupkan Hamparan kecerunan . Inilah yang memberikan butang yang kelihatan bulat, sedikit 'glossy'. Tetapannya adalah seperti berikut:

  • Mod Campuran: Lapisan
  • Kelegapan: 90
  • Gaya: Linier
  • Sudut: 90
  • Skala: 100

Akhirnya, kami hidupkan Jatuhkan Bayangan , untuk menjadikan butang kelihatan sedikit 'dinaikkan' dari latar belakang laman web atau blog yang putih. Sekali lagi, berikut adalah tetapannya:

tetingkap jam pengawas berhenti jam kod 10

Struktur

  • Mod Campuran: Pelbagai
  • Kelegapan: 35
  • Sudut: 90
  • Jarak: 2
  • Sebar: 6
  • Saiz: 8

Kualiti

  • Kontur: Linier
  • Kebisingan: 0
  • Layer Knock Out Drop Bayangan: Dihidupkan

Kini tiba masanya untuk menyimpan spesifikasi ini sebagai Gaya Lapisan.

Langkah 4: Simpan sebagai Gaya Lapisan

Setelah anda selesai dengan tetapan butang anda, ia akan mula kelihatan 3D. Kerana kemungkinan besar anda akan membuat lebih dari satu butang 3D, kita perlu mencari cara yang cepat dan mudah untuk melakukan ini.

Ini caranya.

Sebelum mengklik okey di dalam Gaya Lapisan kotak dialog, klik pada Gaya baru . Apabila anda melakukannya, Photoshop akan menyimpan gaya lapisan ini yang telah anda buat untuk butang anda.

Sekiranya anda menggunakan Photoshop CC, gaya baru ini akan disimpan untuk anda Perpustakaan bahagian, seperti yang anda lihat di atas. Ia sangat cepat dan mudah diakses.

Langkah 5: Cara Menggunakan Gaya Lapisan Tersimpan

Sekarang setelah anda merancang butang anda dan menyimpannya sebagai Gaya Lapisan, mari kita lihat ia berfungsi untuk keadaan 'naik' anda. Tiada kata bohong, ini akan mengurangkan masa kerja anda menjadi separuh.

Pertama, mari buat butang lain tepat di atas lapisan butang merah, seperti itu. Mari menjadikannya hijau, untuk penekanan.

Seterusnya --- bukannya mengklik dua kali pada lapisan itu sendiri untuk memunculkan Gaya Lapisan kotak dialog --- klik dua kali pada gaya lapisan pada anda Perpustakaan panel.

Apabila anda melakukannya, Photoshop secara automatik akan menerapkan gaya yang disimpan ke lapisan butang baru anda, sambil mengekalkan warna dan bentuk barunya. Anda kini mempunyai dua butang --- satu dalam keadaan naik, dan satu dalam keadaan bawah --- dan sangat mudah dilakukan. Saya suka jalan pintas ini.

Langkah 6: Tambahkan Teks ke Butang Anda

Seterusnya, kita akan menambahkan teks ke butang.

Untuk menambahkan teks, buat lapisan baru di atas lapisan dua butang anda. Klik Jenis alat untuk mula menaip.

Untuk tutorial ini, kita akan menulis perkataan 'langganan' kerana ia sesuatu yang sering anda lihat di laman web dan platform media sosial.

Kami juga akan menggunakan fon selamat web san serif. Pilihan terakhir yang mana yang anda gunakan untuk butang anda sendiri bergantung kepada anda. Montserrat, Proxima Nova, Arial, dan Verdana semuanya adalah alternatif yang banyak digunakan, dan selamat untuk web.

Setelah ini selesai, namun, masih ada beberapa perubahan halus yang perlu anda lakukan untuk mendapatkan teks ini untuk 'pop'.

Pertama, klik dua kali pada lapisan yang mengandungi teks anda supaya anda dapat memunculkannya di dalam Gaya Lapisan kotak dialog.

Seterusnya, klik pada Bayang dalaman , untuk menambahkan sedikit kemurungan (atau kawasan yang tenggelam) pada teks anda. Ini menjadikannya seperti huruf-huruf yang terukir pada butang. Tetapan tepat yang kami gunakan untuk tutorial ini ada di bawah.

Struktur

  • Mod Campuran: Banyakkan
  • Kelegapan: 35
  • Sudut: 90
  • Jarak: 2
  • Tercekik: 4
  • Saiz: 1

Kualiti

  • Kontur: Linier
  • Kebisingan: 0

Seterusnya, sapukan a Hamparan Gradien pada huruf-huruf itu, untuk menjadikannya lebih mudah menyatu dengan butang tanpa kelihatan rata. Sekali lagi, tetapan untuk kami adalah:

  • Mod Campuran: Warna Bakar
  • Kelegapan: 90
  • Gaya: Linier
  • Sudut: 90
  • Skala: 100

Langkah 7: Selesai

Selepas anda membuat gaya teks ini --- terutamanya jika anda mahu menggunakannya lagi --- pergi ke Gaya baru dan simpan sebelum anda mengklik okey .

Dengan itu, anda boleh menukar jarak antara butang dua butang dengan cepat dan cepat untuk melihat keadaan keadaan 'atas' dan 'bawah'.

Cukup sejuk, ya? Untuk menyimpan fail anda, pergi Fail> Simpan Sebagai , dan simpan sebagai format fail yang sesuai untuk projek apa sahaja yang mungkin anda jalankan.

Sesuaikan Blog Anda Dengan Butang dan Widget 3D

Setelah anda mengetahui cara membuat butang 3D di Photoshop, anda boleh menjadi kreatif dengannya, merancang butang 3D anda sendiri untuk memenuhi keperluan anda. Dan dengan kemahiran ini di gudang senjata anda, anda dapat membuat produk yang bukan hanya profesional, tetapi juga penampilan peribadi.

Ingin tahu mengenai perkara lain yang boleh anda lakukan dengan program ini? Inilah cara membuang latar belakang di Photoshop .

Berkongsi Berkongsi Tweet E-mel Cara Mengakses Tahap Buih Buatan Google pada Android

Sekiranya anda perlu memastikan sesuatu berada dalam keadaan darurat, kini anda dapat memperoleh tahap gelembung di telefon anda dalam beberapa saat.

Baca Seterusnya Topik-topik yang berkaitan
  • Kreatif
  • Adobe Photoshop
  • Petua Penyuntingan Imej
  • Tutorial Photoshop
Mengenai Pengarang Shianne Edelmayer(136 Artikel Diterbitkan)

Shianne mempunyai Ijazah Sarjana Muda dalam Reka Bentuk dan latar belakang podcasting. Kini, dia bekerja sebagai Penulis Kanan dan 2D Illustrator. Dia merangkumi teknologi kreatif, hiburan, dan produktiviti untuk MakeUseOf.

Lagi Dari Shianne Edelmayer

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan