Cara membuat menu yang indah untuk grup VKontakte. Cara membuat menu yang indah di grup VKontakte Membuat menu di Photoshop
Mari kita cari tahu cara membuat menu horizontal tiga dimensi untuk situs. Pertama, buat dokumen dengan lebar 1600 piksel dan panjang 2000 piksel.
Mari kita buat layer baru.
Di toolbar samping, pilih Rectangular Marquee.
Sekarang kita membentuk ruang kerja untuk menu yang akan datang.
Gunakan alat Isi untuk mengisi area yang dipilih dengan warna. Untuk menyederhanakan pekerjaan Anda - #0391ff, ini adalah warna yang saya gunakan. Cara mengubah warna, Anda akan temukan di sini.
Sekarang mari kita coba mencari bagian tengah menu yang kosong. Untuk melakukan ini, pilih alat "pindah" dan klik pada lapisan dengan benda kerja.
Sekarang kita melihat bagian tengahnya dan kita dapat menandainya sendiri. Mengetahui keberadaannya akan tetap berguna bagi kita.
Atur garis bantu di tengah dokumen. Untuk melakukan ini, kita harus memindahkan kursor ke penggaris yang terletak di bilah alat tangki dan menariknya keluar.
Di bilah alat samping, pilih "Teks" dan tulis nama bagian yang akan datang.
Misalnya, saya memilih tema furnitur dan memutuskan untuk mengembangkan menu situs untuk bagian berikut:
- rumah
- Dapur
- Kamar tidur
- Furnitur empuk
- lorong-lorong
- dinding
- Tentang perusahaan
- Kontak
Kami menulis dalam satu baris. Beri jarak di antara setiap bagian.
Ukuran font arial 18 piksel. Kami akan menemukan parameter ini di panel "Teks".
Sekarang, dengan menggunakan alat "Pindahkan" yang disebutkan di atas, kami mengatur teks di tengah dokumen kerja, dengan fokus pada garis bantu.
Sekarang mari tambahkan beberapa volume ke menu kita.
Mari kita pisahkan tombolnya. Untuk melakukan ini, kita perlu memilih alat "garis" dari bilah alat. Kami mengambil warna sedikit lebih gelap dari bidang menu kami. Katakanlah #0179d6. Gambar garis horizontal dengan menahan tombol shift dengan ketebalan 1 piksel. Kami mencoba untuk tetap lurus. Dari perbatasan ke perbatasan wilayah biru. Jika Anda mengalami masalah dengan ini, Anda dapat mengubah ukurannya menggunakan alat pindahkan.
Kemudian rasterize garis yang dihasilkan.
Sekarang kita harus menduplikasi elemen yang diterima. Untuk melakukan ini, di jendela lapisan, klik pada lapisan dengan bentuk dengan tombol kiri mouse dan pilih "Buat lapisan duplikat."
Klik pada layer yang dihasilkan dan pilih Blending Options. Kita membutuhkan tab Color Overlay. Kami mengambil warna yang sedikit lebih terang dari bidang menu. Misalnya, #6bbef.
Sekarang, dengan menggunakan alat Pindahkan, seret layer menjauh dari pengambilan. Kami menempatkan mereka berdampingan. Untuk melakukan ini, Anda harus memperbesar gambar. Angka-angka harus ditempatkan berdampingan, sehingga tidak ada celah di antara mereka.
Inilah yang kami dapatkan. Tombol telah menjadi tebal. Kami telah membuat tiruan cahaya dan bayangan. Sekarang mari kita lakukan hal yang sama dengan tombol lainnya.
Gandakan lapisan untuk mengurangi waktu kerja.
Volume telah muncul, tetapi ada sesuatu yang hilang. Mari kita coba menambahkan volume ke bilah menu.
Mari kita buat garis horizontal menggunakan metode yang sama menggunakan warna #0063af dan #78c2fb.
Mari kita menempatkan mereka di atas. Inilah yang kami dapatkan.
Menu volumetrik sederhana untuk situs sudah siap!
Selamat siang pengunjung yang terhormat. Anda ingin mempelajari cara membuat menu yang indah untuk grup VKontakte Anda, tetapi tidak tahu cara melakukannya. Kemudian pelajaran video pelatihan "Cara membuat menu di VKontakte" akan membantu Anda membuat menu ini langkah demi langkah.
Pelajaran ini merupakan lanjutan dari pelajaran video sebelumnya "Merancang grup VKontakte" yang dapat Anda tonton. Kami juga membutuhkan Adobe Photoshop untuk membuat menu. Anda dapat mempelajari cara menginstal dan bekerja dengan program ini dari bagian.
Anda juga dapat mengunduh template yang digunakan dalam tutorial video ini https://yadi.sk/d/EFuM8IjjO3zVUA.
1. Membuat Menu di Photoshop
Di program Photoshop, buka tab file, klik buat atau tekan Ctrl + N. Mari buat dokumen baru dengan lebar 600 piksel, tinggi 420 piksel, dan resolusi 100 piksel per inci. Selanjutnya, klik file untuk membuka dan pilih gambar apa pun yang Anda suka dari komputer.
Pilih Rectangular Marquee Tool atau tombol M pada keyboard Anda untuk memilih gambar. Selanjutnya, klik tab edit di menu dan pilih salin atau pintasan keyboard Ctrl + C. Kami memasukkan dokumen yang kami buat dan memilih pengeditan di menu tempel atau kombinasi tombol Ctrl + V.
Pilih alat pindah atau tombol V. Di menu edit, pilih transformasi gratis atau tombol Ctrl + T. Dengan menyeret salah satu sudut sambil menahan tombol Shift untuk mengubah ukuran secara merata, kita menahan gambar kita.
1.1. Membuat tombol
Pilih alat persegi panjang atau tombol U. Pilih warna, lalu buat tombol. Di bilah sisi di sebelah kanan, Anda dapat mengatur parameter untuk radius pembulatan. Mari kita membuat 5 piksel. Pada tab Pratinjau, pastikan Pembantu telah diaktifkan. Mari kita pindahkan tombol kita ke tengah gambar.
Klik pada lapisan tombol, klik kanan pada opsi. Terapkan efek bayangan untuk menyorot tombol dengan lebih baik pada latar belakang terang. Menggunakan alat pindah, menahan tombol Alt pada keyboard, seret tombol sedikit lebih rendah, sehingga menyalinnya. Jadi, kami membuat tombol ketiga, memindahkannya ke jarak seperti itu, seperti yang akan diberitahukan oleh elemen tambahan kepada kami. Dengan menahan tombol Ctrl kami memilih lapisan, pilih alat pindahkan dan letakkan di tengah dokumen.
Pilih alat teks horizontal atau tombol T. Selanjutnya, tekan tombol kiri mouse, pastikan di luar tombol berikutnya. Tulis teks yang kita butuhkan, pindahkan teks kira-kira di tengah tombol atau Ctrl + V. Kemudian kita beri nama untuk tombol lainnya.
Kita pilih alat pemotong atau tombol C. Mari kita pilih tombol yang kita buat satu per satu. Pilih tombol pertama kami dan arahkan ke salah satu sudut. Dalam hal ini, ikon pemotongan harus tetap tidak berubah. Selanjutnya, pilih tombol kedua dan ketiga. Klik pada menu file dan simpan dokumen di komputer Anda. Setelah itu, klik simpan untuk web. Kami menyimpan tombol di komputer.
2. Mengedit menu di VKontakte
Mari kita pergi ke grup kami VKontakte. Setelah avatar komunitas, kami pergi ke grup statistik. Di bilah alamat browser ada nomor komunitas, itu hanya yang diperlukan untuk mengedit grup lebih lanjut. Untuk mengedit grup, kami memerlukan tautan berikut yang perlu Anda salin https://vk.com/pages?oid=-XXX&p=Page_name
Alih-alih prasasti halaman, itu dapat membuat nama sewenang-wenang untuk halaman masa depan kita. Sebut saja, misalnya, menu grup. Tekan pensil dan masuk ke mode markup wiki. Sekarang Anda dapat menambahkan foto yang baru saja Anda buat di Adobe Photoshop. Kami menyimpan halaman dan menekan tombol pratinjau dan melihat seperti apa tampilan menu kami. Jika Anda perhatikan tombolnya sangat kecil dan juga ada spasi di antara tombol-tombolnya.
Beralih ke mode pengeditan visual. Kami mengklik setiap tombol secara bergantian dan memilih ukuran tombol, lebarnya adalah 610 piksel, dan tingginya secara otomatis disejajarkan. Ini adalah nilai tertinggi dalam sebuah kontak.
Kami menghilangkan masalah antar tombol. Untuk melakukan ini, buka menu pengeditan dan di editor visual tulis di akhir setiap entri; nopadding. Salin teks ini dan tempel ke sisa gambar. Klik untuk menyimpan halaman dan lihat apa yang kami dapatkan dengan mengklik tombol pratinjau. Sekarang tombol kami telah menjadi satu.
Dalam pelajaran ini, kami akan membuat tombol asli untuk situs.
Langkah 1.
Buat dokumen baru, atur warna latar belakang ke #f7f5f6. Aktifkan alat Alat persegi panjang bulat (Persegi panjang dengan sudut membulat) dengan radius pembulatan 10 piksel. Atur warna latar depan ke #2f88bb. Pada layer baru, buat persegi panjang bulat kecil.
Langkah 2
Sekarang pergi ke Gaya Lapisan (Gaya lapisan) dan terapkan untuk menggambar persegi panjang Cahaya Luar (Cahaya luar) dan Cahaya Batin (Inner glow) dengan pengaturan berikut:
Langkah 3
Menahan sebuah kunci
Aktifkan alat Alat Marquee Elliptical(Area pemilihan oval) dan menahan tombol
Langkah 4
Buat layer baru dan gunakan alat Alat Marquee Elliptical(Area pemilihan oval), buat elips seperti yang ditunjukkan. Sekarang menggunakan alat gradien(Gradien), gaya dari latar depan ke transparan, dan buat isian gradien di atas seleksi oval. Gradien ini akan bertindak sebagai bayangan.
Langkah 5
Selanjutnya, tahan tombol
Langkah 6
Atur opacity layer tombol menjadi 32%. Menahan sebuah kunci
Langkah 7
Isi seleksi yang dibuat dengan warna putih, dan ubah opacity menjadi 11%.
Langkah 8
Sekarang buat layer baru dan gambar lingkaran seperti yang ditunjukkan di bawah ini.
Langkah 9
Artikel ini akan menjadi manual terperinci dan saya akan memberi tahu Anda cara membuat menu untuk grup VKontakte. Menu grup VK yang dirancang dengan indah berkontribusi pada peningkatan nyata dalam pengunjung dan pertumbuhan penjualan di situs.
Halo para pembaca yang budiman. Biarkan saya memberi tahu Anda hari ini cara membuat menu cantik untuk grup VKontakte dan sepenuhnya gratis. Ngomong-ngomong, setelah mempelajari cara membuat topik seperti itu, Anda bisa mendapatkan sedikit dari ini -))). Sudah, tidak ada satu pun situs komersial yang bekerja tanpa membuat komunitasnya sendiri di jejaring sosial, terutama VK, yang dijamin akan membantu mendatangkan pelanggan baru, serta mempromosikan bisnis Anda.
Tetapi jika komunitas Anda tidak menarik dan bagaimana semua orang yang ingin tinggal di sana? Saya pikir tidak ada orang!!! Jadi, mari hiasi grup kita dengan desain berkualitas dan pelajari cara melakukannya dengan sangat cepat. Sebelum Anda mulai membuat grafik dan menu masa depan kami, Anda perlu menginstal Photoshop di komputer Anda untuk memotong gambar lebih lanjut. Banyak yang akan bertanya mengapa Anda perlu memotong gambar sama sekali. Intinya di sini adalah bahwa untuk setiap tautan menu kita harus membuat strip terpisah dari spanduk umum.
Saat ini ada beberapa jenis menu yang dibuat:
- Buka dengan poin aktif;
- Ditutup sebagai pos yang disematkan;
- Dengan gambar terpisah atau gambar umum yang berdekatan dari spanduk dan menu.
Inti dari membuat kedua opsi adalah sama. Perbedaan utamanya hanya pada elemen tambahan dan tipe record, dan artikel ini akan dibahas lebih detail di artikel ini.
Bekerja dengan menu akan membantu kami markup wiki, yang dibangun ke dalam editor teks VKontakte hari ini. Ini berbeda dari yang biasa karena akan menggunakan perintah standar untuk menampilkan gambar tertentu dan menyisipkan tautan ke elemen yang diperlukan. Markup wiki itu sendiri memungkinkan Anda memasukkan kode untuk menampilkan gambar, video, dan elemen lainnya.
Menu tertutup grup VK
Dalam hal ini, kami akan mengamati di sebelah kiri avatar grup utama sebuah hyperlink dalam bentuk tulisan "menu grup", ketika diklik, menu kami dengan item dan gambar aktif akan terbuka.
Menunya akan terlihat seperti ini:
Buka menu grup (rekaman yang disematkan)
Intinya adalah membuat item menu yang sudah terbuka yang akan ditampilkan dalam deskripsi grup itu sendiri, di mana biasanya ditampilkan sesuai dengan semua kondisi. Gambar kami akan dilampirkan pada deskripsi, yang akan kami siapkan sebelumnya dan menautkannya ke halaman di mana kami akan memiliki item aktif. Menu ini menjadi sangat populer akhir-akhir ini dan diminati oleh pelanggan. Mereka terlihat seperti ini:
Cara membuat menu yang indah untuk grup VKontakte: petunjuk langkah demi langkah
Jadi, pertama-tama, kita perlu membuat avatar utama grup, yang akan kita tempatkan di sebelah kanan dan rintisan menu kita dalam bentuk spanduk.
- Untuk avatar 200x332 piksel;
- Untuk spanduk menu utama 395x282 piksel.
Seperti yang Anda lihat, ketinggian gambar berbeda dan ini dilakukan agar gambar tidak bergerak tinggi dan berada pada level yang sama, karena ketinggian nama dan status komunitas membutuhkan sekitar 50 px, dan kita akan membutuhkan untuk menghapus nilai ini dari ketinggian menu.
Untuk memperjelas, jika tinggi avatar grup utama adalah 332, maka kita kurangi 50 darinya dan mendapatkan tinggi menu utama sama dengan 282. Jika dimensi tidak masalah, maka tingginya dapat diatur ke sembarang.
Langkah selanjutnya setelah membuat komunitas adalah menyiapkan materi dan di sini kita perlu melarang peserta membuat halaman dan blok tambahan, tetapi hanya menulis di dinding. Untuk melakukan ini, perlu pergi ke bagian di bawah avatar grup yang disebut "manajemen komunitas" di mana kita perlu membuat materi kita "dibatasi" seperti yang ditunjukkan di bawah ini.
Sekarang mari kita mulai membuat komposisi keseluruhan. Anda dapat, tentu saja, hanya memasukkan gambar, bukan avatar, dan ke dalam deskripsi, tetapi jangan menjadi amatir dan tunjukkan bagaimana melakukannya secara profesional sehingga itu adalah satu gambar yang lengkap, mengubah satu menjadi yang lain.
Mari buat kanvas baru di Photoshop dengan dimensi 600x350 piksel, yang akan kita gunakan sebagai stensil dengan memotong bukaan di dalamnya untuk gambar kita. Agar berfungsi, kita perlu menerjemahkan ukuran semua elemen dan penggaris dalam piksel, dan ini dilakukan di sepanjang jalur berikut: "Edit-Setting-Basic" dan di sini kita sudah mengatur piksel.
Langkah selanjutnya dalam membuat menu terbuka adalah membuat kliping untuk banner dan avatar, yang kemudian akan kita terima untuk diunduh. Untuk melakukan ini, buka bagian menu vertikal kiri dan pilih pemotongan.
Menggunakan tombol kiri mouse, seolah-olah Anda memilih area, Anda perlu memilih blok ukuran yang kita butuhkan dan setelah setiap pilihan, tekan tombol hapus "Hapus" dan pilih 50% abu-abu. Tindakan seperti itu akan mengarah pada fakta bahwa balok akan menjadi ukuran yang diinginkan dan disorot dalam warna yang berbeda dari latar belakang utama.
Anda harus mendapatkan yang berikut ini:
Dan sekarang cukup pilih penghapus dan gunakan fungsi "penghapus ajaib" untuk mengklik setiap blok abu-abu dan mendapatkan stensil dengan guntingan. Pada langkah selanjutnya, kami memilih gambar utama kami dan meletakkannya di bawah latar belakang dan mendapatkan gambar yang sudah jadi di mana Anda dapat menulis teks dengan nama menu atau elemen iklan lainnya.
Bagus. Setelah Anda menempatkan gambar desain kami, kami hanya perlu memilih "simpan untuk Web" dan kami mendapatkan 2 gambar sebagai output. Sekarang kita kembali ke grup kita dan kita bisa mengisi avatar utama (vertikal). Kami akan menggunakan spanduk untuk menu nanti saat bekerja dengan kode markup wiki.
Mari buat menu itu sendiri, dengan item aktif yang akan mengarahkan pengguna ke bagian yang diperlukan dari situs pihak ketiga atau ke album dan direktori di grup itu sendiri. Kami akan menggunakan gambar baru untuk perubahan -))).
Jadi, kembali ke Photoshop dan buat kanvas baru dengan dimensi 400x300 piksel. Kemudian kita pilih di bagian: file-place dan pilih gambar untuk latar belakang menu.
Kami menempatkan tombol menu masa depan kami pada gambar dan memotong gambar seperti yang kami lakukan di atas dengan memilih blok yang diperlukan. Setelah itu, kami juga memilih "save for web" dan dapatkan folder dengan potongan kami. Dalam kasus saya, saya mendapat 4 gambar di folder terpisah.
Sekarang kita perlu mengisi gambar yang diturunkan dari Photoshop ke dalam album terpisah dan bersembunyi dari mata-mata. Setelah diunggah, setiap gambar akan mendapatkan nama dan id uniknya yang baru.
Harap dicatat bahwa Anda harus memiliki:
- Materi yang dibuka dalam mode "terbatas";
- Diskusi termasuk;
- Folder foto terbuka untuk semua orang.
Sekarang tinggal mengatur halaman kami di mana itu akan ditampilkan di menu. Untuk melakukan ini, buka halaman utama komunitas dan pilih materi baru dan edit dan panggil "MENU KAMI".
Selanjutnya, kita perlu memasukkan gambar yang kita dapatkan saat memotong di Photoshop. Seseorang menggunakan kode markup, tetapi agar tidak lebih pintar, saya sarankan memilih untuk menyisipkan gambar dengan mengklik ikon kamera dan mengunggah satu per satu.
Bekerja di editor teks, jika setelah memuat gambar, kita mengklik ikon tanda kurung di sudut kanan atas, kita akan melihat kode berikut:
Nasihat: Poin penting setelah mengunggah gambar adalah menghapus indentasi. Ini diselesaikan dengan memasukkan "nopadding" di depan ukuran gambar.
Untuk jelasnya apa yang diambil dari mana dijelaskan di bawah ini, tetapi mengingat semuanya akan dimasukkan secara otomatis dan Anda tidak perlu pintar, dan buka bagaimana beberapa orang menulis setiap gambar dan mengambil id, lalu muat dan simpan.
[]
di mana xxxxx adalah id gambar Anda
yyyyy - lebar dalam piksel (tidak lebih dari 388)
Seharusnya berakhir seperti ini:
Sekarang gambar kami dikumpulkan dalam spanduk terpisah. Dan untuk menambahkan tautan ke setiap item, cukup klik pada gambar dengan markup dinonaktifkan dan tempel url yang disalin di bagian tautan.
Jadi kami sampai pada poin terpenting dan terakhir dalam membuat menu VKontakte kami. Sekarang kita perlu menyimpan halaman gambar kita dan menyalin alamatnya. Dalam kasus saya terlihat seperti ini:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Ingat, di awal artikel kami membuat rintisan menu, yang akan menjadi kelanjutan dari avatar utama kami, dan kami baru saja membuat stensil untuk itu. Inilah yang kita butuhkan saat ini.
Buka halaman utama dan lakukan hal berikut:
Langkah 1.
Kami memasukkan alamat halaman ke dalam bidang teks untuk entri baru di dinding, setelah itu akan diubah menjadi tautan.
Langkah 2.
Kami melampirkan gambar rintisan kami untuk menu ke catatan dan klik kirim.
Langkah #3.
Sekarang, setelah menerbitkan kiriman, klik waktu pembuatan di sisi kiri bawah kiriman dan pilih "PIN".
Bagus!!! Di sinilah kita berakhir. Sekarang Anda tahu cara membuat menu keren dan Anda bisa mendapatkan banyak uang darinya. Saya menyarankan Anda untuk melakukan semuanya dalam urutan berikut:
- Kami datang dengan struktur dan memesan desain gambar menu;
- Kami melakukan pengubahan ukuran dan pemotongan semua gambar;
- Masukkan gambar ke dalam album;
- Kami mengedit semua potongan di editor dan menerbitkannya di halaman utama grup.
Sebagai hasil dari pekerjaan, kita akan mendapatkan menu berikut.
Tetapi menu itu sendiri, ketika ditekan, itu akan muncul dengan tautan aktif. Layak bermain dengan ukuran dan menyesuaikan dengan layar Anda, tetapi jangan lupa tentang tampilan di perangkat seluler.
PENTING: Setelah mengubah desain VK pada tahun 2016, perubahan baru dibuat saat membuat gambar dan persyaratan untuk gambar tentang itu.
Unduh templat menu grup VK + semua sumber pelajaran
Semoga materinya bermanfaat, dan sekarang Anda dapat dengan mudah memahami cara membuat menu yang indah untuk grup VKontakte. Berlangganan pembaruan blog dan sampai jumpa di posting baru. Jika Anda memiliki pertanyaan, tulis di komentar, dan saya pasti akan membantu Anda.
Saya melampirkan video untuk memperkuat apa yang telah saya baca.
Dalam tutorial Photoshop ini, kami akan memandu Anda melalui proses pembuatan menu tarik-turun sederhana.
Pratinjau Gambar Selesai
Langkah 1
Buka Photoshop, tekan Ctrl + N, sehingga membuat dokumen baru. Masukkan pengaturan di bawah ini dan klik OK. Nyalakan tampilan grid: View > Show > Grid (View > Show > Grid), dan juga aktifkan snap to grid: View > Snap to ... > Grid Lines (View > Show > Grid). Untuk saat ini, kita akan memiliki cukup garis setiap 5 piksel. Masuk ke menu Editing > Settings > Guides, Grid and Fragments (Edit > Preferences > Guides, Grid & Slices) dan perhatikan bagian Grid (Grid). Masukkan nilai 5 di bidang "Baris setiap ..." (Gridline Every), dan nilai 1 di bidang "Divisi internal menurut ..." (Subdivisi). Terakhir, atur warna grid ke #a7a7a7 dan klik OK.
Jangan biarkan kisi-kisi tebal yang muncul di kanvas membuat Anda takut. Itu ada untuk membuat pekerjaan Anda lebih mudah. Antara lain, kami juga akan mengaktifkan tampilan panel info: Window> Info (Window> Info) untuk melacak posisi elemen dan bentuk Anda secara real time.
Langkah 2
Atur warna Foreground ke #3f8ecf, pilih Rounded Rectangle Tool dan atur Radius ke 20 piksel. Buat jalur vektor 160x40 dan duplikat itu: Control + J. Pilih salinannya dan buat itu menjadi putih. Beralih ke Rectangle Tool, klik tombol Intersect di toolbar atas, dan gambar jalur vektor 40x40 px seperti yang ditunjukkan pada gambar ketiga di bawah. Pergi ke palet lapisan dan klik dua kali pada garis putih untuk membuka jendela gaya lapisan.
Terapkan Inner glow (Inner Glow) dan Stroke (Stroke), lalu masukkan parameter yang ditunjukkan pada ilustrasi berikut.
Langkah 3
Pilih kembali persegi panjang bulat biru yang dibuat pada langkah sebelumnya dan duplikat itu: Control + J. Pilih salinannya, buat menjadi putih, dan alihkan ke Rectangle Tool. Klik tombol Intersect pada toolbar atas, dan gambar garis vektor 120x40 px seperti yang ditunjukkan pada gambar kedua di bawah.
Mari kembali ke palet layer. Klik kanan pada garis putih yang dibuat pada langkah sebelumnya dan pilih "Copy Layer Style". Selanjutnya, klik kanan pada garis putih yang dibuat di awal langkah ini, dan pilih "Tempel Layer Style" (Tempel Layer Style).
Langkah 4
Pilih Type Tool dan ketik teks Anda seperti yang ditunjukkan pada gambar berikut. Atur warna teks ke #a1d8ff , lalu buka jendela gaya lapisan dan masukkan pengaturan yang ditunjukkan pada gambar di bawah ini:
Langkah 5
Kembali ke persegi panjang bulat biru yang dibuat pada langkah kedua, buka jendela Layer Style dan masukkan pengaturan di bawah ini. Gandakan bentuk ini: Control + J, pilih salinannya, buka lagi jendela gaya lapisan, dan terapkan Shadow (Drop Shadow) dengan pengaturan di bawah ini. Pilih semua bentuk yang dibuat sejauh ini dan kelompokkan: Control + G. Ini akan menjadi menu dropdown tertutup Anda. Pada langkah terakhir, kita akan memperbaikinya sedikit lagi.
Langkah 6
Mari kembali ke palet layer. Klik kanan pada grup yang dibuat pada langkah sebelumnya dan pilih Grup Duplikat. Pilih grup yang baru dibuat, seret ke bawah dan posisikan seperti yang ditunjukkan pada gambar di bawah.
Langkah 7
Mari lanjutkan bekerja dengan grup yang dibuat pada langkah sebelumnya. Pertama-tama, Anda perlu mengedit teks di sini. Ubah warnanya menjadi #b4b4b4, lalu klik kanan padanya (pada palet layer) dan pilih "Clear Layer Style". Buka jendela gaya lapisan dan terapkan ke teks abu-abu Shadow (Drop Shadow) dengan pengaturan di bawah ini.
Langkah 8
Atur warna Foreground ke #f5f5f5, pilih Rounded Rectangle Tool dan atur Radius ke 20 px. Buat jalur vektor 160x35 px, posisikan seperti yang ditunjukkan pada gambar pertama di bawah, lalu gandakan: Control + J. Pilih duplikat dan buat menjadi putih. Beralih ke Rectangle Tool, klik tombol Intersect di toolbar atas, dan gambar jalur vektor 40x35 px seperti yang ditunjukkan pada gambar kedua di bawah.
Mari kita pergi ke palet layer. Kurangi opacity fill (Isi) dari kontur ini menjadi 0%, kemudian, dengan membuka jendela layer style, terapkan pengaturan yang ditunjukkan pada gambar di bawah ini:
Langkah 9
Pilih kembali persegi panjang bulat yang dibuat di awal langkah sebelumnya dan duplikat itu (Control + J). Pilih salinannya, pindahkan ke depan: Shift + Control + ], kurangi opacity dari fill (Fill) menjadi 0%, buka jendela layer style dan masukkan pengaturan berikut:
Langkah 10
Pilih kembali jalur kedua yang dibuat pada langkah 8 dan duplikat itu: Control + J. Pilih salinannya, bawa ke depan: Shift + Control + ]. Selanjutnya, buka jendela gaya lapisan dan sesuaikan pengaturan gaya lapisan bayangan seperti yang ditunjukkan di bawah ini.
Langkah 11
Mari kita berurusan dengan sisi kanan bentuk yang dibuat dalam proses menyelesaikan langkah terakhir. Atur warna foreground ke #ebebeb, pilih Rectangle Tool, buat jalur vektor 10x15 px dan letakkan seperti yang ditunjukkan pada gambar pertama di bawah. Pilih persegi panjang kecil ini. Klik tombol Tambahkan ke Pilihan di bilah opsi atas dan gambar jalur vektor 10x15 lainnya seperti yang ditunjukkan pada gambar kedua di bawah. Pastikan jalur yang terakhir dibuat masih aktif, tekan Control + T, putar 45 derajat, dan tekan Enter.
Mari kita pergi ke palet layer. Tahan Ctrl dan klik thumbnail layer jalur vektor yang dibuat pada langkah sebelumnya. Akibatnya, pilihan idle-nya akan dimuat. Sekarang pilih Selection Tool (Selection Tool) dan pastikan layer dengan garis vektor - panah - aktif.
Klik tombol "Sejajarkan pusat vertikal" dan "Sejajarkan pusat horizontal" di bilah opsi atas untuk menyelaraskan panah Anda seperti yang ditunjukkan pada gambar kelima di bawah. Selanjutnya, buka jendela layer style dan terapkan gaya berikut dengan pengaturan di bawah ini.
Langkah 12
Pilih alat Teks (Type Tool) dan ketik teks sederhana seperti yang ditunjukkan pada gambar di bawah ini. Atur warnanya ke #b4b4b4, lalu buka jendela layer style dan terapkan Shadow dengan pengaturan yang ditunjukkan pada gambar. Pilih teks baru ini dengan elemen yang dibuat dalam empat langkah terakhir dan kelompokkan semuanya: Control + G.
Langkah 13
Buat empat salinan lagi dari grup yang terakhir dibuat. Atur grup baru seperti yang ditunjukkan di bawah ini dan ubah labelnya.
Langkah 14
Perhatikan sub-item menu, yang telah saya tetapkan sebagai "Tutorial", buka jendela gaya lapisan untuk bentuk panah dan masukkan parameter berikut:
Langkah 15
Pilih teks "Tutorial" dan ubah warnanya menjadi #2c95dd. Pilih juga persegi panjang bulat abu-abu di bawah teks, buka jendela layer style, terapkan Gradient Overlay (Gradient Overlay) dengan pengaturan di bawah ini.
Langkah 16
Untuk menyelesaikan langkah terakhir, kita membutuhkan kisi dengan ukuran sel 1 piksel. Oleh karena itu, masuk ke menu Editing > Setting > Guides, Grid and Fragments (Edit > Preferences > Guides, Grid & Slices) dan masukkan nilai 1 pada kolom “Line every…” (Gridline Every). Atur Fore Color ke #a1d8ff, pilih Rectangle Tool, buat persegi 6px dan letakkan seperti yang ditunjukkan pada gambar pertama di bawah. Selanjutnya, pilih Direct Selection Tool dan perhatikan bagian bawah jalur vektor yang dibuat. Pilih titik jangkar kanan dan pindahkan 3px ke kiri. Beralih ke Delete Anchor Point Tool dan klik pada anchor point bawah yang tersisa untuk menghapusnya. Hasilnya, kotak Anda akan berubah menjadi segitiga!
Gambar Selesai
