Від логотипа до файлу точного розміру

Як відкрити BluePixels і зберегти роботу

Перший макет за 6 кроків

Приклад: підготувати логотип на полотні 156 × 300 пікселів, максимум 4 кольори разом із фоном.

1. Відкрийте BluePixels. Початкове чисте полотно вже має розмір 156 × 300. У BlueBizOS натисніть «BluePixels» у меню або знайдіть застосунок у BlueStore. Окрему версію відкрийте подвійним натисканням на файл BluePixels-1.1.html; для неї вхід у CRM не потрібен.
2. Завантажте логотип. Натисніть «Завантажити лого» біля полотна або «Вибрати зображення» у блоці джерела. Можна також перетягнути файл у зону завантаження.
3. Виберіть розміщення. Для одного зображення натисніть «Одне лого», для двох поруч — «Два поруч». Перевірте ширину 156, висоту 300 і максимум кольорів 4.
4. Натисніть «Пікселізувати». Завантаження файлу й зміна параметрів самі по собі не перебудовують готові пікселі. Кнопка застосовує вибране розміщення.
5. Огляньте й підправте. Натисніть «Умістити полотно». За потреби збільште масштаб, змініть кольори палітри або пересуньте виділений фрагмент.
6. Підготуйте файли. «Завантажити PNG» — готове зображення. «Проєкт JSON» — готові пікселі для наступного редагування. Для прикладу PNG матиме рівно 156 × 300 px.

Що де знаходиться

На вузькому екрані панелі складаються вертикально. Для роботи з великим зображенням можна відкрити редактор «На весь екран». Повернутися допоможе кнопка виходу з повного екрана.

Смуга етапів допомагає зорієнтуватися: вибрати зображення → застосувати пікселізацію → відредагувати → підготувати завантаження. Це підказка стану, а не обов’язкова форма: на чистому полотні можна малювати одразу.

Як підготувати та відкрити зображення

• Підтримуються статичні PNG, JPEG і WebP, до 5 МіБ, не більше 4096 px на сторону та 16 млн пікселів.
• Для чіткого результату вибирайте логотип без зайвого фону й дрібного тексту. Редактор зменшує його до клітинок полотна; деталі тонші за одну клітинку можуть зникати.
• Якщо файл не відкривається, перевірте його формат і розмір. Просте перейменування розширення не змінює формат. SVG або PDF спочатку потрібно експортувати у підтримуваний растровий формат.
• Нове джерело не підміняє вже готові пікселі автоматично. Після завантаження перевірте параметри та явно натисніть «Пікселізувати».

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

Розмір, повтори та точне розміщення

Після зміни параметрів орієнтуйтеся на повідомлення, що розміщення ще не застосоване. Нова пікселізація перебудує готове зображення, зокрема ручні правки; попередній результат доступний через «Скасувати» в межах поточної історії.

Кольори: вибрати для малювання чи замінити всюди

У полі «Максимум кольорів, разом із фоном» виберіть від 2 до 8. Якщо потрібно не більше чотирьох кольорів, установіть 4: перший колір фону вже входить до цього числа.

• Натиснути зразок у палітрі — вибрати колір для олівця, фігур, заливки чи обвідки.
• Змінити колір через колірне поле або HEX — замінити цей колір в усьому готовому зображенні. Це не малювання окремої клітинки.
• Перший колір — фон. Його використовують гумка й очищені місця після вирізання чи переміщення.
• «Підібрати кольори» заново формує растр із завантаженого джерела з автоматичним добором палітри. Це може змінити попередні ручні правки.

HEX записується як #RRGGBB, наприклад #174bf3. Поруч видно кількість пікселів і відсоток полотна, включно з фоном. Відсоток описує зображення, а не витрату ниток, фарби чи матеріалів.

Інструменти малювання

Товщина задається від 1 до 32 px доступними значеннями списку. Дзеркальне малювання повторює штрихи відносно горизонтальної осі, вертикальної або обох. Воно стосується малювання, а не створення повторів вихідного логотипа.

