Tingkat pemula web / antarmuka pengguna desain tutorial ini akan memandu Anda melalui penciptaan gaya populer tombol yang dapat digunakan dalam berbagai situasi, seperti dalam panggilan-untuk-tindakan, tugas-tugas pengguna umum seperti mengirimkan formulir web , dan membeli produk dari e-toko Anda. Selain penciptaan grafis di Photoshop, kita akan pergi ke HTML dan CSS yang dibutuhkan untuk membuat desain sepenuhnya fungsional.
Langkah 1: Buat Dokumen Photoshop
Tombol kami buat 170px lebar dan 50px tinggi, tapi kami akan membuat sebuah kanvas besar (600x600px) sehingga kita memiliki beberapa ruang bernapas sementara kami bekerja (maka kita hanya dapat memotong pekerjaan kita sebelum menyimpannya).
Tombol kami buat 170px lebar dan 50px tinggi, tapi kami akan membuat sebuah kanvas besar (600x600px) sehingga kita memiliki beberapa ruang bernapas sementara kami bekerja (maka kita hanya dapat memotong pekerjaan kita sebelum menyimpannya).
Langkah 2: Buat Shape Basis
Gunakan Rounded Rectangle Tool (U) diatur ke Shape Layers dan dengan Radius 5px untuk membuat persegi panjang 170x50px.
Gunakan Rounded Rectangle Tool (U) diatur ke Shape Layers dan dengan Radius 5px untuk membuat persegi panjang 170x50px.
Langkah 3: Berikan Shape Basis Layer Style
Munculnya tombol akan sangat tergantung pada gaya layer. Melakukannya dengan cara ini menawarkan fleksibilitas untuk nanti ketika kita ingin mengubah aspek-aspek tertentu dari desain tombol, seperti warna. Di Layers Panel, klik dua kali layer bentuk dasar untuk membuka jendela dialog Layer Style.
Munculnya tombol akan sangat tergantung pada gaya layer. Melakukannya dengan cara ini menawarkan fleksibilitas untuk nanti ketika kita ingin mengubah aspek-aspek tertentu dari desain tombol, seperti warna. Di Layers Panel, klik dua kali layer bentuk dasar untuk membuka jendela dialog Layer Style.
Kami akan memberikan lapisan ini dua efek lapisan: Gradient Overlay dan Stroke. Itu dia.
Gradient Overlay
Color Stop No. 1 - Warna: # 2877ac, Lokasi: 0%
Warna Midpoint # 1 - Lokasi: 40%
Warna Stop No. 2 - Warna: # 87bfe6, Lokasi: 95%
Warna Midpoint # 2 - Lokasi: 40%
Warna Stop No. 3 - Warna: # c2def1, Lokasi: 100
Gradient Overlay
Color Stop No. 1 - Warna: # 2877ac, Lokasi: 0%
Warna Midpoint # 1 - Lokasi: 40%
Warna Stop No. 2 - Warna: # 87bfe6, Lokasi: 95%
Warna Midpoint # 2 - Lokasi: 40%
Warna Stop No. 3 - Warna: # c2def1, Lokasi: 100
Stroke
Untuk efek lapisan Stroke, kita akan menggunakan warna biru gelap (# 2877ac) yang kami gunakan dari Gradient Overlay, yang akan menciptakan pencampuran ini bagus di bagian bawah tombol.
Untuk efek lapisan Stroke, kita akan menggunakan warna biru gelap (# 2877ac) yang kami gunakan dari Gradient Overlay, yang akan menciptakan pencampuran ini bagus di bagian bawah tombol.
Langkah 4: Memberikan Pola Diagonal Baris
Kami akan memberikan tombol pola garis diagonal. Kami akan membuat pola Photoshop dari awal. Untuk memulai, membuat 4x4px baru dokumen Photoshop (Ctrl / Cmd + N).
Kami akan memberikan tombol pola garis diagonal. Kami akan membuat pola Photoshop dari awal. Untuk memulai, membuat 4x4px baru dokumen Photoshop (Ctrl / Cmd + N).
Gunakan Zoom Tool (Z) untuk memperbesarkan (4x4px sangat sulit untuk melihat tanpa zoom in). Buat layer baru dan menghapus default layer Background putih.
Gunakan Pen Tool di Panel Tools untuk menarik garis diagonal putih dari pojok kiri ke pojok kanan bawah kanvas-tahan Shift untuk membuat garis lurus sempurna.
Masuk ke Edit> Define Pattern untuk menyimpan garis diagonal kami sebagai Pattern.
Beralih kembali ke dokumen utama kami. Di Layers Panel, Ctrl / Cmd + klik pada thumbnail Vector mask dari lapisan Basis Shape untuk memuat seleksi di sekitar bentuk tombol (memilih Pilih> Load Selection melakukan hal yang sama).
Buat layer baru di atas dasar bentuk lapisan untuk pola garis diagonal kami. Pastikan bahwa Anda menyimpan seleksi aktif. Mengisi area yang dipilih dengan pola kita buat dengan pergi ke Edit> Fill dan memilih dalam menu dropdown Kustom Pola.
Kami ingin memangkas tepi pola diagonal dengan 2px sehingga tidak menutupi stroke dan tipis warna highlight horisontal di atas (yang berasal dari Gradient Overlay). Pilih Pilih> Modify, masukkan 2px untuk Kontrak Dengan pilihan, membalikkan seleksi Anda (Pilih> Inverse), pastikan Anda masih pada lapisan pola diagonal, dan kemudian hanya tekan Delete untuk menghapus area yang dipilih.
Kami ingin garis menjadi halus, jadi mari kita beralih Blend Mode diagonal pola garis lapisan untuk Soft Light dan mengurangi Opacity layer menjadi 20%.
Gunakan Horizontal Type Tool (T) untuk mengetik teks tombol; Saya menggunakan Museo Slab 500 di 24pt dengan warna teks diatur ke putih (#ffffff).
Di Layers Panel, klik dua kali pada layer teks untuk membuka jendela dialog Layer Style. Memberikan drop shadow dan mengatur warna drop shadow dengan warna biru gelap tombol (# 2877ac) kami.
Langkah 6: Tambahkan Panah
Untuk menunjukkan tindakan (mungkin untuk melambangkan bergerak maju atau pergi ke halaman web Beli sekarang), mari kita menambahkan ikon sederhana pada tombol. Kami akan mengambil jalan pintas cepat di sini: Kami akan menggunakan bentuk kustom yang datang dengan Photoshop, bukan gambar diri kita sendiri. Beralih ke Custom Shape Tool (U) dan, di Bar Pilihan, menemukan Panah 2 bentuk dalam menu Shape dropdown.
Menggambar bentuk di sisi kanan tombol; dimensi adalah 13x13px, yang sesuai dengan ketinggian karakter huruf kecil dari teks kita.
Gunakan Move Tool (V) untuk membuat penyesuaian yang diperlukan sehingga teks dan panah yang horizontal dan vertikal berpusat di dalam tombol.
Langkah 7: Buat Negara Hover
Tombol kami dilakukan. Namun, kita harus membuat desain untuk negara arahkan tombol (yaitu bagaimana tombol akan terlihat ketika pengguna melayang di atasnya dengan mouse mereka).
Tempatkan semua lapisan-kecuali background-dalam kelompok lapisan dengan memilih mereka dalam Layers Panel dan kemudian menekan Ctrl / Cmd + G (atau memilih Layer> Grup Layers).
Tombol kami dilakukan. Namun, kita harus membuat desain untuk negara arahkan tombol (yaitu bagaimana tombol akan terlihat ketika pengguna melayang di atasnya dengan mouse mereka).
Tempatkan semua lapisan-kecuali background-dalam kelompok lapisan dengan memilih mereka dalam Layers Panel dan kemudian menekan Ctrl / Cmd + G (atau memilih Layer> Grup Layers).
Gandakan kelompok lapisan, kemudian bergerak ke kanan konten lapisan kelompok duplikat ini di bawah tombol asli.
Klik dua kali copy layer bentuk dasar (itu dalam kelompok lapisan hover) untuk membuka jendela dialog Layer Style. Memodifikasi efek lapisan Gradient Overlay sehingga gradien tampaknya terbalik. Memeriksa opsi Reverse bisa bekerja untuk Anda, tapi aku lebih suka manual tweaking warna gradien berhenti untuk hasil yang lebih baik.
Color Stop No. 1 - Warna: # 87bfe6, Lokasi: 0%
Midpoint # 1 - Lokasi: 40%
Warna Stop No. 2 - Warna: # 2877ac, Lokasi: 95%
Midpoint # 2 - Lokasi: 40%
Warna Stop No. 3 - Warna: # 4c9fd7, Lokasi: 100%
Color Stop No. 1 - Warna: # 87bfe6, Lokasi: 0%
Midpoint # 1 - Lokasi: 40%
Warna Stop No. 2 - Warna: # 2877ac, Lokasi: 95%
Midpoint # 2 - Lokasi: 40%
Warna Stop No. 3 - Warna: # 4c9fd7, Lokasi: 100%
Sekian dulu tutorial kali ini, Semoga bermanfaat