Рады всех приветствовать на курсе по SMM-дизайну. Сегодня у нас шестой урок. Мы будем делать баннер для анонса в программе Figma, которую мы начали изучать на прошлом уроке.
Первое, с чем мы познакомимся на этом уроке, — это простенький сервис для обтравки ваших фотографий. Если заказчик присылает вам фотографию, на которой есть лишний фон, его нужно быстренько убрать и получить только фото спикера. Для этого вы можете пользоваться ресурсом Remove.bg. Он довольно простой, и сейчас мы покажем его в действии. Переходим по ссылке на экране, и у нас сразу открывается окно, куда нас просят загрузить изображение.
Берём фотографию нашего спикера. Перемещаем сюда, и обтравка сразу же произошла. Теперь мы можем его скачать в предложенном формате вот такого размера. Это будет бесплатная скачка. Либо загрузить полноразмерную фотографию. Но тогда можно сделать только одну фотографию. Остальное, если загружать в HD-версии, будет платно. Если у вас баннер небольшой, и в принципе не требуется супервысокого качества разрешения, то можете скачивать так. Но если для вашего баннера необходимо высокое качество, то нажимаем «Загрузить HD», и вам тут предлагают получить бесплатное изображение.
Но сначала надо зарегистрироваться. После того как мы зарегистрировались на этом сайте, нажимаем «Скачать». Перетаскиваем это изображение в нашу папку и переходим непосредственно к работе.
Сегодня мы с вами будем делать вот такой баннер. Здесь есть логотипы, есть текст, дата и время, сам спикер, его имя, фамилия и регалии. Давайте начнём.
Нажимаем кнопку F, сразу же здесь можно выбрать необходимый шаблон. Размещаем его сюда для удобства и начинаем работать. Будем сразу же пользоваться «Пипеткой». Рекомендуем вам этот шаблон тоже разместить сюда в рабочее пространство и брать цвет с него «Пипеткой».
Первое, что нам нужно создать, — самый большой текст. Заодно разместим спикера, а потом уже всё остальное. Так, текст мы написали, давайте теперь его вот так уменьшим и отредактируем. Шрифт возьмем Montserrat. Если у вас его нет, то в предыдущем уроке вы можете посмотреть и вспомнить, как загружать шрифты. Заходим на Google Fonts, находим шрифт Montserrat, скачиваем его, достаём из архива и кладём в папку на диске C. Как правило, это системный диск. Дальше заходим в Windows и в папку Fonts, туда уже устанавливаем наши шрифты и можем спокойно ими пользоваться.
Давайте увеличим наш шрифт до 60. Чуть-чуть уменьшим фрейм, чтобы у нас было аккуратнее. Поменяем ему начертание. Давайте поставим SemiBold, выделим его немножко жирным. После этого поменяем цвет нашего текста. Для этого тоже используем «Пипетку». Отлично, давайте расположим его где-нибудь посередине.
Дальше заходим в нашу папку и перекидываем сюда фото нашего спикера. Идет загрузка, так как фотография очень большая. Отодвигаем рабочее пространство назад и видим рамки. Зажимаем клавишу К для равномерного уменьшения нашей фотографии.
Давайте посмотрим, как фотография выглядит на образце. Немного увеличим.
Следующий элемент, который будем делать, — это фраза «бесплатный вебинар». Нажимаем клавишу R и делаем прямоугольник. Давайте ширину сделаем 455, а высоту пропишем 55. Выравниваем по левому краю с первым текстом, пишем фразу. Поменяем цвет, уменьшим размер до 28. Сделаем Medium и вставим её в наш баннер.
На образце у нас шрифт 32 и баннер размером даже чуть-чуть поменьше. Давайте сделаем так же.
Теперь нажимаем на наш прямоугольник и меняем ему цвет. Давайте цвет текста сделаем в цвет нашего фона. Берём «Пипетку», нажимаем на фон. Цвет нашего прямоугольника — белый.
Дальше нужно сгладить ему углы. Для этого пользуемся вот этим инструментом. Можно зажать Аlt и просто тянуть вправо, углы начнут сглаживаться. Можно прописать 16. Так, отлично. Сгруппируем: выделим всё и нажмём Сtrl+G. Тем самым сгруппируем. Это всё станет единым элементом, чтобы текст не убегал из нашего прямоугольника.
Следующее, что предлагаем сделать, — разместить наши логотипы. Немножко отдалимся, зайдём в папку и начнём их перемещать в рабочее пространство.
Обратите внимание, что на образце логотипы белые. Сейчас покажем, как менять их цвет. Это у нас формат png, формат картинки. Его просто так не отредактировать, но Figma позволяет сделать это. Для этого нажимаем один раз Сtrl+D, и у нас здесь появляются два Logo 1. Мы скопировали этот элемент.
Дальше выделяем эти два элемента вместе. Обратите внимание: они оба выделились. Нажимаем вот сюда наверху, на «Маску», и теперь у нас вот такая группировка. Нажимаем на верхний элемент. Затем — вот здесь, где написано Fill, справа нажимаем плюсик. И выбираем белый цвет. Увеличиваем непрозрачность. И таким же образом мы делаем все наши логотипы в белом цвете. Если нам нужно поменять цвет, мы также нажимаем вот сюда и меняем цвет на какой нам угодно. Но пока что оставим белым.
Давайте остальные элементы также перекрасим. Ctrl+D, выделяем так, чтобы выделилось два. Нажимаем «Маску» и нажимаем на верхний элемент. Меняем цвет, ставим полную непрозрачность — и готово. У нас теперь есть два белых логотипа.
Осталось сделать последний. Ctrl+D, выделяем. Нажимаем «Маску», нажимаем на верхний элемент. Добавляем цвет. И теперь мы можем работать с ними.
Давайте их уменьшим. Нажмём вот здесь блокировку, чтобы они у нас уменьшались пропорционально, и пропишем размер 130. Перенесем в макет. С остальными поступаем так же. Нажимаем сюда, нажимаем 130. И у нас сразу же с другой стороны тоже уменьшается размер.
Мы их поставили вразброс. Давайте теперь их выровняем. Выделяем их все. И используем кнопки в меню выравнивания. Попробуем варианты. Но пока что нам другое нужно. Нам нужно взять вот этот вариант, чтобы они все выстроились горизонтально и вровень.
Зайдём в меню и поставим Tidy up — одинаковый размер между ними. И вот он у нас здесь отобразился. Между ними расстояние 38 пикселей. Давайте поставим 42. Может быть, сделаем вровень с нашим вебинаром? Хотя нет, значки слишком большие. Давайте вот так оставим и подвинем по левому краю.
Теперь выберем эти элементы. Нажмём Сtrl+G и сгруппируем, чтобы они тоже все были вместе и не перемещались по отдельности.
Теперь мы будем делать плашку с датой и временем. Тоже нажимаем R, рисуем прямоугольник. Сразу выровняем по левому краю. Давайте покрасим его в розовый цвет. Приблизим и начнём писать наш текст.
Поменяем параметры шрифта. Возьмём SemiBold и пропишем размер 44.
Поставим текст недалеко от левого края. Теперь нам нужно немного сгладить углы. Напишем здесь 16, чтобы они чуть-чуть округлились.
Поработаем с фотографией спикера. Немножко увеличим. Нажимаем кнопку К, растягиваем чуть-чуть вниз. Вот так. И двигаем ближе к нашему тексту. Поставим чуть-чуть повыше. Выделяем наши элементы и ставим вот так.
Давайте теперь переместим фото нашего спикера на верхнюю часть экрана. Для этого нажимаем Ctrl, Shift и квадратную скобку (твёрдый знак). Фото перемещается наверх, а другие элементы — вниз. Прямоугольник мы тоже сгруппируем с текстом.
И перейдём к последнему элементу: фамилия, имя и регалии спикера. Нажимаем клавишу T и пишем: «Владимир Немецкий». Сразу же предлагаем чуть-чуть отредактировать текст, сделать шрифт поменьше. Поставим SemiBold.
Печатаем следующий текст: «Предприниматель, сооснователь компании в сфере недвижимости элитного жилья». Текст ушёл за рамки, поэтому надо его сделать поменьше. Уменьшаем ширину фрейма и редактируем шрифт по размеру. Ставим размер 24 и Regular.
Когда мы пишем мелкий текст, нужно увеличивать межстрочное расстояние. Давайте его в процентном соотношении напишем 140. Ставим процент, нажимаем Enter. Поменяем цвет и выровняем. У нас расстояние между текстами — 8, давайте стрелочками сделаем 14.
Выделяем наш текст. Фото спикера нам постоянно мешается, и мы захватываем его. Чтобы оно нам не мешало, мы можем вот здесь нажать на замочек. И всё, теперь мы с этим элементом ничего не можем сделать, мы его заблокировали. Если нужно разблокировать, нажимаем сюда же, на замочек, снимаем — можем его снова менять, как нам угодно. Пока что заблокируем. Выделяем, нажимаем Ctrl+G и выровняем последние надписи с другим нашим текстом. Зажимаем Shift, выделяем, переходим в правое меню и находим «Выровнять по вертикали». И у нас практически получился наш баннер.
Но мы ещё не добавили два элемента на заднем фоне, вот такие кружки. Для этого нам понадобится круг. Нажимаем букву O, зажимаем Shift и вот так его вырисовываем. Добавляем Stroke — это очертание по краям. Здесь поставим размер 2 или 3. Сделаем белый цвет и непрозрачность возьмём до 50. Удалим основной цвет этой сферы. Будет только вот эта окантовка. Переместим в макет.
Если у вас круг не помещается во фрейм, то необходимо его в левом меню перетянуть в него, и всё — он появится уже внутри, и мы сможем с ним работать. Так как наш круг сейчас располагается над всеми остальными элементами, нажимаем Сtrl, Shift и открывающую квадратную скобку (русскую букву Х). И мы поместили наш круг позади всего остального.
Нажмём клавишу K и уменьшим круг. Вот так разместим и нажмём Сtrl+D. Создадим ещё один такой же элемент, но поменьше. Сделаем у него непрозрачность уже меньше, чтобы белый такой круг виднелся, где-то 90 поставим.
И таким образом мы с вами полностью сделали баннер. Давайте на него посмотрим вблизи. Сейчас он загрузится. Всё, у нас прогрузилось. Видим, что мы сделали логотипы, надпись «бесплатный вебинар», дальше — основной текст, плашку с датой и временем, фото спикера, позади него — фигуры для привлечения внимания, его имя, фамилию и регалии. И все это довольно гармонично друг с другом смотрится.
Давайте еще отдельно посмотрим, как в Figma работать с масками и делать различные элементы с фотографиями.
Скопируем фотографию нашего спикера. Поместим куда-нибудь на рабочее пространство. Выберем фигуру, в которую нам необходимо ее поместить. Давайте возьмём за основу круг. Вот так. Продублируем наш круг еще два раза. Так, наш спикер потерялся где-то в слоях. Давайте его найдём в меню и поднимем сюда. Выделим два элемента: один круг и нашего спикера.
Нажмём на «Маску». И сейчас у нас появился вот такой эффект. На фоне есть ещё один круг. Давайте его тоже поместим сюда, в нашу группу маски. Пока что мы можем полностью убрать цвет и поработать именно со спикером. Хотя лучше добавим цвет, чтобы видеть наши границы.
Чуть увеличим. Выровняем фото. Нажимаем теперь на этот круг и меняем цвет по нашему усмотрению. Допустим, на розовый. Цвет, конечно, немного не подходящий сейчас, но ладно. Давайте для примера возьмём этот и поместим фото сюда, в макет.
Сейчас это у нас одна группа. Здесь мы меняем цвет, здесь — меняем саму фотографию, а это наша маска, в которой у нас всё это лежит.
Будьте аккуратны при перемещении элементов. Если взять один элемент, то все остальные пропадают.
Рекомендуем выделять вот так и уже после этого перетягивать. Сделаем вот такой вариант.
Давайте выровняем, раз мы сделали такой дизайн. Надо разгруппировать элементы при помощи Сtrl+Shift+G. Эти элементы у нас уже выровнены по левому краю. Нажмём сюда через Shift, выделим два элемента и выровняем посередине. Выравниваем фото. Нажмём клавишу K и выровняем по нашим границам. Всё вместе переместим чуточку ниже так, чтобы было центру.
Вот так можно переделать баннер, чтобы он у вас выглядел по-другому. Такой вариант. Можно делать вот так, без всякого фона, просто вырезаем фото спикера. Можно применять к нему маски и добавлять его в какие-либо элементы.
Чтобы сохранить, мы нажимаем Export, выбираем формат png, заходим сюда и пишем «Баннер». Сохраняем его. У нас получаются вот такие баннеры.
На этом наше занятие подходит к концу, и вашим домашним заданием будет сделать такой же баннер, как сделали мы. Для этого нужно зайти на сайт по обтравке фотографии, сделать обтравку, потом фото спикера закинуть в Figma, сделать все элементы, поменять цвета логотипов, накидать текст, накидать прямоугольники, сделать весь баннер так, чтобы он выглядел гармонично. Попробовать сделать второй вариант баннера — через маску. Сделайте два кружочка. Дальше в один кружочек поместите фото и сделайте маску, а второму — выберите другой цвет, какой понравится. И создайте второй вариант баннера уже со спикером, который находится в кругу в маске.
На этом урок подошёл к концу. Встретимся на следующем уроке.
