Ресурси, туторијали и примери засновани на пикел базама

Дизајнирање веб интерфејса који користи радове у пикселском стилу је релативно нејасно у поређењу са модерним трендовима. Стварно требате копати кроз неколицину веб страница на Интернету да бисте пронашли неке добре примјере; то је тешко али не и немогуће.

У овом чланку сам сакупио мега-компилација свега што вам је потребно за дизајн веб-локације засноване на пикселима. Постоје десетине здравих туторијала за почетнике и стручњаке. Такође сам укључио неке корисне алате и ресурсе које можете да играте да бисте даље истражили тему. Ако сте уопште заинтересовани за графику са видео играма или изометријске слике пиксела онда ће вам се свидети ова колекција.

Ресурси

Ово су неки јединствени развојни ресурси за веб скрипте и дигиталну графику. Док се бавите израдом изгледа веб-локације са пикселима, нећете увек осећати потребу да пратите све до тачке. Ова колекција веб-базираних ресурса може бити веома корисна изнова и изнова.

Спрители

Навикао сам се на рад са отвореним кодом. Зато је проналажење јКуери додатка као што је Спрители увек узбудљива ситуација. Можете укључити ову скрипту у вашу веб локацију за брзу динамичку анимацију спритеа и помицање позадина.

Читав додатак покреће ЈаваСцрипт и ХТМЛ / ЦСС; није потребан Фласх нити било који други позадински језик. Страница са документацијом је једноставна, али довољна за почетак. Програмери имају мноштво пробних демо датотека које можете и преузети.

Тренутна верзија верзије је 0.6.1 која је умјерено ажурирана. Ефекти анимације су компатибилни са Опера, Цхроме, Сафари, Фирефок и Интернет Екплорер 6+. Такође, било који прегледач паметних телефона који ради на Андроид-у или иОС-у треба да се савршено приказује.

ФатПикелс

Ово је снажан опен соурце сприте скрипт који је развио Матиас Мартинез. ФатПикелс захтева само да ЈКуери библиотека ради исправно. Иако бих рекао да је Спрители комплекснија библиотека анимација, ФатПикелс има нишу на тржишту за веб програмере.

Лако можете градити анимиране духове без креирања .гиф слике. У ствари, моћи ћете да извезете све слике као .јпг и креирате ред сприта за један дуги анимирани ефекат. Почетна страница ФатПикела има одличан демо, заједно са блоком јКуери кода који се користи за његову изградњу. Ако тражите нешто лагано за анимирање ваших духова, ФатПикелс је начин на који треба ићи.

СмартСпритес

Када се користи реч "сприте" постоји неколико различитих значења за њега. Карактери видео игара или анимирани духови су обично мање слике приказане са врло мало пиксела. Међутим, у ЦСС-у, термин спрајт се односи на једну слику која делује као лист икона за ваш сајт.

Разлог због којег треба да користите један спрајт лист уместо појединачних слика је да смањите ресурсе сервера. Много је брже преузети већу слику која садржи све ваше иконе умјесто много мањих, али засебних слика. Али стављање свих ових икона у Пхотосхоп може бити прави проблем; чак и не мора бити тешко, само се понавља и одузима много времена.

Срећом, СмартСпритес ЦСС Генератор је фантастичан ресурс за ову ситуацију. Можете брзо да направите савршен лист пиксела са свим вашим сликама у ГИФ или ПНГ формату. Поред тога, можете брзо да одредите шта позиција у позадини Координате к / и треба да буду за сваку појединачну икону.

Скуидфингерс БГ Паттернс

Дизајнирање доброг скупа понављања позадинских слика је веома тешко. Може потрајати неколико дана пре него што креирате бешавне слике. Али срећом постоје ресурси за преузимање бесплатних позадинских плочица.

Галерија Скуидфингерс Паттернс је један такав ресурс. Она нуди преко 150 различитих пикселских стилова које можете преузети и користити на својим пројектима. Стилови су веома динамични и шарени, а за такву разноликост, то је одличан извор за држање при руци. Линкови за преузимање су у .зип формату што их чини мањим и лакшим за пренос између рачунара.

Тхе Спритерс Ресоурце

Не могу рећи довољно великих ствари о Тхе Спритерс Ресоурце. То је веб страница на којој можете претраживати све различите играће суставе за сприте листове. То може да укључи мапе, зграде, екране менија, спритеове знакова, иконе и скоро све!

