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

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Попросили написать тутор "Как создать "шикарное" меню для группы вконтакте"  *smajlik*
"Шикарное" - это как бэ вот такое:
Спойлер

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

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

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

 Должно получится это:
Спойлер

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

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

3. "Заскрините" ваше меню.
Спойлер
Для того что бы сделать "скрин", нажмите клавишу "Print Screen" (рядом с "Scroll Lock"), и нажмите "Ctrl+v" в "пеинте", либо в "фотошопе".
Должно получится это:
Спойлер
3.1. Дальше возмите инструмент "Выделение" и удалите со скрина группы чёрные (если бы вы взяли белое, вы бы не увидили что резать нужно  *wink*) аватарку и меню, вот так:
Спойлер
3.2. Теперь подберите картинку (Я выбрал эту)
3.3. Откройте эту картинку в фотошопе
3.4. Скопируйте эту картинку (Ctrl+a, Ctrl+C)
3.5. Вставьте картинку на ваш скрин меню, с удалённой аватарой и меню, и переместите слой с картинкой вниз, под слой с удалённым меню и аватаркой (в моём случае, слой с удалённым меню и аватаркой называется "Layer1").
Должно получится вот так:
Спойлер
Не бойтесь что на аватарке будет свободное место снизу (как у меня), главное что не сверху, или нигде по бокам  *smile*
3.6. Объдените 2 получившихся слоя в 1
3.7. Теперь вырежте уже красивую аватарку и меню  *victory* и вставьте их на новые изоображения, вот так:
Спойлер
3.8. Теперь осталось добавить кнопки... Это делается просто. Вы берёте инструмент "Текст" и пишите на будующем меню вот так:
Спойлер
3.9. Порежте заготовку меню вот так:
Спойлер
3.10. Сохраните все нарезки в том числе и аватару группы.

4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.
4.1. Теперь начните вставлять через "Исходный код" все нарезки меню следующим кодом:
[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]
И вы сделали это! *victory*

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

P.S. Если вы хотите скопировать урок, будте добры, укажите ссылку на источник (AllAvatars.ru). Уважайте чужой труд  *magic*
« Последнее редактирование: 13 Декабрь 2011, 22:23:29 от Mira »

Форум аватар


Оффлайн Nikola Tesla

  • Землянин
  • *****
  • Сообщений 6462
  • Респектов +3559
  • Репутация 1361
  • Пол: Мужской
    • Просмотр профиля
Hy6KOy, молодец! классный урок!  *super* у тебя даже лучше и удобней, получается, создавать графическое меню вконтакте. Для нашей группы форума создаю немного другим способом, теперь буду по твоему уроку делать *smile*

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Да пожалуйста modesty
Если включить микроблог, над ним будет такая полоса фотографий и с помощью данного способа можно порезать фотографию на аватарку и на данную линию  *smile*

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Если включить микроблог, над ним будет такая полоса фотографий и с помощью данного способа можно порезать фотографию на аватарку и на данную линию  *smile*

Вот так:
Спойлер

Оффлайн Maksoner

  • Постоялец
  • ***
  • Сообщений 137
  • Респектов +41
  • Репутация 19
  • Пол: Мужской
    • Просмотр профиля
получилось спасибо... какраз недавно группу создал

Оффлайн @UR@

  • Не@нГел-
  • Хранительница
  • *
  • Все к лучшему)))

  • Сообщений 2967
  • Респектов +854
  • Репутация 461
  • Пол: Женский
    • Просмотр профиля
Maksoner, ссылку кинь в личку посмотреть результат.

Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.

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

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
4. Поставьте аватару на аватару группы и загрузите все нарезки меню в альбом через стандартный загрузчик.

 *victory*


Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
Hy6KOy, спасибо огромное! оч помог  *smile*

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Hy6KOy, спасибо огромное! оч помог 
Пожалуйста  *victory*

Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
Hy6KOy, я загрузила картинки, убрала рамки, поставила ссылки и размеры. НО , у меня между картинками промежутки,они не слипшиеся ((( почему? :(
« Последнее редактирование: 07 Апрель 2011, 17:02:07 от Alia »

Оффлайн Tw

  • Аватарщица
  • *
  • Сообщений 4291
  • Респектов +6349
  • Репутация 1832
  • Пол: Женский
    • Просмотр профиля
Alia, может в кодах ошибка..?

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

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Alia,
4.1. Теперь начните вставлять через "Исходный код" все нарезки меню следующим кодом:
[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]


Оффлайн Alia

  • И в этом вся я...
  • Аватарщица
  • *
  • Сообщений 2562
  • Респектов +856
  • Репутация 1011
  • Пол: Женский
    • Просмотр профиля
Hy6KOy, я слепашарка  *modesty*

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Hy6KOy, я слепашарка 
Бывает с каждым  *victory*

Оффлайн Nikola Tesla

  • Землянин
  • *****
  • Сообщений 6462
  • Респектов +3559
  • Репутация 1361
  • Пол: Мужской
    • Просмотр профиля
а у всех сейчас так в ВК, что основные новости "Свежие новости" скрыты в выпадающем меню?  *scratch_one-s_head*

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
а у всех сейчас так в ВК, что основные новости "Свежие новости" скрыты в выпадающем меню? 
Да... Но всё ровно данный способ работает)

Оффлайн John

  • Наблюдатель
  • Сообщений 1
  • Респектов 0
  • Репутация 0
    • Просмотр профиля
[[photo-XXX_YYY|388px;nopadding|*Ссылка*]]

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

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

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Да любую ссылку!

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

Оффлайн НикитаАвтор темы

  • или Никита Романович, или
  • Продвинутый ветеран
  • *******
  • Сообщений 1320
  • Респектов +262
  • Репутация 104
  • Пол: Мужской
    • Просмотр профиля
Увы, но теперь такое меню не работает. То есть меню теперь не спрятано под спойлер, а теперь это уже ссылка. То есть меню откроется на новой странице D:
Так изуродовали контакт почти 18 минут назад D:

Добавлено: 14 Август 2011, 00:55:27
Ураа, всё работает  *smile*
« Последнее редактирование: 14 Август 2011, 00:55:27 от Nikito Savich »

 

Видео урок по созданию отображение текста в Photoshop

Автор Toshiro

Ответов: 0
Просмотров: 2266
Последний ответ 06 Сентябрь 2011, 14:49:07
от Toshiro
Меню для группы вконтакте

Автор Marysya12

Ответов: 8
Просмотров: 3077
Последний ответ 20 Февраль 2011, 15:04:49
от Никита