Приветствуем на пятом уроке «Баннер для анонса в Figma. Ресайз» курса по SMM-дизайну. Сегодня мы будем делать баннер для анонсов в программе Figma. Наш урок будет поделён на две части. Первая часть — это непосредственно знакомство с программой Figma и с инструментами, которые будут помогать вам в работе и как раз таки в рисовании нашего баннера. Вторая часть — это ресайзы к тому баннеру, который мы сделаем в первой части. Будет два ресайза — горизонтальный и вертикальный. Вертикальный нужен для сторис, а горизонтальный подойдет для постов во «ВКонтакте». Поэтому нам необходимо будет попробовать сделать оба.

Начнём знакомство с Figma. Figma — это профессиональный онлайн-сервис для дизайнеров. Там можно работать как одному, так и в команде. Чаще всего в нём работают веб-дизайнеры. Но он также очень хорош для отрисовки контента для соцсетей. Первое, что мы вам покажем, — это как его скачивать и как там регистрироваться.

В поисковике пишем Figma и находим сайт Figma.com. Можно сразу нажать Download Figma Desktop, и нас отправят на скачивание программы. Здесь есть два варианта — либо для macOS, либо для Windows. Выбирайте, какой формат вам необходим.

Есть также Figma Mirror. Устанавливается на телефон, чтобы можно было просматривать дизайн с него. Например, если делаете какую-то адаптивную версию, открыли на телефоне данную программу — и уже просматриваете с телефона. На телефоне не получится сделать дизайн, это приложение только для просмотра вашего контента. Но оно вам, в принципе, сейчас не нужно. Нам нужна desktop-версия. Нажимаем, скачиваем. У нас она уже установлена, поэтому сейчас это показывать не будем, но тут всё просто.

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

После того как мы зарегистрировались в Figma, у нас открывается вот такое рабочее пространство. Нам сейчас это, в принципе, не нужно. Есть возможность работать в браузере, это приложение, в котором можно почти всё делать в браузере. Но можно и на компьютере. Откроем desktop-версию, потому что в ней работать удобнее: туда можно загрузить новые шрифты, о которых чуть позже расскажем. В целом предпочтительнее пользоваться данной версией.

Нажимаем «Новый файл». У нас открывается рабочее пространство. Перед началом работы обозначим, что в Figma есть разный размер изображений, не как в Supa, где создаётся отдельно что-то готовое. Здесь все размеры необходимо создавать самостоятельно.

Итак, выбираем фрейм. Можно выбрать, конечно, из предложенного. Например, под desktop-версию, под Mac. Можно сделать 16х9, 4х3 (чаще всего используется 16х9). Можете здесь посмотреть размеры для печати: лист А4, лист А5. Также есть раздел Social Media. Есть все необходимые нам посты для разных соцсетей и тому подобное. Но чаще всего пользователи вручную нажимают кнопку F. Иными словами, выбирают фрейм, рисуют его и уже в меню прописывают размеры, например 1080х1080. И получается такое рабочее пространство, в котором уже всё делается.

Давайте посмотрим гайд про размеры. Здесь показывают размеры для «ВКонтакте». Можете пользоваться. Рекомендуем прочитать, потому что размеры для соцсетей разные и это необходимо учитывать, чтобы не получилось так, что вы сделали какой-то дизайн, а он оказался немного не того формата, и у вас там, например, в итоге верхушка и низ обрезаны. Или, напротив, изображение растянулось пошире и всё размазалось вместо той красоты, которую вы ожидали. Поэтому рекомендуем ознакомиться с этими материалами.

Следующее, что мы вам подскажем, — это как подобрать шрифты. Для Figma можно скачивать очень разные шрифты, какие вам только понравятся. Есть очень классный сайт под названием Google Fonts. Там есть бесплатные лицензионные шрифты, которые вы можете скачивать и устанавливать на свой компьютер, впоследствии пользуясь ими бесплатно.

Здесь вы можете выбрать категорию. Например, вы убираете «Все шрифты» и смотрите только Serif. Это шрифты с засечками. Очень многим знакомы по Times New Roman. Это канцелярский шрифт, который пишется обычным текстом во всех официальных документах. Но он не так уж и прост — у него есть очень красивые начертания. Поэтому выбирайте, скачивайте и пользуйтесь. Рекомендуем пользоваться Google Fonts и набивать свою насмотренность. Здесь можете подбирать шрифты, которые вам нравятся.

