создаем коллаж для обоев на телефон в Figma
Профессия «графический дизайнер»:
Мастер-класс
Профессия: графический дизайнер
Сферы деятельности
- дизайн
- культура
- медиа
- бизнес
Используемые технологии
Нейросети для генерации графических элементов и изображений,
Программы Figma, Photoshop, Illustrator, Corel Draw
Программы Figma, Photoshop, Illustrator, Corel Draw
Необходимые навыки
Владение графическими редакторами для работы на физических и электронных носителях, знание программ для конкретных задач (верстка дизайна сайтов, создание презентаций).
Креативное и творческое мышление, знание конкретных приемов для создания креативов и проведения мозговых штурмов/генерации идей.
Умение донести задумку до разной целевой аудитории как визуально, так и в тексте.
Креативное и творческое мышление, знание конкретных приемов для создания креативов и проведения мозговых штурмов/генерации идей.
Умение донести задумку до разной целевой аудитории как визуально, так и в тексте.
Продуктовые результаты
Оформление визуального вида любой продукции (этикетки на одежде, упаковка товара, оформление социальных сетей, создание сайтов и презентаций, рекламные креативы).
Где учиться
- Классические университеты (дизайн, искусство и культура) – например, в ТГУ
- Социально-экономические вузы (дизайн, брендинг, мода) – например, ВШЭ
- Технические вузы (промышленный дизайн) – например, МГТУ
- Вузы культуры и искусства (дизайн, изобразительное искусство) – например, ИСИ
Широкий спектр возможностей от работы на самого себя до ведения дизайна бренда крупных корпораций
Примеры вакансий
Графический дизайнер
Яндекс Крауд: Контент
Вакансия графический дизайнер
Вакансия дизайнер презентаций
Сбербанк России
Стройпарк
Вакансия менеджер по оформлению (дизайнер)
О чём мероприятие?
Как войти в IT, если я совсем не технарь? Вот было бы здорово, если бы можно было получать деньги за оформление презентаций… А такая есть! В обязанности графического дизайнера часто входит создание макетов для презентаций. Ну а также формирование общего внешнего вида компании (цвета, шрифты, графические элементы и т.д.). Предлагаем вам познакомиться с профессией через бесплатную программу Figma, в которой работают профессионалы!
Для кого мероприятие?
«Я художник – я так вижу!» - как найти работу творческому человеку? Как зарабатывать на любимом деле – оформлении презентаций, создании иллюстраций и школьных плакатов? Ответ на этот вопрос уже нашли графические дизайнеры! Предлагаем вам познакомиться с одним из простых, но очень полезных инструментов современных специалистов в сфере дизайна – Figma!
Для работы вам понадобится:
Ноутбук или компьютер
С доступом в интернет
Регистрация на платформе Figma
Можно использовать один аккаунт на несколько человек
На случай непонятного английского слова :)
Полезные материалы:
Горячие клавиши в Figma
Вот несколько подсказок, которые сделают вашу дальнейшую работу на платформе более комфортной:
Комбинации клавиш (горячие клавиши):
Квадратные скобки:
- «ctrl+C» - это скопировать элемент
- «ctrl+V» - это вставить элемент
- «ctrl+Z» - это отменить действие
- «ctrl+A» - это выделить все объекты на экране
- «ctrl+G» - это сгруппировать выделенные объекты
- «shift+левая кнопка мыши» (при изменении размеров изображения) – изменение размеров изображения без изменения пропорций изображения
- «ctrl+колесо мыши вперед/назад» - приблизить/отдалить видимую область
- «пробел+левая кнопка мыши» - перемещение по рабочему пространству (видимой области) с помощью «руки»
Квадратные скобки:
- «[» - поместить изображение на самый нижний слой
- «]» - поместить изображение на самый верхний слой
Ход работы:
1. Регистрация на платформе
Можно зарегистрироваться через свою электронную почту, а можно авторизоваться через аккаунт Google.
Хватит и одного аккаунта, чтобы сделать коллаж на каждого члена семьи. Для этого необходимо будет открыть Figma и зайти в один и тот же аккаунт на всех устройствах, с которых планируется работать.
Хватит и одного аккаунта, чтобы сделать коллаж на каждого члена семьи. Для этого необходимо будет открыть Figma и зайти в один и тот же аккаунт на всех устройствах, с которых планируется работать.
2. Создание рабочего пространства
2.1. Создаем файл для работы в Figma
Для этого нажимаем в правом верхнем углу на голубую кнопку Design File и выбираем Drafts (черновики).
2.3. Называем рабочее пространство
Дважды нажимаем на стандартное название Untitled, которое расположено по центру в верхней части экрана.
Название может быть любым и служит лишь для вашего внутреннего определения нужного файла. Особенно это важно, если вы будете создавать несколько файлов в одном аккаунте.
Название может быть любым и служит лишь для вашего внутреннего определения нужного файла. Особенно это важно, если вы будете создавать несколько файлов в одном аккаунте.
2.5. Больше пространств!
По необходимости повторяем пройденный алгоритм чтобы создать больше рабочих файлов для каждого члена семьи.
Перед этим необходимо вернуться ко всем файлам, нажам в верхнем левом углу Figma -> Back to files.
Перед этим необходимо вернуться ко всем файлам, нажам в верхнем левом углу Figma -> Back to files.
3. Подготовка рабочего поля (фрейма)
Перед началом выполнения шага открываем рабочий файл (или остаемся в том, который уже создали).
3.1. Создание фрейма
Для создания поля (рабочего листа) в файле необходимо создать Фрейм (Frame), на котором в будущем будут располагаться изображения.
3.2. Выбор формата
После того как вы нажали на Frame в правой части экрана вам будет представлен выбор.
Необходимо выбрать Презентации (Presentation), в варианте Slide 16:9 (Слайд 16:9). После этого у нас появится рабочее поле (лист) в центре экрана.
Необходимо выбрать Презентации (Presentation), в варианте Slide 16:9 (Слайд 16:9). После этого у нас появится рабочее поле (лист) в центре экрана.
3.3. Перевернем страницу
16 на 9 – это соотношение сторон. Наша задача их поменять (сделать 9:16).
Для этого необходимо нажать на появившееся рабочее поле (лист) в центре экрана, после чего в меню в правой части экрана поменять расположение рабочего поля (листа).
Для этого необходимо нажать на появившееся рабочее поле (лист) в центре экрана, после чего в меню в правой части экрана поменять расположение рабочего поля (листа).
3.4. Да будет имя!
Дадим название нашему листу!
Нажмите дважды на подпись чуть выше появившегося листа «Slide 16:9 – 1» и переименуйте так, как вам захочется. Например, «обои на телефон Лены».
Нажмите дважды на подпись чуть выше появившегося листа «Slide 16:9 – 1» и переименуйте так, как вам захочется. Например, «обои на телефон Лены».
4. Вдохновляемся
Мы настроили рабочее пространство и фрейм! А это значит, что скоро приступим собирать коллаж для обоев на телефон. Как он может выглядеть? Смотрите в примере по ссылке ниже :)
Эту картинку мы предлагаем вам взять за ориентир и сделать нечто подобное, чтобы и создать классную композицию, и научиться некоторым функциям Figma. Для того, чтобы приступить к работе важно определиться с темой колллажа и подобрать картинки. Подумайте – какие обои на телефон вы бы хотели? Может с любимым персонажем из книги или видеоигры, или с любимым исполнителем! А может с семьей или домашним питомцем :)
После того как тема определена можно переходить в соседнюю вкладку в браузере и искать подходящие картинки на просторах интернета. Удобный для поиска красивых картинок - сервис Pinterest.
Эту картинку мы предлагаем вам взять за ориентир и сделать нечто подобное, чтобы и создать классную композицию, и научиться некоторым функциям Figma. Для того, чтобы приступить к работе важно определиться с темой колллажа и подобрать картинки. Подумайте – какие обои на телефон вы бы хотели? Может с любимым персонажем из книги или видеоигры, или с любимым исполнителем! А может с семьей или домашним питомцем :)
После того как тема определена можно переходить в соседнюю вкладку в браузере и искать подходящие картинки на просторах интернета. Удобный для поиска красивых картинок - сервис Pinterest.
5. Подготовка картинок
Итак, сейчас ваша задача подобрать ряд понравившихся вам картинок. 4-6 штук будет достаточно, но можно больше или меньше – все зависит от вашей фантазии. После чего их необходимо будет перенести в Figma.
Это можно сделать двумя способами – скопировать изображение и вставить его в ваш рабочий файл или сохранить картинку и перенести ее с рабочего стола в рабочий файл – выбирайте что вам удобнее :)
Это можно сделать двумя способами – скопировать изображение и вставить его в ваш рабочий файл или сохранить картинку и перенести ее с рабочего стола в рабочий файл – выбирайте что вам удобнее :)
6. Вырезаем картинки
Перед началом работы отметим, что ниже описанный прием выреза подходит в качестве нашего творческого решения (неровных краев, словно «вырезанных из журнала»), но не быстрого избавления «от фона» изображения – для этого лучше воспользуйтесь другими программами или сервисами.
6.1. Инструмент Перо»
Для того, чтобы вырезать какое-то конкретное поле на изображении нам необходимо воспользоваться инструментом «Pen» (переводится как «Ручка», но дизайнеры это называют «Перо»).
6.2. Обводим фигуру
После того как мы выбрали «Перо» мы приближаем общий обзор рабочего пространства, чтобы выбранная картинка нам была хорошо видна и начинаем работу.
Для этого мы обводим пером, в нашем случае, котика, расставляя по его контуры точки. Важно замкнуть фигуру, когда мы обводим котика (последняя точка должна прийти в первую).
Для этого мы обводим пером, в нашем случае, котика, расставляя по его контуры точки. Важно замкнуть фигуру, когда мы обводим котика (последняя точка должна прийти в первую).
6.3. Фиксируем контур
После того как мы закончили обводить котика и замкнули фигуру нажимаем на клавиатуре «Enter» - обводка почти завершена!
У нас получился тонкий замкнутый контур.
У нас получился тонкий замкнутый контур.
6.4. Заполняем контур
Следующий шаг – заполнить получившийся контур цветом. Для этого необходимо в меню в правой части экрана найти «Fill» и нажать рядом с этим словом на «+».
Цвет заполнения не важен потому что далее этот контур послужит основной для видимой части нашего исходного изображения (чтобы остался только котик, а фон в виде ковра и пола исчезли).
Цвет заполнения не важен потому что далее этот контур послужит основной для видимой части нашего исходного изображения (чтобы остался только котик, а фон в виде ковра и пола исчезли).
6.5. Приступаем к магии!
А именно – убираем фон.
Для этого важно проконтролировать, чтобы получившийся залитый цветом контур оказался четко под картинкой с котиком. Для этого можно воспользоваться подсказкой с горячими клавишами или меню в левой части экрана, где располагаются все слои (картинки и фреймы) нашего рабочего файла.
Для этого важно проконтролировать, чтобы получившийся залитый цветом контур оказался четко под картинкой с котиком. Для этого можно воспользоваться подсказкой с горячими клавишами или меню в левой части экрана, где располагаются все слои (картинки и фреймы) нашего рабочего файла.
6.6. Еще чуть-чуть
После того как залитый цветом контур оказался четко под картинкой с котиком необходимо выделить оба этих слоя: например, с помощью мышки или в левом меню со слоями.
Важно: выделить необходимо только эти два слоя.
Важно: выделить необходимо только эти два слоя.
6.7. Магия!
Финальная кнопка магии!
Нажимаем на круг в верхнем меню «Use as mask» и получаем вырезанную картинку.
Теперь по аналогичному алгоритму можно вырезать и остальные изображения :)
Нажимаем на круг в верхнем меню «Use as mask» и получаем вырезанную картинку.
Теперь по аналогичному алгоритму можно вырезать и остальные изображения :)
7. Размещаем картинки на фрейме
7.1. Перенос
Переносим картинки на фрейм (белый лист с подписью «обои на телефон Лены») с помощью мышки и составляем в понравившуюся композицию.
Рекомендуем также назвать каждый слой в левом меню, чтобы не путаться, когда все они окажутся на одном листе.
Для этого необходимо просто дважды нажать на выбранный слой в меню и написать любое название.
Рекомендуем также назвать каждый слой в левом меню, чтобы не путаться, когда все они окажутся на одном листе.
Для этого необходимо просто дважды нажать на выбранный слой в меню и написать любое название.
7.2. Следим за порядком
Располагая вырезанные изображения важно не забывать об их месте в левом меню (на каком уровне/слое они находятся).
Наше изображение будет, как торт, на который мы смотрим сверху – поэтому важно понимать какой слой как расположен, от этого будет зависеть общая картина.
Наше изображение будет, как торт, на который мы смотрим сверху – поэтому важно понимать какой слой как расположен, от этого будет зависеть общая картина.
7.3. Задаем цвет фона
После того как мы разместили первые изображения и наметки композиции у нас уже есть – мы заполняем фон желаемым цветом.
Рекомендуем брать схожие цвета с теми, что есть на изображениях – так общая картинка будет смотреться целостно.
Для этого необходимо выбрать сам Фрейм (нажать на подпись «обои на телефон Лены») после чего в правом меню поменять цвет заливки в ранее изученной графе «Fill» - нажать на квадратик цвета под графой и изменить цвет с помощью индикатора. Либо воспользоваться пипеткой и подобрать цвет с изображения.
Рекомендуем брать схожие цвета с теми, что есть на изображениях – так общая картинка будет смотреться целостно.
Для этого необходимо выбрать сам Фрейм (нажать на подпись «обои на телефон Лены») после чего в правом меню поменять цвет заливки в ранее изученной графе «Fill» - нажать на квадратик цвета под графой и изменить цвет с помощью индикатора. Либо воспользоваться пипеткой и подобрать цвет с изображения.
7.4. Оформление фона
Для этого мы подобрали картинку «паттерн» (когда есть много мелких повторяющихся рисунков).
Она квадратная, поэтому мы скопировали ее и объединили так, чтобы она стала прямоугольной, но вы можете найти и сразу прямоугольную.
После чего переносим получившееся изображение в наш фрейм и сразу отправляем его на последний слой!
Она квадратная, поэтому мы скопировали ее и объединили так, чтобы она стала прямоугольной, но вы можете найти и сразу прямоугольную.
После чего переносим получившееся изображение в наш фрейм и сразу отправляем его на последний слой!
7.5. Выбираем режим наложения
Уже выглядит неплохо, но хотелось бы сделать фон менее активным, чтобы на первом плане все же были котики.
Настало время магии 2! Для этого выделите слой с паттерном (выберите его в левом меню экрана) и поменяйте режим наложения в правой части экрана Layer -> Pass Trough.
Попробуйте все варианты и выберите подходящий вам! Мы остановились на режиме наложения «Overlay».
Настало время магии 2! Для этого выделите слой с паттерном (выберите его в левом меню экрана) и поменяйте режим наложения в правой части экрана Layer -> Pass Trough.
Попробуйте все варианты и выберите подходящий вам! Мы остановились на режиме наложения «Overlay».
7.6. Прозрачность фона
Выглядит чуть получше, но хотелось бы еще менее навязчиво показать фон – добавим ему прозрачности!
Все эти манипуляции с фоном – на ваш выбор. Мы просто показываем вам возможности :)
Все эти манипуляции с фоном – на ваш выбор. Мы просто показываем вам возможности :)
7.7. Обрезаем картинку
Осталась последняя картинка с подписью «Кот всему голова». На ней есть еще другие элементы, а хотелось бы оставить только подпись – поэтому давайте обрежем картинку!
Для этого нажимаем на картинку à затем в правом меню нажимаем на «Image» à после на появившемся окне в графе «Fill» выбираем «Сrop».
После с помощью появившейся вокруг выбранной картинки рамки редактируем видимую часть и нажимаем «Enter» по завершению работы.
Для этого нажимаем на картинку à затем в правом меню нажимаем на «Image» à после на появившемся окне в графе «Fill» выбираем «Сrop».
После с помощью появившейся вокруг выбранной картинки рамки редактируем видимую часть и нажимаем «Enter» по завершению работы.
7.8. Редактируем картинку
Мы немного поменяли цвет фона – сделали его чуть светлее. Поэтому надпись про кота теперь стала очень яркой, а хотелось бы, чтобы она была чуть «спокойнее» и не перетягивала на себя внимание.
Давайте еще немного отредактируем фотографию! Для этого меняем режим наложения на «Color burn», затем выделяем картинку и переходим в правом меню в «Image», редактируя Saturation (насыщенность( и Temperature (температуру).
Давайте еще немного отредактируем фотографию! Для этого меняем режим наложения на «Color burn», затем выделяем картинку и переходим в правом меню в «Image», редактируя Saturation (насыщенность( и Temperature (температуру).
8. Последние штрихи!
8.1. Добавим контур картинкам
Отрегулируем размер линии и цвет нашего карандаша в правом меню. Рекомендуемая ширина линии – от 40 пикселей. Но можно меньше/больше. Цвет обводки рекомендуем выбирать из цвета с картинки для более гармоничной композиции.
8.2. Корректируем порядок слоев
После чего непрерывной линией обводим контур выбранного котика (словно рисуем настоящим карандашом).
Сейчас контур получился, однако «лежит» он на фрейме, а не в фрейме (это важно, для финального этапа). Для этого в левом меню проконтролируйте, чтобы получившиеся слои под названием «Vector» были в фрейме «обои на телефон Лены».
По аналогии работаем с другими изображениями.
Сейчас контур получился, однако «лежит» он на фрейме, а не в фрейме (это важно, для финального этапа). Для этого в левом меню проконтролируйте, чтобы получившиеся слои под названием «Vector» были в фрейме «обои на телефон Лены».
По аналогии работаем с другими изображениями.
8. Финал!
Дело осталось за малым – выгрузить итоговую работу из Figma.
9.1. Проверяем все ли в фрейме
Перед этим важно убедиться, что все изображения находятся в фрейме, а порядок слоев соблюден (чтобы была целостная композиция и одна картинка не сильно перекрывала другую).
9.2. Выгружаем картинку
После того как вы убедились, что все в порядке – можно выгружать получившееся изображение.
Для этого выделите весь фрейм (в левом меню или нажав на подпись самого фрейма в рабочем поле «обои на телефон Лены»).
Затем в правом нижем меню найти графу «Export». Далее все очень просто – выбираем формат PNG и нажимаем кнопку «Export» внизу, сохраняем в удобную папку на компьютере и готово!
Для этого выделите весь фрейм (в левом меню или нажав на подпись самого фрейма в рабочем поле «обои на телефон Лены»).
Затем в правом нижем меню найти графу «Export». Далее все очень просто – выбираем формат PNG и нажимаем кнопку «Export» внизу, сохраняем в удобную папку на компьютере и готово!
Каким получится результат?
По итогу мастер-класса у участников будет составлен коллаж с понравившимися изображениями (любимых исполнителей, персонажей из видеоигр и т.д.) в формате png, соотношение сторон 9:16. Участники познакомятся с таким инструментом, как Figma, и попробуют себя в роли графического дизайнера.
Вопросы для обсуждения
1. Вы попробовали себя в роли графического дизайнера. Какие важные для себя моменты в ходе мастер-класса вы бы отметили?
2. Как вы думаете, какими качествами должен обладать человек этой профессии?
3. Предположите какие могут быть трудности у человека в этой профессии?
4. Какая глобальная миссия у профессии графического дизейнера?
5. Работали бы вы графическим дизайнером? Если нет, то почему? Если да, то почему?
2. Как вы думаете, какими качествами должен обладать человек этой профессии?
3. Предположите какие могут быть трудности у человека в этой профессии?
4. Какая глобальная миссия у профессии графического дизейнера?
5. Работали бы вы графическим дизайнером? Если нет, то почему? Если да, то почему?
Разработчики