ピクセルベースのWebサイトリソース、チュートリアル、および例

ピクセルスタイルのアートワークを使用してWebインターフェイスを設計することは、現代の傾向と比較すると比較的わかりにくいです。あなたは本当にいくつかの良い例を見つけるためにインターネット上の少数のウェブサイトを掘り下げる必要があります。難しいですが不可能ではありません.

この記事では私が集めた ピクセルベースのWebサイトデザインに必要なものすべてのメガコンパイル. 初心者からエキスパートまで、何十もの健康的なチュートリアルがあります。私はまたあなたがこのトピックをさらに探求するために遊べる、いくつかの便利なツールとリソースを含めました。あなたがビデオゲームのグラフィックスやアイソメトリックピクセルアートワークに全く興味があるなら、あなたはこのコレクションを気に入るはずです.

リソース

これらはWebスクリプトとデジタルグラフィックのためのいくつかのユニークな開発リソースです。ピクセルWebサイトのレイアウトの作成を詳しく検討しているうちに、すべてを網羅する必要性を常に感じるわけではありません。このWebベースのリソースのコレクションは、何度も何度も役立つことがあります。.

まじめな

私はオープンソースコードを扱うことに慣れてきました。だからSpritelyのようなjQueryプラグインを見つけるのはいつも刺激的な状況です。あなたはあなたのウェブサイトにこのスクリプトを含めてすばやくダイナミックなスプライトアニメーションと背景をスクロールすることができます。.

プラグイン全体はJavaScriptとHTML / CSSで動いています。 Flashや他のバックエンド言語は必要ありません。ドキュメンテーションのページはあなたが始めるために十分なほどシンプルで十分です。開発者はあなたが同様にダウンロードできるたくさんのサンプルデモを持っています.

現在の安定版リリースは0.6.1で、これは中程度に更新されています。アニメーション効果は、Opera、Chrome、Safari、Firefox、およびInternet Explorer 6以降と互換性があります。また、AndroidまたはiOS上で実行されているスマートフォンのブラウザは完全にレンダリングされるはずです。.

脂肪ピクセル

これはMatíasMartínezによって開発された強力なオープンソースのスプライトスクリプトです。 FatPixelsはjQueryライブラリが正しく動作するために必要です。 Spritelyはもっと複雑なアニメーションライブラリだと私は言うでしょうが、FatPixelsはWeb開発者にとって市場にニッチを持っています。.

.gif画像を作成せずに、アニメーションスプライトを簡単に作成できます。実際には、すべての画像を.jpgとしてエクスポートし、1つの長いアニメーション効果のためにスプライトのキューを作成することができます。 FatPixelsのホームページには、それを構築するために使用されるjQueryコードのブロックとともに優れたデモがあります。あなたのスプライトを活気づけるために何か軽量を探しているなら、FatPixelsは行く方法です.

スマートスプライト

「スプライト」という言葉を使うとき、それにはいくつかの異なる意味があります。ビデオゲームのキャラクターやアニメ化されたスプライトは、一般的に、ごく少数のピクセルでレンダリングされた小さな画像です。しかしCSSでは、スプライトという用語はあなたのウェブサイトのアイコンのシートとして機能する単一の画像を指します。.

個々の画像の代わりに単一のスプライトシートを使用する必要があるのは、サーバーリソースを節約するためです。小さいけれども別々の多くの画像ではなく、すべてのアイコンを含む大きな画像をダウンロードする方がはるかに速いです。しかし、これらすべてのアイコンをPhotoshopにまとめて配置するのは大変なことです。必ずしも難しいことではなく、繰り返して時間がかかるだけ.

ありがたいことに、SmartSprites CSS Generatorはこの状況の素晴らしいリソースです。 GIFまたはPNG形式のすべての画像を使って、ピクセルパーフェクトシートをすばやく生成できます。さらに、あなたはすぐにあなたの何を決定することができます 背景位置 x / y座標は個々のアイコンごとにする必要があります.

Squidfingers BGパターン

一連の繰り返し背景画像をデザインすることは非常に困難です。シームレスな画像を作成するまでに数日かかることがあります。しかし、ありがたいことに無料の背景タイルをダウンロードするためのオンラインのリソースがあります。.

Squidfingersパターンギャラリーはそのようなリソースの1つです。それはあなたがあなたのプロジェクトでダウンロードして使うことができる150以上の異なるピクセルスタイルのパターンを提供します。スタイルは非常にダイナミックでカラフルです、そしてそのような多様性のために、それは便利にしておくための優れたリソースです。ダウンロードリンクは.zip形式であるため、コンピュータ間での転送がより簡単になります。.

Spritersのリソース

私はThe Spriters Resourceについて十分に素晴らしいことを言うことはできません。それはあなたがスプライトシートのためにあなたがすべての様々なゲームシステムを検索することができるウェブサイトです。これらには、地図、建物、メニュー画面、キャラクターのスプライト、アイコン、その他ほとんどのものが含まれます。!

