Работы для портфолио нужно собирать, а как их собирать, если нет реальных проектов?
Кто-то советует делать прототипы уже готовых сайтов в разных стилистиках. А я вот решил подключить к этому делу нейросети. Когда нет насмотренности, а портфолио чем-то нужно пополнять, на помощь приходит Midjourney.
Конечно кроме него использовались приобретенные во время обучения навыки, нейросеть для написания текстов, нейросеть для улучшения качества изображений, а еще Google Fonts, AdobePhotoshop и Figma.
Результат можно увидеть на этом скрине. А в конце статьи можно посмотреть процесс на видео.
Вероятно, я продумаю концепцию полностью, отрисую несуществующий сайт со всеми вспомогательными блоками. И добавлю работу на Behance, после того, как опубликую работу в Tilda. Чтобы кнопочки и пункты меню можно было реально "пощупать".
Посмотреть существующий прототип можно здесь.
Итак, расскажу по шагам, как с помощью нейросетей замутить такой вот сайтец.
Как придумать дизайн-концепцию?
Можно и нужно посмотреть, как сайты определенной тематики реализуют реальные студии. Я знаком с игровой тематикой, поэтому мне нужен был только концепт. За вдохновением я пошел в Midjourney.
Сейчас в моде темное фентези. Несколько минут я игрался с запросами. Мне выдало несколько приличных вариантов, с которых можно смело брать дизайн-концепцию. А заодно и сочные арты.
Вот, что предлагал Midjourney. Я нашел интересный мне вариант.
Что делать когда концепция выбрана?
Ну для начала неплохо бы улучшить качество полученных концептов, например в 4 раза. Потому что нейросеть выдает изображения размером 1024*1024 пикселя. А на сайтах используются изображения шириной минимум 1920 пикселей. Минимум, потому что на широкоформатных экранах оно будет растягиваться или оставлять рамки. Рамки и пиксели никому смотреть не интересно. Поэтому идем в нейросеть AI Image Enlarger и загружаем для улучшения качества все, что вам нужно.
Как пользоваться этой нейросетью можно посмотреть здесь:
Что делать с полученными картинками?
Нужно отделить от фона нужные изображения, сделать нужный по ширине размер артов и убрать все лишние обводки, текст и накрадывающиеся изображения. Для этого в бой идет AdobePhotoshop.
Работу в фотошопе вы сможете посмотреть в видео в конце статьи.
Как написать текст?
Вероятно, текст стоит придумать самому или взять у заказчика. Но если заказчика нет, а вы "ни в зуб ногой" в теме, на которую хотите сделать сайт для портфолио, то стоит обратиться к излюбленным мной нейросетям. Для текстов можно использовать нейросеть Rytr. Но у меня там закончились бесплатные лимиты. Поэтому я нашел способ использовать новомодный ChatGPT прямо в своем вотсапе.
Как уже в конце-концов сделать дизайн?
Тут мы подходим к самому интересному. Нас ждет Figma.
Все наши заготовленные арты закидываем в Фигму. Рядом с рабочим фреймом ставим картинку-концепцию, созданную Midjoyrney и творим. Пытаемся подобрать похожие шрифты, цвета и формы. Благо инструменты фигмы позволяют это сделать.
Для просмотра шрифтов стоит воспользоваться Google Fonts.
В Фигме нет превьюшки с текстом, как в MS Office, поэтому чтобы не тыкаться в сотни вариантов заходим на сервис, ставим фильтры на кириллицу, выбираем подходящий шрифт и после этого ищем такой же шрифт в фигме. С вероятностью в 90% шрифт из Google Fonts будет в Фигме.
Когда вы удовлетворены результатом "копирования" несуществующего сайта можно заморочиться созданием второстепенных блоков и в режиме прототипирования настроить переходы по ссылкам на вашем прототипе.
После этого останется только оформить эту работу в ваше портфолио и искать реальные заказы =)
Есть вопросы - пиши комментарии. Завтра сделаю видео, в котором будет запечатлена вся описанная выше работа. В следующих статьях покажу, как будет выглядеть рабочий прототип на Tilda со всеми блоками и переходами.
Материал был интересным и полезным? Подпишись на канал и поставь лайк.