Sans Serif — это шрифты без засечек. Такие шрифты чаще всего используют в различных постах и баннерах, так как они мягче для восприятия, чем шрифты с засечками.

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

Самое простое, что мы вам рекомендуем, — это первые два начертания. С засечками и без засечек. Давайте попробуем установить какой-нибудь шрифт.

Допустим, нам понравился шрифт Montserrat. Мы заходим в него. Здесь нам показывают начертания, какие у него есть. У него очень много начертаний. Black italic — большой такой, жирный, с курсивом. Black — обычный, дальше ExtraBold, и так по уменьшению. Medium, Regular и прямо самые-самые тоненькие. Вы можете смотреть, какие есть начертания и какие буквы используются в нашем алфавите в этом начертании Montserrat. Если здесь есть русские буквы, значит, вы можете писать ими. Если здесь только английский, например, а русских нет, значит, у этого шрифта нет русского начертания. Проверить это вы можете сразу.

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

Давайте установим шрифт Noto Sans. Нажимаем Download Family. У нас скачивается архив. Мы его открываем. И здесь у нас как раз есть наши шрифты. Куда их устанавливают на компьютере?

Заходим на диск C, где лежит наш Windows. Заходим в Windows и ищем папку с названием Fonts. Это как раз шрифты. Она загружается. Вот здесь много разных шрифтов, которые вы уже можете применять на компьютере. Мы загружаем новый шрифт сюда и ждём, пока он установится. Всё, мы можем теперь этими шрифтами пользоваться. Noto Sans теперь тоже есть в нашем выборе шрифтов. И вы можете им пользоваться не только в Figma, но и в PowerPoint и других текстовых редакторах, так как этот шрифт есть уже на вашем компьютере.

Есть ещё один инструмент, который вам будет необходим в работе при подборке цветов. Здесь есть «Цветовой круг», с которым вы можете работать. Он вам подскажет противоположные либо другие цвета. Или, например, четыре разных цвета, разные противоположности. Здесь у них прописаны их коды. Вы выбираете понравившиеся вам цвета, гармонируете, сочетаете их и копируете отсюда их коды. Затем вставляете себе в цветовую гамму. Рекомендуем ознакомиться с цветовой схемой.

Также есть различные подборы цветов. Вы здесь можете выбрать, например, популярные, и вам покажут различные сочетания цветов. Вот, например, это мягкое сочетание цветов подойдёт для какого-нибудь лёгкого поста. Здесь очень классное сочетание. Рекомендуем тоже смотреть и брать себе на вооружение.

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

И ещё один очень классный инструмент по насмотренности, по подбору цветов, — это Pinterest. Там вы можете находить референсы — примеры работ других людей, которые вы можете брать на вооружение и вдохновляться ими. Допустим, если вы занимаетесь веб-дизайном, можно посмотреть какие-нибудь страницы сайтов на игровую тематику. Здесь очень много разных вещей. Чаще всего ими пользуются для вдохновения при создании сайтов. Можно смотреть презентации, можно — баннеры.

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

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

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

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

Мы его возьмём. Нажмём «Копировать картинку», откроем нашу Figma и нажмём Ctrl+V. Мы её вставили в наше рабочее полотно. Обратите внимание, что рабочее полотно здесь бесконечное. Т. е. вы можете пользоваться им как угодно, передвигая вверх-вниз. Тут вам понадобится запомнить комбинацию клавиш — Ctrl + колёсико мышки, — с помощью них вы будете приближать и удалять ваш образец, вот так. Если мы наведем мышку сюда, рисунок будет приближаться за мышкой. Зажимаем Ctrl плюс колёсико.

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

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

Для простоты восприятия и обучения тому, как пользоваться Figma и горячими клавишами, мы включили программу, которая показывает, какие кнопки мы зажимаем. Вот, например, Ctrl + колесико: приближаем, удаляем. Пробел или левая кнопка мышки — перемещаем наше полотно. Нажимаем букву F — открылся фрейм. Выбираем здесь Instagram-пост (этот формат подойдет и для «ВКонтакте») — он появляется. Поэтому следите за кнопками, которые будут показываться внизу. Это горячие клавиши. Рекомендуем сразу же учиться по ним — будет гораздо проще и быстрее работать в дальнейшем.

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

