Что можно сделать с цветом, как настраивать градиенты и редактировать изображения: 0:15 - локальные цветовые стили 3:20 - сквозные цветовые стили 4:25 - слои цвета 6:16 - обзор палитры 9:05 - линейный градиент 10:10 - радиальный градиент 11:05 - градиент конус 11:25 - градиент ромбом 11:50 - режимы отображения изображений 13:41 - настройки изображения 14:37 - как я вставляю картинки, когда нужно 2-5 штук 16:32 - как я вставляю картинки, когда нужно много штук 17:42 - копируем слои градиентов 18:58 - один из вариантов применения кропа картинок
Спасибо за ролик! Очень круто, что это не просто обзор, а прямо полноценный урок, где можно понять как применять тот или иной инструмент в работе над сайтом!!😃😃😃😃
Согласна с предыдущими комментаторами😄 Этот функционал знаю, но смотреть все равно было очень интересно) Особенно про то, как можно применить это на практике) Идея с кропом - очень интересная, спасибо! Хотелось бы в обновленном ролике увидеть что-нибудь про режимы наложения👍
Лайфхак с "радугой" - это же так очевидно! Но почему-то я с упорством тыкала в рандомные цвета и не понимала, почему все так некрасиво))))) Теперь буду умнее))) Спасибо за урок!
Спасибо, за очередной полезный урок! Слышала от некоторых дизайнеров, что использовать в вебе чистый черный и чистый белый цвет это не очень хорошо. Что ты думаешь по этому поводу?
6:40 Супер. Плюс (не все подряд смотрю пока) заметил для себя фишку. Жажать альт и тянуть вправо влево меняя значения (к примеру шрифта) это то же самое что тянуть вправо-влево с зажатым колесом мыши. Так удобнее. На виндовс.
@@alexeybychkov_ Жаль за книги ,прочитал сейчас коммент, я не думал ,что их где-то слили ,вторую нельзя купить в интернет магазине до сих пор ,а кто-то слил ее уже?
@@blackbacardi6419 Ну так пдф с Нового года лежит у меня на сайте. А печатная версия - недели две назад выпустили, но еще не завезли на площадки и до меня мои экземпляры не приехали. А так вот-вот должна появиться. Только верстку поменяли в Издательстве. В pdf такое же оформление, как в первой, нууу чуть лучше :) А в печатной будет другая верстка, так как книгу добавили в серию других книг по этой теме, а они все в одном стиле. В общем текст мой, а оформление нет) Первую вроде тоже переиздать собираются.
@@alexeybychkov_ аа понял , третью книгу как я понял нет желания и смысла делать? Можно ютуб кстати монетизировать по-другому, сделать ряд каких-то роликов по подписке . Но конечно опять же потом надо следить ,чтобы не слили их.
Сорри за флуд. Как раз сейчас меняю картинки в карточках. По вашему принципу - копирую слой, вставляю слой, удаляю слой. Круто. Я бы не додумался! Картинки разного размера, но одинаковы по пропорции сторон. Сразу вставляются корректно подгоняясь под размер. При этом они в инстансах (в черновике), я их оттуда беру не разбирая инстанс, и вставляю в другой инстанс.
@@alexeybychkov_ Нее, может для вас это слишком просто, это переход в лендинге например, что бы была не просто "длинная простыня" а например прокручиваешь в низ, а блок делится волнистым переходом и т.д)
@@Ульяныч-м9р а, так стоит посмотреть просто много всяких разных лендигов, чтобы понять как можно оформить переход. Вот сайт-подборка современных стильных клевых лендов (тут только лендинги) land-book.com/
Баловалась с градиентом, и хотела сделать тоже в центре прозрачно ,по бокам в белый уходит, и видно все равно в центре границу почему то , не плавно, хотя там непрозрачность ноль стоит)
Здравствуйте, отличные уроки! Подскажите, пожалуйста, я столкнулась с такой задачей: сделала несколько карточек с заголовками, текстом и фоном в виде затемненной картинки, и тут стало не очень-то понятно как теперь эти картинки на фоне менять, ведь все карточки это инстансы одного компонента. Если в компоненте создать несколько слоев из фоток для каждой карточки, выключить все, а потом для каждой отдельной карточки включить нужный слой, не слишком ли это повлияет на вес файла в общем? Может, есть какие-то другие способы выкрутиться из этой ситуации? И вообще я часть фоток ставлю из плагина Unsplash (потому что удобно), а часть скачиваю просто из других стоков физически. Так можно делать? Извините, если нагружаю вас вопросами, просто Фигма стала нужна по работе, учусь по вашим урокам (очень помогает, спасибо вам за такие легкие, но в тоже время содержательные и грамотные уроки:)
выбрал группу картинок (попали группой в фигму) указываешь куда их вставлять по очереди (распределились по окошкам) достаточно 1 раз самому попробовать и все станет понятно :)
@@alexeybychkov_ я уже перепробовал всё - не могу понять что должно произойти между выделением группы файлов в проводнике и добавление их в окошки. Не понимаю процесс.
Алексей привет. Не понимаю как ты так быстро менял картинки? И с текстом тоже не понял. Я копирую картинку, выставляю её в фигму. Копирую и пытаюсь вставить на место другой и она не подгоняет размер под уже существующую, она встает рядом в виде дубликата в полном размере. Что делать?)
Из того что нет в видео, но что важно (у меня батхерт был пока не посмотрел обучалку другую) - что бы заливка изображением скейлилась нужно оставлять ее в режиме grop. Это ппц какую боль мне доставило пока не понял.
какой отношение заливка имеет к группе? Достаточно просто заскейлить фигуру с заливкой через инструмент Scale (K) он же так и называется, его же для этого и придумали - и все будет скейлиться. И без разницы в группе или во фрейме.
@@alexeybychkov_ Crop имел ввиду. Без него не скейлится) Думаю для многих загвоздка - почему некоторые заливки имедж скейлятся, а некторые нет. В одном проекте. У меня такое было.
Спасибо! Но не совсем понятный урок, Алексей. 14:47 - сперва обрадовался, что наконец самая частая операция пошла, менять фото в карточках. Но вы настолько загадочно и мимолетно все описываете, что даже стоп-кадр не помогает. "Забираю" - ок, понял, ctrl +С. Зачем удалять - не совсем понял, ну ладно, повторять я умею. Но "потом просто вставляю" - непонятно. Нажать на картинку и вставить? Не получилось. Вставляется не в обтравку, а просто отдельным фото рядом. А если дочерний компонент, как вставлять? А если фото на диске лежит, как поступать?
Чтобы копировалась заливка ее нужно выделить (голубое выделение) в панели справа. А дальше обычное ctrl + С и ctrl + V Сначала мы в гугле берем (или на диске) картинку и тянем в фигму, она вставляется как отдельная фигура. А потом мы из нее (из этой фигуры) копируем свойство заливки, и вставляем это свойство в другую фигуру. На все остальные вопросы - ответ такой же. Нужно копировать не фигуру, а свойство заливки с изображением и его вставлять уже потом. Без разницы куда, хоть в компонент, хоть в дочерний, хоть еще куда.
@@alexeybychkov_ Спасибо большое, Алексей, получилось! А можно обнаглеть на еще один вопрос: как подвигать картинку внутри дочернего компонента? Она сдвигается вместе со всеми картинками...
@@Johnsson25 Менять размеры фигуры с картинкой нельзя. Но есть возможность перекропать саму заливку через crop: prnt.sc/uup609 можно делать больше, меньше, вращать и тд
Алексей, спасибо за видео! =)) Теперь я умею вставлять фото в карточки товара=)))) Единственное, хочу сделать карточку по ховеру с тенью, но тень появляется только у фотографии товара, а не под всей карточкой товара 0_о с чем это может быть связано? Карточки делала через компонент, заранее спасибо за любую подсказку!=))
@@alexeybychkov_ Не, это не то. Это когда ты со стороны картинку копируешь, выбираешь нужный блок и сразу в него вставляешь эту картинку. А не как у тебя в уроке, что сначала нужно картинку в документ воткнуть, затем вытащить её из свойства заливки и закинуть в другой блок, а потом еще и сам блок удалить лишний. В XD paste appearnce называется (ctrl+alt+v). Вот такого нет в фигме?
Что можно сделать с цветом, как настраивать градиенты и редактировать изображения:
0:15 - локальные цветовые стили
3:20 - сквозные цветовые стили
4:25 - слои цвета
6:16 - обзор палитры
9:05 - линейный градиент
10:10 - радиальный градиент
11:05 - градиент конус
11:25 - градиент ромбом
11:50 - режимы отображения изображений
13:41 - настройки изображения
14:37 - как я вставляю картинки, когда нужно 2-5 штук
16:32 - как я вставляю картинки, когда нужно много штук
17:42 - копируем слои градиентов
18:58 - один из вариантов применения кропа картинок
Спасибо за ролик! Очень круто, что это не просто обзор, а прямо полноценный урок, где можно понять как применять тот или иной инструмент в работе над сайтом!!😃😃😃😃
пожалуйста!
Подбор цветов в одной точке палитры меремещением по т.н. радуге 👍. Не знала, пригодится не только в работе, спасибо, Алексей, очень интересно!
Супер) Рад, что полезно!
Хоть и с данным функционалом знаком, но посмотрел обзор в твоей подаче с удовольствием))
Продолжай в том же духе!
Спасибо за просмотр)
Ну очень крутые уроки. Спасибо Алексей!)
Не знал что Figma настолько удобный инструмент!)
Рад, что нравится! Фигма крутая :)
очень импонирует подача информации продолжай в том же духе
Это не может не радовать)
Спаибо за прекрасные уроки! Так приятно вас слушать: без мата и с юмором, все понятно и кажется все просто :))
Рад, что нравится! :)
Кстати да, тоже очень нравится, что без матов) А то некоторые блогеры за этим совсем не следят(
Согласна с предыдущими комментаторами😄 Этот функционал знаю, но смотреть все равно было очень интересно) Особенно про то, как можно применить это на практике) Идея с кропом - очень интересная, спасибо!
Хотелось бы в обновленном ролике увидеть что-нибудь про режимы наложения👍
он, если не ошибаюсь, следующий в плейлисте
@@alexeybychkov_ ага, поняла) до него пока еще не добралась😁
оъ уж эти градиенты) за стили отдельное спасибо )
пожааалуйста)
Спасибо огромное за урок! Я как раз из ряда самых новых новичков-и мне было доступно
Спасибо за просмотр)
Алексей, спасибо за хороший и понятный контент
спасибо за просмотр :)
Спасибо за видео. До конца курса еще 7 уроков нужно постараться все удержать в голове до начала практики)
👍 уверен, все получится!
спасибо за комменты :) они помогают каналу развиваться!
Очень интересный курс с подробным и обычном языке.
спасибо)
Обстоятельный курс :) С удовольствием посмотрел и послушал :)
Спасибо
Класс! Теперь я знаю как убрать ту контрастную полосу на круговом градиенте :)
супер!
Как всегда всё понятно и что-то новое узнала для себя, спасибо!
супер)
Лайфхак с "радугой" - это же так очевидно! Но почему-то я с упорством тыкала в рандомные цвета и не понимала, почему все так некрасиво))))) Теперь буду умнее))) Спасибо за урок!
ну класс)
начинаю абожать вас с первого просмотра! спасибо)))
спасибо за просмотр ☀️
Низкий поклон)
спасибо за просмотр)
Крутой урок 👍👍👍👍
супер :)
На одном дыхании просмотрел
Супер :)
Очень полезное видео, спасибо
Супер!
Спасибо, буду использовать )))
супер)
Спасибо большое!
взаимно)) спасибо за просмотр!
спасибо очень полезные уроки!
рад, что нравится!
Всегда крутотень, пересматриваю, вдруг фишечка какая-то подвернётся ^^
Вот и класс
Спасибо, за очередной полезный урок! Слышала от некоторых дизайнеров, что использовать в вебе чистый черный и чистый белый цвет это не очень хорошо. Что ты думаешь по этому поводу?
Не очень хорошо чистый чёрный использовать в полиграфии, потому он плохо печатается. Как скажем и коричневый. А в вебе все цвета прекрасно смотрятся
Не дизайнер. Залезла на ролик для прототипов. Третий час залипаю на других роликах)))
круто) спасибо за просмотр!
14:55 когда выбираешь слой картинки можно нажимать кнтрл х , так быстрее чуть-чуть будет) чем кнтрл с + удалить
ага, спасибо)
6:40 Супер.
Плюс (не все подряд смотрю пока) заметил для себя фишку. Жажать альт и тянуть вправо влево меняя значения (к примеру шрифта) это то же самое что тянуть вправо-влево с зажатым колесом мыши. Так удобнее. На виндовс.
👍
Спасибо!
Пожалуйста)
Полезно ,спасибо , 20 минут пролетели )
Спасибо за просмотр)
@@alexeybychkov_ Жаль за книги ,прочитал сейчас коммент, я не думал ,что их где-то слили ,вторую нельзя купить в интернет магазине до сих пор ,а кто-то слил ее уже?
@@blackbacardi6419 Ну так пдф с Нового года лежит у меня на сайте. А печатная версия - недели две назад выпустили, но еще не завезли на площадки и до меня мои экземпляры не приехали. А так вот-вот должна появиться. Только верстку поменяли в Издательстве. В pdf такое же оформление, как в первой, нууу чуть лучше :) А в печатной будет другая верстка, так как книгу добавили в серию других книг по этой теме, а они все в одном стиле. В общем текст мой, а оформление нет) Первую вроде тоже переиздать собираются.
@@alexeybychkov_ аа понял , третью книгу как я понял нет желания и смысла делать?
Можно ютуб кстати монетизировать по-другому, сделать ряд каких-то роликов по подписке .
Но конечно опять же потом надо следить ,чтобы не слили их.
@@blackbacardi6419 да, нет желания. Была бы аудитория в пару лямов, вот тогда можно было бы заморочиться на новую книгу :)
ХОТелось бы, чтоб у меня тоже так быстро мозг работал)))
🚀
Спасибо за урок
пожалуйста!
Сорри за флуд. Как раз сейчас меняю картинки в карточках. По вашему принципу - копирую слой, вставляю слой, удаляю слой. Круто. Я бы не додумался!
Картинки разного размера, но одинаковы по пропорции сторон. Сразу вставляются корректно подгоняясь под размер. При этом они в инстансах (в черновике), я их оттуда беру не разбирая инстанс, и вставляю в другой инстанс.
🚀 ну класс
Как всегда все супер)) Алексей, есть ли видео про переходы от блока к блоку? Как их делать? Спасибо))
Спасибо :) Если речь про прототипы, то вот th-cam.com/video/ygkAJM4wl2M/w-d-xo.html
@@alexeybychkov_ Нее, может для вас это слишком просто, это переход в лендинге например, что бы была не просто "длинная простыня" а например прокручиваешь в низ, а блок делится волнистым переходом и т.д)
@@Ульяныч-м9р а, так стоит посмотреть просто много всяких разных лендигов, чтобы понять как можно оформить переход. Вот сайт-подборка современных стильных клевых лендов (тут только лендинги) land-book.com/
@@alexeybychkov_ Отлично, спасибо))
@@Ульяныч-м9р не за что)
Вы спрашивали почему непрозрачность меняется с шагом 32%, так никто и не ответил, а стало интересно узнать, подскажите пожалуйста
может зависит от настроек скрола мыши. В драйверах можно указать как сильно скролить страницу при скроле. Вот может оно и сюда передается
не будем тянуть кота за помидорки и сразу скажу спасибо! супер урок!
спасибо)
в css можно режим наложения менять
когда ролик записывался, адекватно еще нельзя было :)
12:00 СПАСИБО. Я познал Дзен
супер) пожалуйста!
Баловалась с градиентом, и хотела сделать тоже в центре прозрачно ,по бокам в белый уходит, и видно все равно в центре границу почему то , не плавно, хотя там непрозрачность ноль стоит)
наверное нужно 2 точки с нулями делать в центре
@@alexeybychkov_ спасибо)
Здравствуйте, отличные уроки! Подскажите, пожалуйста, я столкнулась с такой задачей: сделала несколько карточек с заголовками, текстом и фоном в виде затемненной картинки, и тут стало не очень-то понятно как теперь эти картинки на фоне менять, ведь все карточки это инстансы одного компонента. Если в компоненте создать несколько слоев из фоток для каждой карточки, выключить все, а потом для каждой отдельной карточки включить нужный слой, не слишком ли это повлияет на вес файла в общем? Может, есть какие-то другие способы выкрутиться из этой ситуации? И вообще я часть фоток ставлю из плагина Unsplash (потому что удобно), а часть скачиваю просто из других стоков физически. Так можно делать?
Извините, если нагружаю вас вопросами, просто Фигма стала нужна по работе, учусь по вашим урокам (очень помогает, спасибо вам за такие легкие, но в тоже время содержательные и грамотные уроки:)
Привет. Спасибо :) Начиная с 14:55 тут же в ролике на реальном примере показал как я меняю картинки у одинаковых карточек инстансов от одного мастера
@@alexeybychkov_ спасибо, я поняла как это работает:)
17:06 ничего не понял. Что происходит после выделения картинок в папке? Плз, объясните. Как они попадают группой в фигму и распределяются по окошкам.
выбрал группу картинок (попали группой в фигму)
указываешь куда их вставлять по очереди (распределились по окошкам)
достаточно 1 раз самому попробовать и все станет понятно :)
@@alexeybychkov_ я уже перепробовал всё - не могу понять что должно произойти между выделением группы файлов в проводнике и добавление их в окошки. Не понимаю процесс.
ctrl + shift + K
выбрали фотки
указали куда их вставить
Алексей привет. Не понимаю как ты так быстро менял картинки? И с текстом тоже не понял. Я копирую картинку, выставляю её в фигму. Копирую и пытаюсь вставить на место другой и она не подгоняет размер под уже существующую, она встает рядом в виде дубликата в полном размере. Что делать?)
Всё нашел) нужно скопировать стиль слоя
обращайся еще)))
Алексей, подскажите пожалуйста, можно ли Ctrl V делать и без двойного удаления слоя и рамки?
Не очень понял о чем вопрос. Но в любом случае, можно ведь открыть фигму да проверить))
@@alexeybychkov_ Это на 15:00 ровно минуте. Может, думаю, какой то фокус, а я его не поняла)!
@@karolinak3345 сейчас делаю также)
Ясно, я думаю результат тот же, что просто скопировать из-вне и вставить прям в изображение, без удаления слоев!
Спасибо за ответ)
@@karolinak3345 наверное)
Потом пересмотрю, но оставляю комент ради поддержки
Спасибо за просмотр)
Из того что нет в видео, но что важно (у меня батхерт был пока не посмотрел обучалку другую) - что бы заливка изображением скейлилась нужно оставлять ее в режиме grop. Это ппц какую боль мне доставило пока не понял.
какой отношение заливка имеет к группе? Достаточно просто заскейлить фигуру с заливкой через инструмент Scale (K) он же так и называется, его же для этого и придумали - и все будет скейлиться. И без разницы в группе или во фрейме.
@@alexeybychkov_ Crop имел ввиду. Без него не скейлится) Думаю для многих загвоздка - почему некоторые заливки имедж скейлятся, а некторые нет. В одном проекте. У меня такое было.
без разницы какой режим у заливки стоит. Есть отдельный самостоятельный инструмент - scale, который как раз скейлом и занимается.
@@alexeybychkov_ у меня без кроп скейлится рамка, картинка не зафиксирована, не скейлитя выбранный фрагмент.
Ну это мои проблемы похоже)
Не вижу про 32, так почему 32?) Спасибо за урок!
пожалуйста)
Спасибо! Но не совсем понятный урок, Алексей. 14:47 - сперва обрадовался, что наконец самая частая операция пошла, менять фото в карточках. Но вы настолько загадочно и мимолетно все описываете, что даже стоп-кадр не помогает.
"Забираю" - ок, понял, ctrl +С. Зачем удалять - не совсем понял, ну ладно, повторять я умею. Но "потом просто вставляю" - непонятно. Нажать на картинку и вставить? Не получилось. Вставляется не в обтравку, а просто отдельным фото рядом. А если дочерний компонент, как вставлять? А если фото на диске лежит, как поступать?
Чтобы копировалась заливка ее нужно выделить (голубое выделение) в панели справа. А дальше обычное ctrl + С и ctrl + V
Сначала мы в гугле берем (или на диске) картинку и тянем в фигму, она вставляется как отдельная фигура. А потом мы из нее (из этой фигуры) копируем свойство заливки, и вставляем это свойство в другую фигуру.
На все остальные вопросы - ответ такой же. Нужно копировать не фигуру, а свойство заливки с изображением и его вставлять уже потом. Без разницы куда, хоть в компонент, хоть в дочерний, хоть еще куда.
@@alexeybychkov_ Спасибо большое, Алексей, получилось! А можно обнаглеть на еще один вопрос: как подвигать картинку внутри дочернего компонента? Она сдвигается вместе со всеми картинками...
@@Johnsson25 Менять размеры фигуры с картинкой нельзя. Но есть возможность перекропать саму заливку через crop: prnt.sc/uup609 можно делать больше, меньше, вращать и тд
@@alexeybychkov_ Это именно то, что было нужно! Спасибо вам большое и доброй работы! Спасли, я уже часа два пытаюсь найти ответ на этот вопрос))))
@@Johnsson25 ну класс)
Так почему же 32?... Это связано с бинарной системой исчисления или чем-то другим?
Наверное, баг был. Сейчас все работает как надо. Меняется на 1. А с шифтом на 10-ку
Спасибо!1
Взаимно!
Алексей, спасибо за видео! =)) Теперь я умею вставлять фото в карточки товара=)))) Единственное, хочу сделать карточку по ховеру с тенью, но тень появляется только у фотографии товара, а не под всей карточкой товара 0_о с чем это может быть связано? Карточки делала через компонент, заранее спасибо за любую подсказку!=))
пожалуйста) нужно фон фрейму добавить и тень сработает как нужно
@@alexeybychkov_ ого!!!! в жизни бы не догадалась))))) спасибо огромное!!!!!!! =)))
А что такое "Кропаю ТЗ-шки" и для чего это нужно?
Обрезаю фрагменты из ТЗ (кропаю от слова crop - обрезать), чтобы скрыть лишнее
@@alexeybychkov_ Это понятно. Мне интересно, для чего это нужно в процессе дизайна.
@@aszweb Вот сейчас прислали скрин ТЗ - кропаю лишнее prnt.sc/rv8b0y
или вот покропал ТЗ на блоки prnt.sc/rv8bqp
@@alexeybychkov_ Понятно, просто для удобства.
@@aszweb ага
по вставке картинки, зачем там удалять два раза, - не понял. Почему нельзя в фигме вставить сразу в квадратик нужный =((
опция вставить сразу в картинку появилось сильно позже, чем был записан ролик :)
А с картинками получается нет возможности как в XD просто paste into нажать?
Не знаю, что делает Paste into в XD, но есть подозрение, что в Фигме это ctrl + shift + K
@@alexeybychkov_ Не, это не то. Это когда ты со стороны картинку копируешь, выбираешь нужный блок и сразу в него вставляешь эту картинку. А не как у тебя в уроке, что сначала нужно картинку в документ воткнуть, затем вытащить её из свойства заливки и закинуть в другой блок, а потом еще и сам блок удалить лишний. В XD paste appearnce называется (ctrl+alt+v). Вот такого нет в фигме?
Ааа. Пока это делает отдельный плагин, может со временем сделают нативно figma.help/plugins/paste-to-fill/
@@alexeybychkov_ Спасибо! )
А как можно устранить лесенку на градиенте?(( В фотошопе знаю как, а тут...
попробуй добавить размытие
@@alexeybychkov_ Спасибо)
Вии я попал в стори)
Вуууухууу)
Ну ты завернул, спросил вопрос к ответу о жизни вселенной и вообще
я уже не помню что я спрашивал))
Кота за помидорки)))
😄
like
спасибо!
Уиииии
Спасибо за просмотр)
оч полезный и хороший курс , но лучше не шути.......
тогда лучше отписаться и не смотреть мои ролики. Скучная унылая подача -- это не ко мне
тзэшки, менюшки, превьюшки. ОМG
👌
Написала Иринка Иринка 🤷🏼♂️