Як самому зробити аватарку для групи вконтакті Секрети Вконтакті. Створення єдиного блоку "Аватар і Меню"

У цій статті ми розповімо, як зробити широку горизонтальну аватарку в групі вконтакті. На зрозумілому прикладі покажемо, як робиться широка аватара, а також дамо корисні практичні рекомендації.

Насамперед, відразу хочеться сказати про важливість такого графічного елемента групи вк, як широка горизонтальна аватарка. У порівнянні зі звичайною вертикальною аватаркою вконтакте, горизонтальна має велику площу і відображається на мобільних пристроях, що дозволяє використовувати її з більшою ефективністю.
Перед безпосередньою установкою широкої аватари хочу звернути вашу увагу на іконку вашої групи, яка відображається зліва навпроти кожного посту. Береться вона безпосередньо з мініатюри стандартної вертикальної аватари. По можливості вона має бути в одному стилі з майбутньою шапкою. Якщо шапка планується в іншому стилі, то спочатку завантажте звичайну аватарку, а потім переходьте до широкої горизонтальної.

Отже, перейдемо безпосередньо до розгляду процесу встановлення широкої аватарки в контакті.

Інструкція, як створити горизонтальну аватарку у групі ВК.

1) Готуємо широку аватарку розміром 1590×400 пікселів у графічному редакторі.
Широка горизонтальна аватарка – це обличчя вашої групи, яке формує перше враження та ставлення відвідувачів. Підійти до створення аватарки необхідно з особливою уважністю, це визначить подальший успіх вашої спільноти.
Наприклад, розглянемо аватарку, яку ми підготували для демонстрації:

Основні елементи, які зазвичай використовуються в шапці:

Логотип– Задає основну графічну асоціацію із групою.
Заголовок– Коротко та доступно розповідає, про що і для кого гурт.
Графічні елементи із описамидають більш повну інформацію про те, що пропонує група, які у групи переваги та особливості.

Розміщувати основні елементи слід ближче до центру і донизу, відступаючи від верхньої межі хоча б 100 пікселів і від бічних кордонів хоча б 220. Так, ви забезпечите нормальне відображення широкої аватарки на мобільних пристроях.

2) Переходимо до управління спільнотою.

3) Натискаємо Завантажити, навпроти поля обкладинка спільноти.

4) Завантажуємо заздалегідь створену горизонтальну аватарку.

5) Перевіряємо коректність відображення аватарки у групі з комп'ютера та мобільного пристрою.

Як бачите, зробити широку горизонтальну аватарку зовсім нескладно. Важливо знати лише деякі особливості.
Також хочу звернути вашу увагу, що аватарка не єдиний графічний елемент визначальний стиль групи. Загальну картину формують оформлення постів, альбомів, товарів та інших розділів вашої групи. Це також слід враховувати.

Якщо вам знадобиться допомога з написанням постів для групи, складанням карток товарів та написанням такого контенту, ви можете звернутися до нас у рамках .

Також ми можемо допомогти з дизайном групи. За допомогою створення широкої горизонтальної аватарки-шапки, стандартного вертикального логотипу групи, вікі меню, брендованої графіки та інших елементів дизайну ви можете звернутися до нас.
Для замовлення послуг та з усіх питань пишіть.

Сьогодні ми з'ясуємо актуальний розмір аватарки для групи Вконтакте. Прочитавши статтю, ви не тільки отримаєте відповідь на це питання, але й зможете завантажити PSD шаблон красивої аватарки та банера, виконані в єдиному стилі.

З урахуванням усіх останніх змін максимальний розмір аватарки для групи Вконтакте становить 200×500 px. Варто зазначити, що для отримання максимальної якості потрібно завантажувати зображення розміром у 2-3 рази більше. Тоді буде менша помітна втрата якості картинки після завантаження її в ВК.

Головне правило - дотримуйтесь пропорції ширини до висоти: 2 до 5 відповідно.

