Site-uri web bazate pe pixeli Resurse, tutoriale și exemple

Proiectarea unei interfețe web folosind o opera de artă în stil pixel este relativ obscur în comparație cu tendințele moderne. Chiar trebuie să săpați o grămadă de site-uri pe Internet pentru a găsi câteva exemple bune; este greu, dar nu imposibil.

În acest articol am colectat o mega-compilație a tot ceea ce veți avea nevoie pentru proiectarea site-urilor bazate pe pixeli. Există zeci de tutoriale sănătoase atât pentru începători, cât și pentru experți. Am inclus, de asemenea, câteva instrumente utile și resurse pe care le puteți juca pentru a explora subiectul în continuare. Dacă sunteți cu toții interesați de grafica jocurilor video sau artwork pixel izometric, atunci vă va plăcea această colecție.

Resurse

Acestea sunt câteva resurse de dezvoltare unice pentru scripturile web și pentru grafica digitală. Pe masura ce incercati sa creati layout-uri de site-uri pixel, nu veti simti mereu nevoia de a urma totul la punct. Această colecție de resurse bazate pe web poate foarte bine să vină din timp util și din nou.

Spritely

M-am obișnuit să lucrez cu codul open source. De aceea găsirea unui plugin jQuery ca Spritely este întotdeauna o situație interesantă. Puteți include acest script în site-ul dvs. pentru animații rapide dinamice sprite și fundaluri de defilare.

Întreg plugin-ul este alimentat de JavaScript și HTML / CSS; nu este nevoie de Flash sau de alte limbi de backend. Pagina de documentare este simplă și suficientă pentru a începe. Dezvoltatorii au o mulțime de demo-uri de probă pe care le puteți descărca, de asemenea.

Actuala versiune stabilă de lansare este 0.6.1, care este moderat actualizată. Efectele de animație sunt compatibile cu Opera, Chrome, Safari, Firefox și Internet Explorer 6+. De asemenea, orice browser de smartphone care rulează pe Android sau iOS ar trebui să funcționeze perfect.

FatPixels

Acesta este un puternic script sprite open source dezvoltat de Matías Martínez. FatPixels cere ca biblioteca jQuery să funcționeze corect. Deși aș spune că Spritely este o bibliotecă de animație mai complexă, FatPixels are o nișă pe piața dezvoltatorilor web.

Puteți crea ușor sprite animate fără a crea o imagine .gif. De fapt, veți putea exporta toate imaginile ca .jpg și creați o coadă de sprites pentru un efect de animație lung. Pagina de pornire FatPixels are o demonstrație excelentă, împreună cu blocul de cod jQuery folosit pentru a-l construi. Dacă căutați ceva ușor pentru a-ți anima spritele, atunci FatPixels este calea de parcurs.

SmartSprites

Când folosiți cuvântul "sprite", există câteva semnificații diferite. Caracterele de joc video sau spritele animate sunt în general imagini mai mici redate cu foarte puțini pixeli. Cu toate acestea, în CSS, termenul sprite se referă la o singură imagine care acționează ca o foaie de icoane pentru site-ul dvs. Web.

Motivul pentru care ar trebui să folosiți o singură foaie de sprite în loc de imagini individuale este să reduceți resursele serverului. Este mult mai rapid să descărcați o imagine mai mare care ține toate pictogramele în loc de multe imagini mai mici, dar separate. Dar punerea tuturor acestor icoane în Photoshop poate fi un adevărat hassle; nici măcar neapărat dificil, pur și simplu repetitiv și consumator de timp.

Din fericire, Generatorul CSS SmartSprites este o resursă fantastică pentru această situație. Puteți genera rapid o foaie perfectă cu pixel, cu toate imaginile în format GIF sau PNG. În plus, puteți determina rapid ceea ce dvs. background-position coordonatele x / y ar trebui să fie pentru fiecare pictogramă individuală.

Squidfingers BG Modele

Proiectarea unui set bun de imagini de fundal repetate este foarte dificilă. Este posibil să dureze câteva zile înainte de a crea imagini fără cusur. Dar, din fericire, există resurse online pentru descărcarea de plăci de fundal gratis.

Galeria Squidfingers Patterns este o astfel de resursă. Acesta oferă peste 150 de modele diferite în stil pixel pe care le puteți descărca și utiliza pe proiectele dvs. Stilurile sunt foarte dinamice și pline de culoare, iar pentru o astfel de varietate, este o resursă excelentă pentru a fi la îndemână. Legăturile de descărcare sunt în format .zip, ceea ce le face mai mici și mai ușor de transferat între computere.

Resursa Spriterilor

Nu pot spune suficiente lucruri minunate despre Resursele Spriters. Este un site unde puteți căuta prin toate sistemele de jocuri diferite pentru foi de sprite. Acestea pot include hărți, clădiri, ecrane de meniu, sprite de caractere, icoane și ceva aproape nimic!

