Pikselių pagrindu sukurtų svetainių ištekliai, pamokos ir pavyzdžiai
Interneto sąsajos kūrimas naudojant pikselių stiliaus kūrinius yra palyginti neaiškus, palyginti su šiuolaikinėmis tendencijomis. Jums reikia išgauti per kelias svetaines internete, kad rastumėte gerų pavyzdžių; sunku, bet neįmanoma.
Šiame straipsnyje renkuosi „Mega“ kompiliuoja viską, ko jums reikės, kad sukurtumėte vaizdo elementų svetainių dizainą. Yra daugybė sveikų pamokų pradedantiesiems ir ekspertams. Aš taip pat įtraukiau kai kuriuos patogius įrankius ir išteklius, kuriuos galite žaisti, kad galėtumėte ištirti temą. Jei visai domisi vaizdo žaidimų grafika ar izometriniais pikselių kūriniais, jums patiks ši kolekcija.
Ištekliai
Tai yra keletas unikalių žiniatinklio scenarijų ir skaitmeninės grafikos kūrimo išteklių. Įžengus į vaizdo taškų svetainių išdėstymą, ne visada pajusite būtinybę sekti viską tašku. Šis internetinių išteklių rinkinys gali būti labai naudingas ir vėl.
Sprogiai
Aš įpratau dirbti prie atviro kodo. Štai kodėl ieškant „jQuery“ įskiepio kaip „Spritely“ visada yra įdomi situacija. Šį scenarijų galite įtraukti į savo svetainę, kad galėtumėte greitai kurti dinaminį „Sprite“ animaciją ir slinkti.
Visas įskiepis maitinamas JavaScript ir HTML / CSS; nereikalaujama „Flash“ arba jokios kitos „backend“ kalbos. Dokumentų puslapis yra paprastas, bet pakankamai, kad galėtumėte pradėti. Kūrėjai turi daug pavyzdžių, kuriuos galite atsisiųsti.
Dabartinė stabilios versijos versija yra 0.6.1, kuri yra vidutiniškai atnaujinama. Animacijos efektai suderinami su „Opera“, „Chrome“, „Safari“, „Firefox“ ir „Internet Explorer 6+“. Be to, bet kokios išmaniojo telefono naršyklės, veikiančios „Android“ arba „iOS“, turėtų puikiai veikti.
„FatPixels“
Tai galingas atviro kodo sprite scenarijus, sukurtas Matías Martínez. „FatPixels“ reikalauja, kad jQuery biblioteka veiktų tinkamai. Nors sakyčiau, kad „Spritely“ yra sudėtingesnė animacinė biblioteka, „FatPixels“ interneto svetainių kūrėjų rinkoje yra niša..
Jūs galite lengvai kurti animuotus sprites nesukuriant .gif vaizdo. Tiesą sakant, galėsite eksportuoti visus vaizdus kaip .jpg ir sukurti ilgą animuotą efektą turinčią spritų eilę. „FatPixels“ pagrindiniame puslapyje yra puikus demonstravimas kartu su jQuery kodo bloku, naudojamu jį sukurti. Jei ieškote ko nors lengvo, kad sužadintumėte savo sprites, FatPixels yra kelias.
„SmartSprites“
Naudojant žodį „sprite“ yra keletas skirtingų reikšmių. Vaizdo žaidimų simboliai arba animaciniai spritai paprastai yra mažesni vaizdai, pateikiami labai mažais pikseliais. Tačiau „CSS“ sąvoka „Sprite“ reiškia vieną vaizdą, kuris veikia kaip jūsų svetainės piktogramų lapas.
Priežastis, kodėl turėtumėte naudoti vieną sprite lapą vietoj atskirų vaizdų, yra sumažinti serverio išteklius. Daug greičiau atsisiųsti didesnį vaizdą, kuriame yra visos jūsų piktogramos, o ne daug mažesnių, bet atskirų vaizdų. Tačiau visos šios piktogramos kartu „Photoshop“ gali būti tikros problemos; net nebūtinai sunku, tiesiog pasikartojanti ir daug laiko.
Laimei, „SmartSprites“ CSS generatorius yra fantastinis šios situacijos šaltinis. Galite greitai generuoti pikselių tobulą lapą su visais savo vaizdais GIF arba PNG formatu. Be to, galite greitai nustatyti, kas jūsų fono padėtis x / y koordinatės turi būti kiekvienai atskirai piktogramai.
Squidfingers BG modeliai
Didelio kartojimo fono paveikslėlių rinkinys yra labai sudėtingas. Tai gali užtrukti kelias dienas, kol galėsite sukurti vientisus vaizdus. Tačiau laimei yra nemokamų fono plytelių atsisiuntimo internete.
Squidfingers modelių galerija yra vienas iš tokių išteklių. Ji siūlo daugiau nei 150 skirtingų pikselių stiliaus modelių, kuriuos galite atsisiųsti ir naudoti savo projektuose. Stiliai yra labai dinamiški ir spalvingi, o tokiai įvairovei tai yra puikus šaltinis, kad išlaikytumėte patogų. Atsisiuntimo nuorodos yra .zip formatu, todėl jos yra mažesnės ir lengviau perduodamos tarp kompiuterių.
„Spriters“ šaltinis
Aš negaliu pasakyti pakankamai didelių dalykų apie „The Spriters Resource“. Tai tinklavietė, kurioje galite ieškoti visų skirtingų sprite lapų žaidimų sistemų. Tai gali apimti žemėlapius, pastatus, meniu ekranus, simbolių rašmenis, piktogramas ir beveik viską!
Jie buvo prisijungę nuo 2001 m., O vaizdo žaidimų katalogas išaugo. TSR yra visai bendruomenei, turintiems grafinius dizainerius, kurie gali sugriebti šiuos skirtingus žaidimų žaidimus. Jei domitės bet kokios formos vaizdo žaidimų dizainu ar internetiniais fanais, turėsite patikrinti šią nuostabią galeriją.
Dar įdomiau yra keletas seserų svetainių, kurios išnyko TSR. Žaidimų gerbėjai taip pat padėjo kopijuoti pagrindines tekstūras ir atvaizduoti simbolių modelius. Apskritai tai tikrai puiki bendruomenė, kuri labai palaiko darbą su spritais skaitmeniniuose kūriniuose.
400 pikselių
Tai tikrai įdomi žiniatinklio programa, kuri nesuteikia esminės vertės, bet tai tikrai tvarkinga. 400 pikselių leidžia jums sukurti pikselių dokumentą internete ir išsaugoti vaizdą savo tinkle. Svetainė yra sukurta panašiai kaip milijono dolerių pradinis puslapis, kuriame kiekviena nuotrauka užima kvadratinį bloką.
Jūs galite žaisti aplink savo interneto sąsają, kurdami puikius kūrinius. Tai nėra kažkas, ką jūs pasieksite iš karto, bet tai yra smagu žaisti, kai jūs jį pakabinsite. Ir tai gražus įrankis, kurį galite dirbti iš bet kurio kompiuterio, turinčio interneto prieigą.
Pagrindinis rezultatas
Panašiai kaip ir 400 pikselių, galite naudoti pagrindinę produkciją kaip asmeninę internetinę studiją pikselių kūriniams. Tai vis dar ankstyvosiose plėtros stadijose, bet jau yra prieinami visi pagrindiniai naudotojo funkcionalumai. Galite užsiregistruoti nemokamai paskyroje ir pradėti kurti taškų meną iš karto.
Kiekvienas vaizdas yra saugomas vietoje jų serveriuose, kuriuos galite nukreipti svetainėse ir forumuose. Daugelis vaizdų yra atviri visuomenei ir juos galite peržiūrėti paspaudę skirtingus autorius ar žymes. Taip pat yra paieškos laukelis, bet manau, kad paieškos rezultatų kokybė ne visada yra puiki.
Pagrindinė produkcija atrodo kaip kitas bendruomenės įrankis, apie kurį įdomu žinoti, bet tikriausiai negali pasiūlyti daug pikselių menininkų švietimo vertės.
Pamokos
Dabar, kai turite išteklių, pažvelkime į daugelio švietimo centrų ir naudingų interneto dienoraščių skelbimų, kurie yra išsibarstę, pamokas. Aš sudėjau nedidelį tikrai patogų rinkinį pikselių meno pamokos pradedantiesiems ir tarpiniams dizaineriams. Daugelis šių pamokų orientuojasi į „Adobe Photoshop“, tačiau galite sekti beveik bet kokią pažangią vaizdo redaktorių.
„Derek yu“ „Pixel Sprite“ pamoka
Akivaizdu, kad „Google“ yra dešimtys šimtų „pixel-sprite“ vadovėlių, tačiau ši konkreti pamoka apie „Derek Yu“ svetainę vyksta daugeliu skirtingų žingsnių ugdant pikselių sprites. Didžioji proceso dalis buvo supaprastinta ir paaiškinta taip, kad pradedantiesiems būtų galima greitai pereiti į veiksmą.
Vaizdo žaidimų gerbėjai mylės šią pamoką, nes jūs gausite užkulisius, kad pamatytumėte šių specifinių grafikų kūrimą. Man patinka rasti tinklalapio maketą su vaizdo žaidimų pikselių kūriniais, kurie buvo suprojektuoti visą dizainą. Tai suteikia unikalų nostalgijos jausmą, ir tai yra kažkas, ko nerandate visur. Kiekvienas, norintis sukurti savo pikselių sprites dėl kokios nors priežasties, gali pradėti „Derek“ 10 žingsnių pamokų serijoje.
„Photoshop“ konfigūravimas „Pixel“ menui „Brandon Treb“
Čia yra dar vienas tobulas pamokslas, skirtas pradedantiesiems pikselių kūrinių srityje. Dienoraščio įrašą parašė „Brandon Treb“, kuris yra fantastiškas dizaineris ir mobilusis kūrėjas. Šiame išsamiame „pixel-based Photoshop“ meno vadove galite rasti įvairios naudingos informacijos.
Turite žinoti, kaip konfigūruoti „Photoshop“ nuostatas, kad jūsų vaizdo elementai nebūtų rodomi nepatogūs arba neteks kokybės, kai eksportuosite. Jums gali būti nustebinti, kad reikia daug pritaikyti, kad tikrai gautumėte gražią vaizdo kokybę.
Raselio Tato piešimo rankomis sukurtus pikselius
Čia yra dar viena nuostabi pamoka, skirta „Photoshop“ rankų piešimo meno technologijoms. Ši vaizdo taškų kolekcijų kolekcija tiesiog stebina. Kiekvienas, kuris perkelia turinį, greičiausiai ras kažką, ko anksčiau nežinojo.
Išsamūs paaiškinimai apie tekstūros kūrimą ant žolės ir žievės; taip pat apie tai, kaip klonuoti jūsų sudarytus pikselių kūrinius ir paversti juos piktogramos dizainu. Visa tai vyksta praktikoje ir tikslumu visose srityse. Tie, kurie iš tikrųjų yra aistringi, laikys jį ir per kelis mėnesius suras tvirtą savo pikselių stiliaus idėjų techniką.
CSS / JS žaidimų portfelio kūrimas Daniel Sternlicht
Štai vienas „Smashing Magazine“ mokymas apie tai, kaip koduoti žaidimų portfelį su „CSS / JS“, kuri pasinaudojo daugybe „Pokemon“ žaidimų serijų. Autorius yra Daniel Sternlicht, kuris taip pat vykdo savo asmeninį portfelį šiame žaidimų išdėstyme.
Svetainė veikia kaip RPG pasaulis, kuriame valdote simbolių sprite su klaviatūra. Galite įvesti skirtingus pastatus, kurie tada pateikia informaciją, pvz., Kontaktinius duomenis ir portfelio įrašus.
Aš tikrai myliu šią pamoką ir tai įdomus būdas sujungti vaizdo elementus su svetainės kūrimu. Net jei nežinote apie „JavaScript“, tai vis dar yra labai įdomus straipsnis. Aš išgyvenau kai kurį kodą ir dėkoju Danui už tokį kūrybinį mokymą. Bet kokie Pokemon fanatikai tikrai įsimylės savo idėjomis.
Izometriniai pikselių pamokos pagal Matriax
Ši maža interneto svetainė gas13.ru turi keletą labiausiai ekscentrinių ir profesionalių vaizdo elementų, kuriuos aš kada nors matiau. Izometrinėje baseino pamokoje supažindinama su blizgančių blokų ir vandens tekstūros kūrimu. Be to, rasite išteklių visiems kitiems izometriniams pikselių šuoliams šoninėje juostoje.
Yra daug ką išmokti: galite sukurti parduotuvės, vaizdo elementų ar netgi išsamų vaizdo žaidimų ir svetainių tekstūros tekstūrą. Nesu tikras, ar šis autorius vis dar aktyviai skelbia turinį, bet esami straipsniai yra daugiau nei pakankamai pradedantiesiems, norintiems sužinoti pagrindus.
„Kevin Chaloux“ studija „Purloux Pixel“ pamoka
Dabar, kai aš išvardijau visus geriausius pikselių mokymus, aš tikrai įtrauksiu šią teisę į pradžią. Visa tai apie pikselių kūrinių pamoką yra puikus naujienų straipsnis naujokams. Jūs pradėsite nuo pat pradžių atviro kodo programinę įrangą, pavyzdžiui, „GIMP“ arba „Paint.NET“.
Sužinosite, kaip eksportuoti vaizdus ir daugelį taškų dizaino aspektų, pvz., Dithering ir anti-aliasing. Yra tiek daug skirtingų būdų, kaip sekti. Jūs turėtumėte pasiimti kai kurias dizaino idėjas, žiūrėdami į 8-bitų ir 16 bitų vaizdo žaidimus.
Autorius Kevin Chaloux kredituoja Derek Yu „pixel sprite“ pamoką (minėta anksčiau) ir nurodo, kad tai kaip įkvėpimo šaltinis, kai jis pirmą kartą pradėjo.
Sukurkite geresnį „Favicon“ Kayla Knight
Žiniatinklio dizaineriai dažnai pamiršo, kad favicon (mėgstamiausia piktograma) yra didžiulė bet kokios prekės ženklo schemos dalis. Visos populiariausios svetainės gali būti atpažįstamos pagal jų 16 × 16 favicon. Kai dirbate su tokia ribota drobė, esate priversti susidoroti su pikselių tankiais meno kūriniais ir iliustracijomis. Šis „OXP“ mokomasis mokymas atlieka puikų darbą derinant abi idėjas.
Iš šio mokymo galite suprasti, kodėl taškų menas yra toks naudingas kuriant faviconus. Taip pat yra įrankių ir tvirtų metodų .ico failo eksportavimui. Taip pat yra nedidelis populiarių faviconų vitrinas iš viso interneto.
Tai dar vienas šaltinis, kuris, manau, gali būti naudingas visiems interneto dizaineriams. Tai įgalina šviesti save kuriant „favicon“ ir dirbant su griežtais vaizdo taškų apribojimais.
Showcase Gallery
Norėčiau uždaryti straipsnį su gražią pikselių stiliaus svetainių dizaino galeriją. Įtraukiau 40 įvairių maketų pavyzdžių su daugybe įvairių meninių vizijų. Pikselių meno kūrinių tendencija tik pradeda vėl atsirasti pagrindinėse svetainėse. Tikiuosi, kad ši atskira pikselių svetainių vitrina gali pasiūlyti įkvėpimo šaltinį žiniatinklio kūrėjams visame pasaulyje.
„Earthbound Central“
PixelJam
Red Rokk interaktyvi rinkodara
„eBoy“ tinklaraštis
Tamago Pixel
pixelHugger
Pixel Deviant grafika
8 bitų HTML5 drobės ciklas
Daniel Sternlicht
Trolių armija
„BlockHead Pix“ programa
madPXL
supertott 2.0
„ClassicGaming“
RPG priemonių rinkinys
Miesto kūrėjas
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Smėlio dėžė
Ponas Wong
„Pixel Freak“
Nasc Pixel Art
Paxjah
FoolsTown
Važiuokite per kulnus
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
„Pixeltemple Studio“
Adept Vormgeving
Pikselių muziejus
„QuickHoney“
Polpo.net
spiv.cz
4 Tikra tešla
