Photoshop CC 2014でレスポンシブ画像資産を生成します

Photoshop CC 2014を効率的に使用して、レスポンシブイメージリソースを作成

この記事はAdobeが後援しています。 SitePointへのご支援ありがとうございます！

写真：アンディ・スコフィールド - CC

キーポイント

• Photoshop CC 2014は、スマートオブジェクトの使用、レイヤーマーシャリング、「抽出リソース」機能など、レスポンシブな画像リソースを生成するための一連のツールを提供します。これらのツールにより、品質を失うことなく、画像を効率的にサイズ変更、変換、およびエクスポートできます。
• 可能な限りSVG（スケーラブルベクトルグラフィックス）を使用します。これは、画質を失うことなく即座に再スケーリングできる小さなファイルを提供するためです。これは、レスポンシブデザインで特に役立ちます。これは、すべての解像度に対して1つのファイルを管理する必要があることを意味するためです。
• Adob​​eの新しいオンラインサービスであるCreative Cloud Assetsは、PSD作品の簡単な共有と共同処理を可能にします。これには、監査のためにPSDSを顧客と共有し、PSDを外部の請負業者に配布すること、および同僚にPhotoshop自体をインストールすることなく、リソースを抽出するためのアクセスを提供できることが含まれます。

適切な機器に適切なリソースを提供します

5年前、インターネットはより予測可能な場所でしたね。 Web開発者として、Webブラウザーは幅が640ピクセル以上、1240ピクセル以下であると合理的に期待できます。私たちの現在の現実は非常に異なっています。今日、モバイルユーザーは通常、トラフィックの半分以上を占めています。真実は、2014年には、「私たちの高速道路」には車やトラックと同じくらい多くのオートバイがありました。それでは、なぜこれらすべての非常に異なるデバイスに同じ「ホームサイズ」画像をロードするのでしょうか？ しかし、これは本当に重要ですか？

先月、Tammy Evertsは、ユーザーの動作に対するWebサイトのパフォーマンスの影響に関するアラートデータをリリースしました。これらには次のものが含まれます 遅いWebページは、年間30億ドル以上の売上損失をもたらす可能性があります

買い物客の44％は、パフォーマンスが遅いパフォーマンスと解釈され、

「エラーが発生した」

トランザクション中の2秒遅延= 87％カート放棄率
2. Tammyのデータによると、ゆっくりとしたホームサイズの画像を小型デバイスに送信することは失礼であるだけでなく、実際には顧客とお金がかかります。画像を各デバイスの制限に調整することにより、帯域幅コストを節約しながらページをより速く配信できます。
正しい画像を配信します

デバイスに適応型画像コンテンツを配信するための成熟した方法はすでにいくつかあります。現時点で最良の選択は次のとおりです

squeezr.it

• Adaptive-images.com：Matt Wilcoxのソリューションは、多くの開発者にとってお気に入りのソリューションです。これは、デバイスに依存しないモバイルファーストですが、通常はApacheとPHPのセットアップに関するある程度の知識が必要です。
• squeezr.it：squeezrは、適応イメージに大部分が触発されていますが、クライアントポリシーを使用してブレークポイントを決定し、応答することを好みます。

心配しないでください：これらは優れた解決策ですが、今日はそれらに注意を払うことはありません。代わりに、問題の別の部分である画像リソースを見たいと思います。これらすべての異なる画像リソースをどのように生成しますか？ Adobeは、Photoshop CC 2014に反映されているこの問題について多くのことを考えてきました。これは、役立つ一連のツール（新しい、古いもの）を提供します。

ここに、レスポンシブ画像を始めるためのヒントがいくつかあります：

ヒント1：すべての画像をスマートオブジェクトとして埋め込んでください

スマートオブジェクトは新しいものではありません。2005年以来Photoshopにいますが、レスポンシブデザインのコアツールになりました。それらに破壊的な変換を適用した後でも、スマートオブジェクトは常にの元の画像状態への参照リンクを保持します。たとえば、ほとんどの場合、画像を複数回再スケーリングすると、各反復で画質が低下します。ただし、スマートオブジェクトは、画質を失うことなく、新しい変換を元の画像状態に適用します。これにより、すべての高解像度の画像リソース（アバター、背景、写真など）をスマートオブジェクトに変換することは、ほとんど避けられない選択肢になり、心配することなくサイズ変更、回転、変換、再配置を可能にします。任意のレイヤーをスマートオブジェクトに変換することは、右クリックするのと同じくらい簡単で、「スマートオブジェクトに変換」に変換します。

ヒント2：レイヤーを使用してlayout"は「

layout

」になりました。同じページ要素の位置を2つ、3つ、またはサイズのサイズで管理する方法が必要です。 これは「レイヤーグループ化」の目的です。各新しいレイヤーグループを、特定の時点でレイヤーパネルの「スナップショット」と考えてください。その後、レイヤーグループパネルの1つのボタンをクリックして、いつでもそのスナップショットステータスに戻ることができます。 実際には、これは通常、モバイルレイアウト（モバイルファースト）を構築し、新しいレイヤーマーシャリングとしてキャプチャすることを意味します。その後、タブレットのレイアウトの再設計を開始し、再び別のレイヤーグループにキャプチャできます。

