Перейти до уроку
lil cactus

Як створити піксель-арт

Початковий10 хвилинОновлено

Коротка відповідь

У Lil Cactus почніть із полотна 16 × 16 px і виберіть інструмент Олівець у групі пензля на панелі інструментів. Задайте 1 px у полі Розмір і 100% у полі Непрозорість, а потім малюйте за великого масштабу. Для сітки з кроком в один піксель виберіть Більше потім Параметри…, відкрийте розділ Напрямні й сітка, задайте інтервал 2 px і 2 поділки, а потім увімкніть Перегляд потім Показати потім Сітка. Збільшуйте зображення командою Зображення потім Розмір зображення… з методом Найближчий сусід, використовуючи цілий множник, наприклад 16 → 512 px.

Триколірний піксельний кактус, збільшений із 16 на 16 до 512 на 512 пікселів: порівняння м’яких країв білінійної інтерполяції з чіткими краями методу «Найближчий сусід»
Той самий малюнок, збільшений до 512 × 512: «Білінійна» (до) змішує краї, «Найближчий сусід» (після) зберігає піксельні блоки чіткими. Перетягніть повзунок, щоб порівняти.
Час
10 хвилин
Рівень
Початковий
Що потрібно
Маленьке полотно й миша, щоб ставити пікселі
Підходить для
Нові зображення RGB і спрайти PNG
Відкрити приклад у Lil CactusВикористати своє фото

Безкоштовно, без реєстрації. Ваше фото залишається на вашому комп’ютері.

Піксель-арт малюють по одній клітинці на маленькому зображенні. Кактус у цьому уроці має три кольори фарби й білий фон. Олівець залишає мазки з різкими краями, а збільшення методом Найближчий сусід копіює ці пікселі, не додаючи між ними змішаних кольорів.

Як намалювати й збільшити піксельний кактус за сім кроків

  1. Відкрийте полотно 16 × 16 і додайте шар для малювання

    Відкрийте порожній приклад із цієї сторінки. Щоб натомість створити власне полотно, виберіть Файл потім Створити…, введіть 16 у полях Ширина і Висота та залиште в списку Одиниці виміру значення Пікселі. Для параметра Фон залиште Білий. Натисніть кнопку Створити.

    Виберіть Шар потім Створити потім Новий шар. На панелі «Шари» двічі клацніть назву шару, введіть Cactus і натисніть Enter. Залиште шар Cactus виділеним над шаром «Фон».

    Параметри нового документа: ширина 16, висота 16, пікселі й білий фон
    Використовуйте крихітне полотно: ці розміри — пікселі зображення, а не збільшений перегляд.
    Нижня частина вікна нового документа з обведеною кнопкою «Створити»
    Створіть полотно, задавши його розміри.
    Панель «Шари»: виділений шар Cactus над білим шаром «Фон»
    Малюйте на шарі Cactus; шар «Фон» дає білий папір.

  2. Виберіть зелений колір, а потім олівець 1 px

    Виберіть Вікно потім Колір. У полі # в рядку з позначкою Передній план замініть значення на 4A8654.

    Клацніть правою кнопкою миші кнопку панелі інструментів під піпеткою або натисніть і втримуйте її, а потім виберіть Олівець. У полі Розмір задайте 1 px. Список Режим визначає, як мазок змішується з наявними пікселями; залиште Звичайний. Непрозорість визначає, наскільки щільний мазок; залиште 100%.

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

    Панель «Колір» із зеленим 4A8654 в обведеному полі # у рядку «Передній план»
    Введіть зелений колір у полі #.
    Група пензля на панелі інструментів з обведеними кнопкою групи й пунктом «Олівець» поруч із сусідніми інструментами
    Олівець ділить кнопку панелі інструментів із пензлем; збільшений вигляд.
    Параметри олівця з обведеним полем «Розмір» зі значенням 1 px
    Мазки олівця в один піксель заповнюють окремі клітинки зображення.
    Параметри олівця: режим «Звичайний», непрозорість 100 відсотків і згладжування 0 відсотків
    Залиште «Звичайний», непрозорість 100% і згладжування 0%.
    Прапорці олівця «Розмір залежно від тиску», «Непрозорість залежно від тиску» й «Автостирання» зняті
    Для цього малюнка залиште всі три прапорці вимкненими.

  3. Увімкніть сітку з кроком в один піксель

    Виберіть Більше потім Параметри…, а потім розділ Напрямні й сітка. Поле Інтервал сітки (px документа) задає відстань між основними лініями; введіть 2. Поле Поділки на основну комірку ділить цю відстань; введіть 2. Натисніть кнопку Закрити.

    Виберіть Перегляд потім Показати потім Сітка, а потім Перегляд потім Припасувати до екрана. Тепер тонкі лінії відокремлюють окремі пікселі, а товщі лінії проходять через кожні два пікселі. Верхня ліва біла клітинка — це стовпець 1, рядок 1. Рахуйте стовпці зліва, а рядки згори.

    Меню «Більше» з обведеним пунктом «Параметри»
    Відкрийте «Параметри» з меню «Більше».
    Розділи параметрів з обведеним пунктом «Напрямні й сітка»
    У параметрах виберіть «Напрямні й сітка».
    Параметри напрямних і сітки з обведеними інтервалом сітки 2 і поділками 2, а також кнопка «Закрити»
    Інтервал 2 px, поділений на 2, дає сітку з кроком в один піксель.
    Меню «Перегляд» і його підменю «Показати» з обведеним пунктом «Сітка»
    Увімкніть «Перегляд › Показати › Сітка».
    Порожнє біле полотно 16 на 16 у масштабі 3200 відсотків із клітинками сітки в один піксель
    Приклад у масштабі 3200%. Кожна маленька клітинка — один піксель зображення.

  4. Намалюйте стовбур і гілки

    Залиште виділеним шар Cactus, а колір переднього плану — зеленим. Проводьте через центри клітинок. Кожну лінію нижче малюйте окремим мазком:

    • Стовбур: три вертикальні мазки в стовпцях 8, 9 і 10, кожен від рядка 3 до рядка 10.
    • Ліва гілка: горизонтальні мазки через стовпці 5–7 у рядках 6 і 7. Додайте її вертикальний кінчик у стовпці 5, рядки 4–5.
    • Права гілка: горизонтальні мазки через стовпці 11–13 у рядках 7 і 8. Додайте її вертикальний кінчик у стовпці 13, рядки 5–6.
    Сітка з кроком в один піксель із зеленим стовбуром кактуса й двома піднятими гілками, ще без вазона й світлих пікселів
    Зелений силует; кожну зафарбовану клітинку досі видно в сітці.

  5. Додайте вазон і світліші пікселі

    У полі # панелі «Колір» введіть B66B4B для вазона. Зафарбуйте рядок 11 у стовпцях 6–12, рядки 12 і 13 у стовпцях 7–11, а потім рядок 14 у стовпцях 8–10.

    Змініть значення в полі # на A0C78D. Додайте світлу смужку в стовпці 8, рядки 4–9. Додайте дві світліші клітинки в стовпці 5, рядки 5–6, і одну в стовпці 11, рядок 7. Щоб відрахувати їхні позиції, скористайтеся повною сіткою з кроку 3.

    Приховайте шар Cactus кнопкою з оком, щоб порівняти з порожнім шаром «Фон», а потім знову покажіть його.

    Ближчий вигляд сітки з готовим піксельним кактусом: зелені гілки, світліші зелені позначки й теракотовий вазон
    Готова рослина, обрізана ближче, щоб можна було роздивитися окремі клітинки.
    Панель «Шари»: шар Cactus над шаром «Фон», обидві кнопки з оком обведено
    Шар Cactus містить малюнок. Шар «Фон» відповідає за біле тло за ним.

  6. Збережіть маленький оригінал, а потім збільште

    Поки полотно ще має розмір 16 × 16, виберіть Файл потім Зберегти як потім Проєкт Lil Cactus… Так обидва редаговані шари збережуться в початковому розмірі малюнка.

    Виберіть Зображення потім Розмір зображення… Залиште в списку Одиниці виміру значення Пікселі, кнопку ланцюжка зв’язаною, а параметр Дискретизація увімкненим. Дискретизація змінює кількість пікселів. Введіть 512 у полі Ширина; Висота теж стане 512. У списку методів дискретизації виберіть Найближчий сусід і натисніть кнопку Змінити розмір.

    Це збільшення в 32 рази: кожен початковий піксель стає блоком 32 × 32.

    Вікно «Розмір зображення» змінює 16 на 16 на 512 на 512 зі зв’язаними розмірами, увімкненою дискретизацією й вибраним методом «Найближчий сусід»
    Виберіть «Найближчий сусід», перш ніж натиснути «Змінити розмір».

  7. Експортуйте PNG і поверніться до розміру малюнка

    Виберіть Файл потім Експорт потім PNG…, а потім натисніть кнопку Експортувати. Новий файл має розмір 512 × 512 px. Виберіть Редагувати потім Скасувати, щоб повернутися до малюнка 16 × 16 для наступних змін.

    Тепер Файл потім Зберегти оновлює проєкт.