Для роботи без перетягування введіть X та Y під полотном і натисніть «Застосувати інструмент». Координати відраховуються від 1. Приклад: X 1, Y 1 — верхня ліва клітинка.

Виділити й зручно перемістити фрагмент

1. Виберіть «Виділення» або натисніть V, коли фокус не в текстовому полі.
2. Протягніть прямокутник від одного кута фрагмента до іншого. Якщо потрібна точність, розкрийте «Виділити за координатами», задайте лівий верхній кут і розмір, натисніть «Виділити».
3. Щоб перемістити фрагмент, натисніть усередині рамки й тягніть. Попередній перегляд показує нову позицію, а відпускання миші підтверджує один рух.
4. Для точного положення скористайтеся координатами X та Y біля полотна й дією «Перемістити». Це координати верхнього лівого кута всього фрагмента.

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

Потягніть поза рамкою, щоб створити інше виділення. «Зняти виділення» прибирає рамку без видалення пікселів. Esc без активного перетягування також знімає виділення.

Копіювання, вирізання та вставлення

1. Виділіть потрібну ділянку. Без виділення копіюється все полотно.
2. Натисніть «Копіювати», щоб залишити оригінал, або «Вирізати», щоб очистити вибрані клітинки до кольору фону.
3. Виберіть місце вставлення — наприклад, клітинку числовими координатами з інструментом «Рука», або початок нового виділення. У панелі буфера видно майбутні X та Y.
4. Натисніть «Вставити». Редактор уміщує фрагмент цілком, позначає його рамкою й вмикає «Виділення». Одразу тягніть новий фрагмент у потрібне місце.

• Просте наведення миші не змінює зафіксоване місце вставлення.
• Якщо фрагмент більший за полотно, вставлення зупиниться з поясненням. Збільште полотно або скопіюйте меншу ділянку.
• «Не вставляти фон» пропускає фонові клітинки буфера під час вставлення. Це не додає прозорість до PNG і не змінює правило переміщення вже готового прямокутника.
• Буфер внутрішній: він діє в поточному редакторі. Це не системний буфер Windows і не обмін із Photoshop чи іншою вкладкою.
• Якщо після копіювання палітра змінилася, вставлення зіставляє кольори з поточною палітрою, не додаючи нових кольорів.

Коли фокус на полотні: Ctrl + C, X, V виконують відповідні дії. У текстових полях ці комбінації продовжують працювати як звичайне редагування тексту.

Віддзеркалення, зсуви й очищення

• Дзеркало ↔ / ↕. Віддзеркалює пікселі в межах виділення або всього полотна, якщо рамки немає.
• Кнопки зсуву. Із виділенням переміщують цілий фрагмент. Без виділення зсувають усе полотно на 1 px.
• «Переносити через край усе полотно». Для зсуву всього полотна повертає крайні пікселі з протилежного боку. Без цього параметра пікселі, що виходять за край, втрачаються, а нові порожні місця стають фоном. Для виділеного фрагмента цей режим недоступний.
• Швидка заміна пікселів. Виберіть колір, який треба замінити, і новий колір палітри. Дія працює в рамці або на всьому полотні.
• Обвідка 1 px. Додає зовнішні фонові сусідні клітинки вибраним кольором. Спочатку виберіть колір, відмінний від фону.
• Прибрати одиночні точки. Прибирає ізольовані дрібні пікселі. Огляньте дрібний текст і деталі після операції; за потреби натисніть «Скасувати».

Ці операції можна скасовувати. Не застосовуйте їх повторно навмання до єдиної незбереженої копії — завантажте JSON перед серією експериментів.

Напрямні й піксельні лінійки

Червоні напрямні допомагають рівно розмістити логотип або повтори. Вони лежать поверх перегляду: не переміщують зображення, не прив’язують до себе фрагменти та не змінюють готові пікселі.

