ツール95

編集 / 実践的な画像ガイド

画像をカラーパレットでピクセルアートにする方法

より少ないピクセルで画像を見つけ出します。

画像を小さなグリッドに縮小し、色を選択してレトロな仕上がりをプレビューします。整数倍の出力スケールを選択し、PNGまたは色付きピクセルセルで構成されたSVGを作成します。

ガイドに従う
実際のソースとダウンロードされた出力
変更前 編集前のロボット画像のソース

元のサンプル: 1200 x 900 ピクセル。

変更後 青色のOceanパレットを使用して 32 x 24 ピクセルのグリッドに縮小されたロボット

実際のダウンロード結果: 256 x 192 ピクセル。

この比較では、元のサンプルと実際にダウンロードされた出力を読みやすいように拡大縮小して使用しています。異なるキャンバス寸法は異なる表示倍率で示されており、透明な領域はページの背景に従います。
広告
クイックビデオチュートリアル How to turn an image into pixel art Choose an image, set a 32-cell grid and Ocean palette in Settings, then download a crisp PNG at an 8x output scale. English narration. 英語のナレーション ビデオを見る

How to turn an image into pixel art

広告

検証済みの例に従ってから、コントロールを自分の画像に合わせて調整してください。 画像からピクセルアートへを開く.

01

明確な被写体を選ぶ

Image to Pixel Artを開き、「Try an example」を選択して元のロボットのイラストを読み込むか、独自の画像をアップロードします。サンプルは 1200 x 900 ピクセルです。明確なシルエットとシンプルな背景は、詳細を減らした後でも認識しやすくなります。

このツールは既存の画像をサンプリングして再着色します。AIを使用してシーンを作成したり、被写体を描き直したりすることはありません。ソースファイルは変更されません。

被写体が画像のごく一部を占めている場合は、ピクセル化する前にしっかりとクロップ(切り抜き)してください。

02

グリッドとパレットを設定する

スマートフォンの設定を開きます。最長辺(ピクセル)を 32 に設定します。ツールはその値を最長辺に使用し、ソースの比率を維持するため、サンプルは 32 x 24 セルのグリッドになります。クイック選択には 16、64、128、256 も含まれます。

例を再現するには、パレットメニューでOceanを選択します。これにより、画像が固定された6色のパレットにマッピングされます。画像から 2 色から 32 色が抽出されます。「Original colors」はサンプリングされた色を保持します。その他のプリセットには、Soft retro、Handheld、Black and white、Duskがあります。

「Custom colors」を選択し、カスタムパレットに 2 から 32 個の6桁の HEX カラーを入力します。値はスペース、カンマ、またはセミコロンで区切ってください。意図的に小さなパレットを使用することで、無関係な詳細を同じデザインの一部のように感じさせることができます。

顔やオブジェクトが認識できなくなった場合は、色を追加する前にグリッドを大きくしてください。

このガイドの例

元のロボットサンプル; 32 セルの最長グリッド辺 (32 x 24); Ocean 6色パレット; 縮小前にSmooth; ディザリングなし; 出力スケール 8x; PNG。実際のダウンロード: 256 x 192 ピクセル。

ソース
1200 x 900 px
出力
256 x 192 px
フォーマット
PNG
処理中
ブラウザ内で実行
03

サンプリングとテクスチャを比較する

今回の例では、縮小前に「Smooth」を維持し、ディザリングなしを選択してください。「Smooth」サンプリングは詳細を各セルにブレンドします。「Nearest original pixels」はブレンドせずにサンプリングするため、既存のピクセルグラフィックに適している場合があります。

Orderedディザリングは規則的なパターンを導入し、Floyd-Steinbergは色の誤差を隣接するセルに拡散させます。どちらも小さなパレットで追加の色調を表現できますが、単純な形状がノイズっぽくなる可能性もあります。ディザリングは「Original colors」では使用できません。

プレビュー内のピクセルグリッドは、最長辺が 128 セルまでのグリッド用のプレビュー補助機能です。出力には描画されません。パレットを減らすと透明度も簡素化されます。十分に透明なセルはクリアされ、他のセルは不透明になります。

オリジナルと比較し、全く異なるパレットを試すときは「Undo」または「Redo」を使用してください。

04

整数倍のスケールでエクスポートする

エクスポートスケールを 8x に維持し、PNG を選択して「Start」を選択します。32 x 24 のグリッドは 256 x 192 ピクセルのファイルになり、各セルは 8 x 8 の正方形で表現されます。「Download」は比較で使用された実際の結果を保存します。これにはOceanパレットが含まれ、プレビューグリッド線は含まれません。

利用可能なスケールは 1x、2x、4x、8x、16x です。PNG は共有に便利で、鮮明なブロックを維持します。SVG はピクセルを色付きの長方形として表現するものであり、滑らかなベクタートレースではありません。他のアプリで PNG を拡大する場合は、セルの端がぼやけないようにニアレストネイバー法(最近傍補間)を使用してください。

結果を 100% または整数の倍率で表示してください。端数のある表示サイズでは、正しくエクスポートされたピクセルでも不均一に見えることがあります。

便利な詳細

よくある質問

これはAIピクセルアートジェネレーターですか?

いいえ。アップロードされた画像をグリッドにサンプリングし、必要に応じて減色するツールです。新しいオブジェクトを作成したり、AIで被写体を描き直したりすることはありません。

どのグリッドサイズから始めるべきですか?

最長辺が32または64セルのグリッドを試してください。シンプルなシルエットには小さなグリッドを、被写体に詳細が必要な場合は大きなグリッドを使用してください。

独自のパレットを入力できますか?

はい。「カスタムカラー」を選択し、カスタムパレットにスペース、カンマ、またはセミコロンで区切った2〜32個の6桁のHEXカラーコードを入力します。

なぜ他のアプリで PNG がぼやけて見えるのですか?

一部のビューアは拡大された画像を滑らかに表示します。整数倍のスケールでエクスポートし、他の場所で拡大する場合はニアレストネイバー法を使用してください。

プレビューのグリッドはダウンロードに含まれますか?

いいえ。プレビューのピクセルグリッドは編集用のアシストであり、PNG および SVG のエクスポートには含まれません。

SVG は滑らかなベクタートレースですか?

いいえ。色付きの長方形のピクセルセルで構成されています。別のベクタートレースワークフローが必要な場合は、Image to SVG を使用してください。

あなたの番です

より少ないピクセルで画像を見つけ出します。

サンプルを試すか、独自のファイルを使用して、共有前に結果を確認します。

画像からピクセルアートへを開く

画像の詳細

言語38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

言語を選択してください。ビデオチュートリアルは現在英語のナレーションを使用しています。