VKontakte guruh menyusini qanday qilish kerak. "Kontaktda" guruhida menyu yaratish bo'yicha batafsil ko'rsatmalar

Bugun men "VK guruhlariga sho'ng'ish" ni davom ettiraman. "Serial" ning uchinchi qismida men aytdim va ko'rsatdim,. Bugun keling, VKontakte guruhi menyusining dizayni haqida gapiraylik!

Menyularni yaratish bo'yicha birinchi maqolada sharhlarda ko'plab savollar bor edi, shuning uchun yangi mavzuni boshlashdan oldin men tez-tez beriladigan savollarga javob beraman.

Savol 1: Birinchi va eng keng tarqalgan: "Menyudagi kod qayerda?" yoki "Agar tahrirlashda xatcho'p bo'lmasa" Manba kodi "ichki sahifani qanday qo'shish kerak?" yoki "Agar kod ko'rinmasa nima qilish kerakligini hali ham tushunmayapman!"

Javob 1: VK muharrirni o'zgartirdi, endi vizual muharrir va kod o'rtasida bir marta bosish uchun (muharrirning yuqori o'ng burchagida):

Qaysi muharrirda ekanligingizni tekshirish uchun: sichqonchani ushbu tugma ustiga olib boring, bir oz matn yozing va uni qalin qilib belgilang - agar oddiy belgilar paydo bo'lmasa, bu koddir.

2-savol: Ikkinchisi, haqiqatan ham muammoli: " lekin rasmlar orasidagi bo'shliqlarni qanday olib tashlash mumkin?»

Javob 2: Qabul qilaman, mijozning menyusi birinchi marta "ketganida" o'zim qo'rqardim. Endi men uni tezda tuzataman, keyin esa bu qiziq emas edi. Qarang:

Nopadding teg qo'shing; va hamma narsa joyiga tushadi!

Rasmlar orasida bo'sh joy qolmoqda va menyu buzilgan ko'rinadi. Hech bo'lmaganda, bu normal emas, lekin hech bo'lmaganda professional emas. Xo‘sh, nima gap? Oh, hamma narsa juda oddiy! VKda ba'zi yangilanishlar doimiy ravishda amalga oshirilmoqda, yangi algoritmlar joriy etilmoqda ... va hatto muharrir egri ... bu hech qanday sababsiz sodir bo'ladi, hech qanday sababsiz muhim teglar koddan tushib qoladi va keyin biz bunday rasmni ko'ramiz. Buni tuzatish uchun siz kodni ko'rib chiqishingiz va kerakli tuzatishlarni kiritishingiz kerak. Kod formati quyidagicha bo'lishi kerak:

Andoza: [] Misol: []

Odatda, menyu rasmlari bir-biridan ajralib ketadi, chunki kod tushib qoladi nopadding; - biz uni joyiga qo'yamiz va hamma narsa tekislanadi. Natijani saqlashdan oldin, hamma narsa silliq ekanligiga ishonch hosil qilish uchun "Ko'rib chiqish" tugmasini bosing.

3-savol: Yangiliklar. 2012 yil oktabr oyida Vkontakte guruhlar va jamoatchilikning avtomashinalarini majburan kesib tashladi. Endi ularning o'lchami 200x500 piksel umumiy standartga ega. Shunday qilib, agar guruhingizda ko'proq avatar bo'lsa, yangilang (avataringizni yangilang).

Aytgancha, kesish bilan bir qatorda, VK guruh fotosuratlari bilan bog'liq yana bir yangilikni taqdim etdi: endi avatarni bosish orqali biz, xuddi akkauntdagi kabi, hamjamiyatning barcha albomlarini ko'rishimiz mumkin bo'ladi. Bu qulay! Va shundan kelib chiqib, guruh aloqalarida yangi funksionallik paydo bo'ladi.

So-a-ak, biz savollarni tugatdik ... endi biz menyuni yaratishga o'tamiz!

1-qadam. Kontaktda menyuni qanday yaratish va ichki sahifalarni yaratish:

Avvalo, kontaktda guruh menyusini qanday yaratishni bilganingizga ishonch hosil qilaylik va qisqacha ko'rsatmalarni ko'rib chiqaylik:

Mening cheat varaqim sizga qanday yoqadi?

Mana menda cheat varaq bor! Aniqlik uchun men har bir raqamni yozaman:

Buni barcha joylashtirilgan sahifalar bilan bajaring va menyuingiz tayyor bo'ladi.

Mavjud! Biz menyuni yaratdik, ichki sahifalarni yaratdik, ularni to'ldirdik, endi chiroyli grafik menyu yaratishga o'tamiz.

Qadam 2. Kontaktda chiroyli grafik menyuni qanday yaratish va uni qo'yish:

Bu qanday ishlashi haqida butun nazariya wiki belgisi aloqada, men sizga bermayman, endi boshqa maqsadlarimiz bor. VK guruhida vizual menyu yaratish uchun siz butun wiki belgilarini bilishingiz shart emas. Keling, vizual menyu yaratishga o'tamiz!

Birinchidan, men sizga menyumning kodini va natijasini ko'rsataman:

Tan olaman, men bu maqolani yozishni ataylab qilganman. Hamma "qo'l yetmasdi", bilasizmi, "etiksiz etikdo'z". Ammo endi men VK guruhida vizual menyu bilanman!

Men sizga menyu uchun rasmni qanday chizish kerakligini aytmayman, bu dizaynerlarning ishi, men o'zimni chizaman, lekin u qadar professional emas. , maqolaning oxirida men Photoshop-da oddiy menyuni qanday chizish haqida video berdim, tekshirib ko'ring, ehtimol siz buni o'zingiz qilishingiz mumkin. Agar yo'q bo'lsa, menyuning rasmini buyurtma qiling.

Men sizga o'rtacha menyuni o'rnatish variantini ko'rsataman. Farqi elementlar sonida. Oddiy chiziqlar bilan kesilgan menyu, uning eng oddiy bajarilishi. Ketma-ket bosiladigan tugmalar qanchalik ko'p bo'lsa, uni bajarish shunchalik qiyin bo'ladi. Garchi, xususiyatni bilish, hamma narsa oddiy! Bu vaqt masalasi. Shunday qilib, rasmning kengligi quyidagicha bo'lishi kerak:

370 piksel - agar sizda ikkita yoki undan ortiq ob'ekt bo'lsa, masalan, menda ijtimoiy tarmoqlar uchun tugmalar mavjud

Va maksimal 388 px - agar biz rasmni oddiy tarzda, kichik narsalarga bo'linmasdan, faqat chiziqlarga kesib tashlasak. Bu menyuni tugmalarga bo'lishda bilishingiz kerak bo'lgan xususiyatdir. Butun menyuning rasmim o'lchami 370x456 piksel.

Rasm kerakli miqdordagi ob'ektlarga bo'linib, alohida albomga saqlanganidan so'ng, ushbu albomni VK-ga yuklang. Guruhga emas, profilingizga yuklang! Guruh albomlarida albomlarni yashirish imkoniyati yo'qligi sababli. Korporativ (masalan) guruhdagi texnik albom umuman kerak emas, shuning uchun biz hisob albomidagi menyu elementlarini yashiramiz:

VK texnik albomi

"Faqat men" maxfiyligini o'rnatganingizdan so'ng. Menyuning o'zini o'rnatishga o'tamiz. Men sizga shablon bo'ladigan kod misolini keltiraman va biz uning nimadan iboratligini tahlil qilamiz:

[]

qayerda, rasm7632142_296911699- bu rasmning manzili! Biz buni rasmning manzil satrida ko'rib chiqamiz:

Birinchi rasmdan biz menyuni VKontakte guruhiga kiritishni boshlaymiz

Sizga rasmning qisqa manzili kerak, buning uchun albomning o'ziga o'ting:

Istalgan rasm manzilini olish uchun albomning o'ziga o'ting!

... va birinchi rasmdan boshlab ularni guruh menyusiga torting.

Menyu kodiga rasm hajmini qo'shing!

Shunday qilib, rasmning manzili qo'shildi, o'lchami ko'rsatildi, endi biz tegni qo'yamiz nopadding;- bu bizning rasmlarimiz bir-biriga mos kelishi uchun kerak. Va oxirgi qadam, tashrif buyuruvchi rasmni bosgandan so'ng ketadigan sahifaga havola qo'yishdir.

Mana bir oz tushuntirish! Biz tashqi havolalar, VK albomlari va munozaralarga havolalarni to'liq hajmda va ichki sahifalarga havolalarni formatda yozamiz. sahifa-32734125_44298120... Satrning boshida va oxirida ikkita kvadrat tirnoq qo'yishni unutmang va bo'sh joy qoldirmang.

2-aniqlash: biz ichki sahifalarga rasmsiz havola qilsak, keyin munozaralar, albomlar va tashqi havolalar bitta kvadrat tirnoq qo'ying.

Ikki yoki undan ortiq elementni o'z ichiga olgan qatorlar bo'sh joysiz kodga kiritiladi. Rasmning har bir satrini birin-ketin kiriting. Chunki rasmli satrdan keyin Enter tugmasini bossangiz rasm yangi qatorga o'tadi va menyu ko'chiriladi. Menyu bir bo'lakda ko'rsatilishi uchun bizga kerak, shuning uchun bizga qo'shimcha bo'shliqlar va "irters" kerak emas!

Barcha rasmlarni menyuga o'tkazganingizdan va ularni loyihalaganingizdan so'ng (hajmi, havolasi), natijani saqlang va bizning ishimizga qoyil qoling! Hammasi! Tayyor!

Salom, azizlarim!

Bugun men sizga batafsil aytib beraman, VKontakte guruhi uchun menyuni qanday qilish kerak... Mening tajribamda kontaktdagi guruhdagi menyu qo'ng'iroqlar va ilovalar sonini 20% ga oshiradi. Guruh menyusini yaratish masalasiga mas'uliyat bilan yondashish muhimdir. Shuning uchun ishingizni osonlashtirishingiz uchun PSD menyu shablonini tayyorladim.

Boshlash uchun bugungi kunda ikkita menyu varianti mavjud:

Variant 1: Yopiq guruh menyusi

Yopiq menyu, havolani bosganingizda ochiladi. Quyidagi misolda "GRUXLAR MENYYUSINI OCHISH!" havolasini bosganingizda menyu ochiladi.



Variant 2: Guruh menyusini oching (mahkamlangan post)

Ochiq menyu mohiyatan faol havolaga ega mahkamlangan postdir.



Menyuning ikkinchi versiyasi nisbatan yaqinda paydo bo'ldi, qachonki postlarni devordan guruh yoki ommaviy sarlavhaga mahkamlash mumkin bo'ldi. U hozir eng samarali hisoblanadi.

Ikkala variant ham wiki belgilaridan foydalanadi. Wiki belgisi tez va oson chiqarish imkonini beradi tashqi ko'rinish guruhlar, grafik jadvallar va spoylerlar yaratish, matnni formatlash va tasvirlar, havolalar va langarlar bilan ishlash. Belgilash haqida batafsil to'xtalmayman, chunki VKontakte o'rnatilgan vizual muharriri bu sizning kontentingizni avtomatik ravishda wiki belgilariga tarjima qiladi. Bu erda men faqat asosiy kodlarni beraman, ularsiz menyu yaratish mumkin emas.

VKontakte menyusini qanday qilish kerak

Biz 2-variant misolidan foydalanib, menyu yaratish jarayonini tahlil qilamiz, ya'ni. menyuni oching.

Navigatsiyangizni osonlashtirish uchun men siz uchun tayyorladim Menyu PSD shablon: [Diqqat. VKontakte dizayni o'zgardi. Yangi tartib va ​​boshqacha haqiqiy ma'lumot v ]

Guruh menyusi PSD shabloni

Tashqi menyu yaratish uchun 2 ta rasm kerak bo'ladi: avatar (o'ngda) va markaziy (harakatli rasm).

