Zasoby, samouczki i przykłady oparte na pikselach
Projektowanie interfejsu internetowego za pomocą kompozycji w stylu pikseli jest stosunkowo mało znane w porównaniu z nowoczesnymi trendami. Naprawdę musisz przekopać się przez kilka stron internetowych w celu znalezienia dobrych przykładów; to trudne, ale nie niemożliwe.
W tym artykule zebrałem mega kompilacja wszystkiego, czego potrzebujesz do projektowania stron internetowych opartych na pikselach. Istnieją dziesiątki zdrowych samouczków dla początkujących i ekspertów. Dołączyłem też kilka przydatnych narzędzi i zasobów, którymi możesz się bawić, aby dalej zgłębiać temat. Jeśli jesteś zainteresowany grafiką gier wideo lub izometryczną grafiką pikseli, pokochasz tę kolekcję.
Zasoby
Są to wyjątkowe zasoby programistyczne dla skryptów internetowych i grafiki cyfrowej. Gdy zagłębisz się w tworzenie układów stron internetowych w pikselach, nie zawsze będziesz musiał śledzić wszystko do kropki. Ta kolekcja zasobów internetowych może się przydać raz po raz.
Spritely
Przyzwyczaiłem się do pracy z otwartym kodem źródłowym. Dlatego znalezienie wtyczki jQuery takiej jak Spritely jest zawsze ekscytującą sytuacją. Możesz dołączyć ten skrypt do swojej witryny w celu szybkiego dynamicznego animowania duszków i przewijania tła.
Cała wtyczka jest obsługiwana przez JavaScript i HTML / CSS; nie jest wymagany żaden Flash ani żaden inny język zaplecza. Strona z dokumentacją jest prosta, ale wystarczy, abyś mógł zacząć. Twórcy mają mnóstwo przykładowych wersji demonstracyjnych, które można również pobrać.
Aktualna wersja stabilnej wersji to 0.6.1, która jest umiarkowanie aktualizowana. Efekty animacji są kompatybilne z Opera, Chrome, Safari, Firefox i Internet Explorer 6+. Również wszelkie przeglądarki smartfonów działające na Androidzie lub iOS powinny być doskonale renderowane.
FatPixels
Jest to potężny skrypt sprite open source opracowany przez Matíasa Martíneza. FatPixels wymaga tylko prawidłowego działania biblioteki jQuery. Chociaż powiedziałbym, że Spritely jest bardziej złożoną biblioteką animacji, FatPixels ma niszę na rynku dla twórców stron internetowych.
Możesz łatwo tworzyć animowane duszki bez tworzenia obrazu .gif. W rzeczywistości będziesz mógł wyeksportować wszystkie obrazy jako .jpg i utworzyć kolejkę duszków dla jednego długiego efektu animowanego. Strona domowa FatPixels ma doskonałe demo wraz z blokiem kodu jQuery użytego do jego zbudowania. Jeśli szukasz czegoś lekkiego do animowania sprite'ów, FatPixels jest najlepszym rozwiązaniem.
SmartSprites
Używając słowa „sprite”, istnieje kilka różnych znaczeń. Postacie z gier wideo lub animowane duszki są zazwyczaj mniejszymi obrazami renderowanymi z bardzo małą liczbą pikseli. Jednak w CSS termin sprite odnosi się do pojedynczego obrazu, który działa jako arkusz ikon dla Twojej witryny.
Powodem, dla którego powinieneś użyć pojedynczego arkusza sprite zamiast pojedynczych obrazów, jest zmniejszenie zasobów serwera. Znacznie szybciej jest pobrać większy obraz zawierający wszystkie ikony zamiast wielu mniejszych, ale oddzielnych obrazów. Ale połączenie wszystkich tych ikon w Photoshopie może być prawdziwym kłopotem; nawet niekoniecznie trudne, po prostu powtarzalne i czasochłonne.
Na szczęście Generator CSS SmartSprites jest fantastycznym źródłem dla tej sytuacji. Możesz szybko wygenerować perfekcyjny arkusz ze wszystkimi obrazami w formacie GIF lub PNG. Dodatkowo możesz szybko określić, co masz pozycja tła współrzędne x / y powinny być dla każdej indywidualnej ikony.
Wzory BG Squidfingers
Projektowanie dobrego zestawu powtarzających się obrazów tła jest bardzo trudne. Może minąć kilka dni, zanim będziesz mógł tworzyć obrazy bez szwu. Ale na szczęście istnieją zasoby online do pobierania darmowych kafelków tła.
Galeria wzorów Squidfingers jest jednym z takich zasobów. Oferuje ponad 150 różnych wzorów w stylu pikseli, które można pobrać i wykorzystać w swoich projektach. Style są bardzo dynamiczne i kolorowe, a dla takiej różnorodności są doskonałym źródłem informacji, które może być przydatne. Łącza do pobierania są w formacie .zip, dzięki czemu są mniejsze i łatwiejsze do przenoszenia między komputerami.
Zasób Spriters
Nie mogę powiedzieć wystarczająco dużo wspaniałych rzeczy na temat The Spriters Resource. Jest to strona internetowa, w której można przeszukiwać wszystkie różne systemy gier dla arkuszy sprite. Mogą to być mapy, budynki, ekrany menu, duszki postaci, ikony i prawie wszystko!
Są online od 2001 roku, a katalog gier wideo ogromnie się rozwinął. TSR współpracuje z całą społecznością grafików, którzy potrafią zgrać te różne duchy gier. Jeśli jesteś zainteresowany jakąkolwiek formą gier wideo lub stronami fanowskimi online, musisz sprawdzić tę niesamowitą galerię.
Jeszcze bardziej interesujące są niektóre siostrzane strony internetowe, które zrodziły TSR. Fani gier pomogli także w zgrywaniu podstawowych tekstur i renderowaniu modeli postaci. Ogólnie rzecz biorąc, jest to naprawdę wspaniała społeczność bardzo wspierająca pracę z sprite'ami w dziełach cyfrowych.
400 pikseli
Jest to naprawdę fajna aplikacja internetowa, która nie zapewnia istotnej wartości, ale jest zdecydowanie zgrabna. 400 pikseli umożliwia utworzenie dokumentu pikselowego online i zapisanie obrazu w siatce. Strona została zaprojektowana w podobny sposób jak strona główna z milionem dolarów, a każdy obraz zajmuje kwadratowy blok w całości.
Możesz grać w ich interfejsie internetowym, tworząc naprawdę głupkowatą grafikę. To nie jest coś, co możesz odebrać od razu, ale fajnie jest grać, gdy już to zrozumiesz. I to miłe narzędzie, z którym możesz pracować na dowolnym komputerze z dostępem do Internetu.
Główne wyjście
W podobnym stylu jak 400 pikseli można użyć funkcji Major Output jako osobistego studia online do tworzenia pikseli. Nadal jest na wczesnym etapie rozwoju, ale wszystkie podstawowe funkcje użytkownika są już dostępne. Możesz zarejestrować się na darmowe konto i natychmiast rozpocząć tworzenie sztuki pikseli.
Każdy obraz jest przechowywany lokalnie na ich serwerach, które można hotlinkować na stronach internetowych i forach. Wiele obrazów jest otwartych dla publiczności i możesz je sprawdzić, klikając różnych autorów lub znaczniki. Istnieje również pole wyszukiwania, ale uważam, że jakość wyników wyszukiwania nie zawsze jest świetna.
Najważniejsze wyniki wydają się być kolejnym narzędziem społecznościowym, o którym można się dobrze bawić, ale prawdopodobnie nie mogą zaoferować artystom pikselowym dużej wartości edukacyjnej.
Samouczki
Teraz, gdy masz już zasoby, rzućmy okiem na tutoriale dostarczone przez wiele ośrodków edukacyjnych i pomocne posty na blogu rozrzucone po całym Internecie. Złożyłem mały zestaw naprawdę poręcznych samouczki pixel art dla początkujących i średnio zaawansowanych projektantów. Wiele z tych samouczków skupia się na Adobe Photoshopie, ale możesz śledzić niemal każdy zaawansowany edytor obrazów.
Samouczek Pixel Sprite autorstwa Dereka yu
Oczywiście w Google jest kilkadziesiąt setek samouczków o pikselach, ale ten konkretny samouczek na stronie internetowej Dereka Yu przechodzi wiele różnych kroków w edukowaniu, jak tworzyć sprite'y pikseli. Znaczna część procesu została usprawniona i wyjaśniona w sposób, który pozwala początkującym szybko wskoczyć do akcji.
Fani gier wideo pokochają ten samouczek, ponieważ uzyskasz podgląd kulis na tworzenie tych konkretnych grafik. Uwielbiam układać strony internetowe z grafiką do gry w piksele zaśmieconą w całym projekcie. Zapewnia wyjątkowe poczucie nostalgii i jest to coś, czego nie znajdziesz wszędzie. Każdy, kto chce stworzyć własne duchowe piksele z jakiegokolwiek powodu, może zacząć od 10-stopniowej serii samouków Dereka.
Konfiguracja Photoshopa dla Pixel Art autorstwa Brandona Treba
Oto kolejny doskonały tutorial skierowany do początkujących w dziedzinie grafiki pikselowej. Post na blogu napisał Brandon Treb, który jest fantastycznym projektantem i twórcą aplikacji mobilnych. W tym szczegółowym przewodniku po opartej na pikselach sztuce Photoshop można znaleźć wszystkie przydatne informacje.
Musisz wiedzieć, jak skonfigurować preferencje w Photoshopie, aby twoja grafika pikselowa nie wydawała się niezręczna lub nie traciła jakości podczas eksportowania. Być może zdziwisz się, gdy nauczysz się, jak wiele dostosowań jest potrzebnych, aby uzyskać dobrą jakość obrazu.
Rysunek ręcznie robionych pikseli autorstwa Russella Tate'a
Oto kolejny niesamowity tutorial pełen technik rysowania pikseli w Photoshopie. Ta kolekcja technik pixel art jest po prostu zadziwiająca. Każdy, kto przegląda zawartość, najprawdopodobniej znajdzie coś, czego wcześniej nie znał.
Istnieją szczegółowe wyjaśnienia dotyczące tworzenia tekstury na trawie i korze; także na temat klonowania narysowanej grafiki pikselowej i przekształcenia jej w projekt ikony. Wszystko sprowadza się do praktyki i precyzji w każdym obszarze. Ci, którzy są naprawdę pasjonatami, przetrwają i w ciągu kilku miesięcy znajdą solidną technikę dla swoich pomysłów w stylu pikseli.
Opracowanie portfolio gry CSS / JS autorstwa Daniela Sternlicht
Oto jeden tutorial ze Smashing Magazine na temat kodowania portfolio gier za pomocą CSS / JS, który wykorzystywał wiele sprite'ów z serii gier Pokemon. Autorem jest Daniel Sternlicht, który również uruchamia swoje osobiste portfolio na tym układzie opartym na grach.
Strona działa jako świat RPG, w którym kontrolujesz duszek postaci za pomocą klawiatury. Możesz wprowadzić różne budynki, które następnie wyświetlają informacje, takie jak dane kontaktowe i wpisy w portfolio.
Bardzo podoba mi się ten tutorial i jest to ekscytujący sposób na połączenie grafiki pikselowej z tworzeniem stron internetowych. Nawet jeśli niewiele wiesz o JavaScript, jest to nadal bardzo interesujący artykuł. Przeszedłem przez część kodu i muszę przekazać ogromne komplementy Danowi za tak kreatywny tutorial. Wszyscy fanatycy Pokemona z pewnością pokochają jego pomysły.
Isometric Pixel Tutorials autorstwa Matriax
Ta mała strona gas13.ru zawiera jedne z najbardziej ekscentrycznych i profesjonalnych samouczków pikseli, jakie kiedykolwiek widziałem. W samouczku w puli izometrycznej zapoznasz się z tworzeniem błyszczących bloków i tekstury wody. Dodatkowo znajdziesz zasoby dla wszystkich innych izometrycznych nakładek pikseli na pasku bocznym.
Jest tak wiele do nauczenia się: możesz zaprojektować witrynę sklepową, piksel pikselowy, a nawet szczegółowe tekstury gier wideo i tła stron internetowych. Nie jestem pewien, czy ten autor nadal aktywnie publikuje treści, ale istniejące artykuły są więcej niż wystarczające dla początkujących, aby nauczyć się podstaw.
Studio Purloux Pixel Tutorial Kevina Chaloux
Teraz, kiedy wymieniam wszystkie najlepsze samouczki pikseli, na pewno uwzględniłbym to na początku. Cały ten samouczek na temat grafiki pikselowej to świetny artykuł dla początkujących. Zostaniesz wprowadzony od samego początku do oprogramowania open source, takiego jak GIMP lub Paint.NET.
Dowiesz się, jak eksportować obrazy i wiele aspektów projektowania pikseli, takich jak dithering i antyaliasing. Jest tak wiele różnych technik do naśladowania. Powinieneś wybrać kilka pomysłów projektowych, zaglądając do retro 8-bitowych i 16-bitowych gier wideo.
Autor Kevin Chaloux przyznaje, że samouczek piksela Dereka Yu (wymieniony wcześniej) i wspomina, że jest to źródło inspiracji, kiedy po raz pierwszy zaczął.
Stwórz lepszy Favicon Kayla Knight
Projektanci stron internetowych często zapominają, że obraz favicon (ulubiona ikona) jest ogromną częścią każdego programu marki. Wszystkie najpopularniejsze strony internetowe można rozpoznać po ich ikonie 16 × 16. Kiedy pracujesz z tak ograniczonym płótnem, musisz zmagać się z gęstą grafiką i ilustracjami. Ten poradnik favicon z OXP doskonale łączy obie idee.
Z tego tutorialu możesz zrozumieć, dlaczego sztuka pikseli jest tak korzystna przy tworzeniu faviconów. Istnieją również narzędzia i solidne techniki eksportowania pliku .ico. Dołączona jest również mała prezentacja popularnych favicons z całej sieci.
To kolejny zasób, który moim zdaniem może przynieść korzyści wszystkim projektantom stron internetowych. To upoważnia do edukowania się w tworzeniu favikonu i pracy ze ścisłymi ograniczeniami pikseli.
Showcase Gallery
Chciałbym zamknąć artykuł ładną galerią projektów stron internetowych w stylu pikseli. Włączyłem 40 przykładów różnych układów z wieloma różnorodnymi wizjami artystycznymi. Trend grafiki z pikselami dopiero zaczyna pojawiać się ponownie w głównych witrynach internetowych. Mam nadzieję, że ta wyraźna prezentacja witryn z pikselami może być źródłem inspiracji dla twórców stron internetowych na całym świecie.
Earthbound Central
PixelJam
Red Rokk Interactive Marketing
eBoy Blog
Tamago Pixel
pixelHugger
Pixel Deviant Graphics
8-bitowy cykl Canvas HTML5
Daniel Sternlicht
Armia trolli
Aplikacja BlockHead Pix
madPXL
supertott 2.0
ClassicGaming
Samouczki RPG Toolkit
Twórca miasta
Final Fantasy XIII-2
KawaiiHannah Pixel Art
Piaskownica
Pan Wong
Pixel Freak
Nasc Pixel Art
Paxjah
FoolsTown
Po uszy
LOVEPIXEL
Henk Nieborg
Iriescope
iamnotadoll
SweetPIX
Megapont
Mini Metropolis
Hayo van Reek
Pixeltemple Studio
Adept Vormgeving
Muzeum Pikseli
QuickHoney
Polpo.net
spiv.cz
4 Prawdziwe ciasto
