Pixel-based web stranice Resursi, Tutoriali, i primjeri
Dizajniranje web sučelja pomoću pikselskog umjetničkog djela relativno je nejasno u usporedbi s modernim trendovima. Stvarno trebate kopati kroz nekolicinu web-mjesta na Internetu kako biste pronašli neke dobre primjere; to je teško, ali ne i nemoguće.
U ovom članku sam prikupio mega-kompilacija svega što vam je potrebno za dizajn web-mjesta zasnovanog na pikselima. Postoje desetine zdravih vodiča za početnike i stručnjake. Također sam uključio neke korisne alate i resurse koje možete igrati s kojima ćete dalje istraživati temu. Ako ste uopće zainteresirani za grafiku videoigre ili izometrijske ilustracije piksela onda će vam se svidjeti ova kolekcija.
Resursi
Ovo su neki jedinstveni razvojni resursi za web skripte i digitalnu grafiku. Kao što ste kopati u stvaranju piksela web-izgleda, nećete uvijek osjećati potrebu da slijedite sve do točke. Ova zbirka resursa utemeljenih na webu može vrlo dobro doći iznova i iznova.
Spritely
Navikao sam se raditi s otvorenim izvornim kodom. Zato je pronalaženje jQuery dodatka kao što je Spritely uvijek uzbudljiva situacija. Ovu skriptu možete uključiti u svoju web-lokaciju za brzu dinamičku animaciju duhova i pomicanje pozadina.
Cijeli dodatak pokreću JavaScript i HTML / CSS; nije potreban Flash niti bilo koji drugi pozadinski jezik. Stranica s dokumentacijom je jednostavna, ali dovoljna za početak. Programeri imaju mnoštvo primjera demo datoteka koje također možete preuzeti.
Trenutna stabilna verzija je 0.6.1 koja je umjereno ažurirana. Animacijski efekti kompatibilni su s Opera, Chrome, Safari, Firefox i Internet Explorer 6+. Također, svi preglednici pametnih telefona koji rade na Androidu ili iOS-u trebali bi se savršeno prikazati.
FatPixels
Ovo je snažan open source sprite koji je razvio Matías Martínez. FatPixels zahtijeva samo da JQuery knjižnica radi ispravno. Iako bih rekao da je Spritely složenija biblioteka animacija, FatPixels ima nišu na tržištu za web-programere.
Možete jednostavno graditi animirane duhove bez stvaranja .gif slike. Zapravo, moći ćete izvesti sve slike kao .jpg i stvoriti red sprita za jedan dugi animirani efekt. Početna stranica FatPixela ima izvrstan demo, zajedno s blokom jQuery koda koji se koristi za njegovu izgradnju. Ako tražite nešto lagano za animiranje vaših duhova, FatPixels je način na koji to možete učiniti.
SmartSprites
Kada se koristi riječ "duh" postoji nekoliko različitih značenja za njega. Znakovi videoigre ili animirani duhovi obično su manje slike prikazane s vrlo malo piksela. Međutim, u CSS-u izraz Sprite odnosi se na jednu sliku koja djeluje kao list ikona vaše web-lokacije.
Razlog zbog kojeg biste umjesto pojedinačnih slika trebali upotrijebiti samo jedan sprite, je smanjiti resurse poslužitelja. Mnogo je brže preuzeti veću sliku koja sadrži sve vaše ikone umjesto mnogo manjih, ali zasebnih slika. No, stavljanje svih ovih ikona u Photoshop može biti prava gnjavaža; čak ni nužno teško, samo se ponavljaju i oduzimaju mnogo vremena.
Srećom SmartSprites CSS Generator je fantastičan resurs za ovu situaciju. Možete brzo generirati savršen list piksela sa svim svojim slikama u GIF ili PNG formatu. Osim toga možete brzo odrediti što Pozadina položaju x / y koordinate trebaju biti za svaku pojedinačnu ikonu.
Squidfingersi BG obrasci
Dizajniranje dobrog skupa ponavljanja pozadinskih slika je vrlo teško. Može potrajati nekoliko dana prije nego što možete stvoriti bešavne slike. No, srećom postoje resursi online za preuzimanje besplatne pozadinske pločice.
Galerija Squidfingers Patterns je jedan takav resurs. Ona nudi više od 150 različitih piksela stil obrasce koje možete preuzeti i koristiti na svojim projektima. Stilovi su vrlo dinamični i šareni, a za takvu raznolikost, to je izvrstan izvor za držanje pri ruci. Linkovi za preuzimanje su u .zip formatu što ih čini manjim i lakšim za prijenos između računala.
Respiratorni resurs
Ne mogu reći dovoljno velikih stvari o The Spriters Resource. To je web-mjesto na kojem možete pretraživati sve raznovrsne sustave igranja za sprite listove. One mogu uključivati karte, zgrade, zaslone izbornika, spriteove znakova, ikone i gotovo sve!
Oni su online od 2001. godine i katalog video igara je strahovito porastao. Postoji cijela zajednica iza TSR-a s grafičkim dizajnerima koji mogu ripati ove različite igre za igru. Ako ste zainteresirani za bilo koji oblik dizajna videoigara ili online fanova, morat ćete provjeriti ovu nevjerojatnu galeriju.
Još zanimljivije su neke od sestrinskih web-mjesta koja su pokrenula TSR. Ljubitelji igara također su pomogli pri kopiranju osnovnih tekstura i prikazivanju modela znakova. Sve u svemu to je zaista sjajna zajednica koja jako podržava rad sa spritesom u digitalnim umjetničkim djelima.
400 piksela
Ovo je stvarno cool web aplikacija koja ne pruža bitnu vrijednost, ali je definitivno uredna. 400 piksela omogućuje stvaranje online dokumenta piksela i pohranjivanje slike u njihovu mrežu. Stranica je dizajnirana na sličan način na početnu stranicu od milijun dolara, pri čemu svaka slika zauzima kvadratni blok u ukupnoj slici.
Možete se igrati u svom web sučelju stvarajući neke stvarno glupo umjetničko djelo. To nije nešto što ćete odmah pokupiti, ali zabavno je igrati se jednom kad ga dobijete. I to je lijep alat s kojim možete raditi s bilo kojeg računala koje ima pristup internetu.
Glavni izlaz
U sličnom smislu kao i 400 piksela, možete koristiti Major Output kao osobni online studio za crtanje piksela. To je još uvijek u ranim fazama razvoja, ali je sva osnovna funkcionalnost korisnika već dostupna. Možete se registrirati za besplatni račun i odmah početi stvarati pikselnu umjetnost.
Svaka slika pohranjuje se lokalno na njihovim poslužiteljima koje možete povezati na web stranice i forume. Mnoge slike otvorene su za javnost i možete ih provjeriti klikom na različite autore ili oznake. Tu je i okvir za pretraživanje, ali smatram da kvaliteta rezultata pretraživanja nije uvijek velika.
Major Output izgleda kao drugi alat zajednice koji je zabavan za znati, ali vjerojatno ne može ponuditi mnogo obrazovne vrijednosti za pikselske izvođače.
Tutoriali
Sada kada imate resurse, pogledajmo tutorijale koje pružaju mnogi obrazovni centri i korisne blog postove razasute po internetu. Sastavio sam mali set doista zgodan pixel art tutoriali za početnike i srednje dizajnere. Mnogi od ovih tutorijala usmjeravaju se prema Adobe Photoshopu, ali možete pratiti gotovo svaki napredni editor slika.
Pixel Sprite Tutorial by Derek yu
Očito postoje desetine stotina tutorijala za pisanje piksela na Googleu, ali ovaj poseban vodič na Derek Yu web stranici prolazi kroz mnogo različitih koraka u edukaciji o tome kako stvoriti pikselske duhove. Velik dio procesa je pojednostavljen i objašnjen na način koji početnicima omogućuje brzo skakanje u akciju.
Ljubitelji video igara će obožavati ovaj tutorial jer ćete zaviriti u pozadinu stvaranja ove specifične grafike. Volim pronalaženje izgleda web stranice s video igrom piksela umjetnina littered tijekom dizajna. Ona pruža jedinstven osjećaj nostalgije, i to je nešto što ne nalazite svugdje. Svatko tko želi stvoriti vlastite piksele iz bilo kojeg razloga može početi na Derek-ovom 10-koraknom vodiču.
Konfiguriranje Photoshopa za Pixel Art od Brandona Treba
Ovdje je još jedan savršen udžbenik usmjeren na početnike u području piksela. Blog post je napisao Brandon Treb koji je fantastičan dizajner i mobilni developer. Možete naći sve vrste korisnih informacija u ovom detaljnom vodiču za pikselske Photoshop art.
Morate znati kako postaviti postavke u Photoshopu tako da se vaši crteži piksela neće pojaviti neugodno ili izgubiti kvalitetu prilikom izvoza. Vi svibanj biti iznenađeni da bi saznali mnogo prilagodbe je potrebno stvarno dobiti lijepu kvalitetu slike.
Crtanje ručno izrađenih piksela Russella Tatea
Ovdje je još jedna nevjerojatna udžbenica puna tehnika za ručno nacrtanu pixel art u Photoshopu. Ova zbirka umjetničkih tehnika piksela jednostavno je zapanjujuća. Svatko tko pretražuje sadržaj najvjerojatnije će pronaći nešto što ranije nije poznavao.
Postoje detaljna objašnjenja o stvaranju teksture na travi i kori; također o tome kako klonirati pikselske crteže koje ste nacrtali i pretvoriti ih u dizajn ikona. Sve se svodi na praksu i preciznost u svakom području. Oni koji su doista strastveni će ga prožeti i za nekoliko mjeseci pronaći čvrstu tehniku za svoje pikselske ideje.
Razvijanje CSS / JS portfelja igara Daniel Sternlicht
Evo jednog tutoriala iz Smashing Magazina o tome kako kodirati portfelj igara s CSS / JS koji je koristio mnoge duhove iz serije Pokemon igara. Autor je Daniel Sternlicht koji također vodi svoj osobni portfelj na ovom rasporedu temeljenom na igrama.
Web-stranica djeluje kao RPG svijet u kojem kontrolirate znakovnu sprite pomoću tipkovnice. Možete unijeti različite građevine koje zatim prikazuju podatke kao što su podaci za kontakt i unosi portfelja.
Ja doista volim ovaj tutorial, i to je uzbudljiv način kombiniranja piksela s razvojem web stranica. Čak i ako ne znate mnogo o JavaScriptu, to je i dalje zanimljiv članak. Prošao sam kroz neke od kodova i moram dati ogromne pohvale Danu za takav kreativni vodič. Svaki Pokemon fanatik sigurno će se zaljubiti u njegove ideje.
Isometric Pixel Tutoriali Matriax
Ova mala web stranica gas13.ru ima neke od najekscentričnijih i najprofesionalnijih vodiča za piksele koje sam ikada vidio. U izometričkom vodiču za bazen uvodi se stvaranje sjajnih blokova i teksture vode. Uz to ćete pronaći resurse za sve ostale izometrične piksele u bočnoj traci.
Ima toliko toga za naučiti: možete dizajnirati storefront, pixel sprite, ili čak detaljne teksture za video igre i pozadine web stranica. Nisam siguran je li ovaj autor još uvijek aktivno objavljivao sadržaj, ali postojeći članci su više nego dovoljni za početnike da nauče osnove.
Studio Purloux Pixel Tutorial Kevin Chaloux
Sada kada sam popis svih najboljih pixel tutoriali ja bi definitivno uključiti ovo pravo na početku. Cijeli ovaj udžbenik na pixel artwork je veliki follow-up članak na newbies. Bit ćete uvedeni od samog početka do open source softvera kao što su GIMP ili Paint.NET.
Naučit ćete kako izvesti slike i mnoge aspekte dizajna piksela, kao što su podrhtavanje i anti-aliasing. Postoji toliko mnogo različitih tehnika koje treba slijediti. Trebali biste pokupiti neke ideje za dizajn ako pogledate retro 8-bitne i 16-bitne video igre.
Autor Kevin Chaloux kreditirao je Derek Yuov vodič za piksele (navodi se ranije) i spominje da je to izvor inspiracije kada je prvi put počeo.
Napravite bolju Favicon od Kayla Knight
Web dizajneri često zaboravljaju da je slika favikona (omiljena ikona) ogroman dio bilo koje sheme brendiranja. Sve najpopularnije web-lokacije mogu se prepoznati po njihovoj 16 × 16 favicon. Kada radite s takvim ograničenim platnom, prisiljeni ste nositi se s pikselima i ilustracijama. Ovaj favicon vodič iz OXP-a čini izvrstan posao kombiniranja obje ideje.
Iz ovog tut, možete shvatiti zašto piksel umjetnosti je tako koristan pri stvaranju favicons. Tu su i alati i čvrste tehnike za izvoz .ico datoteke. Također je uključen mali izlog popularnih favikona iz cijelog Weba.
Ovo je još jedan resurs koji osjećam da može koristiti svim web dizajnerima. Osnažuje se edukacija o stvaranju favikona i rad sa strogim ograničenjima piksela.
Galerija izloga
Htio bih zatvoriti članak s lijepom galerijom piksela dizajniranih web stranica. Uključio sam 40 primjera raznih rasporeda s raznovrsnim umjetničkim vizijama. Trend pikseliranih umjetničkih djela tek se počinje ponovno pojavljivati u mainstream web stranicama. Nadam se da će ova različita izložbena mjesta za piksele ponuditi izvor inspiracije za web-programere širom svijeta.
Središnja zemlja
PixelJam
Red Rokk Interaktivni marketing
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-bitni HTML5 platneni ciklus
Daniel Sternlicht
Vojska trolova
BlockHead Pix App
madPXL
supertott 2.0
ClassicGaming
RPG Toolkit Tutoriali
Gradski Stvoritelj
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Sandbox
G. Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Preko ušiju
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Studio Pixeltemple
Adept Vormgeving
Muzej piksela
QuickHoney
Polpo.net
spiv.cz
4 Stvarno tijesto
