Pikselbaserte nettsteder Ressurser, opplæringsprogrammer og eksempler

Å designe et webgrensesnitt ved hjelp av pikselstilsartet er relativt uklar i forhold til moderne trender. Du trenger virkelig å grave gjennom en håndfull nettsteder på Internett for å finne noen gode eksempler; det er vanskelig, men ikke umulig.

I denne artikkelen har jeg samlet inn en mega-kompilering av alt du trenger for pixelbasert webdesign. Det er dusinvis av sunne opplæringsprogrammer for nybegynnere og eksperter. Jeg har også tatt med noen nyttige verktøy og ressurser som du kan leke med for å utforske emnet videre. Hvis du er interessert i videospillgrafikk eller isometrisk pikselkunst, vil du elske denne samlingen.

ressurser

Dette er noen unike utviklingsressurser for webskript og digital grafikk. Som du dykker på å skape pixel-websidelayouter, vil du ikke alltid føle behovet for å følge alt til prikken. Denne samlingen av nettbaserte ressurser kan veldig godt komme til nytte hver gang.

spritely

Jeg har blitt vant til å jobbe med åpen kildekode. Det er derfor å finne en jQuery-plugin som Spritely alltid er en spennende situasjon. Du kan inkludere dette skriptet på nettstedet ditt for rask dynamisk sprite animasjon og rullende bakgrunn.

Hele plugin er drevet av JavaScript og HTML / CSS; ingen Flash eller noen annen backend språk er nødvendig. Dokumentasjonssiden er enkel, men likevel nok til å komme i gang. Utviklerne har mange eksempler på demoer som du kan laste ned også.

Den nåværende stabile versjonen er 0.6.1 som er moderat oppdatert. Animasjonseffekter er kompatible med Opera, Chrome, Safari, Firefox og Internet Explorer 6+. Også alle smarttelefonbrowsere som kjører på Android eller iOS, burde gjøre perfekt.

FatPixels

Dette er et kraftig open source sprite script utviklet av Matías Martínez. FatPixels krever bare at jQuery-biblioteket kjører riktig. Selv om jeg vil si at Spritely er et mer komplisert animasjonsbibliotek, har FatPixels en nisje i markedet for webutviklere.

Du kan enkelt bygge animerte sprites uten å skape et .gif-bilde. Faktisk kan du eksportere alle bildene som .jpg, og lage en kø av sprites for en lang animert effekt. FatPixels hjemmeside har en utmerket demo sammen med blokken av jQuery-koden som brukes til å bygge den. Hvis du leter etter noe lett å animere dine sprites, så er FatPixels veien å gå.

SmartSprites

Når du bruker ordet "sprite", er det et par forskjellige betydninger for det. Videospilletegn eller animerte sprites er generelt mindre bilder gjengitt med svært få piksler. Men i CSS refererer begrepet sprite til et enkelt bilde som fungerer som et ark med ikoner for nettstedet ditt.

Grunnen til at du skal bruke et enkelt sprite-ark i stedet for individuelle bilder, er å kutte ned på serverressurser. Det er mye raskere å laste ned et større bilde med alle ikonene dine i stedet for mange mindre, men separate bilder. Men å sette alle disse ikonene sammen i Photoshop kan være en ekte problemfrihet; ikke engang nødvendigvis vanskelig, bare repeterende og tidkrevende.

Heldigvis er SmartSprites CSS Generator en fantastisk ressurs for denne situasjonen. Du kan raskt generere et piksel-perfekt ark med alle bildene dine i enten GIF- eller PNG-format. I tillegg kan du raskt bestemme hva din Bakgrunnen-stilling x / y koordinater bør være for hvert enkelt ikon.

Squidfingers BG Patterns

Å designe et godt sett med gjentatte bakgrunnsbilder er svært vanskelig. Det kan ta dager før du kan lage sømløse bilder. Men heldigvis er det ressurser online for å laste ned gratis bakgrunnsfliser.

Galleriet Squidfingers Patterns er en slik ressurs. Den tilbyr over 150 forskjellige piksel-stil mønstre som du kan laste ned og bruke på dine prosjekter. Stilene er veldig dynamiske og fargerike, og for en slik variasjon er det en utmerket ressurs for å holde seg grei. Nedlastingskoblingene er i .zip-format, noe som gjør dem mindre og enklere å overføre mellom datamaskiner.

Spriters Resource

Jeg kan ikke si nok gode ting om The Spriters Resource. Det er et nettsted der du kan søke gjennom alle de forskjellige spillesystemene for sprite ark. Disse kan inkludere kart, bygninger, menyskjermbilder, karaktersprites, ikoner og stort sett alt!

De har vært online siden 2001 og katalogen av videospill har vokst enormt. Det er et fellesskap bak TSR med grafiske designere som kan rippe disse forskjellige spillsprites. Hvis du er interessert i noen form for videospilldesign eller online fansites, må du sjekke ut dette fantastiske galleriet.

Enda mer interessant er noen av søstersidene som oppsto av TSR. Gaming fans har også hjulpet med å rive base teksturer og rendering karakter modeller. Totalt sett er det et veldig godt samfunn som er veldig støttende på å jobbe med sprites i digital kunst.

400 piksler

Dette er en veldig kul nett app som ikke gir en viktig verdi, men det er definitivt pent. Med 400 piksler kan du opprette et piksel dokument på nettet og lagre bildet i rutenettet. Nettstedet er utformet på samme måte som millioner dollar hjemmeside, med hvert bilde tar opp en firkant blokk i det overordnede bildet.

Du kan spille rundt i deres webgrensesnitt og skape noen virkelig dyster kunstverk. Det er ikke noe du vil plukke opp med en gang, men det er morsomt å leke med når du får tak i det. Og det er et fint verktøy som du kan jobbe med fra hvilken som helst datamaskin som har Internett-tilgang.

Major Output

På samme måte som 400 piksler kan du bruke Major Output som et personlig online studio for piksel kunstverk. Det er fortsatt i de tidlige utviklingsstadiene, men all kjernebrukerfunksjonalitet er allerede tilgjengelig. Du kan registrere deg for en gratis konto og begynne å lage pikselkunst med en gang.

Hvert bilde lagres lokalt på sine servere som du kan koble til på nettsteder og fora. Mange av bildene er åpne for publikum, og du kan sjekke dem ut ved å klikke gjennom forskjellige forfattere eller koder. Det finnes også en søkeboks, men jeg føler at kvaliteten på søkeresultatene ikke alltid er bra.

Major Output virker som et annet fellesskap verktøy som er morsomt å vite om, men sannsynligvis kan ikke tilby mye utdanning verdi for piksel kunstnere.

Guider

Nå som du har ressursene, la oss ta en titt på veiledningene fra de mange utdanningsentrene og nyttige blogginnlegg spredt over hele Internett. Jeg har satt sammen et lite sett veldig praktisk piksel kunst tutorials for nybegynnere og mellomstore designere. Mange av disse veiledningene fokuserer mot Adobe Photoshop, men du kan følge med nesten alle avanserte bildeditorer.

Pixel Sprite-opplæringen av Derek yu

Det er åpenbart at det er titalls hundrevis av piksel-sprite-opplæringsprogrammer på Google, men denne spesielle opplæringen på Derek Yus nettsted går gjennom mange forskjellige trinn i å utdanne hvordan du lager pikselpriter. Mye av prosessen har blitt strømlinjeformet og forklart på en måte som gjør at nybegynnere raskt kan hoppe inn i handlingen.

Videospillfans vil elske denne opplæringen siden du får en bak-scenen titt på å skape denne spesifikke grafikken. Jeg elsker å finne et nettsted layout med video spill piksel kunstverk strøket gjennom hele designet. Det gir en unik følelse av nostalgi, og det er noe du ikke finner overalt. Alle som ønsker å lage sine egne pixel sprites, uansett grunn, kan starte på Dereks 10-trinns opplæringsserie.

Konfigurere Photoshop for Pixel Art av Brandon Treb

Her er en annen perfekt opplæring rettet mot nybegynnere innen pixel kunstverk. Blogginnlegget er skrevet av Brandon Treb, som er en fantastisk designer og mobil utvikler. Du finner all slags nyttig informasjon i denne detaljerte veiledningen til pixelbasert Photoshop-kunst.

Du må vite hvordan du konfigurerer innstillinger i Photoshop, slik at bildene dine ikke vises ubehagelig eller mister kvalitet når du eksporterer. Du kan bli overrasket over å lære mye tilpasning er nødvendig for å virkelig få en fin bildekvalitet.

Tegning håndlagde piksler av Russell Tate

Her er en annen fantastisk opplæring full av teknikker for håndtegnet pixelkunst i Photoshop. Denne samlingen av pikselteknikk er rett og slett forbløffende. Alle som skinner gjennom innholdet, vil mest sannsynlig finne noe de ikke hadde kjent før.

