Використання Lolly

Практичний посібник із того, як власне користуватися застосунком — відкрити інструмент, попрацювати на полотні, експортувати, зберегти та поділитися. Усе тут працює на вашому пристрої: без облікового запису, без завантаження на сервер, без потреби в інтернеті після першого запуску.

Уперше тут? Початок роботи охоплює встановлення/розгортання застосунку; ця сторінка — про те, як керувати ним після відкриття.

Як відкрити інструмент

Головний екран — це галерея: усі інструменти, згруповані за категоріями. Клацніть картку, щоб відкрити інструмент; якщо ви вже працювали з ним раніше, кнопка Продовжити відновить вашу останню сесію. Скористайтеся полем пошуку, щоб фільтрувати за назвою.

Кожен інструмент — це розділений вигляд: елементи керування з одного боку та живий попередній перегляд (полотно) з іншого. Змініть будь-який елемент керування — і попередній перегляд оновиться миттєво.

Кілька інструментів (як-от Layout Studio) натомість відкриваються як вільне полотно — поверхня без зайвого інтерфейсу з прямим маніпулюванням, де ви перетягуєте, змінюєте розмір, обертаєте та прив'язуєте блоки тексту, фігур і зображень, а подвійним клацанням редагуєте текст на місці. Воно експортується тим самим шляхом рендерингу, що й будь-який інший інструмент, тож полотно і є файл. Див. Вільне полотно нижче.

Полотно (попередній перегляд)

Попередній перегляд завжди показує саме те, що буде експортовано.

Комп'ютер

• Масштаб: Cmd/Ctrl + прокручування або зведення пальців на трекпаді — масштаб центрується на вказівнику.
• Панорамування: утримуйте Space і перетягуйте або перетягуйте середньою кнопкою миші. (Звичайні клацання залишаються вільними, щоб клацати частини дизайну.)
• Клавіатура: 0 = вписати у вікно · 1 = 100% · + / − = масштаб.
• HUD масштабу: невеликий елемент керування − NN% + Fit у кутку. Клацніть відсоток, щоб перемкнути Fit ↔ 100%.

Дотик

• Зведіть пальці для масштабу, перетягуйте для панорамування, подвійний дотик — скинути до вписування.

Клацніть, щоб перейти до елемента керування: клацніть будь-який елемент дизайну, і відповідне поле на бічній панелі отримає фокус та прокрутиться у видиму область — для повторюваної групи рядків воно розгорне саме той рядок, який ви клацнули, тож редагувати те, що бачите, — це один дотик.

Зміна розмірів завжди повертає вигляд до охайного вписування.

Вільне полотно (Layout Studio)

Інструменти з вільним полотном додають робочу поверхню навколо монтажної області, наче стіл дизайнера:

• Розміщення поза полотном. Перетягніть блок за край рамки — і він залишиться повністю видимим і доступним для вибору: припаркуйте елементи збоку, поки компонуєте композицію, а потім перетягніть їх назад. Усе за межами рамки м'яко приглушене, тож область експорту завжди зчитується з першого погляду, а рамка зберігає свою тінь, щоб точно позначати, де починається файл.
• Експортується лише рамка. Експортований файл обмежений монтажною областю — усе, що залишилося ззовні (або частина блока, що звисає за край), просто обрізається у вихідному файлі, як у растрових, так і у векторних форматах.
• Зменшіть масштаб нижче Fit (аж до 20%), щоб побачити весь стіл, коли ви розмістили щось далеко за межами рамки.
• Змінюваний розмір монтажної області. Зміна розмірів експорту змінює розмір рамки на місці; блоки зберігають свої позиції, тож ви можете перекомпонувати макет навколо наявного вмісту.

На телефоні

На вузьких екранах компонування переформатовується в один стовпець:

• Елементи керування стають панеллю угорі з ручкою для перетягування на нижньому краї. Перетягуйте ручку, щоб змінити її розмір — вона прив'язується до вигляду / половини / повного розміру — або торкніться ручки, щоб перемкнути згорнуто ↔ розгорнуто. Попередній перегляд заповнює простір нижче і залишається видимим під час редагування.
• Плаваюча кнопка Рендер відкриває панель Експорт — усі елементи керування форматом, розміром, копіюванням, збереженням і завантаженням в одному місці. Закрийте її, торкнувшись фону.

