Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

208 076 чел. 399 554 работы 4 092 урока
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Повторяем дизайн формы пользователя в FIGMA

Мы видим в комментариях ваш интерес к веб-дизайну и это здорово. Поэтому Даниил Волосатов подготовил для вас практический урок. 

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

Что вам понадобится для урока:

Домашнее задание от Даниила:

  • Повторить адаптивный дизайн формы пользователя
  • Добавить к нему дополнительные элементы (напр., иконки, выпадающий список, всплывающее окошко)
  • Загрузить в комментарий работу по уроку
  • Прислать Даниилу личным сообщением ссылку на свой проект в Figma. Первые 10 человек, которые пришлют свою работу, Даниил откомментирует.

Комментарии 80

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Maria0505, Мария) получилось здорово, а почему имя не добавили?

Евгений Иванов, у нас есть поверье - когда что-то начинается впервые, не надо называть. Так лучше будет.

Моя "броаузерная" работа:) Теперь вперед, на марафон!:)

спасибо за урок, это моя первая работа в этой программе
сайт запрещает вставлять сюда ссылки

Ershova_masha, Маша здравствуйте, вы отправили ссылку на проект в Figma Даниилу ?

здравствуйте, ему лично не отправляла

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

Хороший урок, все просто и понятно.
https://www.figma.com/file/C9HjflnB5AdCh2NkeERnCt/Untitled?node-id=3%3A11

Спасибо! Интересный урок.
https://www.figma.com/file/DQjtYH284MEvcQdQaS1GBl/Untitled?node-id=6%3A11

Спасибо за урок

www.figma.com/file/gOZYBKDgi4snYy6YMBAmGQ/Untitled?node-id=0%3A1

https://www.figma.com/file/w5aVRQZQXJg98v8iqHfrIZ/Untitled?node-id=3%3A9

Спасибо, (но у меня сегодня очень медленный интернет, не могу нормально работать)

Такой вопрос: вот когда я как-бы растягиваю-сжимаю страницу, то как потом вернуть реальный размер?

Как-то так Спасибо за урок!

Я, конечно, обожаю Фотошоп... Но и в Фигме есть своя прелесть Во всяком случае - для меня! А если соединить (в случае необходимости) владение и тем, и другим - получится вообще класс! Огромное спасибо за урок и тем. кто меня поддержал! Пока не закончила (на 10й минуте видео), но доделаю обязательно!

Valentinadizain, Именно в связке эти два инструмента ТОП в 2020, мы знаем это. Так как на основе веб-дизайнеров нашего сайта приводим пример

Спасибо за урок!
На комп с 32 битной архитектурой Figma не ставится, только на 64 битную. В этом случае только онлайн.

Огромное спасибо за урок!
Я сначала изучала Фигму, а потом заинтересовалась Фотошопом. Отличный инструмент для создания сайтов. И достаточно легкий по сравнению с Фотошопом, хотя и не имеет таких широких возможностей. Будет очень здорово получить новые знания по Фигме .
К сожалению ссылка на работу на ставится, необходимо добавить сайт Фигмы в список разрешенных

Кульпина Марина, Здравствуйте Марина. Вы отправляйте сслыку на работу прямо в диалог Даниилу. В любом случае вставляйте свою работу сюда картинкой.

Евгений Иванов, Спасибо за подсказку, уже отправила.

Установка Figma для тех кто в Linux:
snapcraft.io/figma-linux

Добрый вечер. Первые 4 работы уже откоментировал, жду еще 6)

Спасибо! Всё просто и понятно.
Жаль, у меня качество видео не очень, а шестерёнка позволяет только скорость регулировать

Татьяна Пронина, Здравствуйте. Вы сделали работу Татьяна?

Евгений Иванов, здравствуйте! Да, наконец-то, сделала.
Качество видео сегодня отличное, спасибо!

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

Добрый день!
программа интересная

OksanaBoronenko, Она подходит под веб-дизайн:)

OksanaBoronenko, В связке с Photoshop вы будете на волне:)

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

Огромное спасибо за урок!

www.figma.com/file/qdPQ0RQ4wgRjSItJpIioox/%D0%9F%D1%80%D0%BE%D0%B1%D0%BD%D0%B0%D1%8F-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0?node-id=0%3A1
Ещё раз пытаюсь вставить свою работу. Первый раз отправляю что-то на этот сайт, хотя читаю его давно и подписался давно. Очень интересна для меня новая тема по Вэб-Дизайну.

ВОПРОС! когда я объединила все слои в группу, объекты на слоях перестали двигаться относительно друг друга! То есть, я не могу передвинуть текст относительно аватарки, а также - скопировать текст... Ну, и все остальное, соответственно! Подскажите, как быть?

Урок понравился, но не смогла понять, как заполнить цветом иконку указателя-руки белым цветом только внутри границ
https://www.figma.com/file/Z5Ln2OwB3RJxNxr4pdGiTc/%D0%9C%D0%B0%D0%BA%D0%B5%D1%82-%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8F?node-id=0%3A1

Спасибо за урок. Но! Figma не устанавливается на 32-разрядную виндоус. Это огромный "минус" программы, о котором никто не упомянул. Возможно, п.ч. такие уже мало у кого стоят))) И автор курса просто о нём не знает.

Nadegdash82, не надо фигму устанавливать. Работайте в браузере - разницы никакой. Во всяком случае - многие авторитетные товарищи это утверждают наверняка.

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

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules