こんなツールが欲しかった！Photoshopで面倒なスプライト画像をあっという間に作成できる機能拡張 -Sprite Sheet Gen

Post on:2015年5月26日

CSSスプライト用の画像はどうやって作成してますか？
ロゴやナビゲーションやアイコンなどをPSDファイルにちまちま並べて、Photoshopで書き出す感じでしょうか。

そんな面倒な作業とおさらばできる便利な機能拡張「Sprite Sheet Gen」を紹介します。
しかもコリスのビジター限定で3名様にプレゼント！ そして絶対欲しい人用に半額キャンペーンも同時に行います！

応募期間は、2015年5月28日で終了しました。
半額キャンペーンは、29日23:59までです。

サイトのキャプチャ

Sprite Sheet Gen

コリス限定：プレゼント企画と半額キャンペーン

今回は通常のプレゼント企画だけでなく、半額キャンペーンも同時に行います。プレゼント企画の詳細はページの下の方「Sprite Sheet Gen」をプレゼント！をご覧ください。

「Sprite Sheet Gen」の半額キャンペーンの詳細は、下記の通り。

通常「$12(1,510円)」が、5/29 23:59まで半額の「$6(755円)」で購入できます。ページにアクセスし、グリーンのボタン「Buy for $6」をクリックしてください。

サイトのキャプチャ

Sprite Sheet Gen

「Sprite Sheet Gen」を絶対使いたいという人は、この半額キャンペーンをお勧めします。プレゼント企画の当選者発表は5/29の夕方の予定ですので、まずは応募してはずれたら購入するというのも手です。

「Sprite Sheet Gen」の紹介

「Sprite Sheet Gen」は複数のアイテムを並べたスプライトシートを簡単に作成できるPhotoshopの機能拡張で、対応バージョンはCC2014 for Win/OS Xです。
国産のツールですので、日本語環境で完璧に動作します。

スプライトシートの作成手順は、2通り。

  • フォルダ内の複数の画像から、スプライトシートを作成。
  • 一枚のPSDの各レイヤーから、スプライトシートを作成。

作成したスプライトシートは、CSS, Unity, Cocos, JSON, EasalJSに対応しており、使用する際のコードも生成されます。

動作は、下記の動画でご確認ください。

Sprite Sheet Gen
※高解像度で見たい時は、「HD」をクリックしてください。

作業の流れは、こんな感じ。

サイトのキャプチャ

上：フォルダから、下：PSDのレイヤーからスプライトシートを作成

フォルダ内にある複数の画像を自動で配置してスプライトシートを作成でき、PSD上の複数の要素も指定した要素だけからスプライトシートを作成できます。

スプライトシートを作成する際には、いろいろ設定ができます。

サイトのキャプチャ

スプライトシートのサイズ（自動、指定）、マージするレイヤーの指定、個々の要素の間隔を指定など

「Sprite Sheet Gen」の使い方

作者様より「Sprite Sheet Gen」を頂いたので、使ってみました。
インストールは簡単で、ダウンロードした「SpriteSheetGen.zxp」をダブルクリックするとAdobe Extension Managerが起動するので、指示に従いインストールします。

では、さっそく使ってみましょう。
作成手順は、2通り。

  • フォルダ内の複数の画像から、スプライトシートを作成。
  • 一枚のPSDの各レイヤーから、スプライトシートを作成。

まずは、フォルダ内の複数の画像から、スプライトシートを作成してみます。

スプライト用画像を集めたフォルダ

スプライト用画像を集めたフォルダ

Photoshopから「Sprite Sheet Gen」を起動し、「Generate from the folder」をチェック。

「Sprite Sheet Gen」のパネル

「Sprite Sheet Gen」のパネル

「Publish」ボタンをクリックし、画像が入ったフォルダを指定するだけでOK。
指定フォルダ内の画像がどんどん読み込まれ、自動でスプライトシートが作成されます。

スプライトシート

生成されたスプライトシート

各要素は高さを二分木アルゴリズムで比較され、順番に配置されます。
スプライトシートのサイズは必要最小限のサイズにしたり、サイズ指定することもできます。

各要素で使用するコードも生成されます。

スプライト用のコード

生成されたスプライト用のコード

次に、一枚のPSDからスプライトシートを作成してみます。
まずは、PSD上に要素を適当に配置します。

スプライト用画像を集めたPSD

スプライト用画像を集めたPSD

要素の並べ方は適当でも、ページのレイアウトに沿った配置でもOKです。

レイヤーは、こんな感じ。

レイヤーの状態

レイヤーの状態：すべて表示、背景も表示

「Sprite Sheet Gen」の大きなポイントの一つが、マージされていないレイヤーでもマージして書き出せることです。
テキストのレイヤーを加えてみます。

レイヤーの状態

レイヤーはフォルダにまとめ、プレフィックスを付与

あとは「Publish」をボタンをクリックするだけ。

スプライトシート

生成されたスプライトシート

「会社情報」とその下の要素は別々のレイヤーですが、一つの要素として書き出されます。

PSD内にスプライト用とそうでない要素が混ざっている場合でもOKです。
上と同じPSDファイルで、必要のないレイヤーを非表示にしてみます。

スプライト用画像を集めたPSD

スプライト用画像だけを表示したPSD

レイヤーは、こんな感じ。

レイヤーの状態

レイヤーの状態：必要のないレイヤーは非表示に

あとは、パネルの「Publish」をボタンをクリックするだけ。
表示されたレイヤーの要素のみスプライトシートで書き出されます。
※背景レイヤーは、表示・非表示のどちらの状態でも書き出されません。

スプライトシート

生成されたスプライトシート

「Sprite Sheet Gen」をプレゼント！

そんな便利な「Sprite Sheet Gen」を3名様にプレゼントします。

  • Sprite Sheet Gen ($12: 1,510円) x 3名
    ※動作にはPhotoshop CC2014 for Win/OS Xが必要です。

応募期間

2015年5月28日まで。

応募要項

応募要項は、2点。

  1. コリスのTwitterアカウント「@colisscom」をフォローしている。
  2. Twitterの自アカウントで下記の項目を含めて、ツイートしてください。

ツイートに必要な項目

  • Photoshopでスプライト画像があっという間に作成できる国産ツールのプレゼントに応募
    概要
  • http://bit.ly/1F4t6PO @colisscom #colissPresent
    このページの短縮URL、コリスのアカウント、ハッシュタグ

ツイートは、こんな感じで。

一言加えてあると、当選確率がきっとアップするなっしーよヾ(‥ºั▽ºั‥ )/

応募の注意事項

ツイートでの応募は、1回のみでお願いします。
複数回ツイートしても累計はされません。また、重複が多いアカウントは応募からはずします。

当選発表

当選者にTwitterのダイレクトメッセージにてお知らせします。
※その時に@colisscomをフォローしていない人は無効とさせていただくので、必ず「@colisscom」をフォローしておいてください。

当選者の発表日

2015年5月29日 夕方くらい
半額キャンペーンは、5月29日23時59分までです。

プレゼントの受け取り

Sprite Sheet Genをお渡しするフローは、下記のようになります。
※詳細はメールでお伝えします。

  1. 当方からTwitterのDMで、当選を連絡。
  2. 詳細をお伝えするので、メールアドレスをお知らせください。
  3. 制作者からファイルのダウンロード方法をメールでお伝えします。

sponsors

top of page

©2024 coliss