Як зробити професійне меню в вконтакте? Частина 2.

Як зробити професійне меню в Вконтакте? Частина 2.
Ось що у нас вийде.

Частина 2.
Посилання на частину 1-http: //yakszrobiti.ru/recipes/16112-kak-sdelat-professionalnoe-menyu-v-vkontakte-chast-1
У цій частині ми розглянемо нарізку і код для групи Вконтакте.

Інструкція

Рівень складності: Непросто

Що вам знадобиться:

  • Photoshop CS5
  • Бажання

1 крок

Як зробити професійне меню в Вконтакте? Частина 2.
Раскройка 1 елемента.

1.Ітак у нас вже є картинка "Меню-1.jpg", відкриємо її в Photoshop.
2.Вибіраем інструмент раскройка (Клавіша "С", але будьте уважні, нам саме треба інструмент раскройка!
3.Виделяем частина картинки (Логотип ГТА, але так щоб кордони були трохи подалі від напису "Огляди"). Копіюємо (Ctrl-C).
4.Создаем документ (там автоматом повинні бути виставлені параметри!).
5.Просто вставляємо (Ctrl-V).
6.Сохраняем документ, як було описано в першій частині і називаємо його "menu-1.jpg".

2 крок

Як зробити професійне меню в Вконтакте? Частина 2.
Виділяємо 2 фрагмент



1.Ітак закриваємо документ з частиною картинки і переходимо в документ, де знаходиться все наше меню.
2.Теперь ви можете не турбується щодо, "ой, а як тепер провести рівно по лінії", тому що якщо ви будете навіть за межами картинки, і просто виберіть розкрою ближче до цієї лінії, то у вас все вийде!
3.Виделяем "Огляди" і робимо так само як і в першому кроці. І називаємо його "menu-2.jpg".

3 крок

Як зробити професійне меню в Вконтакте? Частина 2.

1.Ну от і все! Доробляємо так далі все картинку.
2.У вас має вийти 6 фрагментів!

4 крок

Тепер переходимо до частини, коли треба робити меню в Вконтакте.

5 крок

1.Создать альбом у себе на страніце.Закритий- тобто, виставляємо "Тільки я" в 2 параметрах. Назвіть альбом як хочете. Завантажуємо в нього картинки-фрагменти "menu-1 (і тд) .jpg". Повинно бути 6 фрагментів.
2.Нажімаем в нашій групі "Управління співтовариством" - "Матеріали" Подключени.Сохраняем.
3.Заходім в групу-бачимо "Свіжі новини" наводимо на них і там буде-Редагувати (клікаємо).
4.У відкрилася частини шукаємо внизу "Доступ до Сторінці" і виставляємо можливість редагування тільки руководітелям.Вибіраем вкладку "Вихідний код".

6 крок

Як зробити професійне меню в Вконтакте? Частина 2.
Посилання

1.Називаем наше меню як хочемо (замінюємо поле "Свіжі Новости")
2.Пропісиваем в великому вікні ось такий (НЕ ЗАБУДЬТЕ ВИХІДНИЙ КОД!)
[[Правила | Правила]] Отже, до рисочки ми пишемо назву сторінки в майбутньому, а після якої назва матиме посилання на цю сторінку, але це не важливо для графічного меню як у нас.
Отже створюємо ще таких:
[[FAQ|FAQ]]
[[Історія | Історія]]
[[Корисне | Корисне]]

7 крок

1.Нажімаем просмотр- і натискаємо по першій посиланням, відкриється сторінка, де буде написано наповнити содержімим.Нажімаем "Наповнити вмістом". І дивимося в адресному рядку https://vk.com/page-40131***_43914***?act=edit.Нас цікавить тільки код page-40131 *** _ 43914 *** тобто, до знака питання після / .
Копіюємо його в який-небудь текстовий документ на робочому столі.
2.І так робимо з усіма!
З.И. Тільки не забудьте який код від якої сторінки :).

8 крок

1.Возвращаемся в наше головне меню.
2.І пишемо код:
[[Photo15705 **** _ 28353 **** | 370x150px; nolink-nopadding | Огляди від Богдана]]
[[Photo157057 *** _ 283538 *** | 370x96px; nopadding | page-39409 *** _ 43879 ***]]
[[Photo157057 *** _ 283538 *** | 370x86px; nopadding | page-39409 *** _ 43880 ***]]
[[Photo157057 *** _ 283538 *** | 370x76px; nopadding | page-39409 *** _ 43879 ***]]
[[Photo157057 *** _ 283538 *** | 370x96px; nopadding | http: //vk.com/videos-39409***]]
[[Photo157057 *** _ 283538 *** | 370x96px; nopadding | page-39409 *** _ 43879 ***]]
3.Тепер пояснюю. У нас буде 3 види коду:
1) Для Картинок без посилання, для логотипу.
2) Для картинок з посиланнями на внутрішні сторінки (які ми створили)
3) На існуючі сторінки (такі як Відео, фотографії групи і тд)
1 код- [[photo15705 **** _ 28353 **** (посилання на фотографію, можна дізнатися, коли відкриваєте альбом з фотографіями і клікаєте на фото в адресному рядку з'явиться код, він нам і потрібен) | 370x150px (розмір картинки, можна дізнатися його безпосередньо, де ця картинка знаходиться, просто навести на неї) -nolink (ми позначаємо, що картинка без посилання) -nopadding (Це означає, що не буде відступів, при з'єднанні фрагментів) | Огляди від Богдана (а це текст при наведенні мишки)]]
2 код- [[photo157057 *** _ 283538 *** (зрозуміло) | 370x96px (зрозуміло) - (тут ми не пишемо nolink, тк фрагмент з посиланням) nopadding (зрозуміло) | page-39409 *** _ 43879 *** ( посилання на сторінку, ми копіювали в окремий документ]] ГОЛОВНЕ не переплутати ПОРЯДОК картинок та їх відповідність з текстом!
3 код- [[photo157057 *** _ 283538 *** | 370x96px; nopadding | http: //vk.com/videos-39409*** (тут посилання припустимо на відеозаписі групи)]]

Поради та попередження:

  • Краще робити по черзі, кожну картинку
  • Ви повинні розуміти, що ви робите






» » Як зробити професійне меню в вконтакте? Частина 2.