Pixelbaserade webbplatser Resurser, handledning och exempel

Att designa ett webbgränssnitt med hjälp av pixelformat är relativt obskyrt jämfört med moderna trender. Du behöver verkligen gräva igenom en handfull webbplatser på Internet för att hitta några bra exempel. det är svårt men inte omöjligt.

I den här artikeln har jag samlat in en mega-kompilering av allt du behöver för pixelbaserad webbdesign. Det finns dussintals hälsosamma självstudier för nybörjare och experter. Jag har också tagit med några praktiska verktyg och resurser som du kan leka med för att utforska ämnet vidare. Om du är intresserad av videospelgrafik eller isometrisk pixelkonstverk kommer du att älska denna samling.

Medel

Dessa är några unika utvecklingsresurser för webbskript och digital grafik. När du gräver till att skapa pixel-webbplats layouter kommer du inte alltid att känna behovet av att följa allt till pricken. Denna samling av webbaserade resurser kan mycket väl komma till nytta gång på gång.

spritely

Jag har blivit van vid att arbeta med öppen källkod. Det är därför en jQuery-plugin som Spritely alltid är en spännande situation. Du kan inkludera det här skriptet på din webbplats för snabb dynamisk sprite-animering och rullning bakgrunder.

Hela plugin drivs av JavaScript och HTML / CSS; ingen Flash eller något annat backend-språk krävs. Dokumentationssidan är enkel men tillräckligt för att komma igång. Utvecklarna har gott om provdemon som du kan ladda ner också.

Den nuvarande stabila versionen är 0.6.1 som är moderat uppdaterad. Animeringseffekterna är kompatibla med Opera, Chrome, Safari, Firefox och Internet Explorer 6+. Även smartphone-webbläsare som körs på Android eller iOS ska göra perfekt.

FatPixels

Detta är ett kraftfullt open source-sprite-skript som utvecklats av Matías Martínez. FatPixels kräver bara att jQuery-biblioteket körs korrekt. Även om jag skulle säga att Spritely är ett mer komplext animationsbibliotek, har FatPixels en nisch på marknaden för webbutvecklare.

Du kan enkelt bygga animerade sprites utan att skapa en .gif-bild. Faktum är att du kan exportera alla bilder som .jpg, och skapa en kö av sprites för en lång animerad effekt. FatPixels hemsida har en utmärkt demo tillsammans med blocket av jQuery-kod som används för att bygga den. Om du letar efter något lätt att animera dina sprites är FatPixels vägen att gå.

SmartSprites

När man använder ordet "sprite" finns det ett par olika betydelser för det. Videospeltecken eller animerade sprites är i allmänhet mindre bilder gjorda med väldigt få pixlar. Men i CSS hänvisar termen sprite till en enda bild som fungerar som ett ikon för din webbplats.

Anledningen till att du ska använda ett enda sprite-ark i stället för enskilda bilder är att minska serverens resurser. Det är mycket snabbare att ladda ner en större bild med alla dina ikoner istället för många mindre men separata bilder. Men att lägga alla dessa ikoner tillsammans i Photoshop kan vara ett verkligt problem. inte ens nödvändigtvis svårt, bara repeterande och tidskrävande.

Tack och lov är SmartSprites CSS Generator en fantastisk resurs för denna situation. Du kan snabbt generera ett pixel-perfekt ark med alla dina bilder i antingen GIF- eller PNG-format. Dessutom kan du snabbt bestämma vad din bakgrund-positionen x / y-koordinater ska vara för varje enskild ikon.

Squidfingers BG Patterns

Att utforma en bra uppsättning upprepande bakgrundsbilder är mycket svårt. Det kan ta dagar innan du kan skapa sömlösa bilder. Men tack och lov finns det resurser online för att ladda ner gratis bakgrundsplattor.

Galleriet Squidfingers Patterns är en sådan resurs. Det erbjuder över 150 olika pixel-stil mönster som du kan ladda ner och använda på dina projekt. Stilarna är mycket dynamiska och färgglada, och för en sådan sort är det en utmärkt resurs för att hålla sig till nytta. Nedladdningslänkarna finns i .zip-format som gör dem mindre och enklare att överföra mellan datorer.

Spriters Resource

