Создание плакатов в Фигма: От Окон РОСТА до современного дизайна

Обновлено:

Создаём плакат, где главный герой - текст

Оригинально, не правда ли? Не человек труда, не артист, не спортсмен - совсем нет! Текст! Вот оно, что!

Заходим в Фигму и….  

Создаем фрейм

А теперь, внимание - вопрос: Что такое “Фрейм”? Обратимся к всезнайке GOOGLE, вот, что он нам поведает:

  • Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.

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

Вот такой вид принимает экран в самом начале работы. 

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

Смотрим наверх экрана, на горизонтальную чёрную полосу и видим надпись “Untitled”, что в переводе на общедоступный, означает - “Безымянный”. А чуть справа - галочка такая маленькая - V. Вот мы её и кликнем. Левой кнопкой. Получилось? Что видим? Вот, что:

На голубой полоске видите, “Rename” написано? Переименовать, значит. Так мы его переименуем, и назовём - “Плакат”. Чтобы не забыть, значит. Сделали?

Замечательно! Теперь смотрим на верхнюю панель чуть левее. Видим значок такой вот: #, а рядом опять “галочка” - V, мы по ней клик. Прямоугольник чёрный откроется, а в нём рядом со значком # надпись: Frame

Обратите внимание, чуть правее буква F - это “Горячая клавиша”. Т.е. вместо того, чтобы искать значки и кликать по ним, достаточно нажать #, затем - F и получим искомое. 

Одновременно с образованием чёрного прямоугольника, справа откроется контекстное меню, на котором видим выписанные в столбик значения “Фрейма”, то есть виды рабочего поля. 

Что мы видим? Phone (Телефон), а слева “галочка” раскрытия содержания;

Tablet (Планшет) и “галочка”;

Desktop (Настольный компьютер).... И достаточно длинный список. Обо всём чуть позднее и, возможно, подробнее. Но позже. Следите за сообщениями. Надеюсь, что вы подписаны на канал и мы вместе начинаем наше путешествие.

Выбираем - Paper (Бумага), кликаем “галочку” слева и в открывшемся контекстном меню выбираем A4 размер нашего “Фрейма”. И вот - экран:

На правой шкале находим обозначение: W 595 и H 842 - это размеры плаката.

Выбираем содержание плаката

Итак плакат! 

О чём? О событиях сегодняшних дней! 

О ком? О людях, рискующих жизнью, оставляющих свои жизни вдалеке от дома! 

Для чего? Чтобы задуматься о том, что происходит. Понять, что “шутки закончились”! Понять, что на пороге очень большая беда!

ЗА ВЕЛИКУЮ РОССИЮ! - вот такое мы выбрали название плаката!

Что делаем? 

Название плаката, а именно - За великую Россию! - размещаем в самой верхней части нашего фрейма, а для этого кликаем буковку “Т” на верхней панели, помещаем “крестик” в левый верхний угол нашего фрейма и, зажав левую кнопку мышки, растягиваем прямоугольник по всему фрейму, выдерживая высоту примерно 100-130 (это неважно, потом поправим).

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

Итак, название плаката мы сформировали, двигаемся дальше.

Формируем “Фрейм” для белого цвета

Поскольку название плаката мы выбрали о нашей стране - России, то и фреймы, соответственно, будем формировать согласно выбранной теме, а именно - в виде Флага России. 

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

Вспоминаем, что первоначальные размеры нашего фрейма были: 595 х 842. Примерно 60 занял заголовок. Ещё столько же займёт “подвал” плаката, значит свободного места по высоте у нас остаётся: 842-120= 722. Этот размер делим на три - для каждого цвета флага и получаем примерно 240. Поскольку 60 пк заняло название, то размер белого фрейма устанавливаем 300. 

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

Итак, кликаем левой кнопкой в нижний край фрейма и “тащим” нижнюю кромку наверх, смотря одновременно, как изменяется значение “Н”. По достижении размера 300, останавливаемся. 

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

Делаем окантовку белого фрейма тонкими красными полосками, для чего выделяем фрейм, кликнув по надписи А4-1, а в правой шкале находим Stroke и кликаем по надписи левой кнопкой мышки. В открывшемся пространстве видим рамку из четырёх несмыкаемых отрезков, кликаем левой кнопкой и видим выпадающее чёрное меню. 

