Привіт, друзі. Все рухається, все змінюється. Соціальна мережа Вконтакте теж не стоїть на місці. Ось і моя публікація про створення єдиного блоку Вконтакте на сьогоднішній день стала не актуальна. Тепер при створенні групи блок Новини, який був необхідний для такого меню, просто відсутній.

Благо Вконтакте є можливість створення вікі-сторінок. За допомогою такої вікі-сторінки ми можемо створити меню спільноти, а після закріпити це меню нагорі групи.

Отже, давайте по порядку.

Як створити вікі-сторінку?

1.   Створіть в адресному рядку вашого браузера посилання виду:

• ххх   - id вашої групи або публічної сторінки;
• Названіе_страніци   - будь-яке слово, яким ви назвете свою сторінку.

Як дізнатися id вашої спільноти? Якщо id не міститься на засланні, наприклад, https://vk.com/make_community   , Його можна дізнатися наступним чином. Натискаєте на заголовок стіни групи, де написано кількість публікацій.

Відкриється окремо стіна вашої спільноти. В адресному рядку будуть цифри. Це і є id вашої спільноти.

2.   Перейдіть по створеної вами посиланням і натисніть "Наповнити змістом".

3.   Наповніть вашу сторінку вмістом. Наприклад, нам необхідно графічне меню у вигляді окремих кнопок. Спочатку створюємо всю картинку цілком.

Потім розрізаємо її на окремі кнопки. В даному конкретному випадку у нас повинно вийти чотири картинки-кнопки.

Повертаємося до нашої сторінці і, використовуючи вбудований редактор, завантажуємо наші картинки-кнопки.

Після завантаження всіх картинок маємо отримати ось так:

Натиснувши на будь-яку з картинок, можна вказати посилання на сторінку, куди буде вести цей пункт меню. Це може бути як сторінка вашої спільноти, так і сторінка зовнішнього сайту або інтернет-магазину.

Створюємо меню.

Повинна вийде ось такий запис на стіні вашої групи Вконтакте:

Як закріпити меню?

Нам залишається закріпити меню нагорі групи. Для цього тиснемо на текст перед картинкою в запису. У вікні, внизу праворуч натискаємо "Закріпити".

Усе. Тепер у нас повинно вийти ось так:

Якщо ви хочете зробити меню і аватар як би одним цілим, просто підберіть картинку таким чином, щоб вона була логічним продовженням аватара вашої групи.

У всіх спільнотах Вконтакте, в яких можна структурувати інформацію, я рекомендую робити меню. Це безумовно підвищить зручність користуванням вашим спільнотою. А як закріпити меню Вконтакте ми з вами розібрали на конкретному прикладі. Залишається побажати вам удачі в розвитку і просуванні ваших спільнот!

Всім привіт, з вами Роман Литвинов, дизайнер команди Ardens.pro. Сьогодні я до вас прийшов з Гайд-туторіали, як створити єдиний блок аватара і меню Вконтакте (єдиним цілим). Для початку приклади на що це буде схожим.

приклади:

Розмітка аватара для групи Вк

Для старту нам потрібна сітка. Щоб її зробити, ми робимо скріншот сторінки групи і закидаємо в проект, в моєму випадку в Photoshop.

Після чого натисніть сполучення клавіш CTRL + R викликаємо лінійки і розставляємо напрямні по краях аватара і закріпити. Для того, щоб витягнути направляючу, потрібно затиснути ЛКМ на лінійці і потягнути в сторону нашого макета.

Розмір аватара, який ми бачимо в браузері без масштабування, 200х500 пікселів. А закреп в такому вигляді 395х237 пікселів.

порізка

Ми зробили розмітку, тепер приступимо до порізки. Чому зараз? Та тому, що це вже майже кінець мого гайда.
  Для порізки нам потрібен інструмент «Раскройка» (в англ. Версії «Slice tool»)

  За допомогою цього інструменту робимо нарізку по нашим напрямних, конкретно всередині аватара і закріпити по краях.

Має вийти так.

  Далі видаляємо наш скріншот зі шарів і приступаємо до проекту. Розробляти оформлення ми не будемо, але я покажу що вийде. Залишимо в наш проект фотографію дівчини. Для нас головне потрапити в область порізки аватара і закріпити.

Після роботи над нашим дизайном зберігаємо порізані частини за допомогою CTRL + SHIFT + ALT + S або Файл-\u003e Зберегти для web ...

В даному вікні з затиснутим Shift вибираємо наш аватар і закреп натискаємо зберегти

  Але тут теж ще не все. У вікні, пункт фрагменти, вибрати «Тільки виділені фрагменти» і натиснути зберегти. Після чого фотошоп відріже з усього макета область з аватаром і закріпити.