Jag kan inte säga tillräckligt bra saker om The Spriters Resource. Det är en webbplats där du kan söka igenom alla olika spelsystem för sprite sheets. Dessa kan inkludera kartor, byggnader, menyskärmar, teckenproteser, ikoner och ganska mycket vad som helst!

De har varit online sedan 2001 och katalogen över videospel har vuxit enormt. Det finns en hel grupp bakom TSR med grafiska designers som kan rippa dessa olika spelspridare. Om du är intresserad av någon form av videospeldesign eller online fansites, måste du kolla in det här fantastiska galleriet.

Ännu mer intressant är några av de systerwebbplatser som skapade TSR. Gaming fans hjälpte också med att rippa bastexturer och göra teckenmodeller. Sammantaget är det en riktigt bra community som är mycket stödjande för att arbeta med sprites i digitalt konstverk.

400 pixlar

Det här är en riktigt cool webbapp som inte ger ett väsentligt värde, men det är definitivt snyggt. Med 400 pixlar kan du skapa ett pixeldokument på nätet och lagra bilden i sitt nät. Webbplatsen är utformad på liknande sätt som miljontals hemsida med varje bild som tar upp ett kvadratkvarter i den övergripande bilden.

Du kan leka i sitt webbgränssnitt och skapa några riktigt fina konstverk. Det är inte något du ska hämta direkt, men det är roligt att leka med när du hänger med det. Och det är ett bra verktyg som du kan arbeta med från vilken dator som helst som har tillgång till Internet.

Major Output

På samma sätt som 400 pixlar kan du använda Major Output som en personlig onlinestudio för pixelkonstverk. Det är fortfarande i de tidiga utvecklingsstadierna, men all kärnanvändarfunktionalitet är redan tillgänglig. Du kan registrera dig för ett gratis konto och börja skapa pixelkonst direkt.

Varje bild lagras lokalt på sina servrar som du kan länka på webbplatser och forum. Många av bilderna är öppna för allmänheten och du kan kolla in dem genom att klicka på olika författare eller taggar. Det finns också en sökruta, men jag tycker att kvaliteten på sökresultaten inte alltid är bra.

Major Output verkar som ett annat samhällsverktyg som är kul att veta om, men förmodligen kan inte erbjuda mycket utbildningsvärde för pixelartister.

Handledningar

Nu när du har resurserna, låt oss ta en titt på de handledning som tillhandahålls av de många utbildningscenter och hjälpsamma blogginlägg spridda över hela Internet. Jag har satt ihop en liten uppsättning riktigt praktiskt pixel art tutorials för nybörjare och mellanliggande designers. Många av dessa handledningssatser fokuserar mot Adobe Photoshop, men du kan följa med nästan alla avancerade bildredigerare.

Pixel Sprite Tutorial från Derek yu

Självklart finns det tiotals hundratals tutorials på pixel-sprite på Google, men den här handledningen på Derek Yus hemsida går igenom många olika steg för att utbilda hur du skapar pixel sprites. Mycket av processen har blivit strömlinjeformad och förklarad på ett sätt som gör det möjligt för nybörjare att snabbt hoppa in i åtgärden.

Videospelare kommer att älska den här handledningen eftersom du får en bakom kulisserna för att skapa denna specifika grafik. Jag älskar att hitta en webbplats layout med videospel pixel konstverk ströms igenom hela designen. Det ger en unik känsla av nostalgi, och det är något du inte hittar överallt. Någon som vill skapa egna pixel sprites av vilken anledning som helst kan börja på Dereks 10-stegs tutorial-serie.

Konfigurera Photoshop för Pixel Art av Brandon Treb

Här är en annan perfekt handledning riktad mot nybörjare inom pixel konstverk. Blogginlägget är skrivet av Brandon Treb som är en fantastisk designer och mobilutvecklare. Du kan hitta all slags användbar information i den här detaljerade guiden till pixelbaserad Photoshop-art.

Du måste veta hur du konfigurerar inställningar i Photoshop så att ditt bildelement inte kommer att visas obehagligt eller förlora kvalitet när du exporterar. Du kan bli förvånad över att lära dig mycket anpassning krävs för att verkligen få en bra bildkvalitet.

Ritning Handgjorda Pixlar av Russell Tate

Här är en annan fantastisk självstudie full av tekniker för handritad pixelkonst i Photoshop. Denna samling av pixeltekniker är helt enkelt häpnadsväckande. Vem som helst som skys genom innehållet kommer sannolikt att hitta något de inte hade känt förut.

