Как в фигме сделать круглую фотографию
Перейти к содержимому

Как в фигме сделать круглую фотографию

  • автор:

Как работать с изображениями в Figma

Простая инструкция: как добавить изображение на макет и отредактировать его без «Фотошопа».

Meery Mary для Skillbox

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

В Figma очень удобно работать с изображениями: быстро обрезать, удалить фон или скорректировать цвет. А ускорить работу над ними помогут встроенные функции и плагин.

Как добавить изображение на макет

Перетащите изображение на макет с рабочего стола или из папки:

Скопируйте изображение сочетанием клавиш Ctrl (⌘) + C и вставьте его в макет, нажав Ctrl (⌘) + V:

Также можно копировать изображения из интернета: нажмите правой кнопкой мыши на любую иллюстрацию в браузере, выберите «Копировать изображение», затем перейдите в Figma и нажмите Ctrl (⌘) + V:

Функцией Place Image можно автоматически поставить изображение сразу туда, где оно должно находиться:

  • Создайте несколько произвольных фреймов на макете.
  • Нажмите на иконку , выберите пункт File и нажмите на Place Image. Или зажмите клавиши Ctrl (⌘) + Shift + K.
  • В появившемся меню выберите любые изображения.
  • По очереди добавьте изображения на фреймы. На курсоре отображается миниатюра текущей иллюстрации.

С помощью заливки можно использовать изображение в качестве фона фрейма или фигуры:

  • Выберите ваш фрейм или фигуру.
  • На панели инструментов в блоке Fill нажмите на цвет и в появившемся меню в верхнем правом углу вместо Solid выберите Image.
  • В том же меню нажмите на чёрно-белую картинку и выберите любое изображение на компьютере.

Аналогично можно использовать изображение как заливку обводки. Только вместо блока Fill нужно заходить в блок Stroke.

Настройки изображения

В Figma у любого изображения можно изменить свойства заливки и сделать минимальную коррекцию цвета. Чтобы открыть эти настройки, выделите любую иллюстрацию на макете, затем в блоке Fill нажмите на её миниатюру.

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

Fit — изображение заполняет пространство так, чтобы его было видно целиком.

Crop — обрезает изображение и фиксирует его видимую часть. При изменении размера оно может растянуться.

Tile — всё свободное пространство заполняется копиями изображения. Это свойство очень удобно использовать с паттернами.

Хотя в Figma можно сделать минимальную цветокоррекцию, качественно отредактировать фотографию не получится — для этого лучше идти в Photoshop.

Настройки цветокоррекции в Figma:

  • Exposure — экспозиция.
  • Contrast — контраст.
  • Saturation — насыщенность.
  • Temperature — температура.
  • Tint — оттенок.
  • Highlights — интенсивность света.
  • Shadows — интенсивность тени.

Маска слоя

С помощью маски слоя можно придать изображению нестандартную для Figma форму:

  • Создайте любую фигуру, выберите изображение на макете и расположите их друг на друге. Проследите, чтобы на панели слоёв изображение было выше фигуры.
  • Зажав Ctrl (⌘), выделите фигуру и изображение, затем на панели инструментов нажмите на иконку .
  • Чтобы изменить отображаемую часть изображения, просто выделите её на панели слоёв и измените размер на холсте.

Таким же образом изображением можно заполнить что угодно: от нескольких фигур до текста.

Полезные приёмы

Отразить изображение по вертикали можно с помощью горячих клавиш Shift + H. По горизонтали — Shift + V.

Скопировать SVG-иконку с любого сайта в Figma можно через браузер:

  • Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
  • В окне с кодом на панели сверху нажмите на иконку и выберите нужную иконку на сайте.
  • В HTML-коде выделится тег , прямо над ним будет — нажмите на него и скопируйте с помощью сочетания Ctrl (⌘) + C на клавиатуре.
  • Зайдите в Figma и нажмите Ctrl (⌘) + V — иконка встанет на макет.

Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.

