Pikselipohjaiset verkkosivustojen resurssit, oppaat ja esimerkit

Web-käyttöliittymän suunnittelu pikselityyliä käyttäen on suhteellisen epäselvä verrattuna nykyisiin suuntauksiin. Sinun täytyy todella kaivaa kourallinen Internet-sivustoja löytääksesi hyviä esimerkkejä; se on vaikeaa, mutta ei mahdotonta.

Tässä artikkelissa olen kerännyt kokoelma kaiken mitä tarvitset pikselipohjaiseen verkkosivujen suunnitteluun. Aloittelijoille ja asiantuntijoille on olemassa kymmeniä terveellisiä opetusohjelmia. Olen myös sisällyttänyt joitakin käteviä työkaluja ja resursseja, joita voit leikkiä aiheen tutkimiseksi. Jos olet kiinnostunut videopelien grafiikasta tai isometrisestä kuvapisteestä, rakastat tätä kokoelmaa.

voimavarat

Nämä ovat joitakin ainutlaatuisia kehitysresursseja web-skripteihin ja digitaaliseen grafiikkaan. Kun aiot luoda pikselin verkkosivujen ulkoasuja, et aina tunne tarvetta seurata kaikkea pisteeseen. Tämä web-pohjaisten resurssien kokoelma voi tulla hyvin kätevästi ja uudelleen.

spritely

Olen tottunut työskentelemään avoimen lähdekoodin kanssa. Siksi jQuery-plugin kuten Spritely löytäminen on aina jännittävä tilanne. Voit sisällyttää tämän komentosarjan sivustoosi nopeaksi dynaamiseksi sprite-animaatioksi ja selaamiseen.

Koko plugin on powered by JavaScript ja HTML / CSS; Flashia tai muuta taustakieliä ei tarvita. Dokumentointisivu on yksinkertainen, mutta tarpeeksi, jotta pääset alkuun. Kehittäjillä on runsaasti näytteitä, joita voit myös ladata.

Nykyinen vakaa versio on 0.6.1, jota päivitetään kohtalaisesti. Animaatiovaikutukset ovat yhteensopivia Opera, Chrome, Safari, Firefox ja Internet Explorer 6+. Myös kaikki älypuhelimen selaimet, jotka toimivat Android- tai iOS-käyttöjärjestelmissä, tulee tehdä täydellisesti.

FatPixels

Tämä on tehokas avoimen lähdekoodin sprite-käsikirjoitus, jonka on kehittänyt Matías Martínez. FatPixels vaatii vain, että jQuery-kirjasto toimii oikein. Vaikka sanoisin, että Spritely on monimutkaisempi animaatiokirjasto, FatPixelsilla on markkinarakenne web-kehittäjien markkinoilla.

Voit luoda animoituja spriittejä helposti luomatta .gif-kuvaa. Itse asiassa voit viedä kaikki kuvat .jpg-muodossa ja luoda jonon spriteistä yhden pitkän animoidun vaikutuksen vuoksi. FatPixels-kotisivulla on erinomainen demo yhdessä sen rakentamiseen käytetyn jQuery-koodin lohkon kanssa. Jos etsit jotain kevyttä animoidaksesi spritesejäsi, FatPixels on tapa edetä.

SmartSprites

Kun käytetään sanaa "sprite", siihen on pari eri merkitystä. Videopelien hahmot tai animoidut spritit ovat yleensä pienempiä kuvia, jotka on tehty hyvin harvoilla pikseleillä. Kuitenkin CSS: ssä termi sprite viittaa yhteen kuvaan, joka toimii sivustosi kuvakkeena.

Syy, miksi sinun pitäisi käyttää yksittäistä sprite-arkkia yksittäisten kuvien sijaan, on vähentää palvelimen resursseja. On paljon nopeampi ladata suurempi kuva, jossa on kaikki kuvakkeet monien pienempien mutta erillisten kuvien sijaan. Mutta kaikkien näiden kuvakkeiden yhdistäminen Photoshopiin voi olla todellinen hässäkkä; ei välttämättä ole vaikeaa, vain toistuvaa ja aikaa vievää.

