ブログ / チュートリアル

隅が透明な円形PNGを作り、4:5の切り抜きを計算し、一括ダウンロード前に各写真を確認します。

透明なロゴを選び、明るい写真と暗い写真を確認し、相対的な配置を適用して、ZIPを書き出す前に例外を確認してください。

形式、ファイルサイズ、寸法のエラーを区別し、HEIC写真を一括変換して、共有前にダウンロードしたコピーを確認します。

RAW現像を理解し、現像済みコピーとサムネイルを区別し、DNGを捨てずにJPGかPNGを選びます。

マット補正、薄いピクセルの削除、トリミングをそれぞれ別に比較し、PNGを明るい背景と暗い背景で確認してください。

寸法がわかる4 × 3グリッドで、外枠と隙間を区別し、除外・重複排除後も位置を保持します。

FPSを変更する前に、切り抜きの開始位置とフレーム順を診断します。意図した動きを残しながら、意味のある基準点を保持してください。

GIFの更新矩形が残像を残す理由、完全なPNGフレームの得方、グリッドだけを書き出さず元のフレーム遅延を保持すべき場合。

対応するAseprite出力のframe、spriteSourceSize、sourceSizeを使い、位置が跳ねる切り抜きポーズではなく、揃った元サイズのPNGを復元します。

きれいなピクセルを持つ原本から始め、薄い輪郭色を除外し、正確な色の集計から意図した影・基本色・ハイライトの階調を作ります。

最終的な読む順番をページごとに組み立て、撮影したページを挿入し、不要なページを削除して、共有する前にダウンロードしたファイルを確認してください。

均等なセルを計算し、フレームの順序と位置合わせを確認し、再生速度を選び、GIFが色と透明度に何をするかを理解します。

Instagramは写真を限られた対応アスペクト比のいずれかへ合わせ、残りを中央基準で切り取るため、写真の上部が消え続けます。このガイドでは、保持される比率、カルーセルの落とし穴、ストーリーズの安全領域、4Kのアップロードに利点がない理由を説明します。

色に基づく削除、AIによる領域分割、手動選択は、それぞれ異なる問題を解決します。方法を間違えると、切り抜いた画像に縁取りや穴が残ります。このガイドでは、各方法が実際に何をするかと、画像に必要な方法の見分け方を説明します。

HTTP/2がCSSスプライトの考案理由だったリクエスト数の議論をなくしたため、多くのガイドは、もうない問題を論じています。このガイドでは、今もスプライトを使う本当の根拠、background-positionとRetinaのbackground-sizeの計算、SVGスプライトがより適する場合を説明します。

AI画像生成ツールは、スプライトを均等なグリッドに配置することがほとんどないため、単純な行・列の切り分けでは頭や足が切れてしまいます。このガイドでは、間隔がずれる理由、内容に基づく検出で修正する仕組み、きれいなフレームをUnityやGodotへ取り込む方法を説明します。

9枚のタイルによるグリッド投稿は、1枚の画像をプロフィール全体に広がるバナーに変えます。このガイドでは、元画像のサイズ調整、9枚の均等なタイルへの切り分け、画像がばらばらにならないための逆順アップロードを説明します。

切り抜きの周囲の細い白い縁は、切り抜き自体の不具合であることはほとんどありません。このガイドでは、アンチエイリアスされた縁のピクセルに不適切な色が混ざる場所、アルファを維持する形式、すでに焼き付いた縁の除去方法を説明します。

Texture Type、Sprite Mode、Pixels Per Unit、Filter Mode、圧縮はいずれも、標準設定が2Dアートに適していません。このガイドでは各設定の働き、Sprite Editorでの分割方法、Unityの自動分割より事前分割が適する場合を説明します。

Godot 4は、SpriteFramesを使うAnimatedSprite2D、AtlasTextureの領域、Sprite2Dのhframes/vframesという3つの方法でスプライトシートを読みます。このガイドでは、選ぶ方法、ピクセルアートのフィルター設定、不均一なシートが3つともで破綻する理由を説明します。

AIスプライトシートの大半には、ずれたグリッド、焼き込まれた背景、崩れた文字ラベルがあります。このガイドでは、各問題を直す具体的なプロンプトの言い回し、完全な例2つ、生成後の手順を示します。

「すべてWebPを使えばよい」は、無視できないほど頻繁に間違いになります。このガイドでは、各形式の圧縮方法、アルファチャンネルを保持する形式、非可逆WebPがパレットPNGより大きくなるよくあるケースを説明します。

ファイルサイズを制御する手段は、寸法、形式、品質設定の3つです。このガイドでは優先順に扱い、品質の最適範囲、パレット量子化、メタデータ除去、よくある目標容量への手順を説明します。

通常のリサイズは、本来混ざるべきでない色を混ぜるため、ピクセルアートをぼやけさせます。このガイドでは、最近傍拡大、倍率が整数でなければならない理由、CSSのpixelated表示、エンジンのポイントフィルター、hqx系アルゴリズムが実際に何をするかを説明します。

アトラスは、多数のスプライトを1つのテクスチャへ詰めることでドローコールを減らしますが、端同士を接して詰めると、隣の色が継ぎ目を越えてにじみます。このガイドでは、ビンパッキング、余白と押し出し、2の累乗の寸法が今も重要な場合、トリミングがピボットに与える影響を説明します。

空白のリンクプレビューは、ほぼ必ず、寸法の誤り、非対応の形式、相対URL、古いキャッシュという特定の原因のいずれかにたどり着きます。このガイドでは、1200x630の標準、安全領域を考慮した切り抜き、ここでWebPが不適切な理由、各プラットフォームに再取得させる方法を説明します。

タイルセットは、隣り合わせに置いたときに継ぎ目を合わせる必要があるため、スプライトシートより難しくなります。このガイドでは、タイルサイズの選択、画像がピクセル0から始まらない場合のグリッドオフセットの検出、隙間なしでの色にじみへの対処、UnityやGodotへの取り込みを説明します。

フレーム数と再生速度は別々の判断で、混同するとアニメーションが鈍くなったり、描く手間が増えたりします。このガイドでは、8、12、24fpsの実際の見え方、動作別の速度、長く表示するフレーム、アニメーションのfpsをゲームのfpsから独立させる方法を説明します。

ウェブの他の部分が進化した後も、ファビコンは長く複雑なままで、多くのガイドは必要以上のファイルを列挙しています。このガイドでは、実際に必要な最小セット、各プラットフォームが実際に要求するもの、site.webmanifest、16ピクセルで読み取れるマークのデザイン、キャッシュへの対処を説明します。

モデルに同じキャラクターを2回依頼すると、鎧の色が変わり、マントが現れ、体の比率が変わります。このガイドでは、シード固定ができることと効果の限界、プロンプトでの色と素材の固定、参照画像を使った画像から画像への生成、生成後のずれの修正を説明します。