Сайтове, базирани на пиксели, ресурси, уроци и примери

Проектирането на уеб интерфейс с използване на пикселни графики е сравнително неясно в сравнение със съвременните тенденции. Наистина трябва да копаете няколко уебсайта в интернет, за да намерите някои добри примери; това е трудно, но не и невъзможно.

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

ресурси

Това са някои уникални ресурси за разработка на уеб скриптове и дигитални графики. Докато се ровите в създаването на пикселни уебсайтове, не винаги ще имате нужда да следвате всичко до точката. Тази колекция от уеб-базирани ресурси може да бъде много полезна отново и отново.

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 може да бъде истинска пречка; дори не е трудно, просто повтарящи се и отнемащи много време.

За щастие, SmartSprites CSS Generator е фантастичен ресурс за тази ситуация. Можете бързо да генерирате пиксел-перфектен лист с всичките си изображения в GIF или PNG формат. Освен това можете бързо да определите какво фон-позиция x / y координатите трябва да са за всяка отделна икона.

Squidfingers BG модели

Проектирането на добър набор от повтарящи се фонови изображения е много трудно. Може да отнеме дни, преди да можете да създадете безшевни изображения. Но за щастие има онлайн ресурси за изтегляне на безплатни фонове.

Галерия Squidfingers Patterns е един такъв ресурс. Той предлага над 150 различни модела пиксел стил, които можете да изтеглите и използвате на вашите проекти. Стиловете са много динамични и колоритни, а за такова разнообразие, това е отличен ресурс за поддържане на удобството. Връзките за изтегляне са в .zip формат, което ги прави по-малки и по-лесни за прехвърляне между компютри.

Ресурсът на Spriters

Не мога да кажа достатъчно велики неща за ресурса на Spriters. Това е уебсайт, където можете да търсите през всички различни гейминг системи за спрайт листа. Те могат да включват карти, сгради, екрани с менюта, спрайтове със символи, икони и почти всичко!

Те са онлайн от 2001 г. и каталогът на видео игрите е нараснал значително. Има цяла общност зад TSR с графични дизайнери, които могат да разкъсат тези различни игри. Ако се интересувате от каквато и да е форма на видеоигри или онлайн фенове, ще трябва да проверите тази невероятна галерия.

Още по-интересни са някои от сестрите уебсайтове, които заляха TSR. Гейминг феновете също помогнаха за извличането на базови текстури и модели на персонализиране. Като цяло това е наистина голяма общност, много подкрепяща работата с спрайтове в дигиталните произведения на изкуството.

400 пиксела

Това е наистина страхотно уеб приложение, което не осигурява съществена стойност, но определено е спретнато. 400 пиксела ви позволява да създадете пикселен документ онлайн и да съхраните изображението в тяхната мрежа. Сайтът е проектиран по подобен начин на началната страница на милиона долара, като всяка снимка заема квадратна форма в цялостния образ.

Можете да си поиграете в уеб интерфейса си, създавайки някои наистина шантави произведения на изкуството. Това не е нещо, което ще вземете веднага, но е забавно да се играе с веднъж след като се оправиш. И това е хубав инструмент, с който можете да работите от всеки компютър, който има достъп до интернет.

Основен изход

По подобен начин като 400 пиксела можете да използвате Major Output като лично онлайн студио за пикселни произведения. Той все още е в ранните етапи на разработката, но функционалността на основния потребител вече е на разположение. Можете да се регистрирате за безплатен акаунт и да започнете да създавате изкуство от пиксели веднага.

Всяка снимка се съхранява локално на техните сървъри, които можете да се свържете на уебсайтове и форуми. Много от изображенията са отворени за обществеността и можете да ги проверите, като кликнете върху различни автори или маркери. Има и поле за търсене, но чувствам, че качеството на резултатите от търсенето не винаги е голямо.

Основен изход изглежда като друг инструмент на общността, който е забавно да се знае, но вероятно не може да предложи много образователна стойност за пикселните изпълнители.

уроци

Сега, когато разполагате с ресурси, нека да разгледаме уроците, предоставени от многобройните образователни центрове и полезни блогове, разпръснати в интернет. Сложих съвсем малък набор от наистина удобни Ръководства за начинаещи и междинни дизайнери. Много от тези уроци се фокусират към Adobe Photoshop, но можете да ги следвате заедно с почти всеки усъвършенстван редактор на изображения.

Ръководството за пиксел Sprite от Дерек Ю

Очевидно в Google има десетки стотици уроци по пиксел-спрайт, но този урок на уебсайта на Дерек Ю преминава през много различни стъпки в обучението за създаване на пикселни спрайтове. Голяма част от процеса е рационализирана и обяснена по начин, който позволява на начинаещите бързо да прескачат в действието.

Любителите на видео игрите ще се влюбят в този урок, тъй като получавате задкулисни погледи при създаването на тези специфични графики. Обичам да намирам оформление на уебсайт с пикселни графики, изобразени в целия дизайн. Тя осигурява уникално усещане за носталгия и това е нещо, което не се среща навсякъде. Всеки, който иска да създаде свои собствени пикселни Sprites по каквато и да е причина, може да започне с 10-стъпката на Derek.

Конфигуриране на Photoshop за Pixel Art от Brandon Treb

