Pixel-baserede hjemmesider Ressourcer, øvelser og eksempler

Design af en webgrænseflade ved hjælp af pixel-stil-illustrationer er forholdsvis uklart sammenlignet med moderne tendenser. Du skal virkelig grave gennem en håndfuld websteder på internettet for at finde nogle gode eksempler; det er svært, men ikke umuligt.

I denne artikel har jeg samlet en mega-kompilering af alt hvad du skal bruge til pixelbaseret website design. Der er snesevis af sunde tutorials for både begyndere og eksperter. Jeg har også medtaget nogle praktiske værktøjer og ressourcer, som du kan leve med for at udforske emnet yderligere. Hvis du overhovedet er interesseret i video game grafik eller isometrisk pixel kunstværk, så vil du elske denne samling.

Ressourcer

Disse er nogle unikke udviklingsressourcer til webscripts og digital grafik. Som du dykker i at skabe pixel-website layouter, vil du ikke altid føle behovet for at følge alt til prikken. Denne samling af web-baserede ressourcer kan meget vel komme til nytte gang på gang.

spritely

Jeg er vant til at arbejde med open source-kode. Derfor er det altid en spændende situation at finde en jQuery-plugin som Spritely. Du kan inkludere dette script til din hjemmeside for hurtig dynamisk sprite animation og rullende baggrunde.

Hele plugin'et drives af JavaScript og HTML / CSS; ingen Flash eller noget andet backend sprog er påkrævet. Dokumentationssiden er enkel nok til at komme i gang. Udviklerne har masser af prøve demoer, som du også kan downloade.

Den nuværende stabile udgivelsesversion er 0,6.1, som er moderat opdateret. Animationseffekterne er kompatible med Opera, Chrome, Safari, Firefox og Internet Explorer 6+. Også enhver smartphone-browsere, der kører på Android eller iOS, skal gøre perfekt.

FatPixels

Dette er et kraftfuldt open source sprite script udviklet af Matías Martínez. FatPixels kræver kun, at jQuery-biblioteket kører korrekt. Selv om jeg vil sige, at Spritely er et mere komplekst animationsbibliotek, har FatPixels en niche på markedet for webudviklere.

Du kan nemt bygge animerede sprites uden at skabe et .gif billede. Faktisk kan du eksportere alle billeder som .jpg, og oprette en kø af sprites til en lang animeret effekt. FatPixels hjemmeside har en fremragende demo sammen med den blok af jQuery-kode, der bruges til at opbygge den. Hvis du leder efter noget let at animere dine sprites, så er FatPixels vejen at gå.

SmartSprites

Når du bruger ordet "sprite" er der et par forskellige betydninger for det. Videospil eller animerede sprites er generelt mindre billeder gengivet med meget få pixels. Men i CSS refererer udtrykket sprite til et enkelt billede, der fungerer som et ark med ikoner til dit websted.

Grunden til at du skal bruge et enkelt spriteark i stedet for individuelle billeder, er at skære ned på serverressourcerne. Det er meget hurtigere at downloade et større billede med alle dine ikoner i stedet for mange mindre, men separate billeder. Men at sætte alle disse ikoner sammen i Photoshop kan være en reel besvær; ikke engang nødvendigvis svært, bare gentagne og tidskrævende.

Heldigvis er SmartSprites CSS Generator en fantastisk ressource til denne situation. Du kan hurtigt generere et pixel-perfekt ark med alle dine billeder i enten GIF- eller PNG-format. Derudover kan du hurtigt bestemme, hvad din baggrund-stillingen x / y koordinater skal være for hver enkelt ikon.

Squidfingers BG Patterns

At designe et godt sæt gentagende baggrundsbilleder er meget vanskeligt. Det kan tage dage før du kan oprette sømløse billeder. Men heldigvis er der ressourcer online til download af gratis baggrundsfliser.

Galleriet Squidfingers Patterns er en sådan ressource. Det tilbyder over 150 forskellige pixel-stil mønstre, som du kan downloade og bruge på dine projekter. Stilene er meget dynamiske og farverige, og for en sådan sort er det en glimrende ressource at holde sig godt til. Downloadlinkene er i .zip-format, hvilket gør dem mindre og lettere at overføre mellem computere.

Spriters Resource

Jeg kan ikke sige nok gode ting om The Spriters Resource. Det er et websted, hvor du kan søge gennem alle de forskellige spil systemer til sprite ark. Disse kan omfatte kort, bygninger, menuskærme, karaktersprites, ikoner og stort set alt!

De har været online siden 2001 og kataloget af videospil er vokset enormt. Der er et helt fællesskab bag TSR med grafiske designere, der kan rippe disse forskellige spil sprites. Hvis du er interesseret i enhver form for video game design eller online fansites, skal du tjekke dette fantastiske galleri.

Endnu mere interessant er nogle af søstersiderne, der skabte TSR. Gaming fans har også hjulpet med ripping af basisteksturer og gengivelse af tegnmodeller. Alt i alt er det et rigtig godt samfund, der er meget støttende til at arbejde med sprites i digital kunst.

400 pixel

Dette er en virkelig cool web app, som ikke giver en væsentlig værdi, men det er helt sikkert pænt. 400 Pixels giver dig mulighed for at oprette et pixel dokument online og gemme billedet i deres net. Webstedet er designet på samme måde som million dollar hjemmeside med hvert billede optager en firkantet blok i det overordnede billede.

Du kan spille rundt i deres webgrænseflade og skabe nogle virkelig guffe billeder. Det er ikke noget, du vil hente med det samme, men det er sjovt at lege med, når du får fat i det. Og det er et godt værktøj, som du kan arbejde med fra enhver computer, der har internetadgang.

Major Output

På samme måde som 400 Pixels kan du bruge Major Output som en personlig online-studie til pixel kunstværk. Det er stadig i de tidlige stadier af udvikling, men al den grundlæggende brugerfunktionalitet er allerede tilgængelig. Du kan tilmelde dig en gratis konto og begynde at lave billedkunst med det samme.

Hvert billede gemmes lokalt på deres servere, som du kan hotlink på hjemmesider og fora. Mange af billederne er åbne for offentligheden, og du kan tjekke dem ud ved at klikke på forskellige forfattere eller tags. Der er også en søgefelt, men jeg mener, at kvaliteten af ​​søgeresultater ikke altid er god.

Major Output virker som et andet fællesskabsværktøj, som er sjovt at vide om, men sandsynligvis kan ikke tilbyde meget uddannelsesværdi for billedkunstnere.

Vejledninger

Nu hvor du har ressourcerne, lad os tage et kig på de vejledninger, der tilbydes af de mange uddannelsescentre og nyttige blogindlæg spredt over hele internettet. Jeg har sammensat et lille sæt rigtig praktisk pixel art tutorials til begyndere og mellemliggende designere. Mange af disse tutorials gear fokuserer mod Adobe Photoshop, men du kan følge med næsten enhver avanceret billedredaktør.

Pixel Sprite Tutorial af Derek yu

Selvfølgelig er der titusindvis af pixel-sprite tutorials på Google, men denne særlige tutorial på Derek Yu's hjemmeside går gennem mange forskellige trin i at uddanne, hvordan du opretter pixel sprites. Meget af processen er blevet strømlinet og forklaret på en måde, der gør det muligt for begyndere hurtigt at springe ind i handlingen.

Videospil fans vil elske denne tutorial, da du får en bag-the-scenes kig på at skabe disse specifikke grafik. Jeg elsker at finde et website layout med video game pixel kunstværk strøget i hele designet. Det giver en unik følelse af nostalgi, og det er noget, du ikke finder overalt. Enhver, der ønsker at oprette deres egne pixel sprites, uanset årsagen, kan starte på Dereks 10-trins tutorial-serie.

Konfiguration af Photoshop til Pixel Art af Brandon Treb

Her er en anden perfekt tutorial rettet mod begyndere inden for pixel kunstværk. Blogindlægget er skrevet af Brandon Treb, som er en fantastisk designer og mobil udvikler. Du kan finde alle mulige nyttige oplysninger i denne detaljerede vejledning til pixelbaseret Photoshop-kunst.

Du skal vide, hvordan du konfigurerer præferencer i Photoshop, så din billedtekst ikke vises akavet eller taber kvalitet, når du eksporterer. Du kan blive overrasket over at lære meget tilpasning er nødvendig for virkelig at få en god billedkvalitet.

Tegning Håndlavede Pixels af Russell Tate

Her er en anden fantastisk tutorial fuld af teknikker til håndtegnet pixel kunst i Photoshop. Denne samling af pixel kunst teknikker er simpelthen forbløffende. Enhver, der skimmer gennem indholdet, vil sandsynligvis finde noget, de ikke havde kendt før.

