как сделать шапку для вк в фотошопе

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

Как сделать шапку в группе Вконтакте?

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

Размер обложки 1590х400 пикселей.

Подробнее в пошаговом видео

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

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

Когда подходящая картинка есть, то её нужно загрузить. Сделать это довольно легко.

Как загрузить картинку для шапки группы вк:

1) Заходим на страницу вашего сообщества.

2) Нажимаем «. » -> «Управление сообществом».

3) В пункте «Обложка сообщества» выбираем «Загрузить».

4) Требования к формату — изображение должно быть в формате jpg, gif или png. Также рекомендуется загружать картинки размером 1590 на 400. Если размер будет другой, то vk может обрезать его или наоборот растянуть по длине/ширине.

5) Нажимаем на кнопку «Выбрать файл». После того, как Вконтакте отрегулирует размеры картинки, нужно нажать на «Сохранить и продолжить».

После этого обложка для группы ВК будет добавлена.

Так разложу всё по полочкам ,как всё сделать быстро и легко.Шапка- это можно сказать баннер группы. Для того чтобы установить шапку в группу вам понадобится на компьютере программа Фотошоп( можно любой версии). Он нужен для того ,чтобы выбрать нужный нам размер фотографии ,так как шапка группы расположена на самом верху и чтобы было видно всю фотографию ,нужен правильный размер,рекомендуется 1590 на 400 пикселей. И так далее заходим в свою группу :следует зайти в управлениями группы и найти строчку ,где будет написано «Обложка сообщества» и после загружаем фото ,выбирая с вашего рабочего стола с компьютера.

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

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

Для загрузки рисунка вам необходимо перейти на саму страницу группы и в правой части страницы среди перечня действий выбрать «Управление сообществом».

Затем находим раздел «Обложка сообщества» и нажимаем «Загрузить».

На последнем этапе необходимо указать на нужный рисунок и нажать на кнопку «Сохранить и продолжить».

Чтобы загрузить обложку сообщества в Вконтакте необходимо сначала подготовить её. Вконтакте говорит нам о том, что рекомендуемое разрешение 1590×400 пикселей. Однако, это не означает, что нельзя загружать обложку с большим или меньшим разрешением. Хотя в таком случае возможны искажения (например, когда картинка слишком маленькая, она будет растянута, что в итоге будет выглядеть некрасиво).

Для смены шапки в сообществе переходим в раздел «Управление сообществом».

Далее в меню под типом группы рядом с «Обложка сообщества» щелкаем по ссылке «Загрузить».

После чего появится дополнительное окно, говорящее нам, что поддерживаемые форматы JPG, PNG и GIF, а рекомендуемое разрешение 1590×400.

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

Источник: http://www.bolshoyvopros.ru/questions/2361225-kak-sdelat-shapku-v-gruppe-vkontakte.html

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

Работа с макетом будущей шапки

Шаг 1

Открываем готовый шаблон (mock-up) в редакторе или создаём новый. Нам понадобятся вспомогательные линии. Создать качественную обложку без них будет крайне сложно.

Шаг 2

В рабочую область загружаем выбранное фоновое изображение или вставляем с помощью комбинации клавиш «Ctrl+V». Появившийся слой преобразовываем в смарт-объект, для того чтобы при редактировании изображение не потеряло качество.

Теперь переходим в режим трансформирования, зажимая «Ctrl+T». Перемещаем и центрируем картинку в соответствии со вспомогательными линиями. Не забываем удерживать клавишу «Shift» для сохранения пропорций изображения. При необходимости изображение можно отразить («Редактирование» > «Трансформирование» > «Отразить по горизонтали»).

Для удобства работы отдалите рабочую область, зажав клавишу «Alt» и прокручивая колёсико мыши.

Шаг 3

Выбираем инструмент «Прямоугольник» и на новом слое рисуем фигуру произвольного размера и цвета. Центрируем получившийся прямоугольник в режиме трансформирования.

ЧИТАЙТЕ ТАКЖЕ:  как сделать шаг вперед в фотошопе