Дальше. Фрейм — это как раз наш слой. Так же как в SUPA, где мы ее открывали, нас встречало белое рабочее полотно. Грубо говоря, здесь мы уже в нём работаем. Далее тут есть фигуры: квадрат, линия, стрелка, круг, треугольник, звезда и возможность добавить какую-либо картинку. Указаны горячие клавиши, по которым они вызываются. Например, квадрат, который чаще всего здесь используется, откликается и рисуется на нажатие R. Его также можно увеличивать и уменьшать. За эти кружочки ему можно вот таким образом сглаживать углы.

Вы либо выбираете здесь какой-то элемент, либо нажимаете на горячую клавишу. Давайте пока это удалим и пойдём дальше. Тут есть инструменты «Ручка» и «Перо». Также есть инструмент «Текст» и, как вариант, кнопка «Текст». В правом верхнем углу у нас есть кнопки ориентации, показывающие, как его разместить на полотне. По центру, справа, слева — вот он у нас перемещается. Давайте пока по центру поставим.

Далее. Эти вещи пока что вам не нужны. Они больше подходят для редактирования картинок.

Здесь вы выбираете из огромного множества различных шрифтов, которые у вас есть на компьютере. Также вы можете скачивать шрифты с Google Fonts. Давайте возьмём пока что Open Sans. У него есть различные начертания. Давайте приблизим. Например, SemiBold — средний такой, немножко толстый. Bold — толстый. ExtraBold — это прямо очень жирный шрифт. Есть и их противоположности — Light и супермаленький шрифт Condensed Light. Средний стандартный — это Regular.

Здесь вы можете также прописывать размер шрифта. Буквально все значения, которые вам нужны. Например, 244 — и он у вас станет огромным.

Здесь выбор межбуквенного расстояния. Например, если мы поставим 10%, то между буквами появится такое вот одинаковое расстояние.

А это — межстрочный интервал. Он ставится автоматически и равен около 1,2 от текста. Если размер шрифта 48, то интервал автоматически будет 65%. Это значит, что между строками такое вот небольшое расстояние. Мы можем его менять, как нам угодно. Например, написать 140%. И тогда это расстояние увеличится. Сделаем 250% — и появится вообще огромное межстрочное пространство. Но если мы всё это удаляем, то он автоматически подбирает нам самый стандартный, средний вариант.

Также есть выбор расположения текста по центру, с края, слева. Очень похоже на то, как сделано в Word.

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

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

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

Давайте поменяем для начала цвет нашего фрейма. Возьмём «Пипетку», нажмём сюда на полотно, и у нас появится такой же синий цвет. Далее нажмём кнопку «T» и начнём писать наш текст. Нажмём Enter и перейдем на вторую строку.

Отлично, мы написали наш текст. Увеличим шрифт примерно вот до такого, даже поменьше. Если вы хотите быстро менять размер шрифта, вы нажимаете и держите Alt + левую кнопку мышки, водите ею вот так — влево-вправо. Размер будет меняться в зависимости от того, куда вы потянете стрелочкой. Либо можно прописать цифрами. Межстрочное расстояние оставим таким. Всё отлично. Начертание сделаем чуть-чуть пожирнее, возьмём SemiBold. Хотя нет, лучше Regular.

Далее — второй блок текста «Голосуйте за компанию, в которой хотите работать». Нажимаем кнопку «T». У нас остались прежние настройки текста. Напишем его.

Размер шрифта нам нужно взять примерно 36. Обратите внимание, что если вы делаете заголовок, например, 64, то второй блок вашего текста, который не должен перетягивать на себя внимание, вы делаете примерно в полтора–два раза меньше. Здесь 64, а здесь — 36. И они вот так гармонируют.

У нас осталось еще два элемента. Это логотип компании и иконка. Переходим к логотипу. Нам необходимо найти его. Пишем в поисковике «hh логотип». Здесь сразу же первый сайт самого hh.ru, а также правила пользования логотипом. Тут объясняют его структуру, как пользоваться цветами. Находим формат png — нам нужна прозрачная картинка. Нажимаем на неё, копируем картинку, заходим обратно в Figma и нажимаем Сtrl+V. И у нас появляется вот такой логотип.

