Pixel-založené zdroje internetových stránek, konzultace, a příklady

Navrhování webového rozhraní pomocí kresby ve stylu pixelů je relativně moderní ve srovnání s moderními trendy. Opravdu potřebujete prokopat hrstku webových stránek na internetu, abyste našli nějaké dobré příklady; je to těžké, ale ne nemožné.

V tomto článku jsem sbíral Mega-kompilace všeho, co budete potřebovat pro tvorbu webových stránek založených na pixelech. Existují desítky zdravých cvičení pro začátečníky i odborníky. Zahrnula jsem také několik užitečných nástrojů a zdrojů, s nimiž si můžete téma prohlédnout. Pokud máte zájem o grafiku videoher nebo izometrické pixelové kresby, budete tuto sbírku milovat.

Zdroje

To jsou některé unikátní vývojové prostředky pro webové skripty a digitální grafiku. Jak jste se ponořit do vytváření rozložení pixel-webové stránky, nebudete vždy cítit potřebu následovat všechno do tečky. Tato kolekce webových zdrojů se může velmi dobře hodit znovu a znovu.

Spritely

Zvykla jsem si na práci s otevřeným zdrojovým kódem. To je důvod, proč najít jQuery plugin jako Spritely je vždy vzrušující situace. Tento skript můžete zahrnout do svých webových stránek pro rychlou dynamickou animaci sprite a posouvání pozadí.

Celý plugin je poháněn JavaScriptem a HTML / CSS; není vyžadován žádný Flash ani jiný jazyk backendu. Stránka s dokumentací je jednoduchá, ale přesto dostačující k tomu, abyste mohli začít. Vývojáři mají spoustu ukázkových ukázek, které si můžete také stáhnout.

Aktuální verze stabilní verze je 0.6.1, která je mírně aktualizována. Efekty animace jsou kompatibilní s operacemi Opera, Chrome, Safari, Firefox a Internet Explorer 6+. Také všechny prohlížeče smartphonů běžící na Androidu nebo iOS by se měly dokonale vykreslit.

FatPixels

Jedná se o výkonný open source sprite skript vyvinutý Matíasem Martínezem. FatPixels vyžaduje pouze řádné spuštění knihovny jQuery. I když bych řekl, že Spritely je komplexnější animační knihovna, FatPixels má na trhu pro vývojáře webu výklenek.

Animované skřítky můžete snadno vytvořit bez vytvoření obrázku .gif. Ve skutečnosti budete moci exportovat všechny obrázky jako .jpg a vytvořit frontu skřítků pro jeden dlouhý animovaný efekt. Domovská stránka FatPixels má vynikající demo spolu s blokem kódu jQuery, který se používá k jeho sestavení. Pokud hledáte něco lehkého k animaci svých skřítků, pak je FatPixels cestou.

SmartSprites

Při použití slova "sprite" existuje několik různých významů. Postavy z videoher nebo animované skřítky jsou obecně menší obrázky vykreslené s velmi malým počtem pixelů. V CSS však termín sprite odkazuje na jeden obrázek, který funguje jako list ikon pro vaše webové stránky.

Důvod, proč byste měli použít jeden sprite list namísto jednotlivých obrázků, je snížit prostředky serveru. Je mnohem rychlejší stáhnout větší obrázek, který drží všechny vaše ikony namísto mnoha menších, ale oddělených obrázků. Ale uvedení všech těchto ikon dohromady ve Photoshopu může být skutečnou hádkou; ani nutně obtížné, jen opakované a časově náročné.

Naštěstí SmartSprites CSS Generator je fantastický zdroj pro tuto situaci. Můžete rychle generovat pixel-perfektní list se všemi obrázky ve formátu GIF nebo PNG. Kromě toho můžete rychle zjistit, co vaše pozadí Souřadnice x / y by měly být pro každou jednotlivou ikonu.

Squidfingers BG vzory

Navrhování dobré sady opakovaných obrázků na pozadí je velmi obtížné. To může trvat několik dní, než můžete vytvořit bezproblémové obrázky. Ale naštěstí existují zdroje online pro stahování bezplatných dlaždic na pozadí.

Galerie Squidfingers Patterns je jedním z takových zdrojů. Nabízí více než 150 různých vzorů ve stylu pixelů, které si můžete stáhnout a použít na svých projektech. Styly jsou velmi dynamické a barevné, a pro takovou rozmanitost, je to vynikající zdroj, aby se po ruce. Odkazy ke stažení jsou ve formátu .zip, což z nich dělá menší a snadnější přenos mezi počítači.

Zdroj Spriters

