Arsenal Studio — Инструкция

🖥️

Раздел 1

Интерфейс студии

┌─────────────────────────────────────────────────────────────────────────────┐ │ ВЕРХНЯЯ ПАНЕЛЬ (Toolbar) │ │ [Размер холста ▼] [↩Undo] [↪Redo] [− 100% +] [Fit] [Grid] [Snap] │ │ [Dup] [Del] [Group] [↓PNG] [↓JPG] [↓2x] [💾 Save & Get URL] [?] │ ├──────────────────┬──────────────────────────────────────┬────────────────────┤ │ ЛЕВАЯ ПАНЕЛЬ │ │ ПРАВАЯ ПАНЕЛЬ │ │ ────────────── │ ХОЛСТ │ ──────────────── │ │ How to start: │ │ [Props][Layers] │ │ 1. Клик ниже │ │ [Align] │ │ 2. Тяни мышью │ Ваше изображение здесь │ ──────────────── │ │ 3. Выдели → ПП │ │ Позиция X Y │ │ ────────────── │ │ Размер W H │ │ [T] Text │ │ Угол Opacity │ │ [H] Heading │ │ ──────────────── │ │ [📷] Image │ │ (Для текста:) │ │ [⊡] QR Code │ │ Шрифт, размер │ │ [🎯] Banner │ │ Цвет, стиль │ │ [🎨] Logo │ │ ──────────────── │ │ ────────────── │ │ (Для фигуры:) │ │ Shapes: │ │ Заливка, обводка │ │ ■ ○ △ — ◉ ★ │ │ Радиус, толщина │ │ ────────────── │ │ │ │ Background: │ │ │ │ Color Grad Img │ │ │ ├──────────────────┴──────────────────────────────────────┴────────────────────┤ │ СТАТУС-БАР: Selected: Text at 120, 80 | Canvas: 1200×630 | Objects: 3 | Zoom: 80% │ └─────────────────────────────────────────────────────────────────────────────┘

🚀

Раздел 2

Быстрый старт — 5 шагов

Выбери размер холста

В верхнем левом выпадающем меню выбери формат: OG/Facebook 1200×630, Instagram 1080×1080, Story 1080×1920, YouTube 1920×1080 и другие. Или выбери Custom… и введи свои размеры.

Установи фон

В левой панели внизу — раздел Background. Выбери цвет, градиент или загрузи изображение в качестве фона. Можно кликнуть на цветной квадратик из палитры.

Добавь элементы

Кликай кнопки в левой панели — Text, Heading, Image, фигуры. Каждый клик добавляет новый элемент по центру холста. Перетаскивай его мышью в нужное место.

Редактируй в правой панели

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

Сохрани и скачай

Нажми ↓ PNG или ↓ JPG чтобы скачать. Нажми 💾 Save & Get URL чтобы сохранить проект и получить постоянную ссылку на изображение.

💡

Совет: Если что-то пошло не так — нажми Ctrl+Z для отмены. История хранит все твои действия.

🎨

Раздел 3

Левая панель — Элементы

T

Text

Обычный текст. Добавляется в центр. Двойной клик на холсте — редактирование текста.

H

Heading

Заголовок — крупный жирный текст. Идеально для названий и призывов к действию.

📷

Image

Загрузи фото или иллюстрацию с компьютера. Поддерживаются JPG, PNG, GIF, WebP.

⊡

QR Code

Введи URL в поле — сгенерируется QR-код прямо на холсте. Можно изменить размер.

🎯

Banner

Готовые шаблоны баннеров из галереи Arsenal Profi. Нажми — выбери из списка.

🎨

Logo

Добавить логотип из сохранённых в аккаунте. Удобно для брендинга.

Фигуры (Shapes)

■

Rectangle

Прямоугольник. Можно задать радиус углов → закруглённый.

○

Circle

Идеальный круг.

△

Triangle

Треугольник.

—

Line

Линия-разделитель. Можно менять толщину и цвет.

◉

Ellipse

Эллипс (овал).

★

Star

Звезда.

Фон (Background)

🎨 Color

Кликни на цветовой пикер — выбери любой цвет
Или нажми на один из 12 пресетов внизу для быстрой заливки

🌈 Gradient

Выбери два цвета (от → до)
Выбери направление: горизонтальный, вертикальный, диагональный
Нажми Apply Gradient

🖼️ Image

Загрузи фото как фон холста
Кнопка Remove Background — убрать фон

💡 Совет

Фон ≠ элемент — его нельзя выделить или переместить
Фон всегда позади всех элементов
Drag & drop изображения прямо на холст — добавит как элемент

🖱️

Раздел 4

Работа с холстом

🎯

Snap to Grid — включи кнопку Snap в тулбаре, и элементы будут "прилипать" к сетке при перемещении. Удобно для точного выравнивания.

⚙️

Раздел 5

Правая панель — Props / Layers / Align

📐 Props (Свойства)

X, Y — координаты (верхний левый угол)
W, H — ширина и высота в пикселях
Rot° — угол поворота (0–360)
Op% — прозрачность (0=невидимый, 100=полный)

🔤 Текстовые свойства

Размер шрифта — число в пикселях
Цвет текста — цветовой пикер
Шрифт — Arial, Georgia, Impact и др.
B / I / U — жирный, курсив, подчёркнутый
← = → — выравнивание текста

🔷 Свойства фигуры

Fill — цвет заливки
Stroke — цвет обводки
StrokeW — толщина обводки
Radius — радиус скругления (для прямоугольника)