Чому «Найближчий сусід» зберігає палітру

Вікно «Розмір зображення» відкривається з вибраним методом Білінійна. За такого збільшення він змішує кольори вздовж країв. Метод Найближчий сусід зберігає три кольори фарби малюнка й білий фон.

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

Що створити далі

Піксель-арт: запитання та відповіді

Чи малювання піксель-арту — те саме, що пікселізація фото?

Ні. У Lil Cactus цей спосіб розставляє окремі кольорові клітинки, щоб намалювати спрайт. Команда «Фільтр › Оформлення › Оформлення…» натомість групує пікселі наявного зображення в більші блоки.

Чи може піксель-арт мати прозорий фон?

Так. У Lil Cactus приховайте шар «Фон» кнопкою з оком, як показано в кроці 5, а потім виберіть «Файл › Експорт › PNG…». Шар Cactus залишиться видимим без білого паперу.

У якому форматі зберігати піксель-арт: PNG чи JPEG?

У Lil Cactus використовуйте PNG, щоб зберегти палітру й прозорість. JPEG може додавати зайві кольори біля різких країв і не зберігає прозорість.

Чому не видно сітки з кроком в один піксель?

У Lil Cactus допоміжні лінії сітки з цього рецепта з’являються в масштабі 800% або більше. Крім «Перегляд › Показати › Сітка», має бути ввімкнено й «Перегляд › Допоміжні елементи». Інтервал сітки залежить від параметрів цього браузера, тож в іншому браузері сітка може бути іншою. Сітка — це накладання в редакторі, вона не з’являється в експортованому PNG.

Чи можна скасувати один мазок олівця?

Так. У Lil Cactus команда «Редагувати › Скасувати» прибирає останнє перетягування чи клацання олівцем як один крок історії. Команда «Редагувати › Повторити» повертає його.

Чи можна збільшити піксель-арт у дробову кількість разів?

Так, але однакові блоки в Lil Cactus дають лише цілі множники. Дробове збільшення може зробити деякі початкові пікселі ширшими за інші, навіть із методом «Найближчий сусід».

Опубліковано  · Востаннє перевірено