March 14

Урок 6.2.

Модуль 6. Создание сайтов и презентаций

Урок 2. Создание сайтов с помощью нейросетей

Figma + Midjourney

Вместо Midjourney вы можете использовать Kandinsky 2.2 , Recraft, Leonardo или любую другую нейросеть, которая понравилась вам для работы с генерацией изображения.

https://www.figma.com/

  1. Если еще не зарегистрированы, регистрируемся в Figma
  2. Выбираем бесплатную версию "Starter"

3. Переходим в конструктор "Design with Figma"

4. Попадаем на страницу, где и будем создавать наш сайт

5. Нажимаем в строке с инструментами на значок, выбираем "Section"

6. И выделяем поле для работы. Рисуем большой прямоугольник

7. Сегодня мы сделаем сайт для магазина игрушек, для девочек

8. Переходим в Midjourney и генерируем изображение, которое будем использовать на первом слайде нашего сайта

9. Я написал такой промпт и сгенерировал картинки

girl, 5 years old, with long brown hair, standing with a toy bear in her hands, in a beautiful pale pink dress on a white background beautiful cinematic 8K realistic 3d

10. Понравившуюся картинку сохраняем и добавляем на макет в нужное нам место

11. В конструкторе также можно работать с изображением и немного менять его настройки. Нажав на изображение появляется инструментарий

12. Добавляем текст

13. Выбираем понравившийся нам шрифт, передвигаем надпись туда, куда нам нужно. Пока для примера будем использовать английские слова, чтобы выбрать красивый и эстетичный шрифт

Для русского языка шрифты нужно качать отдельно

14. Назовем наш магазин "Маша и Медведь"

15. Теперь добавим кнопку, которая будет называться "Перейти в каталог"

16. Для этого мы рисуем прямоугольник с помощью этого инструмента

17. Чтобы кнопка стала прозрачной, возле Fill нажимаем на "-"

И добавляем Stroke, выбираем цвет рамки нашей кнопки

18. В готовую кнопку пишем "Перейти в каталог"

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

20. Вот, что у нас получилось

21. По такому же принципу делаются остальные слайды.

Которые будут зависеть от заказчика и что ему необходимо сделать.

Я создал еще один слайд, с каталогом игрушек, все изображения сгенерировал Midjourney

Домашнее задание:

С помощью Figma + Midjourney создать 1-2 слайда для сайта, как мы сделали это в нашем уроке. И прислать его куратору на проверку.

Тему сайта выбираем по вашему желанию, вот несколько идей:

1.Магазин цветов

2. Ресторан

3. Медицинский центр

4. Туристическая фирма

5. Школа иностранных языков

Вместо Midjourney вы можете использовать Kandinsky 2.2 , Recraft, Leonardo или любую другую нейросеть, которая понравилась вам для работы с генерацией изображения.

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