Photoshop Extract:Afterburnerでモバイルグラフィックスの生産が始まる

08の01

アセットの抽出とは

Photoshopでコンプを作成します。

Photoshop CC 2014の新しいExtract Assets機能は、レスポンシブウェブデザイン(RWD)のためのイメージ作成のその他の面倒なワークフローにアフターバーナーを追加します。 Extract Assetsコマンドを使用して、Webページのコンプをすぐにアセンブリ可能なアセットに数分で短縮する方法を見てみましょう。

明らかな質問から始めましょう:資産の抽出とは?

簡単に言えば、Extract AssetsはPhotoshopの新機能で、PhotoshopのGenerator機能にインターフェイスを提供し、PhotoshopファイルからWebおよびスクリーンデザイン用のイメージングアセットの作成を自動化できます。 [アセットの抽出]コマンドを使用すると、アセットを作成するレイヤー、物理サイズ、ファイル形式、およびディスク上の保存場所を定義できます。 この機能は、テキストをビットマップにすることを意図していない限り、テキスト用ではありません。実際には良い考えではありません。

始めましょう。

08の02

Photoshopの.psdファイルを開く

Photoshopで作成されたWebページcompから始めます。

私が使用している例には、Illustratorのスマートオブジェクト、テキスト、テキストを含むヒーローユニット、画像とボタン、およびサイトのテーマを強化する一連の屋外画像が含まれています。 ここで重要なのは、レイヤーをグループ化することです。 これは、さまざまな画面解像度とサイズに適応するWebレイアウトにすばやく追加できるように、これらのアイテムをすべてコンプから抜き出す作業であるため、必要です。

03/08

資産を抽出する2つの方法

アセットを抽出するには、ファイルメニューまたはレイヤーを右クリックします。

レイヤー名にグラフィックエクステンションを追加してオブジェクトを抽出するGenerateとは異なり、 Extract Assetsは、レイヤーを右クリックするか、レイヤーを選択して、 [アセットを抽出 ]を選択することで実現されるインターフェイスを使用します。

04/08

アセット抽出インタフェース

アセットの抽出ダイアログボックス。

アセットの抽出ダイアログボックスは、直感的です。 抽出するレイヤーまたは選択肢が表示されます。 その上にファイルのサイズが表示され、その下にはオ​​ブジェクトをズームイン/ズームアウトできるコントロールがあります。 ダイアログボックスの右側は、魔法の発生場所です。 上部の4つのボタンを使用して、オブジェクトの解像度/サイズを選択できます。 次のストリップには選択したレイヤーが表示され、 +記号をクリックすると、選択したレイヤーを別のフォーマットで出力することができます。 Trash Ca nはキューからレイヤーを削除します。 次のストリップダウンではファイルの種類を選択でき、出力イメージの幅と高さを調整できます。

08の05

SVGイメージの抽出

svgイメージの抽出。

Photoshopはsvgイメージをうまく処理せず、ブラウザとデバイスはIllustratorイメージを表示できません。 これにより、ここに表示されているIllustratorのロゴなどのベクターアートワークに使用されるsvgファイルの台数が増加しました。 ベクタであるため、その解像度はデバイスに依存しないため、ディテールやイメージを失うことなくスケーリングできます。 Illustratorのスマートオブジェクトをsvgに変換するには、ポップダウンメニューから「svg」を選択し、「 抽出」をクリックします。

06の08

資産抽出プロセス

画像は.psd画像と同じ場所にあるフォルダに置かれます。

「抽出」ボタンをクリックすると、いくつかのことが起こります。 最初に、ファイル名が変更される可能性があることを警告します。 これは大きな問題ではありません。 次に、資産を保持するために新しいフォルダが作成されていることが伝えられます。 プロセスが終了すると、元の.psdファイルと同じ場所に置かれたフォルダが開き、新しいアセットが表示されます。

07/08

設定ボタンはあなたの新しいベストフレンドです

デバイスの解像度に対応します。

[ 設定]ボタンをクリックすると、 [ 設定]ダイアログボックスが開きます。 左側の設定は倍率です。 開発者が特定のデバイスの画面解像度をターゲットにするためにメディアクエリで使用するイメージのさまざまなコピーを作成します。 たとえば、3倍のバージョンはiPhoneまたはiPadのRetinaディスプレイをターゲットにしますが、1.25の要素はAndroidデバイスを指差します。 ファイル名の末尾にサフィックスが追加され、開発者はメディアクエリーで使用するイメージを簡単に識別できます。 終了したら、[ OK ]ボタンをクリックすると、ダイアログボックスの[資産の抽出]エリアで選択内容が点灯します。 この設定にアクセスするには、エキスパートの領域の歯車アイコンをインターフェースの右側にクリックします

08の08

仕上げ

さまざまなフォーマットと解像度を持つ複数の画像が抽出されます。

[抽出]ボタンをクリックすると、すべてのアセットが作成され、フォルダに追加されます。 この時点で、開発者にフォルダのコピーを送信し、次のプロジェクトに移動するだけです。