Lunacy начинаю с GPT

Lunacy

Редактировать...

Отличный запрос 👌 Lunacy для изометрии — прям находка, особенно если делаешь графику под сайт. Давай по шагам, без лишней теории, но с практикой.

1. Подготовка файла

Зачем: чтобы сразу всё встало ровно и не «плыло».

  1. Создай новый файл.
  2. Включи сетку:
  3. View → Grid → Isometric
  4. Шаг обычно ок 8 / 16 px — под веб самое то.
  5. Включи Snap to grid — это сильно упрощает жизнь.

💡 Изометрия = 30° / 150°, Lunacy это учитывает автоматически.

2. Где брать 3D / изометрические объекты

Есть три основных варианта:

🔹 Вариант 1: Встроенные ресурсы Lunacy

  1. Открой Assets → Icons / Illustrations
  2. Ищи по словам: isometric, 3d, cube, city
  3. Плюс: быстро и бесплатно
  4. Минус: стиль иногда «дефолтный»

🔹 Вариант 2: Импорт из других источников

Подойдут:

  1. SVG (лучше всего)
  2. PNG (если уже отрендерено)

Популярные источники:

  1. Isometric packs (Icons8, Craftwork, LS.graphics)
  2. Экспорт из Blender / Spline → SVG/PNG

📌 Важно: все объекты должны быть в одной изометрической проекции, иначе будет «косить».

3. Приведение объектов к одной перспективе

Если объект плоский (SVG / Shape):

  1. Выдели объект
  2. Transform → Skew / Rotate
  3. Обычно:
  4. X: 30°
  5. Y: -30°
  6. Масштабируй равномерно (Shift)

Если объект уже изометрический — ничего не трогай, только масштаб.

4. Сборка композиции (самое важное)

🧱 Мышление слоями

В изометрии всё строится как:

  1. нижний уровень — платформа / земля
  2. выше — здания / объекты
  3. ещё выше — детали

В Lunacy:

  1. следи за Layers panel
  2. что дальше — то выше в списке

📌 Нет Z-оси → слои = глубина

5. Тени = магия объёма

Без теней изометрия выглядит плоско.

Как делать тени:

  1. Дублируй объект
  2. Залей чёрным
  3. Opacity: 10–20%
  4. Skew / Scale по изометрии
  5. Blur: 8–24 px

💡 Все тени должны идти в одну сторону (обычно вниз-вправо).

6. Свет и цвет

Для сайта советую:

  1. 1 основной источник света (слева сверху — классика)
  2. Не больше 3–4 оттенков на объект
  3. Верх — светлее
  4. Бок — средний
  5. Нижняя грань — темнее

В Lunacy удобно:

  1. использовать Linear Gradient
  2. сохранять цвета в Styles

7. Группировка и компоненты

Чтобы не сойти с ума:

  1. Объект → Group
  2. Повторяющиеся элементы → Component
  3. Названия слоёв типа:
  4. House / Roof
  5. House / Wall left

🔥 Потом легко менять цвет / размер всей сцены.

8. Экспорт для сайта

Лучшие варианты:

  1. SVG — если без сложных теней и блюра
  2. PNG / WebP — если много эффектов

Экспорт:

  1. 2x или 3x
  2. Проверяй вес (до 300–500 KB — идеально)

9. Типичные ошибки

❌ Смешение разных углов

❌ Тени в разные стороны

❌ Слишком мелкие детали

❌ Нет воздуха между объектами

10. Хочешь — соберём вместе

Могу:

  1. разобрать конкретную сцену (например: SaaS, город, дашборд)
  2. подсказать стиль под сайт (минимал / иллюстрация / псевдо-3D)
  3. дать шаг-за-шагом упражнение для тренировки

Скажи:

👉 под какой сайт (лендинг / SaaS / маркетплейс)

👉 более плоско или максимально «3D»?