Как установить плагин Remove BG:

  • Зайдите на страницу плагина и установите его, нажав Install.
  • Зарегистрируйтесь на сайте remove.bg.
  • На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
  • Зайдите в Figma, нажмите на иконку , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
  • Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в PluginsRemove BGRun. Фон из иллюстрации удалится.

Учтите, что этот способ не подойдёт для финального удаления фона, так как плагин работает не идеально. Но если вам нужно просто показать идею, то Remove BG поможет сэкономить кучу времени.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Как в Figma сделать фильтр для фото

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

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

В Figma есть много всяких эффектов, которые помогают дизайнерам сделать по‑быстрому что-то интересное и достаточно качественное для коммерческого проекта. В этой инструкции рассказываем, как сделать фильтр для фото.

Чтобы сделать фильтр, вам понадобится плагин Noise & Texture — скачать его можно по этой ссылке.

Этот способ рисования паттерна придумал дизайнер Vijay Verma. Оригинальную инструкцию на английском языке можно прочитать в Twitter.

Подготовка паттерна

  • Возьмите из интернета любую чёрно-белую фотографию. Мы будем использовать фото с Unsplash.
  • Добавьте на макет квадрат с размерами 100×100 пикселей. Затем в боковой панели настроек в блоке Fill перекрасьте квадрат в чёрный.
  • В том же меню вместо Solid выберите Linear. У первого цвета градиента сделайте непрозрачность 80%, а у последнего — 10%. Затем на холсте поверните прямую градиента так, чтобы он был направлен справа налево ←.
  • Уменьшите ширину квадрата до 50 пикселей, скопируйте его и поставьте рядом. Затем выделите их и нажмите Ctrl (⌘) + G, чтобы сгруппировать.
  • Добавьте на макет ещё один квадрат произвольного размера. Например, 1000×1000 пикселей.
  • Нажмите правой кнопкой мыши по фигуре, наведите курсор на Plugins и выберите Noise & Texture. В появившемся окне нажмите на иконку с изображением картинки и затем кликните по группе с градиентами. Затем кликните по пустой фигуре.
  • В том же окне плагина укажите максимальный Amount и размер Size — важно, чтобы на предпросмотре у вас не возникало лишних горизонтальных линий.
  • Нажмите кнопку Add to layer. Выделите появившуюся картинку, затем в боковой панели настроек в блоке Fill нажмите на её образец. В появившемся окне около слова Tile укажите значение 10%. Если в таком случае горизонтальных линий получается слишком много, то число можно увеличить.

Текст

  • Скопируйте получившуюся работу и удалите из неё фотографию с цветными пятнами.
  • Добавьте на макет текстовый слой белого цвета и сделайте из него компонент . Это нужно, чтобы вы могли разом менять весь текст как угодно, а не отдельно по слоям.
  • Скопируйте компонент во фрейм с эффектом и в панели слоёв поставьте его ниже паттерна — как вы делали с фотографией.
  • Сделайте копию этого текстового слоя. Затем в блоке Effects нажмите на плюсик, вместо Drop shadow выберите Blur, затем кликните на и укажите значение 159. В блоке Stroke нажмите плюсик, укажите цвет #EBFF00 с непрозрачностью 94%. Вместо Outside укажите Center, а толщину обводки — 29 пикселей. В блоке Fill нажмите на минус или иконку глаза около цвета.
  • Сделайте ещё одну копию текста и поставьте её под предыдущий слой жёлтого цвета. Этот слой нужно сделать так же, как предыдущий, но его настройки будут немного другими. Blur — 72, цвет обводки — #BD00FF с непрозрачностью 64%, толщина обводки — 180 пикселей.
  • Если вы будете использовать другие цвета, то следите, чтобы между цветными пятнами не было явной чёрной границы. Это можно регулировать насыщенностью цвета и размытием.

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Другие короткие инструкции по Figma

  • «Часы» из градиента
  • Анимированный паттерн
  • Пластиковая иконка
  • «Жидкие» кнопки
  • Объёмный леденец
  • Анимированный слайдер
  • Подсветка из градиентов
  • «Светящийся» градиент
  • Анимированный глитч

Обтравка в Figme? Запросто

