Як створити меню для групи вконтакте

Вітаю дорогі друзі. У сьогоднішньому пості я хочу розповісти про те, як створити меню для групи Вконтакте. Зробити це не так складно, як може здаватися на перший погляд, і якщо Ви володієте хоча б початковими знаннями програми Photoshop або Paint, то у Вас все обов'язково вийде. Отже, давайте приступимо.

При правильно складеної структурі, меню може збільшити кількість продажів або потік клієнтів для Вашого бізнесу, це вже залежить від того, яку спрямованість має група. Як приклад розглянемо оформлення інтернет магазину одягу:

А ось приклад невдалого рішення:

Каталог оформлений у вигляді звичайних посилань, які ведуть невідомо куди. Погодьтеся, що переходити по ним немає особливого бажання, навпаки хочеться покинути групу.

У цих прикладах ми розібрали варіанти оформлення інтернет магазинів, Ви ж можете використовувати щось подібне в інших тематиках. Формула проста: чітка структура + графічне оформлення = приплив клієнтів і збільшення продажів.

Тепер давайте подивимося на все це з технічної точки зору.

Створюємо меню для групи Вконтакте

Насамперед створимо графічний макет майбутньої менюшки. Для цієї мети ми будемо використовувати програму Photoshop (для простенької картинки цілком згодиться стандартний Paint). Відкрийте програму і створіть новий документ:

Я буду створювати картинку розміром 500 × 500 пікселів, проте, в залежності від кількості та розташування розділів розмір картинки може бути іншим.

Тепер скачайте зображення, яке хотіли б використовувати в якості фону і перенесіть його на полотно. Якщо Ви професійно володієте програмою, то можна намалювати фон самостійно.

Для того щоб розділи перетворилися в посилання, картинку потрібно розрізати по частинах. У цьому нам допоможе інструмент "раскройка" (Slice Tool):

Щоб зробити розрізи як можна точніше, потрібно задіяти допоміжні лінії, натиснувши CTRL + R. Наведіть курсор миші на верхню лінію і перетягніть її на зображення приблизно таким чином:

Останнім кроком буде розріз об'єктів. Щоб це зробити клікніть по кнопці "фрагменти по напрямних" (Slices From Guides) на верхній панелі інструментів:

Зберігаємо каркас для web пристроїв. Формат картинки ставимо JPG, вибираємо максимальну якість і зберігаємо, наприклад, на робочий стіл:

На робочому столі з'явилася папка з каркасом майбутнього меню, який нам потрібно перенести в групу.

Висновок меню за допомогою Wiki розмітки

У своїй групі зайдіть в "управління спільнотою" і перевірте, чи підключений розділ "матеріали". Якщо розділ вимкнений, то підключіть його:

Замість стандартного заголовка, пропишіть свій, а також включите режим wiki розмітки, натиснувши на піктограму ромба:

Замість значення "photo133337_133701019" потрібно вставити посилання на фотографію

Замість значення "page-13333337_13333337" потрібно вставити посилання на потрібну сторінку або розділ групи

Замість 370px можна підібрати свої розміри, а параметр nopadding дозволяє виводити повноцінну картинку, без нього наше меню виводилося б розрізаними шматками.

Посилання на фото потрібно копіювати не всю, а лише цю частину:

Посилання на сторонні сайти і розділи групи можна використовувати повноцінні. В результаті у нас вийшло щось на зразок цього:


А на цьому все. Підписуємося на блог, бо скоро буде продовження статті про створення інтернет магазину на wordpress, крім цього Вас чекає море корисної інформації та безкоштовно. До зустрічі, братики і сестрички!

Раніше я цим займався, навіть заробив трохи - рублів 500. Там взагалі розібратися не важко, головне це ідея і час!

Ну да, якщо базові навички в фотошопі є, то взагалі легко

У мене не з'являється «фрагменти по напрямних» .. (не "горить») ... не можу натиснути. Начебто все правильно робила ....

Так - сподобався шрифт (текст Заробіток, Програми ...) - як називається?

Підкажіть будь ласка, де можна скачати цю програму.

Добрий день. Вирішила створити меню групи вконтакте. І все більш-менш, на кшталт, тільки ось розриви між пунктами меню на зображенні не пропадають і з 3-м пунктом лажа якась ... Пердидущіе і наступні пункти на зображенні, а цей прописом)))

Вітання. Та ж фігня, розриви між картинками. Як їх прибрати можна. Заздалегідь дякую

Спасибі, відмінна інструкція! Все вийшло.
Єдине, хотілося б, щоб поле з кнопками було завжди розкритим. Це можна якось зробити?

це робиться іншими засобами.
Вірніше створюється сторінка з меню, робиться пост з посиланням на сторінку. Пост закріплюється вгорі.

А як сідлати що б з фронтальної частини були посилання на меню сайту?