В поисках вдохновения: Pixel Art
Вторник, 10 июня 2008
Сегодня хочу вернуть Вас в мир 8-ми битных приставок, крохотных человечков и миниатюрных городов, и показать несколько впечатляющих сайтов, которые используют все это в дизайне на своих страницах.
Пару слов о Pixel Art
Для тех, кто не в теме, что такое пиксельная графика, приведу небольшую цитату с ru.wikipedia.org
Пиксельная графика (или пиксел-арт, от англ. pixel art) — форма цифровой живописи, созданной на компьютере с помощью растрового графического редактора, где изображение редактируется на уровне пикселей. На старых (или на неполнофункциональных) компьютерах, в играх для Game Boy, играх для старых игровых приставок и многих играх для мобильных телефонов в основном используется пиксельная графика.
Да, это и в самом деле те самые компьютерные изображения, которые рисуются в растре полностью ручками, точечка к точечке с помощью всего двух инструментов — карандаша и ластика, стоят многих часов затраченного времени и требуют определенного мастерства. И Вы будете неправы, если думаете что все это подходит только для рисования favicon, иллюстраций и иконок для сайтов.
Несколько отличных примеров сайтов в стиле Pixel Art
tama.pandapad.com — все до последней мелочи выдержано в лучших традициях стиля, многие изображения представлены в виде GIF-анимации, что придает странице некоторую динамику и «живой» вид.
8bitpeoples.com — сайт музыкального лейбла 8bitpeoples. В дизайне используется повторяющийся пиксельный фон, четкое разделение макета на контент-окна и интересный пиксельный шрифт для меню и заголовков.
pixelcityhome.com — карта города, в котором на каждом из объектов помещается рекламное объявление. Вообще, подобных проектов в сети хватает, например icontown.net, где, после регистрации, Вы можете нарисовать псевдотрехмерную (в изометрии) иконку и разместить ее на карте города или русскоязычный платный аналог internetmap.info, где иконками представлены сайты дизайн-студий или компаний. Кокретно же этот пример хорошо анимирован, что придает городу вид «живого».
merzhase.de — забавные пикселизированные игры, отлично прорисованные герои. Нужна установка плагина Shockwave.
habbo.com — виртуальный мир, в котором можно самостоятельно создать своего персонажа (конструктор позволяет выбрать расу, пол, цвет волос, разрез глаз, прическу, одежду и многое другое) и завести много друзей по интересам в Habbo-мире. Реализовано на Flash, регистрация бесплатна, тусуется-играет примерно 10 000 человек в сутки. Требуется установка плагина Shockwave.
Бонус
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 для невнимательных блоггеров.
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: В поисках вдохновения: Pixel Art
- добавьте статью в закладки:
* * *
check out this pixel art :
www.techconsult.ro/extra/pixel.html
впечатляет!