픽셀 기반 웹 사이트 리소스, 자습서 및 예

픽셀 스타일의 아트웍을 사용하여 웹 인터페이스를 디자인하는 것은 현대의 경향에 비해 상대적으로 애매합니다. 좋은 예를 찾기 위해 인터넷에있는 소수의 웹 사이트를 파헤쳐 야합니다. 힘들지만 불가능한 것은 아니다..

내가 수집 한이 기사에서 픽셀 기반 웹 사이트 디자인에 필요한 모든 것을 메가 편집합니다.. 초보자와 전문가 모두에게 수십 가지의 건강한 자습서가 있습니다. 또한 주제를 자세히 탐색 할 수있는 유용한 도구와 리소스를 포함 시켰습니다. 비디오 게임 그래픽이나 아이소 메트릭 픽셀 아트 워크에 관심이 있다면이 컬렉션을 좋아할 것입니다..

자원

웹 스크립트와 디지털 그래픽을위한 독자적인 개발 리소스입니다. 픽셀 - 웹 사이트 레이아웃을 만드는 방법을 탐구하면서 항상 모든 것을 따라야 할 필요성을 느끼지는 않습니다. 이 웹 기반 리소스 모음은 편리한 시간에 다시 올 수 있습니다..

과격하게

오픈 소스 코드 작업에 익숙해졌습니다. 그래서 Spritely와 같은 jQuery 플러그인을 찾는 것이 항상 흥미로운 상황입니다. 빠른 동적 스프라이트 애니메이션과 스크롤링 배경을 위해이 스크립트를 웹 사이트에 포함시킬 수 있습니다..

전체 플러그인은 JavaScript 및 HTML / CSS로 제공됩니다. 플래시 또는 기타 백엔드 언어가 필요하지 않습니다. 설명서 페이지는 간단하지만 시작하기에 충분합니다. 개발자는 다운로드 할 수있는 샘플 데모도 많이 가지고 있습니다..

현재 안정적인 버전은 0.6.1이며 어느 정도 업데이트되었습니다. 애니메이션 효과는 Opera, Chrome, Safari, Firefox 및 Internet Explorer 6 이상과 호환됩니다. 또한 Android 또는 iOS에서 실행되는 스마트 폰 브라우저는 완벽하게 렌더링되어야합니다..

FatPixels

이것은 Matías Martínez가 개발 한 강력한 오픈 소스 스프라이트 스크립트입니다. FatPixels는 jQuery 라이브러리 만 제대로 실행하면됩니다. Spritely가 더 복잡한 애니메이션 라이브러리라고 말하지만, FatPixels는 웹 개발자를위한 시장에서 틈새 시장을 가지고 있습니다..

.gif 이미지를 만들지 않고도 애니메이션 된 스프라이트를 쉽게 만들 수 있습니다. 실제로 모든 이미지를 .jpg로 내보내고 하나의 긴 애니메이션 효과를위한 스프라이트 큐를 만들 수 있습니다. FatPixels 홈페이지에는 jQuery 코드 블록과 함께 훌륭한 데모가 있습니다. Sprite를 애니메이션화하기 위해 경량의 무언가를 찾고 있다면 FatPixels을 사용하는 것이 좋습니다..

SmartSprites

"스프라이트"라는 단어를 사용할 때 몇 가지 다른 의미가 있습니다. 비디오 게임 캐릭터 또는 애니메이션 스프라이트는 일반적으로 매우 작은 픽셀로 렌더링되는 작은 이미지입니다. 그러나 CSS에서 스프라이트라는 용어는 웹 사이트의 아이콘 시트 역할을하는 단일 이미지를 나타냅니다..

개별 이미지 대신 단일 스프라이트 시트를 사용해야하는 이유는 서버 리소스를 줄이는 것입니다. 더 작지만 별도의 이미지 대신 모든 아이콘을 포함하는 더 큰 이미지를 다운로드하는 것이 훨씬 더 빠릅니다. 그러나이 모든 아이콘을 Photoshop에 모으는 것은 정말 번거로운 일이 될 수 있습니다. 반드시 어렵지 않고 반복적이며 시간이 많이 걸리는.