Nemohu říci dost velkých věcí o The Spriters Resource. Je to webová stránka, kde můžete vyhledávat ve všech různých herních systémech pro sprite listy. Ty mohou zahrnovat mapy, budovy, obrazovky nabídek, skřítky znaků, ikony a skoro cokoliv!

Od roku 2001 jsou online a katalog videoher se ohromně rozrostl. Tam je celá komunita za TSR s grafickými designéry, kteří mohou ripovat tyto různé herní sprites. Máte-li zájem o jakoukoli formu designu videohry nebo online fansites, budete se muset podívat na tuto úžasnou galerii.

Ještě zajímavější jsou některé ze sesterských webů, které se zrodily z TSR. Herní fanoušci také pomohli s kopírováním základních textur a modelů renderovacích znaků. Celkově je to opravdu skvělá komunita velmi podporující práci s skřítky v digitální kresbě.

400 pixelů

To je opravdu cool webovou aplikaci, která neposkytuje základní hodnotu, ale je to určitě elegantní. 400 pixelů umožňuje vytvořit obrazový dokument online a ukládat obraz do mřížky. Stránky jsou navrženy podobným způsobem na domovskou stránku milionu dolarů, přičemž každý obrázek zabere čtvercový blok v celkovém obrazu.

Můžete si zahrát ve svém webovém rozhraní a vytvořit si opravdu praštěná umělecká díla. Není to něco, co si okamžitě vyzvednete, ale je zábavné hrát si, jakmile se na to dostanete. A je to pěkný nástroj, se kterým můžete pracovat z jakéhokoli počítače, který má přístup k Internetu.

Hlavní výstup

V podobném duchu jako 400 pixelů můžete použít Major Output jako osobní online studio pro pixelové kresby. Je to stále v raných fázích vývoje, ale všechny základní funkce uživatelů jsou již k dispozici. Můžete se zaregistrovat na bezplatný účet a ihned začít vytvářet pixelové umění.

Každý obrázek je uložen lokálně na svých serverech, které můžete používat na webových stránkách a fórech. Mnohé z obrázků jsou přístupné veřejnosti a můžete je zkontrolovat kliknutím na různé autory nebo značky. K dispozici je také vyhledávací pole, ale cítím, že kvalita výsledků vyhledávání není vždy skvělá.

Hlavní výstup se jeví jako další nástroj komunity, o kterém je zábava vědět, ale pravděpodobně nemůže nabídnout mnoho hodnot vzdělání pro umělce pixelů.

Návody

Nyní, když máte zdroje, pojďme se podívat na tutoriály poskytované mnoha vzdělávacích center a užitečné blog příspěvky roztroušených po celém internetu. Dal jsem dohromady malou sadu opravdu šikovných pixel umění konzultace pro začátečníky a střední designéry. Mnohé z těchto výukových programů zaměřují pozornost na Adobe Photoshop, ale můžete sledovat spolu s téměř každý pokročilý editor obrázků.

Pixel Sprite Tutorial od Derek yu

Je zřejmé, že na Googlu existují desítky stovek konzultací s pixelovými sprite, ale tento konkrétní návod na webové stránce Derek Yu prochází mnoha různými kroky ve vzdělávání, jak vytvářet pixelové skřítky. Velká část procesu byla zjednodušena a vysvětlena způsobem, který umožňuje začátečníkům rychle skočit do akce.

Fanoušci videohry tento kurz budou milovat, protože při tvorbě těchto specifických grafik se dostanete do zákulisí. Miluji najít webové stránky rozložení s videohry pixel umělecká díla poseté v celém designu. Poskytuje jedinečný pocit nostalgie a je to něco, co nenajdete všude. Každý, kdo chce z jakéhokoli důvodu vytvořit své vlastní pixelové skřítky, může začít v Derekově 10-ti krokové tutoriálu.

Konfigurace Photoshopu pro Pixel Art by Brandon Treb

Zde je další perfektní výuka zaměřená na začátečníky v oblasti pixel artwork. Blog post je napsán Brandon Treb, který je fantastický návrhář a mobilní vývojář. V tomto podrobném průvodci naleznete všechny druhy užitečných informací o umění Photoshopu založeném na pixelech.

Musíte vědět, jak nastavit předvolby ve Photoshopu tak, aby se při exportu nezobrazila obrazová grafika pixelů. Můžete být překvapeni, naučit se hodně přizpůsobení je nutné opravdu získat pěknou kvalitu obrazu.

Kreslení ručně řemeslně pixelů Russell Tate

Zde je další úžasný návod plný technik pro ruční kreslení pixelů ve Photoshopu. Tato kolekce obrazových technik je prostě úžasná. Každý, kdo prochází obsahem, s největší pravděpodobností najde něco, co předtím neznali.

