Pikselipõhised veebisaitide ressursid, õpetused ja näited
Veebipõhise liidese kujundamine piksli stiilis kunstiteosega võrreldes on kaasaegsete suundumustega võrreldes suhteliselt varjatud. Teil on tõesti hädavajalik kaevata läbi mõned veebisaidid, et leida häid näiteid; see on raske, kuid mitte võimatu.
Selles artiklis olen kogunud mega-kompileerimine kõigest, mida vajate pikselil põhineva veebilehe kujunduse jaoks. Algajatele ja ekspertidele on olemas kümneid tervislikke õpetusi. Olen lisanud ka mõned käepärased tööriistad ja ressursid, mida saate teemat edasi uurida. Kui sa oled üldse huvitatud videomängude graafikast või isomeetrilisest piksliteostusest, siis sa armastad seda kollektsiooni.
Ressursid
Need on mõned ainulaadsed arendusressursid veebi skriptide ja digitaalse graafika jaoks. Pildi-veebilehe kujunduste loomisel ei tunne te alati vajadust järgida kõike punkti. See veebipõhiste ressursside kogum võib olla ikka ja jälle mugav.
Spritely
Olen harjunud töötama avatud lähtekoodiga. Seetõttu on jQuery plugina nagu Spritely leidmine alati põnev olukord. Selle skripti saate lisada oma veebisaidile kiireks dünaamiliseks Sprite animatsiooniks ja kerimise taustaks.
Kogu plugin on powered by JavaScript ja HTML / CSS; Flashi või muud taustaprogrammi keelt ei nõuta. Dokumentatsiooni leht on lihtne, kuid piisav, et alustada. Arendajatel on palju näidisproove, mida saate alla laadida.
Praegune stabiilne versioon on 0.6.1, mida ajakohastatakse mõõdukalt. Animatsiooniefektid on ühilduvad Opera, Chrome, Safari, Firefoxi ja Internet Explorer 6 + -ga. Ka kõik nutitelefoni brauserid, mis töötavad Androidis või iOS-is, peaksid olema ideaalsed.
FatPixels
See on võimas avatud lähtekoodiga sprite skript, mille on välja töötanud Matías Martínez. FatPixels nõuab ainult, et jQuery raamatukogu korralikult töötaks. Kuigi ma ütleksin, et Spritely on keerulisem animatsiooniraamatukogu, on FatPixelsil veebiarendajate turul nišš..
Animeeritud spriike saab hõlpsasti ehitada ilma .gif-kujutise loomata. Tegelikult saate eksportida kõik pildid .jpg-ks ja luua ühe pika animeeritud efekti jaoks spritide järjekorda. FatPixels kodulehel on suurepärane demo koos selle ehitamiseks kasutatava jQuery koodi plokiga. Kui otsite midagi spiraalide animeerimiseks kerget, siis FatPixels on tee.
SmartSprites
Sõna "sprite" kasutamisel on sellele paar erinevat tähendust. Videomängude tähemärgid või animeeritud spritid on üldjuhul väiksemad kujutised, mis on tehtud väga väheste pikslitega. Kuid CSSis viitab mõiste sprite ühele pildile, mis toimib teie veebisaidi ikoonidena.
Põhjus, miks peaksite üksikute piltide asemel kasutama ühte sprite lehte, on serveriressursside vähendamine. Paljude väiksemate, kuid eraldi piltide asemel on palju kiirem alla laadida suuremat pilti, kus on kõik ikoonid. Kuid kõigi nende ikoonide ühendamine Photoshopis võib olla tõeline probleem; isegi mitte tingimata raske, lihtsalt korduv ja aeganõudev.
Õnneks on SmartSprites CSS Generator selle olukorra jaoks fantastiline ressurss. Saate kiiresti luua piksel-täiusliku lehe koos kõigi piltidega GIF- või PNG-vormingus. Lisaks saate kiiresti määrata, mida teie taustasend x / y koordinaadid peaksid olema iga üksiku ikooni puhul.
Squidfingers BG mustrid
Hea korduva taustpildi koostamine on väga raske. Võimalike piltide loomiseks võib kuluda mitu päeva. Kuid õnneks on vaba taustaplaatide allalaadimiseks võrgus ressursse.
Squidfingers Patterns galerii on üks selline ressurss. See pakub üle 150 erineva pikslite stiili, mida saate oma projektides alla laadida ja kasutada. Stiilid on väga dünaamilised ja värvikad ning sellise sordi jaoks on see suurepärane vahend mugavuse säilitamiseks. Allalaadimise lingid on .zip-vormingus, mis muudab need arvutite vahel väiksemaks ja lihtsamaks.
Spriterssi ressurss
Ma ei saa öelda piisavalt suuri asju Spritersi allika kohta. See on veebisait, kus saate otsida kõiki erinevaid mängusüsteeme sprite lehtede jaoks. Nende hulka võivad kuuluda kaardid, hooned, menüüekraanid, märkide kirjad, ikoonid ja päris palju!
Nad on olnud võrgus alates 2001. aastast ning videomängude kataloog on kasvanud tohutult. TSRi taga on terve kogukond graafiliste disainerite taga, kes suudavad neid erinevaid mängureid rippida. Kui olete huvitatud mis tahes vormis videomängude disainist või online-fännidest, peate selle hämmastava galerii läbi vaatama.
Veelgi huvitavam on mõned õe veebisaidid, mis tekitasid TSR-i. Mängufännid aitasid kaasa ka tekstuuride ja tegelaskujude mudelite kopeerimisel. Üldiselt on see tõesti suur kogukond, mis toetab spritide töötamist digitaalses kunstis.
400 pikslit
See on tõesti lahe veebirakendus, mis ei anna olulist väärtust, kuid see on kindlasti puhas. 400 pikslit võimaldab teil luua pikselidokumendi võrgus ja salvestada pilt oma võrku. Sait on kujundatud sarnaselt miljoni dollari kodulehele, kus iga pilt võtab kogu kujutisesse ruudukujulise ploki.
Võid mängida oma veebiliideses, luues mõningaid päris naljakaid kunsti. See ei ole midagi, mida sa kohe kohale jõuad, kuid see on lõbus mängida, kui sa selle riputad. Ja see on tore tööriist, mida saate kasutada mis tahes arvutist, millel on internetiühendus.
Peamised väljundid
Sarnaselt 400 piksliga saate kasutada suurt väljundit isikliku online-stuudios pikslitööde jaoks. See on ikka veel arengu algstaadiumis, kuid kõik peamised kasutajafunktsioonid on juba olemas. Võite registreeruda tasuta kontole ja hakata kohe pikslite loomist looma.
Iga pilt salvestatakse kohalikult nende serveritele, mida saate veebisaitidel ja foorumitel kasutada. Paljud pildid on avalikkusele avatud ja neid saab vaadata läbi erinevate autorite või silte klõpsates. Samuti on otsingukast, kuid minu arvates ei ole otsingutulemuste kvaliteet alati hea.
Peamised väljundid tunduvad olevat teise kogukonna tööriist, mis on lõbus teada saada, kuid ilmselt ei saa pikselite kunstnikele palju haridusväärtust pakkuda.
Õpetused
Nüüd, kui teil on ressursid, vaatleme paljude hariduskeskuste ja internetis hajutatud kasulike blogipostituste õpetusi. Olen kokku pannud väikese hulga tõeliselt mugavaid pixel art õpetused algajatele ja vahepealsetele disaineritele. Paljud neist õpetustest keskenduvad Adobe Photoshopile, kuid saate järgida peaaegu kõiki täiustatud pildiredaktoreid.
Derek yu Pixel Sprite juhendaja
Ilmselgelt on Google'is kümneid tuhandeid piksel-sprite-õpetusi, kuid see konkreetne juhendaja Derek Yu veebisaidil läbib palju erinevaid samme, kuidas harida, kuidas pikselipritse loote. Suur osa protsessist on sujuvamaks ja selgitatud viisil, mis võimaldab algajatel kiiresti hüpata.
Videomängude fännid armastavad seda õpetust, sest saate konkreetse graafika loomise taga stseene. Ma armastan veebilehe kujunduse leidmist videomängu pikslitööga, mis on täis kogu disaini. See pakub unikaalset nostalgia tunnet ja see on midagi, mida te ei leia kõikjal. Igaüks, kes soovib mingil põhjusel luua oma pikslite spritese, võib alustada Dereki 10-astmelise juhendaja seeriaga.
Photoshopi seadistamine Pixeli jaoks Art by Brandon Treb
Siin on veel üks täiuslik juhendaja, mis on suunatud algajatele pikseliteoste valdkonnas. Blogi kirjutab Brandon Treb, kes on fantastiline disainer ja mobiilarendaja. Selles üksikasjalikus juhendis pikselipõhise Photoshopi kunsti kohta leiate kõikvõimalikke kasulikke andmeid.
Peate teadma, kuidas seadistada Photoshopi eelistused, nii et teie piksliteoseid ei kuvata ekspordi ajal ebamugavalt ega kaota. Te võite olla üllatunud, kui õppida palju kohandamist on vaja, et tõesti hea pildikvaliteet saada.
Russell Tate poolt käsitsi valmistatud pikslite joonistamine
Siin on veel üks hämmastav õpetus, mis on täis Photoshopi käsitsi joonistatud pikselitehnikat. Pikslite kunstitehnikate kogum on lihtsalt hämmastav. Igaüks, kes sisu läbi vaatab, leiab tõenäoliselt midagi, mida nad varem ei teadnud.
On üksikasjalikud selgitused tekstuuri loomise kohta rohu ja koorega; samuti selle kohta, kuidas kloneerida pikseliteoseid ja muuta see ikooniks. Kõik see toimub praktikas ja täpsuses igas valdkonnas. Need, kes on tõeliselt kirglikud, hoiavad selle läbi ja mõne kuu pärast leiavad oma piksel-stiilis ideed kindla tehnika.
CSS / JS mänguportfelli arendamine Daniel Sternlichtilt
Siin on üks juhendaja Smashing Magazine'ist selle kohta, kuidas kodeerida CSS / JS-i hasartmänguportfelli, mis kasutas Pokemon mängusarjast palju spritese. Autor on Daniel Sternlicht, kes juhib ka oma isiklikku portfelli selles mängupõhises paigutuses.
Veebisait toimib RPG-maailmas, kus saate klaviatuuriga juhtida märki. Saate sisestada erinevaid hooneid, mis toovad seejärel esile informatsiooni, näiteks kontaktandmed ja portfelli kirjed.
Ma armastan seda õpetust tõeliselt ja see on põnev viis ühendada piksliteoseid veebisaidi arendamisega. Isegi kui sa ei tea palju JavaScripti kohta, on see ikka väga huvitav artikkel. Olen läbinud mõne koodi ja andnud Danile selle loomingulise õpetusega tohutuid lugusid. Iga Pokemon fanaatikud kindlasti armuvad tema ideedesse.
Isomeetrilised pikslite juhendid Matriaxi poolt
See väike veebisait gas13.ru omab mõnda kõige ekstsentrilisemat ja professionaalsemat piksliõpetust, mida ma olen kunagi näinud. Isomeetrilises basseiniõpetuses tutvustatakse läikivate plokkide ja vee tekstuuri loomist. Lisaks leiad ressursid kõikidele muudele isomeetrilistele pikslielementidele külgribal.
Seal on nii palju õppida: saate kujundada poe, pikselite või isegi üksikasjalike tekstuuride videomängude ja veebisaitide taustaga. Ma pole kindel, kas see autor avaldab endiselt aktiivselt sisu, kuid olemasolevad artiklid on algajatele rohkem kui piisavad, et õppida põhitõdesid.
Studio Purloux Pixel juhendaja Kevin Chaloux
Nüüd, kui ma loetan kõik parimad pikselõppematerjalid, oleksin kindlasti see õige alguses. See kogu pikseliteoste juhendaja on algajatele suurepärane järelmeetmete artikkel. Teid tutvustatakse algusest peale avatud lähtekoodiga tarkvara nagu GIMP või Paint.NET.
Saate teada, kuidas eksportida pilte ja pikslite disaini paljusid aspekte, nagu dithering ja anti-aliasing. Seal on nii palju erinevaid tehnikaid. Sa peaksid võtma mõned disaini ideed, vaadates retro-8-bitisi ja 16-bitisi videomänge.
Autor Kevin Chaloux krediteerib Derek Yu pikslite sprite õpetust (mainitud varem) ja mainib, et see on inspiratsiooni allikas, kui ta esimest korda alustas.
Loo parema Favicon'i Kayla Knighti poolt
Veebidisainerid unustavad sageli, et favicon (lemmikikoon) pilt on suur osa mis tahes brändimisskeemist. Kõiki populaarsemaid veebisaite saab ära tunda nende 16 × 16 faviconiga. Kui te töötate sellise piiratud lõuendiga, olete sunnitud tegelema pikslitihedate kunstiteoste ja illustratsioonidega. See OXPi favicon-juhendaja teeb suurepärase töö, ühendades mõlemad ideed.
Sellest juhendist saate aru, miks pikselite kunst on faviconide loomisel nii kasulik. On olemas ka tööriistu ja kindlaid tehnikaid .ico-faili eksportimiseks. Sisaldab ka väikest populaarsete faviconide esitlust kogu veebist.
See on veel üks ressurss, mis minu arvates on kasulik kõigile veebidisaineritele. See on võimeline õpetama ennast favikoni loomisel ja töötades rangete pikslite piirangutega.
Showcase Gallery
Sooviksin sulgeda artikli kena galeriiga pikslitega veebilehti. Olen lisanud 40 näidet erinevatest paigutustest, millel on palju erinevaid kunstilisi nägemusi. Pikslite kunstiteoste trend on alles algusesse jõudmas peavoolu veebilehtedel. Loodan, et see pikslite saitide eraldi esitlus pakub veebiarendajatele inspiratsiooni allikat kogu maailmas.
Earthbound Central
PixelJam
Red Rokk Interactive Marketing
eBoy blogi
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-bitine HTML5 lõuenditsükkel
Daniel Sternlicht
Trollide armee
Rakenduse BlockHead Pix rakendus
madPXL
supertott 2.0
ClassicGaming
RPG Toolkit juhendid
Linna Looja
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Liivakast
Hr Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Ülepeakaela
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Studio
Adept Vormgeving
Pixeli muuseum
QuickHoney
Polpo.net
spiv.cz
4 Tõeline tainas