Onneksi SmartSprites CSS Generator on fantastinen resurssi tähän tilanteeseen. Voit nopeasti luoda pikselin täydellisen levyn, jossa on kaikki kuvat joko GIF- tai PNG-muodossa. Lisäksi voit nopeasti määrittää, mitä tausta-asemassa x / y-koordinaattien tulisi olla jokaiselle yksittäiselle kuvakkeelle.

Squidfingers BG -mallit

Suunnittelemalla hyvä joukko toistuvia taustakuvia on hyvin vaikeaa. Se voi kestää päiviä, ennen kuin voit luoda saumattomia kuvia. Mutta onneksi on olemassa resursseja, joiden avulla voit ladata ilmaisia ​​taustapeilejä.

Squidfingers Patterns -galleria on yksi tällainen resurssi. Se tarjoaa yli 150 erilaista pikselityyliä, jotka voit ladata ja käyttää projekteissa. Tyylit ovat erittäin dynaamisia ja värikkäitä, ja tällaiselle lajikkeelle se on erinomainen resurssi kätevä. Latauslinkit ovat .zip-muodossa, mikä tekee niistä pienempiä ja helpompi siirtää tietokoneiden välillä.

Spriters-resurssi

En voi sanoa tarpeeksi suuria asioita Spriters-resurssista. Se on sivusto, jossa voit etsiä kaikkia eri pelijärjestelmiä sprite-arkkeihin. Näitä voivat olla kartat, rakennukset, valikkonäytöt, hahmot, kuvakkeet ja melko paljon!

He ovat olleet verkossa vuodesta 2001 ja videopelien luettelo on kasvanut valtavasti. TSR: n takana on koko yhteisö, jossa on graafisia suunnittelijoita, jotka voivat kopioida nämä erilaiset pelit. Jos olet kiinnostunut kaikesta videopelien suunnittelusta tai online-faneista, sinun täytyy tarkistaa tämä hämmästyttävä galleria.

Vielä mielenkiintoisempia ovat muutamat sisar-sivustot, jotka ovat saaneet TSR: n pois. Pelattavat fanit auttoivat myös peruskuvioiden kopioinnissa ja hahmomalleissa. Kaiken kaikkiaan se on todella loistava yhteisö, joka tukee spritien käyttöä digitaalisissa taideteoksissa.

400 pikseliä

Tämä on todella viileä web-sovellus, joka ei tarjoa oleellista arvoa, mutta se on varmasti siisti. 400 pikselin avulla voit luoda pikselidokumentin verkossa ja tallentaa kuvan ruudukkoon. Sivusto on suunniteltu samalla tavalla kuin miljoonan dollarin kotisivut, joissa jokainen kuva vie neliön lohkon koko kuvaan.

Voit pelata Web-käyttöliittymässään luomalla todella hurjata taidetta. Se ei ole jotain, jonka voit heti nousta, mutta on hauskaa pelata kerran, kun pääset siihen. Ja se on mukava työkalu, jonka avulla voit työskennellä missä tahansa tietokoneessa, jossa on Internet-yhteys.

Tärkein tulos

Samalla tavalla kuin 400 pikseliä, voit käyttää Major Outputia henkilökohtaisena online-studiona pikseliteoksia varten. Se on edelleen kehitysvaiheessa, mutta kaikki ydinkäyttäjän toiminnot ovat jo käytettävissä. Voit rekisteröidä ilmaisen tilin ja aloittaa pikselitaiteen luomisen heti.

Jokainen kuva tallennetaan paikallisesti niiden palvelimiin, joita voit linkittää verkkosivuilla ja foorumeilla. Monet kuvat ovat avoinna yleisölle ja voit tarkistaa ne napsauttamalla eri kirjoittajia tai tunnisteita. On myös hakukenttä, mutta mielestäni hakutulosten laatu ei ole aina hyvä.

Tärkein tulos näyttää olevan toinen yhteisön työkalu, joka on hauska tietää, mutta luultavasti ei pysty tarjoamaan paljon koulutusarvoa pikselitaiteilijoille.

Oppaat

