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

Photoshopと連携してiPhoneで表示確認する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、iPhoneにインストールしたPreview CCをマシンと接続し、Photoshop CC 2015のアートボード機能を利用して作成したドキュメントを表示させる練習をしてみましょう。
講師:
05:41

字幕

このレッスンでは iPhone にインストールした Preview CC をマシンと接続し、Photoshop CC 2015 のアートボード機能を利用して作成したドキュメントを表示させる練習をしてみましょう。まず確認しておきたいのはPreview CC を使って表示できるのはPhotoshop CC 2015 以上で作成したアートボードを利用しているドキュメントです。こちらの画面のように複数のアートボードもしくは1つのアートボードでもかまいません。あらかじめ、新規ドキュメントを作る時にアートボードを選択してデザインカンプを作成しておくようにしましょう。また、Photoshop と Preview CC の起動には同じ Creative Cloud アカウントでログインしておくことも忘れないでください。さて、この画面の左側ですけれどもQuicktime player の機能を利用して私の実際の iPhone の画面を高仕様のマシンに投影している状態です。こちらの左側のウィンドウ私の iPhone の操作に従ってリアルタイムで動きますのでiPhone の画面だと思ってご覧ください。さて、この Preview CC がインストールされている iPhone をPhotoshop CC 2015 がインストールされているマシンに接続するにはUSB ケーブルを使う方法とWi-Fi を使う方法があります。 USB ケーブルで接続する場合にはiTunes がマシンにインストールされている必要があります。iTunes をインストールした後にiPhone とマシンを USB ケーブルで繋いでください。Wi-Fi で接続する場合にはマシンと iPhone が同じ Wi-Fi ネットワーク上にあることを確認してください。ここまでできたら Preview CC とPhotoshop CC 2015 を接続してみましょう。1番最初に接続する場合にのみPhotoshop のこちらのデバイスプレビューのパネルを開いておく必要があります。それでは左側の画面を見てください。iPhone の方で Adobe Preview のアプリを起動していきます。このように接続されてSP 01 こちらのアートボードがすぐにiPhone の画面の方に表示されました。異なるサイズのアートボードが1つのドキュメント内に複数存在している場合には今接続しているデバイスに最もぴったりのサイズのアートボードが優先して表示されます。もし iPad を繋いでいる場合にはこちらに仮に iPad 用のサイズのアートボードが用意されていましたらそちらが優先して表示されます。 さて、今こちらのドキュメントの中にはSP 01、02、03 とスマートフォン用の3つのデザインバリエーションをあらかじめアートボードを分けて作ってあります。こちらを左側のこの iPhone 画面上で操作をすることができます。スワイプしていきますとSP 02、SP 03 というようにiPhone の Preview CC 上でスワイプして確認することができます。また、画面上部をタップしてこのようにドロップダウンメニューからアートボードを移動することも勿論可能です。また、Photshop で行ったデザインの変更もほぼリアルタイムで iPhone の方に反映されますのでちょっとやってみましょう。では今 SP 03 の画面が表示されているのでこちらを Photoshop 上で拡大して文字を打ち変えてみます。では「ログイン」になっている所を例えば「登録」に変えてみましょう。文字を打ち変えてみました。暫く待つと、こちらの左側のiPhone の画面でも文字の変更が反映されています。概ねリアルタイムに表示されますけれども複雑なドキュメントですとかレイヤーの数が多い場合には表示に時間がかかる場合もあるのでご注意ください。 Preview CC を使ったデバイスの接続は2つのデバイスまで同時に利用可能です。iPhone と iPad 両方を一度に接続して1つのドキュメントの中のアートボードをそれぞれチェックすることができます。文字のサイズやボタンのサイズなどPC の画面でデザインしていくとどうしても感覚が狂ってしまう場合がありますので是非リアルタイムに実機で確認しながらデザイン作業を進めてみてください。ここまで、iPhone にインストールしたPreview CC をマシンと接続してPhotoshop CC 2015 のアートボード機能を利用して作成したドキュメントを表示させる方法について解説しました。

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

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

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

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

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

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