Як створити кілька розмірів в одному файлі за допомогою монтажних областей

Два розміри на монтажних областях за сім кроків

1. 1

   Створіть документ із монтажною областю

   На lilcactus.app виберіть Файл› потім Створити… Введіть 1080 у полі Ширина і 1080 у полі Висота, увімкніть параметр Монтажна область і натисніть кнопку Створити. Полотно тепер є областю Монтажна область 1, назва якої показана над нею.

   

2. 2

   Додайте другу область

   Клацніть правою кнопкою миші кнопку Переміщення угорі панелі інструментів і виберіть Монтажна область. Коли область виділено, біля кожного її краю з’являється маленький +. Клацніть + праворуч: поруч із першою з’явиться друга область того самого розміру на відстані 40 px.

   

   

3. 3

   Зробіть із неї високу сторіз

   Нову область виділено. На панелі Властивості введіть 1920 у полі Висота (px) і натисніть Tab. Область стає 1080 × 1920 — це розмір сторіз на телефоні; документ збільшується, щоб умістити обидві області. Виберіть Перегляд› потім Припасувати до екрана, щоб побачити обидві.

   

4. 4

   Назвіть області

   На панелі Шари кожна область — це група з позначкою AB, що містить власні шари. Двічі клацніть назву нової області (вона називається Монтажна область): стару назву буде виділено, тож введіть Story і натисніть Enter або ↩. Так само перейменуйте Монтажна область 1 на Post. Під час експорту назви стануть назвами файлів.

   

5. 5

   Задайте обом областям колір тла

   Клацніть рядок Post. На панелі Властивості у списку Фон виберіть Власний, клацніть зразок Колір, введіть F2C14E (теплий жовтий) у полі # і натисніть OK. Клацніть рядок Story і зробіть те саме. Тло області є частиною самої області, а не шаром, тож його не можна випадково зсунути чи замалювати.

   

6. 6

   Додайте текст на кожну область

   Нові шари потрапляють в область, виділену на панелі Шари, а не в ту, яку ви клацаєте. Спершу клацніть рядок Post. Натисніть D, щоб вибрати чорний колір, потім T, щоб вибрати інструмент Текст. На панелі параметрів виберіть Impact у списку Шрифт, введіть 200 у полі Розмір і натисніть кнопку вирівнювання по центру (Вирівняти по центру). Місце клацання позначає низ першого рядка, тож клацніть трохи вище середини квадратної області, введіть SUNDAY, натисніть Enter або ↩ для нового рядка, введіть MARKET і натисніть Ctrl+Enter або ⌘↩. Якщо літери вийшли тонкими (Impact встановлено не на кожному комп’ютері), виберіть Arial і натисніть кнопку B (жирний) на панелі параметрів.

   Клацніть рядок Story, клацніть трохи вище середини високої області й введіть ті самі два рядки. Тепер кожна область має власний текстовий шар, розмір і положення якого можна підібрати під її форму.

   

   

7. 7

   Експортуйте кожну область окремим файлом

   Виберіть Файл› потім Експорт› потім PNG… Коли в документі є монтажні області, параметр Як монтажні області увімкнено, і він показує, скільки файлів ви отримаєте; у списку Монтажні області для експорту можна вибрати одну область замість усіх. Натисніть кнопку Експортувати: Lil Cactus завантажить ZIP з файлами Post.png (1080 × 1080) і Story.png (1080 × 1920).

   Щоб області й шари залишилися редагованими, виберіть також Файл› потім Зберегти як› потім Проєкт Lil Cactus… (Ctrl+Shift+S або ⇧⌘S); після цього Файл› потім Зберегти оновлює цей файл.

   

Робота з монтажними областями

• Намалюйте область будь-якого розміру, протягнувши інструментом Монтажна область по порожньому монтажному столу; щоб змінити розмір виділеної області, перетягніть її краї чи кути.
• Точний розмір і положення: поля X (px), Y (px), Ширина (px) і Висота (px) на панелі Властивості; увімкніть параметр Зберігати пропорції, щоб змінювати обидві сторони разом.
• Перемістіть область разом з усім, що на ній: перетягніть її саму або її назву над нею інструментом Монтажна область.
• Тло: Білий, Чорний, Прозорий або Власний. Прозора область експортується з прозорістю у форматах PNG, WebP, AVIF і TIFF.
• Сховайте область значком ока на панелі Шари, щоб не включати її в експорт.
• Один PDF: Файл› потім Експорт› потім PDF… перетворює кожну видиму область на сторінку одного PDF, у порядку панелі Шари згори вниз, — для набору слайдів чи друкованого меню.

Розрізання дизайну на фрагменти

Фрагменти вирізають частини одного полотна в окремі файли, наприклад кнопки й банер макета вебсторінки.

• Клацніть правою кнопкою миші кнопку Кадрування на панелі інструментів і виберіть Фрагмент, а потім протягніть прямокутник над кожною частиною. Поля Назва і Поле на панелі параметрів задають назву файлу й додатковий відступ; поки фрагментів ще немає, кнопка З напрямних створює фрагменти за розставленими напрямними; після цього вона називається Замінити з напрямних і замінює ваші фрагменти.
• Перегляд› потім Показати› потім Фрагменти показує або ховає контури фрагментів.
• Файл› потім Експорт› потім Експортувати фрагменти… записує кожен фрагмент як зображення в ZIP. Виберіть формат і якість, додайте масштабовані копії, наприклад 2×, у розділі Варіанти експорту й увімкніть параметр Додати автоматичні фрагменти, щоб експортувати також решту полотна навколо ваших фрагментів.

Щоб натомість зберегти кожен видимий шар окремим PNG, скористайтеся командою Файл› потім Експорт› потім Завантажити видимі шари.

Розв’язання типових проблем

Текст зник, коли я закінчив його вводити

Він потрапив в область, виділену на панелі Шари, а область показує лише те, що лежить у її межах. Перетягніть рядок нового текстового шару (з назвою «Текст 2» чи подібною, угорі групи цієї області) на рядок потрібної області.

Немає параметра «Як монтажні області»

Він є лише в діалогових вікнах Файл› потім Експорт, а не у вікні Зберегти зображення. Якщо його немає й там, у документі немає монтажних областей або всі вони сховані: покажіть область значком ока.

Кнопки + не з’являються

Вони видимі лише з інструментом Монтажна область. Виберіть його, а потім клацніть назву області над полотном або її рядок на панелі Шари.

Якщо ви переходите з іншого редактора

Photoshop

Інструмент Artboard під інструментом Move, File › Export › Artboards to Files та інструмент Slice під інструментом Crop.

Монтажні області й фрагменти: запитання та відповіді