Acestea au fost online din 2001, iar catalogul de jocuri video a crescut foarte mult. Există o întreagă comunitate în spatele TSR cu designeri grafici care pot rupe aceste diferite sprite de jocuri. Dacă sunteți interesat de orice formă de proiectare a jocurilor video sau fanilor online, va trebui să verificați această galerie uimitoare.

Chiar mai interesante sunt câteva site-uri sora care au dat naștere la TSR. Fanii de jocuri au ajutat, de asemenea, la ruperea texturilor de bază și la modelarea modelelor de caractere. În ansamblu, este o comunitate foarte bună, care susține foarte mult lucrul cu sprite în opera digitală.

400 de pixeli

Aceasta este o aplicație web foarte interesantă, care nu oferă o valoare esențială, dar este cu siguranță curată. 400 de pixeli vă permite să creați un document pixel online și să stocați imaginea în grilă. Site-ul este proiectat într-o manieră similară cu cea a paginii principale de milioane de dolari, fiecare imagine având un bloc pătrat în imaginea generală.

Puteți juca în jur în interfața lor web creând o lucrare cu adevărat gooasă. Nu este ceva pe care îl veți ridica imediat, dar este distractiv să jucați odată ce ați luat-o. Și este un instrument frumos cu care puteți lucra de la orice computer care are acces la Internet.

Producția majoră

Într-o voce similară cu cea a 400 de pixeli, puteți utiliza principalele ieșiri ca un studio online personalizat pentru o lucrare de pixeli. Este încă în stadiile incipiente de dezvoltare, însă toate funcționalitățile de bază ale utilizatorilor sunt deja disponibile. Vă puteți înregistra pentru un cont gratuit și puteți începe să creați arta pixelului imediat.

Fiecare imagine este stocată local pe serverele pe care le puteți conecta pe site-uri și forumuri. Multe dintre imagini sunt deschise publicului și le puteți verifica făcând clic pe diferite autori sau etichete. Există, de asemenea, o casetă de căutare, dar simt că calitatea rezultatelor căutării nu este întotdeauna minunată.

Producția majoră pare a fi un alt instrument comunitar care este distractiv de știut, dar probabil nu poate oferi o valoare educațională mult mai mare pentru artiștii pixeli.

Tutoriale

Acum, că aveți resurse, să aruncăm o privire la tutorialele oferite de numeroasele centre educaționale și posturile utile de blog difuzate pe Internet. Am pus un mic set de lucruri foarte la îndemână tutoriale artă pixel pentru începători și designeri intermediari. Multe dintre aceste tutoriale se îndreaptă spre Adobe Photoshop, dar puteți urmări împreună cu aproape orice editor de imagini avansate.

Tutorialul Pixel Sprite de Derek yu

Evident, există zeci de sute de tutori pixeli-sprite pe Google, dar acest tutorial special pe site-ul lui Derek Yu trece prin mai mulți pași diferiți în educarea modului în care creați sprite de pixeli. O mare parte a procesului a fost simplificată și explicată într-un mod care permite începătorilor să sară repede în acțiune.

Fanii jocurilor video se vor bucura de acest tutorial, deoarece veți obține o privire în spatele scenei la crearea acestor grafice specifice. Îmi place să găsesc un aspect al site-ului cu o grafică de pixel în joc, plină de design. Oferă un sentiment unic de nostalgie și este ceva ce nu găsiți peste tot. Oricine caută să-și creeze propriile sprite de pixeli, indiferent de motiv, poate să înceapă în seria tutorialului în 10 pași a lui Derek.

Configurarea Photoshop pentru Pixel Art de Brandon Treb

Iată un alt tutorial perfect orientat spre începători în domeniul artei pixelilor. Postarea pe blog este scrisă de Brandon Treb, care este un designer fantastic și dezvoltator mobil. Puteți găsi tot felul de informații utile în acest ghid detaliat pentru arta Photoshop pe bază de pixeli.

Trebuie să știți cum să configurați preferințele în Photoshop, astfel încât imaginile dvs. de pixel să nu pară ciudate sau să piardă calitate atunci când exportați. S-ar putea să fiți surprinși să aflați că sunt necesare multe personalizări pentru a obține într-adevăr o calitate frumoasă a imaginii.

Desenarea pixelilor realizați manual de Russell Tate

Iată un tutorial uimitor, plin de tehnici pentru arta pixelului desenat manual în Photoshop. Această colecție de tehnici de artă pixel este pur și simplu uimitoare. Oricine scapă prin conținut va găsi cel mai probabil ceva pe care nu l-au cunoscut înainte.

Există explicații detaliate despre crearea texturii pe iarbă și scoarță; de asemenea, despre cum să clonați o lucrare de pixeli pe care ați desenat-o și să o transformați într-un design icoanic. Totul se reduce la practică și precizie în fiecare zonă. Cei care sunt cu adevarat pasionati se vor agata si in cateva luni vor gasi o tehnica solida pentru ideile lor in stil pixel.

Dezvoltarea unui portofoliu de jocuri CSS / JS de Daniel Sternlicht

