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

Примеры:

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

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

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

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

Порезка

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

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

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

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

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

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

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

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

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

Завершение

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

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

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

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

Ставьте лайки, оставляйте комментарии, бросайте маффины или помидоры в нашей группе

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

Что такое аватар

«ВКонтакте» предоставляет широкой выбор услуг как для начинающих предпринимателей, так и для целых организаций, дабы они размещали какие-то рекламные ролики, создавали обсуждения и оповещали свою аудиторию о возможных акциях. Аватар же является лицом группы, на котором можно разглядеть то, что на самом деле вы пытаетесь предложить аудитории, заинтересовавшейся тем или иным товаром.

Может, кто-то не придает особого внимания аватару, но, как бы то ни было, он является основной частью созданной группы. Так, если он будет слишком грустным, то вряд ли кто-то захочет стать здесь подписчиком. Часто можно заметить, что раскрученные группы ставят на аватар фото молодых девушек или же изображения каких-то обычных предметов, которые в мелком формате кажутся интересными и привлекательными, а когда человек заходит на страничку и видит картинку в полную величину, они способны вызвать улыбку. Тем самым сразу складываются положительные впечатления о группе.

Но новички часто не знают, какие требуются размеры для аватарки группы "ВКонтакте". Чтобы помочь им, мы подробно об этом расскажем, а также дадим советы в выборе изображения.

Идеальный размер аватарки группы "ВКонтакте"

У «ВКонтакте» имеются собственные правила, которым приходится следовать, иначе могут возникнуть проблемы. Это относится и к выбору аватарки. Все мы знаем, что у названной соцсети свой особенный стиль, из чего вытекает, что максимальный размер аватарки «Вконтакте» составляет 200 пикселей в ширину и 500 в высоту.

Это идеальный размер, чтоб разместить на изображении человека в полный рост. Именно в пределах этих значений и требуется подбирать картинку для сообщества.

Какой выбрать аватар

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

Любой человек, зашедшей в сообщество или группу, сразу же обращает внимание на аватар и на подсознательном уровне анализирует эмоциональную составляющую, которую несет обложка. Если на аватаре изображено и преобладают темные тона, то вряд ли в сообщество подпишется человек, который радуется жизни и пришел за позитивом, хотя если группа рассчитана на привлечение внимания к какой-либо проблеме, то такой вариант будет в самый раз.

Есть несколько моментов, которые необходимо учитывать:

1. Аватар обязательно должен иметь хоть какой-то смысл, наталкивающий на жанр сообщества, а если точнее, то на его контент.
2. Достаточно широко распространено использование фото знаменитостей на аватарах или красивых девушек, принимающих достаточно откровенную позу. Как правило, интерес у мужчин к этой страничке будет достаточно велик, а если же еще человек на аватаре улыбается, то это уже на подсознательном уровне оказывает позитивное влияние. Трудно не улыбнуться, когда друзья смеются, не так ли?
3. Не стоит использовать всего лишь один логотип сообщества. Такую ошибку допускают достаточно неопытные администраторы групп. Лучше возьмите и добавьте туда всего и побольше. Люди невольно задержатся, рассматривая аватар и размышляя над связью между предметами, которую вы можете вложить туда.

Заключение

Следует отметить, что решение создать свое сообщество «ВКонтакте», является правильным для начинающих организаций или бизнесменов, у которых нет денег на сайт. Если следовать правилам, описанным выше, а также знать подходящие размеры для аватарки группы "ВКонтакте", то проблем с созданием группы или сообщества не возникнет.

Социальные сети прочно заняли важное место в жизни практически каждого представителя молодого поколения. Общение, игры, черпание интересной и важной информации – это далеко не все, что получают пользователи Вконтакте.Они с удовольствием делятся историями из жизни (реальными и выдуманными), предлагают друзьям оценить и прокомментировать новые фотографии, чтобы похвастаться произошедшими событиями. И установка аватарки (главной фотографии, которая выводится на основной странице) становится важным процессом.

Сейчас красивым фото мало кого удивишь – благодаря разнообразию различных программ в интернете можно сделать настоящее творение искусства, частично или полностью изменив внешность. А те, кто еще не знает как сделать крутую аватарку для Вконтакте, могут воспользоваться несколькими советами.

Классная аватарка без редактирования

Сложнее всего сделать идеальную фотографию без ее обработки в специальных программах. Но если вы не владеете навыками Фотошопа или хотите сделать естественную, но при этом крутую аватарку, то вам понадобится следующее:

1. Фотокамера
2. Вентилятор
3. Лампа
4. Хорошее настроение.