Инструменты Фигмы могут позволить вам не только собрать интерфейс, но и подготовить изображения для вашего дизайна. Я постараюсь довольно подробно рассказать о том, как в Фигме сделать обтравку фото или, иными словами, как вырезать объект из фотографии.

Обтравка в Figme? Запросто

Итак, у нас есть картинка, с которой мы хотим вырезать горшок.

Для работы нам потребуется инструмент перо (P).

С помощью пера мы аккуратно обводим наш объект на фотографии. Нам не обязательно с первой попытки попасть пиксель в пиксель — мы можем отредактировать наш вектор в дальнейшем.

Обтравка в Figme? Запросто Обтравка в Figme? Запросто

После того, как мы выделили объект (в моем случае только часть объекта, потому что обводить каждый листик ради примера я поленился), нам надо убрать у вектора обводку и добавить к нему заливку.

Обтравка в Figme? Запросто

Сейчас у нас просто вектор поверх картинки, а чтобы завершить начатое, нам надо сделать наш вектор маской: выделяем вектор и жмем cmnd + M или ctrl + M.

Обтравка в Figme? Запросто

Обратите внимание, что вектор-маска должен располагать ПОД картинкой.

Обтравка в Figme? Запросто

Готово! Мы обтравили объект на фотографии в Фигме.

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

Обтравка в Figme? Запросто

Алсо, для тех, кто особо не понимает, как пользоваться пером: вы можете управлять изгибом вектора, двигая его «усики» — как по градусу поворота, так и делая их длиннее или короче. Простыми словами: чем короче «ус», тем меньше угол изгиба вектора до точки привязки влияет на изгиб следующего вектора.

Руководство по работе с изображениями в Figma

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

Импорт изображений в Figma

Через меню

Это может показаться очевидным, но, чтобы начать работать с изображениями в Figma, вам нужно сначала импортировать их в свой файл дизайна. Вы можете сделать это из меню, перейдя в File, затем щелкнув Place Image. Вы также можете найти эту же опцию в нижней части раскрывающегося списка Shape Tools или нажав удобную комбинацию клавиш Shift + Command + K. Затем откроется файловый браузер, позволяющий выбрать несколько изображений. Отсюда мы не просто бросаем их как попало на холст. Вместо этого Figma позволяет вам добавлять их по одному, кликая или перетаскивая. Это дает вам гораздо больший контроль над размещением и даже размером изображений при импорте. Это может показаться простой вещью, но на самом деле она довольно мощная, особенно если учесть, как обрабатываются изображения в Figma. Позвольте мне быстро объяснить, почему. В Figma мы не рассматриваем изображения как отдельный тип объекта, вместо этого мы рассматриваем их как заливку. Когда вы импортируете изображение, мы создаем прямоугольник с такими же размерами * и применяем к нему заливку изображения. Если вы знакомы с CSS, подумайте об этом как об установке изображения в свойстве background элемента div. Это значительно упрощает обрезку, изменение размера и замену изображения в процессе работы над дизайном. Итак, вернемся к импорту. Как я уже сказал, когда вы используете метод Place Image, вы получаете возможность добавить несколько изображений по одному. Круто то, что, поскольку изображения обрабатываются как заливка, вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам. Один из вариантов использования этого – быстрое добавление изображений профиля к трем разным дизайнам (круг, квадрат и прямоугольник с закругленными углами), которые вы хотите проверить.

С помощью перетаскивания

Второй способ импорта – перетаскивание. С вашего рабочего стола или из папки на вашем компьютере вы можете просто перетащить одно или несколько изображений в Figma. С помощью этого метода мы размещаем их на холсте ровными рядами по десять. Вы можете быстро воспользоваться нашими новыми функциями Smart Selection. Просто выберите все изображения, которые вы импортировали, а затем отрегулируйте интервал. Или, если вы хотите стать по-настоящему модным, вы можете быстро создать сетку, а затем поменять их местами, как в настоящем фотофиде. Хотите больше узнать о Smart Selections? Ознакомьтесь с нашей справкой и статьей в блоге Эти два метода импорта – импорт с помощью place image или перетаскивание – являются чрезвычайно универсальными, но они требуют, чтобы у вас уже были изображения, загруженные на ваш компьютер. Итак, что, если вы хотите быстро проверить кучу идей, не занимая драгоценное место на жестком диске? Не волнуйтесь, Figma поможет вам.

