Донецкий техникум промышленной автоматики

Як оформити групу В Контакте з закріпленим верхнім меню під новий дизайн ВК

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

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


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


Крок 1
Створюємо в фотошопі новий документ розміром приблизно 900х700 пікселів, заливаємо його білим кольором. Тепер нам треба вирізати в шарі два вікна, через які буде проглядатися власне саме графічне оформлення. Спочатку виділяємо прямокутник розміром 200х500 пікселів (аватар) і натискаємо Del. Потім виділяємо прямокутник розміром 510х352 (вирівнюємо по нижній лінії аватара і робимо відстань між фігурами 50 пікселів) і також натискаємо Del.
Після чергового апдейта дизайну ВКонтактом (31.10.2016) розміри банера стали 510х307 (а не 510х352).
Крок 1   Створюємо в фотошопі новий документ розміром приблизно 900х700 пікселів, заливаємо його білим кольором

крок 2
Тепер нижче білого шару кладемо якусь єдину картинку, яка і буде складати основу оформлення. крок 2   Тепер нижче білого шару кладемо якусь єдину картинку, яка і буде складати основу оформлення

крок 3
Після цього доповнюємо картинку різними елементами - логотипом, текстовими написами і кнопкою, яка закликає клікнути по меню. Потім зберігаємо на комп'ютері дві окремих картинки - одна аватар (праворуч), друга меню з кнопкою кликнути (зліва). крок 3   Після цього доповнюємо картинку різними елементами - логотипом, текстовими написами і кнопкою, яка закликає клікнути по меню

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

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

крок 6
Заходимо в нашу групу Вконтакте, натискаємо «Управління співтовариством» (при натисканні на три точки під автара відкривається меню, що випадає) і перевіряємо правильність установок. Група повинна бути відкрита і матеріали теж відкриті. крок 6   Заходимо в нашу групу Вконтакте, натискаємо «Управління співтовариством» (при натисканні на три точки під автара відкривається меню, що випадає) і перевіряємо правильність установок

крок 7
Тепер завантажуємо новий аватар. Підводимо мишкою до місця аватара і на спливаючому меню вибираємо «Оновити фотографію». Завантажуємо праву фотографію з Кроку 3, розтягуємо область виділення вгору і вниз по самі вінця картинки, натискаємо «Зберегти» і потім вибираємо область для круглої мініатюри. крок 7   Тепер завантажуємо новий аватар

крок 8
Тепер потрібно створити внутрішню сторінку. Про те, як це зробити, детально розписано в уроці Як зробити внутрішню сторінку для меню групи В Контакте . Ще один альтернативний спосіб створення внутрішньої сторінки розписаний в уроці « Як Вконтакте створити динамічне меню з ефектом навігації »В Кроці 5 і 6. крок 8   Тепер потрібно створити внутрішню сторінку

крок 9
Після того, як ми створили внутрішню сторінку, можна перейти на неї. Для цього потрібно натиснути на спливаюче меню групи (за замовчуванням цей пункт називається «Свіжі новини» - я перейменувала в «Меню») і там натиснути на посилання «Меню». Після цього ми перейдемо на новостворену порожню сторінку. крок 9   Після того, як ми створили внутрішню сторінку, можна перейти на неї

крок 10
Тепер нам треба створити графічне меню з п'яти пунктів. Для цього ми завантажуємо в альбом групи наші п'ять картинок з Кроку 5. Ми натискаємо на значок фотоапарата і завантажуємо нарізані картинки з комп'ютера. Зберігається картинки будуть десь на серверах ВКонтакте з прив'язкою до групи, тому створювати окремий альбом для картинок-нарізок не обов'язково. Завантажувати картинки потрібно в режими Вікі-розмітки. крок 10   Тепер нам треба створити графічне меню з п'яти пунктів

крок 11
Тепер в режимі вікі-розмітки ми будемо створювати графічне меню. Дуже важливо створювати саме в режимі вікі-розмітки (іконка в правому верхньому куті з двох трикутних скобочек), а не в візуальному режимі редагування. Детальніше про створення коду в вікі-розмітці розказано в Кроці 4 та Кроці 5 уроку « Як оформити групу В Контакте і створити гарне графічне меню «. Там же наведено шаблон коду для вставки. Якщо все зроблено правильно, то повинно вийти готове графічне меню, як на малюнку нижче. крок 11   Тепер в режимі вікі-розмітки ми будемо створювати графічне меню

крок 12
Тепер повертаємося на головну сторінку групи, беремо урл нашої внутрішньої сторінки (він повинен бути такого виду https://vk.com/page-78320145_49821289) і вставляємо в віконце, де створюються новини. Автоматично має прикріпитися віконце з посиланням на цю саму внутрішню сторінку. Після цього ми підводимо курсор до напису «Прикріпити» і прикріплюємо до запису фотографію, а саме нашу картинку ліворуч з Кроку 3. Після цього стираємо рядок з урл внутрішньої сторінки, залишивши порожнє місце. Важливо! На даному етапі треба поставити галочку (якщо є такі права, в основному це стосується груп з відкритою стіною) в чекбоксі «Від імені групи». Якщо цю галочку не поставити, то запис неможливо буде закріпити. В кінці натискаємо «Відправити». крок 12   Тепер повертаємося на головну сторінку групи, беремо урл нашої внутрішньої сторінки (він повинен бути такого виду https://vk

крок 13
Підводимо курсор до трьох точок поруч із заголовком поста і в випадаючому віконці вибираємо пункт «Закріпити». Відповідно також новина і відкріплюється, якщо необхідно. крок 13   Підводимо курсор до трьох точок поруч із заголовком поста і в випадаючому віконці вибираємо пункт «Закріпити»

крок 14
Є один нюанс. Іноді, після того, як відкріплює новина, вона йде далеко вниз стрічки, згідно з датою створення, і буває досить важко знову її відшукати. Тому краще відразу десь записати урл закріпленої новини. Для цього треба підвести курсор до часу створення новини і натиснути на посилання. крок 14   Є один нюанс

крок 15
Тепер оновлюємо головну сторінку групи. Наше графічне меню буде вгорі сусідити поруч з аватаром. А при натисканні на картинку, ми потрапляємо на внутрішню сторінку з меню з п'яти пунктів. крок 15   Тепер оновлюємо головну сторінку групи