Iată un tutorial de la Smashing Magazine despre cum să codificați un portofoliu de jocuri cu CSS / JS care a folosit multe sprite din seria de jocuri Pokemon. Autorul este Daniel Sternlicht, care, de asemenea, se întâmplă să-și folosească portofoliul personal pe acest joc bazat pe joc.

Site-ul Web acționează ca o lume RPG în care controlați o caracteristică sprite cu tastatura. Puteți introduce diferite clădiri, care apoi aduc informații, cum ar fi detaliile de contact și intrările din portofoliu.

Îmi place cu adevărat acest tutorial și este un mod interesant de a combina operele de artă pixel cu dezvoltarea site-ului. Chiar dacă nu știți prea multe despre JavaScript, acesta este încă un articol foarte interesant. Am trecut printr-o parte din cod și trebuie să-i dau lui Dan un complimente extraordinare pentru un astfel de tutorial creativ. Orice fanatici Pokemon se vor indragosti cu siguranta de ideile sale.

Testele izometrice de pixeli de Matriax

Acest site mic gas13.ru are unele dintre cele mai excentrice și profesionale tutoriale pixel am văzut vreodată. În tutorialul izometric al piscinei, sunteți prezentat pentru a crea blocuri lucioase și textura apei. În plus, veți găsi resurse pentru toate celelalte tacturi pixel izometrice din bara laterală.

Există atât de mult de învățat: puteți proiecta o vitrină, o sprite pixel sau chiar texturi detaliate pentru jocuri video și fundaluri ale site-ului web. Nu sunt sigur dacă autorul respectiv publică în continuare conținut activ, dar articolele existente sunt mai mult decât suficiente pentru ca începătorii să învețe elementele de bază.

Studio Purloux Pixel Tutorial De Kevin Chaloux

Acum, când listaz toate cele mai bune tutoriale pixel, aș include cu siguranță acest drept spre început. Acest intreg tutorial al picturii artistice este un articol de urmarire extraordinar pentru incepatori. Veți fi introdus încă de la început software-ul de tip open source, cum ar fi GIMP sau Paint.NET.

Veți învăța cum să exportați imaginile și multe aspecte ale designului pixelilor, cum ar fi dithering și anti-aliasing. Există atât de multe tehnici diferite de urmat împreună cu. Ar trebui să ridicați câteva idei de design prin căutarea în jocuri video retro 8-biți și pe 16 biți.

Autorul Kevin Chaloux acordă un tutorial pentru pixel sprite al lui Derek Yu (enumerat mai devreme) și menționează că acesta este o sursă de inspirație când a început pentru prima oară.

Creați un Favicon mai bun de Kayla Knight

Deseori, designerii web uită că o imagine favicon (imagine preferată) reprezintă o parte importantă a oricărei scheme de branding. Toate site-urile cele mai populare pot fi recunoscute de către fikicon-ul lor 16 × 16. Când lucrați cu o pânză atât de limitată, sunteți forțat să vă ocupați de lucrări de artă și ilustrații dense în pixeli. Acest tutorial favicon de la OXP face o treabă excelentă de a combina ambele idei.

Din acest tut, puteți înțelege de ce arta pixelului este atât de benefică atunci când creați favicoane. Există, de asemenea, unelte și tehnici solide pentru exportul unui fișier .ico. De asemenea, este inclusă o mică prezentare de favicoane populare din jurul Web-ului.

Aceasta este o altă resursă pe care o simt pentru toți designerii web. Este posibil să vă educați pe crearea unui favicon și să lucrați cu limite stricte de pixeli.

Galeria de prezentare

Aș vrea să închid articolul cu o galerie frumoasă de designuri de site-uri în stil pixel. Am inclus 40 de exemple de diferite machete cu multe viziuni artistice diverse. Tendința de artă grafică pixelată abia începe să redevină pe site-urile web mainstream. Sper că această prezentare distinctivă a site-urilor cu pixeli poate oferi o sursă de inspirație pentru dezvoltatorii web din întreaga lume.

Earthbound Central

PixelJam

Red Rokk Interactive Marketing

eBoy Blog

Tamago Pixel

pixelHugger

Pixel Deviant Graphics

Ciclu de canvas pe 8 biți HTML5

Daniel Sternlicht

Armata Trolls

Aplicația BlockHead Pix

madPXL

supertott 2.0

ClassicGaming

RPG Tutoriale Toolkit

Creatorul orașului

Final Fantasy XIII-2

KawaiiHannah Pixel Art

Nisipul

Dl Wong

Pixel Freak

Nasc Pixel Art

Paxjah

FoolsTown

Până peste cap

LOVEPIXEL

Henk Nieborg

Iriescope

iamnotadoll

SweetPIX

Megapont

Mini Metropolis

Hayo van Reek

Studio Pixeltemple

Adept Vormgeving

Pixel Museum

QuickHoney

Polpo.net

spiv.cz

4 Aluat real