Шаг 4

На верхней панели выставляем параметр «Угол» в значении 30° и применяем. Получится примерно такая фигура с наклоном.

Шаг 5

Переходим к заполнению правой области нашей шапки. Там будут располагаться основная информация о группе и функциональные кнопки.

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

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

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

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

Шаг 6

На левой панели в соответствующей области подбора цвета выбираем наиболее подходящий оттенок для текста.

Шаг 7

Добавим функциональную кнопку. Для этого, выбирая инструмент «Прямоугольник», рисуем фигуру. Располагаем её строго между второй и третьей вспомогательными линиями. Прямоугольник послужит шаблоном для первой кнопки.

Далее переходим во вкладку «Свойства» фигуры, где выбираем вариант «Без фона», после чего задаём цвет и размер обводки (в нашем примере ширина контура обводки – 4 пикселя). Макет кнопки готов.

Шаг 8

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

Шаг 9

Теперь нам нужно нарисовать треугольник. Чтобы определить его цвет, выбираем инструмент «Кисть» и зажимаем клавишу «Alt». Появится пипетка. Наводим курсор на используемый цвет (в нашем случае, оранжевый) и щёлкаем левой кнопкой мыши один раз.

Шаг 10

Выбираем слой с макетом кнопки и нажимаем «Ctrl+T». В режиме трансформирования появятся обозначения в виде квадратов, на которые мы будем ориентироваться.

Шаг 11

Зажимаем комбинацию «Ctrl+R», для того чтобы отобразить линейку. Перетаскиваем вспомогательную линию к центральным точкам прямоугольника, нажимая на линейку левой клавишей мыши.

Шаг 12

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

Шаг 13

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

Шаг 14

В режиме трансформирования с помощью инструмента «Перемещение» располагаем наш треугольник внизу под кнопкой следующим образом.

Шаг 15

Переходим к работе над центральной частью обложки. В центре шапки можно перечислить несколько преимуществ вашей фирмы.

Выбираем слой с прямоугольником и задаём ему гармоничный цвет.

Шаг 16

На новый текстовый слой добавляем одну или несколько надписей.

Чтобы сохранить выбранный стиль текста, можно сделать несколько копий предыдущей надписи.

Шаг 17

Создаём новый слой и выбираем инструмент «Линия». Она послужит нам условным ориентиром при расположении надписей. Проводим линию наискосок от верхнего края шапки к нижнему. Устанавливаем толщину фигуры в значении 5 пикселей.

Шаг 18

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

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

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

Шаг 19

Для того, чтобы обложка смотрелась интереснее, можно применить эффект тени. Выбираем текущий рабочий слой и переходим во вкладку «FX» > «Наложение тени». Устанавливаем следующие параметры:

  • Режим наложения: умножение;
  • Непрозрачность: 50%;
  • Смещение: 62 пикселя;
  • Угол: -147°;
  • Размер: 43 пикселя.

Не бойтесь экспериментировать с цветовой гаммой шапки. Выбирайте наиболее подходящий и гармонирующий цвет.

Шаг 20

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

Чтобы сделать обложку адаптированной для мобильных устройств и избежать проблем с её отображением, сдвиньте некоторые элементы немного дальше от правого края.

Сохранение шапки и её последующее размещение в группе

Шаг 1

Сохраняем получившееся изображение в формате JPEG или PNG. Для JPEG выбираем наилучшее качество.

Шаг 2

Переходим в группу ВКонтакте. Открываем вкладку «Управление сообществом» > «Обложка сообщества» > «Загрузить» и выбираем нашу шапку. Сохраняем изменения.

ЧИТАЙТЕ ТАКЖЕ:  как сделать ссылку активной в тексте

Источник: http://design-training.ru/portfolio/sdelat-shapku-dlja-gruppy-vkontakte/

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

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

