Мы рады приветствовать вас на курсе по SMM-дизайну, или просто «Дизайн для социальных сетей». Меня зовут Светлана, я озвучиваю этот курс. За помощь в его создании мы благодарим билайн и Юлию Мамцеву. Юлия занимается веб-дизайном и является куратором в проекте Everland.

На первом уроке мы изучим, как делать карточки для «ВКонтакте» в Supa.

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

• Первый формат — JPEG. Это самый популярный формат в растровой графике. Растровые изображения состоят из множества пикселей, каждому из которых присваивается положение и цвет. Такие изображения нельзя редактировать, они ограничены изначальным разрешением, поэтому, если растянуть фотографию, появляются размытые пиксели. Чаще всего в JPEG выкладывают различные фотографии, сканы документов и все, что связано с яркой графикой.
• Следующий формат — PNG. Он тоже относится к растровой графике. Его преимущество перед форматом JPEG в том, что изображение в формате PNG возможно сделать на прозрачном фоне. Далее мы познакомимся со всем этим.
• Еще есть SVG. Это формат уже векторной графики, который можно редактировать. Векторные изображения состоят из геометрических фигур: прямых, кривых и многоугольников. Они образуют контур, который заливается цветом. Компьютер описывает картинку с помощью математической формулы. Благодаря этому векторную графику можно масштабировать сколько угодно и ее качество не пострадает. Еще один плюс векторных картинок — они весят гораздо меньше растровых и загружаются на сайтах практически моментально. Обычно вектор используют для создания иконок, иллюстраций, инфографики и других элементов.

Последний формат — это MP4, чаще всего такой формат встречается в видео. Точнее, это самый распространенный формат в видео.

Давайте перейдём непосредственно к Supa. Заходим в любой поисковик, пишем по-английски supa, перед нами появляется сайт supa.ru. Если вы когда-то уже работали в Supa и у вас есть аккаунт, то нажимаете кнопку «Вход». Если вы впервые заходите на Supa, то необходимо сначала зарегистрироваться. Мы пройдем этот путь вместе. Можно зарегистрироваться через e-mail или войти через google-аккаунт, что мы и сделаем.

Прежде чем мы начнем работу в Supa, давайте посмотрим, что в ней вообще есть. На странице «Мои креативы» будут храниться все созданные вами макеты. Тут можно создавать папки и группировать креативы так, как вам удобно.

На странице «Создать» есть различные предложения по созданию дизайна. Например, можно создать контент для социальных сетей: пост для «ВКонтакте», чем мы и будем заниматься, рекламный креатив для соцсетей, Stories для Telegram. Можно также создать видео, картинку, коллаж, логотип, дизайн для бизнеса, например презентацию, и многое другое. Т. е. Supa группирует по спискам, что мы можем в ней сделать, и ее функционал очень разнообразен в этом плане. Поэтому, когда вы будете знакомиться с Supa, уделите больше время изучению, что это программа предлагает.

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

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

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

Давайте попробуем сделать первый и второй слайд.
Переходим в Supa.

• Нажимаем кнопку «Создать креатив»;
• Выбираем «Пост для ВКонтакте»;
• Нажимаем «Создать пост в ВК с чистого листа»;
•  Далее «Создать:» — «Изображение».

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

Итак, сначала мы разместим текст, для этого нажмем на панели «Текст» — «Жирный». Напишем заголовок: «Как покупать выгоднее». Мы можем поменять шрифт. Например, мы хотим выбрать наш корпоративный шрифт Raleway. Вот он применился. Сделаем его жирным, а надпись — покрупнее. А междустрочное расстояние уменьшим до 1,2 пункта.

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

Давайте зададим фон. Кликаем правой кнопкой мыши на холсте и в выпавшем окне выбираем «Добавить фон». В левой панели нажимаем на иконку с краской и выбираем на глаз цвет в палитре. Вот так будет хорошо.

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

Надпись должна быть на белой плашке, поэтому мы идем в «Объекты», в «Фигурах» нажимаем квадрат. Делаем из него прямоугольник и перекрашиваем в белый цвет. Но теперь плашка перекрывает нашу надпись.

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

Выделяем объекты и выравниваем относительно друг друга по горизонтали и вертикали. Можем сгруппировать эти объекты. Как у нас было в примере? Поворачиваем и подгоняем.

Еще в примере у нас была иконка в форме рубля, давайте попробуем ее повторить. Для этого нам понадобится объект, выбираем фигуру «круг». Его нужно уменьшить.

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

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

Сравниваем с референсом — очень похоже.

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

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

Меняем текст. Заголовок сделаем поменьше, подойдет 40-й кегль.

Символ рубля превращаем в цифру 1. Уменьшаем круг с цифрой и жирность границы круга до 2. Цифру выравниваем относительно круга.

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

Увеличим межстрочное расстояние. Текст делаем менее насыщенным — уводим немного в серый. Сдвигаем весь контент немного влево.

У нас осталась плашка, где написано про экономию, — давайте ее сделаем. Она уже, в принципе, у нас есть, просто причешем ее.

Для начала разгруппируем плашку и текст. Меняем текст и уменьшаем его, допустим, до 24-го кегля, делаем выравнивание по левому краю.

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

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

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