Desain Antarmuka Web 2.0 di Photoshop
Memahami tutorial di bawah ini adalah memahami tekniknya, dengan itu Anda bisa menggambar sendiri beberapa antarmuka pengguna grafis untuk sebuah situs web. Navigasi samping, tombol, header, contohnya. Semua gaya Web 2.0.
Luncurkan kanvas baru; ukuran apapun. Sesuatu yang lebih besar dari 450x300px akan bagus. Pilih menu Alat Persegi Panjang Bulat dan menggambar persegi panjang sebesar yang ditunjukkan pada gambar di atas.
Klik dua kali pada layer Rounded Rectangular untuk meluncurkan Opsi Blending. Ubah pengaturan untuk gaya berikut.
Drop Shadow
Opacity: 31% Jarak: 1px Penyebaran: 0% Ukuran: 5px
Bevel dan Emboss
Kedalaman: Ukuran 100%: 0px Melunakkan: 0px
Hamparan Gradiant
Klik dua kali Gradiant dan atur titik berhenti berikut. Lokasi: 0%, # 1378cd Lokasi: 100% # 4da5f0
Pukulan
Ukuran: 5px Posisi: Warna Dalam: # 54abf6
Mari kita masukkan beberapa teks, tagline, URL, atau sesuatu. Biarkan bagian tengah dan sejajar kanan sehingga logo bisa berada di sisi kiri nanti. Mari gaya teks. Saya menggunakan Lucida Sans Unicode; 55pt; halus; -120 untuk pelacakan karakter (spasi huruf). Klik dua kali pada layer teks dan atur berikut ini di Opsi Blending.
Hamparan Gradien
Klik dua kali Gradiant dan atur titik berhenti berikut. Lokasi: 0%, # 9ec7eb Lokasi: 100% ecf6ff
Anda kemudian perlu memasukkan logo di sisi kiri teks. Saya akan menggunakan persegi panjang bulat dengan jari-jari 5px untuk mewakili logo. Inilah Opsi Blending pengaturan untuk persegi panjang bulat.
Bayangan batin
Opacity: 45% Jarak: 0px Ukuran: 43px;
Bevel dan Emboss
Kedalaman: 100% Ukuran: 0px Melunakkan: 0px Mode Sorot Opacity: 50% ShadowMode Opacity: 100%
Hamparan Gradiant
Klik dua kali Gradiant dan atur titik berhenti berikut. Lokasi: 0% # 0e2f4a Lokasi: 47% # 001a31 Lokasi: 48% # 002545 Lokasi: 100% # 0f4b7f
Pukulan
Ukuran: 5px Klik dua kali Gradiant dan atur titik berhenti berikut. Lokasi: 0% # 1468af Lokasi: 100% # 50abf8
Mari kita berikan sedikit efek glossy. Memegang CTRL dan klik kiri pada persegi panjang bulat Thumbnail Lapisan. Ketika seluruh persegi panjang bulat dipilih, diubah menjadi Alat Rectangular Marquee, memegang ALT dan menarik bagian kedua dari area yang dipilih; seperti gambar di atas.
Buat layer baru; Seret ke atas sehingga duduk di atas semua lapisan; isi bagian yang dipilih dengan warna putih [#ffffff]; ubah opacity menjadi 15%.
Tutorial akan berakhir di sini. Bagaimana Anda akan memanfaatkan desain ini sepenuhnya terserah Anda. Dengan sedikit mengubah ukuran dan warna, itu dapat digunakan sebagai header atau tombol web. Inilah beberapa contohnya.
Header situs web
Tombol Situs Web