Запомните одно правило: никогда, ни при каких условиях не фотографируйтесь в плохом настроении. Ваша поза окажется скованной, улыбка поддельной, а глаза тусклыми. Если вам нужна действительно крутая аватарка, отправляйтесь на фотосессию только в хорошем настроении.

Второе правило: не берите в качестве фотографа неопытного друга или человека в состоянии алкогольного опьянения (даже легкого). Из такой затеи ничего хорошего не выйдет, лучше купите штатив и на него установите фотокамеру. Это позволит стараться над созданием аватарки неограниченное количество времени, не слушая недовольство подруги.

Итак, камера готова, настроена под натуральное освещение (ориентируясь на время суток, установите соответствующие настройки в меню техники). Дополнительно вам потребуется еще один источник света, который будет направлен на вас. Для этого подойдет обычный торшер и даже настольная лампа, установленная таким образом, чтобы ваш торс освещался полностью.

А теперь о позах

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

Ваше лицо должно быть расслаблено, а улыбка естественной. Не пытайтесь сделать из себя нечто сексуально-вожделенное, прищурив глаза и приоткрыв рот. Лучше будет смотреться фото, на котором девушка озаряет своей красивой, лучезарной улыбкой, отображая свой мягкий характер.

Делаем крутую аватарку в программе

Сейчас в интернете можно найти множество программ для редактирования фотографий. Пользоваться ими очень удобно, достаточно загрузить свое лучшее фото и создать нужные эффекты. Чтобы аватарка получилась классной, применяйте следующие опции:

• Удаление красных глаз (это обязательно);
• Эффект состаривания фото – подходит для некачественных снимков, когда нужно скрыть недостатки на лице;
• Черно-белое фото – решает сразу несколько проблем, в том числе устранение красных глаз, пигментных пятен на лице, акне, недостатки фигуры;
• Изменение размера – вы можете обрезать фото по своему желанию, оставив только лицо или устранив некрасивый фон снизу или сверху снимка.

Редактирование фото

Если же вам совсем не нравится фотография, то вы можете изменить ее полностью. Для этого скачайте любую программу (Photoshop, PhotoScape и т.д), загрузите фото и начинайте творить. Данные утилиты позволяют вносить коррективы в лицо, например, изменять цвет глаз, форму носа, делать цвет кожи ровным, с эффектом загара, устранять некрасивые пятна. В программах редактирования фото вы можете поменять фон, установить рамку или переместить себя на морское побережье.

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

Профессиональная аватарка

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

При работе с различными программами для редактирования фото не забывайте сохранять готовые результаты. Вдохновившись новыми идеями, вы можете настолько поглотиться процессом, что потеряете все сделанные аватарки из-за собственной невнимательности. И не спешите критиковать готовые снимки – посмотрите на них завтра, возможно, что ваш взгляд изменится, и вы влюбитесь в собственные фотографии.

Аватарка "Вконтакте" является очень важным элементом не только личной страницы, но и группы. Самостоятельно сделать ее для группы не составит труда. Давайте разберемся, как именно эту идею воплотить в жизнь.

Что должна содержать аватарка?

Перед тем как приступать к изготовлению аватара для группы, вы должны учесть несколько факторов, которые должны повлиять на первое впечатление от группы.

• Фон - не будет лишним подобрать его под тематику группы;
• Логотип;
• Девиз - если он имеется;
• Информация - например, краткое описание деятельности, если это требуется. Также обязательно нужно указать сайт/скайп/телефон для связи или получения дополнительной информации.

Все эти составляющие должны гармонично располагаться на аватарке группы, чтобы посетителям было удобно читать, и они в случае чего могли бы оперативно связаться с вами.

Процесс изготовления аватарки

Порядок действий:

1. Открываете выбранное вами изображение в Photoshop.
2. Накладываете на него логотип. Как сделать логотип, вы можете узнать из статьи .
3. Распределяете другую информацию сайт/телефон/скайп, краткое описание;
4. Сохраняете. Не забывайте следить за тем, как выглядит аватарка для группы "Вконтакте" в реальном размере - это поможет избежать многих ошибок.
5. Теперь, когда аватарка готова, открываем нашу группу и нажимаем на изображение (на уже готовое или на пустую картинку) и выбираем "Загрузить изображение". Готово!

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

Секреты Вконтакте – это новый цикл публикаций блога, в которых я раскрою тонкости создания сообществ и групп социальной сети Вконтакте. Я покажу вам как технические так и организационные моменты. Вместе мы научимся создавать красивые и популярные сообщества в крупнейшей социальной сети рунета. Кстати, если у вас еще нет сообщества Вконтакте, смотрите это видео.

