Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>17 апр 2024</li>

3 <li>0</li>

4 </ul><h2>Где используют пиксель-арт и как его создавать</h2>

5 Пиксель-арт актуален во всех сферах digital-дизайна. Рассказываем об этой технике и рекомендуем туториалы.

6 Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.

7 Пиксельные рисунки широко используются не только в играх, но также в дизайне и иллюстрации. Рассказываем, в чём главные особенности пиксель-арта, как его создавать и какие программы для этого подходят.

8 Пиксель-артом называют изображения, в которых пиксели хорошо различимы: эти картинки напоминают мозаику, собранную из видимых квадратов. Пиксель-арт возник в 1970-е годы в видеоиграх - когда не было технических возможностей создавать более сложную графику.

9 Например, вот так выглядела игра Pong в 1972 году:

10 Изображение:<a>Atari</a>Первые пользовательские интерфейсы компьютеров тоже были с явно различимыми пикселями. Так выглядели<a>иконки Сьюзен Кэр</a>на первом Macintosh:

11 Изображение: Сьюзен Кэр /<a>Behance</a>Со временем пиксельная графика усложнялась: объекты становились более детализированными и цветными. Это кадр из игры Super Mario, выпущенной в 1985 году:

12 Изображение:<a>Nintendo</a>Теперь пиксель-арт не ограничивается играми и иконками, он стал одной из техник создания изображений для иллюстраций, рекламы и сайтов. С помощью видимых пикселей можно создавать очень детализированные работы:

13 Изображение:<a>Pixel Jeff</a>Такие изображения широко применяют в digital - в частности, на сайтах компаний. Вот, например, рекламный баннер, в котором есть иконки из пикселей.

14 Изображение: "<a>Логомашина</a>"Вот пример нарочито небрежных пиксельных иллюстраций на сайте - скорее всего, их получили из обычных фотографий, используя автоматический фильтр. Пиксель-арт такого качества получается быстро и просто.

15 Изображение: NoA-Ignite / Klarna /<a>Awwwards</a>Посмотрите на пример анимации на веб-странице: пиксели поэтапно перекрывают текст и образуют плашки для новых надписей.

16 Изображение: Báchoo / Etherfuse /<a>Awwwards</a>В этом логотипе в написании названия частично задействованы видимые пиксели. В кейсе указано, что так дизайнер показал внедрение новых технологий в современное искусство.

17 Изображение: Antony Creative / Cielo /<a>Behance</a>Существуют пиксельные шрифты - их преимущественно используют в декоративных целях для заголовков. В этом шрифте автор взял в качестве референса ITC Avant Garde Gothic, позаимствовал из него пропорции и пластику букв, но сами штрихи сделал пиксельными.

18 Изображение: Rafael Nascimento / AGPX /<a>Behance</a>Для создания небольших иллюстраций пиксель-арт также подходит:

19 Изображение:<a>eBoy</a>Изображение: Tuho Muho /<a>Dribbble</a>А детализированный пиксель-арт встречается в некоторых современных играх и работах художников. Если всмотреться в скриншот, можно увидеть пиксели, из которых собрано окружение и персонажи:

20 Скриншот: игра Triangle Strategy / Square / EnixNintendoРисовать пиксель-арт можно в популярных графических редакторах для дизайна или в специализированных программах. Для работы подходят:

21 <ul><li><a>Adobe Photoshop</a>. В программе можно настроить сетку, в которой клетка будет равна одному пикселю, и рисовать внутри этих клеток кистью.</li>

22 <li><a>Adobe Illustrator</a>. В векторном редакторе тоже есть возможность рисовать по пикселям. Для этого настраивают сетку и работают инструментом Fill ("Заливка"), поэтапно закрашивая нужные клетки. Затем фигуру можно разобрать, и останется векторная иллюстрация в стиле пиксель-арта.</li>

23 <li><a>Aseprite</a>. Платная профессиональная программа для пиксель-арта, которая подходит и для начинающих, и для продвинутых пользователей. Возможности редактора заточены именно под рисование пикселями. Aseprite удобнее, чем неспециализированные программы, и позволяет максимально экономить время.</li>

24 <li><a>Piskel</a>. Простой бесплатный онлайн-редактор, с которого можно начать осваивать пиксель-арт.</li>

25 <li><a>GraphicsGale</a>. Функциональный, но более сложный для освоения редактор, который применяют преимущественно в игровой индустрии. В частности, GraphicsGale позволяет делать анимацию.</li>

26 <li><a>Pixelator</a>. Программа для автоматического преобразования фотографий в пиксель-арт. Результат получается менее точный, чем аккуратно нарисованные от руки изображения, но иногда может смотреться хорошо.</li>

27 </ul>Один из распространённых форматов пиксельной графики - иконки размером 32×32 px. При рисовании смотрят на референс - эскиз или фото реального объекта. Начинают либо с очерчивания контуров будущего изображения, либо с заливки его общей формы - а потом постепенно дорисовывают детали.

28 Если хотите создать свой первый пиксель-арт размером 32×32 px, можно начать<a>с туториала по ссылке</a> - в нём показывают, как изобразить пиксельное яблоко в Photoshop.

29 По инструкции<a>в этом видео</a>можно научиться создавать более разнообразные простые иконки с контуром и заливкой - инструктор делает их как игровые, но подобные иконки вполне могут пригодиться в рекламе, айдентике или на сайте. Пошаговую работу показывают в Aseprite, но вы можете использовать любой другой редактор, выполняя аналогичные действия.

30 Если захотите усложнить задачу, можно попробовать<a>туториал по рисованию котёнка</a>. А <a>в видео от Saultoons</a>спикер даёт подробный ликбез по технике: рассказывает, какие типы линий есть в пиксель-арте и как подбирать цвета.

31 Другие материалы об иллюстрации

32 <a>Научитесь: Пиксель-арт Узнать больше</a>