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

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

キーポイント

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

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

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

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

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

「エラーが発生した」

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

デバイスに適応型畫像コンテンツを配信するための成熟した方法はすでにいくつかあります?，F(xiàn)時(shí)點(diǎn)で最良の選択は次のとおりです

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

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

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

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

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

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

layout

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

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

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

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

を使用してください。

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

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

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

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

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

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

png8

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

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

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

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

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

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

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

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

PSDを外部請負(fù)業(yè)者に配布します

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

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

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

概要

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

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

FAQ

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

以上がPhotoshop CC 2014でレスポンシブ畫像資産を生成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。