Avatar o'lchamlari: 200 x 332 piksel

Markaziy tasvir o'lchamlari: 395 x 282 piksel



1-qadam.

Yuqorida yuklab olingan guruh menyusi PSD shablonidan foydalanib, kerakli o'lchamdagi ikkita rasmni yarating.

2-qadam.

"Hamjamiyatni boshqarish" bo'limida (avatar ostidagi o'ngda) guruhingizga o'ting. "Materiallar" bandini toping ("Ma'lumot" yorlig'ida) va ularni "Cheklangan" qilib qo'ying.



3-qadam.

Endi orqaga qayt bosh sahifa guruhingiz va paydo bo'lgan "Materiallar" blokida "Tahrirlash" tugmasini bosing (men uni allaqachon guruh menyusida qayta nomlaganman).



Sahifani tahrirlashda sarlavha o'rnatish, asboblar paneli yordamida bo'limlar yoki boshqa ma'lumotlarni yaratishingiz mumkin. "Sahifani saqlash" va "Sahifaga qaytish" tugmasini bosing.



4-qadam.



Mening misolimda https://vk.com/page-42211349_47355854,

42211349 birinchi raqamlari guruhingiz identifikatoridir

Ikkinchi raqamlar 47355854 sahifa identifikatoridir

Xususiyat: qo'shimcha sahifalarni qo'lda yaratishingiz mumkin. Buning uchun forma havolasiga o'ting:
https://vk.com/pages?oid=-xxxxxxxxx&p=pagename
qayerda,
xxxxxxxxx guruhingizning identifikatori
sahifa nomi - sahifangizning nomi

5-qadam.



Va postni e'lon qiling.

6-qadam.

Endi guruh avatarini yuklang (o'ngdagi rasm). Avatarning dublikat rasmi devorda paydo bo'ladi - uni o'chiring.

7-qadam.

Endi e'tibor. NASHRISH VAQTINI YOZISH tugmasini bosing (postning pastki chap burchagida).



Va "tuzatish" tugmasini bosing. Biz ushbu oynani yopamiz va guruhingiz sahifasini yangilaymiz (F5).



8-qadam.

Agar avataringizdagi rasm eng yuqoridan boshlanmasa (mening shablonimda avatar 2-variant) rasmlarni tekislash uchun biz guruhning holatini yozamiz (faqat 1 qatordan foydalaning). Va bizda nima bor:



JAMI.

Menyu tayyor! Endi markaziy rasmni bosganingizda menyuingiz ochiladi:



Bu erda siz uni tahrirlashingiz, fotosuratlar, videolarni aralashtirishingiz, yangi bo'limlar yaratishingiz, havolalarni joylashtirishingiz mumkin.

Asosiy menyuda siz grafik menyu (pastki menyu) ham yaratishingiz mumkin. Uning kengligi 600 pikseldan oshmasligi kerak. Hajmi balandlikda cheksizdir. Bu sizga ajoyib VKontakte ochilish sahifalarini yaratish imkonini beradi.



Ammo men bu haqda keyingi maqolalarda batafsilroq gaplashaman. Yangi xususiyatlardan xabardor bo'lish uchun blog yangilanishlariga obuna bo'ling. Maqolani yoqing va do'stlaringiz bilan baham ko'ring.

Savollaringiz yoki fikringizni quyidagi izohlarda yozing.

MUHIM YANGILANISH: Ushbu maqola eskirgan, chunki MenuMake deb nomlangan maxsus xizmat mavjud bo'lib, u avtomatik ravishda guruh uchun menyu yaratish imkonini beradi. Qo'lda yondashuv endi kerak emas. Biroq, men ushbu maqolani tarixga qoldiraman.

VKontakte-dagi guruhlar foydalanuvchilari eng ko'p to'plangan joydir. Ko'pchilik ularni maksimal darajada jalb qilish uchun ularni yaxshiroq tartibga solishga harakat qilayotgan shoir. Yaratuvchi uchun kelajakdagi rivojlanish bilan bir vaqtda, hatto darhol oldin grafik dizayn haqida o'ylash yaxshidir.

Guruhning dizayni uning yuzi ekanligini tushunish muhimdir Yangi foydalanuvchi sahifaga kirishi bilanoq darhol ko'radi, shundan keyingina u mazmuni bilan tanishishni boshlaydi. Bu taklif, aslida, uning barcha vaznini aks ettiradi. Bundan tashqari, grafik menyu ham guruhning funksionalligi hisoblanadi, chunki u sizga kerakli ma'lumotlarni eng qisqa vaqt ichida topish imkonini beradi.

Keling, mafkura haqida gapiraylik

Chizish va tartibni boshlashdan oldin, sizning menyuingiz nima haqida gapirish kerakligi haqida o'ylash kerakmi? Buni tushunish uchun guruhning asosiy maqsadi - ko'ngil ochish, xabardor qilish yoki sotish haqida qaror qabul qilish kerak. Kelajakdagi menyuning ko'rinishi va funksionalligi ko'p jihatdan bunga bog'liq.

Mehmonlarni jalb qilish uchun menyu

Agar siz ko'ngilochar, ma'lumot beruvchi, ta'lim mazmunini nashr qilishni rejalashtirmoqchi bo'lsangiz, asosiy mavzularni ko'rsatadigan menyu yaratishingiz kerak. Misol uchun, bu bo'limlar bo'lishi mumkin: so'nggi nashrlar, eng ommabop, moda, sog'lom oziq-ovqat, bolalar haqida va hokazo.

Sotish menyusi

Aksincha, agar sahifaning maqsadi sotish bo'lsa, menyu foydalanuvchilarga mahsulotlarning keng doirasi bo'ylab harakat qilishda yordam berishi kerak. Unga tashrif buyuruvchini katalogga yoki uning ma'lum bir qismiga yo'naltiradigan, etkazib berish, kontaktlar, kompaniya, reklama aktsiyalari va har doim aloqa sahifasi haqida gapiradigan bo'limlarni qo'yish yaxshidir.

Birinchi bosqich - biz Photoshop da ishlaymiz

Ular ijtimoiy tarmoqda emas, balki uning yordamida kontakt uchun menyu yaratishni boshlaydilar grafik muharrirlar... Buning uchun hatto minimal bilim ham etarli bo'lishiga qaramay, Photoshop-dan foydalanish yaxshidir. Shuning uchun biz dasturni ochamiz va menyu shablonini yaratamiz. Yangi hujjatning hajmi to'g'ridan-to'g'ri sizga kerak bo'lgan bo'limlar soniga bog'liq.

Keyinchalik, sizga fon kerak. Bu shunchaki oq fon, rang yoki ma'lum bir rasm bo'lishi mumkin. Internetdan yuklab oling va shablonga joylashtiring. Keyin, fon rasmiga siz rejalashtirgan menyu bandlarini yozing. Ushbu teglar keyinchalik foydalanuvchini ma'lum bir bo'limga yo'naltiruvchi havolalarga aylanadi.

Ammo bu rasm o'zgarishi va osongina havolalarga qo'yilishi uchun uni kesish kerak. Bu xuddi shu Photoshop dasturida "kesish" vositasi yordamida amalga oshiriladi.

Ammo buni muammosiz va chiroyli qilish uchun CTRL + R klaviatura yorlig'i orqali faollashtirilgan yordamchi chiziqlardan foydalanish muhimdir. Bo'lim uchun chegaralarni o'rnatish uchun sudrab olishingiz mumkin bo'lgan ko'k chiziqlar paydo bo'ladi. Keyinchalik, "Kesish" asbobini bosing va yuqori menyuda "qo'llanmalar bo'ylab parchalar" ni tanlang, buning natijasida rasm menyuning bir nechta alohida bo'limlariga aniq bo'linadi.

Ushbu maqola batafsil qo'llanma bo'ladi va men sizga VKontakte guruhi uchun menyuni qanday qilishni aytaman. VK guruhining chiroyli ishlab chiqilgan menyusi tashrif buyuruvchilarning haqiqiy ko'payishiga va saytdagi sotuvlarning oshishiga yordam beradi.

Salom aziz o'quvchilarim. Bugun sizga aytaman qanday qilish kerak chiroyli menyu VKontakte guruhi uchun va butunlay bepul. Aytgancha, bunday mavzularni qanday yaratishni o'rganganingizdan so'ng, siz bundan ozgina pul ishlashingiz mumkin -))). Hech bir tijorat sayti o'z hamjamiyatini yaratmasdan ishlamaydi ijtimoiy tarmoqlarda ayniqsa, yangi mijozlarni jalb qilish, shuningdek, biznesingizni ilgari surish uchun kafolatlangan VK.

Ammo sizning jamoangiz jozibali bo'lmasa va boshqalar kabi bo'lsa, u erda kim qolishni xohlaydi? Menimcha hech kim!!! Shunday qilib, keling, guruhlarimizni sifatli dizaynlar bilan bezatamiz va buni qanday qilishni juda tez o'rganamiz. Grafik va kelajakdagi menyuni yaratishni boshlashdan oldin, rasmlarni keyingi kesish uchun kompyuteringizga Photoshop dasturini o'rnatishingiz kerak. Ko'pchilik nima uchun umuman rasmlarni kesishingiz kerakligini so'raydi. Gap shundaki, har bir menyu havolasi uchun umumiy bannerdan alohida chiziq yaratishimiz kerak bo'ladi.

Bugungi kunda yaratilgan menyuning bir nechta turlari mavjud:

• Faol nuqtalar bilan ochish;
• Belgilangan yozuv sifatida yopilgan;
• Alohida rasmlar yoki banner va menyuning umumiy qo'shni rasmi bilan.

Ikkala variantni yaratishning mohiyati bir xil. Faqat asosiy farq qo'shimcha elementlar va post turlari va bu haqda ko'proq ma'lumot ushbu maqolada.

Menyu bilan ishlash bizga yordam beradi wiki belgisi, bugungi kunda VKontakte matn muharririga o'rnatilgan. U odatdagidan farq qiladi, chunki u uchun ma'lum bir rasmni ko'rsatish va kerakli elementlarga havolalarni kiritish uchun standart buyruqlar qo'llaniladi. Wiki belgisining o'zi tasvirlar, videolar va boshqa elementlarni ko'rsatish uchun kod kiritish imkonini beradi.

VK guruhining yopiq menyusi

Bunday holda, biz guruhning asosiy avatarining chap tomonida "guruh menyusi" yozuvi ko'rinishidagi giperhavolani ko'ramiz, uni bosganimizda faol elementlar va rasmlar bilan menyumizni ochamiz.

Menyu quyidagicha bo'ladi:

Guruh menyusini ochish (mavjud material)

Xulosa - guruhning o'zi tavsifida ko'rsatiladigan, odatda barcha shartlar uchun ko'rsatiladigan allaqachon ochiq menyu elementlarini yaratish. Bizning rasmimiz tavsifga ilova qilinadi, biz uni oldindan tayyorlaymiz va uni faol elementlarga ega bo'lgan sahifaga bog'laymiz. Ushbu menyuda juda mashhur bo'ldi Yaqinda va xaridorlar orasida talabga ega. Ular shunday ko'rinadi:

VKontakte guruhi uchun chiroyli menyuni qanday qilish kerak: bosqichma-bosqich ko'rsatmalar

Shunday qilib, birinchi navbatda, biz guruhning asosiy avatarini yaratishimiz kerak, uni biz o'ng tomonga joylashtiramiz va banner ko'rinishidagi menyumizning stendini joylashtiramiz.

• Avatar uchun 200x332 piksel;
• Asosiy banner uchun menyu 395x282 pikselni tashkil qiladi.

Ko'rib turganingizdek, tasvirlarning balandligi har xil va bu tasvirlar balandlikda harakatlanmasligi va bir xil darajada bo'lishi uchun amalga oshiriladi, chunki jamoa nomi va holatining balandligi taxminan 50 pikselni oladi va bizga kerak bo'ladi. menyu balandligidan ushbu qiymatni olib tashlash uchun.

Guruhning asosiy avatarining balandligi 332 bo'lsa, aniq bo'lishi uchun undan 50 ni ayirib, asosiy menyuning balandligini 282 ga tenglashtiramiz. Agar o'lchamlar muhim bo'lmasa, u holda balandlik o'zboshimchalik bilan o'rnatilishi mumkin.

Jamiyatni yaratishdan keyingi qadam materiallarni o'rnatish bo'ladi va bu erda biz a'zolarga qo'shimcha sahifalar va bloklar yaratishni taqiqlashimiz kerak, lekin faqat devorga yozish kerak. Buni amalga oshirish uchun siz guruhning avatar ostidagi "jamoat boshqaruvi" deb nomlangan bo'limga o'tishingiz kerak bo'ladi, bu erda biz quyida ko'rsatilgandek materiallarimizni "cheklangan" qilishimiz kerak.

Endi umumiy kompozitsiyani yaratishga o'tamiz. Siz, albatta, tavsifda avatar o'rniga shunchaki rasm qo'shishingiz mumkin, ammo keling, havaskor bo'lib qolmaylik va buni qanday qilib professional tarzda qilishni ko'rsatamiz, shunda u bir-biriga aylanadigan to'laqonli rasm bo'ladi.

Keling, Photoshop-da o'lchamlari 600x350 piksel bo'lgan yangi tuval yarataylik, biz undan rasmlarimiz uchun teshiklarni kesib, trafaret sifatida foydalanamiz. Ish uchun biz barcha elementlar va o'lchagichlarning o'lchamlarini pikselga tarjima qilishimiz kerak va bu quyidagi yo'l bo'ylab amalga oshiriladi: "Edit-setting-main" va bu erda biz allaqachon piksellarni o'rnatmoqdamiz.

Ochiq menyu yaratishning navbatdagi bosqichi banner va avatar uchun qirqib olishdir, biz ularni yuklash uchun olamiz. Buning uchun chap vertikal menyuning bo'limiga o'ting va kesishni tanlang.

Foydalanish chap tugma sichqoncha, xuddi hududni tanlayotgandek, bizga kerak bo'lgan o'lchamdagi bloklarni tanlashingiz kerak va har bir tanlovdan keyin O'chirish tugmasini bosing va tanlang 50% kulrang... Bunday harakatlar bloklar kerakli o'lchamda bo'lishiga va asosiy fondan farqli rang bilan ta'kidlanishiga olib keladi.

Siz quyidagilarni olishingiz kerak:

Endi faqat o'chirgichni tanlang va "sehrli o'chirgich" funksiyasidan foydalanib, har bir kulrang blokni bosing va kesilgan trafaretni oling. Keyingi qadam bizning asosiy rasmimizni tanlash va uni fon ostiga qo'yish va menyu yoki boshqa reklama elementlari nomi bilan matn yozishingiz mumkin bo'lgan tayyor rasmlarni olishdir.

Yaxshi. Dizaynimizning rasmini joylashtirganingizdan so'ng, biz shunchaki "Veb uchun saqlash" ni tanlashimiz kerak va chiqishda biz 2 ta rasmimizni olamiz. Endi biz guruhimizga qaytamiz va biz asosiy avatarni (vertikal) to'ldirishimiz mumkin. Menyu uchun bannerdan biroz keyinroq wiki belgilash kodi bilan ishlaganda foydalanamiz.

Keling, foydalanuvchini yo'naltiradigan faol elementlar bilan menyuning o'zini yarataylik zarur bo'limlar uchinchi tomon sayti yoki guruhdagi albomlar va kataloglarga. O'zgartirish uchun yangi rasmdan foydalanamiz -))).

