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

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

Увага!
У зв'язку з черговим апдейтом ВКонтакте від 31.10.2016 даний варіант оформлення груп став неактуальний. Почасти подібне меню можна реалізувати на вкладці Свіжі новини в блоці під рядком статусу. Але це буде окреме меню, а не єдина композиція з аватаром.

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

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

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

Крок 3.
Тепер правий прямокутник (аватар) відразу ж зберігаємо окремої картинкою розміром 200х500 пікселів. Це вже готова картинка для оформлення групи. Вона завантажується в блок в правому верхньому кутку групи, де написано «Оновити фотографію». А ліву картинку треба нарізати на кілька картинок за кількістю пунктів меню. В даному випадку це 5 картинок шириною 510 пікселя.

Крок 4.
На цьому кроці нам треба завантажити наші нарізані картинки ВКонтакте. Для цього відразу під описом групи вибираємо блок «Свіжі новини», по-моєму так він називається в оригіналі. Я його перейменувала в «Меню». Натискаємо «Редагувати». Важливо! По-перше, у вас повинна бути саме Відкрита група, а не Сторінка. Оскільки на Сторінці такого пункту просто немає. І друге, в меню Управління співтовариством> Інформація> Матеріали повинен бути обраний пункт «Відкриті».

Крок 5.
Отже, у вкладці «Редагування» ми натискаємо на іконку фотоапарата і завантажуємо наші п'ять нарізаних картинок меню. ВКонтакте завантажить їх по-своєму, зменшивши розмір до 400 пікселів по ширині і привласнивши зображенні тег noborder. В наступному кроці нам належить трохи поправити код.

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

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

[[Photo72160765_435180097 | 510x95px; nopadding | page-15865937_43819846]] [[photo72160765_435180100 | 510x50px; nopadding | https: //www.designonstop.com/inspiration]] [[photo72160765_435180102 | 510x45px; nopadding | https: //www.designonstop. com / tutorials / beginners]] [[photo72160765_435180103 | 510x46px; nopadding | https: //www.designonstop.com/useful/photoshop]] [[photo72160765_435180104 | 510x73px; nopadding | https: //www.designonstop.com/themes] ]

Крок 7.
Ще раз повторюю, щоб відкрити це меню треба клацнути по напису «Меню». А так воно завжди знаходиться в згорнутому вигляді. Читайте коментарі до посту, там багато питань розібрано. Ну і приєднуйтесь до моїй групі В Контакте .

Оцініть, будь ласка, статтю!

1. 5
2. 4
3. 3
4. 2
5. 1

(2 голоси, в середньому: 4.5 out of 5)