Создание красивого единого блока аватар и меню Вконтакте

Всем привет, с вами Роман Литвинов, дизайнер команды Ardens.pro. Сегодня я к вам пришел с гайдом-туториалом, как создать единый блок аватара и меню Вконтакте (единым целым). Для начала примеры на что это будет похожим.

Примеры:
Как создать единый блок аватара и меню Вконтакте

Еще

Второй пример аватара для группы Вконтакте и закрепа единым целым

И еще

Третий пример аватара для группы Вконтакте и закрепа единым целым

Ярко, сочно, вкусно. Далее я расскажу вам, как сделать так же.
 

Разметка аватара для группы Вк

Для старта нам нужна сетка. Чтобы её сделать, мы делаем скриншот страницы группы и забрасываем в проект, в моем случае в Photoshop.

Разметка аватарки для группы Вконтакте

После чего сочетанием клавиш CTRL+R вызываем линейки и расставляем направляющие по краям аватара и закрепа. Для того, чтобы вытянуть направляющую, нужно зажать ЛКМ на линейке и потянуть в сторону нашего макета.

 

Разметка аватарки направляющими и линейкой для группы Вконтакте

Размер аватара, который мы видим в браузере без масштабирования, 200х500 пикселей. А закреп в таком виде 395х237 пикселей.

Порезка

Мы сделали разметку, теперь приступим к порезке. Почему сейчас? Да потому, что это уже почти конец моего гайда.
Для порезки нам нужен инструмент «Раскройка» (в англ. версии «Slice tool»)

Разрезаем макет картинки
С помощью этого инструмента делаем нарезку по нашим направляющим, конкретно внутри аватара и закрепа по краям.

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

 

Размечаем размер аватара для группы вконтакте

После работы над нашим дизайном сохраняем порезанные части с помощью CTRL+SHIFT+ALT+S или Файл->Сохранить для web…

В данном окне с зажатым Shift выбираем наш аватар и закреп нажимаем сохранить
Сохраняем фото
Но тут тоже еще не все. В появившемся окне, пункт фрагменты, выбрать «Только выделенные фрагменты» и нажать сохранить. После чего фотошоп отрежет из всего макета область с аватаром и закрепом.

В папке куда мы сохраняли порезку мы увидим примерно такое.
Фото в папке выглядят так

Единый блок аватара и меню для группы Вконтакте

Смело заливаем наш аватар и закреп в тестовую группу, чтобы посмотреть результат
Получился аватар для группы Вконтакте и закреп на одном уровне

Вот так, благодаря таким действиям у вас получится единый блок аватара и меню в группах Вконтакте.

Завершение

Надеюсь мой мини-гайд был полезен и вас получится сделать ваши группы более красивыми и запоминающимися.

 

Полезные статьи на похожей тематики:

 

Забавное видео (местами и не поймешь «фотошоп» или нет)

ANIMALS ARE AWESOME TOO! HUMANS / PEOPLE ARE AWESOME SPOOF

Внимание конкурс:
Подарю набор стикеров на выбор тому, кто повторит данный урок, и у него получится сделать аватар и закреп одним целым 😉

Ставьте лайки, оставляйте комментарии, бросайте маффины или помидоры в нашей группе Ardens.pro. С вами был Роман Литвинов, до скорых встреч в наших кейсах и статьях  😉

2 комментариев к Создание красивого единого блока аватар и меню Вконтакте
  1. Оля

    Так вот как-это делается. Даже не знала как написать что искать. Спасибо

    Ответить
  2. Руслан

    а как делать меню и посты, как во втором примере, с кнопками («посмотреть»)?

    Ответить
Добавить комментарий