Op pixels gebaseerde websites Bronnen, zelfstudies en voorbeelden

Het ontwerpen van een webinterface met behulp van pixelachtige illustraties is relatief obscuur in vergelijking met moderne trends. Je moet echt een handvol websites op het internet doorzoeken om een ​​paar goede voorbeelden te vinden; het is moeilijk, maar niet onmogelijk.

In dit artikel heb ik verzameld een mega-compilatie van alles wat je nodig hebt voor pixelgebaseerd website-ontwerp. Er zijn tientallen gezonde zelfstudies voor zowel beginners als gevorderden. Ik heb ook een aantal handige hulpmiddelen en bronnen opgenomen waarmee je kunt spelen om het onderwerp verder te verkennen. Als je helemaal geïnteresseerd bent in videogamegrafiek of isometrische pixelafbeeldingen, dan zul je deze collectie geweldig vinden.

Middelen

Dit zijn enkele unieke ontwikkelingsbronnen voor webscripts en digitale afbeeldingen. Terwijl u zich verdiept in het maken van layouts van pixelwebsites, zult u niet altijd de behoefte voelen om alles op de stip te volgen. Deze verzameling webbronnen kan heel goed van pas komen keer op keer.

kwieke

Ik ben eraan gewend geraakt om met open source-code te werken. Dat is waarom het vinden van een plug-in voor jQuery zoals Spritely altijd een opwindende situatie is. U kunt dit script opnemen in uw website voor snelle dynamische sprite-animatie en scrollende achtergronden.

De hele plugin wordt mogelijk gemaakt door JavaScript en HTML / CSS; er is geen Flash of een andere back-endtaal vereist. De documentatiepagina is eenvoudig maar voldoende om u op weg te helpen. De ontwikkelaars hebben veel voorbeelddemo's die je ook kunt downloaden.

De huidige stabiele releaseversie is 0.6.1 die redelijk wordt bijgewerkt. De animatie-effecten zijn compatibel met Opera, Chrome, Safari, Firefox en Internet Explorer 6+. Ook moeten alle smartphonebrowsers die op Android of iOS worden uitgevoerd, perfect worden weergegeven.

FatPixels

Dit is een krachtig open source sprite script ontwikkeld door Matías Martínez. FatPixels vereist alleen dat de jQuery-bibliotheek correct wordt uitgevoerd. Hoewel ik zou zeggen dat Spritely een complexere animatiebibliotheek is, heeft FatPixels een niche in de markt voor webontwikkelaars.

U kunt eenvoudig geanimeerde sprites maken zonder een GIF-afbeelding te maken. In feite kun je alle afbeeldingen exporteren als .jpg en een wachtrij met sprites maken voor een lang geanimeerd effect. De homepage van FatPixels heeft een uitstekende demo samen met het blok met jQuery-code dat is gebruikt om het te bouwen. Als je op zoek bent naar iets lichtgewicht om je sprites te animeren, dan is FatPixels de juiste keuze.

SmartSprites

Bij gebruik van het woord "sprite" zijn er een aantal verschillende betekenissen. Videogamekarakters of geanimeerde sprites zijn over het algemeen kleinere afbeeldingen die met zeer weinig pixels worden weergegeven. In CSS verwijst de term sprite naar een enkele afbeelding die fungeert als een blad met pictogrammen voor uw website.

De reden dat u één enkele sprite-sheet moet gebruiken in plaats van afzonderlijke afbeeldingen, is het besparen van serverresources. Het is veel sneller om een ​​grotere afbeelding te downloaden met al uw pictogrammen in plaats van veel kleinere maar afzonderlijke afbeeldingen. Maar al deze pictogrammen samenvoegen in Photoshop kan een echt gedoe zijn; niet eens per se moeilijk, alleen repetitief en tijdrovend.

Gelukkig is de SmartSprites CSS Generator een fantastische hulpbron voor deze situatie. U kunt snel een pixel-perfect vel genereren met al uw afbeeldingen in GIF- of PNG-indeling. Bovendien kunt u snel bepalen wat uw background-position x / y-coördinaten moeten voor elk afzonderlijk pictogram zijn.

Squidfingers BG-patronen

Het ontwerpen van een goede set van herhaalde achtergrondafbeeldingen is erg moeilijk. Het kan dagen duren voordat u naadloze afbeeldingen kunt maken. Maar gelukkig zijn er online bronnen voor het downloaden van gratis achtergrondtegels.

De Squidfingers Patterns-galerij is zo'n bron. Het biedt meer dan 150 verschillende pixel-achtige patronen die u kunt downloaden en gebruiken voor uw projecten. De stijlen zijn zeer dynamisch en kleurrijk en voor zo'n verscheidenheid is het een uitstekende hulpbron om bij te houden. De downloadkoppelingen zijn in ZIP-indeling, waardoor ze kleiner worden en gemakkelijker tussen computers kunnen worden overgedragen.