Сегодня я покажу, как создать красивый единый блок “Аватар+Меню”. Вы наверняка видели вот такие красиво оформленные группы, где меню и аватар представляют собой одну картинку.

Смотрится весьма красиво, не правда ли? Не смотря на кажущуюся сложность сделать такой блок в своей группе сможет каждый. При этом вам не нужно знание секретов Фотошопа . Я покажу, как сделать это в обычном графическом редакторе Paint , который есть на каждом компьютере.

Итак, нам понадобятся:

• картинка, из которой мы сделаем аватарку группы и меню;
• графический редактор Paint;
• программка Rect, для измерения ширины и высоты меню.

Открываем редактор Paint и нашу заготовленную картинку. Картинка должна быть не более 799 px по высоте и не менее 600 px по ширине. Стрелкой №1 на скриншоте я указал место, где можно глянуть текущие размеры картинки. А стрелкой №2 – инструмент, которым можно эти размеры изменить.

Получив подходящие нам размеры картинки, вырезаем из нее аватарку. Для этого используем инструмент “Выделить” (стрелка №3). Выделяем область шириной 200 px (стрелка №4 показывает, где можно следить за шириной выделяемой области). Вырезаем эту часть картинки (стрелка №5).

Не закрывая текущий Paint, запускаем еще один. Вставляем в него нашу вырезанную часть картинки. Это и будет аватаркой нашей группы Вконтакте. Делаем на ней привлекательно-завлекательные надписи и сохраняем как изображение в формате PNG.

После этого аватар уже можно загрузить в нашу группу Вконтакте.

Теперь нам необходимо узнать точный размер блока меню. Для этого воспользуемся полезной и простой программкой для вебмастера Rect . Программа не требует установки, не создает и не модифицирует никакие файлы. >>> Скачать программку Rect <<<

Идем на страницу нашей группы и замеряем расстояние в пикселях от кромки поля с заголовком “Обсуждения” или “Опросы” (смотря что у вас будет идти первым после ссылки на меню группы) до нижнего края аватарки. Ширину и высоту программа Rect нам покажет посредине окошка. Кстати, ширина блока меню должны быть исключительно 388 пикселей.

Итак, нужная в данном случае высота – 295 пикселей. Кстати, советую вам заранее подготовить описание вашей группы, потому как от его объема будет зависеть высота блока меню.

Возвращаемся в Paint с оставшейся картинкой и вырезаем из правого нижнего угла блок меню размером 388*295 пикселей.

Вставляем вырезанную картинку в заранее открытый новый Paint и вписываем в нее текст ссылок меню. Как оформить текст, смотрите сами. Редактор позволяет вставлять различные фигуры и маркеры. Я же придерживаюсь мнения, что секрет хорошего дизайна – это минимализм, будь то Вконтакте или обычный сайт. По этой причине я использую обычный подчеркнутый текст. Именно такими мы привыкли видеть ссылки.

Теперь уже знакомыми нам инструментами “Выделить” и “Вырезать” выделяем и вырезаем каждый пункт меню. Вставляем картинку каждого пункта в новый Paint и сохраняем как изображение в формате PNG.

Итого, у нас должно получится 5 картинок, составляющие одно целое. Почему пять, если ссылок 4? Нижнюю часть я вырезал как отдельную картинку без ссылки. Эти картинки мы загружаем в отдельный альбом нашей группы Вконтакте . Они нам очень скоро понадобятся.

Переходим на главную страницу группы и жмем на ссылку “Редактировать” в строке меню. Она должна появиться там при наведении курсора мышки.

В редакторе меню включаем режим wiki-разметки. И вписываем туда следующие строки.

UPD: Внимание! Сейчас, чтобы все отображалось корректно, необходимо поменять местами тег nopadding и размеры картинки. Точку с запятой соответственно ставить после размеров картинки.

Каждая строка соответствует одной из составных картинок блока меню.

В коде я выделил:

• розовым – id картинки. Где его взять? В адресной строке вашего браузера при просмотре картинки.
• зеленым – размеры картинки и команда “nopadding”, которая показывает картинку без отступов.
• желтым – ссылка на желаемую страницу группы.

Наличие такого меню, конечно же, не является причиной популярности сообщества. Но, на мой взгляд, делают страницу группы гораздо приятнее для участников и гостей. Кстати, если вы только начинаете свой путь администратора Вконтакте, вам будет полезна публикация Администратор социальных сетей .

Данное руководство не актуально для публичных страниц Вконтакте. Рекомендую воспользоваться этим мануалом для пабликов –