Новый союзник: как дизайнеру использовать нейросети

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

Генерировать изображения

Наверняка, вы уже видели, как хорошо нейросети могут создавать изображения. Например, изображать города в образе людей или персонажей Гарри Поттера в стиле фильмов Уэса Андерсона. Используйте эти возможности для создания уникальных иллюстраций и фотографий для сайта. Это пригодится как для творческих проектов, так и в случаях, когда заказчик не может предоставить изображения. Нейросети могут сгенерировать иллюстрации в заданном вами стилем, «стоковые» фотографии и даже мокапы, которые можно использовать для презентации концепта заказчику.

Новый союзник: как дизайнеру использовать нейросети

Нейросеть в большинстве случаев не выдаст вам идеальный результат и изображение нужно будет доработать вручную. Но это всё равно будет быстрее, чем рисовать иллюстрацию с нуля.

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

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

Стоит воспринимать нейросети как инструмент, такой же как Фотошоп, Фигма или другой редактор, где вместо кистей используется текстовый запрос. И чтобы оставаться в профессии дизайнера востребованным, нужно каждый день осваивать новые инструменты, в том числе и нейросети», — Лёша Ларионов, дизайнер Тильды.

<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmorwood.ru%2F&postId=756141" rel="nofollow noreferrer noopener" target="_blank">Сайт</a> с концептами от нейросети
Сайт с концептами от нейросети
<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ferikte-space-travel.tilda.ws%2Fno-pop-up&postId=756141" rel="nofollow noreferrer noopener" target="_blank">Учебный проект</a> с графикой, сгенерированной в Midjourney
Учебный проект с графикой, сгенерированной в Midjourney

Писать тексты

Если у заказчика нет готовых текстов, а сайт нужно срочно, можно попросить нейросети написать тексты для лендинга, описания товаров или страницы 404. Самая популярная текстовая нейросеть — ChatGPT. Она может работать не только с английским языком, но и с русским. Как в случае с изображениями, результат может быть шаблонный и сырой. Поэтому тексты от AI можно использовать как основу, которую вы доработаете. Так вы сможете быстро опубликовать сайт и, например, не задерживать старт продаж.

Новый союзник: как дизайнеру использовать нейросети

«Тема нейросетей у меня сразу вызвала дикое любопытство, потому что в дизайнерской практике часто встают вопросы нехватки контента и авторского права. Например, клиент не хочет расширять бюджет на копирайтера и у него нет возможности произвести фотосессию. В этом случае мы можем создать черновой контент при помощи нейросетей и довести его до ума самостоятельно. Экономия времени впечатляющая.

В работе с нейросетями самое важное — правильно построить свой запрос (промпт). При точной формулировке задачи, нейросеть показывает впечатляющие результаты. При неточной — может получиться, мягко говоря, не очень. Мы так два дня бились над генерацией изображения сайгака, и ни к чему в итоге не пришли: видимо, это настолько редкое животное, что даже нейросеть уже не знает, как оно выглядит. Но бывали случаи, когда кривой промпт давал очень интересные эффектные результаты. К аналогичным случайным эффектам зачастую приводят ошибки в программах типа Фотошопа или Синемы 4D. Вроде ошибка, а получилось классно. Поэтому экспериментируйте!» — Аня Мельник, дизайнер сайтов на Тильде».

Вдохновляться

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

С анатомией нейросети справляются не очень хорошо
С анатомией нейросети справляются не очень хорошо

«В студии мы давно используем нейросети, чтобы упростить работу с обработкой контента для сайта. Например, удаляют фон или увеличивают размер изображения Remove.bg и Upscale.media.

Midjourney мы тестировали для создания визуала постов и рекламных креативов. А недавно с помощью нейросети мы генерировали контент для коммерческого проекта — сайта мероприятия CPA LIFE FEST. Подробнее об этом мы рассказали в статье, а ещё посчитали, сколько времени на ту же работу ушло бы у иллюстратора. Разница, конечно, впечатляющая, нейросеть круто сэкономила нам время.

Безусловно, нейросети — это полезный инструмент, который сокращает сроки разработки и снимает с дизайнеров рутинные задачки. А ещё они помогают найти новые свежие решения. Я думаю, что все AI должны быть изучены дизайнерами. Ведь любому бизнесу выгодно сокращать сроки и затрачиваемые ресурсы. Нейросети как раз решают эти задачи без потери в качестве. Соответственно, на рынке будут более востребованы те, кто развивается в этом направлении», — Никон Жуков, руководитель дизайнеров веб-студии Молния.

Для сайта мероприятия CPA LIFE FEST изображения генерировали в Midjourney
Для сайта мероприятия CPA LIFE FEST изображения генерировали в Midjourney

Озвучить текст

Нейросети уже научились озвучивать текст не роботизированным, а человечным голосом. Если вы, например, создаёте сайт и хотите сделать видео о продукте, записать голос озвучки с помощью AI будет быстрее, чем делать это самостоятельно. Свой голос записывать сложно: нужен микрофон, тихое помещение без эха, хорошая дикция. А если текст озвучивает нейросеть, об этом заботиться не нужно.

Мы в Тильде уже используем нейросети для озвучивания коротких видео для социальных сетей и обучающих туториалов. Это ускоряет процесс создания контента и освобождает время для других задач.