Keling, Photoshop-ga qaytaylik va o'lchamlari 400x300 piksel bo'lgan yangi tuval yarataylik. Keyin biz bo'limda tanlaymiz: fayl-joy va menyu foni uchun rasmni tanlang.

Rasmda biz kelajakdagi menyumizning tugmachalarini joylashtiramiz va kerakli bloklarni tanlab, yuqoridagi kabi rasmni kesib tashlaymiz. Keyin biz ham "veb uchun saqlash" ni tanlaymiz va kesiklarimiz bilan papkani olamiz. Mening holimda alohida papkada 4 ta rasm bor.

Endi biz Photoshop-dan tushirilgan rasmlarni alohida albomga to'ldirishimiz va qiziquvchan ko'zlardan yashirishimiz kerak. Yuklangandan so'ng, har bir rasm o'zining yangi nomi va noyob identifikatorini oladi.

E'tibor bering, sizda quyidagilar bo'lishi kerak:

• Materiallar "cheklangan" rejimda ochiladi;
• Munozaralar kiritilgan;
• Rasmlar bilan jild hamma uchun ochiq.

Endi menyuda ko'rsatiladigan sahifamizni sozlash qoladi. Buning uchun hamjamiyat bosh sahifasiga o'ting va yangi materiallarni tanlang va tahrirlang va "MEYYUMIZ" ga qo'ng'iroq qiling.