The Spriters Resource

Ik kan niet genoeg goede dingen zeggen over The Spriters Resource. Het is een website waar je alle spelsystemen kunt doorzoeken op sprite-sheets. Dit kunnen kaarten, gebouwen, menuschermen, karaktersprites, pictogrammen en vrijwel alles zijn!

Ze zijn online sinds 2001 en de catalogus met videogames is enorm gegroeid. Er is een hele community achter TSR met grafische ontwerpers die deze verschillende gamesprites kunnen rippen. Als je geïnteresseerd bent in elke vorm van ontwerp van videogames of online fansites, moet je deze geweldige galerij bekijken.

Nog interessanter zijn enkele van de zusterwebsites die voortkwamen uit TSR. Gaming-fans hielpen ook met het rippen van basisstructuren en het renderen van karaktermodellen. Over het algemeen is het een geweldige community die het werken met sprites in digitale kunst zeer steunt.

400 pixels

Dit is een heel coole web-app die geen essentiële waarde biedt, maar het is zeker netjes. Met 400 Pixels kunt u online een pixeldocument maken en de afbeelding in hun raster opslaan. De site is op een vergelijkbare manier ontworpen als de startpagina van miljoenen dollars, waarbij elke afbeelding een vierkant blok opneemt in het algemene beeld.

Je kunt in hun webinterface spelen en een paar hele gooie kunstwerken maken. Het is niet iets dat je meteen oppikt, maar het is leuk om mee te spelen als je het eenmaal onder de knie hebt. En het is een leuke tool waarmee u kunt werken vanaf elke computer met internettoegang.

Major Output

In dezelfde geest als 400 Pixels kun je Major Output gebruiken als een persoonlijke online studio voor pixelillustraties. Het is nog in de beginfase van ontwikkeling, maar alle functionaliteit van de kerngebruikers is al beschikbaar. U kunt zich aanmelden voor een gratis account en direct pixelkunst maken.

Elke afbeelding wordt lokaal op hun servers opgeslagen, die u op websites en fora kunt hotlinken. Veel van de afbeeldingen zijn toegankelijk voor het publiek en u kunt ze bekijken door op verschillende auteurs of tags te klikken. Er is ook een zoekvak, maar ik vind dat de kwaliteit van zoekresultaten niet altijd even goed is.

Major Output lijkt een andere communitytool die leuk is om over te weten, maar die waarschijnlijk niet veel educatieve waarde biedt voor pixelartiesten.

tutorials

Nu u over de middelen beschikt, laten we eens kijken naar de tutorials die door de vele opleidingscentra en nuttige blogposts verspreid over het internet worden aangeboden. Ik heb een kleine set van echt handig samengesteld pixelart tutorials voor beginners en halfgevorderden. Veel van deze tutorials richten hun aandacht op Adobe Photoshop, maar je kunt ze volgen met bijna elke geavanceerde beeldeditor.

De Pixel Sprite-zelfstudie door Derek yu

Vanzelfsprekend zijn er tientallen honderden pixel-sprite tutorials op Google, maar deze specifieke tutorial op Derek Yu's website doorloopt verschillende stappen om te leren hoe je pixel sprites maakt. Een groot deel van het proces is gestroomlijnd en uitgelegd op een manier waardoor beginners snel in de actie kunnen springen.

Liefhebbers van videogames zullen dol zijn op deze tutorial omdat je een kijkje achter de schermen krijgt bij het maken van deze specifieke afbeeldingen. Ik ben dol op het vinden van een website-indeling met pixeldiekjes van videogames die door het hele ontwerp zijn verspreid. Het geeft een uniek gevoel van nostalgie, en het is iets dat je niet overal vindt. Iedereen die om wat voor reden dan ook zijn eigen pixel-sprites wil maken, kan beginnen met de 10-stappenreeks van Derek.

Photoshop configureren voor Pixel Art door Brandon Treb

Hier is nog een perfecte tutorial gericht op beginners op het gebied van pixelkunstwerken. De blogpost is geschreven door Brandon Treb, een fantastische ontwerper en mobiele ontwikkelaar. U vindt allerlei nuttige informatie in deze gedetailleerde gids voor pixelgebaseerde Photoshop-kunst.

U moet weten hoe u voorkeuren in Photoshop instelt, zodat uw pixelillustraties niet vreemd lijken of kwaliteit verliezen bij het exporteren. Het zal je misschien verbazen dat er veel maatwerk nodig is om echt een mooie beeldkwaliteit te krijgen.

Met de hand gemaakte pixels tekenen door Russell Tate

Hier is nog een geweldige tutorial vol technieken voor handgetekende pixelart in Photoshop. Deze verzameling pixelart-technieken is eenvoudigweg verbluffend. Iedereen die de inhoud doorzoekt, zal hoogstwaarschijnlijk iets vinden dat ze nog niet eerder hadden gekend.

