Статья написана в пользовательском блоге — редакция Партнеркина не вносит изменения в текст. Вся орфография, пунктуация и содержание сохранены Подробнее про пользовательские блоги и о том, как зарабатывать до 3 000 ₽ за статью 😎
14 мая 0 1215

Зарабатываем на создании сайтов при помощи ИИ

Количество сайтов в интернете каждый день увеличивается примерно на полмиллиона, а общее — приближается к 2 млрд.

Казалось бы, только и успевай их делать, но, тем не менее, большой вопрос, который сегодня беспокоит дизайнеров, звучит так: останемся ли мы все без работы уже в этом году или доживем до следующего?

В основе беспокойства — стремительное развитие нейросетей.

 

Пробуем создать макет сайта языковых курсов

Первое задание будет звучать так: надо сделать сайт для языковых курсов, или, если проще, онлайн-образования. Переходим в Midjourney на Discord.

В строке сообщений пишем команду /imagine prompt:

Описание изображения: professional website for online education

Стилистическая подсказка (мы хотим векторные изображения): vector illustration

Горизонтальный формат изображения: --ar 16:9

И все это через запятую:

Через несколько попыток становится понятно, что развития у идеи не предвидится, все дальнейшие результаты будут примерно такими же:

Допустим, мы приняли это как идею и даже выбрали один из предложенных нейросетью вариантов:

Навскидку – симпатично, цельно по цвету, приемлемо по композиции, даже имеются атрибуты веб-страницы: меню, заголовок, текст и кнопки. Но рассмотрим картинки внимательно:

Книги не очень похожи на книги, у женщины три ноги и руки никуда не годятся, вместо лица — месиво. И если мы принимаем макет в целом, как идею, то что с этим делать дальше — перерисовывать самим, заказывать иллюстратору, найти похожие изображения?

Может, оно вообще того не стоит, чтобы прилагать столько усилий?

А давайте, и вправду, спросим у гугла, как обстоят дела с иллюстрациями на тему онлайн-образования? Более того, давайте поищем решение и для самого сайта — пусть поисковая система посоревнуется с нейросетями!

«Окей, Google», professional website for online education, vector illustration, пожалуйста!

И вот сразу понятно, откуда Midjourney черпает вдохновение: перед нами и закладки в Pinterest, и портфолио на Behance, и великое множество ссылок на микростоки, от Adobe и Depositphotos до iStock и Alamy, так что готовое решение от нас буквально в одном клике. Вот, например, такая работа доступна бесплатно на ресурсе Freepik:

Пожалуй, запишем это как полезный опыт работы с нейросетями: никогда не работать с нейросетями (если есть более короткий путь решения задачи)!

Создаем сайт для онлайн-магазина

Но вернемся к Midjourney (в конце концов, мы не Google сегодня тестируем) и все-таки заставим искусственный интеллект сделать для нас сайт.

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

Разобьем задачу на две части:

  • Ассортимент онлайн-магазина
  • Главная страница сайта или лендинга

Создаем ассортимент онлайн-магазина матрешек

Начнем с самих матрешек. В строке сообщений набираем команду /imagine prompt:

Описание изображения: russian doll design

Стилистические подсказки (реалистичное изображение в стиле киберпанк): cyberpunk style, hyperrealistic

Всего несколько попыток и, надо сказать, результат очень и очень впечатляет! Я получил десятки вариантов, вот только некоторые из них:

На всякий случай спросим у гугла, что он думает про russian doll design cyberpunk style, и убедимся в том, что мы на правильном пути в работе с Midjourney: результаты гуглятся и близко не те, что нам надо.

Создадим главную страницу сайта или лендинг с помощью Midjourney

Займемся проектированием сайта.

Итак, /imagine prompt:

Описание, онлайн-магазин по продаже матрешек: modern website landing page for a russian doll online store company

Подсказки: realistic, web design, ux/ui, ux, ui, cyberpunk style, neon colors

Горизонтальный формат: --ar 16:9

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

Поможем нейросети и направим ее в нужное русло. Начнем с цветовой гаммы. У нас есть коллекция матрешек, найдем среди них какие-то готовые цветовые решения.

Выберем одну из картинок и определим названия цветов через Color Name Finder: загружаем картинку на сайт, тыкаем пипеткой в разные места матрешки, копируем названия цветов, которые выдает сервис, записываем их через запятую в команде Midjourney.

Команда теперь выглядит так:

/imagine prompt:

Описание: screen professional website for a russian doll online store company

Подсказки: ui, ux, ui/ux, website, landing page

Цвета (и явно укажем серый фон, как на картинке): canary yellow, banana yellow, razzle dazzle rose, bright teal colors, platinum gray background

Горизонтальный формат: --ar 16:9

Результат сильно изменился, мы видим, что указание цветов сработало, но в целом это все скорее забавно, чем хорошо, — так мы киберматрешек не продадим.

Поищем другое решение. Попробуем исключить из результата матрешек (похоже, сейчас именно они все портят) — пусть нейросеть покажет нам варианты для интернет-магазина без конкретного ассортимента, но в нужной нам цветовой гамме. Для этого из предыдущей команды уберем russian doll, теперь запрос выглядит так:

professional website for online store, ui, ux, ui/ux, website, landing page, canary yellow, banana yellow, razzle dazzle rose, bright teal colors, platinum gray background, --ar 16:9

Результаты выглядят, если не удовлетворительно, то, по крайней мере, перспективно, однако мы потеряли важную составляющую — стилистическую. Добавим к предыдущему запросу cyberpunk style, теперь команда выглядит следующим образом:

professional online store website, ui, ux, ui/ux, website, landing page, canary yellow, banana yellow, razzle dazzle rose, bright teal colors, cyberpunk style, platinum gray background, --ar 16:9

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

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

Midjourney позволяет указывать в команде не только текстовые описания и подсказки, но и ссылки на изображения, так что мы можем позволить себе эксперимент — соединить наши две картинки. Команда будет выглядеть так:

/imagine prompt: <ссылка на первую картинку>, <ссылка на вторую картинку>, professional online store website, ui, ux, ui/ux, website, landing page, canary yellow, banana yellow, razzle dazzle rose, bright teal colors, cyberpunk style, platinum gray background, --ar 16:9

Результат странный, будем считать его тупиковым: матрешки ожили и превратились в монстров.

Ищем идеи для макета сайта с помощью BlueWillow

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

/imagine prompt:

Описание: screen professional website for a russian doll online store company

Подсказки: ui, ux, ui/ux, website, landing page

Цвета: canary yellow, banana yellow, razzle dazzle rose, bright teal colors, platinum gray background

Горизонтальный формат (здесь указывается другое соотношение сторон, не 16:9, а 3:2): --ar 3:2

Замечаем, что BlueWillow любит изображать не сайт, а сайт на экране монитора, поэтому добавим в команду исключение: --no monitor. А в подсказки добавим некоторые элементы сайта: header, sidebar. Теперь команда выглядит так:

/imagine prompt: professional website for russian dolls online store company, ui, ux, ui/ux, website, landing page, header, sidebar, canary yellow, banana yellow, razzle dazzle rose, bright teal colors, cyberpunk style, platinum gray background, --no monitor --ar 3:2

В целом результаты по качеству картинки, пожалуй, хуже, чем в Midjourney, но, тем не менее, кажется, мы не зря пришли в BlueWillow — есть интересное по компоновке решение:

Изучим внимательно: требуемые цвета, сбоку персонаж в образе (и есть кандидат на это место), хороший фон с городом на заднем плане (киберпанк-Москва — интересно!), сверху логотип и меню сайта, слева вынос с текстом, внизу три текстовых блока, матрешки сгруппированы (это нам пригодится, «товара» у нас много) и находятся в правильных местах! Прекрасно, есть над чем работать дальше! Из перечисленного у нас нет изображения Москвы постапокалипсиса и логотипа компании. Вернемся в Midjourney и продолжим там.

Создаем логотип с Midjourney

Для логотипа будем использовать для Midjourney все те же описания и подсказки:

/imagine prompt:

Описание: logotype for russian dolls online store company

Подсказки: cyberpunk style, flat vector

Цвета (фон на этот раз запросим белый): canary yellow, banana yellow, razzle dazzle rose, white background

Формат изображения оставим по умолчанию квадратным.

Сгенерированные нейросетью Midjourney изображения будем считать приемлемым (пусть и не с первой попытки) результатом — нам сейчас не логотип нужен как таковой, а обозначить его место на странице сайта. Так что выберем из этого:

Москва будто из фильма «Бегущий по лезвию 2049» Дени Вильнева — отличная задача для Midjounrey! Не будем надолго задерживаться на этой части работы, составим запрос (post apocalyptic Moscow, cyberpunk style, bladerunner 2049, dark colors, view from the ground, grey sky, --ar 16:9) и выберем один из получившихся (тоже не с первого раза, но тем не менее) вариантов:

Создаем для сайта образ героини

Мы на финишной прямой: у нас есть матрешки, два референсных макета главной страницы, Москва-2049 и логотип. Пришло время вернуться к эффектной девушке с желто-зеленовато-голубыми волосами. С ней все в порядке, но ее образ не помогает нам раскрыть новый-русский-киберпанк-стиль продукции нашего интернет-магазина. Займемся-ка этим!

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

/imagine prompt: <ссылка на картинку>, russian style, --ar 16:9

Результат впечатляет и радует качеством, атмосферой и настроением:

Однако образ стал слишком russian style и совсем мало cyberpunk. Откорректируем запрос:

/imagine prompt: <ссылка на картинку>, russian style, cyberpunk, --ar 16:9

Среди новых вариантов, которых пришлось перебрать десятки, кажется, нашелся перспективный кандидат: приятный образ, русский стиль не потерялся — хороший материал для дальнейшей работы с киберпанком.

Еще десятки раз проверяем возможности нейросети, ищем нужное изображение:

Сложно точно сказать, с какой попытки, но выбран финалист: тут в меру и русского, и киберпанка, хороший взгляд, естественная поза, нужные нам цвета, нет перебора с деталями — берем в работу!

Итак, у нас есть: широкий ассортимент матрешек, вид на вечернюю Москву 2049 года, девушка в образе русского киберпанка, эскиз макета сайта. Идем дальше.

Создаем тексты для сайта

Название я придумаю сам, а вот текстом пусть займется нейросеть — ChatGPT. Что ж, попросим написать рекламный текст для компании Russian Cyber Dolls:

Если бы я хотел набор банальностей, остановился бы на этом, но мне нужен сам Филип К. Дик, черт возьми, – на меньшее мои киберматрешки не согласны! Корректирую запрос:

Через какое-то количество попыток у нас есть несколько достойных абзацев: идея того, что андроиды мечтают о киберматрешках, сама по себе прекрасна, а мысль о том, что куклы хотят быть живыми существами, делает осмысленным человека в нашем макете — это образ ожившей матрешки! Отлично!

Обработка изображений с помощью нейросетей PhotoRoom и

Erase bg

Что ж, работа с нейросетями, будем считать, окончена… Стоп, нам же нужно убрать фон с изображений матрешек и девушки-киберпанка! Воспользуемся услугами нейросетей еще раз: PhotoRoom и Erase bg отлично справятся с этой задачей.

Объяснение того, как работать в Figma, в задачи этого материала не входит, но какое-то количество знаний, времени, опыта и терпения позволят нам сделать из этого:

…вот это:

Мы повторили все композиционные идеи, которые выдала нам BlueWillow, подобрали нужные цвета, повторили фон, разместили там Москву будущего, сгруппировали матрешек по трем стилям (Новый кибер-русский, El día de muertos en ruso и Русская Галактическая Империя) и нашли им место, подобрали шрифты и сверстали Филипа нашего Дика.

Остается отдать прототип разработчикам — и вот теперь у нас действительно сайт, про который можно сказать, что мы создали его с помощью нейросетей (но не только).

Выводы

Нейросети — инструмент, а не господь бог (хотя, глядя на результаты, порой кажется, что наоборот). Ну, представьте, что Adobe Photoshop обрабатывает за вас изображения, Figma сама создает лендинги, а Word сам пишет тексты. Тут — тоже самое. Не буквально, но примерно так. Еще раз: нейросети — инструмент.

Пробуйте, анализируйте, ищите, пробуйте еще раз — хороший результат не всегда получается сразу.

На создание макета сайта для этого материала потребовалось генерировать без преувеличения сотни картинок и потратить не один день.

Не забывай про мой тг канал - там еще больше информации на тему заработка в интернете.
 

Как вам статья?
Партнеркин рекомендует
Партнерки
1win Partners
Топовая беттинг и гемблинг партнерка
TRAFORCE
Дейтинговая СPA-сеть
Affiliate Top
Надежная партнерка по бинарным опционам
Сервисы
Dolphin{anty}
Лучший антидетект браузер
PARTNERKIN
20%
FlexСard
Виртуальные карты для арбитража трафика
PARTNERKIN
Карты free
AdPlexity
Мониторинг мобильной, десктоп и нативной рекламы
partnerkin_m
25%


Trust RDP: аренда FB-акков