アセットの抽出とは
新しい アセットの抽出 Photoshop CC 2014の特徴は、レスポンシブウェブデザイン（RWD）のためのイメージ作成のその他の面倒なワークフローにアフターバーナーを取り付けることです。 Extract Assetsコマンドを使用して、Webページのコンプをすぐにアセンブリ可能なアセットに数分で短縮する方法を見てみましょう。
明らかな質問から始めましょう：資産の抽出とは？
簡単に言えば、Extract AssetsはPhotoshopの新機能で、PhotoshopのGenerator機能にインターフェイスを提供し、PhotoshopファイルからWebおよびスクリーンデザイン用のイメージングアセットの作成を自動化できます。 アセットの抽出コマンドを使用すると、アセットを作成するレイヤー、物理サイズ、ファイル形式、およびディスク上の保存場所を定義できます。この機能は、テキストをビットマップにすることを意図していない限り、テキスト用ではありません。実際には良い考えではありません。
始めましょう。
08の02Photoshopの.psdファイルを開く
私が使用している例には、Illustratorのスマートオブジェクト、テキスト、テキストを含むヒーローユニット、画像とボタン、およびサイトのテーマを強化する一連の屋外画像が含まれています。ここで重要なのは、レイヤーをグループ化することです。これは、さまざまな画面解像度とサイズに適応するWebレイアウトにすばやく追加できるように、これらのアイテムをすべてコンプから抜き出す作業であるため、必要です。
資産を抽出する2つの方法
レイヤー名にグラフィック拡張機能を追加してオブジェクトを抽出するGenerateとは異なり、 アセットの抽出 に到達できるインタフェースを使用します。 右クリック レイヤーを選択するか、レイヤーを選択してファイル>アセットの抽出.
04/08アセット抽出インタフェース
アセットの抽出ダイアログボックスは、直感的です。抽出するレイヤーまたは選択肢が表示されます。その上にファイルのサイズが表示され、その下にはオブジェクトをズームイン/ズームアウトできるコントロールがあります。ダイアログボックスの右側は、魔法の発生場所です。上部の4つのボタンを使用して、オブジェクトの解像度/サイズを選択できます。次のストリップには選択したレイヤーが表示され、 + signを使用すると、選択したレイヤーを別の形式で出力することもできます。ザ ごみ箱 nはキューからレイヤーを削除します。次のストリップダウンではファイルの種類を選択でき、出力イメージの幅と高さを調整できます。
08の05SVGイメージの抽出
Photoshopはsvgイメージをうまく処理できず、ブラウザやデバイスはIllustratorイメージを表示できません。これにより、ここに表示されているIllustratorのロゴなどのベクターアートワークに使用されるsvgファイルの台数が増加しました。ベクタであるため、その解像度はデバイスに依存しないため、ディテールやイメージを失うことなくスケーリングできます。 Illustratorのスマートオブジェクトをsvgに変換するには、 svg ポップダウンからクリックして エキス.
06の08資産抽出プロセス
「抽出」ボタンをクリックすると、いくつかのことが起こります。最初に、ファイル名が変更される可能性があることを警告します。これは大きな問題ではありません。次に、資産を保持するために新しいフォルダが作成されていることが伝えられます。プロセスが終了すると、元の.psdファイルと同じ場所に置かれたフォルダが開き、新しいアセットが表示されます。
07/08設定ボタンはあなたの新しいベストフレンドです
クリックする 設定 ボタンが開きます 設定ダイアログボックス それは真剣に有用です。左側の設定は倍率です。開発者が特定のデバイスの画面解像度をターゲットにするためにメディアクエリで使用する画像のさまざまなコピーを作成します。たとえば、3倍のバージョンはiPhoneまたはiPadのRetinaディスプレイをターゲットにしますが、1.25の要素はAndroidデバイスを指差します。ファイル名の末尾にサフィックスが追加され、開発者はメディアクエリーで使用するイメージを簡単に識別できます。完了したら、 OK ボタンをクリックすると、ダイアログボックスの資産の抽出エリアで選択内容が点灯します。この設定にアクセスするには、エキスパートの領域の歯車アイコンをインターフェースの右側にクリックします
08の08仕上げ
抽出ボタンをクリックすると、すべてのアセットが作成され、フォルダに追加されます。この時点で、開発者にフォルダのコピーを送信し、次のプロジェクトに移動するだけです。
