HiDPIの画面用の画像など、webに最適化された画像を様々な解像度でPhotoshopドキュメントから一括抽出する方法を説明します。
アセットを一括抽出する

新しい一括抽出機能を使用すれば、DreamweaverのExtractパネル内でPhotoshopドキュメントを開き、プロダクション対応の画像を様々な解像度で抽出できます。様々な解像度のweb画像を抽出することで、表示するデバイスの解像度に応じて最適な画像を表示するようにwebサイトを最適化できます。

一括抽出

DreamweaverのExtractでPSDをアップロードする

batch-extract-assets.zipプロジェクトファイルをダウンロードして展開します。Dreamweaver CCでindex.htmlを開き、Extractワークスペースに切り替えます。

Extractパネルで「PSDをアップロード」をクリックし、プロジェクトファイルに含まれているvermilion-design.psdを開きます。

DreamweaverのExtractでPSDをアップロードする

Extractパネルでヒーロー画像を選択し、抽出アイコンをクリックしてアセット抽出のオプションを表示します。

画像を抽出する前に、抽出する場所とファイル名のプロパティを確認して、サイト構造に最適な設定にしてください。確認するには、「環境設定を編集」アイコンをクリックします。

hero画像を選択

Extractの環境設定を指定する

デフォルトでは、Dreamweaverでは、MDPI(中解像度)、XHDPI(超高解像度)、XXHDPI(超超高解像度)の3つの異なる解像度で画像が抽出されます。環境設定ダイアログで次の手順をおこないます。

  1. 抽出する解像度を指定します。

  2. Dreamweaverでファイル名に付加される接尾辞をカスタマイズします。

  3. 画像を保存するフォルダーを選択します。

「フォルダー」セクションで、3つの各解像度のファイルパスの先頭に「images/」を追加します。「適用」をクリックし、「閉じる」をクリックします。

Extractの環境設定を指定する

画像を抽出する

アセット抽出のオプションでは、アセット名やファイル形式などの詳細情報を設定できます。

複数保存」をクリックします。

抽出が完了したら、ファイルパネルを開いて一括抽出の処理結果を確認します。Dreamweaverでは、Extractの環境設定にもとづいて3つの異なる解像度でヒーロー画像が抽出され、サイト構造内のカスタムフォルダーに追加されます。これはすべてワンクリックで実行できます。

画像を抽出する

画像を各メディアクエリーに追加する

DeviceAware.css」を開くと、3つの異なる画面解像度(小・非Retina、中・Retina、大・Retina)を定義する3つのメディアクエリーが表示されます。メディアクエリーにはそれぞれCSSクラスが含まれています。それぞれのクラスでbackground-imageプロパティを定義して、各メディアクエリーに最適な抽出画像を選択します。

右側の例では、Retina画面(中)を定義するメディアクエリーと、対応するCSSクラスを示しています。この解像度では、XHDPIバージョンの画像が最も適しています。

画像を各メディアクエリーに追加する

パーセントで画像サイズを定義する

レスポンシブなwebサイトでは、絶対ピクセル値ではなくパーセント値で、幅、高さなどの位置プロパティを定義します。

Extractパネルで単位をパーセントに変更するには、ヒーロー画像を選択し、パーセント記号(%)を選択します。

これで幅と高さのプロパティがパーセントで表示されるようになりました。2つの要素を選択すると、要素間の間隔がパーセントで定義されます。これまでと同様に、ExtractパネルからCSSを直接選択・コピーして、コードに貼り付けることができます。

パーセントで画像サイズを定義する
04/24/2018

提供元:Sergiy Maidukov

このページは役に立ちましたか。