Tutorial ini akan menunjukkan cara untuk membuat menu Vista
terinspirasi semi-transparan dengan menggunakan gradien, bayangan, dan
kabur untuk menghasilkan efek modern yang menakjubkan.
Langkah 1
Buka kanvas baru yaitu 600x335px. Mulailah dengan menunjukkan penguasa (View> Rulers), kemudian membuat dua panduan yang mirip dengan gambar di bawah ini. Buat satu di 285px dan yang lainnya di 310px.
Langkah 2
Buat Rectangle (U) yang mengisi daerah memerintah lebih rendah dan label layer "bar yang lebih rendah." Membuka Effects Menu selama lapisan. Arahkan ke properti Gradient Overlay dan menerapkan gradien antara # 000000 dan # 0c0c0c di 90 derajat.Sekarang membuat persegi panjang lain dalam peraturan daerah atas dan beri nama layer "bar atas." Sekali lagi membuka menu efek dan menerapkan Gradient Overlay antara # 35393d dan # 787b7d di 90 derajat. Pilih dua persegi panjang yang dibuat sejauh ini dan mengubah Opacity menjadi 90%. Bila latar belakang ditambahkan kemudian, ini akan memberikan efek yang bagus, karena memungkinkan latar belakang untuk sedikit menunjukkan melalui.
Langkah 3
Langkah selanjutnya adalah menambahkan sorot ke menu menggunakan Line Tool (U). Pilih Line Tool dan mengubah berat untuk 2px. Buatlah sebuah garis di bar dan mengubah warna untuk # 9fa2a4. Ubah nama layer ini untuk "sorot yang lebih rendah." Sekarang gambarlah garis lain langsung di atas sebelumnya dan mengubah warna untuk # 484b4d dan mengubah nama menjadi "sorot atas." Kelompok lapisan ini dengan lapisan bar dalam kelompok yang disebut "bar." Tahap ini melengkapi dasar menu.
Langkah 4
Sekarang menu bar selesai, kita dapat membuat satu set pembagi untuk pergi antara teks. Pilih Line Tool lagi dan meninggalkan berat di 2px. Menggambar garis vertikal dari pusat mark penguasa yang berhenti beberapa piksel sebelum puncak. Ini tidak perlu tepat dan dapat dengan mudah disesuaikan kemudian. Buka menu efek dan menerapkan Gradient Overlay pada 90 derajat antara # 676a6d dan # 4d6672. Label lapisan ini "pembagi atas."Menggambar garis vertikal lain dari penguasa pusat turun dan menghentikan jarak yang sama dari tepi seperti di atas. Bagian ini tidak memiliki gradien, sehingga mengubah warna untuk # 43474b. Ubah nama layer ini untuk "pembagi yang lebih rendah." Kelompok dua bagian dari pembagi dan nama kelompok "pembagi."
Langkah 5
Pilih Type Tool (T) dan mengubah warna menjadi putih (# FFFFFF). Font saya memilih untuk menggunakan untuk menu disebut Segoe UI karena merupakan font yang digunakan dalam antarmuka pengguna Vista. Namun tidak semua orang memiliki font ini, sehingga sebagai Arial pengganti akan dilakukan. Mengatur ukuran untuk 11pt dan ketik link Anda keluar, jarak mereka merata. Kelompok mereka bersama-sama dan nama kelompok "link."Sekarang salin pembagi dan ruang mereka 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. Apa pun warna-warni atau pemandangan yang akan dilakukan.
Langkah 7
Langkah ini akan membuat persegi panjang bulat kabur yang berada di belakang teks. Efek ini sangat umum di Vista dan teknik yang baik. Dibutuhkan fokus latar belakang dan meletakkannya di atas teks, namun masih menunjukkan pemandangan yang indah di belakang.Pertama-tama, duplikat latar belakang. Lapisan ini tidak permanen, tapi kami akan memotong seleksi dari itu. Kemudian dengan menggunakan Rounded Rectangle Tool (U), menggambar bentuk yang dimulai melewati tepi kiri kanvas. Ini berarti bahwa bentuk hanya memiliki dua ujung bulat.
Rasterize layer dan kemudian menggunakan Magic Wand Tool (W), pilih persegi panjang dan menghapus warna sambil menjaga garis besarnya. Sekarang pilih copy latar belakang dan dipotong dari lapisan itu. Hapus layer copy background dan menambah layer baru yang disebut "blur."
Paste bentuk dalam lapisan yang disebut "blur" dan kemudian menerapkan Gaussian Blur dari 5px (Filter> Blur> Gaussian Blur). Kemudian menerapkan Drop Shadow seperti yang ditunjukkan di bawah ini.
Langkah 8
Sekarang menambahkan teks Anda di dalam blur. Menggunakan jenis huruf yang sama seperti link (Segoe UI) ketik nama Anda dan tagline. Pilih beberapa teks dan membuatnya berani dan menyimpan beberapa normal, menerapkan Drop Shadow, dan Gradient. Ini menghasilkan teks modern-looking yang memiliki tampilan mencolok.
Langkah 9
Langkah ini adalah opsional, karena akan menghasilkan biru disorot cahaya yang akan menjadi efek hover kami. Menggambar Ellipse besar (U) yang mengisi daerah antara pembagi. Mengubah warna elips ke # 5c94c5 dan menerapkan Gaussian blur 10px. Bentuknya kini telah menjadi lapisan raster, dan Anda dapat membersihkan kelebihan blur 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 gradien modern. Penggunaan highlights adalah trik yang bagus untuk menyediakan mutakhir terlihat modern dengan gambar. Menu ini akan cukup mudah untuk mengiris dan berubah menjadi menu berbasis web sangat fungsional dengan negara-negara hover.
Tidak ada komentar:
Posting Komentar