彼らは2001年以来オンラインであり、ビデオゲームのカタログは途方もない成長を遂げました。 TSRの背後には、これらの異なるゲームスプライトをリッピングできるグラフィックデザイナーとのコミュニティ全体があります。何らかの形のビデオゲームデザインやオンラインファンサイトに興味があるなら、この素晴らしいギャラリーをチェックしなければなりません。.

さらに興味深いのは、TSRから生まれた姉妹Webサイトです。ゲームファンは、ベーステクスチャのリッピングやキャラクターモデルのレンダリングにも役立ちました。全体的に、デジタルアートワークのスプライトを扱うことを非常に支持している本当に素晴らしいコミュニティです。.

400ピクセル

これは本質的な価値を提供しない本当にクールなWebアプリですが、それは間違いなくきれいです。 400ピクセルでは、オンラインでピクセル文書を作成し、その画像をグリッドに保存できます。このサイトは100万ドルのホームページと同じようにデザインされており、各写真は全体的な画像の中で正方形のブロックを占めています。.

あなたは彼らのウェブインターフェースで遊んで、本当に間抜けなアートワークを作成することができます。それはあなたがすぐに拾うものではありませんが、それをハングアップしたら、それは一緒に遊ぶのは楽しいです。そしてそれはあなたがインターネットにアクセスできるどのコンピュータからでも作業できる素晴らしいツールです。.

メジャーアウトプット

400ピクセルと同じように、メジャーアウトプットをピクセルアートワーク用のパーソナルオンラインスタジオとして使用できます。まだ開発の初期段階にありますが、コアとなるすべてのユーザー機能はすでに利用可能です。あなたは無料のアカウントに登録してすぐにピクセルアートを作り始めることができます.

各画像はあなたがウェブサイトやフォーラムにホットリンクすることができるそれらのサーバーにローカルに保存されます。画像の多くは一般に公開されているので、さまざまな作者やタグをクリックしてチェックアウトできます。検索ボックスもありますが、検索結果の品質は必ずしも良いとは言えません。.

メジャーアウトプットは別のコミュニティツールのように思えるが、おそらくピクセルアーティストにはあまり教育的価値がない.

チュートリアル

これでリソースが手に入りました。次に、多くの教育センターで提供されているチュートリアルと、インターネットに散らばって役に立つブログ記事を見てみましょう。私は本当に便利なの小さなセットをまとめました 初心者や中級者向けのピクセルアートチュートリアル. これらのチュートリアルの多くは、Adobe Photoshopに焦点を絞っていますが、ほとんどすべての高度な画像エディタと一緒に従うことができます。.

Derek yuによるピクセルスプライトのチュートリアル

明らかに、Googleには何百ものピクセルスプライトのチュートリアルがありますが、Derek YuのWebサイトにあるこのチュートリアルでは、ピクセルスプライトの作り方を教育するためのさまざまなステップを経ています。プロセスの大部分は、初心者が素早く行動に移れるように合理化され説明されています。.

あなたがこれらの特定のグラフィックスを作成することの舞台裏を覗くので、ビデオゲームファンはこのチュートリアルを好きになるでしょう。デザイン全体に散らばっているビデオゲームのピクセルアートワークのあるウェブサイトのレイアウトを見つけるのが大好きです。それは郷愁の独特の感覚を提供します、そしてそれはあなたが至る所で見つけない何かです。何らかの理由で独自のピクセルスプライトを作成しようとしている人は誰でも、Derekの10ステップのチュートリアルシリーズから始めることができます。.

Brandon Trebによるピクセルアート用のPhotoshopの設定

これは、ピクセルアートワークの分野の初心者向けのもう1つの完璧なチュートリアルです。ブログ記事は、素晴らしいデザイナーでありモバイル開発者でもあるBrandon Trebによって書かれました。ピクセルベースのPhotoshopアートの詳細ガイドで、あらゆる種類の有用な情報を見つけることができます。.

書き出すときにピクセルアートワークがぎこちなく表示されたり品質が低下したりしないように、Photoshopで設定を行う方法を知っておく必要があります。あなたは本当に素晴らしい画質を得るために多くのカスタマイズが必要であることを学ぶのに驚かれるかもしれません.

Russell Tateによる手作りのピクセルの描画

これはPhotoshopでの手描きピクセルアートのためのテクニックでいっぱいのもう一つの素晴らしいチュートリアルです。このピクセルアート技術のコレクションは、単なる驚くべきものです。コンテンツを読み飛ばす人は誰でも、おそらく以前には知らなかったものを見つけるでしょう。.

草や樹皮にテクスチャを作成する方法についての詳細な説明があります。また、描画したピクセルアートワークを複製してアイコンデザインに変換する方法についても説明します。それはすべての分野における実践と正確さにかかっています。本当に情熱的な人はそれを突き通すだろうし、数ヶ月以内に彼らのピクセルスタイルのアイデアのための強固な技術を見つける.

Daniel SternlichtによるCSS / JSゲームポートフォリオの開発

