Ресурси, підручники та приклади на основі піксельних веб-сайтів
Проектування веб-інтерфейсу з використанням піксельного стилю є відносно неясним у порівнянні з сучасними тенденціями. Ви дійсно повинні копати кілька веб-сайтів в Інтернеті, щоб знайти хороші приклади; це важко, але не неможливо.
У цій статті я зібрав мега-компіляція всього, що потрібно для дизайну веб-сайту на основі пікселів. Існують десятки здорових підручників для початківців і експертів. Я також включив деякі зручні інструменти та ресурси, які ви можете зіграти, щоб вивчити цю тему далі. Якщо ви взагалі зацікавлені в графічній відеоігри або ізометричній піксельній роботі, то вам сподобається ця колекція.
Ресурси
Це унікальні ресурси для розробки веб-скриптів і цифрової графіки. Коли ви заглиблюєтеся в створення макетів піксельних веб-сайтів, ви не завжди будете відчувати необхідність стежити за всім до точки. Ця колекція веб-ресурсів може бути дуже зручною знову і знову.
Spritely
Я звик до роботи з відкритим вихідним кодом. Ось чому пошук плагіна jQuery на зразок Spritely завжди є захоплюючою ситуацією. Ви можете включити цей скрипт у свій веб-сайт для швидкої динамічної анімації спрайтів і прокручування фонів.
Весь плагін працює на JavaScript і HTML / CSS; не потрібна ні Flash, ні будь-яка інша мова. Сторінка документації проста, але достатньо, щоб ви почали працювати. У розробників є багато демонстраційних прикладів, які також можна завантажити.
Поточна стабільна версія версії 0.6.1, яка помірно оновлюється. Ефекти анімації сумісні з Opera, Chrome, Safari, Firefox і Internet Explorer 6+. Також будь-які браузери смартфонів, що працюють на Android або iOS, повинні відтворювати ідеально.
FatPixels
Це потужний сценарій відкритого джерела, розроблений Матіасом Мартінесом. Для FatPixels потрібна лише робота бібліотеки jQuery. Хоча я б сказав, що Spritely є більш складною бібліотекою анімації, FatPixels має нішу на ринку для веб-розробників.
Ви можете легко створювати анімовані спрайти без створення зображення .gif. Насправді, ви зможете експортувати всі зображення у форматі .jpg і створити чергу з спрайтів для одного довгого анімаційного ефекту. Домашня сторінка FatPixels має чудову демонстрацію разом з блоком коду jQuery, який використовується для його побудови. Якщо ви шукаєте щось легке для анімації ваших спрайтів, то FatPixels - це шлях.
SmartSprites
При використанні слова "спрайт" є кілька різних значень. Символи відеоігор або анімовані спрайти, як правило, є меншими зображеннями з невеликою кількістю пікселів. Однак у CSS термін спрайт відноситься до одного зображення, яке діє як лист іконок для вашого сайту.
Причина, за якою потрібно використовувати один лист спрайтів замість окремих зображень, полягає у зменшенні ресурсів сервера. Набагато швидше завантажувати велике зображення, утримуючи всі іконки замість багатьох менших, але окремих зображень. Але покласти всі ці ікони разом у Photoshop може бути справжньою неприємністю; навіть не обов'язково важко, просто повторюються і забирають багато часу.
На щастя, генератор CSS SmartSprites є фантастичним ресурсом для цієї ситуації. Ви можете швидко створити піксель-ідеальний аркуш з усіма зображеннями у форматі GIF або PNG. Крім того, ви можете швидко визначити, що саме фонове положення Координати x / y повинні бути для кожної окремої піктограми.
Squidfingers BG візерунки
Створення хорошого набору повторюваних фонових зображень дуже важко. Це може зайняти кілька днів, перш ніж ви зможете створити безшовні зображення. Але, на щастя, є ресурси для завантаження безкоштовних фонових плиток.
Галерея Squidfingers Patterns є одним з таких ресурсів. Він пропонує більше 150 різних шаблонів у піксельному стилі, які можна завантажити та використовувати на своїх проектах. Стилі дуже динамічні і барвисті, і для такого різноманіття, це відмінний ресурс, щоб тримати зручно. Посилання на завантаження знаходяться в форматі .zip, що робить їх меншими і легше переносити між комп'ютерами.
Ресурс спритрів
Я не можу сказати достатньо великих речей про ресурс The Spriters. Це веб-сайт, де можна шукати всі різні ігрові системи для спрайтів. Вони можуть включати в себе карти, будівлі, екрани меню, спрайтів персонажів, значки та майже все!
Вони були в мережі з 2001 року, а каталог відеоігор надзвичайно зросла. Існує ціла спільнота за TSR з графічними дизайнерами, які можуть копіювати ці різні ігрові спрайти. Якщо ви зацікавлені в будь-якій формі дизайну відеоігор або онлайн фанатів, вам доведеться перевірити цю дивовижну галерею.
Ще цікавішими є деякі веб-сайти, які породжували TSR. Ігрові шанувальники також допомагали при розриві базових текстур і моделях персонажів. В цілому це дійсно велика спільнота, яка дуже підтримує роботу з спрайтами в цифрових творах.
400 пікселів
Це дійсно здорово веб-додаток, яке не забезпечує істотну цінність, але це, безумовно, акуратно. 400 пікселів дозволяє створювати онлайн-документ і зберігати зображення в їхній сітці. Сайт розроблений подібно до домашньої сторінки на мільйон доларів, причому кожна картинка займає квадратний блок у загальному зображенні.
Ви можете грати в їх веб-інтерфейс, створюючи деякі дійсно тупий твір. Це не те, що ви відразу підберете, але весело зіграти, як тільки ви отримаєте це. І це хороший інструмент, з яким можна працювати з будь-якого комп'ютера, який має доступ до Інтернету.
Основний висновок
У подібній точці 400 пікселів ви можете використовувати Major Output як персональну онлайн-студію для роботи з пікселями. Він все ще знаходиться на ранніх стадіях розробки, але всі основні функціональні можливості користувача вже доступні. Ви можете зареєструватися для безкоштовного облікового запису і почати створювати піксельні зображення відразу.
Кожне зображення зберігається локально на їхніх серверах, які можна хот-лайн на веб-сайтах і форумах. Багато зображень відкриті для громадськості, і ви можете перевірити їх, натиснувши різних авторів або тегів. Існує також вікно пошуку, але я вважаю, що якість результатів пошуку не завжди велика.
Основний висновок виглядає як інший інструмент спільноти, який цікаво знати, але, напевно, не може запропонувати велику освітню цінність для піксельних виконавців.
Підручники
Тепер, коли у вас є ресурси, давайте подивимося на підручники, надані багатьма освітніми центрами, і корисні повідомлення в блогах, розкидані в Інтернеті. Я зібрав невеликий набір дійсно зручних Навчальні посібники для початківців і проміжних дизайнерів. Багато з цих підручників спрямовують увагу на Adobe Photoshop, але ви можете слідувати разом з будь-яким вдосконаленим редактором зображень.
Підручник з Pixel Sprite від Derek yu
Очевидно, що в Google існують десятки сотень підручників з піксельними спрайтами, але цей підручник на сайті Derek Yu проходить багато різних кроків у навчанні, як створювати піксельні спрайти. Значна частина процесу була вдосконалена і пояснена таким чином, щоб початківці могли швидко перейти до дій.
Любителі відеоігор полюблять цей посібник, оскільки ви отримаєте за кадром зазирнути при створенні цих конкретних графічних зображень. Я люблю знайти макет веб-сайту з піксельними відеоіграми, розписаними по всьому проекту. Це забезпечує унікальне відчуття ностальгії, і це те, що ви не знайдете скрізь. Будь-хто, хто хоче створити власні піксельні спрайти з будь-якої причини, може почати з 10-ступінчастого підручника Derek.
Налаштування Photoshop для Pixel Art Брендоном Требом
Ось ще один ідеальний підручник, спрямований на початківців у сфері піксельних ілюстрацій. Повідомлення в блозі написано Брендоном Требом, який є фантастичним дизайнером і розробником мобільних пристроїв. Ви можете знайти всіляку корисну інформацію в цьому докладному керівництві по піксельному мистецтву Photoshop.
Ви повинні знати, як налаштувати параметри у Photoshop, щоб зображення не було незручним або втратило якість під час експорту. Ви можете бути здивовані, дізнавшись, що потрібна велика кількість налаштувань, щоб дійсно отримати гарну якість зображення.
Малювання ручних пікселів Расселом Тейтом
Ось ще один дивовижний підручник, повний методик для мальованого піксельного мистецтва у Photoshop. Ця колекція методів піксельного мистецтва просто вражає. Кожен, хто проскакує вміст, швидше за все, знайде те, чого вони раніше не знали.
Є докладні пояснення щодо створення текстури на траві і корі; також про те, як клонувати піксельні твори, які ви намалювали, і перетворити їх на дизайн іконок. Все зводиться до практики і точності в кожній області. Ті, хто по-справжньому пристрасним, просунуть його і протягом декількох місяців знайдуть тверду техніку для своїх піксельних ідей.
Розробка ігрового портфоліо CSS / JS від Daniel Sternlicht
Ось один підручник від Smashing Magazine про те, як кодувати ігровий портфель за допомогою CSS / JS, який використовував багато спрайтів з ігор серії Pokemon. Автор - Даніель Стернліхт (Daniel Sternlicht), який також запускає свій персональний портфель на цій ігровій основі.
Веб-сайт виступає в ролі RPG, де ви керуєте духом персонажа з клавіатури. Ви можете вводити різні будівлі, які виводять таку інформацію, як контактні дані та записи портфеля.
Я дійсно люблю цей підручник, і це захоплюючий спосіб поєднати піксельні твори з розробкою веб-сайтів. Навіть якщо ви не знаєте багато про JavaScript, це ще дуже цікава стаття. Я пройшов через деякий код і повинен дати величезні компліменти Дану за такий творчий підручник. Будь-які фанатики покемонів обов'язково закохаються в його ідеї.
Ізометричні піксельні підручники від Matriax
Цей невеликий сайт gas13.ru містить деякі з найбільш ексцентричних і професійних підручників з пікселів, які я коли-небудь бачив. У ізометричному підручнику для басейну ви знайдете створення блискучих блоків і текстури води. Крім того, ви знайдете ресурси для всіх інших ізометричних пікселів у бічній панелі.
Досить багато чого навчитися: ви можете створити вітрину магазину, піксельний спрайт або навіть детальну текстуру для відеоігор і фонів веб-сайту. Я не впевнений, що цей автор все ще активно публікує вміст, але існуючих статей більш ніж достатньо для початківців, щоб вивчити основи.
Студія Purloux Pixel Підручник Кевіна Шалу
Тепер, коли я перераховую всі найкращі підручники з пікселів, я б, безумовно, включив це право на початку. Весь цей підручник з піксельних ілюстрацій є прекрасною статтею для новачків. Ви будете представлені з самого початку до відкритого програмного забезпечення, як GIMP або Paint.NET.
Ви дізнаєтеся, як експортувати зображення та багато аспектів дизайну пікселів, таких як згладжування та згладжування. Є так багато різних методів, щоб слідувати разом з. Ви повинні підібрати деякі дизайнерські ідеї, переглянувши ретро-ігрові 8-бітові і 16-розрядні відеоігри.
Автор Kevin Chaloux кредитує піксельний підручник Derek Yu (перерахований раніше) і згадує, що це як джерело натхнення, коли він почав працювати.
Створіть кращий Favicon По Kayla Knight
Веб-дизайнери часто забувають, що зображення favicon (улюблена піктограма) є величезною частиною будь-якої схеми брендингу. Всі найпопулярніші веб-сайти можуть бути розпізнані за їхніми 16-дюймовими favicon. Коли ви працюєте з таким обмеженим полотном, ви змушені мати справу з піксельними зображеннями та ілюстраціями. Цей підручник з Favicon від OXP робить відмінну роботу по об'єднанню обох ідей.
З цього тут можна зрозуміти, чому піксельне мистецтво настільки корисне при створенні піктограм. Є також інструменти та тверді методи для експорту файлу .ico. Також включені невеликі вітрини популярних favicons з усього Інтернету.
Це ще один ресурс, який, на мою думку, може принести користь всім веб-дизайнерам. Це дає змогу виховувати себе у створенні favicon та працювати зі строгими обмеженнями пікселів.
Галерея
Я хотів би закрити статтю з гарною галереєю дизайнів веб-сайтів у стилі пікселів. Я включив 40 прикладів різних макетів з багатьма різноманітними художніми баченнями. Тенденція нерівних ілюстрацій тільки починає знову з'являтися в основних веб-сайтах. Я сподіваюся, що ця чітка вітрина піксельних сайтів може стати джерелом натхнення для веб-розробників у всьому світі.
Центральний центр Землі
PixelJam
Інтерактивний маркетинг Red Rokk
Блог eBoy
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-бітний цикл полотна HTML5
Даніель Стернліхт
Армія тролів
BlockHead Pix App
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
Адепт Вормгевінг
Музей пікселів
Швидкий мед
Polpo.net
spiv.cz
4 Реальне тісто
