Figma. Как грамотно работать с фотками в Фигме.
HTML-код
- Опубликовано: 10 сен 2024
- В этом видео расскажу о том, как легко вставлять фотки в Фигму и не мучаться с масками.
Мой сайт: mikekaynov.ru. Репетиторство по дизайну - приходите в Telegram или пишете на почту на сайте )
Фоновая музыка: / @audiolibrary_
Спасибо, пару часов думала как же эту фотку залить, чтобы она адаптировалась при изменении рабочей области. Видео бесценно.
Вам спасибо!
спасибо друг, я как раз искал то что нужно, а именно кроп, ты мне очень помог, спасибо тебе
Это же круто! Еще много полезных видосов есть у меня по фигме, не забыл подписаться? ))
Благодарю!
Вам спасибо, Лена!
супер, спасибо!
Оля, спасибо за участие!
спасибо, столько времени искала :)
А ведь все было где-то рядом )
Спасибо, помог👍 Лайк, подписка
И с меня тоже лайк!
А мне понравился вариант фото где края размытые а центр чёткий у фото. Это про crop. Но когда нажимаешь на энтер то размые края изчезают, а жалко. Можно их сохранить ?
Можно маску такую сделать, с размытыми краями
У меня почему то при экспорте изображения(ctrl+shif+k) оно появляется как изображение, а не как прямоугольник
Dmitriy Holod Вы имеете ввиду что в слоях оно image? Ничего страшного, все описанное работает. Кстати, если с Alt сделать даблклик по картинке, то автоматически она перейдёт в режим crop.
Убрал задний фон в фото. Потом хотел заменить этот фон на другой. То есть одну фотку хотел наложить на другую. Последующее фото "убирает" предыдущее. Что я не так делаю?
Скорее всего надо плюсиком добавить новый слой с цветом, заменить его на фото и положить ниже вырезанной фотки, тогда у вас будет сразу два слоя включено.
Привет, может подскажешь. Устанавливаю плагины. У меня кнопка try in out и перекидывает на run. Как только я выхожу из Фигмы, все плагины слетаю, все. И приходится каждый раз заново устанавливать. Ищу ответ и не нахожу, может подскажешь как их установить так, чтоб пока сам не удалил они стояли, потому что это гемор.
Привет, запоздало, но напишу. Нужно перейти на мини-страничку плагина (не нажимая run) и через иконку трех точек выбрать Save - тогда он останется в списке плагинов.
Спасибо за ваш труд.
А вам спасибо за внимание
Спасибо, отличный видос
Вам спасибо!
Раньше для верстки я использовал фотошоп и для вырезки фото использовал инструмент Slice. А в фигме как это сделать?
В фигме тоже есть инструмент slice, клавиша S, там же где инструмент создания фрейма.
спасибо @@mikekaynov
Это именно то, что я не могла сделать и, спасибо тебе, у меня получилось!
Ну это же круто!
Здравствуйте, спасибо за урок. Можете подсказать, как увеличивать картинку без потери качества
Попробуй с зажатой кнопкой шифт
Либо инструментом scale - включается клавишей К, либо просто с зажатым Shift
Добрый день! Подскажите, пожалуйста, когда делается адаптация под мобильную версию, картинки нужно уменьшать в шопе дополнительно с четкими размерами или можно линковать большие изображения, готовые для десктопной версии.
И как можно узнать разрешение прилинкованных фотографий?
Анна Журавель Не обязательно. Можно кадрировать режимом crop в фигме, главное помнить, что уменьшать фото можно, а вот увеличивать больше ее исходного размера не стоит - ухудшится детализация. Не очень понял вопрос про исходное разрешение, если фотка есть отдельно - посмотрите в свойствах, если она только в фигме - выгрузите оригинал и поглядите.
@@mikekaynov спасибо большущее за ответ и невероятную скорость!!!!
Добрый вечер! Подскажите пожалуйста как правильно экспортировать картинки для верстки? Нужно ли делать это для каждого разрешения отдельно? Какие размеры картинок предпочтительней передавать для верстки?
Привет. Для верстки в вебе обычно картинки выводятся либо в jpg, чтобы поменьше весили, либо в png, если нужна прозрачность. Размер - @1x (т.е. 1:1) и @2x (в два раза больше) - для ретина-адаптации. Как именно будет нарезаться картинка в верстке на самом деле обычно решает верстальщик, т.к. он что-то может вырезать с фоном, что-то кропнуть по-другому. Поэтому если у вас просто прямоугольные картинки - вырезайте как есть, если сложные по форме, с прозрачностью - доверьтесь верстальщику.
@@mikekaynov Спасибо!
Здравствуйте! Как сделать фото круглым?
Привет. Нарисовать круг и вставить в него фото, выбрать в качестве fill не color, a image.
Спасибо 👍🏿
Вам спасибо за участие )
Привет всем из Web Design Chat ))
Очень помогло, спасибо!
Маша, я очень рад
добрый день, я не могу элементарно открыть панель инстр.
Значит, что-то делаете не так. Пишите в группу в телеграм, подскажем.
Отличный канал, супер!!!
Спасибо за оценку, Ирина!
Здравствуйте. Подскажите пожалуйста как сделать карточки/фото ( как будто приподнятые ) над основным контентом? Как будто их приподняли и они как бы в воздухе над основным слоем.
Наташа, интересно как это сделать при наведении или просто сделать статичный дизайн?
Привет. Спасибо за видео. Есть вопрос. Мне надо вставить в блоки (пусть будет условно 2000x2000 px размер блоков), картинки. Скрины веб страниц. Веб страницы разной длины.
По ширине они заполняются хорошо, но по высоте у страниц с высотой более 2000px, получается не очень хорошо. Они смещаются, но мне надо чтобы шапка страниц была на всех блоках одинаковая. То есть мне не важно как отрежет внизу блок, но важно чтобы сверху начиналось всё нормально. Соответственно вставив в одинаковые блоки разные по высоте картинки, мне надо некоторые картинки по высоте подогнать.
Вопрос: Возможно ли это сделать? Вручную или автоматически настроить "прибитие" к верхней точке блока? По типу выравнивания объекта по верхнему краю в фотошопе
Ethernord1703 Если я правильно понимаю задачу, то можно зайти в режим crop (проще всего - alt + даблклик на картинке) и просто подвинуть ее вниз, она «примагнитится» к верху блока, когда края совпадут. Автоматически это не сделать. Если вдруг что-то не получается - напишите в телеграм мне, ссылка под видео есть, поможем.
@@mikekaynov Сейчас попробую, благодарю за оперативный ответ
@@mikekaynov Супер, даже ни смотря на то что тут иногда надо править вручную, это сэкономит кучу времени. Ох, а я половину делал в фотошопе, по одной картинке, растягивать. Ох жесть, надо было раньше про фигму подумать и вас найти.
Спасибо большое, подписался. Буду ждать еще интересного чего, а если сделаете курс, то вообще супер будет.
И речь хорошая и без воды можете донести информацию. Сейчас это очень редко найти можно)
Ethernord1703 Спасибо, что оценили. Курс не обещаю, но какими-то особенностями работы делиться буду )
Спасибо большое!
Всегда пожалуйста
Я не могу точно описать вопрос, но все же. Есть такой эффект с фото, когда кажется будто оно приближается к тебе с одной стороны, а с другой уменьшается. Как сделать данный эффект???
Настя, вы наверное имеете ввиду эффект, как будто карточка с фото поворачивается немного в одну сторону и потом в другую? Это надо делать через редактирование точек, чтобы настроить перспективу фотке. И можно будет сделать только в прототипе или анимацией. Если надо - ответь, я запишу видео и покажу как сделать через Smart Animate.
Хорошее видео. Спасибо. Не подскажете, как сделать заливку фигуры в Figma, сделанной из прямых линий (line). Сейчас я делаю это с помощью пера (pen), обводя им контур. Возможно, это не правильно.
Я не совсем понял вопрос, но, скорее всего, вам поможет капелька рядом с пером, которая закрашивает площадь внутри контура. Если можете - напишите мне в телеграм с картинками :), ссылка под видео, я помогу.
Сегодня пытался одну картинку наложить на другую, что-то не получается. Подскажите как?
Они рядом становятся, а друг на друга не ложатся. Спасибо заранее, подписка
Очень похоже на поведение картинок в автолейауте. Любые изображения могут накладываться друг на друга.
Было бы здорово, если бы вы показали мне скриншот ваших слоев - можно в телеграм, ссылка под видео.
что делать, если png отображает с фоном? все в настройках экспорта включала и выключала. ничего не работает.
Значит изначально в png был фон. Если вы про экспорт из своего проекта - проверьте, чтобы не был включен в экспорт фон фрейма или пишите в телегу - поможем.
Не подскажите, в фигме ещё нельзя обрабатывать фото из цветного в чб?
Ну можно просто убрать цветность в настройках изображения. Нажмите справа в свойствах на фотку, откроется окошко и там найдете.
@@mikekaynov Спасибо большое!
@@tsd74 Вам спасибо за внимание и участие )
Добрый день, спасибо за видео, расскажите пожалуйста про то как можно располагать картинки на веб странице, чтобы не было вопросов у верстальщиков, например можно ли вставлять картинки беспорядочно расположив и разных размеров на странице.
Можно, но аккуратно ) Обычно для веба стараются работать по 12-колоночной сетке, она помогает выстраивать картинки по какой-то определенной схеме. Бывает так, что от сетки можно отказаться, и сделать сложное композиционное решение, но чаще это приходит с опытом.
а как после вставки фото на прямоугольник, можно ее редактировать?
Редактировать фото? Можно перейти в режим Crop, для изменения положения и размера фотки внутри контейнера. Если надо обработать фильтрами - то только плагины. Если более серьезная работа с ретушью - фотошоп или аналоги.
можно еще раз комбинацию клавишь написать,что б фото вставить?Я не совсем понимаю
ctrl+shift+k
Спасибо, Даша!
Рамки нужны не только прямоугольные ,но и овальные ,об этом в видео ничего ...
В фигме можно нарисовать не только прямоугольник, хоть в звездочку вставляйте фотку.
Спасибо большое!
Семён, вам спасибо за оценку