Pixel-Based Websites resursi, konsultācijas un piemēri
Tīmekļa saskarnes projektēšana, izmantojot pikseļu mākslas darbus, ir salīdzinoši neskaidra salīdzinājumā ar mūsdienu tendencēm. Jums tiešām ir nepieciešams izrakt caur nedaudzām tīmekļa vietnēm internetā, lai atrastu labus piemērus; tas ir grūti, bet ne neiespējami.
Šajā rakstā esmu savācis mega-apkopojums par visu, kas jums būs nepieciešams, lai izveidotu pikseļu vietnes dizainu. Ir desmitiem veselīgu konsultantu gan iesācējiem, gan ekspertiem. Esmu iekļāvis arī dažus noderīgus rīkus un resursus, kurus varat spēlēt apkārt, lai izpētītu šo tēmu tālāk. Ja jūs vispār interesē videospēļu grafikas vai izometriski pikseļu mākslas darbi, tad jums būs šī kolekcija.
Resursi
Tie ir daži unikāli web resursu skriptu un digitālo grafiku izstrādes resursi. Kā jūs ienirt veidot pikseļu vietnes izkārtojumus, jūs ne vienmēr jutīsiet vajadzību sekot līdzi punktam. Šī tīmekļa resursu kolekcija var būt noderīga atkal un atkal.
Sprits
Esmu pieradis strādāt ar atvērtā pirmkoda kodu. Tieši tāpēc jQuery spraudnis, piemēram, Spritely, vienmēr ir aizraujoša situācija. Jūs varat iekļaut šo skriptu savā tīmekļa vietnē, lai ātri dinamisku sprite animāciju un ritināšanu fonus.
Visu spraudni nodrošina JavaScript un HTML / CSS; nav nepieciešama Flash vai cita backend valoda. Dokumentācijas lapa ir vienkārša, bet pietiekami, lai sāktu darbu. Izstrādātājiem ir daudz paraugu demonstrāciju, kurus varat lejupielādēt arī.
Pašreizējā stabila versijas versija ir 0.6.1, kas ir mēreni atjaunināta. Animācijas efekti ir saderīgi ar Opera, Chrome, Safari, Firefox un Internet Explorer 6+. Arī jebkuras viedtālruņu pārlūkprogrammas, kas darbojas ar Android vai iOS, ir pilnīgi piemērotas.
FatPixels
Šis ir spēcīgs atklātā pirmkoda sprite skripts, ko izstrādājis Matías Martínez. FatPixels tikai prasa, lai jQuery bibliotēka darbotos pareizi. Lai gan es teiktu, ka Spritely ir sarežģītāka animācijas bibliotēka, FatPixels tīmekļa vietņu izstrādātāju tirgū ir niša..
Jūs varat viegli izveidot animētus sprites, neradot .gif attēlu. Faktiski, jūs varēsiet eksportēt visus attēlus kā .jpg, un izveidojiet sprites rindu uz vienu ilgu animētu efektu. FatPixels mājaslapai ir lieliska demonstrācija kopā ar jQuery koda bloku, ko izmanto, lai to izveidotu. Ja jūs meklējat kaut ko vieglu, lai animētu jūsu sprites, tad FatPixels ir ceļš.
SmartSprites
Lietojot vārdu "sprite", tam ir dažas atšķirīgas nozīmes. Videospēļu rakstzīmes vai animēti sprites parasti ir mazāki attēli, kas attēloti ar ļoti maziem pikseļiem. Tomēr, CSS, termins sprite attiecas uz vienu attēlu, kas darbojas kā ikonas jūsu vietnei.
Iemesls, kādēļ jums vajadzētu izmantot vienu sprite lapu atsevišķu attēlu vietā, ir samazināt servera resursus. Tas ir daudz ātrāk, lai lejupielādētu lielāku attēlu ar visām jūsu ikonām, nevis daudziem mazākiem, bet atsevišķiem attēliem. Bet visu šo ikonu apvienošana Photoshop var būt reāla problēma; pat ne vienmēr ir grūti, tikai atkārtoti un laikietilpīgi.
Par laimi SmartSprites CSS ģenerators ir lielisks resurss šai situācijai. Jūs varat ātri ģenerēt pikseļu perfektu lapu ar visiem jūsu attēliem GIF vai PNG formātā. Turklāt jūs varat ātri noteikt, ko jūsu fona stāvoklis x / y koordinātēm jābūt katrai atsevišķai ikonai.
Squidfingers BG modeļi
Labas atkārtojošas fona attēlus ir ļoti grūti veidot. Tas var aizņemt vairākas dienas, pirms varat izveidot bezšuvju attēlus. Bet par laimi ir pieejami resursi, lai lejupielādētu bezmaksas fona flīzes.
Squidfingers Patterns galerija ir viens no šādiem resursiem. Tā piedāvā vairāk nekā 150 dažādus pikseļu stila modeļus, kurus varat lejupielādēt un izmantot savos projektos. Stili ir ļoti dinamiski un krāsaini, un šādai šķirnei tas ir lielisks resurss, lai saglabātu ērtu lietošanu. Lejupielādes saites ir .zip formātā, kas padara tos mazākus un vieglāk pārsūtīt starp datoriem.
Spritera resurss
Es nevaru pateikt pietiekami daudz lietas par The Spriters Resource. Tā ir tīmekļa vietne, kurā jūs varat meklēt, izmantojot visas dažādās spēļu sistēmas sprite loksnēm. Tie var ietvert kartes, ēkas, izvēlņu ekrānus, rakstzīmes, ikonas un diezgan daudz!
Tie ir bijuši tiešsaistē kopš 2001. gada, un videospēļu katalogs ir ievērojami pieaudzis. Ar TSR ir visa kopiena ar grafiskiem dizaineriem, kuri var izvilkt šos dažādos spēļu spēlētājus. Ja jūs interesē kāda veida videospēļu dizains vai tiešsaistes fanīti, jums būs jāpārbauda šī apbrīnojamā galerija.
Vēl interesantākas ir dažas no māsas tīmekļa vietnēm, kas radīja TSR. Spēļu fani arī palīdzēja izvilkt pamatstruktūras un padarīt rakstzīmju modeļus. Kopumā tas ir patiešām lieliska kopiena, kas ļoti atbalsta darbu ar sprites digitālajos mākslas darbos.
400 pikseļi
Šī ir tiešām atdzist tīmekļa lietojumprogramma, kas nenodrošina būtisku vērtību, bet tas noteikti ir veikls. 400 pikseļi ļauj izveidot pikseļu dokumentu tiešsaistē un saglabāt attēlu savā tīklā. Šī vietne ir veidota līdzīgi kā miljonu dolāru mājas lapa ar katru attēlu, kas attēlo kvadrātveida bloku kopējā attēlā.
Jūs varat spēlēt aptuveni savā tīmekļa saskarnē, radot patiešām dīvainus mākslas darbus. Tas nav kaut kas, ko jūs uzreiz paņemsiet, bet tas ir jautri spēlēt, kad jūs to piekārt. Un tas ir jauks rīks, ar kuru var strādāt no jebkura datora, kuram ir piekļuve internetam.
Galvenais rezultāts
Līdzīgā veidā, kā 400 pikseļi, jūs varat izmantot Major Output kā personīgo tiešsaistes studiju pikseļu darbiem. Tas joprojām ir agrīnā attīstības stadijā, bet visas galvenās lietotāju funkcijas jau ir pieejamas. Jūs varat reģistrēties bezmaksas kontam un sākt tūlītēju pikseļu veidošanu.
Katrs attēls tiek glabāts lokāli to serveros, kurus varat pārlūkot tīmekļa vietnēs un forumos. Daudzi attēli ir pieejami sabiedrībai, un jūs varat tos pārbaudīt, noklikšķinot caur dažādiem autoriem vai tagiem. Ir arī meklēšanas lodziņš, bet es uzskatu, ka meklēšanas rezultātu kvalitāte ne vienmēr ir lieliska.
Galvenais produkts, šķiet, ir vēl viens kopienas rīks, kas ir jautri uzzināt, bet, iespējams, nevar piedāvāt daudz izglītības vērtību pikseļu māksliniekiem.
Pamācības
Tagad, kad jums ir resursi, apskatīsim daudzu izglītības centru sniegtos konsultācijas un noderīgus emuārus, kas izkaisīti visā internetā. Esmu izveidojis nelielu, patiešām ērtu komplektu pikseļu mākslas konsultācijas iesācējiem un vidējiem dizaineriem. Daudzas no šīm apmācībām ir vērstas uz Adobe Photoshop, bet jūs varat sekot līdzi gandrīz jebkuram progresīvam attēla redaktoram.
Derek yu Pixel Sprite apmācība
Acīmredzot ir desmitiem simtu pikseļu sprite konsultāciju par Google, bet šī konkrētā apmācība par Derek Yu mājas lapā iet cauri daudziem dažādiem soļiem, lai izglītotu, kā jūs izveidojat pikseļu sprites. Liela daļa procesa ir pilnveidota un izskaidrota tādā veidā, kas ļauj iesācējiem ātri pāriet uz darbību.
Videospēļu fani mīl šo pamācību, jo jūs saņemsiet aizkulisēm, lai apskatītu šīs īpašās grafikas. Es mīlu atrast tīmekļa vietnes izkārtojumu ar videospēļu pikseļu mākslas darbu, kas ir aizpildīts visā dizainā. Tas nodrošina unikālu nostalģijas sajūtu, un tas ir kaut kas, ko jūs nekur neredzat. Ikviens, kas vēlas izveidot savu pikseļu sprites jebkāda iemesla dēļ, var sākt Derek 10 soļu apmācības sēriju.
Photoshop konfigurēšana Pixel Art autoram Brandon Treb
Šeit ir vēl viena ideāla apmācība, kas vērsta uz iesācējiem pikseļu mākslas jomā. Blogu raksta Brandon Treb, kurš ir fantastisks dizainers un mobilais attīstītājs. Šajā detalizētajā rokasgrāmatā par Photoshop mākslu var atrast visu veidu noderīgu informāciju.
Jums ir jāzina, kā iestatīt preferences Photoshop, lai jūsu pikseļu darbi nebūtu neērti vai zaudētu kvalitāti, eksportējot. Jums var būt pārsteigts, uzzinot, ka daudz pielāgojumu ir nepieciešams, lai tiešām iegūtu jauku attēla kvalitāti.
Rasela Tāta zīmēšanas ar roku izstrādātie pikseļi
Šeit ir vēl viens pārsteidzošs apmācība, kas ir pilna ar roku zīmētas pikseļu mākslas metodēm Photoshop. Šī pikseļu mākslas metožu kolekcija ir vienkārši pārsteidzoša. Ikviens, kas caur saturu izspiež, visticamāk, atradīs kaut ko, ko viņi iepriekš nebija zinājuši.
Ir detalizēti paskaidrojumi par tekstūras izveidi zālē un mizā; arī par to, kā klonēt pikseļu darbus, kurus esat izdarījis, un pārvērst to par ikonu dizainu. Tas viss nāk uz praksi un precizitāti katrā jomā. Tie, kas ir patiesi kaislīgi, to aizturēs un dažu mēnešu laikā atradīs stabilu tehniku pikseļu stila idejām.
CSS / JS spēļu portfeļa izveide no Daniel Sternlicht
Šeit ir viena apmācība no Smashing Magazine par to, kā kodēt spēļu portfeli ar CSS / JS, kas izmantoja daudzus sprites no Pokemon spēļu sērijas. Autors ir Daniels Sternlicht, kurš arī vada savu personīgo portfeli šajā spēļu izkārtojumā.
Tīmekļa vietne darbojas kā RPG pasaule, kurā jūs kontrolējat rakstzīmju sprītu ar tastatūru. Jūs varat ievadīt dažādas ēkas, kas pēc tam parādīs informāciju, piemēram, kontaktinformāciju un portfeļa ierakstus.
Es patiesi mīlu šo pamācību, un tas ir aizraujošs veids, kā apvienot pikseļu darbu ar tīmekļa vietnes izstrādi. Pat ja jums nav daudz informācijas par JavaScript, tas joprojām ir ļoti interesants raksts. Es esmu izgājis cauri dažiem kodiem un man jāpiedāvā milzīgs komplimentu Danam par šādu radošu pamācību. Jebkura Pokemon fanātiķi noteikti iemīlēs savas idejas.
Izometriskie pikseļu apmācības pēc Matriax
Šī mazā tīmekļa vietne gas13.ru ir dažas no ekscentriskākajām un profesionālākajām pikseļu apmācībām, ko esmu redzējis. Izometriskā baseina apmācībā jūs iepazīstaties ar spīdīgu bloku veidošanu un ūdens struktūru. Turklāt jūs atradīsiet resursus visiem pārējiem izometriskajiem pikseļu rādījumiem sānjoslā.
Ir tik daudz ko mācīties: jūs varat izveidot veikalu, pikseļu sprite vai pat detalizētas videospēļu un vietņu fonu tekstu. Es neesmu pārliecināts, vai šis autors joprojām aktīvi publicē saturu, bet esošie raksti ir vairāk nekā pietiekami, lai iesācējiem apgūtu pamatus.
Studija Purloux Pixel Tutorial (Kevin Chaloux)
Tagad, kad es uzskaitīšu visas labākās pikseļu apmācības, es noteikti iekļaušu šo tiesības uz sākumu. Šī visa apmācība par pikseļu darbiem ir lielisks turpinājums jauniem cilvēkiem. Jums tiks ieviests jau no paša sākuma, lai atvērtu pirmkoda programmatūru, piemēram, GIMP vai Paint.NET.
Jūs uzzināsiet, kā eksportēt attēlus un daudzus pikseļu dizaina aspektus, piemēram, dithering un anti-aliasing. Ir tik daudz dažādu metožu, kā sekot līdzi. Jums vajadzētu uzņemt dažas dizaina idejas, apskatot retro 8-bitu un 16 bitu video spēles.
Autors Kevin Chaloux kreditē Derek Yu pikseļu sprite pamācību (minēts iepriekš) un norāda, ka tas ir iedvesmas avots, kad viņš pirmo reizi sāka darbu.
Izveidojiet labāku Favicon By Kayla Knight
Web dizaineri bieži aizmirst, ka favicon (iecienītākās ikonas) attēls ir milzīga jebkuras zīmola shēmas daļa. Visas populārākās tīmekļa vietnes var atpazīt pēc 16 x 16 favicon. Strādājot ar šādu ierobežotu audeklu, jūs esat spiesti rīkoties ar pikseļu blīviem mākslas darbiem un ilustrācijām. Šī OXP favicon apmācība sniedz lielisku darbu, apvienojot abas idejas.
No šī uzdevuma jūs varat saprast, kāpēc pikseļu māksla ir tik izdevīga, veidojot favikonu. Ir arī rīki un cietas metodes .ico faila eksportēšanai. Ir iekļauts arī neliels populāro favikonu vitrīna no visas Web.
Šis ir vēl viens resurss, kas, manuprāt, var dot labumu visiem tīmekļa dizaineriem. Tas dod iespēju izglītot sevi par favikona izveidi un strādāt ar stingriem pikseļu ierobežojumiem.
Vitrīnas galerija
Es gribētu slēgt rakstu ar jauku galeriju ar pikseļu dizainu. Esmu iekļāvis 40 dažādu izkārtojumu piemērus ar daudzām dažādām mākslas vīzijām. Pixelated mākslas darbu tendence tikai sāk parādīties galvenajās tīmekļa vietnēs. Es ceru, ka šī atšķirīgā pikseļu vietņu vitrīna var piedāvāt iedvesmas avotu tīmekļa izstrādātājiem visā pasaulē.
Earthbound Central
PixelJam
Red Rokk interaktīvais mārketings
eBoy emuārs
Tamago Pixel
pixelHugger
Pixel Deviant grafika
8 bitu HTML5 audekla cikls
Daniel Sternlicht
Trollu armija
BlockHead Pix lietotne
madPXL
supertott 2.0
ClassicGaming
RPG rīkkopa konsultācijas
Pilsētas radītājs
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Smilšu kaste
Wong kungs
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Virs papēžiem
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Studio
Adept Vormgeving
Pixel muzejs
QuickHoney
Polpo.net
spiv.cz
4 Īsta mīkla
