{"id":13469,"url":"\/distributions\/13469\/click?bit=1&hash=dcec5b6e3b31a287caee6d7b8c40fce348ae8105cc77ec73f81e9a3fa844790a","title":"\u041a\u043e\u043d\u043a\u0443\u0440\u0441 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0442\u043e\u0440\u0433\u043e\u0432\u044b\u0445 \u0440\u043e\u0431\u043e\u0442\u043e\u0432","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}

Сочный мокап за 2 минуты: нарисовать быстрее, чем скачать

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

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

Не стоит переживать, если у тебя не получится с первого раза.
Именно поэтому я подготовил Figma-файл, который ты можешь скачать в моем Telegram-канале и посмотреть, как это устроено!

Поехали!

1 шаг.
Рисуем прямоугольник.
Размер: 375х812
Радиус закругления углов: 40
Цвет: F0F4FA

Это и будет нашим экраном, куда в будущем мы сможем вставлять любой скрин

2 шаг.
Дублируем получившийся прямоугольник еще 2 раза
Меняем параметры двух новых прямоугольников (первый не трогаем)

Размер: 395х832
Радиус: 48
Цвет: DCE4F5

Размер: 425х862
Радиус: 60

3 шаг.
Накладываем прямоугольники друг на друга по принципу матрешки:
сначала большой, на него средний, на него маленький

4 шаг.

Выделяем самый маленький и на его контуре верхней грани добавляем 5 точек по центру.

5 шаг.
Формируем монобровь:
Просто потяни три центральные точки вниз.
В принципе можно и без нее, тогда пропускай 4 и 5 шаги.

6 шаг.
Выделяем самый большой прямоугольник и применяем к нему 3 тени:
1) Drop Shadow
Blur: 80
X: 40
Y: 40
Цвет: B8C2D9
2) Inner Shadow:
Blur: 10
X: -4
Y: -4
Цвет: C3CDE7
3) Inner Shadow:
Blur: 10
X: 4
Y: 4
Цвет: ffffff

Магия, не правда ли?

Последний шаг.
Не бойся экспериментировать! Ты можешь добавить динамик, камеру или поменять цвета.

Итог:

Многие вещи кажутся сложными лишь на первый взгляд и за несколько минут у тебя получилось сделать свой первый мокап!
Но а если возникли какие-то трудности, или ты хочешь посмотреть устройства в других цветах, то качай Figma-исходник у меня в телеге

0
23 комментария
Написать комментарий...
Денис Дудин

А мне было полезно, спасибо большое!
Вроде все просто, а сам не додумался:)

Ответить
Развернуть ветку
Vlad

Зачем это здесь? В чем полезность данной статьи? Какой результат должен быть достигнут после прочтения данного материала? 

Ответить
Развернуть ветку
Макс О дизайне
Автор

да

Ответить
Развернуть ветку
Акбар Гасанов

Зачем негативить?

Ответить
Развернуть ветку
Мистер Блондин

Проще скачать

Ответить
Развернуть ветку
Макс О дизайне
Автор

Проще, чем нарисовать 3 прямоугольника? :D

Ответить
Развернуть ветку
Андрей Фролов

Нет вопросов к материалу, но хочется понять:

Зачем вы дублируете заголовок на картинке?

Ответить
Развернуть ветку
Макс О дизайне
Автор

Чтобы репост в телеге симпатично смотрелся. 

Ответить
Развернуть ветку
Андрей Фролов

Но тогда в текст сюда не стоит ставить, согласитесь

Ответить
Развернуть ветку
Макс О дизайне
Автор

Вы полностью правы, учту при создании новых материалов.

Ответить
Развернуть ветку
B L I G H T

Спасибо за статью, вы молодцы!)

Ответить
Развернуть ветку
Макс О дизайне
Автор

Большое спасибо!

Ответить
Развернуть ветку
Lena Burimova

полностью согласна с вами) мне, к примеру, намного проще нарисовать мокап в иллюстраторе или фигме, чем возиться с чужим мокапом в фотошопе, потому что всегда можно быстренько подправить толщину, размер, одним словом, сделать все под себя

Ответить
Развернуть ветку
Макс О дизайне
Автор

Благодарю за отзыв, в будущем хочу разобрать еще несколько вариантов создания мокапов других устройств)  Может есть какие-то пожелания?

Ответить
Развернуть ветку
Eugene Samusenko

Какие злые читатели на VC. Не понравилось - иди дальше читай МДК, там столько всего полезного.
А Максу большое спасибо за статью!

Ответить
Развернуть ветку
Даниил Котов

статья - пустышка о том как рисовать прямоугольники, класс.

Ответить
Развернуть ветку
Макс О дизайне
Автор

Так не понравилось, что аж подписался? 

Ответить
Развернуть ветку
Дмитрий Удодов

Где можно найти 3д иллюстрации?

Ответить
Развернуть ветку
Denis Shepovalov
Ответить
Развернуть ветку
Макс О дизайне
Автор

Какие именно?

Ответить
Развернуть ветку
Дмитрий Удодов

Например вещей/людей

Ответить
Развернуть ветку
Макс О дизайне
Автор
Ответить
Развернуть ветку
Дмитрий Удодов

Класс

Ответить
Развернуть ветку
Читать все 23 комментария
null