С озвучиванием текста на разных языках, включая русский, неплохо справляется <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fspeechactors.com%2F&postId=756141" rel="nofollow noreferrer noopener" target="_blank">Speechactors</a>
С озвучиванием текста на разных языках, включая русский, неплохо справляется Speechactors

Экономить время

Использовать нейросети веб-дизайнер может не только при создании сайтов, но и в личных целях. Например, ChatGPT может предложить идеи для личного проекта, расписать для него структуру и придумать тексты. Ещё можно попросить нейросеть создать вам контент-план для социальных сетей, написать текст письма с предложением своих услуг, или спросить, какие почитать книги на тему веб-дизайна.

Новый союзник: как дизайнеру использовать нейросети

«Почти каждый мой проект не обходится без нейросетей. Клиенты не против, а даже наоборот, очень поддерживают идею их использования, интересуются и сами пробуют что-то сделать. Чаще всего я работаю с текстовыми нейронками — ChatGPT и Notion AI. Написать текст с нуля, переработать существующий, изменить тон, характер или размер — это всё к ним. Также текстовые нейросети хороши для генерации идей. Незаменимые помощники!

Несмотря на то, что свое знакомство с нейросетями я начала с text-to-image, в частности Midjourney, их в моей реальной работе чуть меньше. Пока не было ни одного случая, когда заказчик бы сказал: «У нас нет материалов, давайте нагенерируем». Но я этого момента очень жду! Пока довольствуюсь красивыми картинками для личных проектов и концептов.

Я считаю, что нейросети — это лучшее, что произошло в дизайн-среде за последние пару лет. Польза от них колоссальная, работу они не отняли, а только подарили массу свободного времени. Советую всем и каждому пощупать нейросети, тем более пользоваться ими не так сложно, как кажется на первый взгляд. В сети миллионы сайтов с подборками промтов, примеров работ и гайдов — генерируй не хочу! Даже у нас в Школе Тильды есть мини-курс по Midjourney», — Миша Таби, UX/UI дизайнер, куратор Школы Тильды.

Как составлять запросы для нейросетей

Чтобы получить от нейросети желаемый результат, нужно правильно сформулировать свой запрос — промт. Если от ChatGPT и других текстовых нейросетей довольно просто получить качественный ответ, с изображениями часто приходится помучаться. Есть несколько способов облегчить себе задачу:

  • Изучайте официальные гайды сервисов с AI. Например, у Midjourney есть подробный справочник, который поможет разобраться с командами и промтами.
  • Избегайте абстракций. Например, если вы напишите «играет музыка» результат получится непредсказуемым. Можно было бы его уточнить, добавив контекста и деталей: «женщина играет на пианино в ресторане в окружении сидячих за столиками людей».

<p>Картинка сгенерирована в Midjourney</p>

Картинка сгенерирована в Midjourney

  • Уточняйте количество объектов, если вы хотите, чтобы их на картинке было несколько. Например, не «люди в библиотеке», а «три человека в библиотеке». Если не указать точное значение, нейросеть сгенерирует картинку со случайным количество объектов.
  • Уточняйте цветовую палитру. Например, если вам нужны изображения для сайта, вы можете подобрать подходящие для вашего проекта цвета и попросить нейросеть их использовать при генерации иллюстраций.
  • Задавайте стилистику. Midjourney может создавать изображения во многих стилях: пиксель-арта, киберпанка, фотореализма, фэнтези и так далее. Также в запросе можно указать имя художника, стилю которого будет подражать нейросеть.
Новый союзник: как дизайнеру использовать нейросети
  • Пишите запросы на английском языке: с ним нейросети справляются лучше. Если есть трудности с переводом — используйте Deepl или другой переводчик.
  • Используйте генераторы промтов — специальные сервисы, которые помогают на основе вашего описания изображения создать запрос. Одни из таких — MJ Promt Tool и Phraser.

  • Просите нейросеть составить промт. Если вы хотите получить картинку, похожую на конкретный референс, — загрузите его в Midjourney и через команду /describe попросите AI сгенерировать промт. Нейросеть выдаст четыре варианта, которые вы можете использовать для генерации изображений.

Новый союзник: как дизайнеру использовать нейросети

Сервисы с AI

Сенерировать изображения

Сгенерировать тексты

Подобрать шрифтовую пару

Озвучить текст

Увеличить разрешение изображений

Видео: Нейросети для дизайнера: Midjourney, ChatGPT и ещё 10 сервисов

На YouTube-канале Тильды Роман Резуненко, руководитель дизайн-команды Answer, проводил вебинар о том, какие дизайн-задачи можно поручить искусственному интеллекту. Посмотри, если вы заинтересовались темой и хотите увидеть нейросети в действии.

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

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

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

4444
12 комментариев

Всё хорошо, пользуюсь ежедневно несколькими сервисами/нейронками, но генераторы промптов — полная дребедень. Если умеешь составлять хотя бы примитивное ТЗ — нейронки тебе уже подвластны.

1

прикольно, что нейросети это сборная солянка без ограничений, только жанр выбирай

Да, чего только не хочешь можно делать с этими нейросетями

это отличный помощник для дизайнеров на мой взгляд, много идей для воплощения и реализации возможно

как по мне главный плюс нейросети это скорость обработки

Самая популярная текстовая нейросеть — ChatGPT.
Интересно появится ли более популярная ИИ?

Вряд ли , там самая продвинутая модель на данный момент. Это примерно как Гугл поисковик , вряд ли что-то лучше будет .