고맙게도 SmartSprites CSS Generator는 이러한 상황에 대한 환상적인 리소스입니다. GIF 또는 PNG 형식의 모든 이미지로 픽셀 완벽한 시트를 신속하게 생성 할 수 있습니다. 또한 신속하게 배경 위치 각 개별 아이콘에 대해 x / y 좌표가 있어야합니다..

스퀴 핑어 BG 패턴

배경 이미지를 반복하여 반복해서 디자인하는 것은 매우 어렵습니다. 원활한 이미지를 만들려면 며칠이 걸릴 수 있습니다. 그러나 고맙게도 무료 배경 타일을 다운로드 할 수있는 온라인 리소스가 있습니다..

Squidfingers Patterns 갤러리는 그러한 리소스 중 하나입니다. 프로젝트에 다운로드하여 사용할 수있는 150 가지 이상의 픽셀 스타일 패턴을 제공합니다. 스타일은 매우 역동적이고 다채로 우며 다양한 용도로 사용하기에 편리합니다. 다운로드 링크는 .zip 형식으로되어있어서 컴퓨터간에 크기가 작고 쉽게 전송됩니다..

Spriters 리소스

The Spriters Resource에 대해 충분한 말을 할 수는 없습니다. 스프라이트 시트를위한 다양한 게임 시스템을 검색 할 수있는 웹 사이트입니다. 여기에는지도, 건물, 메뉴 스크린, 문자 스프라이트, 아이콘 등이 포함될 수 있습니다.!

그들은 2001 년부터 온라인에 있었고 비디오 게임 카탈로그는 엄청나게 성장했습니다. 이러한 다양한 게임 스프라이트를 벗겨 낼 수있는 그래픽 디자이너와 함께 TSR 뒤에는 전체 공동체가 있습니다. 어떤 형태의 비디오 게임 디자인이나 온라인 팬 사이트에 관심이 있다면이 놀라운 갤러리를 확인해야 할 것입니다..

TSR을 일으킨 자매 웹 사이트 중 일부가 더 재미 있습니다. 게임 팬은 기본 텍스처를 추출하고 캐릭터 모델을 렌더링하는데도 도움이되었습니다. 전반적으로 디지털 아트 워크에서 스프라이트 작업을 적극지지하는 정말 훌륭한 커뮤니티입니다..

400 픽셀

이것은 필수 가치를 제공하지 않는 정말 멋진 웹 앱이지만, 확실히 깔끔합니다. 400 픽셀을 사용하면 온라인으로 픽셀 문서를 만들고 이미지를 그리드에 저장할 수 있습니다. 이 사이트는 백만 달러짜리 홈페이지와 비슷한 방식으로 디자인되어 있으며 각 사진은 전체 이미지에서 정사각형 블록을 차지합니다.

웹 인터페이스에서 놀아서 정말 구피 한 작품을 만들 수 있습니다. 지금 당장 데리러 올 것이지만, 한번 놀면 즐겁습니다. 인터넷에 연결된 모든 컴퓨터에서 작업 할 수있는 멋진 도구입니다..

주요 산출물

400 Pixel과 비슷한 맥락에서 Major Output을 픽셀 아트 워크를위한 개인 온라인 스튜디오로 사용할 수 있습니다. 아직 개발 단계에 있지만 핵심 사용자 기능은 모두 이미 사용 가능합니다. 무료 계정을 등록하고 바로 픽셀 아트를 만들 수 있습니다..

각 이미지는 웹 사이트 및 포럼에서 핫 링크 할 수있는 서버에 로컬로 저장됩니다. 많은 이미지가 공개되어 있으므로 다른 작가 나 태그를 클릭하여 확인할 수 있습니다. 검색 창도 있지만 검색 결과의 품질이 항상 좋은 것은 아니라고 생각합니다..

주요 출력은 재미있는 또 다른 커뮤니티 도구처럼 보이지만 픽셀 아티스트에게는 교육 가치를 제공하지 못할 수 있습니다..

자습서

이제 리소스를 얻었으므로 많은 교육 센터에서 제공하는 자습서와 인터넷에 흩어져있는 유용한 블로그 게시물을 살펴 보겠습니다. 나는 정말 편리하게 작은 세트를 조립했다. 초보자 및 중급 디자이너를위한 픽셀 아트 자습서. 이 자습서의 대부분은 Adobe Photoshop에 초점을 맞추지 만, 거의 모든 고급 이미지 편집기.