Der er detaljerede forklaringer om at skabe tekstur på græs og bark; også om hvordan man kloner pixel-illustrationer, som du har tegnet og gør det til et ikondesign. Det hele kommer ned til praksis og præcision i alle områder. Dem, der er virkelig lidenskabelig, vil holde det igennem og inden for få måneder finde en solid teknik til deres pixel-stil ideer.

Udvikling af en CSS / JS Game Portfolio af Daniel Sternlicht

Her er en vejledning fra Smashing Magazine om, hvordan man kode en spilleportefølje med CSS / JS, som udnyttede mange sprites fra Pokemon-serien. Forfatteren er Daniel Sternlicht, der også sker med at køre sin personlige portefølje på dette spilbaserede layout.

Webstedet fungerer som en RPG-verden, hvor du styrer et tegnsprite med tastaturet. Du kan indtaste forskellige bygninger, som derefter frembringer oplysninger som kontaktoplysninger og porteføljeposter.

Jeg elsker virkelig denne tutorial, og det er en spændende måde at kombinere pixel kunstværk med hjemmeside udvikling. Selvom du ikke ved meget om JavaScript, er det stadig en super interessant artikel. Jeg har gennemgået nogle af koden og skal give enorme komplimenter til Dan for sådan en kreativ tutorial. Eventuelle Pokemon fanatikere vil helt sikkert forelske sig i hans ideer.

Isometric Pixel Tutorials Af Matriax

Denne lille hjemmeside gas13.ru har nogle af de mest excentriske og professionelle pixel tutorials, jeg nogensinde har set. I isometrisk pool-tutorial er du introduceret til at skabe skinnende blokke og vandtekstur. Derudover vil du finde ressourcer til alle de andre isometriske pixeltoppe i sidepanelet.

Der er så meget at lære: Du kan designe en butiksfront, pixel sprite eller endda detaljerede teksturer til videospil og hjemmeside baggrunde. Jeg er ikke sikker på, om denne forfatter stadig aktivt udgiver indhold, men de eksisterende artikler er mere end nok for begyndere til at lære det grundlæggende.

Studio Purloux Pixel Tutorial af Kevin Chaloux

Nu hvor jeg noterer alle de bedste pixel-tutorials, ville jeg helt sikkert medtage denne ret mod starten. Denne hele tutorial om pixel kunst er en god opfølgningsartikel til nybegyndere. Du vil blive introduceret fra begyndelsen til open source software som GIMP eller Paint.NET.

Du lærer at eksportere billeder og de mange facetter af pixeldesign som dithering og anti-aliasing. Der er så mange forskellige teknikker at følge med. Du bør hente nogle design ideer ved at kigge på retro 8-bit og 16-bit computerspil.

Forfatter Kevin Chaloux krediterer Derek Yu's pixel sprite tutorial (nævnt tidligere) og nævner at dette som inspirationskilde, da han først startede.

Opret en bedre favicon af Kayla Knight

Webdesignere glemmer ofte, at et favicon (favoritikon) billede er en stor del af enhver branding-ordning. Alle de mest populære hjemmesider kan genkendes af deres 16 × 16 favicon. Når du arbejder med et så begrænset lærred, er du nødt til at beskæftige dig med pixeltæt kunst og illustrationer. Denne favicon-tutorial fra OXP gør et fremragende arbejde med at kombinere begge ideer.

Fra denne tut kan du forstå, hvorfor pixel kunst er så gavnlig, når du opretter favicons. Der er også værktøjer og solide teknikker til eksport af en .ico-fil. Også inkluderet er en lille fremvisning af populære favikoner fra hele internettet.

Dette er en anden ressource, som jeg føler kan gavne alle webdesignere. Det giver dig mulighed for at uddanne dig selv på at skabe et favicon og arbejde med strenge pixelbegrænsninger.

Showcase Galleri

Jeg vil gerne lukke artiklen med et flot galleri af pixel-stil hjemmeside design. Jeg har medtaget 40 eksempler på forskellige layouter med mange forskellige kunstneriske visioner. Trenden med pixeleret kunstværk er kun lige begyndt at genvinde inden for almindelige hjemmesider. Jeg håber, at dette særprægede udstillingsvindue af pixelsteder kan tilbyde inspirationskilder til webudviklere over hele verden.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-bit HTML5 lærredscyklus

Daniel Sternlicht

Trollens hær

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit Tutorials

By Creator

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Sandkassen

Mr. Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Hovedet over hælene

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 rigtig dej