Тутор по созданию меню для группы вконтакте :)

[Никита]

Попросили написать тутор "Как создать "шикарное" меню для группы вконтакте" 
"Шикарное" - это как бэ вот такое:

Спойлер

Вот пример группы которую мы бдем делать: http://vkontakte.ru/club24306144

Ну что же... Приступим :)

1. Создаём новый документ размером: Ширина - 200px, высота: 799px.
1.1. Заливаем чёрным цветом.
1.2. Загружаем в группу.

 Должно получится это:

Спойлер

2. Создаём опять документ, но только с шириной 388px, а высотой такой, какой будет у вас меню 
2.1. Заливаем его снова чёрным цветом (потом узнаете почему именно чёрным)
2.2. Заливаете в основной альбом группы НЕ через флеш загрузчик, а через стандартный загрузчик (так качество лучше)
2.3. Вставляете данную картинку в блок "Свежие новости", через "Исходный код" следующим кодом:

Код: [Выделить]

[[photo-XXX_YYY|388px;nopadding| ]]

Спойлер

XXX_YYY - Это как бы ссылка на фото... Скрин:

Спойлер

Должно получится ~следующее:

Спойлер

3. "Заскрините" ваше меню.

Спойлер

Для того что бы сделать "скрин", нажмите клавишу "Print Screen" (рядом с "Scroll Lock"), и нажмите "Ctrl+v" в "пеинте", либо в "фотошопе".

Должно получится это:

Спойлер

3.1. Дальше возмите инструмент "Выделение" и удалите со скрина группы чёрные (если бы вы взяли белое, вы бы не увидили что резать нужно  ) аватарку и меню, вот так:

Спойлер

3.2. Теперь подберите картинку (Я выбрал эту)
3.3. Откройте эту картинку в фотошопе
3.4. Скопируйте эту картинку (Ctrl+a, Ctrl+C)
3.5. Вставьте картинку на ваш скрин меню, с удалённой аватарой и меню, и переместите слой с картинкой вниз, под слой с удалённым меню и аватаркой (в моём случае, слой с удалённым меню и аватаркой называется "Layer1").
Должно получится вот так:

Спойлер

Не бойтесь что на аватарке будет свободное место снизу (как у меня), главное что не сверху, или нигде по бокам 
3.6. Объдените 2 получившихся слоя в 1
3.7. Теперь вырежте уже красивую аватарку и меню  и вставьте их на новые изоображения, вот так:

Спойлер

3.8. Теперь осталось добавить кнопки... Это делается просто. Вы берёте инструмент "Текст" и пишите на будующем меню вот так:

Спойлер

3.9. Порежте заготовку меню вот так:

Спойлер

3.10. Сохраните все нарезки в том числе и аватару группы.

4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.
4.1. Теперь начните вставлять через "Исходный код" все нарезки меню следующим кодом:

Код: [Выделить]

[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]
И вы сделали это!

Урок полностью написан мною (Nikita Rabykin)
Всем спасибо за внимание   

P.S. Если вы хотите скопировать урок, будте добры, укажите ссылку на источник (AllAvatars.ru). Уважайте чужой труд 

[Nikola Tesla]

Hy6KOy, молодец! классный урок!  у тебя даже лучше и удобней, получается, создавать графическое меню вконтакте. Для нашей группы форума создаю немного другим способом, теперь буду по твоему уроку делать

[Никита]

Да пожалуйста modesty
Если включить микроблог, над ним будет такая полоса фотографий и с помощью данного способа можно порезать фотографию на аватарку и на данную линию 

[Никита]

Если включить микроблог, над ним будет такая полоса фотографий и с помощью данного способа можно порезать фотографию на аватарку и на данную линию 

Вот так:

Спойлер

[Maksoner]

получилось спасибо... какраз недавно группу создал

[@UR@]

Maksoner, ссылку кинь в личку посмотреть результат.

[Alia]

4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.

вчера пыталась это сделать, вырезки получились примерно 370х50 , но контакт упрямо твердил что минимальный размер загружаемой картинки 100х100 что делать?

[Никита]

4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.

 

[Alia]

Hy6KOy, спасибо огромное! оч помог 

[Никита]

Hy6KOy, спасибо огромное! оч помог 

Пожалуйста 

[Alia]

Hy6KOy, я загрузила картинки, убрала рамки, поставила ссылки и размеры. НО , у меня между картинками промежутки,они не слипшиеся ((( почему? :(

[Tw]

Alia, может в кодах ошибка..?

noborder— убирает рамку вокруг фото
nopadding— убирает пробелы между фото

[Никита]

Alia,

4.1. Теперь начните вставлять через "Исходный код" все нарезки меню следующим кодом:

Код: [Выделить]

[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]

[Alia]

Hy6KOy, я слепашарка 

[Никита]

Hy6KOy, я слепашарка 

Бывает с каждым 

[Nikola Tesla]

а у всех сейчас так в ВК, что основные новости "Свежие новости" скрыты в выпадающем меню? 

[Никита]

а у всех сейчас так в ВК, что основные новости "Свежие новости" скрыты в выпадающем меню? 

Да... Но всё ровно данный способ работает)

[John]

[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]

Какую ссылку писать вместо *Ссылка* здесь никак не могу роздуплится

вот ссылка на мою группу club21406888

[Никита]

Да любую ссылку!

PS Чаще ссылку какю-нибудь страницу ;)

[Никита]

Увы, но теперь такое меню не работает. То есть меню теперь не спрятано под спойлер, а теперь это уже ссылка. То есть меню откроется на новой странице D:
Так изуродовали контакт почти 18 минут назад D:
Добавлено: 14 Август 2011, 00:55:27Ураа, всё работает