В папці куди ми зберігали порізку ми побачимо приблизно таке.

Єдиний блок аватара і меню для групи Вконтакте

Сміливо заливаємо наш аватар і закреп в тестову групу, щоб подивитися результат

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

завершення

Сподіваюся мій міні-гайд був корисний і вас вийде зробити ваші групи красивішими і такими, що запам'ятовуються.

Корисні статті на схожою тематики:

Кумедне відео (місцями і не зрозумієш «фотошоп» чи ні)

Увага конкурс:
  Подарую набір стікерів на вибір того, хто повторить цей урок, і у нього вийде зробити аватар і закреп одним цілим 😉

Ставте лайки, залишайте коментарі, кидайте маффіни або помідори в нашій групі

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

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

Але якщо Ваше співтовариство буде не привабливо і як у всіх, хто захоче там залишитися? Я думаю ніхто !!! Так давайте прикрасимо свої групи якісним дизайном і навчимося робити це дуже швидко. Перед тим як почати створювати графіку і наше майбутнє меню необхідно встановити програму фотошоп на свій комп'ютер для подальшої нарізки картинок. Багато запитають навіщо взагалі потрібно нарізати картинки. Тут справа в тому, що для кожного посилання меню ми повинні будемо створити окрему смужку із загального банера.

Існує на сьогодні кілька видів створюваного меню:

• Відкрите з активними пунктами;
• Закрите у вигляді закріпленої записи;
• З окремими картинками або загальної суміжній картинкою банера і меню.

Суть створення обох варіантів одна і та ж. Тільки основна відмінність в додаткових елементах і типів записи і про це докладніше буде в цій статті.

Для роботи з меню нам допоможе wiki-розмітка, Яка вбудована сьогодні в текстовий редактор ВКонтакте. Від звичайного вона відрізняється тим, що для неї будуть використовуватися стандартні команди для виведення тієї чи іншої картинки і вставки посилань на потрібні елементи. Сама wiki-розмітка дає можливість вставки коду для відображення зображень, відео та інших елементів.

Закрите меню групи ВК

В даному випадку ми спостерігатимемо зліва від основної аватарки групи гіперпосилання у вигляді напису «меню групи» при натисканні на яку у нас буде відкриватися наше меню з активними пунктами і зображеннями.

Вид меню, буде наступним:

Відкрите меню групи (закріплений матеріал)

Суть полягає в створенні вже відкритих пунктів меню, які будуть відображатися в опис самої групи, де зазвичай і відображається за всіма умовами. В опис буде закріплена наша картинка, яку ми підготуємо заздалегідь і зв'яжемо її зі сторінкою, на якій у нас будуть активні пункти. Дане меню стало дуже популярно останнім часом і користується попитом у замовників. Виглядає вони в такий спосіб:

Як зробити красиве меню для групи ВКонтакте: покрокова інструкція

Отже, в першу чергу нам необхідно буде створити головну аватарку групи яку ми розмістимо справа і заглушку нашого меню у вигляді банера.

• Для аватарки 200х332 пікселів;
• Для основного банера меню 395х282 пікселів.

Як ви могли помітити висота зображень відрізняється і це зроблено для того, щоб картинки не з'їжджали по висоті і були на одному рівні так як висота назви спільноти і статус займають близько 50 px і якраз цю величину нам необхідно буде прибрати з висоти меню.

Щоб було зрозуміло якщо висота головної аватарки групи 332, то від неї ми забираємо 50 і отримуємо висоту основного меню рівну 282. Якщо ж розміри не мають значення, то висоту можна буде виставляти довільну.

Наступним кроком після створення спільноти буде настройка матеріалів і тут нам необхідно заборонити учасникам створювати додаткові сторінки і блоки, а тільки писати на стіні. Для цього необхідно буде перейти в розділ під аватарки групи під назвою «управління спільнотою» де нам необхідно зробити наші матеріали «обмеженими» як показано нижче.

Тепер давайте займемося створенням загальної композиції. Можна звичайно просто вставити картинку замість аватарки і в опис, але не будемо дилетантами і покажу як зробити професійно, щоб це була одна повноцінна картинка, що переходить одна в іншу.

Створимо новий полотно в фотошопі розмірами 600х350 пікселів яке ми будемо використовувати як трафарет вирізавши в ньому отвори для наших картинок. Для роботи нам необхідно перевести розміри всіх елементів і лінійок в пікселі і робиться це за наступним шляхом: «Редагувати-установка-основне» і тут вже виставляємо пікселі.