Derek yu의 Pixel Sprite 튜토리얼

분명히 Google에는 수십억 픽셀 스프라이트 튜토리얼이 있지만 Derek Yu 웹 사이트의이 자습서에서는 픽셀 스프라이트를 만드는 방법을 교육하는 여러 단계를 거칩니다. 많은 과정이 간소화되어 초보자가 신속하게 행동으로 옮겨 갈 수 있도록 해줍니다..

비디오 게임 팬은 이러한 특정 그래픽을 만드는 데있어 막후에서 엿볼 수 있으므로이 자습서를 좋아합니다. 나는 디자인 전반에 산재 해있는 비디오 게임 픽셀 아트웍으로 웹 사이트 레이아웃을 찾는 것을 좋아합니다. 그것은 향수의 독특한 감각을 제공하며, 어디서나 찾을 수없는 어떤 것입니다. Derek의 10 단계 튜토리얼 시리즈에서 어떤 이유로 든 자신 만의 픽셀 스프라이트를 만들려고하는 사람.

Brandon Treb의 Pixel Art Photoshop 구성

여기 픽셀 아트웍 분야의 초보자를위한 완벽한 튜토리얼이 있습니다. 블로그 게시물은 환상적인 디자이너이자 모바일 개발자 인 Brandon Treb이 작성했습니다. 픽셀 기반 포토샵 아트에 대한 자세한 가이드에서 유용한 정보를 찾을 수 있습니다..

Photoshop에서 환경 설정을 구성하여 내보낼 때 픽셀 아트 워크가 어색하게 나타나지 않거나 품질이 떨어지지 않도록하는 방법을 알아야합니다. 정말 좋은 화질을 얻으려면 많은 사용자 정의가 필요하다는 것을 알면 놀랄 것입니다..

러셀 테이트 (Russell Tate)의 손으로 직접 만든 그림 그리기

여기 포토샵에서 손으로 그린 ​​픽셀 아트 기술로 가득 찬 또 다른 놀라운 튜토리얼이 있습니다. 이 픽셀 아트 기술 컬렉션은 단순히 놀라운 것입니다. 내용을 훑어 본 사람이라면 누구도 알지 못했던 것을 찾을 것입니다..

풀과 나무 껍질에 텍스처를 만드는 것에 대한 자세한 설명이 있습니다. 그려진 픽셀 아트웍을 복제하여 아이콘 디자인으로 바꾸는 방법에 대해서도 설명합니다. 모든 것은 모든 분야에서 실습과 정확성에 달려 있습니다. 진정으로 열렬한 사람들은 몇 달 안에 그것을 충실히 지키고 픽셀 스타일의 아이디어를위한 확실한 기술을 발견하게 될 것입니다.

Daniel Sternlicht의 CSS / JS 게임 포트폴리오 개발

Smashing Magazine에서 포케몬 게임 시리즈의 많은 스프라이트를 활용 한 CSS / JS로 게임 포트폴리오를 코딩하는 방법에 대한 자습서가 있습니다. 저자는 Daniel Sternlicht도이 게이밍 기반 레이아웃에서 개인 포트폴리오를 운영합니다..

이 웹 사이트는 키보드로 캐릭터 스프라이트를 제어하는 ​​RPG 세계의 역할을합니다. 다른 건물을 입력하면 연락처 세부 정보 및 포트폴리오 항목과 같은 정보를 가져올 수 있습니다..

이 튜토리얼을 정말 좋아하며 픽셀 아트 워크와 웹 사이트 개발을 결합하는 흥미 진진한 방법입니다. 자바 스크립트에 대해 많이 알지 못하더라도 여전히 매우 흥미로운 기사입니다. 나는 코드의 일부를 살펴 보았으며 그러한 창의적 인 튜토리얼을 위해 댄에게 엄청난 칭찬을해야만한다. 모든 포켓몬의 광신도들은 분명히 그의 아이디어에 매료 될 것입니다..

아이소 메트릭 픽셀 튜토리얼 Matriax