Они су онлине од 2001. године и каталог видео игара је страховито порастао. Постоји читава заједница која стоји иза ТСР-а са графичким дизајнерима који могу да рипују ове различите игрице. Ако сте заинтересовани за било који облик дизајна видео игара или онлине фанова, мораћете да погледате ову невероватну галерију.

Још занимљивије су неке од сестринских веб страница које су се појавиле на ТСР-у. Гаминг фанови су такође помогли при копирању основних текстура и приказивању модела знакова. Све у свему, заиста је сјајна заједница која подржава рад са спритес-ом у дигиталним сликама.

400 пиксела

Ово је стварно кул веб апликација која не пружа битну вредност, али је дефинитивно уредна. 400 пиксела вам омогућава да направите онлајн документ пиксела и да сачувате слику у њиховој мрежи. Сајт је дизајниран на сличан начин као почетна страница од милион долара, при чему свака слика заузима квадратни блок у укупној слици.

Можете да се играте у њиховом веб интерфејсу и креирате неке заиста глупо уметничко дело. То није нешто што ћете одмах покупити, али је забавно играти се једном када се заустави. И то је добар алат са којим можете да радите са било ког рачунара који има приступ Интернету.

Мајор Оутпут

На сличан начин као и 400 пиксела можете користити Мајор Оутпут као особни онлине студио за пикселске радове. Још је у раним фазама развоја, али су све основне функционалности корисника већ доступне. Можете се регистровати за бесплатан налог и одмах почети са стварањем пиксела.

Свака слика се чува локално на њиховим серверима које можете повезати на сајтове и форуме. Многе слике су отворене за јавност и можете их проверити кликом на различите ауторе или ознаке. Ту је и оквир за претрагу, али сматрам да квалитет резултата претраге није увек одличан.

Мајор Оутпут изгледа као други алат заједнице који је забаван за упознавање, али вјероватно не може понудити много образовне вриједности за пикселске умјетнике.

Туториалс

Сада када имате ресурсе, хајде да погледамо туторијале које су пружили многи образовни центри и корисне блог постове разасуте по интернету. Саставио сам мали сет заиста згодан туториали за почетнике и средње дизајнере. Многи од ових туторијала се фокусирају на Адобе Пхотосхоп, али можете пратити готово сваки напредни едитор слика.

Пикел Сприте Туториал би Дерек иу

Очигледно је да на Гоогле-у има на десетине стотина туторијала за писање пиксела, али овај посебан водич на Дерек Иу веб сајту пролази кроз много различитих корака у едукацији о томе како креирате пикселске духове. Велики део процеса је поједностављен и објашњен на начин који почетницима омогућава да брзо уђу у акцију.

Љубитељи видео игара ће обожавати овај туторијал јер ћете завирити иза сцене у креирању ове специфичне графике. Волим да нађем изглед веб сајта са уметничком сликом пиксела са видео игрицама која је обасјана дизајном. Она пружа јединствен осећај носталгије, и то је нешто што не налазите свуда. Свако ко жели да направи сопствене пикселске духове из било ког разлога може да почне са Дерек-овом серијом туторијала у 10 корака.

Конфигурисање Пхотосхопа за Пикел Арт од стране Брандона Треба

Ево још једног савршеног уџбеника који је усмерен ка почетницима у области уметности пиксела. Блог пост је написао Брандон Треб који је фантастичан дизајнер и мобилни девелопер. Можете наћи све врсте корисних информација у овом детаљном водичу за пикселску Пхотосхоп арт.

Морате знати како подесити поставке у Пхотосхопу тако да се ваши цртежи пиксела неће појавити незгодно или изгубити квалитет приликом извоза. Можда ћете се изненадити када сазнате да је потребно много прилагођавања да бисте заиста добили добар квалитет слике.

Дравинг Ханд-Црафтед Пикелс би Русселл Тате

Ево још једне невероватне туторијале пуне техника за ручно нацртану пикел арт у Пхотосхопу. Ова колекција техника сликања пиксела је једноставно запањујућа. Свако ко претражује садржај највјероватније ће наћи нешто што раније није познавао.

Постоје детаљна објашњења о стварању текстуре на трави и кори; такође о томе како клонирати пикселске цртеже које сте нацртали и претворити их у дизајн икона. Све се своди на праксу и прецизност у свакој области. Они који су заиста страствени ће га пробити и за неколико месеци наћи чврсту технику за своје идеје у стилу пиксела.

Израда ЦСС / ЈС портфеља игара од стране Даниел Стернлицхт