Розмір вам відомий, залишилося розібратися в тому, коли варто використовувати всю доступну висоту, а коли можна зробити аватарку меншої висоти. І залежить це від кількох факторів:

Тематика чи ніша;
Пропонований продукт/послуга;
Дизайн

Якщо у вас низькоконкурентна та зрозуміла всім ніша, то цілком вистачить розмістити логотип, назву компанії та іноді коротке пояснення діяльності.

Назви «Підслухано | Уфа» чи «Новини спорту | Уфа» не потребують пояснення - все і так зрозуміло. А ось зображення логотипу з назвою інтернет-магазину потребує пояснення, що вказує на товар, який у ньому продається: «інтернет-магазин дитячого одягу».

Залежно від специфіки запропонованого продукту або послуги, може знадобитися додаткове місце під вигоди. За рахунок перерахування вигідних для клієнта умов виходить виділитися і натомість конкурентів. Але через них розмір аватарки доведеться збільшувати.

Я не вважаю, що це погано. Якщо щось допомагає збільшити конверсію, потрібно використати таку можливість.

Граючи з дизайном, можна отримати гарний і робочий варіант аватарки максимального розміру, розмістивши при цьому мінімум деталей на ній.

Такий підхід є прийнятним для розважальних спільнот або груп приватних фотографів. А комерційним спільнотам із високим рівнем конкуренції слід максимально ефективно використовувати доступний розмір аватарки.

Шаблон аватарки та банера

Ми створили шаблон, який можна завантажити за посиланням нижче. З ним реально зробити професійну аватарку самостійно, але вона не буде унікальною. Хоча це не означає, що вона не працюватиме, але можливо варто задуматися про індивідуальність і прочитати нашу бонусну пропозицію.

Бонус

Усім, хто дочитав статтю до цього параграфа та вирішить у нас, ми пропонуємо знижку 200 рублів. При замовленні у тексті листа вкажіть цей код: HWC-DEZiGN-200. Код діє тільки на одне ваше замовлення.

- Основа для ефективного просування. Красива аватарка та обкладинка здатні збільшити конверсію щодо вступу користувачів до спільноти, а також продажу, якщо спільнота комерційна.

Якщо ви хочете підібрати готове зображення, то вам слід знати, дізнатися про розмір аватарки для групи Вконтакте.

З усіх наявних пунктів необхідно виділити такі:

Зображення повинні мати високу якість. Усі елементи мають бути чіткими, без розмиття.
На зображенні не повинно бути водяних знаків: логотипів інших компаній або спільнот, стокових сервісів тощо.
Зображення, що підбирається, повинно мати сенс і правильний розмір. Не потрібно вибирати зображення автомобіля марки BMW у спільноті, присвяченій Mercedes і навпаки. Аватар – це обличчя вашої спільноти. Він дає можливість користувачам соціальної мережі зрозуміти спрямованість спільноти, її посилання та тематику.

Як зробити аватарку для групи ВК самостійно правильного розміру? І тому існує безліч графічних редакторів. Найзручнішим та найпопулярнішим є AdobePhotoshop. Програма дозволяє створювати ави будь-якого розміру у високій якості. Все це досягається завдяки величезному вибору допоміжних інструментів редактора.

Для початку роботи потрібно створити новий проект у фотошопі.

Щоб створити велику картинку потрібно встановити наступні розміри у вікні:

Ширина: 250px

Висота: 450px

Після цього тиснемо кнопку "Створити".

Перед нами з'являється робоча область, де відбувається процес створення вертикального аватара.

Для обкладинки необхідно вказати такі розміри:

Ширина: 1590px

Висота: 400px

У результаті ми отримуємо картинку у горизонтальному положенні.

Як фон для ави скачайте будь-яке відповідне зображення за розміром високої якості і помістіть його на шаблон. Для цього перейдіть в меню "Файл" - "Відкрити".