Nyt kun sinulla on resurssit, tutustu monien koulutuskeskusten tarjoamiin opetusohjelmiin ja hyödyllisiin blogiposteihin, jotka ovat hajallaan Internetissä. Olen koonnut pienen joukon todella käteviä pixel art tutorials aloittelijoille ja keskisuurille suunnittelijoille. Monet näistä opetusohjelmista keskittyvät Adobe Photoshopiin, mutta voit seurata lähes kaikkia kehittyneitä kuvankäsittelyohjelmia.

Derek yun Pixel Sprite -opetusohjelma

On selvää, että Googlessa on kymmeniä satoja pikseli-sprite-opetusohjelmia, mutta tämä Derek Yun verkkosivuilla oleva opetusohjelma käy läpi monia eri vaiheita pikselien luomiseen. Suuri osa prosessista on virtaviivaistettu ja selitetty siten, että aloittelijat voivat siirtyä nopeasti toimintaan.

Videopelien fanit rakastavat tätä opetusohjelmaa, koska saat ainutlaatuisen grafiikan luomista. Rakastan löytämään verkkosivuston ulkoasun videopeli-pikselin kuvamateriaalilla, joka on täynnä koko suunnittelua. Se tarjoaa ainutlaatuisen tunteen nostalgiasta, ja se on jotain, jota et löydä kaikkialla. Kuka tahansa, joka haluaa luoda omia pikseliäänitä, voi aloittaa Derekin 10-vaiheisessa opetussarjassa.

Photoshopin määrittäminen Pixel-taideteokselle, Brandon Treb

Tässä on toinen täydellinen opetusohjelma, joka on suunnattu aloittelijoille pikseliteoksen alalla. Blogin kirjoittajan on kirjoittanut Brandon Treb, joka on loistava suunnittelija ja mobiili kehittäjä. Löydät kaikenlaisia ​​hyödyllisiä tietoja pikselipohjaisen Photoshop-taiteen yksityiskohtaisesta oppaasta.

Sinun on tiedettävä, miten Photoshopin asetukset voidaan määrittää niin, että kuvapisteesi ei näy epämukavalta tai menettää laatua viennin aikana. Saatat olla yllättynyt, kun opit paljon mukauttamista, jotta saat todella mukavan kuvanlaadun.

Piirrä Russell Taten käsin muotoillut pikselit

Tässä on toinen hämmästyttävä opetusohjelma, jossa on paljon tekniikoita Photoshopin käsin piirrettyyn kuvapisteeseen. Tämä kokoelma kuvapisteiden tekniikoita on yksinkertaisesti hämmästyttävää. Kuka tahansa, joka ohittaa sisällön, löytää todennäköisesti jotain sellaista, mitä he eivät olleet aikaisemmin tienneet.

On yksityiskohtaisia ​​selityksiä tekstuurin luomisesta ruoholle ja kuorelle; myös siitä, miten kloonataan piirretty pikseliteos ja muuta se kuvakuvaksi. Kaikki tulee käytännössä ja tarkasti kaikilla alueilla. Ne, jotka ovat todella intohimoisia, pitävät sen läpi ja muutaman kuukauden kuluessa löytävät vankan tekniikan pikselityylien ideoille.

CSS / JS-pelisalkun kehittäminen Daniel Sternlichtiltä

Tässä on yksi opetusohjelma Smashing Magazine -lehdestä siitä, miten CSS / JS-pelisalkkua voidaan koodata, mikä hyödynsi monia Sprites-pelejä Pokemon-pelisarjassa. Kirjoittaja on Daniel Sternlicht, joka myös hoitaa henkilökohtaisen salkunsa tässä pelipohjaisessa ulkoasussa.

Sivusto toimii RPG-maailmassa, jossa voit ohjata hahmon spriteä näppäimistöllä. Voit syöttää erilaisia ​​rakennuksia, jotka tuovat esiin tietoja, kuten yhteystietoja ja salkun merkintöjä.

Rakastan todella tätä opetusohjelmaa, ja se on jännittävä tapa yhdistää pikseliteoksia verkkosivustojen kehittämiseen. Vaikka et tiedä paljon JavaScriptistä, se on silti erittäin mielenkiintoinen artikkeli. Olen käynyt läpi jonkin verran koodia, ja minun on annettava Danille valtavia kiitoksia tällaisesta luovasta opetusohjelmasta. Kaikki Pokemon-fanaatikot rakastuvat varmasti hänen ideoihinsa.

