Ресурсы, учебники и примеры на основе пиксельных веб-сайтов
Разработка веб-интерфейса с использованием иллюстраций в пиксельном стиле относительно неясна по сравнению с современными тенденциями. Вам действительно нужно покопаться в нескольких сайтах в Интернете, чтобы найти несколько хороших примеров; это сложно, но не невозможно.
В этой статье я собрал мега-компиляция всего, что вам нужно для пиксельного дизайна сайта. Существуют десятки полезных уроков для начинающих и экспертов. Я также включил несколько удобных инструментов и ресурсов, с которыми вы можете поиграть, чтобы продолжить изучение темы. Если вы вообще заинтересованы в графике видеоигр или изометрической пиксельной графике, то вам понравится эта коллекция.
Ресурсы
Это некоторые уникальные ресурсы для разработки веб-сценариев и цифровой графики. Когда вы углубляетесь в создание макетов пиксельных веб-сайтов, вы не всегда будете чувствовать необходимость следовать всему по порядку. Эта коллекция веб-ресурсов может очень пригодиться снова и снова.
Spritely
Я привык работать с открытым исходным кодом. Вот почему поиск плагина jQuery, такого как Sprittle, всегда захватывающая ситуация. Вы можете включить этот скрипт на свой сайт для быстрой динамической анимации спрайтов и прокрутки фона.
Весь плагин работает на JavaScript и HTML / CSS; Flash или любой другой язык бэкэнда не требуется. Страница документации проста, но достаточно для начала. У разработчиков есть много примеров демоверсий, которые вы также можете скачать.
Текущая стабильная версия - 0.6.1, которая умеренно обновлена. Анимационные эффекты совместимы с Opera, Chrome, Safari, Firefox и Internet Explorer 6+. Также любые браузеры смартфонов, работающие на Android или iOS, должны прекрасно отображаться.
FatPixels
Это мощный спрайт-скрипт с открытым исходным кодом, разработанный Матиасом Мартинесом. FatPixels требует только библиотеки jQuery для правильной работы. Хотя я бы сказал, что Sprittle - более сложная анимационная библиотека, FatPixels действительно занимает свою нишу на рынке для веб-разработчиков..
Вы можете легко создавать анимированные спрайты без создания изображения .gif. Фактически вы сможете экспортировать все изображения в формате .jpg и создать очередь спрайтов для одного длинного анимированного эффекта. На домашней странице FatPixels есть отличная демоверсия вместе с блоком кода jQuery, который использовался для ее создания. Если вы ищете что-то легкое для анимации ваших спрайтов, тогда FatPixels - это то, что вам нужно.
SmartSprites
При использовании слова «спрайт» в нем есть несколько разных значений. Персонажи видеоигр или анимированные спрайты, как правило, представляют собой изображения меньшего размера с очень небольшим количеством пикселей. Однако в CSS термин спрайт относится к одному изображению, которое выступает в качестве листа значков для вашего сайта..
Причина, по которой вы должны использовать один спрайт-лист вместо отдельных изображений, заключается в сокращении ресурсов сервера. Гораздо быстрее загрузить увеличенное изображение, содержащее все ваши значки, вместо множества небольших, но отдельных изображений. Но собрать все эти иконки вместе в Photoshop может быть очень сложно; даже не обязательно сложный, просто повторяющийся и отнимающий много времени.
К счастью, SmartSprites CSS Generator является фантастическим ресурсом для этой ситуации. Вы можете быстро сгенерировать превосходный по пикселям лист со всеми изображениями в формате GIF или PNG. Кроме того, вы можете быстро определить, что ваш фон положение координаты х / у должны быть для каждого отдельного значка.
Squidfingers BG Patterns
Создать хороший набор повторяющихся фоновых изображений очень сложно. Это может занять несколько дней, прежде чем вы сможете создавать бесшовные изображения. Но, к счастью, в Интернете есть ресурсы для загрузки бесплатных фоновых изображений.
Галерея Squidfingers Patterns является одним из таких ресурсов. Он предлагает более 150 различных шаблонов в пиксельном стиле, которые вы можете загрузить и использовать в своих проектах. Стили очень динамичные и красочные, и для такого разнообразия это отличный ресурс, который нужно держать под рукой. Ссылки для скачивания в формате .zip, что делает их меньше и легче переносить между компьютерами.
Ресурс спрайтеров
Я не могу сказать достаточно хороших слов о Ресурсе Спрайтеров. Это веб-сайт, где вы можете искать спрайт во всех игровых системах. К ним могут относиться карты, здания, экраны меню, спрайты персонажей, значки и многое другое.!
Они были в сети с 2001 года, и каталог видеоигр значительно вырос. За TSR стоит целое сообщество графических дизайнеров, которые могут разорвать эти игровые спрайты. Если вы заинтересованы в любой форме дизайна видеоигр или онлайн-фан-сайтах, вам придется проверить эту удивительную галерею.
Еще более интересными являются некоторые из родственных сайтов, которые породили TSR. Поклонники игр также помогли с копированием базовых текстур и рендерингом моделей персонажей. В целом, это действительно отличное сообщество, которое поддерживает работу со спрайтами в цифровом оформлении..
400 пикселей
Это действительно классное веб-приложение, которое не дает существенной ценности, но оно определенно аккуратно. 400 пикселей позволяет создавать пиксельные документы в Интернете и сохранять изображения в своей сетке. Сайт спроектирован аналогично домашней странице за миллион долларов, каждая картинка занимает квадратный блок в общем изображении.
Вы можете поиграть в их веб-интерфейсе, создавая по-настоящему глупые произведения искусства. Это не то, что вы поймете сразу, но с ним весело играть, как только вы его освоите. И это хороший инструмент, с которым вы можете работать с любого компьютера, имеющего доступ в Интернет.
Основной выход
Таким же образом, как 400 пикселей, вы можете использовать Major Output в качестве персональной онлайн-студии для пиксельных работ. Он все еще находится на ранней стадии разработки, но все основные пользовательские функции уже доступны. Вы можете зарегистрировать бесплатную учетную запись и сразу начать создавать пиксельные рисунки..
Каждое изображение хранится локально на своих серверах, которые вы можете хотлинк на сайтах и форумах. Многие изображения открыты для публики, и вы можете проверить их, щелкнув по различным авторам или тегам. Есть также окно поиска, но я чувствую, что качество результатов поиска не всегда велико.
Major Output выглядит как еще один инструмент сообщества, о котором интересно знать, но, вероятно, он не может предложить большую образовательную ценность для пиксельных художников..
Учебники
Теперь, когда у вас есть ресурсы, давайте взглянем на учебные пособия, предлагаемые многими образовательными центрами, и полезные посты в блогах, разбросанные по всему Интернету. Я собрал небольшой набор действительно удобных учебники по пиксельной графике для начинающих и промежуточных дизайнеров. Многие из этих руководств ориентированы на Adobe Photoshop, но вы можете следовать почти любому продвинутому редактору изображений.
Пиксель Спрайт Учебник Дерек Ю
Очевидно, что в Google существуют десятки сотен учебных пособий по пиксельным спрайтам, но этот конкретный учебный курс на веб-сайте Дерека Ю проходит множество различных этапов в обучении тому, как создавать пиксельные спрайты. Большая часть процесса была упрощена и объяснена таким образом, чтобы позволить начинающим быстро перейти к действию.
Поклонникам видеоигр понравится этот урок, так как вы получите закулисный взгляд на создание этой конкретной графики. Я люблю находить макет веб-сайта с пиксельной графикой видеоигры, замусоренной по всему дизайну. Это обеспечивает уникальное чувство ностальгии, и это то, что вы не найдете везде. Любой, кто хочет создать свои собственные пиксельные спрайты по любой причине, может начать серию из десяти шагов Дерека..
Настройка Photoshop для Pixel Art от Брэндона Треба
Вот еще один идеальный учебник, предназначенный для начинающих в области пиксельной графики. Сообщение в блоге написано Брэндоном Требом, фантастическим дизайнером и разработчиком мобильных приложений. Вы можете найти все виды полезной информации в этом подробном руководстве по пиксельной графике Photoshop..
Вы должны знать, как настроить параметры в Photoshop, чтобы ваши пиксельные изображения не выглядели неловко и не теряли качество при экспорте. Вы можете быть удивлены, узнав, что требуется много настроек, чтобы действительно получить хорошее качество изображения.
Рисование пикселей ручной работы Расселом Тэйтом
Вот еще один удивительный урок, полный техники рисованной пиксельной графики в Photoshop. Эта коллекция техник пиксельной графики просто удивительна. Любой, кто просматривает контент, скорее всего найдет то, чего не знал раньше.
Есть подробные объяснения о создании текстуры на траве и коре; также о том, как клонировать пиксельные рисунки, которые вы нарисовали, и превратить их в дизайн иконок. Все сводится к практике и точности в каждой области. Те, кто по-настоящему увлечен, выдержат и через несколько месяцев найдут надежную технику для своих идей в пиксельном стиле..
Разработка игрового портфолио CSS / JS от Daniel Sternlicht
Вот один урок из журнала Smashing Magazine о том, как кодировать игровой портфель с помощью CSS / JS, в котором использовалось много спрайтов из серии игр Pokemon. Автор - Даниэль Штернлихт (David Sternlicht), который также управляет своим личным портфолио на этом игровом макете..
Сайт действует как мир РПГ, где вы управляете спрайтом персонажа с клавиатуры. Вы можете ввести различные здания, которые затем вызывают информацию, такую как контактные данные и записи портфолио.
Мне очень нравится этот урок, и это увлекательный способ сочетать пиксельную графику с разработкой сайтов. Даже если вы не много знаете о JavaScript, это все равно очень интересная статья. Я прошел через некоторый код и должен сделать потрясающие комплименты Дэну за такой творческий урок. Любой фанатик покемонов обязательно влюбится в его идеи.
Изометрические пиксельные уроки от Matriax
Этот небольшой сайт gas13.ru содержит некоторые из самых эксцентричных и профессиональных обучающих программ по пикселям, которые я когда-либо видел. В учебнике по изометрическим бассейнам вы познакомитесь с созданием блестящих блоков и текстуры воды. Кроме того, вы найдете ресурсы для всех других изометрических пикселей на боковой панели..
Здесь есть чему поучиться: вы можете создать витрину магазина, пиксельный спрайт или даже детальные текстуры для видеоигр и фонов веб-сайтов. Я не уверен, что этот автор все еще активно публикует контент, но существующих статей более чем достаточно для начинающих, чтобы изучить основы.
Студия Purloux Пиксель Учебник Кевина Шалу
Теперь, когда я перечисляю все лучшие учебники по пикселям, я определенно включу это в начало. Весь этот урок по пиксельной графике - отличная статья для новичков. С самого начала вы познакомитесь с программным обеспечением с открытым исходным кодом, таким как GIMP или Paint.NET..
Вы узнаете, как экспортировать изображения и различные аспекты пиксельного дизайна, такие как сглаживание и сглаживание. Есть так много разных техник, которым нужно следовать. Вы должны выбрать некоторые дизайнерские идеи, рассматривая ретро-8-битные и 16-битные видеоигры.
Автор Кевин Шалу высоко оценивает учебник Дерека Ю по пиксельным спрайтам (перечисленный ранее) и упоминает, что это послужило источником вдохновения, когда он только начал.
Создайте лучший фавикон Кайла Найт
Веб-дизайнеры часто забывают, что изображение favicon (любимая иконка) является важной частью любой схемы брендинга. Все самые популярные веб-сайты можно узнать по их значку 16 × 16. Когда вы работаете с таким ограниченным холстом, вы вынуждены иметь дело с плотными пиксельными иллюстрациями и иллюстрациями. Этот урок по фавикону от OXP отлично справляется с объединением обеих идей..
Из этой статьи вы можете понять, почему пиксельная графика так полезна при создании значков. Существуют также инструменты и надежные методы для экспорта файла .ico. Также включена небольшая витрина популярных икон со всего Интернета..
Это еще один ресурс, который, как мне кажется, может принести пользу всем веб-дизайнерам. Это дает возможность научиться создавать фавиконы и работать со строгими ограничениями пикселей.
Витрина Галерея
Я хотел бы завершить статью хорошей галереей дизайнов сайтов в пиксельном стиле. Я включил 40 примеров различных макетов с различными художественными взглядами. Тенденция к пиксельным изображениям только начинает появляться на основных веб-сайтах. Я надеюсь, что эта яркая демонстрация пиксельных сайтов может послужить источником вдохновения для веб-разработчиков по всему миру..
Земной центральный
PixelJam
Red Rokk Интерактивный маркетинг
Блог eBoy
Тамаго Пиксель
pixelHugger
Pixel Deviant Graphics
8-битный цикл HTML5 Canvas
Даниэль Штернлихт
Армия Троллей
Приложение BlockHead Pix
madPXL
Supertott 2.0
ClassicGaming
Учебные пособия по RPG Toolkit
Создатель города
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Песочница
Мистер Вонг
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Над головой
LOVEPIXEL
Хенк Ниборг
Iriescope
iamnotadoll
SweetPIX
Megapont
Мини Метрополис
Хайо ван Рик
Pixeltemple Studio
Адепт Вормгевинг
Музей пикселей
QuickHoney
Polpo.net
spiv.cz
4 Настоящее тесто