🖼️ Свойства изображения

Flip H — отразить по горизонтали
Flip V — отразить по вертикали

📚 Layers (Слои)

Список всех элементов на холсте. Верхний в списке = поверх остальных. Перетаскивай слои мышью чтобы изменить порядок наложения. Кликни на слой — выделится на холсте.

📏 Align (Выравнивание)

Выдели несколько элементов (Shift+клик или прямоугольное выделение), затем перейди на вкладку Align. Кнопки: выровнять по левому краю, по центру, по правому краю, по верху, по середине, по низу. Также равномерное распределение по горизонтали/вертикали.

🔧

Раздел 6

Верхняя панель — Toolbar

⌨️

Раздел 7

Горячие клавиши

Горячая клавиша	Действие
`Ctrl`+`Z`	Отменить последнее действие (Undo)
`Ctrl`+`Y`	Повторить отменённое (Redo)
`Ctrl`+`D`	Дублировать выделенный элемент
`Delete`	Удалить выделенный элемент
`Ctrl`+`S`	Сохранить проект (Save & Get URL)
`Ctrl`+`A`	Выделить все элементы
`Ctrl`+`G`	Сгруппировать выделенные элементы
`←↑→↓`	Переместить элемент на 1 пиксель
`Shift`+`←↑→↓`	Переместить элемент на 10 пикселей
`Ctrl`+`Scroll`	Масштаб холста (зум)
`Shift`+`Click`	Добавить элемент к выделению
Двойной клик на тексте	Режим редактирования текста
`Esc`	Выйти из редактирования текста

💾

Раздел 8

Экспорт и сохранение

🖼️

PNG

Лучшее качество, поддерживает прозрачность. Для соцсетей, сайтов, печати.

📸

JPG

Меньший размер файла. Для фото-контента, где прозрачность не нужна.

🔍

PNG 2×

Двойное разрешение (Retina). Для печати и HiDPI дисплеев. Размер файла больше.

💾 Save & Get URL — постоянная ссылка

Нажми кнопку Save & Get URL — откроется диалог. Введи название проекта и нажми Save. Система:

Сохраняет проект в твою галерею (вкладка Projects в левой панели)
Рендерит изображение на сервере
Даёт постоянный URL формата https://app.arsenalprofi.com/renders/xxx.png
Этот URL можно вставлять в соцсети, рассылки, сайты — картинка всегда доступна

⚠️

Важно: Экспорт PNG/JPG скачивает файл моментально без сохранения в галерею. Save & Get URL — и скачивает, и сохраняет проект. Рекомендуем использовать Save для всех важных работ.

✨

Полезные советы

🎯

Слои и порядок: Если элемент перекрывает другой — перейди в Layers и перетащи слой ниже/выше в списке.

📋

Быстрое копирование стиля: Дублируй элемент (Ctrl+D), затем меняй только нужное — шрифт, цвет, текст. Позиция сохраняется рядом.

🌈

Градиентный фон + текст: Установи градиентный фон, добавь белый текст с тенью — классическое сочетание для баннеров. Тень настраивается в Props после добавления текста.

📐

Точное позиционирование: Введи точные пиксели в полях X, Y, W, H в правой панели — удобно для pixel-perfect дизайна.

🖼️

Логотип на всех баннерах: Сохрани логотип через раздел Logos в аккаунте, затем используй кнопку Logo в студии — он всегда доступен одним кликом.

Полная инструкция

Содержание

Интерфейс студии

Быстрый старт — 5 шагов

Выбери размер холста

Установи фон

Добавь элементы

Редактируй в правой панели

Сохрани и скачай

Левая панель — Элементы

Фигуры (Shapes)

Фон (Background)

🎨 Color

🌈 Gradient

🖼️ Image

💡 Совет

Работа с холстом

Правая панель — Props / Layers / Align

📐 Props (Свойства)

🔤 Текстовые свойства

🔷 Свойства фигуры

🖼️ Свойства изображения

📚 Layers (Слои)

📏 Align (Выравнивание)

Горячие клавиши

Экспорт и сохранение

PNG

JPG

PNG 2×

💾 Save & Get URL — постоянная ссылка

Полезные советы

Полная инструкция

Содержание

Интерфейс студии

Быстрый старт — 5 шагов

Выбери размер холста

Установи фон

Добавь элементы

Редактируй в правой панели

Сохрани и скачай

Левая панель — Элементы

Фигуры (Shapes)

Фон (Background)

🎨 Color

🌈 Gradient

🖼️ Image

💡 Совет

Работа с холстом

Выделить элемент

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

Переместить элемент

Масштаб / Поворот

Выделить несколько

Масштаб холста

Загрузить изображение

Правая панель — Props / Layers / Align

📐 Props (Свойства)

🔤 Текстовые свойства

🔷 Свойства фигуры

🖼️ Свойства изображения

📚 Layers (Слои)

📏 Align (Выравнивание)

Верхняя панель — Toolbar

Размер холста

Отменить действие

Повторить действие

Масштаб холста

Вписать в экран

Показать сетку

Привязка к сетке

Дублировать

Удалить элемент

Группировать

Скачать PNG

Скачать JPG

Скачать PNG 2×

Сохранить & Получить URL

Справка

Горячие клавиши

Экспорт и сохранение

PNG

JPG

PNG 2×

💾 Save & Get URL — постоянная ссылка

Полезные советы