Isometriset pikseliharjoitukset Matriaxin mukaan

Tällä pienellä verkkosivustolla Gas13.ru on joitakin kaikkein epäkeskeimpiä ja ammattimaisia ​​pikseliharjoituksia, joita olen koskaan nähnyt. Isometrisen altaan opetusohjelmassa tuodaan esiin kiiltävien lohkojen ja veden tekstuurin luominen. Lisäksi löydät resursseja kaikille muille sivupalkin isometrisiin pikselikäskyihin.

On niin paljon opittavaa: voit suunnitella myymälän, pikselin sprite tai jopa yksityiskohtaiset kuviot videopeleistä ja verkkosivujen taustoista. En ole varma, onko tämä kirjoittaja edelleen aktiivisesti julkaisemassa sisältöä, mutta olemassa olevat artikkelit ovat enemmän kuin tarpeeksi aloittelijoille oppia perusasiat.

Studio Purloux Pixel Tutorial Kevin Chaloux

Nyt kun luet kaikki parhaat pikseliharjoitukset, haluaisin ehdottomasti sisällyttää tämän suoraan alkuun. Tämä koko pikselitaidetta käsittelevä opetusohjelma on suuri seuranta artikkeleille aloittelijoille. Sinut otetaan käyttöön alusta lähtien avoimen lähdekoodin ohjelmistoihin kuten GIMP tai Paint.NET.

Opit käyttämään kuvien viemistä ja pikselisuunnittelun monia puolia, kuten ditering ja anti-aliasing. Voit seurata niin monia erilaisia ​​tekniikoita. Sinun pitäisi poimia joitakin suunnitteluideoita tarkastelemalla retro-8-bittisiä ja 16-bittisiä videopelejä.

Kirjoittaja Kevin Chaloux luottaa Derek Yun pikselilevyopetukseen (lueteltu aiemmin) ja mainitsee, että tämä on inspiraation lähde, kun hän aloitti ensimmäisen kerran.

Luo parempi Favicon Kayla Knight

Web-suunnittelijat unohtavat usein, että favicon-kuva (suosikkikuvake) on suuri osa tuotemerkkijärjestelmää. Kaikki suosituimmat sivustot voidaan tunnistaa niiden 16 × 16 favicon. Kun työskentelet tällaisen rajallisen kankaan kanssa, sinun on pakko käsitellä pikselitiheitä taideteoksia ja kuvia. Tämä OXP: n favicon-opetusohjelma tekee erinomaisen työn yhdistämällä molemmat ajatukset.

Tästä tutusta voit ymmärtää, miksi pikselitaide on niin hyödyllinen faviconien luomisessa. On olemassa myös työkaluja ja kiinteitä tekniikoita .ico-tiedoston viemiseksi. Mukana on myös pieni näyttely suosituista faviconeista ympäri maailmaa.

Tämä on toinen voimavara, joka mielestäni hyödyttää kaikkia web-suunnittelijoita. Se on valtuutettu kouluttamaan itseäsi faviconin luomiseen ja työskentelemään tiukkojen pikselirajoitusten avulla.

Showcase Gallery

Haluaisin sulkea artikkelin mukavan gallerian pikselityyppisistä verkkosivujen kuvioista. Olen sisällyttänyt 40 esimerkkiä erilaisista ulkoasuista, joissa on monia erilaisia ​​taiteellisia visioita. Pikseloitujen taideteosten suuntaus on vasta alkamassa uudelleen mainstream-sivustoissa. Toivon, että tämä erillinen pikselipaikkojen esittely voi tarjota inspiraationlähteen web-kehittäjille kaikkialla maailmassa.

Earthbound Central

PixelJam

Red Rokkin interaktiivinen markkinointi

eBoy-blogi

Tamago Pixel

pixelHugger

Pixel Deviant -grafiikka

8-bittinen HTML5-kangasjakso

Daniel Sternlicht

Trollien armeija

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit -oppaat

Kaupungin luoja

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Hiekkalaatikko

Herra Wong

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-museo

QuickHoney

Polpo.net

spiv.cz

4 Todellinen taikina