レイヤーグループの実用的なアプリケーション

レイヤーグループパネルを使用すると、クリックしてこれらの状態のいずれかをすぐに切り替えることができます。レイヤーグループ化により、レイヤーパネルの重複が減少し、プロジェクトファイル全体が簡素化されます。

ヒント3：「ストレージをWebとして...」 - 「リソースを抽出する」

を使用してください。

私はいつも花火の画像エクスポートパネルを愛してきたことを認めなければなりません。 Photoshopは、画像を別のアプリケーションとして準備し、独自の組み込み「Webとしてのストレージ」機能を備えていますが、私にとっては、花火ほどシンプル、パワフル、または高速ではありません。

レイヤーパネルの内側から抽出リソースパネルを起動します。

Photoshop CC 2014は、新しい改良された画像エクスポート方法を採用しています。これは、新しい「抽出リソース」機能です。よく見てみましょう。

抽出リソースパネルは、レイヤーパネルで選択した任意のレイヤーを見つけます。理論的には、これは単一の層、すべての層、または2つの間の任意の組み合わせである可能性があります。この新しいパネルを2つの場所から起動できます。

任意のレイヤー/レイヤーを右クリックして、「リソースを抽出する」
1. を選択します
または[ファイル]メニューから[リソースを抽出]を選択します

新しい「抽出リソース」パネルを見てみましょう。

レイヤーは、6つの画像形式のいずれかとしてエクスポートできます。

png8

1. png24
2. png32
3. jpg
4. gif
5. svg（はい、これについては後で詳しく説明します）
25％から400％までの最大8つの異なる解像度を同時に生成するオプションもあります。 Photoshopを使用すると、各ファイル名を自動的に接頭辞し、合理的なフォルダー名にエクスポートします。元のドキュメントを更新するときに、ファイルセット全体を自動的に再生するように設定することもできます。これがどれだけの時間を節約できるかを見るのは難しくありません。現在のワークフローに満足している場合でも、クラシックな「Save As Web」オプションを使用できることに注意してください。ただし、ほとんどの人は新機能のパワーと柔軟性を見ると思われます。

ヒント4：可能な場合はSVGは2014年のWebデザインのホットなトレンドの1つであるため、SVGサポートがPhotoshopに入るのを見るのはエキサイティングです。ベクトルは、画像の品質を失うことなく即座に再スケーリングできる小さなファイルを提供するため、レスポンシブデザインに特に適しています。純粋に実用的な観点から、SVGを使用することは、すべての解像度に対して1つのファイルのみを管理する必要があることを意味します（古いクライアントのフォールバックを除く）。 Photoshop のsvgエクスポートツール

Photoshopを使用すると、SVGとしてレイヤー/レイヤーをエクスポートできますが、ピクセルベースの画像要素は良い結果をもたらす可能性は低いです。ロゴ、アイコン、マスク、その他の形状を含むパスベースのグラフィックは、SVGエクスポートの理想的な候補である可能性があります。

ヒント5：クリエイティブクラウド資産を忘れないでください

PSDを使用する新しい追加の利点の1つは、Adobeの新しいオンラインサービスです。 PSDの作成をクリエイティブクラウドに同期させると、さまざまな便利なヒントが解除されます。これについては、前の投稿で詳しく説明しましたが、重要なポイントは次のとおりです。

PSDを顧客と共有するのは簡単です

ブラウザを介してリソースを抽出します。

顧客レビューのためにJPEG作品を送信するのを忘れました。 Creative Cloudを使用すると、ブラウザでPSDの作業をリアルタイムで表示してコメントできます。そうです、PhotoshopはPSDをレビューする必要がなくなりました。

PSDを外部請負業者に配布します

外部請負業者は、ブラウザを使用してリソースとリソースを直接エクスポートする最新バージョンを直接使用できます。

同僚にリソースを抽出するためのアクセスを提供してください

バージョンが管理したPSDをチームと簡単に共有する簡単な方法があります。自分のPhotoshopをインストールせずに、PSDからCSS、画像、その他のリソースを抽出することもできます。このサービスは、無料のAdobeアカウントを持っている人なら誰でも利用できます。

概要

生物多様性は良いことです！ブラウザのエコシステム（電話、タブレット、ラップトップ、デスクトップ、さらにはテレビ）は豊富で多様であり、今後数年間でより多様になります。これにより、私たちの仕事はもっと楽しくなります。 Responsive Web Designは、「ページ」が実際に「

ページシリーズ」になっていることを教えてくれます。同じ理由で、 " image "も「画像シリーズ」になりました。 Photoshop CC 2014は、これらの「画像シリーズ」を生成するための比較的簡単で高速なワークフローを提供するようになりました。試してみてください。 PhotoshopおよびCSSのレスポンシブ画像リソースの

FAQ

（記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここでは省略されています。PAQパーツは、必要に応じてオプションで保持または書き直すことができます。

以上がPhotoshop CC 2014でレスポンシブ画像資産を生成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。