1. Біля полотна знайдіть «Напрямні й лінійки». Прапорець «Напрямні» вмикає або приховує всі червоні лінії.
2. Окремо ввімкніть «Вертикальні» або «Горизонтальні». Спочатку показано вертикальні напрямні, як на розмітці для логотипів.
3. Розгорніть «Крок напрямних у пікселях». Задайте цілий крок від 1 до 512 і натисніть «Застосувати крок». Вертикальні лінії відраховуються від лівого краю, горизонтальні — від верхнього.
4. Для полотна 156 × 300 стандартний крок — 52 px по X та 100 px по Y. Вертикальні напрямні стоять на межах X=52 і X=104. Якщо ввімкнути горизонтальні — Y=100 і Y=200. «Скинути 52 / 100» повертає ці кроки, не змінюючи полотно.

Як читати лінійки

Верхня лінійка показує X, ліва — Y. Початок 0 означає зовнішню межу полотна; остання межа дорівнює його ширині або висоті. Підписи автоматично стають рідшими при віддаленні. Синя позначка показує середину поточної клітинки.

У числових полях «Клітинка X/Y» нумерація починається з 1. Наприклад, клітинка X=1 лежить між межами 0 і 1 на лінійці. Після прокручування частина лінійки поза видимою ділянкою прихована; масштаб змінює лише перегляд.

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

Масштаб, сітка та перегляд повторів

Масштаб 1×–32× змінює лише відображення. «100%» відповідає 1×. «Умістити полотно» добирає масштаб для огляду всього макета; «Умістити фрагмент» допомагає зосередитися на вибраному фрагменті. Для великого зображення прокручуйте область полотна або використовуйте «Рука».

Сітка показує межі клітинок від 4×. Вона не є частиною зображення й не потрапляє у PNG чи BMP. Так само не експортуються курсор і рамка виділення.

«Повторення 3 × 3» показує, як дев’ять копій готового полотна стикуються одна з одною. Це зручно для перевірки візерунків. Воно не збільшує розмір звичайного файлу.

Що зберігати: PNG, BMP, JSON чи CSV

Вкажіть назву перед завантаженням. «Відкрити проєкт» приймає JSON BluePixels до 2 МіБ. Він замінює готовий растр і прибирає попереднє вихідне зображення та розміщення, щоб вони випадково не перебудували відкритий макет.

Це піксельний редактор: він не створює машинні формати вишивки, програми в’язання, векторні контури чи автоматичний виробничий кошторис. PNG/BMP — вихідні растри для подальшого процесу.

Скасування, проєкти й тимчасова чернетка

«Скасувати» та «Повторити» працюють у поточному сеансі редактора. Історія обмежена 32 кроками й не зберігається в JSON. Один завершений штрих або перетягування фрагмента — одна операція.

1. Для надійної робочої копії завантажте Проєкт JSON на пристрій.
2. За бажанням розкрийте «Чернетка та відновлення» й увімкніть тимчасове зберігання готового полотна в цій вкладці.
3. Після оновлення сторінки, якщо чернетка доступна, редактор запропонує відновити або видалити її.

Чернетка діє до 8 годин для поточного входу й вкладки. Вона містить лише готові пікселі, палітру та назву. Вихідне зображення, розміщення, буфер фрагментів та історія не зберігаються. Закриття вкладки, вихід із сеансу чи очищення даних браузера може прибрати чернетку. Вона не замінює збережений JSON.

Якщо сховище браузера недоступне, редактор покаже пояснення; малювання й завантаження файлів залишаються доступними. Видалення локальної чернетки не стирає поточне полотно, але прибирає копію для відновлення.

Шпаргалка клавіш

На macOS для комбінацій Ctrl використовуйте ⌘. Якщо літера інструмента не спрацьовує, перемкніть розкладку на латинську й перевірте, що курсор не в полі назви чи HEX.

Поширені ситуації та рішення