Щоб додати текст, потрібно вибрати інструмент з іконкою літери «Т» на панелі зліва.

Після цього виберіть відповідний шрифт та його розмір.

Розташувати текст можна у будь-якій області картинки.

Якщо ви не хочете щоразу створювати нові проекти, збережіть ці шаблони у форматі PSD. Для цього перейдіть в меню "Файл" - "Зберегти як"

Після цього ви можете завжди відкривати ці шаблони та створювати нові зображення.

У посібнику вказано відповідні розміри для аватарки спільноти. Вони ідеально поєднуються із звичайним, класичним форматом, а також новим дизайном ВКонтакті з обкладинкою.

Під класичним варіантом мається на увазі оформлення такого типу:

Новий дизайн з обкладинкою виглядає так:

Створення аватарки на мобільних пристроях

Якщо ви хочете створити аву для спільноти ВК з пристроїв на iOS або Android, вам варто звернути увагу на спеціалізовані онлайн-сервіси.

Як приклад розглянемо сервіс Vkprofi. Для роботи з сайтом потрібно авторизуватися через обліковий запис ВКонтакте. Після цього вам буде доступна можливість створити обкладинку, аватарку, меню та картинки для постів ВК.

Перейдіть до розділу «Аватар».

Перед вами з'являється можливість додавати картинки, текст та спрайти у виділеній синім кольором області.

Таким чином, створюється класичне оформлення наступного формату.

Щоб створити обкладинку, перейдіть до відповідного розділу.

Графічні елементи та текст додаються у правій колонці.

Для збереження фінального варіанту необхідно сплатити ліцензію. Один день ліцензії коштує 50 грн.

Використання шаблонів

Якщо ви хочете знайти варіанти готових аватарок, зверніть увагу на готові шаблони. Завантажити макети у форматі PSD можна на наступних майданчиках:

You-ps.ru– Великий вибір шаблонів для будь-якої тематики. Крім вихідних, на сайті розміщено корисні уроки з використання Photoshop. Завантаження файлів з you-ps здійснюється безкоштовно.

PS-Magic.ru. Ще один корисний сайт із вихідниками оформлень у форматі PSD. Як і на You-ps.ru тут ви можете знайти не тільки аватарки, але й уроки з їхнього редагування та створення у Фотошопі.

Замовлення шаблонів у фрілансерів

Якщо на наведених вище майданчиках ви не знайшли відповідного варіанту оформлення, то в такому разі зверніться за допомогою до професійних дизайнерів. Знайти веб-дизайнер дуже просто. Для цього існує безліч фріланс-бірж із тисячами виконавців.

Kwork. Усі послуги на сайті продаються по 500 грн. Сотні виконавців готові створити для вас оформлення для групи в найкоротший термін.

. Найпопулярніша біржа фрілансерів у СНД. Реєструйтеся на сайті як замовник і публікуйте завдання створення аватарки для свого паблика. Після цього на створене завдання почнуть відгукуватися виконавці. Вибирайте кандидата, що вам сподобався, і починайте з роботу з ним.

Weblancer. Аналогічна біржа з пошуку фрілансерів. Розміщуйте замовлення і чекайте на відгуки від потенційних виконавців на створення шаблону.

Перед вами з'явиться великий список із сотень груп на цей запит. Усі вони належать агентствам та фрілансерам, які займаються оформленням спільнот. У більшості груп ви можете не тільки замовити розробку шаблону, але й знайти готові варіанти, доступні для безкоштовного скачування.

Інструкція

Відкрийте програму Adobe Photoshop та створіть новий документ. Відразу задайте потрібну ширину в 200px і висоту 500px. Дозвіл встановіть більше, а ось бітність колірного режиму не така важлива, можете залишити її за замовчуванням 8 біт.

Почніть із фону. Ви можете просто залити його кольором, використовуючи інструмент "Заливка" на панелі зліва, або застосувавши "Градієнт". В даному випадку як основний фон була використана картинка. Щоб вона не спотворювалася під час вписування, затисніть Ctrl і тягніть за куточок, збільшуючи або зменшуючи зображення до потрібного розміру.

Вставте фото, яке максимально відображає вашу сутність або те, ким ви хочете постати перед відвідувачами своєї сторінки. Все-таки саме по аватарі судитимуть про вас насамперед. Якщо фотографію ви ставити не хочете, то на фоні можна написати нік. У цьому випадку варто пограти з текстом – використовуйте додаткові шрифти, змінюйте прозорість та ступінь заливки, властивості самого шару. В даному випадку були використані ефекти тіні та внутрішнього свічення, а накладення шару вибрано затемнення.

Додайте художні ефекти за допомогою пензлів. Ви можете скористатися стандартними або знайти набори спеціалізованих сайтів. Перед використанням пензля створіть новий шар, натиснувши Shift+Ctrl+N.

Щоб додати рамку, створіть ще один шар. Потім оберіть інструмент "Прямокутне виділення" і за його допомогою виділіть не всю картинку, а відступивши від країв на пару міліметрів. Натисніть Shift+Ctrl+I, виділення інвертується. Залийте його білим, а в способі накладання встановіть "М'яке світло".

Якщо ви хочете отримати якісне зображення, працюйте у професійному графічному редакторі. Якщо ви не вмієте ним користуватися, відкрийте фотографію або картинку в Paint і обріжте приблизно так, щоб зображення вписалося в потрібні рамки. Незручність вбудованого редактора в тому, що точно встановити необхідні розміри вам не вдасться.

Подовження фотографії – нескладна процедура, але все ж таки вимагає деяких навичок. Зокрема, займаючись цим в Adobe Photoshop, варто знати існування команди «Вільне трансформування».

Вам знадобиться

- Русифікована версія Adobe Photoshop CS5

Інструкція

Запустіть редактор Adobe Photoshop CS5 та додайте до нього необхідну фотографію: натисніть «Файл» > «Відкрити» (або клацніть гарячі клавіші Ctrl+O), виберіть потрібний файл і клацніть «Відкрити». Усно позначимо цей документ як Д1.

Натисніть «Зображення» > «Розмір зображення». У вікні будуть поля "Ширина" і "Висота", запам'ятайте ці значення - це розміри зображення, яке ви додали у Photoshop.

Щоб відкрити вікно створення нового документа, натисніть пункт меню «Файл» > «Створити» (або за допомогою гарячих клавіш Ctrl+N). Висоту залиште такою самою, як у фотографії, розміри якої ви визначили в другому кроці цієї інструкції, а ширину зробіть приблизно в півтора рази більше. Натисніть "OK". Усно позначимо цей документ як Д2.

Виберіть інструмент «Переміщення» (гаряча клавіша V), перетягніть зображення з Д1 на Д2 та вирівняйте його по лівому краю.

Викличте команду вільної трансформації. Зробити це можна двома способами. Перший – натисніть пункт меню «Редагування» > «Вільне трансформування». Другий – клацніть гарячі клавіші Ctrl+T. По сторонах та кутах шару з'являться прозорі квадратні маркери. Наведіть курсор на той з маркерів, який знаходиться праворуч зображення. Курсор перетвориться на взаємну стрілку. Затисніть ліву кнопку і потягніть мишу вправо до самого краю, розтягуючи зображення. Натисніть клавішу Enter, щоб закріпити результат.

Щоб зберегти результат, натисніть «Файл» > «Зберегти як» (або використовуйте гарячі клавіші Ctrl+Shift+S), виберіть шлях для майбутнього файлу, впишіть його ім'я, у полі «Тип файлів» вкажіть Jpeg і натисніть «Зберегти».

Щоб скасувати попередню дію, використовуйте клавіші Ctrl+Z. Щоб скасувати більше однієї дії, використовуйте вікно «Історія» (пункт меню «Вікно» > «Історія»).

Відео на тему

Сьогодні складно знайти студента, який не зареєстрований у найбільшій у Росії соціальній мережі «ВКонтакте». Не кажучи про складову даного ресурсу, що розважає, він нерідко виявляється корисним для зв'язку з друзями і знайомими по ВНЗ, спілкування з ними і вирішення спільних питань. Про те, як вказати «ВКонтакте», у якому вищому навчальному закладі ви навчаєтесь, йтиметься далі.

Вам знадобиться

доступ до Інтернету

Інструкція

Зайдіть на свій обліковий запис «ВКонтакте». Для цього введіть в адресному рядку свого браузера vkontakte.ru, у сторінці вкажіть свій e-mail (або логін) і пароль і натисніть «Увійти».

Для того, щоб перейти на сторінку редагування своєї вищої освіти, натисніть на напис «Редагувати», що знаходиться навпроти заголовка «Освіта» у правій частині сторінки, або клацніть на кнопку «Ред.», розташовану поруч із написом «Моя сторінка» у лівому верхньому кутку та виберіть розділ "Освіта". Потім натисніть на вкладці «Вища освіта», розташованою праворуч від активної вкладки «Середня освіта».

Тепер можна братися безпосередньо до вибору свого вузу. Для цього по черзі виберіть: країну, в якій ви навчаєтесь, місто, де знаходиться ваш ВУЗ, самий вищий навчальний заклад, форму навчання, ваш статус і дату випуску. Після цього натисніть "Зберегти"

За потреби ви можете вказати на своїй сторінці більше одного вищого навчального закладу. Для цього після збереження першого ВНЗ натисніть на напис «Додати освіту» і знову зробіть усі дії, описані в минулому пункті.

Після вибору ВНЗ, в яких ви навчалися або навчаєтеся, поверніться на свою сторінку і переконайтеся, що під заголовком «Освіта» з'явилася додана вами інформація.

Зверніть увагу

Щоб додати вищий навчальний заклад «ВКонтакте», вам необхідно знати його абревіатуру.

Корисна порада

Пам'ятайте дані для входу на сторінку «ВКонтакте».

Залучити на свою сторінку в соціальній мережі багато відвідувачів або заявити про себе на форумі можна за допомогою ефектного аватара або голосного ніка. Вміло підібрані, ці атрибути зможуть висловити ваше ставлення до навколишнього світу, без вашої участі вони розкажуть віртуальним співбесідам нікам про те, що ви собою уявляєте як особистість. За допомогою програм з генерації псевдонімів можна зробити новий нік незабутнім і оригінальним.

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

Приклади:

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

Для старту нам потрібна сітка. Щоб її зробити, ми робимо скріншот сторінки групи та закидаємо у проект, у моєму випадку у Photoshop.

Після цього поєднанням кнопок CTRL+R викликаємо лінійки і розставляємо напрямні по краях аватара і закрепа. Для того, щоб витягнути напрямну, потрібно затиснути ЛКМ на лінійці та потягнути у бік нашого макета.

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

Порізка

Ми зробили розмітку, тепер приступимо до різання. Чому зараз? Та тому, що це майже кінець мого гайда.
Для різання нам потрібен інструмент «Розкройка» (в англ. версії «Slice tool»)

За допомогою цього інструменту робимо нарізку за нашими напрямними, саме всередині аватара і закріплення по краях.

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

Після роботи над нашим дизайном зберігаємо порізані частини за допомогою CTRL+SHIFT+ALT+S або Файл->Зберегти для web…

У цьому вікні із затиснутим Shift вибираємо наш аватар і закріп натискаємо зберегти
Але тут також ще не все. У вікні, пункт фрагменти, вибрати «Тільки виділені фрагменти» і натиснути зберегти. Після чого фотошоп відріже з усього макета область із аватаром та закріпом.