Дизайн сайта в Midjourney
Всем привет, на связи NB.
В этой статье мы обсудим использование нейронных сетей (в частности midjourney) в дизайне веб-сайтов. Хотя создание сайтов исключительно с помощью искусственного интеллекта на данный невозможно (об этом есть отдельное видео у меня на канале), он все же может послужить нам хорошим источником вдохновения и ориентиром для наших реальных проектов.
Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «картинок сайтов». (Давайте договоримся, что я буду называть то, что выдает нейронка — «картинки сайтов».) А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.
Итак, есть пара удачных конструкций для картинок сайтов, которые я сам для себя подобрал, протестировал и сегодня поделюсь с вами.
1ый запрос.
Он состоит из следующей конструкции:
— professional website
+ for (описываем тематику)
+ ui, ux, ui/ux, website, landing page (постоянные переменные)
+ colors + style (можем добавить опционально, в зависимости от задачи)
Примеры запросов:
professional website for online education, ui, ux, ui/ux, website, landing page, dark colors, vector illustration
professional website for a tour to Thailand, ui, ux, ui/ux, website, landing page, watercolor illustration
professional website for crypto coin, ui, ux, ui/ux, website, landing page, dark gold and neon colors
professional website for youtube bloggers, ui, ux, ui/ux, website, landing page, 3d cartoon illustration
professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors
professional website for fitness trainer, ui, ux, ui/ux, website, landing page, violet and red colors
Примеры, как могут выглядеть «картинки сайтов» с этой конструкцией:
Всем привет, на связи NB.
В этой статье мы обсудим использование нейронных сетей (в частности midjourney) в дизайне веб-сайтов. Хотя создание сайтов исключительно с помощью искусственного интеллекта на данный невозможно (об этом есть отдельное видео у меня на канале), он все же может послужить нам хорошим источником вдохновения и ориентиром для наших реальных проектов.
Я продемонстрирую несколько интересных конструкций запросов (промтов) для создания «картинок сайтов». (Давайте договоримся, что я буду называть то, что выдает нейронка — «картинки сайтов».) А также разберемся как можно настроить и оптимизировать их для достижения желаемого вами результата. Я лично всё отобрал, протестировал и теперь делюсь этим с вами.
- Стоит сказать, что я не претендую на роль супер эксперта и гуру в этом вопросе, просто делюсь тем, на что сам потратил много часов.
Итак, есть пара удачных конструкций для картинок сайтов, которые я сам для себя подобрал, протестировал и сегодня поделюсь с вами.
1ый запрос.
Он состоит из следующей конструкции:
— professional website
+ for (описываем тематику)
+ ui, ux, ui/ux, website, landing page (постоянные переменные)
+ colors + style (можем добавить опционально, в зависимости от задачи)
Примеры запросов:
professional website for online education, ui, ux, ui/ux, website, landing page, dark colors, vector illustration
professional website for a tour to Thailand, ui, ux, ui/ux, website, landing page, watercolor illustration
professional website for crypto coin, ui, ux, ui/ux, website, landing page, dark gold and neon colors
professional website for youtube bloggers, ui, ux, ui/ux, website, landing page, 3d cartoon illustration
professional website for Real Estate, ui, ux, ui/ux, website, landing page, light colors
professional website for fitness trainer, ui, ux, ui/ux, website, landing page, violet and red colors
Примеры, как могут выглядеть «картинки сайтов» с этой конструкцией:
2ой запрос основан на весах в запросах:
— Website for (описываем тематику)::5
+ Professional Website UI Design::4
+ user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3
+ colors, style::3 (опционально)
+ deformed, outdated, cluttered layout, low-quality graphics, mockup::-2 (минусовые веса)
Примеры запросов:
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for a tour of Thailand::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 watercolor illustration::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for crypto coin::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 dark gold and neon color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Примеры «картинок сайтов» в этой конструкции:
— Website for (описываем тематику)::5
+ Professional Website UI Design::4
+ user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3
+ colors, style::3 (опционально)
+ deformed, outdated, cluttered layout, low-quality graphics, mockup::-2 (минусовые веса)
Примеры запросов:
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for a tour of Thailand::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 watercolor illustration::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Website for crypto coin::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 dark gold and neon color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
Примеры «картинок сайтов» в этой конструкции:
Как управлять запросом
Давайте посмотрим, как будет выглядеть эта конструкция, если мы будем добавлять там разные цвета, стилистику и прочие детали. Будем брать за основу этот запрос:
professional website for online education, ui, ux, ui/ux, website, landing page --seed 5228701
--seed 5228701 — Зерно нам нужно для того, чтобы было удобно отслеживать результат.
Давайте посмотрим, как будет выглядеть эта конструкция, если мы будем добавлять там разные цвета, стилистику и прочие детали. Будем брать за основу этот запрос:
professional website for online education, ui, ux, ui/ux, website, landing page --seed 5228701
--seed 5228701 — Зерно нам нужно для того, чтобы было удобно отслеживать результат.
Чем именно мы можем управлять?
Цвета:
Общее описание цвета:
Цвета:
Общее описание цвета:
- Dark colors (темные цвета)
- Light colors (светлые цвета)
- Bright colors (яркие цвета)
- Black-white (черно-белое)
- Colorful (цветное)
Пример:
Конкретные цвета, например:
- Pink (Розовый)
- Blue (Синий)
- Violet (Фиолетовый)
- Red (Красный)
- Green (Зелёный)
- и тп.
Примеры:
В том числе работают и необычные цвета или даже материалы:
- Peach (Персиковый)
- Indigo (Индиго)
- Jade (Джейд)
- Salmon (Лолосевый)
- Wooden (Деревянный)
- Metalic (Металический)
- Golden (Золотой)
- и тп.
Примеры:
Пример таблички английских цветов:
Можно несколько цветов писать в запросе. Можно писать gradient (градиент).
Указать конкретный цвет через решетку — к сожалению, не получается.
Стили иллюстраций для сайта:
- Vector illustration
- Flat illustration
- Outline illustration
- Lineart illustration
- Watercolor illustration
- Isometric illustration
- Cartoon
- 3d
- Abstract art
- Photo realistic
- и тп. и опять же стили можно смешивать!
Примеры:
Прочие подсказки, которые могут добавить детали:
- Dashboard
- Infographic
- Ecommerce
- Online-store
- Minimalism
- Interface
- Social network
- и тп. и конечно можно всё смешивать со всем)
Примеры:
Ну и конечно мы можете добавлять прочие слова, описывающие сайт. Указывать какие-то предметы, например:
- Books
- Cat
- Flowers
- Girl with the phone
- и тп.
- Но не стоит указывать много предметов, нейросеть неспособна, к сожалению, отображать кучу разных предметов под ваш запрос.
Примеры:
Все это можно делать и под второй запрос, тот что с весами.
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
На мой взгляд запрос с весом работает, как не странно, хуже. Не смотря на то, что c весами можно контролировать присутствие того или иного запроса, сама работа получается не такой, как я ожидаю. Но в любом случае, это может быть любопытно в качестве рефа и поиска вдохновения.
Тут конечно можно контролировать степень стиля и убирать какие-то детали.
Website for online education::5 Professional Website UI Design::4 user-friendly, modern, clean, responsive, Adobe Photoshop, Figma, ux, ui, uxui, professional, award-winning, intuitive navigation, visually appealing layout, high-quality graphics::3 pink color::3 deformed, outdated, cluttered layout, low-quality graphics, mockup::-2
На мой взгляд запрос с весом работает, как не странно, хуже. Не смотря на то, что c весами можно контролировать присутствие того или иного запроса, сама работа получается не такой, как я ожидаю. Но в любом случае, это может быть любопытно в качестве рефа и поиска вдохновения.
Тут конечно можно контролировать степень стиля и убирать какие-то детали.
Примеры:
Но все это конечно просто референс.
Чтобы из этого получился сайт нужно уже в фигме, фотошопе перерисовать. Отсюда можно взять картинку, но она не качественная. (Размер маленький)
В целом можно и отдельно генерировать картинки, иллюстрации для сайта. Об этом обязательно расскажу в одном из следующих видео) в том числе, как увеличить их качество.
А на этом всё, увидимся очень скоро. Пока пока.
Чтобы из этого получился сайт нужно уже в фигме, фотошопе перерисовать. Отсюда можно взять картинку, но она не качественная. (Размер маленький)
В целом можно и отдельно генерировать картинки, иллюстрации для сайта. Об этом обязательно расскажу в одном из следующих видео) в том числе, как увеличить их качество.
А на этом всё, увидимся очень скоро. Пока пока.
Спасибо за просмотр ❤︎
Подписывайтесь на мои соцсети
Подписывайтесь на мои соцсети