Мы его ставим слева — по левому краю текста. Приблизим и посмотрим, как у нас получился отступ. Слева у нас 59, давайте снизу сделаем также, чтобы они были одинаковые. Зажимаем Аlt, и у нас показывается расстояние.

Последнее, что нам необходимо, — найти похожую картинку. Предлагаем вам для этих целей на выбор несколько сайтов. Есть сайт под названием Freepik.com. На нём вы можете найти очень много разных иконок и картинок. Здесь есть поиск по бесплатным либо по платным. Можно выбрать, например, векторное изображение: будет как раз для наших целей.

Большая часть поиска направлена вот на такие картинки, состоящие из линий. Можно выбирать и фотографии — всё на ваше усмотрение. В поиске прямо прописывается, например vote, «голосование» по-английски. И перед вами появляются различные картинки, которыми вы можете всецело пользоваться.

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

Второй ресурс более обширный, это Вookmarks.design. Тут собраны разные ресурсы под разные тематики. Имеются, например, YouTube-каналы с дизайнерами. Есть дизайн-системы, бесплатные иллюстрации — всё, что нам необходимо. И вот на этом сайте мы нашли следующий ресурс.

Переходим в unDraw.com. Здесь перед нами много разных иллюстраций. Мы можем нажать на одну из них и скачать либо SVG, векторный формат, либо картинку в формате PNG.

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

Давайте поищем необходимую нам картинку. Нажимаем «Поиск» — и ищем по ключевому слову vote — «голосование». Возьмём самую первую. Скачаем картинку в формате SVG. Теперь просто берем ее и перетягиваем в Figma. И вот сюда вставляем. Мы скачали ее как SVG, поэтому можем каждый элемент у неё редактировать.

Давайте приступим к редактированию. Приблизим. Первым делом перевернём её на 180° по горизонтали (Flip Horizontal). Используйте комбинацию клавиш Shift+H. Далее давайте поменяем у персонажа цвет кожи, чтобы по стилистике совпадал с дизайном. Переходим во «Все цвета», «Коричневый» — это как раз сейчас цвет кожи. Давайте попробуем поставить с помощью «Пипетки» вот такой розовый. Либо просто вот здесь передвинуть ползунок.

Второй цвет. Давайте поменяем цвет одежды. Это, скорее всего, наш серый цвет. Можно проверить. Да, это наш серый цвет. И мы можем поменять его на белый.

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

У нас там есть какая-то белая полоска. Мы можем на неё два раза нажать и выделить как отдельный элемент. Удаляем её. Она нам, в принципе, не нужна, только мешает немножко.

Давайте с помощью стрелочек перетянем этот элемент чуть вниз, чтобы там не было зазора. Вот таким образом у нас получился наш дизайн. Логотип мы можем сделать чуть побольше. Например, 120. Размеры все мы можем менять здесь. Если у нас зажат замочек, то размер будет меняться одинаково с двух сторон. Если разжат, то элемент, в случае, если мы, например, напишем 10, сплюснется. Поэтому, если вам необходим с той и другой стороны одинаковый размер, просто ставьте замочек и пишите нужный размер. Потом можете убрать его.

У нас получился основной текст, за ним — последующий, второй. После этого — иконка, картинка, иллюстрация и логотип. Давайте теперь это сохраним. Чтобы это сделать, нам необходимо нажать на название нашего фрейма, перейти вниз и нажать кнопку «Экспорт». Тут нам предлагают экспортировать. Можно выбрать формат: png, jpeg, svg или pdf. Сейчас там необходимо сохранить в png-формате. Нажимаем «Сохранить». Нам предлагают выбор, куда его можно отправить. Давайте его сохраним в пятый урок. Откроем, чтобы проверить. Вот так выглядит наш макет.

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

После того как мы сделали основной дизайн, давайте попробуем сделать ресайзы на него. Один, горизонтальный, подойдёт для постов, а второй — вертикальный, подойдёт для сторис во «ВКонтакте».

Ресайз — это изменение размеров. Давайте попробуем горизонтальный. Нажимаем на кнопку F и рисуем фрейм. Давайте по высоте его сделаем 1080. Вот здесь наша высота. А ширину пропишем 1920. Это получился горизонтальный. И сразу давайте сделаем такой же, только вертикальный. Здесь пропишем теперь высоту 1920, а ширину — 1080.

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