Елементи керування (поля вводу)

Інструменти показують лише ті поля вводу, які мають змінюватися — усе інше (кольори, компонування, типографіка, логіка) зафіксовано автором інструмента, тож усе, що ви створюєте, відповідає правилам, встановленим автором. Поля вводу охоплюють текст, повзунки, палітри кольорів, розкривні списки, дати, засоби вибору зображень і повторювані групи рядків. Деякі згруповані під згортними секціями.

Скидання: Очистити зміни повертає кожне поле до значень за замовчуванням.

Ваші дані та фото

Профіль (у верхньому правому куті галереї) містить ваше ім'я, контактні дані та необов'язкове фото. Інструменти, що запитують ці поля, заповнюють їх автоматично — задайте їх один раз, і ваш підпис до листа, лого-лакапи та бейджі заповнюватимуться самі. Ви все одно можете перевизначити будь-яке поле для окремої сесії. Увімкніть Використовувати мої дані, щоб інструмент міг їх прочитати.

Ваше фото та дані зберігаються лише на цьому пристрої. Профіль може бути не лише вами — це може бути команда чи роль, у яку ви час від часу входите. Див. Профілі для повної картини, зокрема про ведення кількох профілів.

Збереження та продовження

Клацніть Зберегти, щоб зберегти поточні поля вводу як сесію для цього інструмента. Ви можете тримати кілька іменованих сесій на інструмент; кнопка Продовжити кожного інструмента відкриває вашу найновішу, а кнопка історії (угорі праворуч, поряд із вашим профілем) перелічує кожну збережену сесію по всіх інструментах. Сесії зберігаються локально на пристрої. Щоб упорядкувати їх, відкрийте Проєкти (нижче).

Проєкти

Проєкти — відкрийте їх на вкладці Проєкти поряд із Інструменти або через Профіль → Сховище → Упорядкувати в Проєктах — це домівка для всього, що ви зберегли, і працює вона як файловий менеджер:

• Вкладені папки. Групуйте збережені сесії в папки, а папки — у папки, на будь-яку глибину. Створіть папку, перейменуйте її або перетягніть плитку на іншу папку, щоб перемістити; навігаційний ланцюжок поверне вас угору. Завжди наявна папка Без категорії містить усе, що ще не розкладено.
• Створюйте нову роботу одразу тут. Усередині папки + Новий інструмент відкриває інструмент і автоматично складає його перше збереження в цю папку.
• Множинний вибір (комп'ютер). Поставте прапорець на плитці, протягніть рамку виділення по порожньому полотну або клацайте з Shift/Cmd; клацніть правою кнопкою по плитці для контекстного меню. Далі дійте на все виділення одразу.
• Рендер цілої папки чи виділення. Рендер папки експортує кожну збережену сесію в папці — зокрема її вкладені папки — як один вкладений .zip. Рендер виділення робить те саме для будь-якого множинного виділення, а окрема сесія рендериться прямо у власний файл. Не потрібні Batch/Pro.
• Поділіться збереженою сесією. Клацніть правою кнопкою по сесії → Скопіювати посилання, щоб скопіювати посилання, яке відкриє її з тими самими полями вводу (повне вікно «Поділитися» — див. нижче).

Як поділитися посиланням

Кожне поле вводу зафіксоване в URL сторінки, тож посилання і є дизайн. Скористайтеся Поділитися в елементах керування експортом — або Скопіювати посилання на будь-якій збереженій сесії у Проєктах — щоб відкрити вікно «Поділитися»: готове до копіювання посилання плюс перемикачі для шифрування посилання та того, що станеться під час відкриття (повноекранний режим, розгорнута панель експорту, завантаження під час відкриття з &export або копіювання в буфер обміну з &copy).

Великий дизайн дав би довгий URL, тож вікно також пропонує Найкоротше посилання, яке пакує весь стан у компактний токен — читабельна форма теж завжди доступна. Вставте його колезі, додайте в закладки чи закомітьте. (Повні подробиці: URL-режим.)

Зображення, які ви завантажили зі свого пристрою, не включаються до спільного посилання — вони існують лише на вашій машині.

Живе відео (інструменти, що реагують на рух)

Фотофільтри — Halftone, Scanline, Posterize, Duotone — показують кнопку У прямому ефірі, де доступна камера. Увімкніть її, і ефект відстежуватиме вашу вебкамеру кадр за кадром, тож він реагуватиме на рух; результат можна записати у GIF, WebM чи MP4. Кадри зчитуються й обробляються на вашому пристрої і ніколи його не залишають, а камера звільняється щойно ви зупиняєте або залишаєте інструмент. (Будь-який засіб вибору зображень також має Зробити фото, щоб зняти окремий кадр як зображення на пристрої.)

Мої зображення

Коли інструмент дозволяє додати зображення з вашого пристрою, воно масштабується вниз, очищається від EXIF/GPS і зберігається до вашої особистої бібліотеки Мої зображення (у Профіль → Сховище). Повторно використовуйте його в будь-якому інструменті. Бібліотека обмежена та цілком локальна — керуйте зображеннями чи видаляйте їх там.

Каталог — ваша бібліотека ресурсів

Каталог (#/c або посилання Каталог у меню) збирає все, чим можуть скористатися ваші інструменти — брендові логотипи, зображення, аудіо та рух, згруповані за видом — і саме тут живуть ваші власні творчі файли. Без сервера, без адмінконсолі, без pull request: усе на вашому пристрої.

• Занесіть свої файли. Перетягніть будь-яке зображення, SVG, аудіокліп, відео, Lottie чи PDF на область завантаження — або клацніть, щоб вибрати — і воно миттєво потрапить до вашого каталогу, готове в засобі вибору ресурсів кожного інструмента. Заносьте скільки завгодно; воно ніколи не залишає ваш пристрій.
• Позначте улюблене, до чого тягнетеся. Позначте ресурс (чи брендовий зразок) ★, і він закріпиться вгорі кожного засобу вибору, тож ваш улюблений логотип чи колір буде за одне клацання.
• Наведіть лад. Перекатегоризуйте ресурс до іншої групи, приховайте спільний брендовий ресурс, яким не користуєтеся (з Показати приховані, щоб повернути його), або видаліть власні завантаження остаточно.

Беріть свою палітру та шрифти будь-куди

Панель Зразки в Каталозі — не лише для довідки: клацніть колір, щоб скопіювати його, або завантажте всю брендову палітру у форматі, яким говорить ваш інший інструмент:

• Дизайн-токени (JSON), CSS-змінні або CSS-класи — вставте бренд прямо в таблицю стилів чи збірку;
• Adobe Swatch Exchange (.ase) — завантажте його в Illustrator чи Photoshop;
• Палітра GIMP (.gpl) — для GIMP чи Inkscape.

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

Ресурси — це одна половина відкритого шляху «зроби сам»; інша — створення власних інструментів: вільне полотно (Layout Studio, описане вище) дозволяє збудувати інструмент візуально, без коду.

Звук і доступність

Lolly прагне бути зручним для всіх. Інтерфейс керується з клавіатури, спеціальні елементи керування мають належні мітки для програм зчитування з екрана, а живий попередній перегляд кожного інструмента подається як єдине марковане зображення, що описує, що саме він створює.

Делікатний шар допоміжних звуків підтверджує ваші дії — прибуття в галерею, дійсна чи недійсна перевірка Content Credentials, закриття панелі, перемикання фільтра. Він увімкнений за замовчуванням, але завжди необов'язковий: вимкніть Звук будь-де, де з'являється перемикач (спливне вікно параметрів кожного вигляду або Профіль), і вибір запам'ятається.

Поряд із цим перемикачем — Neurospicy — необов'язкова, заспокійлива фонова доріжка для зосередження, що тихо грає, поки ви працюєте. Її ввімкнення відкриває невеликий док програвача в нижньому кутку, який супроводжує вас по всьому застосунку; з нього ви можете шукати й вибирати доріжку, перемотувати вперед і назад, задавати гучність, а також згортати чи закривати його. Список доріжок охоплює кілька категорій — процедурні мелодії Lolly Sings, ембієнтні петлі та біти, ваше власне завантажене аудіо та кілька живих інтернет-радіостанцій (їм потрібне з'єднання; усе інше грає офлайн). Він вимкнений за замовчуванням і, як і Звук, запам'ятовується між сесіями та пристроями. Вимкнення Звуку глушить і доріжку для зосередження.

Сховище та приватність

Усе зберігається в локальній базі даних вашого браузера (IndexedDB): ваш профіль, збережені сесії, завантажені зображення та кеш завантаженого вмісту каталогу. Профіль → Сховище показує використання і дозволяє:

• Очистити кеш — скинути завантажений вміст каталогу (пересинхронізується при наступному запуску).
• Очистити всі мої дані — стерти профіль, сесії та зображення. Не можна скасувати.

Нічого нікуди не передається. Без телеметрії, без хмарного рендерингу.

Перехід на інший пристрій

Оскільки все живе на вашому пристрої, Профіль → Сховище → Перенести на інший пристрій дозволяє перенести все на другу інсталяцію — без облікового запису, без хмари:

• Експортувати мої дані завантажує єдиний LollyTools-<First>-<Last>-<YYYY-MM-DD>-<n>.zip (частини назви беруться з вашого профілю і відкидаються, якщо не задані; <n> — це лічильник за день, щоб експорти одного дня не конфліктували), який містить ваш профіль, кожну збережену сесію (з її мініатюрою), ваші завантажені зображення та ваші налаштування (тему, ширину бічної панелі, локальну статистику активності).
• Імпортувати дані… на іншій інсталяції зчитує цей файл назад. Він об'єднує: усе з тією самою назвою (ваш профіль, слот сесії, зображення) замінюється імпортованою копією; усе інше на тому пристрої зберігається. Збережені сесії автоматично перезв'язуються з вашими імпортованими зображеннями.

Кеш каталогу не включається — він перезавантажується сам на новому пристрої. Пакет — це звичайний zip (manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json, id формату lolly-backup), тож він переживає email, USB чи AirDrop незмінним і має той самий формат, який зчитує кожна оболонка. Кожна частина має контрольну суму, тож файл, пошкоджений під час передачі, виявляється при імпорті, а не відновлюється наполовину зламаним. (Повна специфікація формату: Перенесення даних.)

Імпорт дизайну (Figma, Penpot, Illustrator, InDesign)

Ви можете перенести наявний дизайн у Lolly й продовжити роботу над ним: відкрийте Layout Studio, натисніть Import a design на панелі інструментів полотна та виберіть файл Figma .fig або SVG, Penpot .penpot, Illustrator .ai / .pdf чи InDesign .idml. Шари стають редагованими блоками на вільному полотні — текст залишається придатним для повторного набору, зображення потрапляють у My images, а шрифти й кольори узгоджуються з глобальними параметрами бренду, — після чого результат зберігається, надається спільно й рендериться, як і будь-яка інша сесія. Розбір відбувається повністю на вашому пристрої. Докладніше: Import a design.

Експорт

Повну історію дивіться в розділі Exporting & Formats — вибір формату, розмір і одиниці друку, прозорість, відео та копіювання/спільний доступ. Коротко: виберіть формат, за потреби задайте розмір і натисніть Download (або Copy, щоб скопіювати в буфер обміну).

Пакетний режим (Batch, Pro)

Для досвідчених користувачів Batch (посилання з галереї, обмежений функціональним прапорцем Pro, який типово увімкнено) рендерить одразу багато варіацій — сітку, де кожен рядок є набором вхідних даних, що експортуються разом. Ідеально підходить для локалізації картки на десяток мов або генерування всіх варіантів розміру за один прохід. Заповнюйте рядки, набираючи текст, вставляючи прямо з електронної таблиці або імпортуючи CSV (його ж можна експортувати назад), і задавайте формат, розмір та назву вихідного файлу для кожного рядка. Збережіть цілу сітку як іменовану пакетну сесію (batch session), яка знову відкривається з галереї, і завантажте всі рядки одним .zip.

Batch призначено для генерування багатьох варіантів одного шаблону за раз. Щоб повторно відрендерити сесії, які ви вже зберегли, скористайтеся Projects → Render folder / Render selection (вище) — Pro не потрібен.

Офлайн та встановлення

Lolly — це PWA. Після першого завантаження вона працює офлайн — встановіть її з адресного рядка браузера (або через Add to Home Screen на мобільному) для роботи в стилі застосунку на весь екран. Вона оновлюється сама, коли ви знову онлайн.