Cara Melukis Butang Untuk Laman Web

Isi kandungan:

Cara Melukis Butang Untuk Laman Web
Cara Melukis Butang Untuk Laman Web

Video: Cara Melukis Butang Untuk Laman Web

Video: Cara Melukis Butang Untuk Laman Web
Video: ANIME GLASS ART TUTORIAL | melukis di kaca 2024, Mungkin
Anonim

Antara muka yang mesra pengguna, grafik yang digambar dengan baik, susunan elemen yang betul di halaman - separuh kejayaan laman web dengan pelawat. Butang melukis untuk laman web adalah bahagian kecil tetapi penting dalam mengerjakan projek dalam talian.

Cara melukis butang untuk laman web
Cara melukis butang untuk laman web

Arahan

Langkah 1

Cuba lukis butang bulat. Kaedah yang diberikan di bawah ini juga universal untuk membuat logo dan avatar. Melukisnya tidak sukar, walaupun terdapat banyak tindakan yang harus anda laksanakan.

Langkah 2

Buka Adobe Photoshop. Buat dokumen baru dengan menekan kombinasi "Ctrl + N". Parameter gambar 300 * 300, resolusi 72 ppi. Latar belakang dan mod warna lalai masing-masing berwarna putih dan RGB.

Langkah 3

Lebih baik menggambar dengan vektor, sehingga apabila butang dikurangkan, kualitinya tidak merosot. Pilih alat Oval, tahan Shift dan lukis bulatan dari tengah.

Langkah 4

Sekarang sapukan beberapa kesan pada bulatan yang dihasilkan. Pergi ke menu "Layers" - "Layer Style" - "Blending Options". Di sini anda perlu menerapkan kecerunan.

Langkah 5

Selanjutnya, di sini, tandakan kotak di sebelah "Embossing" untuk memberi butang tonjolan yang diperlukan, dan tetapkan parameter berikut: gaya - embossing garis besar, kaedah - potongan lembut, kedalaman - 220%, ukuran - 1 piksel, pelembutan - 5 piksel, sudut - 135 ° tanpa pencahayaan global, ketinggian - 32, mod sorotan - normal dengan kelegapan 30%, mod bayangan - darabkan dengan kelegapan 25%

Langkah 6

Untuk memberikan lebih banyak kelantangan, di sini dalam parameter pencampuran, centang kotak "Bayangan" dan tetapkan parameter berikut: mod pencampuran - pendaraban, ketelusan - 40%, sudut - 125o menggunakan pencahayaan global, mengimbangi - 5 piksel, ukuran - 20 piksel.

Langkah 7

Hasil dari tindakan yang dilakukan akan menjadi gambar seperti yang ditunjukkan dalam gambar.

Langkah 8

Sekarang buat lapisan baru, pilih "Oval" sekali lagi dan lukis bulatan dengan radius yang lebih kecil daripada bentuk pertama. Buka "Blending Options", centang kotak di sebelah "Inner Shadow" dan tetapkan parameter: Blending Mode - Soft Light, Angle - 125o, Offset - 0px, Shrink - 45%, Size - 21px.

Langkah 9

Seterusnya, di sini dalam pilihan pencampuran, periksa "Gradient overlay" dan buat gradien dengan parameter seperti dalam gambar. Klik OK

Langkah 10

Seterusnya tetapkan Blending Style ke Radial, Skala hingga 124%

Langkah 11

Sekarang tandakan kotak "Stroke" dan tetapkan parameter berikut: ukuran - 5 piksel, kedudukan - luar, mod campuran - normal, kelegapan - 100%, jenis pukulan - kecerunan.

Langkah 12

Hasil daripada tindakan ini, anda akan mendapat sesuatu yang kelihatan seperti butang. Anda boleh membuka semula pilihan pencampuran dan bereksperimen dengannya.

Langkah 13

Sekarang kita perlu menambahkan butang sorotan supaya butang itu menggunakan tekstur kaca. Untuk melakukan ini, buat lapisan baru sekali lagi, pilih alat Pemilihan Oval, buat bujur di atas butang dan isi dengan putih menggunakan alat Isi. Tahan Ctrl, klik pada lapisan dengan lingkaran berwarna, ubah pilihan ("Selection" - "Inversion"). Sekarang tekan Padam. Oval hendaklah dipangkas di sekeliling perimeter bulatan.

Langkah 14

Di panel Layers, ubah pilihan Normal menjadi Soft Light, kemudian klik pada ikon topeng vektor dan pilih Fill Tool - Gradient. Isi sorotan dari bawah ke atas. Butang hampir siap.

Langkah 15

Anda boleh menambahkan tulisan pada butang. Anda juga boleh menggunakan kesan pencampuran padanya, seperti cahaya dalaman, cahaya luar, kecerunan dan sebagainya. Jangan takut untuk bereksperimen, semakin banyak imaginasi yang anda gunakan dalam kerja anda, semakin cepat anda menguasai penyunting itu sendiri dan reka bentuk web.

Disyorkan: