1. Design & Illustration
  2. Interface Design

Cara membuat Menu terinspirasi Vista yang menakjubkan

by
Read Time:4 minsLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Tutorial ini akan menunjukkan kepada Anda bagaimana untuk membuat semi-transparan Vista-menu yang diilhami menggunakan gradien, bayangan, dan kabur untuk menghasilkan efek modern yang menakjubkan.


Langkah 1

Buka sebuah kanvas baru yang 600x335px. Mulailah dengan menunjukkan penguasa (Lihat > penguasa), kemudian membuat dua panduan yang mirip dengan gambar di bawah. Membuat satu di 285px dan yang lain di 310px.


Langkah 2

Membuat persegi panjang (U) yang mengisi daerah memerintah bawah dan label lapisan "bar lebih rendah." Membuka Menu Effects untuk lapisan. Menavigasi ke properti Overlay gradien dan menerapkan gradien antara #000000 dan #0c0c0c di 90 derajat.

Sekarang membuat persegi panjang lain di daerah atas aturan dan nama lapisan "atas bilah." Lagi membuka effects menu dan menerapkan Overlay gradien antara #35393d dan #787b7d di 90 derajat. Pilih dua persegi yang diciptakan sejauh ini dan mengubah Opacity 90%. Ketika latar belakang ditambahkan kemudian, ini akan memberikan efek yang baik, karena memungkinkan latar belakang untuk sedikit menunjukkan melalui.


Langkah 3

Langkah berikutnya adalah untuk menyoroti menambah menu menggunakan baris alat (U). Pilih alat baris dan perubahan berat untuk 2px. Menggambar garis di bar dan mengubah warna untuk #9fa2a4. Mengubah nama lapisan ini untuk "sorot lebih rendah." Sekarang menarik garis lain langsung di atas sebelumnya dan mengubah warna untuk #484b4d dan mengubah nama "sorot atas." Kelompok ini lapisan dengan bar lapisan dalam kelompok yang disebut "bar." Tahap ini melengkapi dasar dari menu.


Langkah 4

Sekarang bahwa bilah menu lengkap, kita dapat membuat serangkaian pembagi pergi antara teks. Pilih alat baris lagi dan meninggalkan berat di 2px. Menggambar garis vertikal dari mark penguasa pusat yang berhenti beberapa piksel sebelum puncak. Ini tidak harus tepat dan dapat dengan mudah disesuaikan kemudian. Buka effects menu dan menerapkan Overlay gradien di 90 derajat antara #676a6d dan #4 d 6672. Label lapisan ini "atas pembagi."

Menggambar garis vertikal lain dari pemerintah pusat akan turun dan menghentikan jarak yang sama dari tepi seperti di atas. Bagian ini tidak memiliki gradien, sehingga mengubah warna untuk #43474b. Mengubah nama lapisan ini untuk "lebih rendah pembagi." Kelompok dua bagian dari pembagi dan nama grup "pembagi."


Langkah 5

Pilih jenis alat (T) dan mengubah warna putih (#FFFFFF). Saya memilih untuk menggunakan menu font yang disebut Segoe UI karena font yang digunakan dalam antarmuka pengguna Vista. Namun tidak semua orang memiliki font ini, sehingga sebagai pengganti Arial akan melakukan. Mengatur ukuran untuk 11pt dan ketik link Anda keluar, jarak mereka secara merata. Kelompok mereka bersama-sama dan nama grup "link."

Sekarang salin pembagi Anda dan ruang di antara link. Anda harus berakhir dengan sesuatu yang mirip dengan ini.


Langkah 6

Sekarang menu bar pada dasarnya selesai, sehingga Anda dapat menambahkan latar belakang pilihan Anda. Latar belakang saya memilih adalah foto rumput. Sesuatu yang berwarna-warni atau indah akan melakukan.

Salin latar belakang Anda ke menu dan mengubah nama lapisan latar belakang. Pastikan lapisan ini adalah belakang di palet lapisan Anda. Catatan transparansi dalam menu memungkinkan latar belakang untuk menunjukkan melalui tanpa tertahankan.


Langkah 7

Langkah ini akan membuat rounded rectangle kabur yang ada di balik teks. Efek ini sangat umum di Vista dan teknik yang baik. Itu mengambil fokus dari latar belakang dan atas teks, tetapi masih menunjukkan adegan indah di belakang.

Pertama-tama duplikat latar belakang. Lapisan ini tidak permanen, tetapi kita akan memotong pilihan dari itu. Kemudian menggunakan Rounded Rectangle Tool (U), menggambar bentuk yang dimulai masa lalu tepi kiri kanvas. Ini berarti bahwa bentuk hanya memiliki dua bulat tepi.

Rasterize lapisan dan kemudian menggunakan Magic Wand Tool (L), pilih persegi panjang dan menghapus warna sementara menjaga garis besar. Sekarang pilih Salin latar belakang dan dipotong dari lapisan itu. Menghapus lapisan salinan latar belakang dan menambahkan lapisan baru lain yang disebut "kabur."

Paste bentuk di lapisan yang disebut "kabur" dan kemudian menerapkan Gaussian Blur 5px (Filter > Blur > Gaussian Blur). Kemudian menerapkan Drop Shadow seperti gambar dibawah.


Langkah 8

Sekarang tambahkan teks Anda di dalam kabur. Menggunakan jenis huruf yang sama sebagai link (Segoe UI) Ketik nama Anda dan tagline. Pilih beberapa teks dan membuat tebal dan menjaga beberapa normal, menerapkan Drop Shadow, dan gradien. Hal ini menghasilkan teks berpenampilan modern yang memiliki pandangan yang mencolok.


Langkah 9

Langkah ini opsional, karena itu akan menghasilkan cahaya disorot yang akan menjadi efek hover kami. Menggambar besar Ellipse (U) yang mengisi daerah antara pembagi. Mengubah warna elips untuk #5c94c5 dan menerapkan Gaussian blur 10px. Bentuk menjadi lapisan raster, dan Anda dapat membersihkan kelebihan kabur dengan menggunakan Marquee Tool (M).


Kesimpulan

Menu ini menghasilkan efek yang menakjubkan ketika digabungkan dengan latar belakang pemandangan yang cerah. Menggunakan transparansi untuk efek yang besar serta modern gradien. Penggunaan menyoroti adalah trik yang besar untuk memberikan tampilan modern mutakhir untuk gambar. Menu ini akan cukup mudah untuk mengiris dan berubah menjadi menu berbasis web yang sangat fungsional dengan negara hover.

One subscription.
Unlimited Downloads.
Get unlimited downloads