Кликаем по последней надписи: Custom. Слева появятся чёрточки, обозначающие толщину сторон рамки. Кликаем по нижней - Bottom и ставим “0”, чтобы убрать, а оставшиеся окрашиваем в красный цвет, для чего кликаем цветной квадратик под надписью Stroke

На выпавшей цветовой палитре выбираем нужный цвет и выходим из палитры, кликнув на “Х” в правом верхнем углу.

Формируем “Фрейм” для синего цвета

Повторяем операцию создания фрейма на синий фон флага. Высота “Н”=280.  

Заливаем фон фрейма для чего выделяем фрейм, кликнув по его заголовку “Frame Синий”. Затем кликаем квадратик под надписью “Fill” и в открывшейся палитре выбираем необходимый оттенок.

Делаем окантовку синего фрейма тонкими красными полосками, для чего выделяем фрейм, кликнув по надписи “Frame Синий”, а в правой шкале находим Stroke и кликаем по надписи левой кнопкой мышки. В открывшемся пространстве видим рамку из четырёх несмыкаемых отрезков, кликаем левой кнопкой и видим выпадающее чёрное меню.

Кликаем по последней надписи: Custom. Слева появятся чёрточки, обозначающие толщину сторон рамки. Кликаем по нижней - Bottom и ставим “0”, чтобы убрать, затем так же убираем ограничение сверху - Top, а оставшиеся окрашиваем в красный цвет, для чего кликаем цветной квадратик под надписью Stroke.

Создаем фрейм для красного фона флага

Повторяем операции, проведённые нами для белого и синего тонов флага. 

Добавляем надпись “РОССИЯ НЕПОБЕДИМА” так же, как мы делали тоже с надписью во главе флага. Шрифт и цвет выбираем те же.

Создаём объекты: буква-текст

Поскольку мы создаём плакат на вполне определенную тематику - Специальная военная операция, то и текст выбираем соответствующий - аббревиатуру СВО.

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

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

Буквы размещаем в своих сегментах по направлению справа-сверху - влево-вниз. Этим создаётся некая стилизация общепринятого в нашей Армии символа Z.

Обратите внимание на левую панель - каждая буква расположена строго под наименованием “своего” фрейма. Чтобы обеспечить такой порядок, нужно выделить нужный объект, нажать левую кнопку и, не отпуская её, переместить объект в нужное место.

Создаём объекты - текст

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

Поскольку паккат не аналитическое исследование, то информация сжата до предела, оставлена лишь суть - Украина стала кладбищем для танков Abrams!

В белом фрейме пишем

Менее чем за неделю на Украине было подбито три танка М1 Abrams производства США. Они были поражены российскими ПТУРами. Эти потери, получив широкое освещение в социальных сетях, стали для России серьезным пропагандистским успехом. Изначально Соединенные Штаты поставили на Украину 31 танк М1 Abrams, однако критики назвали это количество недостаточным, подчеркнув, что американские танки не смогут существенно изменить динамику боевых действий. Поставки западных танков, в том числе британских Challenger 2 и немецких Leopard 2, осложняются тем, что привыкшим к советским моделям украинским экипажам приходится быстро переучиваться. На фоне всего этого зону боевых действий на Украине прозвали "кладбищем танков"

Шрифт и цвет оставляем тот же, что и в заголовке плаката. По законам жанра не рекомендуется использовать более 2-3 цветов. За исключением случаев, когда “петушиная” расцветка несёт особое смысловое значение. 

В синем фрейме пишем

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

Уничтожение менее чем за неделю сразу трех танков Abrams стало пропагандистской удачей для Кремля. Очень быстро в соцсетях распространилось другое видео — на нем российский военнослужащий обращается к президенту Джо Байдену и благодарит его за отправку Abrams на Украину.

Украина превратилась в кладбище танков, и нравится это американскому военному командованию или нет, но три Abrams — это просто очередные трупы. Они горели, как и все прочие танки — тысячи танков.

В красном фрейме пишем

«Уважаемый господин Джозеф Байден, президент Соединённых Штатов Америки! Мы, Русские Воины, выражаем Вам нашу искреннюю благодарность за танки „Абрамс“, которые США поставляют на Украину. Как Вы, наверное, знаете, нам выплачивают премии за уничтожение этих танков. Очень просим Вас отправить ещё, так как тех, что уже отправлены, очень мало, их на всех не хватает. Нам приходится тратить много времени и усилий, чтобы их разыскать. Мы готовы перечислять Вам 10% от премии на карту „МИР“ с каждого уничтоженного танка. Считаем, что Вы настоящий патриот и лучший президент Америки. Искренне надеемся на взаимовыгодное сотрудничество», — отметил военный.


