PhotoshopでレスポンシブWebデザイン!

複数アートボードの画像書き出し

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopドキュメントから複数のアートボードを個別に書き出す方法についてご説明していきます。この方法を使うと、デザインカンプを協業している制作者やクライアントと共有するのも、とても簡単です。
講師:
03:15

字幕

このレッスンでは Photoshop のドキュメントから複数のアートボードを個別の画像に書き出す方法についてご説明していきます。この方法を使うと、例えばデザインカンプを協業している制作者やクライアントと共有するのもとても簡単になります。今ご覧いただいているのは1つのドキュメントの中に複数のアートボードがある状態です。一番左が PC 用のデザインカンプ。そして右の3つがスマートフォン用のデザインカンプのバリエーションです。こちらを1つのアートボードにつきそれぞれ1枚の画像として書き出してみたいと思います。メニューバーの「ファイル」から「書き出し」>「書き出し形式」もしくは「JPEG としてクイック書き出し」を選択します。この JPEG の部分はデフォルトでは「PNG としてクイック書き出し」になっていると思いますのでもしこちらの PNG を JPEGもしくは別のファイル形式に直したい方は「書き出しの環境設定...」から設定して下さい。ここでは「書き出し形式」を使ってやってみます。「書き出し形式」のダイアログボックスがでてきました。少しダイアログボックスが大きすぎるので縮めて表示させます。左側にそれぞれのアートボードが既に付けてある名前で表示されています。 スケールを変更することも可能です。デフォルトでは1倍のサイズですけど右上の+のアイコンをクリックして例えば2倍サイズ、3倍サイズ等の様に高密度な画面用の大きな画像を設定することもできます。また、1つ1つの画像に対して異なるファイル形式を設定することも可能です。この様にすべての設定が終わりましたら右下の「すべてを書き出し」をクリックします。そして書き出し先のフォルダを選択して「書き出し」をクリックして下さい。この様にそれぞれのアートボードごとに一枚ずつの画像が書き出されていることがわかります。後はこれをメールに添付するなりタスク管理システムに投稿するなどして「今この様なデザインを検討しています。」ということを素早くプロジェクトに関わる人に共有することが可能です。ここまで Photoshop のドキュメントから複数のアートボードを個別に書き出す方法についてご説明しました。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。