В поисках вдохновения: Pixel Art

Иллюстрация к посту «В поисках вдохновения: Pixel Art»

Сегодня хочу вернуть Вас в мир 8-ми битных приставок, крохотных человечков и миниатюрных городов, и показать несколько впечатляющих сайтов, которые используют все это в дизайне на своих страницах.

Пару слов о Pixel Art

Для тех, кто не в теме, что такое пиксельная графика, приведу небольшую цитату с ru.wikipedia.org

Пиксельная графика (или пиксел-арт, от англ. pixel art) — форма цифровой живописи, созданной на компьютере с помощью растрового графического редактора, где изображение редактируется на уровне пикселей. На старых (или на неполнофункциональных) компьютерах, в играх для Game Boy, играх для старых игровых приставок и многих играх для мобильных телефонов в основном используется пиксельная графика.

Да, это и в самом деле те самые компьютерные изображения, которые рисуются в растре полностью ручками, точечка к точечке с помощью всего двух инструментов — карандаша и ластика, стоят многих часов затраченного времени и требуют определенного мастерства. И Вы будете неправы, если думаете что все это подходит только для рисования favicon, иллюстраций и иконок для сайтов.

Несколько отличных примеров сайтов в стиле Pixel Art

Дизайн сайта tama.pandapad.com

tama.pandapad.com — все до последней мелочи выдержано в лучших традициях стиля, многие изображения представлены в виде GIF-анимации, что придает странице некоторую динамику и «живой» вид.

Дизайн сайта 8bitpeoples.com

8bitpeoples.com — сайт музыкального лейбла 8bitpeoples. В дизайне используется повторяющийся пиксельный фон, четкое разделение макета на контент-окна и интересный пиксельный шрифт для меню и заголовков.

Дизайн сайта pixelcityhome.com

pixelcityhome.com — карта города, в котором на каждом из объектов помещается рекламное объявление. Вообще, подобных проектов в сети хватает, например icontown.net, где, после регистрации, Вы можете нарисовать псевдотрехмерную (в изометрии) иконку и разместить ее на карте города или русскоязычный платный аналог internetmap.info, где иконками представлены сайты дизайн-студий или компаний. Кокретно же этот пример хорошо анимирован, что придает городу вид «живого».

Дизайн сайта merzhase.de

merzhase.de — забавные пикселизированные игры, отлично прорисованные герои. Нужна установка плагина Shockwave.

Дизайн сайта habbo.com

habbo.com — виртуальный мир, в котором можно самостоятельно создать своего персонажа (конструктор позволяет выбрать расу, пол, цвет волос, разрез глаз, прическу, одежду и многое другое) и завести много друзей по интересам в Habbo-мире. Реализовано на Flash, регистрация бесплатна, тусуется-играет примерно 10 000 человек в сутки. Требуется установка плагина Shockwave.

Бонус

Дизайн сайта meomi.com

www.meomi.com — сайт небольшой дизайн-студии meomi. Не совсем конечно пиксельный, но просто красивый :) Cоветую погулять мышкой по странице и посмотреть чем живет этот мультяшный особнячок. Да, и не забудьте заглянуть в портфолио, там есть Pixel Art.

А еще... есть конечно и db-db.com и k10k.net — прекрасные образцы пиксельного стиля, и еще многие-многие другие, но их уже можно поискать и изучить самостоятельно, если есть желание.

Все вышеприведенные примеры показывают, что если творчески подходить к задачам, то пиксельную графику можно использовать не только для рисования иконок или спрайтов для игр мобильных телефонов, но и для создания оригинальных дизайнов, пропитанных духом рисованных компьютерных миров 80-x годов прошлого столетия.

Итоги

Итак, подведем небольшие итоги, того, что же все-таки можно считать клише дизайна в стиле Pixel Art.

Во-первых, это оригинальная авторская графика ручной работы. Сюда можно отнести забавных персонажей и тщательно проработанные модели окружающего мира (улицы, города, интерьеры домов, транспорт).