Как видим, даже в сверх трудных условиях боевых будней наши орлы сохраняют присутствие духа и способны на изысканный юмор. 

Дублируем оба объекта

Чтобы добиться эффекта сокрытия букв текста за большими буквами СВО и изменения их цвета на цвет фона плаката, произведем некоторые манипуляции:

  1. Дублируем объекты (текст и буквы), для чего нужно просто кликнуть последовательно по надписям в левой шкале, начиная сверху, а затем нажать последовательно клавиши CTRL+C / CTRL+V. Эти  действия проводятся для записей в каждом фрейме:
  • для белого - Менее чем за неделю.... и С;
  • для синего - На размещенном в социальной сети X видео.... и В;
  • для красного - «Уважаемый господин Джозеф Байден…. и О.

Произведя указанные действия, мы как бы накладываем по два экземпляра текста и буквы друг на друга.  

Пример:

В левой шкале наводим курсор на текст “Менее чем за неделю...”, кликаем дважды левой кнопкой, получаем - Менее чем за неделю…, Далее - CTRL+C/CTRL+V.

В левой шкале видим, как добавляются записи (Копии записей).

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

Получилось. Двигаемся дальше.

Один из объектов “Текст-2” перекрасить в цвет фона

Точно так же, как мы работали ранее с текстами и  буквами, последовательно выделяем тексты, пронумерованный цифрой 2, а затем  в правой шкале под надписью Fill (Заполнение) кликаем по цветному квадратику.

Чтобы окрасить объект (текст или букву) в цвет фона, кликаем “пипетку”, а затем уже ею кликаем по тому фону, в цвет которого нам необходимо окрасить объект. 

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

Пример:

Текст на красном фоне, имеющий красный же цвет,сдвинут, чтобы было понятно, как он окрашен. На правой шкале, под надписью Fill, виден красный квадратик - цвет текста. 

Примечание.

В принципе возможно поэкспериментировать с цветом текста, переводимого в оттенок фона. Здесь всё будет зависеть от вашего визуального восприятия, вкуса и тематики плаката.

Один из объектов “Буква-2” перевести в вектор

  • Последовательно выделяем буквы каждого цвета. Нажимаем CTRL+E. На левой панели, слева от буквы, появляется изображение той же буквы, но написанное двойной линией с белым просветом -
  • На левой шкале последовательно слои с Буквой-2 размещаем под слоями с “Текст-2”. Делается это следующим образом: выделяем слой с “Текст-2”, зажимаем левую кнопку и перетаскиваем слой по запись “Фрейм Белый" (Синий, Красный). 

Выделяем слой с “Буква-2” (С, В, О). Также зажимаем левую кнопку и перетаскиваем букву под слой “Текст-...”.

Завершение работы

  • Выделяем вместе “Текст-2” и “Буква-2”, для чего кликаем “Текст-2”, затем зажимаем Shift и кликаем “Буква-2”.

На верхней панели нажать кнопку - “Создать маску”:

Проверяем!!!

Текст-1” и “Буква-1” Должны быть под Группой “Mask Group” 

Готовый продукт

Вот он - наш плакат!

Можно сделать листовки, можно сделать баннеры, можно расклеить на информационных щитах, чтобы укрепить веру наших людей в боеспособность Чудо-богатырей, как называл великий полководец Генералиссимус Александр Васильевич Суворов своих воинов - Российских солдат. 

Сам он для солдат был примером. Ни одну баталию не начинал без молебна.

Так и мы - молимся Отцу нашему Небесному Иисусу Христу:

Сохрани Господи, воинов наших и вразуми врагов наших! Благослови Россию - родину нашу и пребудь с нами до скончания века!

Аминь!

На том и заканчиваем. Пишите. Подписывайтесь на канал. Давайте вместе овладевать мастерством дизайнера в том числе и в чудесном редакторе по именованию - FIGMA!

С вами был и впредь, надеюсь, что не раз ещё  встретимся

Сергей. Гелич. 

Нет комментариев

Оставить комментарий

Отправить комментарий Отменить

Сообщение