Det er detaljerte forklaringer om å skape tekstur på gress og bark; også på hvordan du klonepiksler du har tegnet og gjør det til et ikondesign. Alt kommer ned til praksis og presisjon i alle områder. De som er virkelig lidenskapelige, vil holde seg igjennom og innen få måneder finne en solid teknikk for deres piksel-stil ideer.

Utvikling av en CSS / JS Game Portfolio av Daniel Sternlicht

Her er en opplæring fra Smashing Magazine om hvordan du kodes en spillportefølje med CSS / JS som benyttet mange sprites fra Pokemon-spillserien. Forfatteren er Daniel Sternlicht, som også skjer med å kjøre sin personlige portefølje på denne spillbaserte utformingen.

Nettstedet fungerer som en RPG-verden hvor du styrer et tegnsprite med tastaturet. Du kan skrive inn forskjellige bygninger som deretter gir opp informasjon som kontaktdetaljer og porteføljeoppføringer.

Jeg elsker virkelig denne opplæringen, og det er en spennende måte å kombinere piksel kunstverk med nettstedet utvikling. Selv om du ikke vet mye om JavaScript, er dette fortsatt en super interessant artikkel. Jeg har gått gjennom noen av koden og må gi enorm komplimenter til Dan for en slik kreativ opplæring. Eventuelle Pokemon fanatikere vil sikkert forelske seg i hans ideer.

Isometrisk Pixel Tutorials Av Matriax

Denne lille nettsiden gas13.ru har noen av de mest eksentriske og profesjonelle pikselopplæringene jeg noensinne har sett. I isometrisk bassengopplæringen er du introdusert for å skape skinnende blokker og vanntekstur. I tillegg finner du ressurser for alle de andre isometriske pixeltangene i sidepanelet.

Det er så mye å lære: du kan designe et butikkfront, pikselprite eller til og med detaljerte teksturer for videospill og nettstedbakgrunn. Jeg er ikke sikker på om denne forfatteren fortsatt publiserer innhold aktivt, men de eksisterende artiklene er mer enn nok for nybegynnere å lære det grunnleggende.

Studio Purloux Pixel opplæring av Kevin Chaloux

Nå som jeg viser alle de beste pikselopplæringene, vil jeg definitivt inkludere denne rett mot begynnelsen. Denne hele opplæringen på piksel kunstverk er en flott oppfølgingsartikkel til nybegynnere. Du vil bli introdusert fra begynnelsen til åpen kildekode programvare som GIMP eller Paint.NET.

Du lærer å eksportere bilder og de mange fasene av pikseldesign som dithering og anti-aliasing. Det er så mange forskjellige teknikker å følge med. Du bør hente opp noen designideer ved å se på retro 8-bits og 16-bits videospill.

Forfatter Kevin Chaloux krediterer Derek Yus pikselspriteopplæring (oppført tidligere) og nevner at dette som en kilde til inspirasjon da han først startet.

Lag en bedre favicon av Kayla Knight

Webdesignere glemmer ofte at et favicon (favorittikon) bilde er en stor del av et merkevareprogram. Alle de mest populære nettstedene kan gjenkjennes av deres 16 × 16 favicon. Når du jobber med et så begrenset lerret, er du nødt til å håndtere piksel-tett kunstverk og illustrasjoner. Denne favicon-opplæringen fra OXP gjør en utmerket jobb med å kombinere begge ideene.

Fra denne tut kan du forstå hvorfor pikselkunst er så gunstig når du lager favikoner. Det finnes også verktøy og solide teknikker for eksport av en .ico-fil. Inkludert er også et lite utstillingsvindu av populære favikoner fra hele verden.

Dette er en annen ressurs som jeg føler kan være til nytte for alle webdesignere. Det gir deg mulighet til å utdanne deg selv på å lage et favicon og arbeide med strenge pixelbegrensninger.

Showcase Gallery

Jeg vil gjerne lukke artikkelen med et fint galleri med pikselformede webdesign. Jeg har tatt med 40 eksempler på ulike layouter med mange ulike kunstneriske visjoner. Utviklingen av pixelert kunstverk er bare bare begynt å dukke opp igjen på vanlige nettsteder. Jeg håper dette distinkte utstillingsvinduet av piksletsider kan tilby en kilde til inspirasjon for webutviklere over hele verden.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

8-bit HTML5 lerretssyklus

Daniel Sternlicht

Trollens hær

BlockHead Pix App

madPXL

supertott 2.0

ClassicGaming

RPG Toolkit Tutorials

Byskaper

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Sandkassen

Mr. Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Hodestups

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 ekte deig