Spletne strani na osnovi pikslov Viri, vaje in primeri
Oblikovanje spletnega vmesnika s slikami v pikselskem slogu je v primerjavi s sodobnimi trendi relativno nejasna. Za iskanje dobrih primerov res potrebujete precej spletnih strani na internetu. to je težko, vendar ne nemogoče.
V tem članku sem zbral mega-kompilacija vsega, kar potrebujete za zasnovo spletne strani, ki temelji na slikovnih pikah. Obstaja na ducate zdravih vaj za začetnike in strokovnjake. Vključil sem tudi nekaj priročnih orodij in virov, s katerimi se lahko znova pogovarjate o temi. Če ste sploh zainteresirani za grafiko grafičnih iger ali izometrično slikovno sliko pikslov, vam bo ta zbirka všeč.
Viri
To so nekaj edinstvenih razvojnih virov za spletne skripte in digitalne grafike. Ko se boste poglobili v oblikovanje slikovnih pik, ne boste vedno čutili potrebe po sledenju vse do točke. Ta zbirka spletnih virov lahko znova in znova postane zelo uporabna.
Spritely
Navadil sem se dela z odprto kodo. Zato je iskanje vtičnika jQuery, kot je Spritely, vedno razburljivo. Ta skript lahko vključite v svojo spletno stran za hitro dinamično animacijo v sprite in za pomikanje po ozadju.
Celoten vtičnik poganja JavaScript in HTML / CSS; ni potreben noben Flash ali kateri koli drugi jezik. Stran z dokumentacijo je preprosta, vendar dovolj za začetek. Razvijalci imajo veliko vzorčnih demonstracij, ki jih lahko tudi prenesete.
Trenutna stabilna različica izdaje je 0.6.1, ki je zmerno posodobljena. Učinki animacije so združljivi z operacijskim sistemom Opera, Chrome, Safari, Firefox in Internet Explorer 6+. Tudi vsi brskalniki pametnih telefonov, ki se izvajajo na Androidu ali iOS-u, se morajo odlično prikazati.
FatPixels
To je zmogljiv sprite skript, ki ga je razvil Matías Martínez. FatPixels zahteva, da knjižnica jQuery deluje pravilno. Čeprav bi rekel, da je Spritely bolj kompleksna animacijska knjižnica, ima FatPixels nišo na trgu za spletne razvijalce.
Z lahkoto lahko zgradite animirane duhove brez ustvarjanja slike .gif. Pravzaprav lahko izvozite vse slike kot .jpg in ustvarite čakalno vrsto duhov za en dolg animirani učinek. Domača stran FatPixels ima odlično predstavitev skupaj z blokom jQuery, ki se uporablja za njegovo izdelavo. Če iščete nekaj lahkega za animacijo vaših duhov, potem je to FatPixels način.
SmartSprites
Pri uporabi besede "sprite" obstaja nekaj različnih pomenov. Znaki video iger ali animirani duhovi so običajno manjše slike, prikazane z zelo malo slikovnih pik. V CSS pa se izraz Sprite nanaša na eno sliko, ki deluje kot list ikon za vaše spletno mesto.
Razlog, da morate namesto posameznih slik uporabiti en sam sprite list, je zmanjšati vire strežnika. Veliko hitreje je prenesti večjo sliko z vsemi ikonami, namesto s številnimi manjšimi, vendar ločenimi slikami. Toda združevanje vseh teh ikon v Photoshopu je lahko resna težava; ni niti nujno težko, samo ponavljajoče in zamudno.
K sreči je SmartSprites CSS Generator fantastičen vir za to situacijo. Hitro lahko ustvarite popoln del s slikovnimi pikami z vsemi svojimi slikami v formatu GIF ali PNG. Poleg tega lahko hitro ugotovite, kaj vaš položaj ozadja Koordinate x / y naj bodo za vsako posamezno ikono.
Vzorci Squidfingers BG
Oblikovanje dobrega niza ponavljajočih se slik ozadja je zelo težko. To lahko traja nekaj dni, preden lahko ustvarite brezšivne slike. Ampak na srečo so sredstva na spletu za nalaganje prostih ploščic ozadja.
Galerija Squidfingers Patterns je en tak vir. Ponuja več kot 150 različnih vzorcev, ki jih lahko prenesete in uporabite na svojih projektih. Stilov je zelo dinamičen in barvit, in za tako raznolikost, je odličen vir, da obdržite priročno. Povezave za prenos so v zapisu .zip, zaradi česar so manjše in lažje prenosljive med računalniki.
Resnični vir
Ne morem reči dovolj velikih stvari o The Spriters Resource. To je spletna stran, kjer lahko iščete po vseh različnih igralnih sistemih za sprite liste. Te lahko vključujejo zemljevide, zgradbe, zaslone menijev, duhovne znake, ikone in precej vsega!
Od leta 2001 so na spletu in katalog video iger se je izjemno povečal. Obstaja celotna skupnost za TSR z grafičnimi oblikovalci, ki lahko raztrgajo te različne igralne sprite. Če vas zanima kakšna oblika oblikovanja video iger ali spletnih oboževalcev, boste morali preveriti to neverjetno galerijo.
Še bolj zanimive so nekatere sestrske spletne strani, ki so sprožile TSR. Oboževalci iger na srečo so pomagali tudi pri kopiranju osnovnih tekstur in modelih upodabljanja znakov. Na splošno je res odlična skupnost, ki zelo podpira delo z duhovi v digitalnih umetniških delih.
400 slikovnih pik
To je res kul spletna aplikacija, ki ne zagotavlja bistvene vrednosti, vendar je vsekakor urejena. 400 slikovnih pik omogoča ustvarjanje spletnega dokumenta in shranjevanje slike v omrežju. Spletna stran je zasnovana na podoben način kot domača stran z milijoni dolarjev, pri čemer vsaka slika zavzame kvadratni blok v celotni sliki.
Lahko se igrate v svojem spletnem vmesniku in ustvarjate resnično neumno umetniško delo. To ni nekaj, kar boste takoj pobrali, vendar je zabavno igrati s tem, ko ga dobite. In to je lepo orodje, s katerim lahko delate s katerim koli računalnikom, ki ima dostop do interneta.
Major Output
Na podoben način kot 400 slikovnih pik lahko Major Output uporabite kot osebni spletni studio za slikovne slike. Še vedno je v zgodnjih fazah razvoja, vendar so vse osnovne uporabniške funkcije že na voljo. Lahko se registrirate za brezplačen račun in takoj začnete ustvarjati slikovno sliko.
Vsaka slika je shranjena lokalno na njihovih strežnikih, ki jih lahko hotlink na spletnih straneh in forumih. Številne slike so odprte za javnost in jih lahko preverite tako, da kliknete različne avtorje ali oznake. Obstaja tudi iskalno polje, vendar menim, da kakovost rezultatov iskanja ni vedno odlična.
Major Output se zdi kot drugo orodje skupnosti, ki je zabavno vedeti, vendar verjetno ne more ponuditi veliko izobraževalne vrednosti za pixel umetnike.
Vadnice
Zdaj, ko imate vire, si poglejmo vadnice, ki jih nudijo številni izobraževalni centri in koristne objave na blogih, ki so razpršene po internetu. Pripravil sem majhen nabor resnično priročnih pixel art tutorials za začetnike in srednje oblikovalce. Mnoge od teh vajah se osredotočajo na Adobe Photoshop, vendar lahko sledite skoraj vsem naprednim urejevalnikom slik.
Pixel Sprite Tutorial, ki ga Derek yu
Očitno je, da na Googlu obstajajo na desetine stotinih vadnic za slikovne pike, toda ta posebna vadnica na spletni strani Dereka Yu poteka skozi veliko različnih korakov pri izobraževanju o tem, kako ustvarjate piksle. Velik del postopka je bil poenostavljen in pojasnjen na način, ki začetnikom omogoča, da hitro skočijo v akcijo.
Oboževalci video iger bodo všeč tej vadnici, saj boste zaznali zakulisje pri ustvarjanju teh specifičnih grafik. Všeč mi je, da poiščem postavitev spletne strani z umetniškimi deli za video igre, ki so razpršeni po vsem dizajnu. Zagotavlja edinstven občutek nostalgije in je nekaj, česar ne najdete povsod. Vsakdo, ki želi ustvariti lastne piksle za piksle iz kakršnega koli razloga, se lahko začne z Derek-ovim 10-stopenjskim učbenikom.
Konfiguriranje Photoshopa za Pixel Art, ki ga je ustvaril Brandon Treb
Tukaj je še en popoln vodič, namenjen začetnikom na področju umetniških del. Blog je napisal Brandon Treb, ki je fantastičen oblikovalec in mobilni razvijalec. V tem podrobnem vodniku boste našli vse koristne informacije o slikovni sliki, ki temelji na slikovnih pikih.
Morate vedeti, kako nastaviti nastavitve v Photoshopu, tako da se slikovna slika ne bo zdela nerodna ali izgubila kakovost pri izvozu. Morda boste presenečeni, ko boste izvedeli veliko prilagoditev, da boste res dobili lepo sliko.
Risanje ročno izdelanih slikovnih pik Russell Tate
Tukaj je še ena čudovita vadnica, polna tehnik za ročno izdelano slikovno sliko v Photoshopu. Ta zbirka tehnik umetnosti je preprosto presenetljiva. Vsakdo, ki se prebere skozi vsebino, bo najverjetneje našel nekaj, kar prej ni bilo znano.
Obstajajo podrobna pojasnila o ustvarjanju teksture na travi in lubju; tudi o tem, kako klonirati slikovno sliko, ki ste jo narisali, in jo spremeniti v ikono. Vse se zlije na prakso in natančnost na vseh področjih. Tisti, ki so resnično strastni, ga bodo pregazili in v nekaj mesecih našli trdno tehniko za svoje pikselske ideje.
Razvijanje CSS / JS portfelja iger Daniel Sternlicht
Tukaj je ena tutorial od Smashing Magazine o tem, kako kodirati portfelj iger na srečo s CSS / JS, ki je uporabil veliko sprites iz igre Pokemon serije. Avtor je Daniel Sternlicht, ki ima tudi svoj osebni portfelj na tej igralni osnovi.
Spletna stran deluje kot RPG svet, kjer s tipkovnico nadzirate znakovnega duhca. Vnesete lahko različne zgradbe, ki nato prikažejo informacije, kot so kontaktni podatki in vnosi portfelja.
Resnično mi je všeč ta vadnica, in to je razburljiv način za združevanje slikovnih del pikslov z razvojem spletne strani. Tudi če ne veste veliko o JavaScriptu, je to še vedno zelo zanimiv članek. Prešla sem nekaj kode in moram Danu dati izjemne pohvale za tako kreativno vadnico. Vsak fanatik Pokemon se bo zagotovo zaljubil v njegove ideje.
Isometric Pixel Tutorials Z Matriax
Ta majhna spletna stran gas13.ru ima nekaj najbolj ekscentričnih in profesionalnih pixelov, ki sem jih kdaj videl. V izometrični vadnici za bazen ste uvedli ustvarjanje bleščečih blokov in teksturo vode. Poleg tega boste našli vire za vse druge izometrične pike v stranski vrstici.
Veliko se lahko naučite: lahko oblikujete prodajalno, slikovne pike ali celo podrobne teksture za videoigre in ozadja spletnega mesta. Nisem prepričan, ali ta avtor še vedno aktivno objavlja vsebino, vendar so obstoječi članki več kot dovolj za začetnike, da se naučijo osnov.
Studio Purloux Pixel Vadnica Kevin Chaloux
Zdaj, ko sem naštel vse najboljše vaje za piksle, bi to zagotovo vključil prav na začetku. Ta celotna vadnica na slikovnih delih je odličen nadaljevalni članek za začetnike. Od samega začetka boste uvedli odprtokodno programsko opremo, kot sta GIMP ali Paint.NET.
Naučili se boste izvažati slike in številne vidike zasnove slikovnih pik, kot so dithering in anti-aliasing. Obstaja toliko različnih tehnik. Morate pobrati nekaj idej za oblikovanje tako, da pogledate v retro 8-bitne in 16-bitne video igre.
Avtor Kevin Chaloux je zaslužil Derek Yu's pixel sprite tutorial (naveden prej) in omenja, da je to vir navdiha, ko se je prvič začel.
Ustvarite boljši favikon Kayla Knight
Spletni oblikovalci pogosto pozabljajo, da je slika priljubljene ikone velik del vsake sheme označevanja blagovnih znamk. Vse najbolj priljubljene spletne strani je mogoče prepoznati po svojih 16 × 16 favicon. Ko delate s takšnim omejenim platnom, ste prisiljeni obravnavati slikovne slike in ilustracije. Ta vodič za Favicon iz OXP-ja je odlična naloga združevanja obeh idej.
Iz tega pišete lahko razumete, zakaj je pixel art tako koristen pri ustvarjanju favikonov. Obstajajo tudi orodja in trdne tehnike za izvoz datoteke .ico. Vključena je tudi majhna vitrina priljubljenih faviconsov z vsega spleta.
To je še en vir, za katerega menim, da lahko koristi vsem oblikovalcem spletnih strani. Omogoča izobraževanje o ustvarjanju ikone in delovanju s strogimi omejitvami.
Galerija predstavitev
Želel bi zapreti članek z lepo galerijo pixel-styled spletne strani modelov. Vključil sem 40 primerov različnih postavitev z različnimi umetniškimi vizijami. Trend slikovitih umetniških del se šele začenja ponovno pojavljati v običajnih spletnih mestih. Upam, da lahko ta posebna predstavitev spletnih mest slikovnih pik ponuja vir navdiha za spletne razvijalce po vsem svetu.
Središče za zemeljski rob
PixelJam
Red Rokk Interactive Marketing
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-bitni cikel platna HTML5
Daniel Sternlicht
Vojska trolov
BlockHead Pix App
madPXL
supertott 2.0
ClassicGaming
RPG orodja Vadnice
City Creator
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Peskovnik
G. Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Zaljubljen do ušes
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Studio Pixeltemple
Adept Vormgeving
Muzej Pixel
QuickHoney
Polpo.net
spiv.cz
4 Pravo testo