Хочу показать одну очень удобную вещь, которая вам всегда будет помогать в рисовании таких дизайнов. Это внутренняя рамка. И если у вас нет вот таких полос по краям экрана, то мы заходим сюда, в меню, выбираем View и находим Rulers. Так мы их убрали, так они у нас появились. Это необходимо, чтобы мы не вылезали за эти границы и наша картина выглядела более целостной. Чтобы это сделать, нажмём клавишу R, сделаем наш квадрат. С помощью клавиши Shift сделаем квадрат одинакового размера. Давайте здесь сделаем размер 120х120.

Если у вас уже есть такие линии, то вы нажимаете на такую и тянете её вот сюда. И сверху также тянете вторую линию. Теперь необходимо переместить наш квадрат в противоположный угол и также перетянуть линию сюда и вот сюда. Это будет рамка — наши внутренние границы.

Давайте скопируем отсюда содержимое. Через Shift выделим все нужные нам элементы и нажмём Ctrl+D. Так мы создали по ещё одному такому элементу. Перетягиваем внутрь этого ресайза.

И так же выберем наш логотип: нажмём Ctrl+D и тоже перетянем сюда. Давайте сразу же поставим его в этом углу. А картинку поставим примерно здесь. Этот текст расположим примерно посередине, а основной — прижмём к левому верхнему углу, но так, чтобы он был внутри этих границ. Увеличим шрифт до 92. Здесь — до 48.

Когда вы делаете ресайзы, вы должны обращать внимание на пространство внутри полотна. Если оно квадратное, то у нас тут не такие большие элементы. Для большого текста достаточный размер — 64. В горизонтальном у нас появляется гораздо больше места, нам логичнее увеличить все элементы в размере, кроме этой картинки. Её достаточно оставить так, ведь если увеличить, она будет заползать на основной текст. И таким образом у нас получился горизонтальный ресайз.

Давайте сделаем вертикальный. Приближаемся к углу, выбираем здесь прямоугольник (либо нажимает клавишу R) и вот так от угла тянем, зажимая Shift. Делаем 120. Если мышкой не получается, то просто прописываем 120х120. Чуть-чуть отдаляем полотно и левой кнопкой мыши вытягиваем эти полоски. Это наши направляющие. Вытянули здесь, взяли наш прямоугольник и перетащили в другой нижний угол. И так же вытянули направляющие. Теперь у нас тут тоже есть внутренние границы.

Нажмём Ctrl+D и перетянем нашу картинку. Логотип — тоже через Ctrl+D, поместим сюда, приставив к левому нижнему углу. Также — через Ctrl+D — копируем текст. Но здесь он уже немножко не помещается. Если мы его уменьшим, то образуется много пространства. Поэтому давайте просто его сожмём, вот так. Но размер его уменьшать не будет. Можем даже, наверное, немножечко увеличить. Давайте до 96. Главное, чтобы текст стоял в рамках во внутреннем прямоугольнике.

И у нас здесь появляется огромное пустое пространство. Надо что-то с ним делать, это не очень хорошо выглядит. Мы можем увеличить нашу основную картинку, зажав Shift. Но у нас тогда закрывается логотип.

Что мы можем с этим сделать? Уберём пока что её в сторону, вытащим из фрейма. И нажмём вот на этот элемент отдельно. Даже можем на всю картинку нажать: Shift+Ctrl+G. Нажимаем три кнопки, и у нас картинка разгруппировывается. Все элементы становятся отдельными. Мы аккуратненько выделяем коробку и просто удаляем её. А всю остальную картинку также выделяем и нажимаем Ctrl+G — она снова группируется.

Также это можно делать вот здесь: Ungroup или Group Selection.

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

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

Давайте теперь сохраним ресайзы. Нажмём сюда, «Фрейм 2», переходим в «Экспорт», формат можем выбрать: png, jpeg, svg или pdf. Нам нужен png. Нажимаем «Экспорт» и переименовываем, как нам надо. Допустим, в «Вертикальный ресайз». Сохраняем, выбирая нужную папку. И давайте наш горизонтальный тоже сохраним.

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

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

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

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