Как сделать профессиональное меню в Вконтакте? Часть 2.

Как сделать профессиональное меню в Вконтакте? Часть 2.
Вот что у нас получится.

Часть 2.
Ссылка на часть 1-http://akak.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.Нажимаем просмотр- и кликаем по первой ссылке, откроется страничка, где будет написано наполнить содержимым.Нажимаем “Наполнить содержимым”. И смотрим в адресной строке http://vk.com/page-40131***_43914***?act=edit.Нас интересует только код page-40131***_43914*** то есть, до знака вопроса после /.
Копируем его в какой-нибудь текстовый документ на рабочем столе.
2.И так делаем со всеми!
З.Ы. Только не забудьте какой код от какой страницы:).

8 шаг

1.Возвращаемся в наше главное меню.
2.И пишем код:
[[photo15705****_28353****|370×150px;nolink;nopadding|Обзоры от Богдана]]
[[photo157057***_283538***|370×96px;nopadding|page-39409***_43879***]]
[[photo157057***_283538***|370×86px;nopadding|page-39409***_43880***]]
[[photo157057***_283538***|370×76px;nopadding|page-39409***_43879***]]
[[photo157057***_283538***|370×96px;nopadding|http://vk.com/videos-39409***]]
[[photo157057***_283538***|370×96px;nopadding|page-39409***_43879***]]
3.Теперь объясняю. У нас будет 3 вида кода:
1)Для Картинок без ссылки, для логотипа.
2)Для картинок с ссылками на внутренние страницы(какие мы создали)
3)На существующие страницы(такие как Видео, фотографии группы и тд)
1 код- [[photo15705****_28353****(ссылка на фотографию, можно узнать, когда открываете альбом с фотографиями и кликаете на фото в адресной строке появится код, он нам и нужен)|370×150px(размер картинки, можно узнать его непосредственно, где эта картинка находится, просто навести на нее);nolink(мы обозначаем, что картинка без ссылки);nopadding(Это значит, что не будет отступов, при соединении фрагментов)|Обзоры от Богдана(а это текст при наведении мышки)]]
2 код- [[photo157057***_283538***(понятно)|370×96px(понятно);(тут мы не пишем nolink, тк фрагмент с ссылкой)nopadding(понятно)|page-39409***_43879***(ссылка на страницу, мы копировали в отдельный документ]] ГЛАВНОЕ НЕ ПЕРЕПУТАТЬ ПОРЯДОК картинок и их соответствие с текстом!
3 код- [[photo157057***_283538***|370×96px;nopadding|http://vk.com/videos-39409***(здесь ссылка допустим на видеозаписи группы)]]

Советы и предупреждения:

  • Лучше делать поочередно, каждую картинку
  • Вы должны понимать, что вы делаете

Обсуждение

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 0
0
572