Во-вторых, часто используемые повторяющиеся фоновые паттерны, опять же ручной работы.

В третьих, многие сайты используют четкое «оконное» разделение между информационными блоками на странице. Иногда каждый такой блок заключается в отдельное «окно интерфейса». Хотя есть и совершенно другие примеры, когда расположение текста на странице зависит от расположения графического наполнения, и является второстепенным.

В четвертых, на сайтах используются малые размеры шрифтов, в основном 9-10 px, часто надписи подменяются рисованными пиксельными буквами, например такими:

Примеры пиксельных шрифтов

Напоследок, небольшой совет. Если уж совсем выдерживать дух времени и рисовать в безопасной 255-цветной палитре, то ваши рисунки будут иметь небольшой «вес» при впечатляющих размерах (сохранять, естественно, в формате GIF ).

Если Вас зацепила эта тема и есть желание продолжить ее изучение, приведу несколько интересных ссылок, где есть что почитать и чему поучиться.

Наши (ru):

gas13.ru — сайт Алексея Гаркушина, специалиста по разработке пиксельной графики. На сайте представлены его работы, графика игр для мобильных телефонов, уроки Photoshop.

llama.ru — блог, в котором можно найти несколько интересных уроков по пиксельной графике.

pixelportal.ru — портал о пиксельной графике, есть рейтинг и каталог ссылок на русскоязычные ресурсы в этом стиле.

Не наши (en):

pxlgfx.com — урок по рисованию пиксельных паттернов для фона в Adobe Photoshop.

hello.eboy.com — примеры авторских работ и блог о пиксельном искусстве.

natomic.com — полезные уроки для начинающих.

rhysd.com — введение в изометрический арт, с подробным описанием приемов рисования.

drububu.com — еще один урок в котором описано отличие рисунков в стиле Pixel Art от остальных. Раскрыта тема рисования в изометрии.

zoggles.co.uk — интересная подборка уроков.

smashingmagazine.com — подборка креатива в стиле пиксель арт, не только в графике, но и в реальной жизни.

graphicssoft.about.com — подборка уроков.

pixel2life.com — тоже уроки.

72.47.194.68 — подборка ссылок на ресурсы, посвященные Pixel Art.

wayofthepixel.net — форум по пиксельному искусству.

Сканер блогов:

Отличный быстрый способ исправить ошибки в RSS для невнимательных блоггеров.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 7

  1. techconsult, 06.08.2008 в 3:22

    check out this pixel art :

    www.techconsult.ro/extra/pixel.html

    Ответить

  2. Evil, 07.10.2009 в 16:26

    впечатляет!

    Ответить

  3. @ Есть ли будущее у пиксельной графики? | rotorweb.ru | Проблемы и решения в Web-дизайне, 26.09.2010 в 19:36

    [...] автора блога sprosonok.ru посвящённого урокам и теории пиксель-арта. (Поэтому не удивляйтесь, что текст написан от [...]

    Ответить

  4. SocialWorker, 25.07.2011 в 21:29

    Отличный обзор, спасибо, 3й день искал такую подбоку ссылок

    Ответить

  5. @ Есть ли будущее у пиксельной графики? | white wind Есть ли будущее у пиксельной графики? |, 09.06.2012 в 13:55

    [...] автора блога sprosonok.ru посвящённого урокам и теории пиксель-арта. (Поэтому не удивляйтесь, что текст написан от [...]

    Ответить

  6. Alex, 28.04.2013 в 22:09

    Хорошая статья. Жаль что многие ссылки нерабочие(

    Надеюсь что это не связано с вымиранием Pixel Art

    Ответить

  7. живописные техники, 23.05.2017 в 18:28

    Здравствуйте!меня зовутФилипп.Я хочупоказать вам портал об творчестве www.russian-artist.ru. Большой выбор изображений на любой

    вкус. Всем советую посетить данный ресурс.

    Ответить

Есть что сказать?