Keyinchalik, Photoshop-da kesish paytida olingan rasmlarni kiritishimiz kerak. Kimdir belgilash kodlaridan foydalanadi, lekin boshimni aldamaslik uchun men shunchaki kamera belgisini bosish va birin-ketin yuklash orqali rasm qo'shishni tanlashni taklif qilaman.

Ishlash matn muharriri agar rasmlarni yuklaganimizdan so'ng, biz yuqori o'ng burchakdagi qavs ko'rinishidagi belgini bossak, biz quyidagi kodni ko'rishimiz kerak:

Maslahat: Tasvirlarni yuklagandan so'ng muhim nuqta chekinishni olib tashlashdir. Bu tasvir o'lchamlari oldiga "nopadding" qo'yish orqali hal qilinadi.

Aniqlik uchun, quyida nima qaerdan kelgani tasvirlangan, ammo hamma narsa avtomatik ravishda kiritilishini hisobga olsak va siz aqlli bo'lishingiz shart emas va ba'zilar har bir rasmni qanday yozishni va identifikatorni olishni oching, keyin faqat yuklang va saqlang.

[]
bu erda xxxxx - rasmingizning identifikatori
yyyyyy - piksellardagi kenglik (388 dan oshmasligi kerak)

Bu shunday yakunlanishi kerak:

Endi bizning rasmlarimiz alohida bannerda to'plangan. Va har bir elementga havola qo'shish uchun rasmdagi belgilash o'chirilgan holda bosing va havola bo'limida nusxa olingan urlni joylashtiring.

Va endi biz VKontakte menyusini yaratishning eng muhim va oxirgi nuqtasiga keldik. Endi biz sahifamizni rasmlar bilan saqlashimiz va uning manzilini nusxalashimiz kerak. Mening vaziyatimda u shunday ko'rinadi:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

Esingizda bo'lsin, maqolaning boshida biz asosiy avatarimizning davomi bo'lgan menyu stendini yaratdik va biz buning uchun trafaret qildik. Aynan shu narsa bizga hozir kerak.

Bosh sahifaga o'ting va quyidagilarni bajaring:

№1 qadam.

Sahifaning manzilini matn maydoniga joylashtiring yangi kirish devorga, undan keyin u havolaga aylantiriladi.

№2 qadam.

Postga menyu stendimiz tasvirini ilova qiling va yuborish tugmasini bosing.

№3 qadam.

Endi, post chop etilgandan so'ng, postning pastki chap qismidagi yaratilish vaqtini bosing va "POST" ni tanlang.

Yaxshi!!! Bu xulosa qiladi. Endi siz ajoyib menyularni qanday yaratishni bilasiz va undan yaxshi pul ishlashingiz mumkin. Men sizga hamma narsani quyidagi tartibda qilishni maslahat beraman:

• Menyu tasvirlarining tuzilishi va dizayniga buyurtma berish;
• Biz barcha tasvirlarning o'lchamini o'zgartiramiz va kesamiz;
• Albomlarga rasmlarni kiritish;
• Biz muharrirdagi barcha qisqartirishlarni tahrir qilamiz va ularni guruhning asosiy sahifalarida nashr qilamiz.