Наступним кроком створення, відкритого меню необхідно зробити вирізки під банер і аватарку які ми потім отримаємо для завантаження. Для цього переходимо в розділ лівого вертикального меню і вибираємо раскройка.

Використовуючи ліву кнопку миші, як ніби ви виділяєте область, необхідно виділити блоки потрібних нам розмірів і після кожного виділення натискаємо кнопку видалити «Delete» і вибираємо 50% сірого. Такі дії призведуть до того, що блоки будуть потрібних розмірів і виділені кольором відмінним від основного фону.

Має вийти наступне:

А тепер просто вибираємо ластик і функцією «чарівний ластик» тиснемо на кожен сірий блок і отримаємо трафарет з вирізами. Наступним кроком ми вибираємо наше основне зображення і підкладаємо під фон і отримаємо готові картинки на який можна буде написати текст з назвою меню чи інші рекламні елементи.

Відмінно. Після того як ви помістили картинку нашого дизайну нам залишається вибрати «зберегти для Web» і на виходь ми отримуємо 2 наші картинки. Тепер йдемо знову в нашу групу і можемо заливати головну аватарку (вертикальну). Банер для меню ми будемо використовувати трохи пізніше під час роботи з кодом wiki-розмітки.

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

Отже, переходимо знову в фотошоп і створюємо новий полотно з розмірами 400х300 пікселів. Після чого вибираємо в розділі: файл-помістити і вибираємо картинку для фону меню.

На зображенні розміщуємо кнопки нашої майбутньої менюшки і нарізаємо картинку як ми робили вище шляхом виділення потрібних блоків. Після чого також вибираємо «зберегти для web» і отримуємо папку з нашими нарізками. У моєму випадку вийшло 4 картинки в окремій папці.

Тепер нам необхідно вивантажені з фотошопа картинки залити в окремий альбом і приховати від сторонніх очей. Після завантаження кожна картинка отримає свою нову назву і унікальний id.

Зверніть увагу що у вас повинно бути:

• Відкрито матеріали в режимі «обмежені»;
• Включені обговорення;
• Папка з фотографіями відкрита для всіх.

Тепер залишається налаштувати нашу сторінку де і буде відображатися на менюшка. Для цього переходимо на головну сторінку спільноти і вибираємо свіжі матеріали і редагувати і називаємо «НАШЕ МЕНЮ».

Далі нам необхідно вставити картинки, які ми отримали при нарізці в фотошопі. Хтось використовує коди розмітки, але, щоб не мудрувати голову пропоную просто вибрати вставку картинки натиснувши на іконку фотоапарата і по черзі завантажити один за одним.

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

[]

[]

[]

[]

Порада:   Важливим моментом після завантаження зображень є видалення відступів. Вирішується це вставкою «nopadding» перед розмірами зображень.

Для пояснення нижче розписано що звідки береться, але враховуючи, що все буде вставлено автоматично і не потрібно мудрувати, і відкривати як деякі пишуть кожну картинку і брати id, то просто завантажуємо і зберігаємо.

[]
  де xxxxx - id вашої картинки
  yyyyy - ширина в пікселях (не більше 388)

Повинно в підсумку вийти ось так:

[]

[]

[]

[]

Тепер наші картинки зібрані в окремий банер. А для того, щоб додати кожному пункту посилання просто натискаємо при відключеною розмітці на картинку і в розділі посилання вставляємо скопійований url.

І ось ми підійшли до найважливішого і останнього пункту створення нашого меню вконтакте. Тепер нам необхідно зберегти нашу сторінку з картинками і скопіювати її адресу. У моєму випадку він виглядає ось так:

http://vk.com/page-116682062_51411604?act\u003dedit&hid\u003d183950676§ion\u003dedit

Пам'ятайте ми на початку статті робили заглушку меню, яке буде продовженням нашої головної аватарки і під неї якраз і робили трафарет. От саме зараз нам і знадобиться.

Переходимо на головну сторінку і робимо наступне:

Крок №1.

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

Крок №2.

До запису прикріплюємо зображення нашої заглушки для меню і натискаємо відправити.

Крок №3.

Тепер після публікації запису натискаємо на час створення в нижній лівій частині записи і вибираємо «ЗАКРІПИТИ».

Отлично !!! На цьому закінчуємо. Тепер ви вмієте створювати класні меню і можете заробляти на цьому непогані гроші. Раджу все робити в наступному порядку:

• Придумуємо структуру і замовляємо дизайн зображень меню;
• Робимо підгонку розмірів і нарізку всіх зображень;
• Вставляємо в альбоми картинки;
• Редагуємо в редакторі все нарізки і публікуємо на головні сторінки групи.

