Pixel-alapú webhelyek források, oktatóanyagok és példák
A webes felület tervezése pixel-stílusú műalkotással viszonylag homályos a modern trendekhez képest. Tényleg szüksége van arra, hogy néhány internetes honlapon keresztül ásjon el néhány jó példát találni; nehéz, de nem lehetetlen.
Ebben a cikkben összegyűjtöttem a pixel alapú weblaptervezéshez szükséges összes mega összeállítása. Több tucat egészséges oktató van a kezdőknek és a szakértőknek egyaránt. Néhány hasznos eszközt és erőforrást is felkerestem, amellyel a témát tovább tanulmányozhatod. Ha egyáltalán érdekli a videojáték-grafika vagy az izometrikus pixelművészet, akkor szeretni fogja ezt a gyűjteményt.
Erőforrások
Ezek néhány egyedi fejlesztői erőforrás a webes szkriptek és a digitális grafika számára. Ahogy a pixel-webhely elrendezések létrehozásánál, nem mindig érzi, hogy mindent követnie kell a ponthoz. Ez a webalapú erőforrások gyűjteménye nagyon jól használható újra és újra.
spritely
Szoktam hozzászokni a nyílt forráskódú munkához. Ezért mindig olyan jQuery plugin, mint a Spritely, megtalálása izgalmas helyzet. Ezt a szkriptet a dinamikus sprite animáció és a görgetés hátterei közé is beillesztheti a webhelyére.
A teljes bővítmény JavaScript és HTML / CSS; nincs szükség Flash-re vagy más backend nyelvre. A dokumentációs oldal egyszerű, de elég ahhoz, hogy elkezdhesse. A fejlesztők rengeteg mintademót is letölthetnek.
A jelenlegi stabil kiadás verziója 0,6,1, amely mérsékelten frissül. Az animációs effektusok kompatibilisek az Opera, a Chrome, a Safari, a Firefox és az Internet Explorer 6+. Az Androidon vagy iOS-on futó okostelefon-böngészőknek is tökéletesen kell lenniük.
FatPixels
Ez egy erős, nyílt forráskódú sprite script, amelyet Matías Martínez fejlesztett ki. A FatPixels csak a jQuery könyvtárnak megfelelően működik. Bár azt mondanám, hogy a Spritely egy összetettebb animációs könyvtár, a FatPixels-nek van egy rést a webfejlesztők piacán.
Az animált spriteket egyszerűen .gif kép létrehozása nélkül lehet létrehozni. Valójában az összes képet exportálhatja .jpg formátumban, és egy hosszú animált effekthez hozzon létre egy sor spritet. A FatPixels kezdőlapja kiváló demóval és a felépítéséhez használt jQuery kód blokkjával együtt. Ha valami könnyűt keres a spritek animálásához, akkor a FatPixels az út.
SmartSprites
A "sprite" szó használatakor van egy pár különböző jelentés. A videojáték karakterek vagy animált spritek általában kisebb képeket tartalmaznak, amelyek nagyon kevés képpontot tartalmaznak. A CSS-ben azonban a „sprite” kifejezés egyetlen olyan képre utal, amely a weblapod ikonjaként működik.
Az egyes képek helyett egyetlen sprite lapot kell használnia a szerver erőforrásainak csökkentésére. Sokkal gyorsabb letölteni egy nagyobb képet, amely az összes ikont tartja a sok kisebb, de különálló kép helyett. De ezeknek az ikonoknak a Photoshopban való elhelyezése valódi problémát jelenthet; nem feltétlenül nehéz, csak ismétlődő és időigényes.
Szerencsére a SmartSprites CSS generátor fantasztikus erőforrás a helyzethez. Gyorsan létrehozhat egy pixel-tökéletes lapot minden képpel GIF vagy PNG formátumban. Ezenkívül gyorsan meghatározhatja, hogy mi az background-position Az x / y koordináták minden egyes ikonra vonatkoznak.
Squidfingers BG minták
Egy jó ismétlődő háttérképek készítése nagyon nehéz. A zökkenőmentes képek létrehozása napokig tarthat. De szerencsére vannak források online ingyenes háttértárak letöltésére.
A Squidfingers minták galéria egy ilyen erőforrás. Több mint 150 különböző pixel-stílusú mintát kínál, amelyeket a projektjeinken letölthet és használhat. A stílusok nagyon dinamikusak és színesek, és egy ilyen sokféleség számára ez egy kiváló erőforrás a kézben tartáshoz. A letöltési hivatkozások .zip formátumban vannak, amelyek kisebbek és könnyebben átvihetők a számítógépek között.
A Spriters erőforrás
Nem tudok elég nagy dolgokat mondani a Spriters erőforrásról. Ez egy olyan webhely, ahol a sprite lapok összes különböző játékrendszerében kereshet. Ezek lehetnek térképek, épületek, menüképernyők, karakterspritek, ikonok és elég sok minden!
2001 óta online vannak, és a videojátékok katalógusa hatalmas mértékben nőtt. Van egy egész közösség a TSR mögött, a grafikai tervezők, akik képesek a különböző játékspriteket feldarabolni. Ha bármilyen formában érdekel a videojáték-tervezés vagy az online rajongók, meg kell nézni ezt a csodálatos galériát.
Még érdekesebbek azok a testvéroldalak, amelyek a TSR-t megszüntették. A szerencsejátékosok is segítettek a bázis textúrák és a karaktermodellek rendezésében. Összességében ez egy igazán nagyszerű közösség, amely nagyon támogatja a digitális grafikában való munkát.
400 képpont
Ez egy igazán jó webes alkalmazás, amely nem nyújt alapvető értéket, de ez minden bizonnyal tiszta. 400 pixel lehetővé teszi egy pixel dokumentum online létrehozását és a kép tárolását a rácsban. A webhelyet hasonló módon tervezték meg, mint az egymillió dolláros kezdőlapot, ahol minden kép négyzet alakú blokkot vesz fel a teljes képben.
A webes felületükön játszhatsz néhány igazán ostoba képpel. Ez nem valami, amit azonnal felveszi, de szórakoztató, ha egyszer megérkezik. És ez egy szép eszköz, amellyel bármilyen számítógéppel dolgozhat, amely internet-hozzáféréssel rendelkezik.
Főbb kimenet
Hasonlóan a 400 pixelhez, a Major Output-t személyes online stúdióként használhatja a pixelek számára. Még mindig a fejlesztés korai szakaszában van, de az összes alapvető felhasználói funkció már elérhető. Regisztrálhatsz egy ingyenes fiókra, és azonnal elkezdheted a pixel art létrehozását.
Minden kép helyileg tárolódik a szervereiken, melyeket a weboldalakon és a fórumokon is hivatkozhat. A képek nagy része nyitva áll a nyilvánosság számára, és megtekintheti azokat a különböző szerzők vagy címkék segítségével. Van is egy keresőmező, de úgy érzem, a keresési eredmények minősége nem mindig jó.
A fő kimenet úgy tűnik, mint egy másik közösségi eszköz, amiről jó tudni, de valószínűleg nem tud sok képzési értéket nyújtani a pixel művészeknek.
oktatóanyagok
Most, hogy rendelkezésünkre áll az erőforrások, nézzük meg a számos oktatási központ által nyújtott oktatást és az interneten szétszórt hasznos blogbejegyzéseket. Összeállítottam egy kis, nagyon praktikus készletet pixel art oktatóanyagok kezdőknek és közbenső tervezőknek. Sok ilyen oktatóprogram az Adobe Photoshop felé irányítja a figyelmet, de majdnem minden fejlett képszerkesztővel követheti.
Derek yu Pixel Sprite bemutatója
Nyilvánvaló, hogy több tízezer pixel-sprite bemutató van a Google-on, de ez a konkrét bemutató a Derek Yu honlapján számos lépést tesz lehetővé a pixel spritek létrehozásának oktatásában. A folyamat nagy részét egyszerűsítették és megmagyarázzák oly módon, hogy a kezdők gyorsan be tudjanak lépni az akcióba.
A videojáték-rajongók szeretni fogják ezt a bemutatót, hiszen a jelenetek mögött a különleges grafikák megalkotásakor találkozunk. Szeretem megtalálni a webhely elrendezést a videojáték-pixel grafikával, melyet a tervezési időszak alatt láttak el. A nosztalgia egyedülálló érzését nyújtja, és mindenhol nem találja meg. Bárki, aki bármilyen okból szeretné létrehozni saját képpontjait, elkezdheti a Derek 10 lépéses bemutatósorozatát.
A Photoshop konfigurálása a Pixel Art számára a Brandon Treb által
Itt van egy másik tökéletes bemutató, amely a képalkotás területén kezdőknek szól. A blogbejegyzést Brandon Treb írja, aki fantasztikus tervező és mobil fejlesztő. Ebben a részletes útmutatóban megtalálható mindenféle hasznos információ a pixel alapú Photoshop művészetben.
Tudnia kell, hogyan állíthatja be a Photoshop beállításait, így a pixel grafikája nem lesz kínos vagy elveszíti a minőséget exportáláskor. Lehet, hogy meglepődnek, hogy sok testreszabás szükséges ahhoz, hogy igazán jó képminőséget érjünk el.
Kézzel készített pixelek rajzolása Russell Tate által
Itt van egy másik csodálatos bemutató, amely tele van a Photoshopban készített, kézzel rajzolt pixel art technikákkal. Ez a gyűjtemény a pixel art technikák egyszerűen elképesztő. Bárki, aki áthalad a tartalomon, valószínűleg talál valamit, amit korábban nem ismert.
Részletes magyarázatok vannak a textúra és a kéreg textúrájának létrehozásáról; azt is, hogy hogyan kell klónozni a húzott képpontokat, és egy ikontervezéssé alakítani. Minden területen gyakorlatilag és pontosan jön létre. Azok, akik valóban szenvedélyesek lesznek, és néhány hónapon belül találnak egy szilárd technikát a pixel-stílusú ötleteikhez.
CSS / JS játékportfólió fejlesztése Daniel Sternlicht által
Itt van egy bemutató a Smashing Magazine-ról arról, hogyan lehet kódolni egy játékportfóliót a CSS / JS-sel, amely sok Pokert játszott a spanyolokból. A szerző Daniel Sternlicht, aki szintén személyes portfólióját vezeti ezen a játékalapú elrendezésen.
A weboldal RPG-világként működik, ahol a billentyűzet segítségével irányíthatja a karakterláncot. Különböző épületekbe is beléphet, amelyek olyan információkat hoznak létre, mint a kapcsolattartási adatok és a portfólió bejegyzések.
Igazán szeretem ezt a bemutatót, és ez egy izgalmas módja a pixel grafikák és a weboldal fejlesztésének egyesítésére. Még ha nem is tudsz sokat a JavaScript-ről, ez még mindig szuper érdekes cikk. Elmentem néhány kódot, és hatalmas dicséretet kell adnom Dannek egy ilyen kreatív bemutatónak. Minden Pokemon fanatikus biztosan beleszeret az ötleteibe.
Izometrikus Pixel oktatóanyagok Matriax szerint
Ez a kis weboldal Gas13.ru rendelkezik a legkülönlegesebb és professzionálisabb képpontos oktatóanyagokkal, amelyeket valaha láttam. Az izometrikus medence bemutatóban bemutatjuk a fényes blokkok és a víz textúra létrehozását. Ezen kívül erőforrásokat találhat az oldalsáv összes többi izometrikus képpontja számára.
Olyan sok tanulásra van szükség: a boltok, a pixel sprite, vagy akár a videojátékok és a weboldal hátterének részletes textúráit is megtervezheti. Nem vagyok biztos benne, hogy ez a szerző még mindig aktívan közzéteszi-e a tartalmat, de a meglévő cikkek több mint elég ahhoz, hogy a kezdők megtanulják az alapokat.
Kevin Chaloux Studio Purloux Pixel bemutatója
Most, hogy felsorolom a legjobb képpont-oktatóanyagokat, mindenképpen ezt az elejét illeti. Ez az egész bemutató a pixel grafikáról nagyszerű nyomon követési cikk az újszülötteknek. A kezdetektől fogva bevezetésre kerül a nyílt forráskódú szoftverek, mint a GIMP vagy a Paint.NET.
Megtanulhatja, hogyan exportálhat képeket és a pixeltervezés számos aspektusát, mint például a dithering és az anti-aliasing. Olyan sok különböző technika követhető. Néhány tervezési ötletet fel kell vennie a retro 8-bites és 16 bites videojátékokba.
Szerző Kevin Chaloux kreditet ad Derek Yu pixel sprite bemutatójának (korábban felsorolt), és megemlíti, hogy ez az inspiráció forrása, amikor először indult.
Hozzon létre egy jobb Favicon-ot Kayla Knight
A webes tervezők gyakran elfelejtik, hogy a favicon (kedvenc ikon) képe minden márkaépítési rendszer nagy része. Az összes legnépszerűbb webhelyet felismeri a 16 × 16 favicon. Ha ilyen korlátozott vászonkal dolgozik, kénytelenek vagyunk a pixel-sűrű műalkotásokkal és illusztrációkkal foglalkozni. Az OXP favicon bemutatója kiváló munkát végez mindkét ötlet kombinálásában.
Ebből a célból megértheti, hogy a pixelművészet olyan előnyös, ha favicont hoz létre. Vannak eszközök és szilárd technikák a .ico fájl exportálására. Ezenkívül egy kis népszerű favicont is bemutat a webről.
Ez egy másik erőforrás, amit úgy érzem, mindenki számára hasznos lehet. Lehetősége van arra, hogy oktasson magadnak egy favicon létrehozásáról és szigorú pixelkorlátozásokról.
Showcase Galéria
Szeretném bezárni a cikket egy szép galériával a pixel-stílusú weblaptervezéssel. 40 példát találtam különböző elrendezésekre, sokféle művészi látomással. A pixelált műalkotások trendje csak most kezdődik újra a mainstream weboldalakon. Remélem, hogy ez a különféle pixeloldalak bemutatása inspirációt kínálhat a webfejlesztők számára a világ minden tájáról.
Earthbound Central
PixelJam
Red Rokk interaktív marketing
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant grafika
8 bites HTML5 vászonciklus
Daniel Sternlicht
Trollok hadserege
BlockHead Pix App
madPXL
supertott 2.0
ClassicGaming
RPG Toolkit oktatóanyagok
City Creator
Final Fantasy XIII-2
KawaiiHannah Pixel Art
A homokozó
Mr. Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Fülig
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Stúdió
Adorm Vormgeving
Pixel Múzeum
QuickHoney
Polpo.net
spiv.cz
4 Valódi tészta