Er zijn gedetailleerde uitleg over het maken van textuur op gras en schors; ook over het kloon van pixelillustraties die je hebt getekend en verander het in een pictogramontwerp. Het komt allemaal neer op oefening en precisie op elk gebied. Degenen die echt gepassioneerd zijn, zullen het volhouden en binnen enkele maanden een degelijke techniek vinden voor hun pixelachtige ideeën.

Een CSS / JS-gameportfolio ontwikkelen door Daniel Sternlicht

Hier is een tutorial van Smashing Magazine over het coderen van een spelportfolio met CSS / JS, waarbij veel sprites uit de Pokemon-gameseries zijn gebruikt. De auteur is Daniel Sternlicht, die toevallig ook zijn persoonlijke portfolio op deze op gaming gebaseerde lay-out uitvoert.

De website fungeert als een RPG-wereld waarin je een personagesprite bestuurt met het toetsenbord. U kunt verschillende gebouwen invoeren die vervolgens informatie weergeven zoals contactgegevens en portfolio-items.

Ik ben helemaal weg van deze tutorial en het is een opwindende manier om pixelillustraties te combineren met website-ontwikkeling. Zelfs als je niet veel over JavaScript weet, is dit nog steeds een super interessant artikel. Ik heb een deel van de code doorgenomen en moet Dan een enorme complimenten geven voor zo'n creatieve tutorial. Elke Pokemon-fanaat zal zeker verliefd worden op zijn ideeën.

Isometrische pixel-tutorials door Matriax

Deze kleine website gas13.ru heeft een aantal van de meest excentrieke en professionele pixel-tutorials die ik ooit heb gezien. In de isometrische pool-tutorial maak je kennis met het maken van glanzende blokken en watertextuur. Daarnaast vindt u bronnen voor alle andere isometrische pixeltokjes in de zijbalk.

Er valt zoveel te leren: je kunt een storefront, pixelsprite of zelfs gedetailleerde texturen ontwerpen voor videogames en website-achtergronden. Ik weet niet zeker of deze auteur nog steeds actief inhoud publiceert, maar de bestaande artikelen zijn meer dan genoeg voor beginners om de basis te leren.

Studio Purloux Pixel-zelfstudie door Kevin Chaloux

Nu ik de beste pixel-tutorials opsomming, zou ik zeker dit recht tegen het begin opnemen. Deze hele tutorial over pixelillustraties is een geweldig vervolgartikel voor nieuwkomers. Je wordt vanaf het begin geïntroduceerd aan open source software zoals GIMP of Paint.NET.

U leert hoe u afbeeldingen en de vele facetten van pixelontwerp, zoals dithering en anti-aliasing, kunt exporteren. Er zijn zoveel verschillende technieken om mee te volgen. Je moet enkele ontwerpideeën oppikken door te kijken naar retro 8-bit en 16-bit videogames.

Auteur Kevin Chaloux schrijft de pixel sprite-tutorial van Derek Yu in (eerder vermeld) en vermeldt dat dit als een bron van inspiratie was toen hij voor het eerst begon.

Creëer een beter favicon door Kayla Knight

Webontwerpers vergeten vaak dat een favicon (favoriete pictogram) afbeelding een groot deel is van elk merkenschema. Alle populaire websites zijn herkenbaar aan hun 16 × 16 favicon. Wanneer je met zo'n beperkt canvas werkt, word je gedwongen om te gaan met pixel-dichte illustraties en illustraties. Deze favicon-tutorial van OXP doet uitstekend werk door beide ideeën te combineren.

Uit deze tut kun je begrijpen waarom pixelart zo nuttig is bij het maken van favicons. Er zijn ook tools en solide technieken voor het exporteren van een .ico-bestand. Ook inbegrepen is een kleine showcase van populaire favicons van overal op het web.

Dit is een andere bron waarvan ik denk dat het alle webontwerpers ten goede kan komen. Het geeft je de kracht om jezelf te leren hoe je een favicon creëert en met strikte pixelbeperkingen werkt.

Showcase Gallery

Ik wil het artikel graag afsluiten met een mooie galerij van website-ontwerpen in pixelstijl. Ik heb 40 voorbeelden van verschillende lay-outs met veel verschillende artistieke visies opgenomen. De trend van gepixelde illustraties begint nog maar net terug te komen op reguliere websites. Ik hoop dat deze duidelijke showcase van pixelsites een bron van inspiratie kan bieden voor webontwikkelaars over de hele wereld.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-bits HTML5 Canvas-cyclus

Daniel Sternlicht

Army of Trolls

BlockHead Pix-app

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit-zelfstudies

City Creator

Final Fantasy XIII-2

Kawaii Hannah Pixel Art

De Sandbox

Meneer Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Hals over kop

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 echte deeg