В результаті роботи ми отримаємо ось таке меню.

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

ВАЖЛИВО: Після зміни дизайну ВК в 2016 році внесені нові зміни при створенні зображень і вимоги до картинок про яких.

Завантажити шаблон меню групи ВК + всі вихідні уроку

Сподіваюся матеріал був корисний, і ви з легкістю тепер зрозуміли, як зробити гарне меню для групи ВКонтакте. Підписуйтесь на оновлення блогу і до швидких зустрічей в нових постах. Якщо залишилися питання пишіть їх в коментарях, і я обов'язково допоможу Вам.

Прикладаю відеоролик для закріплення прочитаного -))).

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

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

Якщо говорити про групи, то тут ситуація інша. Якщо ваша група не матиме привабливою, інформативною фотографії, - швидше за все, в неї навіть ніхто не вступить. Тому адміністратори спільнот часто задаються питанням: як зробити аватарку для групи «ВКонтакте»? У цій статті ми розглянемо кілька варіантів її створення, а також розглянемо особливості фотографій в групах.

Якою має бути аватарка групи?

Отже, почнемо з загальної теорії про те, як повинна виглядати ваша фотографія групи. Виходячи з цієї інформації, ви зрозумієте, як зробити аватарку для групи «ВКонтакте» такий, щоб вона сподобалася користувачам і привернула нових учасників.

Очевидно, що фотографія в групі повинна бути відповідною контенту, який розміщений в співтоваристві. Це базова вимога до картинки: її зміст має бути пов'язано з тим, про що ви пишете. Другою вимогою є привабливість зображення. Оскільки все, що відвідувач бачить про вашу групу, - це назва і картинка, то, відповідно, остання повинна бути максимально привабливою, щоб користувачеві хотілося натиснути і зайти на сторінку самого співтовариства. Коли ви захочете зробити аватарку для групи «ВКонтакте», будь ласка, враховуйте це. Останнім вимогою до фото групи варто було б назвати інформативність. Грубо кажучи: на аватарке було б доцільно зобразити те, що натякне користувачеві, чим займається група. Зробити це можна, наприклад, за допомогою написів.

Шукаємо готову картинку

У переліку способів створення фотографії групи пошук готового зображення є найпопулярнішим і простим одночасно. Все, що від вас вимагається - це зайти на сайт із зображеннями і знайти категорію картинок, пов'язаних з тематикою вашої групи. Найбільш вдале фото можна зберегти і відредагувати (або навіть просто запостити на сторінку спільноти без змін).

Робимо аватарку за допомогою онлайн-редакторів

Другий варіант - редагування готових зображень (або створення нових) за допомогою онлайн-редакторів. На щастя, зараз існує багато сервісів, що дозволяють розробити свій аватар як «з нуля», так і за допомогою одного з готових шаблонів. Вам достатньо визначитися з тим, що ви хотіли б бачити на зображенні для Ави, а далі про те, як зробити аватарку для групи «ВКонтакте» без «Фотошопа», можете навіть не переживати - ресурс зробить все в автоматичному режимі. Таких готових рішень зараз в Мережі досить багато. Вони безкоштовні і багатофункціональні. Єдиний мінус роботи з такими сайтами - це - адреса ресурсу, який зробив вам аватар, розміщений десь в нижньому кутку.

Робимо аватарку в «Фотошопі»

Якщо не знаєте, як зробити аватарку для групи «ВКонтакте» без посилання на чужий сайт, - вам доведеться скористатися найбільш популярною Це «Фотошоп». Робота з ним досить проста, головне - зрозуміти ази, розібратися з елементарними поняттями і категоріями, до яких функціонує програма. Якщо у вас вже є хоча б мінімальний досвід взаємодії з нею - створити аватар для вас буде нескладно. Якщо ж ви не знаєте взагалі, як зробити аватарку для групи «ВКонтакте» в «Фотошопі», - у вас залишиться два варіанти. Перший - це звернутися за допомогою до людини, яка вміє працювати в програмі, другий - зайнятися вивченням особливостей редактора самостійно: знайти уроки, приклади робіт, попрактикуватися самому.

створюємо аватарку

Нарешті, після того як ми відповіли на питання «Як зробити аватарку для групи« ВКонтакте »?», Настав час подумати про те, що буде зображено на фотографії в групі. Як уже зазначалося, це повинно бути щось тематичність, привабливе і інформативне. Пропонуємо вам взяти аркуш паперу і ручку і схематично окреслити логотип своєї спільноти. Після цього можете приступати до створення зображення.

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