이 작은 웹 사이트 gas13.ru에는 내가 본 중에 가장 편심하고 전문적인 픽셀 자습서가 있습니다. 아이소 메트릭 풀 튜토리얼에서는 반짝이는 블록과 물 텍스처를 만드는 방법을 소개합니다. 또한 사이드 바에있는 다른 모든 등각 투영 픽셀 툴에 대한 리소스를 찾을 수 있습니다..

배울 점이 많습니다. 점포, 픽셀 스프라이트 또는 비디오 게임 및 웹 사이트 배경에 대한 자세한 텍스처를 디자인 할 수 있습니다. 이 저자가 여전히 적극적으로 콘텐츠를 게시하고 있는지는 잘 모르겠지만 기존 기사는 초보자가 기초를 배우기에 충분합니다..

Studio Purloux Pixel Tutorial 작성자 : Kevin Chaloux

이제 모든 최상위 픽셀 자습서를 나열하고 있는데 처음에는이 권리를 분명히 포함 할 것입니다. 픽셀 아트 워크에 대한이 전체 자습서는 초보자에게 훌륭한 후속 기사입니다. 맨 처음부터 GIMP 나 Paint.NET 같은 오픈 소스 소프트웨어를 소개합니다..

디더링 및 앤티 앨리어싱과 같은 픽셀 디자인의 많은 측면과 이미지를 내보내는 방법을 배웁니다. 따라야 할 여러 가지 기법이 있습니다. 레트로 8 비트 및 16 비트 비디오 게임을 살펴봄으로써 디자인 아이디어를 찾아야합니다..

저자 Kevin Chaloux는 Derek Yu의 픽셀 스프라이트 튜토리얼 (앞에서 나열한)을 소개하고 이것이 처음 시작했을 때 영감의 원천이라고 언급합니다.

더 나은 Favicon 만들기 Kayla Knight 작성

웹 디자이너는 자주 favicon (좋아하는 아이콘) 이미지가 어떤 브랜딩 스키마의 큰 부분임을 잊어 버립니다. 가장 인기있는 모든 웹 사이트는 16 × 16 favicon으로 인식 할 수 있습니다. 이러한 제한된 캔버스로 작업 할 때 픽셀이 많은 아트웍과 일러스트레이션을 처리해야합니다. OXP의이 파비콘 튜토리얼은 두 가지 아이디어를 결합하는 훌륭한 작업을합니다..

이 방법을 통해 파비콘을 만들 때 픽셀 아트가 왜 유익한 지 이해할 수 있습니다. .ico 파일을 내보내는 도구와 확실한 기술도 있습니다. 또한 웹 사이트의 인기있는 파비콘 쇼케이스가 포함되어 있습니다..

이것은 모든 웹 디자이너에게 도움이 될 수있는 또 다른 리소스입니다. 파비콘 만들기 및 엄격한 픽셀 제한 작업에 대해 교육 할 수있는 권한을 부여합니다..

쇼케이스 갤러리

나는 픽셀 스타일의 웹 사이트 디자인의 멋진 갤러리로 기사를 마무리하고 싶습니다. 나는 다양한 다양한 예술적 비전을 가진 다양한 레이아웃의 40 가지 예를 포함 시켰습니다. 픽셀 화 된 아트웍의 추세는 주류 웹 사이트에서 다시 등장하기 시작한 것입니다. 이 독특한 픽셀 사이트가 전 세계 웹 개발자에게 영감의 원천이 될 수 있기를 바랍니다..

어스 바운드 센트럴

픽셀 잼

레드 로크 인터랙티브 마케팅

eBoy 블로그

타마 고 픽셀

pixelHugger

픽셀 Deviant 그래픽

8 비트 HTML5 캔버스 사이클

다니엘 스턴 클리어트

트롤 군대

BlockHead Pix 앱

madPXL

supertott 2.0

클래식 게임

RPG 툴킷 자습서

도시 창조자

파이널 판타지 XIII-2

카와이 한나 픽셀 아트

샌드 박스

웡

픽셀 괴물

Nasc 픽셀 아트

팍샤

FoolsTown

헤드 오버 힐즈

LOVEPIXEL

헨 니에 보그

아이리 스코프

암 노타 돌

SweetPIX

메가 폰트

미니 대도시

Hayo van Reek

Pixeltemple Studio

Adept Vormgeving

픽셀 박물관

퀵 허니

Polpo.net

spiv.cz

4 진짜 반죽