Ish natijasida biz bunday menyuga ega bo'lamiz.

Lekin menyuning o'zi, bosilganda, u ochiladi faol havolalar... O'lchovlar bilan o'ynashga arziydi va ekraningizga mos keladi, lekin mobil qurilmalarda displey haqida unutmang.

MUHIM: 2016 yilda VK dizayni o'zgartirilgandan so'ng, rasmlarni yaratishda yangi o'zgarishlar kiritildi va ular haqida rasmlarga qo'yiladigan talablar.

VK guruhi menyusi shablonini + darsning barcha manba kodlarini yuklab oling

Umid qilamanki, material foydali bo'ldi va endi siz VKontakte guruhi uchun qanday qilib chiroyli menyu qilishni osongina tushunasiz. Blog yangilanishlariga obuna bo'ling va tez orada yangi postlarda ko'rishguncha. Agar sizda biron bir savol bo'lsa, ularni sharhlarda yozing, men sizga albatta yordam beraman.

Men o'qiganlarimni birlashtirish uchun videoni biriktiryapman -))).

Guruh yaratuvchisining ijtimoiy sohadagi maqsadi. tarmoqlar ko'proq tashrif buyuruvchilarni jalb qiladi. Mehmon qo'shilish, imzo qo'yish, ma'lumotni o'qish, sharh qoldirish yoki mahsulotga buyurtma berishni xohlashi muhimdir. Yakuniy natijaga bo'lgan ehtiyoj faoliyat yo'nalishidan farq qiladi.

Turishning birinchi soniyalari mehmonning keyingi harakatlarini shakllantiradi. Shuning uchun interfeys katta rol o'ynaydi.

Mehmonni tark etuvchi omillar:

• avatar;
• tavsif;
• sarlavha;
• chiroyli va amaliy menyu;
• rang-baranglik;
• mazmuni.

Harakatdan ko'proq narsani rag'batlantiradigan amaliy menyu yaratish oson. Lekin birinchi navbatda nima bo'lishi kerakligini aniqlab olishingiz kerak.

Menyu qanday bo'lishi kerak

Yaxshi ishlab chiqilgan menyudan foydalanib, tashrif buyuruvchi uni osongina kezishi va o'z savollariga tezda javob olishi mumkin. Shuningdek, navigatsiya loyiha haqida to'g'ri taassurot yaratish imkonini beradi.

Guruhlarning uchta asosiy maqsadi:

1. sotish;
2. trafikning ko'payishi;
3. faol tashrif buyuruvchilarning ko'payishi.

Savdolar uchun guruh navigatsiyasi vitrini almashtiradi.

Eng muhim tugmalar bu erda bo'lishi kerak:

1. katalog;
2. narx;
3. yetkazib berish;
4. reklama takliflari;
5. sharhlar.

Trafikni oshirish uchun asosiy e'tibor sayt yoki blogning mazmuni va lazzatiga qaratiladi.

Tugmalar to'plamining taxminiy versiyasi:

video: jamoatchilik uchun menyu

Biz fotoshop bilan ishlaymiz

Davom etishdan oldin siz dizaynni vizual ravishda taqdim etishingiz kerak yoki umumiy shakl, shuningdek, uning tarkibiy qismlari. Hech qanday maxsus bilim talab qilinmaydi, faqat ko'rsatmalardagi amallarni bajaring.

Harakatlar algoritmi:

Bu Rectangular Marquee vositasi yordamida amalga oshiriladi:

Grafika bilan ishlash:

Bu shunday ko'rinishi kerak:

O'ngdagi to'rtburchakni alohida rasm sifatida saqlang, o'lchamini 200x500 pikselga o'rnating. Bu VK guruhidagi "Rasmni yuklash" tugmasi orqali yuklangan tayyor avatar.

Ikkinchi rasmni hali ham ballar soniga bo'lish kerak. Bu har bir tugmachaga havola tayinlash uchun amalga oshiriladi.

Avval siz markirovka qilishingiz kerak:

Fragmanlarni yarating:

Rasmlarni saqlash:

Texnik qism

Tayyor tasvirlar guruhga o'tkazilishi kerak. Quyidagi amallarni bajarib, bu vazifani osonlikcha hal qilish mumkin.

Muhim! Menyuni to'ldirish odatdagi fotosuratlar yoki rasmlarni yuklashdan farq qiladi.

Hammasi tartibda:

Endi eng muhimi, bularning barchasi nima qilinganligi uchun. Menyu funksiyasini qo'shing. Alohida rasmga "sizning" havolasi berilishi kerak.

1. kerakli yozuvni toping;
2. sichqonchaning chap tugmasi bilan ustiga bosing;
3. manzil satriga urlni nusxalash.

• tashrif buyuruvchini yubormoqchi bo'lgan manbaga o'ting;
• kerakli manzilni nusxalash.

O'zgarishlarni oynaning pastki qismidagi tegishli tugma bilan saqlang.

Diqqat! O'zgarishlar darhol paydo bo'lmasligi mumkin. Asosiy profilingizdan chiqib, keyin yana guruhga kirishingiz tavsiya etiladi.

Vkontakte guruhining wiki belgilarida menyuni qanday yaratish mumkin

Wiki belgilash - bu ijtimoiy tarmoq guruhlarida veb-sahifalarni loyihalash uchun ishlatiladigan maxsus til.

Ushbu vosita sizga quyidagilarni yaratishga imkon beradi:

• effektlar;
• noodatiy menyular;
• plitalar;
• navigatsiya elementlari;
• matnni formatlash.

Bir so'z bilan aytganda, ushbu belgilash sizga mini VKontakte saytini yaratishga imkon beradi. Bu, ayniqsa, sotuvlar va obunachilarni yollash uchun juda yaxshi.

Ushbu dizayn intuitiv ravishda tashrif buyuruvchini qolishga majbur qiladi, tugmani bosing. Ya'ni, u kechiktiradi va harakatni rag'batlantiradi - va aynan shu narsa kerak.

Vizual ravishda bunday tizim HTML tartibiga juda o'xshaydi. Ammo bu uzoq tayyorgarlik va maxsus fikrlashni talab qilmaydi.

Video: toifalar bo'yicha qidiruv bilan menyu

Yaratilish nuanslari

Aslida, yuqorida qilingan narsa (tasvirni bo'lish va yuklash) allaqachon belgilash elementlari. Bu ushbu vositaning afzalligi. Rasmlarni oddiygina yuklashda teglarga avtomatik aylantirish.

Biroq, uni yanada funktsional va chiroyli qilish uchun alohida teglarni bilish muhimdir. Misol uchun, tasvirning alohida qismlarini to'ldirganimizda, ular orasida oq chiziqlar paydo bo'lishi mumkin. Siz ularni oddiygina noborder tegini qo'shish orqali olib tashlashingiz mumkin.

Mana bunday: []

Asosiy teglar quyidagi jadvalda keltirilgan:

Surat: belgilash uchun ishlatiladigan teglar

Rasmlar bilan ishlash

Qaerda variantlar o'rniga:

• chegarasiz- tasvir atrofidagi ramkani olib tashlash;
• nopadding- tasvirlar orasidagi bo'shliqlarni olib tashlash;
• oddiy- rasmga havola kiriting. Grafiksiz matn shaklida tuzilgan;
• nolink- rasmga havolani olib tashlash;
• quti- oynada tasvirni ochish;
• NNNxYYYpx yoki NNNpx- fotosurat hajmini piksellarda o'rnatadi.

Jadval yaratish

Qaysi menyuni (matnli yoki grafik) yaratmasligingizdan qat'i nazar, siz jadvalni qo'shmasdan qila olmaysiz. Aks holda, siz shunchaki matnni yangiliklar maydoniga qo'yishingiz va uni formatlamasligingiz mumkin, bu juda ko'p vaqtni behuda sarflaydi.

Jadval maxsus belgilar to'plami yordamida yaratilgan, bu erda ularning har biri jadvalning ma'lum bir qismi uchun javobgardir:

• {| stol boshlanishining ramzi, usiz stol bo'lishi mumkin emas. Har doim ishlatiladi;
• |+ jadval nomini markazlashtirish uchun javobgardir. Jadvalning boshi belgilaridan keyin joylashtiriladi. O'z xohishiga ko'ra foydalaniladi;
• | yangi qator va katakning boshlanishini bildiradi;
• | hujayrani shaffof qiladigan belgi;
• ! hujayrani qorong'i qiladi. U yo'q bo'lganda, oldingi belgini qo'llash majburiydir;
• |} jadvalning oxirini bildiradi. Biroq, ixtiyoriy belgi xato yuzaga kelishining oldini olish uchun ishlatiladi.

Jadvalni to'ldirishda har bir katakning mazmuni | belgisidan keyin joylashtirilishi kerak va katakchalarni bo'lishda quyidagi qator turlarini ko'paytirish kerak: || yoki!!.

Belgilash xususiyatlari

Ko'plab yozilmagan qoidalar mavjud va bu yangi boshlanuvchi dasturchilarga juda ko'p muammolarni keltirib chiqaradi. Qoidaga ko'ra, hamma narsa amalda o'rganiladi. Har kim o'z bo'shliqlarini topadi, har kim o'z qiyinchiliklariga duch keladi.

Asosiy xatolarga yo'l qo'ymaslik uchun siz asosiylari bilan tanishishingiz kerak:

1. rasm o'lchamini o'zgartirishda ehtiyot bo'lishingiz kerak - agar u 131 pikseldan kam bo'lsa, uning sifati sezilarli darajada yomonlashadi;
2. tasvir kengligi 610px dan oshmasligi kerak;
3. bir viki-sahifada 17 dan ortiq yopilmagan teglarni joylashtirish taqiqlanadi;
4. rasmning kengligini o'zgartirganda, uning balandligi avtomatik va mutanosib ravishda o'zgaradi;
5. jadval ichidagi ro'yxat teg yordamida yaratilishi kerak
   ;
6. belgilashning bir qatorida 8 tadan ko'p bo'lmagan ro'yxat bandlari bo'lishi kerak.

Chiroyli va funktsional navigatsiya yaratish uchun siz Photoshop va wiki belgilarining asoslarini bilishingiz kerak. Biroq, ikkinchisi o'ziga xos nuanslarni o'z ichiga oladi, ular bilan yangi boshlovchi uzoq vaqt davomida qotib qolishi va chalkashishi mumkin.

Muhim! Barcha teglarning yopilishini tekshiring. Muvofiqlikni saqlang.

Bu masalada asosiy yordamchi ehtiyotkorlik va ko'rsatmalarga qat'iy rioya qilishdir. Viki belgilash deb ataladigan rasmiy VK sahifasi har doim yordamga kelishi mumkin.