С помощью метода копировать + вставить

Третий способ импортировать изображения — это просто скопировать их и вставить в документ. Когда вы нашли идеальное изображение в Интернете, просто щелкните по изображению правой кнопкой мыши и выберите «Копировать». (Это должно работать в любом браузере). Вернувшись к Figma, вы можете вставить скопированное изображение в ваш файл. Хотя этот метод работает только с одним изображением за раз, это быстрый способ опробовать кучу идей, плюс не нужно сохранять изображения на жестком диске.

Манипулирование изображениями в Figma

Теперь, когда у вас есть изображения в Figma, вы можете редактировать их по своему желанию. Несмотря на то, что мы не утверждаем, что Figma является инструментом редактирования фотографий, мы предоставляем вам возможность сделать несколько быстрых изменений, таких как настройка экспозиции или контраста. По умолчанию изображения настроены так, чтобы заполнить любую фигуру, но мы даем вам полный контроль над этим. Если вы щелкнете по параметру заливки на панели свойств, вы увидите всплывающее окно. В верхней части этого окна вы найдете небольшой выпадающий список, который позволяет переключаться между Fill, Fit, Crop и Tile.

Fill

Как вы можете видеть, режим Fill расширяет изображение до размеров фигуры, в которой оно находится.

Fit

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

Crop

Режим Crop позволяет изменять размеры и перемещать изображение по границам фигуры.

Tile

Ну . вы поняли! Замостить плиткой 🙂

Советы и приемы

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

Быстрое кадрирование (Quick Crop)

Нужно быстро обрезать изображение? Выберите слой изображения, а затем нажмите кнопку кадрирования на верхней панели инструментов. Или, если вы являетесь поклонником сочетаний клавиш (что и должно быть), просто нажмите и удерживайте клавишу option и дважды кликните по изображению, чтобы открыть настройку кадрирования.

Изображения, как стили

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

Слои заливки и режимы наложения

Я не буду вдаваться в подробности всех режимов наложения, но я объясню, как полезно добавить несколько слоев заливки. Допустим, вы хотите, чтобы ваше изображение было черно-белым. Один из способов сделать это – настроить ползунок насыщенности под настройками заливки. Однако, если вам когда-нибудь понадобится заменить это изображение на другое, вам придется повторно применить этот параметр насыщенности. Здесь пригодятся слои заливки и режимы наложения. Добавив сплошную заливку, установив цвет на черный или белый, а затем изменив режим наложения на color, вы получите черно-белые изображения с более точным контролем.

Копирование слоев заливки

Одна хитрость, которую я обнаружил в Figma, которая сэкономила мне массу времени, заключается в том, что вы можете копировать и вставлять слои заливки (это также относится и к слоям Stroke и Effect). Продолжая приведенный выше пример, это позволяет быстро взять этот черно-белый заливочный слой и применить его к дополнительным изображениям с помощью сочетания клавиш command+c и command+v.

Изображения, как контур

Хотя может быть не так много вариантов использования изображения в качестве контура, полезно знать, что Figma поддерживает это. J Как я уже говорил, изображения являются важной частью процесса проектирования. Независимо от того, работаете ли вы с ними ежедневно или только когда вам нужно обновить аватар в Twitter, вы не можете их игнорировать. Итак, от поиска предпочтительного метода импорта для ускорения процесса проектирования с использованием стилей изображений, надеюсь, это руководство было полезным. Есть какие-нибудь дополнительные советы и рекомендации, которые я, возможно, упустил? Обязательно дайте мне знать в Twitter! * Обратите внимание, что разрешение изображений, размер которых превышает 4000 пикселей, будет уменьшено для обеспечения производительности. * Все изображения в этом руководстве взяты с unsplash.com и diverseui.com. Перевод статьи Josh Dunsterville

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *