Top.Mail.Ru
Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Как я сделал целый сайт с помощью нейросети Редакция «Текстерры»
Редакция «Текстерры»

Количество сайтов в интернете каждый день увеличивается примерно на полмиллиона, а общее — приближается к 2 млрд. Казалось бы, только и успевай их делать, но, тем не менее, большой вопрос, который сегодня беспокоит дизайнеров, звучит так: останемся ли мы все без работы уже в этом году или доживем до следующего? В основе беспокойства — стремительное развитие нейросетей. Искусственный интеллект постоянно совершенствуется и уже сейчас справляется с задачами творческих профессий на таком уровне, что как будто бы вот-вот оставит вне рынка труда иллюстраторов, фотографов, ретушеров, дизайнеров… Но так ли это на самом деле? Разобрались на примере веб-дизайна. Давайте сделаем сайт с помощью нейросети Midjourney!

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

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

В строке сообщений пишем команду /imagine prompt:
Описание изображения: professional website for online education

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

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

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

Пример задания нейросети Midjourney

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

Варианты, сгенерированные нейросетью Midjourney по запросу «professional website for online education»

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

Вариант главной страницы сайта, созданный нейросетью Midjourney

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

Примеры ошибок изображений, созданных нейросетью Midjourney

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

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

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

Пример выдачи поисковика Google по запросу «professional website for online education, vector illustration»

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

Пример векторного изображения ресурса Freepik

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

Продвинем ваш бизнес
Подробнее

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

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

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

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

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

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

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

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

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

Команда для создания матрешки в стиле киберпанк в Midjourney

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

Варианты матрешек, предложенные нейросетью Midjourney

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

Выдача Google по поисковому запросу «russian doll design cyberpunk style»

Создадим главную страницу сайта или лендинг с помощью 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

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

Результат работы нейросети Midjourney по запросу «modern website landing page for a russian doll online store company»

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

Пример, как работать с цветами в Color Name Finder

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

/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

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

Пример работы с цветом в Midjourney

Поищем другое решение. Попробуем исключить из результата матрешек (похоже, сейчас именно они все портят) — пусть нейросеть покажет нам варианты для интернет-магазина без конкретного ассортимента, но в нужной нам цветовой гамме. Для этого из предыдущей команды уберем 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

Пример работы Midjourney

Результаты выглядят, если не удовлетворительно, то, по крайней мере, перспективно, однако мы потеряли важную составляющую — стилистическую. Добавим к предыдущему запросу 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

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

Пример работы Midjourney

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

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

Эксперимент с запросами в Midjourney

Ищем идеи для макета сайта с помощью 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

Замечаем, что 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 — есть интересное по компоновке решение:

Пример работы 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 изображения будем считать приемлемым (пусть и не с первой попытки) результатом — нам сейчас не логотип нужен как таковой, а обозначить его место на странице сайта. Так что выберем из этого:

Логотипы для магазина матрешек, сгенерированные нейросетью Midjourney

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

Так видит Москву 2049 года нейросеть Midjourney

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

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

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

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

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

Развитие персонажа в Midjourney с помощью уточняющих запросов

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

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

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

Развитие персонажа в Midjourney в стиле киберпанк

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

АлВарианты работы Midjourneyьтtt

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

Результат работы Midjourney

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

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

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

Пример запроса для ChatGPT

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

Текст в стиле Филипа К. Дика, сгенерированный ChatGPT

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

Пример корректирования текста ChatGPT

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

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

Убрать фон с иллюстраций, сгенерированных нейросетями, можно, используя еще одни нейросети — PhotoRoom и Erase bg

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

Изображения, подготовленные в нейросетях, для дальнейшей работы Figma

…вот это:

Результат работы в Figma — прототип сайта

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

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

Выводы

  1. Нейросети не занимаются веб-дизайном и не сделают вам сайт. Сайт себе вы сделаете сами (или закажите в Texterra разработку сайта под ключ — у нас недорого).
  2. Тем не менее, нейросети являются прекрасным источником как референсов, из которых можно черпать вдохновение, так и материалов, которые пригодятся вам в работе.
  3. Но все идеи, главным образом, – у вас в голове!
  4. Не забывайте НЕ пользоваться нейросетями: иногда погуглить и быстрее, и результативнее.
  5. Нейросети — инструмент, а не господь бог (хотя, глядя на результаты, порой кажется, что наоборот). Ну, представьте, что Adobe Photoshop обрабатывает за вас изображения, Figma сама создает лендинги, а Word сам пишет тексты. Тут — тоже самое. Не буквально, но примерно так. Еще раз: нейросети — инструмент.
  6. Пробуйте, анализируйте, ищите, пробуйте еще раз — хороший результат не всегда получается сразу. На создание макета сайта для этого материала потребовалось генерировать без преувеличения сотни картинок и потратить не один день.
  7. В названии одного из своих самых известных произведений Филип К. Дик задается вопросом: «Снятся ли андроидам электрические овцы?». В этом материале автор ответил нам через ChatGPT: нет — им снятся киберматрешки.
  8. Ну и главное, ответ на вопрос: «останутся ли дизайнеры без работы?» — да, останутся! Когда выйдут на пенсию.
  9. Но если вдруг: продавать матрешки — отличная идея!

Читайте также:

Новая Midjourney — как работать бесплатно. Гайд

Как мы сделали цифровую копию человека 3 нейросетями

С любимыми не расставайтесь! – оживляем человека

Поделиться статьей:

Новое на сайте

29 мар 2024
177
Чем занимается backend разработчик

Рассказываем, как стать backend разработчиком и сколько он зарабатывает.

29 мар 2024
82 744
Как отследить источники трафика на сайт

Чтобы не растратить весь бюджет на неэффективные каналы продвижения, после каждого запуска рекламы нужно анализировать данные.

29 мар 2024
308
Вывод нового продукта на рынок - инструкция для начинающих продавцов

Вот первые 12 шагов, чтобы запустить продукт и начать его продвижение.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.

Наш подход бустит продажи. Вы платите за результат!