Ну что же, вот я и добралась до самой наболевшей темы селлеров, как же создать дизайн для своих товаров.
Скажу сразу, что тут мы переходим непосредственно к сборке дизайна, где у вас уже есть данные по целевой аудитории, конкурентам, а также составлен пул аргументов, которые вы будете раскрывать.
Сегодня в качестве примера возьмем одну из моих работ, где я наглядно покажу, как он собирался, плюс сделаю акценты на некоторых вещах.
Просмотрев сборку этого дизайна вы поймете куда нужно нажимать и что делать.
Вот моя работа!
Переходим к разработке дизайна!
1. Открыть фигму в браузере
Забиваете в поисковик "фигма", и открываете самую первую ссылку.
2. Зарегистрироваться в фигме
Ничего сложного нет, дело 5 минут, вы справитесь с этим сами интуитивно, я в вас верю!
3. После регистрации у вас откроется вот такое окно
4. Далее нужно нажать на кнопку создания нового файла
5. После откроется вот такая рабочая область, в которой мы будем с вами работать
6. Приближаем и отдаляем область
В эту рабочую область нам нужно вставить изображение нашего товара, которое мы будем вырезать пером точками.
Также эту область рабочую нам нужно будет приближать. Как это сделать? Вы зажимаете клавишу Ctrl и колесиком мышки крутите вперед (приближаете) и назад (отдаляете область).
7. Как нам вставить сюда изображение?
Вы просто заходите в загрузки и вытаскиваете свой файл в нашу рабочую область. Либо просто вы открываете свое изображение, нажимаете "копировать картинку", потом переходите в рабочую область и нажимаете Ctrl+V. Все очень просто.
8. После того как вы вставили изображение нажмите на него
Контуры картинки приобретут синий цвет.
9. Вырезаем
Для этого внимательно посмотрите на мое изображение ниже.
10. После как нажмете на этот значок ваше изображение приобретет вот такой вид
При наведение мышки на изображение, он будет в полосочку.
11. Перо
У нас внизу открываются инструменты, и после мы нажимаем на клавиатуре русскую букву "З" или английскую "P". И наша мышка приобретает вид пера, а это значит мы можем начать вырезать.
Для того, чтобы начать вырезать мы приближаем изображение и ставим первую точку по контуру нашего товара.
И вот такие точки у нас получаются. и так мы обводим наш товар и в конце мы точки соединяем, то есть самая первая наша точка должна соединиться с последней. После этого нам нужна заливка, она поможет на убрать фон.
12. Для этого мы нажимаем вот эту кнопку
Когда вы нажмете на эту кнопку, у вас вместо курсора будет капелька, и если вы ее наведете на свой товар то внутри капельки будет нарисован минус, это значит удалить фон, и вы наводите эту капельку на фон ваш и нажимаете ее. После как фон у вас удалился, вы нажимаете на клавишу "V" на английском или "М" на русском.
13. Создаем фрейм
Теперь давайте создадим фрейм, в котором будет располагаться наш товар.
Для этого на клавиатуре нажмите букву английскую "F". И нажмите на рабочую область, у вас появится маленький квадратик, теперь нам нужно его увеличить. Для этого мы изменяем его размеры 900 на 1200 ставим. Смотрим на изображение.
14. Делаем фон
Сейчас мы будем делать фон нашей карточке и конечно же давайте переместим наш товар тоже в эту карточку.
Как сделать фон? Мы нажимаем на наш фрейм и справа видим инструменты и заливку этого фрейма, сейчас он у нас белый, но это не надолго. Нажимаем на Fill - заливка значит. Вы можете на мою картинку посмотреть.
15. После как нажали на квадратик, у нас вот что выходит
И тут нам нужно вместо "Linear", нажать "Radial", что значит радиальный градиент.
И мы пишем вот такие данные.
Теперь наша карточка выглядит вот так.
16. Пишем заголовок
Смотрим на мое изображение. Здесь, чтобы начать писать мы тыкаем на клавишу "T" английскую, и тыкаем на нашу рабочую область. Далее появляется курсор и мы можем начинать писать. Ниже вы можете увидеть какие параметры нужно поставить, а также как добиться такого линейного градиента.
17. Пишем подзаголовок
Мы написали заголовок, теперь нужно написать подзаголовок "автоматическая", цвет у нас такой же, но начертание мы выбираем не "medium", как у нашего заголовку, а чуть тоньше "extralight".
18. Делаем обводку
Как же нам сделать эту обводку вокруг подзаголовка. Мы тыкаем на клавишу "R", и тыкаем на нашу рабочую область, забиваем вот такие параметры.
Где была заливка мы нажимаем минус, а где "stroke", мы нажимаем плюс.
19. Делаем плашку
Далее делаем еще одну плашку в синем градиенте, вот его параметры.
Текст на этой плашке мы также пишем, с такими же параметрами, просто меняем начертания и все.
20. Делаем тени
Самое сложно я оставила на самый конец - это тени. Мы нажимаем клавишу "O" на английском и тыкаем сразу же на нашу рабочую область.
Вы можете здесь посмотреть какие параметры я ставила и повторить. Таких кружков я сделала парочку, еще одну такую же, но поменьше.
На этом все, не думала, что так тяжело будет все объяснять. Если вы что-то не поняли, то напишите и я подскажу!
Всем хорошего дня!