Используются следующие размеры оформления группы Вконтакте:

  • Обложка страницы показывается вверху, на всю ширину паблика, размер 1590 х 400 пикселей;
  • Большой аватар — вертикальный баннер 200х500 px (соотношение сторон 2:5), показывается справа вверху;
  • Маленькая аватарка, круглая картинка, показывается в каждом сообщении группы, размер 200х200 пикселей.
  • Изображение меню для группы Вконтакте, ширина 510 пикселей, высота — 307 (чтобы нижний край меню красиво совпадал с низом большой аватары справа).

Если в настройках сообщества загружено изображение обложки, то большой аватар справа не показывается.

Как сделать шапку для группы Вконтакте самостоятельно

Чтобы шапка сообщества выглядела красиво, все ее графические составляющие должны быть оформлены в одном стиле (набор цветов, логотипы, шрифты) или быть частью одной картинки. При оформлении группы Вконтакте самостоятельно, первый шаг — подготовить фоновое изображение. Это может быть тематическая картинка с бесплатных фотобанков (например, pixabay.com).

Открой картинку в графическом редакторе. Обрежь или масштабирую до размера: длина 1590 px, высота 400 px.

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

Кликни по надписи «Загрузить» в поле «Обложка сообщества».

В следующем окне выбери ранее подготовленный на компьютере файл обложки, и кликни по «Сохранить и продолжить».

Теперь в твоей группе будет новая обложка. Учитывай, что в этом случае вертикальная картинка большой аватарки справа показываться уже не будет.

Рекомендации по выбору изображения для шапки:

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

Размеры шапки в паблике Вконтакте в новом дизайне

После того как произошел редизайн данной социальной сети, появился новый элемент оформления — обложка. Это большое изображение горизонтальной ориентации размером 1590 на 400 пикселей. Шапка для группы Вконтакте является статической картинкой. Достаточно большой, чтобы разместить на ней и яркую, запоминающуюся фотографию или картинку и название паблика, слоган компании, имя сайта, расписание работы и другие надписи.

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

Процесс оформления меню группы Вконтакте состоит из следующих этапов:

  • Подготовка списка ссылок меню (это могут быть страницы, разделы сообщества или внешние сайты).
  • Подготовка фоновой картинки.
  • Нанесение на фоновое изображение надписей и «кнопок» меню.
  • Нарезка изображения на части.
  • Включение wiki-страницы.
  • Загрузка графического меню и форматирование его wiki-разметкой.

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

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

Вертикальное меню сообщества ВК с пунктами в один столбик

Открой картинку в редакторе. Инструментом редактора «Текст» напиши пункты меню поверх фона. Чтобы надписи меню были заметны, их можно выделить несколькими способами:

  • Обвести рамкой;
  • Изменить цвет фона под буквами;
  • Добавить буквам тень.

Ниже на скриншоте каждый пункт выделен одним из способов.

Следующий шаг — нарезка изображения на части:

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

Процесс нарезки изображения также можно выполнить с помощью удобного онлайн-инструмента www.imgonline.com.ua/cut-photo-into-pieces.php.

Далее в меню «Управление сообществом» зайди в пункт «Разделы» и в пункте «Материалы» выбери «Ограниченные» (это значит, что страницы создавать и редактировать сможет только администратор группы).

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

Перейди в этот раздел и нажми редактировать. Измени заголовок на «Меню» а потом нажми на пиктограмму фотоаппарата, чтобы добавить изображение.

ЧИТАЙТЕ ТАКЖЕ:  как сделать поделки для кукол

Щелкни по добавленной картинке и в окне свойств укажи ссылку на нужный раздел.

Вконтакте автоматически уменьшает изображения до 400 пикселей и вставляет лишние тэги. Чтобы исправить это нужно перейти в режим редактирования разметки.

Каждый тэг изображения начинается «[[» и заканчивается «]]», состоит из трех частей, разделенных знаком «|»: ID изображения, свойства и ссылка. Нужно откорректировать размеры картинок и вставить в их свойства тег «nopadding». Свойства картинок перечисляются через «;».

После сохранения изменений создание меню завершено.

Меню с горизонтальным или многострочным расположением пунктов

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