Ето още един съвършен урок, насочен към начинаещи в областта на пикселните произведения на изкуството. Постът на блога е написан от Брандън Треб, който е фантастичен дизайнер и разработчик на мобилни устройства. Можете да намерите всякакъв вид полезна информация в това подробно ръководство за пиксел-базирани Photoshop изкуство.

Трябва да знаете как да настроите предпочитанията в Photoshop, така че вашата пикселна картина да не изглежда неудобна или да губи качество при експортиране. Може да се изненадате да научите много за персонализиране, за да получите наистина добро качество на картината.

Рисуване на ръчно изработени пиксели от Ръсел Тейт

Ето още един удивителен урок, пълен с техники за ръчно рисуване на пиксел в Photoshop. Тази колекция от пикселни техники е просто изумителна. Всеки, който прескача съдържанието, най-вероятно ще намери нещо, което не е познавал преди.

Има подробни обяснения за създаването на текстура на трева и кора; също и за това как да клонирате произведения на пиксела, които сте нарисували, и да ги превърнете в дизайн на икони. Всичко се свежда до практиката и прецизността във всяка област. Онези, които наистина са страстни, ще се придържат към него и след няколко месеца ще намерят солидна техника за своите идеи за пиксел.

Разработване на CSS / JS игрално портфолио от Daniel Sternlicht

Ето един урок от Smashing Magazine за това как да се кодира игрален портфейл с CSS / JS, който използва много спрайтове от играта на Pokemon. Авторът е Даниел Стърнлич, който също така изпълнява личното си портфолио на тази игра, базирана на игри.

Уебсайтът действа като RPG свят, в който контролирате знака със знака с клавиатурата. Можете да въведете различни сгради, които след това дават информация като данни за контакт и портфейлни записи.

Аз наистина обичам този урок и това е вълнуващ начин да се съчетаят пикселни произведения с разработка на уебсайтове. Дори и да не знаете много за JavaScript, това все още е супер интересна статия. Прегледах някои от кода и трябва да дам огромни комплименти на Дан за такъв творчески урок. Всеки фанатик на Покемон със сигурност ще се влюби в неговите идеи.

Изометрични пикселни уроци от Matriax

Този малък сайт gas13.ru има някои от най-ексцентричните и професионални урок за пиксели, които съм виждал. В изометричния урок по басейна се въвеждате в създаването на лъскави блокове и текстура на водата. Освен това ще намерите ресурси за всички останали изометрични пиксели в страничната лента.

Има толкова много неща, които трябва да научите: можете да проектирате витрина, пикселен спрайт или дори подробни текстури за видеоигри и фонове на уебсайта. Не съм сигурен дали този автор все още активно публикува съдържание, но съществуващите статии са повече от достатъчни за начинаещите, за да научат основите.

Студио Purloux Pixel инстркцията от Кевин Chaloux

Сега, когато изброявам най-добрите уроци по пикселите, определено бих включил това в началото. Целият урок за пикселни произведения е страхотна последваща статия за начинаещите. Ще бъдете въведени от самото начало до софтуер с отворен код като GIMP или Paint.NET.

Ще научите как да експортирате изображения и многото аспекти на дизайна на пикселите, като дитеринг и анти-алиасинг. Има толкова много различни техники, които трябва да се следват заедно. Трябва да вземете някои дизайнерски идеи, като погледнете в ретро 8-битови и 16-битови видео игри.

Автор Kevin Chaloux кредитира урокът на Derek Yu в пикселния урок (изброени по-рано) и споменава, че това е източник на вдъхновение, когато за първи път започна работа.

Създайте по-добър Favicon от Kayla Knight

Уеб дизайнерите често забравят, че изображението на любимата икона (favicon) е огромна част от всяка схема за брандинг. Всички най-популярни сайтове могат да бъдат разпознати от техния 16 × 16 favicon. Когато работите с такова ограничено платно, вие сте принудени да се справяте с пиксел-плътни произведения на изкуството и илюстрации. Този урок за favicon от OXP прави отлична работа за комбиниране на двете идеи.

От този цвят можете да разберете защо пикселното изкуство е толкова полезно, когато създавате favicons. Има и инструменти и солидни техники за експортиране на .ico файл. Включена е и малка витрина от популярни favicons от цял ​​уеб.

Това е друг ресурс, който чувствам, че може да бъде от полза за всички уеб дизайнери. Това дава възможност да се образоваме за създаването на Favicon и да работим със строги ограничения на пикселите.

Галерия с витрини

Бих искал да затворя статията с хубава галерия с пикселни модели на уебсайтове. Включих 40 примера на различни оформления с много различни артистични визии. Тенденцията на пикселираните произведения на изкуството едва започва да се появява отново в обикновените уебсайтове. Надявам се, че това ясно представяне на пикселните сайтове може да предложи източник на вдъхновение за уеб разработчиците по целия свят.

Централна част на Земята

PixelJam

Интерактивен маркетинг на Red Rokk

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-битов HTML5 цикъл на платно

Даниел Стърнлич

Армия на троловете

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

Ръководства за РПГ

Градски Създател

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Пясъчната кутия

Г-н Вонг

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Презглава

LOVEPIXEL

Хенк Ниборг

Iriescope

iamnotadoll

SweetPIX

Megapont

Мини Метрополис

Хайо ван Рийк

Студио за Pixeltemple

Адепт Вормгевинг

Музей на пикселите

QuickHoney

Polpo.net

spiv.cz

4 Реално тесто