Ево једног туторијала из Смасхинг Магазина о томе како да се кодира портфељ игара са ЦСС / ЈС који је користио многе духове из серије Покемон игара. Аутор је Даниел Стернлицхт који такође води свој лични портфељ на овом распореду заснованом на играма.

Сајт служи као РПГ свет у коме контролишете знаковни дух са тастатуром. Можете да унесете различите зграде које затим приказују информације као што су контакт детаљи и уноси у портфолио.

Ја заиста волим овај туторијал, и то је узбудљив начин да комбинујете пикселске илустрације са развојем веб сајта. Чак и ако не знате много о ЈаваСцрипт-у, ово је и даље занимљив чланак. Прошао сам кроз неке од кодова и морам дати огромне комплименте Дану за такав креативни водич. Сваки покемон фанатик ће се сигурно заљубити у његове идеје.

Исометриц Пикел Туториалс Би Матриак

Овај мали веб сите гас13.ру има неке од најексцентричнијих и професионалних пикел туториала које сам икада видио. У изометријском водичу за базене који сте упознали са стварањем сјајних блокова и текстуре воде. Поред тога, наћи ћете ресурсе за све остале изометричне пикселе у бочној траци.

Има толико тога за научити: можете дизајнирати сторефронт, пикел сприте, или чак детаљне текстуре за видео игре и позадине веб страница. Нисам сигуран да ли овај аутор још увијек активно објављује садржај, али постојећи чланци су више него довољни за почетнике да науче основе.

Студио Пурлоук Пикел Туториал Аутор: Кевин Цхалоук

Сада када сам набројао све најбоље туториале за пикселе, дефинитивно бих ово укључио одмах на почетку. Цео овај водич о пикел артворк-у је одличан наставак за почетнике. Бићете уведени од самог почетка до опен соурце софтвера као што су ГИМП или Паинт.НЕТ.

Научићете како да извезете слике и многе аспекте дизајна пиксела, као што су дитеринг и анти-алиасинг. Постоји толико много различитих техника које треба пратити. Требало би да покупите неке дизајнерске идеје гледајући у ретро 8-битне и 16-битне видео игре.

Аутор Кевин Цхалоук кредитирао је Дерек Иу-ов водич за пикселе (наведен раније) и спомиње да је ово извор инспирације када је први пут почео.

Направите бољи фавикон Би Каила Книгхт

Веб дизајнери често заборављају да је слика фавикона (омиљена икона) огроман дио било које шеме брендирања. Све најпопуларније веб странице могу се препознати по њиховом 16 × 16 фавикону. Када радите са таквим ограниченим платном, приморани сте да се бавите пикселним уметницким радовима и илустрацијама. Овај фавицон водич из ОКСП-а чини одличан посао комбиновања обе идеје.

Из овог тут-а, можете разумети зашто је пикселна уметност толико корисна када стварате фавиконе. Ту су и алати и чврсте технике за извоз .ицо датотеке. Такође је укључена и мала витрина популарних фавикона из целог Веба.

Ово је још један ресурс који сматрам корисним за све веб дизајнере. Оснажује се да се едукује о креирању фавикона и раду са строгим ограничењима пиксела.

Сховцасе Галлери

Хтио бих затворити чланак с лијепом галеријом пиксела дизајнираних веб страница. Укључио сам 40 примјера разних распореда са разноврсним умјетничким визијама. Тренд пикелатед артворк-а тек почиње да се појављује унутар маинстреам веб страница. Надам се да ће ова разноврсна презентација пикселских сајтова бити извор инспирације за веб програмере широм света.

Еартхбоунд Централ

ПикелЈам

Ред Рокк Интерактивни маркетинг

еБои Блог

Тамаго Пикел

пикелХуггер

Пикел Девиант Грапхицс

8-Бит ХТМЛ5 Цанвас Цицле

Даниел Стернлицхт

Војска тролова

БлоцкХеад Пик Апп

мадПКСЛ

супертотт 2.0

ЦлассицГаминг

РПГ Тоолкит Туториалс

Цити Цреатор

Финал Фантаси КСИИИ-2

КаваииХаннах Пикел Арт

Сандбок

Г. Вонг

Пикел Фреак

Насц Пикел Арт

Пакјах

ФоолсТовн

Преко ушију

ЛОВЕПИКСЕЛ

Хенк Ниеборг

Ириесцопе

иамнотадолл

СвеетПИКС

Мегапонт

Мини Метрополис

Хаио ван Реек

Пикелтемпле Студио

Адепт Вормгевинг

Пикел Мусеум

КуицкХонеи

Полпо.нет

спив.цз

4 Реал Доугх