Правила оформления таблицы:

  • Начало обозначается символом «<|», конец таблицы — «|>».
  • Дополнительные свойства указываются после «|

»

  • Новая строка начинается с «|-».
  • Каждая ячейка отделена «|».
  • Для исключения лишних пробелов нужно указать параметры таблицы «fixed nopadding noborder». Разметка графического меню из 2 столбцов и 2 строк выглядит так:

    А само меню в группе:

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

    В сообществах Вконтакте используется два варианта аватарки:

    • Большой прямоугольный баннер 200 на 500 точек, показывается справа вверху, если не загружена обложка.
    • Миниатюра 200х200 пикселей, показывается в постах и в обсуждениях в виде кружочка.

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

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

    Источник: http://partnerkin.com/blog/articles/oformlenie_pablika_vkontakte_kak_sdelat_menyu_i_shapku

    Сегодня я расскажу что нужно сделать, чтобы оформить сверху вашу группу или сообщество красивой длинной обложкой. Во-первых, она выглядит более презентабельно фотографии справа, во-вторых, сразу бросается в глаза пользователю, посетившему сообщество, так как обложка обладает довольно большим размером. Поэтому к ее выбору стоит отнестись серьезно — это лицо вашей группы и своеобразный инструмент привлечения потенциального подписчика. Размер обложки должен быть 1590х400 пикселей. Разумеется, нужное изображение подобного размера найти трудно, следовательно перед загрузкой фото в группу с ним нужно поработать в фотошопе.
    Нет фотошопа — в крайнем случае можно воспользоваться стандартным редактором Paint для обрезания картинки до нужного размера. По хорошему, если вы не умеете пользоваться фотошопом, качественную шапку сообщества следует заказать у соответствующих специалистов.

    Как добавить обложку в группу Вконтакте

    Итак, картинка под обложку готова, осталось разместить ее в сообществе и посмотреть как она будет выглядеть. Для этого нужно обладать как минимум правами администратора. Загрузка обложки всего в двух шагах — нажимаем Управление сообществом и далее Загрузить.

    Внимательно читаем рекомендуемую информацию Вконтакте о формате и размещении потенциально важных элементов на вашей шапке. Выбираем файл и оцениваем результат.

    Ниже представлен пример обложки в одном из официальных сообществ Вконтакте и как она выглядит на компьютере:

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

    Источник: http://searchlikes.ru/blog/kak-sdelat-shapku-vverhu-v-gruppe-vkontakte/

    Блог начинающего манимейкера.

    Хотите сделать шапку в свой паблик, чтобы шапка сливалась с аватаркой вашей публичной страницы? Все просто! Я уже все для вас сделал. Вам останется только вставить свою картинку. Есть два вида шапки: большой и маленький. Пользуйтесь на здоровье!

    PSD исодники изменились! Скачать PSD исходники для Photoshop: Меню и Аватарка. Остальной текст написан по старым исходникам!

    Скрин:
    Внимание! Если вы не видите разделений на фрагменты зайдите в Photoshop «Вид» — «Показать» — поставьте галочку на «Фрагменты»
    Пояснения:

    Видеоурок от VipBlogger’а:

    Навигация по записям

    Похожие записи:

    Как сделать шапку для паблика ВКонтакте : 12 комментариев

    Спасибо за упоминание.

    как раскроить фото по новым исходникам совсем не понятно.

    Всё понятно, у меня нет времени.

    Не понятно по новым исходникам как сделать? А где старые исходники?

    Старые уже не подходят, я их удалил.

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

    Не мы такие, а жизнь такая

    Удаляй тогда и всю остальную х…
    Морочишь голову только.
    Жизнь у него такая, ебл…ан.

    Указывать будешь своей мамке, понял? Мой сайт, что хочу, то и делаю.

    Нет исходника полностью, так как не удобно отдельно подгонять аватарку и шапку

    Источник: http://vipblogger.ru/shapka-dlya-pablika-vkontakte/

    Ссылка на основную публикацию