Webové stránky založené na pixeloch Zdroje, návody a príklady
Navrhovanie webového rozhrania pomocou kresieb v štýle pixelov je relatívne nejasné v porovnaní s modernými trendmi. Naozaj potrebujete vyskúšať niekoľko internetových stránok na internete, aby ste našli niekoľko dobrých príkladov; je to ťažké, ale nie nemožné.
V tomto článku som zhromaždil mega-kompilácia všetkého, čo potrebujete pre návrh webových stránok založených na pixeloch. Existujú desiatky zdravých tutoriálov pre začiatočníkov i odborníkov. Taktiež som uviedol niekoľko užitočných nástrojov a prostriedkov, s ktorými si môžete zahrať a ďalej preskúmať túto tému. Ak máte záujem o grafickú hru alebo izometrickú pixelovú kresbu, potom túto zbierku budete radi.
zdroje
Sú to jedinečné vývojové zdroje pre webové skripty a digitálnu grafiku. Ako sa ponáhľate do vytvárania webových stránok pixelov, nebudete vždy cítiť potrebu sledovať všetko na bod. Táto kolekcia webových zdrojov môže veľmi dobre prísť znova a znova.
spritely
Zvykla som pracovať s otvoreným zdrojovým kódom. To je dôvod, prečo nájsť jQuery plugin ako Spritely je vždy vzrušujúca situácia. Môžete zahrnúť tento skript do svojho webu pre rýchle dynamické sprite animácie a rolovanie pozadia.
Celý plugin je napájaný JavaScriptom a HTML / CSS; nie je potrebný žiadny Flash alebo iný podporný jazyk. Stránka dokumentácie je jednoduchá, ale dostatočná na to, aby ste mohli začať. Vývojári majú veľa vzorových ukážok, ktoré si môžete stiahnuť.
Súčasná stabilná verzia verzie je 0.6.1, ktorá je mierne aktualizovaná. Efekty animácie sú kompatibilné s verziami Opera, Chrome, Safari, Firefox a Internet Explorer 6+. Tiež všetky prehliadače smartfónov so systémom Android alebo iOS by sa mali dať dokonale.
FatPixels
Toto je výkonný sprievodný open source zdroj vyvinutý Matíasom Martínezom. Funkcia FatPixels vyžaduje len správnu prevádzku knižnice jQuery. Hoci by som povedal, že Spritely je zložitejšia animačná knižnica, FatPixels má nika na trhu pre vývojárov webu.
Môžete ľahko vytvárať animované sprites bez vytvorenia obrázka .gif. V skutočnosti budete môcť vyexportovať všetky obrázky ako .jpg a vytvoriť frontu sprites pre jeden dlhý animovaný efekt. Domovská stránka FatPixels má vynikajúce demo spolu s blokom kódu jQuery, ktorý bol použitý na jej zostavenie. Ak hľadáte niečo ľahké na oživenie vašich sprites, potom FatPixels je cesta.
SmartSprites
Keď používate slovo "sprite", máte k nemu niekoľko významov. Postavy videohier alebo animované skriptá sú spravidla menšie obrázky vykreslené s veľmi malým počtom pixelov. V CSS sa však termín "sprite" vzťahuje na jeden obrázok, ktorý slúži ako hárok s ikonami pre vaše webové stránky.
Dôvod, prečo by ste mali namiesto jednotlivých obrázkov používať jediný hárok sprite, je obmedziť zdroje servera. Je omnoho rýchlejšie stiahnuť väčší obrázok, ktorý obsahuje všetky vaše ikony namiesto mnohých menších, ale samostatných obrázkov. Ale uvedenie všetkých týchto ikon dohromady vo Photoshope môže byť skutočným problémom; nie je ani nevyhnutne náročná, opakovaná a časovo náročná.
Našťastie generátor CSS SmartSprites je fantastickým zdrojom pre túto situáciu. Môžete rýchlo vygenerovať pixel-dokonalý hárok so všetkými svojimi obrázkami vo formáte GIF alebo PNG. Navyše môžete rýchlo určiť, čo vaše background-polohový x / y súradnice by mali byť pre každú jednotlivú ikonu.
Squidfingers BG vzory
Navrhovanie dobrého súboru opakujúcich sa obrázkov na pozadí je veľmi ťažké. Môže trvať niekoľko dní, kým môžete vytvoriť bezproblémové obrázky. Ale našťastie existujú online zdroje na sťahovanie bezplatných pozadia.
Galéria Squidfingers Patterns je jedným z týchto zdrojov. Ponúka viac ako 150 rôznych vzorov v štýle pixelov, ktoré môžete na svoje projekty stiahnuť a používať. Tieto štýly sú veľmi dynamické a farebné, a pre takú rozmanitosť je to vynikajúci zdroj na to, aby ste boli šikovný. Odkazy na prevzatie sú vo formáte .zip, čo znižuje a zjednodušuje prenos medzi počítačmi.
Prostriedok Spriteri
Nemôžem povedať dosť skvelých vecí o Spriters Resource. Je to webová lokalita, kde môžete vyhľadávať všetky rôzne herné systémy pre sprite listy. Môžu obsahovať mapy, budovy, obrazovky s ponukami, znakové skriptá, ikony a skoro všetko!
Sú on-line od roku 2001 a katalóg videohier sa značne rozrástol. Existuje celá komunita za TSR s grafickými návrhármi, ktorí dokážu ripovať tieto rôzne herné sprites. Ak máte záujem o akúkoľvek formu dizajnu videohier alebo on-line fanúšikov, musíte sa pozrieť na túto úžasnú galériu.
Ešte zaujímavejšie sú niektoré z webových stránok sester, ktoré priniesli TSR. Gaming fanúšikov tiež pomohol s ripovaním základných textúr a vykresľovaním znakových modelov. Celkovo je to naozaj skvelá komunita veľmi podporujúca prácu so skriptmi v digitálnych umeleckých dielach.
400 pixelov
Je to naozaj skvelá webová aplikácia, ktorá neposkytuje zásadnú hodnotu, ale je to určite elegantná. 400 pixelov vám umožňuje vytvoriť online dokument pixelov a uložiť ich do svojej mriežky. Stránka je navrhnutá podobným spôsobom ako domovská stránka s miliónmi dolárov, pričom každý obrázok zaberá štvorcový blok v celkovom obraze.
Môžete hrať vo svojom webovom rozhraní a vytvoriť si skutočne prapôvodné umelecké diela. Nie je to niečo, čo si okamžite vyzdvihnete, ale je zábavné hrať s tým, ako sa dostanete na to. A je to pekný nástroj, s ktorým môžete pracovať z akéhokoľvek počítača s prístupom na internet.
Hlavná produkcia
Podobne ako 400 pixelov môžete použiť hlavný výstup ako osobné štúdio online pre pixelové umelecké diela. Je stále v počiatočnom štádiu vývoja, ale všetky základné funkcie používateľa sú už k dispozícii. Môžete sa zaregistrovať na bezplatný účet a okamžite začať vytvárať pixelové umenie.
Každý obrázok je uložený na svojich serveroch lokálne, ktoré môžete na webových stránkach a fórach hotlink. Mnoho obrázkov je otvorených pre verejnosť a môžete ich skontrolovať kliknutím na rôznych autorov alebo značiek. Existuje tiež vyhľadávacie pole, ale cítim, že kvalita výsledkov vyhľadávania nie je vždy skvelá.
Hlavná produkcia sa javí ako ďalší komunitný nástroj, o ktorom je zábavné vedieť, ale pravdepodobne nemôže ponúknuť veľa vzdelávacích hodnôt pre pixelových umelcov.
návody
Teraz, keď máte zdroje, poďme sa pozrieť na konzultácie poskytované mnohými vzdelávacími centrami a užitočnými blogovými príspevkami roztrúsenými po internete. Dala som dohromady malú sadu skutočne šikovných pixel art tutoriály pre začiatočníkov a stredne pokročilých návrhárov. Mnohé z týchto výukových programov sa zameriavajú na program Adobe Photoshop, ale môžete sledovať spolu s takmer akýmkoľvek pokročilým editorom obrázkov.
Sprievodca Pixel Sprite od Derek yu
Samozrejme, že na Googli sú desiatky stoviek výukových programov pre pixel-sprite, ale tento konkrétny výukový program na webových stránkach Dereka Yu prechádza mnohými rôznymi krokmi vo vzdelávaní, ako vytvárate pixelové skriptá. Veľká časť procesu bola zjednodušená a vysvetlila spôsobom, ktorý umožňuje začínajúcim sa rýchlo skočiť do akcie.
Fanúšikovia videohier sa budú páčiť tejto príručke, pretože získate zákulisné pozretie pri vytváraní týchto špecifických grafík. Milujem nájsť rozloženie webových stránok s umeleckými dielami videohier pixel posiate v celom dizajne. Poskytuje jedinečný pocit nostalgie a niečo, čo nenájdete všade. Každý, kto chce z akéhokoľvek dôvodu vytvoriť vlastné pixelové sprites, môže začať s desiatimi krokmi Derek's tutorial series.
Konfigurácia aplikácie Photoshop Pixel Art Brandonom Trebom
Tu je ďalší dokonalý tutoriál zameraný na začiatočníkov v oblasti pixel artwork. Príspevok na blogu napísal Brandon Treb, ktorý je fantastickým dizajnérom a vývojárom pre mobilné zariadenia. V tejto podrobnej príručke k aplikácii Photoshop založenej na pixeloch nájdete všetky užitočné informácie.
Musíte vedieť, ako nastaviť predvoľby vo Photoshope tak, aby sa vaša pixelová kresba nezobrazila nepríjemne alebo pri exportovaní stráca kvalitu. Možno vás prekvapí, že sa veľa prispôsobenia vyžaduje, aby ste skutočne získali dobrú kvalitu obrazu.
Kreslenie ručne remeselníckych pixelov Russell Tate
Tu je ďalší úžasný tutoriál plný techník pre ručne kreslené pixelové umenie vo Photoshope. Táto zbierka technik pixelového umenia je jednoducho prekvapujúca. Ktokoľvek, kto skrýva obsah, pravdepodobne nájde niečo, čo predtým nevedelo.
Existujú podrobné vysvetlenia o vytváraní textúry na tráve a kôre; tiež o tom, ako klonovať umelecké diela pixelov, ktoré ste nakreslili, a premeniť ich na ikonový dizajn. Všetko sa deje v praxi a presnosti v každej oblasti. Tí, ktorí sú naozaj vášniví, to držia a počas niekoľkých mesiacov nájdu solídnu techniku pre svoje nápady v štýle pixelov.
Vývoj portfólia CSS / JS hry Daniel Sternlicht
Tu je jeden tutoriál od magazínu Smashing Magazine o tom, ako kódovať herné portfólio s CSS / JS, ktoré využilo mnoho sprites z hernej série Pokémon. Autorom je Daniel Sternlicht, ktorý sa tiež stretne so svojim osobným portfóliom v tomto rozložení.
Táto webová stránka slúži ako svet RPG, kde ovládate charakter klávesnice s klávesnicou. Môžete zadať rôzne budovy, ktoré potom prinášajú informácie, ako sú kontaktné údaje a položky v portfóliu.
Skutočne sa mi páči tento návod a je to vzrušujúci spôsob, ako skombinovať pixelové umelecké diela s vývojom webových stránok. Dokonca aj keď neviete o Javine, je to stále zaujímavý článok. Prešiel som cez niektorý z kódov a musím dať Danovi obrovské komplimenty za takýto kreatívny tutoriál. Každý fanatik Pokémonov sa určite zamiluje do svojich myšlienok.
Izometrické pixelové návody od spoločnosti Matriax
Táto malá webová stránka gas13.ru má niektoré z najviac excentrických a profesionálnych výukových programov, ktoré som kedy videl. V izometrickom výcvikovom liste sa predstavíte vytváranie lesklých blokov a textúry vody. Naviac nájdete zdroje pre všetky ostatné izometrické pixely tutsu v bočnom paneli.
Existuje toľko, čo sa naučíte: môžete navrhnúť obchod, pixel sprite alebo dokonca detailné textúry pre videohry a webové stránky. Nie som si istý, či tento autor stále aktívne publikuje obsah, ale existujúce články sú pre začiatočníkov dostatočné na to, aby sa naučili základy.
Studio Purloux Pixel výučba Kevin Chaloux
Teraz, keď uvádzam zoznam všetkých najlepších tutoriálov pre pixely, určite by som to zahrnul práve na začiatok. Celý tento návod na kreslenie pixelov je skvelým nadväzujúcim článkom pre nováčikov. Budete od začiatku predstavení pre open source softvér ako GIMP alebo Paint.NET.
Naučíte sa, ako exportovať obrázky a mnoho aspektov dizajnu pixelov, ako je dithering a anti-aliasing. Existuje toľko rôznych techník, ktoré je potrebné sledovať spolu s. Mali by ste vyzdvihnúť niektoré návrhové nápady pri pohľade na retro 8-bitové a 16-bitové videohry.
Autor Kevin Chaloux spája tutoriál Derek Yu pre pixel sprite (uvedený vyššie) a spomína, že toto je zdrojom inšpirácie, keď sa prvýkrát začal.
Vytvorte lepšiu Favicon Kayla Knight
Web dizajnéri často zabúdajú, že obrázok favicon (obľúbená ikona) je obrovskou súčasťou každej schémy značky. Všetky najobľúbenejšie webové stránky môžu byť rozpoznané ich 16 × 16 favicon. Keď pracujete s takýmto obmedzeným plátnom, ste nútení riešiť pixel-husté umelecké diela a ilustrácie. Tento favicon tutoriál od spoločnosti OXP robí skvelú prácu spojením oboch nápadov.
Z tohto tutu môžete pochopiť, prečo je pixelové umenie prínosom pri vytváraní favikónov. K dispozícii sú tiež nástroje a pevné techniky na export súboru .ico. Zahŕňa aj malú prehliadku populárnych favikónov z celého webu.
Toto je ďalší zdroj, ktorý podľa mňa môže byť prínosom pre všetkých webových dizajnérov. Je to schopnosť vzdelávať sa na vytváraní favicon a pracovať s prísnymi obmedzeniami pixelov.
Galéria ukážok
Chcel by som zavrieť článok s peknou galériou návrhov webových stránok v štýle pixelov. Zahrala som 40 príkladov rôznych rozložení s mnohými rozmanitými umeleckými víziami. Trend pixelových umeleckých diel sa len začína objavovať v bežných webových stránkach. Dúfam, že táto odlišná prezentácia pixelových stránok môže byť zdrojom inšpirácie pre webových vývojárov po celom svete.
Earthbound Central
PixelJam
Red Rokk Interaktívny marketing
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-Bit HTML5 Canvas Cycle
Daniel Sternlicht
Armáda trollov
BlockHead Pix App
madPXL
supertott 2.0
ClassicGaming
RPG Toolkit Tutorials
Mesto tvorca
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Pieskovisko
Pán Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Kotrmelec
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Studio
Adept Vormgeving
Pixel Museum
QuickHoney
Polpo.net
spiv.cz
4 skutočné cesto