Smashing Magazineからの1つのチュートリアルは、ポケモンゲームシリーズからの多くのスプライトを利用したCSS / JSでゲームポートフォリオをどのようにコーディングするかについてです。作者はDaniel Sternlichtで、このゲームベースのレイアウトで個人的なポートフォリオを運営しています。.

WebサイトはRPGの世界として機能し、キーボードを使ってキャラクターのスプライトを制御します。連絡先の詳細やポートフォリオのエントリなどの情報を表示するさまざまな建物を入力できます。.

私は本当にこのチュートリアルが大好きです、そしてそれはピクセルアートワークとウェブサイト開発を結合するための刺激的な方法です。 JavaScriptについてあまり知らなくても、これはまだ非常に興味深い記事です。私はいくつかのコードを読み終えたので、そのような独創的なチュートリアルのためにDanに多大な賛辞を与えなければなりません。どんなポケモン狂信者もきっと彼の考えに恋をするでしょう.

等尺性ピクセルチュートリアルby Matriax

この小さなWebサイトgas13.ruには、私が今まで見た中で最も風変わりでプロフェッショナルなピクセルチュートリアルがいくつかあります。アイソメトリックプールのチュートリアルでは、光沢のあるブロックと水の質感の作成について紹介しました。さらに、サイドバーに他のすべての等角投影法ピクセルtutsのリソースがあります。.

学ぶことがたくさんあります：あなたは、ビデオゲームやウェブサイトの背景のために店先、ピクセルスプライト、さらには詳細なテクスチャをデザインすることができます。この作者がまだコンテンツを積極的に発行しているかどうかはわかりませんが、既存の記事は初心者が基本を学ぶのに十分すぎるほどです。.

Kevin Chaloux著Studio Purlouxピクセルチュートリアル

今私はすべての最高のピクセルチュートリアルをリストしているので、私は間違いなく始めの方にこれを含めるでしょう。ピクセルアートワークに関するこのチュートリアル全体は、初心者向けの素晴らしいフォローアップ記事です。 GIMPやPaint.NETのようなオープンソースソフトウェアを最初から紹介します。.

画像と、ディザリングやアンチエイリアスなどのピクセルデザインのさまざまな面をエクスポートする方法を学びます。一緒に従うべき非常に多くの異なるテクニックがあります。あなたはレトロな8ビットと16ビットのビデオゲームを検討することによっていくつかのデザインのアイデアを拾うべきです.

著者のKevin Chalouxは、Derek Yuのピクセルスプライトのチュートリアル（前述）を紹介し、彼が最初に始めたときのインスピレーションの源としてこれに言及しています。.

より良いファビコンを作成するKayla Knight

Webデザイナーは、ファビコン（お気に入りのアイコン）画像がブランド設定の大部分を占めることを忘れてしまうことがよくあります。すべての最も人気のあるウェブサイトは、それらの16×16のfaviconによって認識することができます。あなたがそのような限られたキャンバスで作業しているとき、あなたはピクセル密度の高いアートワークとイラストを扱うことを強いられます。 OXPからのこのfaviconチュートリアルは、両方のアイデアを組み合わせるという素晴らしい仕事をします。.

このチュートリアルから、ファビコンを作成するときになぜピクセルアートがそれほど有益であるかを理解できます。 .icoファイルをエクスポートするためのツールと強力なテクニックもあります。また、Web上からの人気のあるお気に入りの小さなショーケースも含まれています。.

これは私がすべてのWebデザイナーに利益をもたらすことができると思うもう一つのリソースです。ファビコンを作成し、厳密なピクセル制限で作業することについて自分自身を教育することは、力を与えます.

ショーケースギャラリー

この記事を、ピクセルスタイルのWebサイトデザインの素晴らしいギャラリーで締めくくりたいと思います。私は多くの多様な芸術的ビジョンと共に様々なレイアウトの40の例を含めました。ピクセル化されたアートワークの傾向は、主流のWebサイト内で再出現し始めたばかりです。私は、このピクセルサイトの独特の展示が、世界中のWeb開発者にインスピレーションの源となることを願っています。.

アースバウンドセントラル

PixelJam

レッドロックインタラクティブマーケティング

eBoyブログ

たまごピクセル

pixelHugger

ピクセル逸脱グラフィック

8ビットHTML5キャンバスサイクル

ダニエル・シュテルンリヒト

トロール軍

BlockHead Pix App

madPXL

スーパーポット2.0

クラシックゲーム

RPGツールキットのチュートリアル

市クリエイター

ファイナルファンタジーXIII-2

かわいいハナピクセルアート

サンドボックス

ウォン氏

ピクセルフリーク

Nasc Pixel Art

パクジャ

愚かな町

真っ逆さまに

ラブピクセル

ヘンクニーボルク

アイスコープ

イマノタドール

SweetPIX

メガポント

ミニメトロポリス

ハヨファンリーク

ピクセルテンプルスタジオ

熟練した

ピクセルミュージアム

QuickHoney

Polpo.net

spiv.cz

4本物の生地