Figma – основные возможности

Рассмотрим другой вариант скругления. Рамку увеличиваем до 10. Щёлкаем по фотографии. И, нажав левой кнопкой мышки по указанному на фото кружочку, тянем его внутрь фото. Увидим, что углы закруглятся. Причём сразу виден радиус скругления углов. В данном случае скругляются все углы сразу.

Отменим последнее скругление, нажав <Ctrl> + <z>. Но есть ещё возможность скруглить отдельный угол. Для этого выделить фото, держать <Alt> и левой кнопкой по указанному на фото кружочку тянем его внутрь фото. Увидим, что только указанный угол закруглится.

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

Введите вручную различные цифры в каждом поле этих значений вы увидите, что скругления углов поменялись. Причём, когда вы будете вводить значение в 2,3 и 4 ячейке, слева значок поменяется, показывая, на какой угол действует скругление.

Пример:

Приблизим правый верхний угол.

Нажав на 3 точки справа появится окно слева. Перемещаем ползунок и одновременно смотрим, как изменится скругление. Если присмотреться внимательно, можно увидеть, каким образом меняется скругления по этому ползунку.

Теперь уберём скругление. Нажимаем по стрелке. Теперь доступно выделенное поле и в него вводим 0. Всё, скругления убраны.

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

Теперь щёлкаем справа по пустому месту правой кнопкой мыши и выбираем указанный пункт.

Может всплыть такое окно с запросом.

Естественно, выбираем «разрешить». Нам постоянно нужен будет буфер обмена. Там, где вы нажмёте мышкой и выберете пункт «Paste Here», будет расположен левый верхний угол нашего фото. Выбираем полученное фото и меняем его.

Нажимаем по стрелке и дальше, как обычно, выбираем фото. В Санкт-Петербурге мы ходили в «дом вверх дном». Его я и загрузил.

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

А вот другой пункт <Flip horizontal>. Его можно использовать, когда надо повернуть фотографию относительно вертикальной оси. Например, снимок был сделан на переднюю камеру смартфона, а буквы там в зеркальном отражении получились. Вот чтобы правильно всё отображалось, надо использовать эту возможность. Для дальнейшей работы с помощью мышки я приблизил второй кадр к первому.

Настройка цветовых параметров фото (изображения) в рамке.

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

Выбираем любое фото и далее выбираем свойства фото.

Здесь мы рассмотрим режимы, выделенные рамкой. Передвигая ползунок, увидите, как меняется фото.

Exposure – по сути, это яркость. Передвигая ползунок, увидите изменения.

Contrast – естественно, это контрастность. Передвигая ползунок, увидите изменения.

Saturation – это насыщенность. Передвигая ползунок, увидите изменения.

Temperature – цветовая температура (точнее, выбор между холодным оттенком, средним и тёплым). Если говорить простым языком, то цветовая температура – это оттенок, который накладывает свет на все предметы вокруг себя. Освещение бывает нейтральным, холодным и тёплым, с первым всё понятно – он практически не влияет на цветопередачу. Большинство студийных осветителей относятся именно к этой группе. Холодный свет даёт вокруг себя голубоватый оттенок, а тёплый – желтоватый. Передвигая ползунок, увидите изменения.

Tint – оттенок цвета. Если его передвигать совместно с Temperature, то можно получить новые оттенки фотографии. Передвигая ползунок, увидите изменения.

Highlights – освещение. Особенно нужно подгонять, когда фото центрального объекта, например, человека, сделано на фоне яркого неба. Или же, наоборот, на фоне тёмного неба при закате. Передвигая ползунок, увидите изменения.

Shadows – тень в переводе. Но на самом деле это настройка освещения центрального объекта фото. Передвигая ползунок, увидите изменения.

Для примера можно выбрать фото человека на фоне каких-то удалённых объектов (домов).

Hihglites это настройка освещения удалённых объектов (домов), а Shadows – настройка освещения человека. Используйте совместно Hihglites и Shadows.

Для возврата ползунков в положение по умолчанию достаточно щёлкнуть мышкой по маленькой чёрточке по центру.

Я создал ещё один дубликат рамки с помощью горячих клавиш. Нажмите и держите <Alt> и выделив необходимое фото левой кнопки мыши, переместите его в сторону. Увидите, что будет перемещаться уже копия фото. Сменил изображение на другое.

Здесь все настройки по умолчанию. А теперь сделаем копию и этого кадра и настроим его по-другому.

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

Если вам что-то не нравится в цветовой гамме фото, то используйте для настройки именно эти ползунки.

Настройка размерных параметров фото (изображения) в рамке.

Рисуем ещё один прямоугольник. В правой колонке справа от «Stroke» нажимаем знак «+». Появится рамка чёрного цвета толщиной 1 px.

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

Для того, чтобы показать, чем отличаются параметры, я выбрал такое фото.

Fill – ставится по умолчанию – это фотография вмещается в рамку

Fit – фото вмещается в рамку в оригинальных пропорциях, поэтому после выбора данного пункта необходимо с помощью левой кнопки мыши подогнать рамку под фото.

Crop – выбираем этот пункт. Чтобы лучше понять, что он делает, сначала рамку с фото сделайте примерно квадратной. Затем вначале выберите Fill, а затем выберите Crop. Теперь видно, что размер фото больше рамки. Tile рассмотрим позже.

Закроем крестиком параметры фото. Получим вид, как будет смотреться данное фото.

А вот Tile больше предназначен для создания так называемой мозаики из мелкого изображения. Покажу на примере логотипа. Логотипом можно выбрать любой текст. Для этого на верхней панели выберем инструмент «Текст». Зажав левую кнопку мыши, рисуем прямоугольник

Внутри него будет мигать курсор. Это и есть начало нашего текста. Я набираю свой логотип: «ЛиАнВи». Теперь выделяем мышкой написанный текст (при необходимости можно приблизить текст <Ctrl> + <колёсико мышки>). В параметрах текста выставляем такие значения.

Можно использовать и свой текст и свои значения. Главное, чтобы размер был небольшой. Теперь рамку надо уменьшить до размеров текста. Делаем примерно такой размер.

Теперь нам надо этот текст преобразовать в PNG-формат. Для этого сохраним его в PNG. В правой колонке в разделе «Export» выберем значения указанные стрелками и нажмём кнопку. Сохраним к себе на компьютер файл в формате png.

Правой кнопкой мыши щёлкаем по тексту и в появившемся меню выберем этот пункт.

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

А вот теперь нам надо выделить этот прямоугольник и в его свойствах раздела «Fill» выбрать следующие параметры.