Jsou zde podrobná vysvětlení o vytváření textury na trávě a kůře; také o tom, jak klonovat kresbu pixelů, kterou jste nakreslili, a proměnit ji v design ikon. To vše je v praxi a preciznosti v každé oblasti. Ti, kteří jsou skutečně vášniví, to budou držet a během několika měsíců najdou solidní techniku ​​pro své nápady ve stylu pixelů.

Vývoj herního portfolia CSS / JS Daniel Sternlicht

Zde je jeden návod od časopisu Smashing o tom, jak kódovat herní portfolio pomocí CSS / JS, které využilo mnoho spritů ze série her Pokemon. Autorem je Daniel Sternlicht, který také provozuje své osobní portfolio v této herní struktuře.

Webové stránky fungují jako RPG svět, kde ovládáte znakový sprite pomocí klávesnice. Můžete zadat různé budovy, které pak zobrazují informace, jako jsou kontaktní údaje a položky portfolia.

Opravdu miluju tento tutoriál a je to vzrušující způsob, jak kombinovat pixelové kresby s vývojem webových stránek. I když moc nevíte o JavaScriptu, je to stále super zajímavý článek. Prošel jsem některé z kódů a musím dát Danovi obrovské poklony za takový kreativní tutoriál. Jakýkoliv fanatik Pokemon se jistě zamiluje do jeho myšlenek.

Izometrické Pixel Návody Matriax

Tento malý web gas13.ru má některé z nejvíce výstřední a profesionální pixel konzultace jsem kdy viděl. V izometrickém bazénovém tutoriálu jste představili vytváření lesklých bloků a textur vody. Kromě toho najdete zdroje pro všechny ostatní izometrické pixelové výřezy v postranním panelu.

Je toho tolik co se naučit: můžete navrhnout průčelí, pixel sprite, nebo dokonce podrobné textury pro videohry a webové stránky pozadí. Nejsem si jistý, zda tento autor stále aktivně publikuje obsah, ale stávající články jsou více než dost pro začátečníky, aby se naučili základy.

Studio Purloux Pixel Tutorial Kevin Chaloux

Teď, když jsem seznam všech nejlepších pixel tutorials bych určitě zahrnout toto právo na začátku. Tento celý návod na pixel artwork je skvělý navazující článek pro začátečníky. Budete zavedeni od samého počátku do open source softwaru, jako je GIMP nebo Paint.NET.

Dozvíte se, jak exportovat obrázky a mnoho aspektů designu pixelů, jako je dithering a anti-aliasing. Existuje mnoho různých technik, které je třeba následovat. Měli byste si vyzkoušet některé nápady na design při pohledu do retro 8-bitových a 16-bitových videoher.

Autor Kevin Chaloux je autorem výuky Derek Yu s pixelovými skripty (zmínil se dříve) a zmiňuje se, že je to zdroj inspirace, když poprvé začal.

Vytvořit lepší Favicon Kayla Knight

Weboví designéři často zapomínají, že obraz favicon (oblíbená ikona) je obrovskou součástí jakéhokoli systému brandingu. Všechny nejoblíbenější webové stránky mohou být rozpoznány jejich 16 × 16 favicon. Když pracujete s takovým omezeným plátnem, jste nuceni zabývat se kresbami a ilustracemi s hustými pixely. Tento favicon tutoriál z OXP dělá skvělou práci spojující obě myšlenky.

Z tohoto tut, můžete pochopit, proč pixel umění je tak prospěšné při vytváření favicons. Existují také nástroje a solidní techniky pro export souboru .ico. Zahrnuje také malou přehlídku populárních favicons z celého webu.

To je další zdroj, který považuji za přínosný pro všechny webové designéry. To je schopnost vzdělávat se na vytváření favicon a práci s přísnými omezeními pixelů.

Galerie prezentace

Chtěl bych zavřít článek s pěknou galerií webových stránek ve stylu pixelů. Zahrnula jsem 40 příkladů různých dispozic s mnoha různými uměleckými vizemi. Trend pixelated uměleckých děl se teprve začíná znovu objevovat na běžných internetových stránkách. Doufám, že tato odlišná vitrína pixelů může nabídnout zdroj inspirace pro webové vývojáře po celém světě.

Earthbound Central

PixelJam

Red Rokk Interaktivní Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixelová deviantní grafika

8-bitový HTML5 Canvas cyklus

Daniel Sternlicht

Armáda Trollů

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit Návody

Stvořitel města

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Pískoviště

Pane Wongu

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Head Over Heels

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 Skutečné těsto