Det finns detaljerade förklaringar om att skapa konsistens på gräs och bark; också om hur man klonar pixelkonstverk som du har ritat och gör det till en ikondesign. Allt kommer ner till övning och precision i alla områden. De som verkligen är passionerade kommer att hålla fast i det och inom några månader hitta en solid teknik för sina pixelstilsidéer.

Utveckla en CSS / JS Game Portfolio av Daniel Sternlicht

Här är en handledning från Smashing Magazine om hur man kodar en spelportfölj med CSS / JS som utnyttjade många sprites från Pokemon-serien. Författaren är Daniel Sternlicht som också råkar köra sin personliga portfölj på denna spelbaserade layout.

Webbplatsen fungerar som en RPG-värld där du styr en teckenspiral med tangentbordet. Du kan ange olika byggnader som sedan tar fram information som kontaktuppgifter och portföljposter.

Jag älskar verkligen denna handledning, och det är ett spännande sätt att kombinera pixelkonstverk med webbutveckling. Även om du inte vet mycket om JavaScript är det fortfarande en super intressant artikel. Jag har gått igenom några av koden och måste ge enorma komplimanger till Dan för en sådan kreativ handledning. Alla Pokemon fanatiker kommer säkert att bli kär i sina idéer.

Isometric Pixel Tutorials Av Matriax

Denna lilla webbplats gas13.ru har några av de mest excentriska och professionella pixel-tutorials jag någonsin sett. I isometrisk poolhandledning introduceras du för att skapa glänsande block och vattenstruktur. Dessutom hittar du resurser för alla andra isometriska pixeltangenter i sidofältet.

Det finns så mycket att lära dig: du kan designa ett galleri, pixel sprite eller till och med detaljerade texturer för videospel och webbsidor. Jag är inte säker på om denna författare fortfarande aktivt publicerar innehåll, men de befintliga artiklarna är mer än tillräckligt för nybörjare för att lära sig grunderna.

Studio Purloux Pixel-handledning av Kevin Chaloux

Nu när jag listar alla de bästa pixelhandledningarna skulle jag definitivt inkludera denna rätt mot början. Hela denna handledning om pixelkonstverk är en bra uppföljningsartikel till nybörjare. Du kommer att introduceras från början till öppen källkodsprogram som GIMP eller Paint.NET.

Du lär dig att exportera bilder och de många fasetterna av pixeldesign som dithering och anti-aliasing. Det finns så många olika tekniker att följa med. Du borde hämta några designidéer genom att titta på retro 8-bitars och 16-bitars videospel.

Författare Kevin Chaloux krediterar Derek Yus pixel sprite-handledning (listad tidigare) och nämner att detta som inspirationskälla när han först började.

Skapa ett bättre favikon av Kayla Knight

Webbdesigners glömmer ofta att en favikon (favoritikon) bild är en stor del av något märkesprogram. Alla de mest populära webbplatserna kan erkännas av deras 16 × 16 favicon. När du arbetar med en så begränsad duk, är du tvungen att hantera pixel-tät konstverk och illustrationer. Denna favicon-handledning från OXP gör ett utmärkt jobb för att kombinera båda idéerna.

Från denna tut kan du förstå varför pixelkonst är så fördelaktig när du skapar favicons. Det finns också verktyg och solida tekniker för att exportera en .ico-fil. Det finns också en liten presentation av populära favicons från hela webben.

Det här är en annan resurs som jag tycker kan gynna alla webbdesigners. Det ger dig möjlighet att utbilda sig på att skapa en favicon och arbeta med strikta pixelbegränsningar.

Showcase Gallery

Jag skulle vilja stänga artikeln med ett fint galleri med pixelformade webbdesigner. Jag har inkluderat 40 exempel på olika layouter med många olika konstnärliga visioner. Trenden med pixelerat konstverk börjar bara återkomma inom vanliga webbplatser. Jag hoppas att denna distinkta utställning av pixelwebbplatser kan erbjuda inspirationskälla för webbutvecklare över hela världen.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-bitars HTML5 Canvas Cycle

Daniel Sternlicht

Trollarnas armé

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit Tutorials

City Creator

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Sandkassen

Herr Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Upp över öronen

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 riktig deg