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

Adobe Stockを利用して写真を配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Adobeが2015年に開始したストックフォトサービス、その名も「Adobe Stock」からカンプ用の写真をPhotoshop内に直接ダウンロードしてレイアウトに使用したり、購入したりする方法について解説します。
講師:
06:15

字幕

このレッスンでは Adobe が 2015 年に開始したストックフォトサービスその名も Adobe Stock からカンプ用の写真を Photoshop 内に直接ダウンロードしてレイアウトに使用したり購入したりする方法について解説します。今画面に映っているのがAdobe Stock の Web サイトです。他のストックフォトサービスと同様にキーワードで検索をして写真を探し、購入することができます。軽く料金について触れておくと基本的には月額課金制になっていてCreative Cloud の料金とは別途月額で契約する必要があります。また、この方式を使わなくても個別に単品購入することもできます。そして、購入をしなくても写真に透かしが入った状態でAdobe Creative ライブラリの中に保存してPhotoshop 上でカンプに入れることもできます。ということは、例えばプレゼンテーションの時に透かしの入った状態の写真でレイアウトを作ってその写真がクライアントからOK を貰えたら改めて購入をするということが可能になります。では 実際に このサイトで写真を検索してAdobe Creative ライブラリの中に保存してみましょう。 花の写真を使いたいので検索窓に「花」と入力します。そして写真だけを検索対象にしたいので他のもののチェックを外します。写真だけチェックを残した状態にします。検索してみます。花の写真が色々出てきました。ではこのアジサイの写真を使ってみたいと思います。写真の上にマウスカーソルを重ねると3つアイコンが出てきます。この真ん中の下向き矢印のアイコンダウンロードのアイコンのところにマウスカーソルを重ねると「プレビューを保存」という文字が出てきます。こちらは今私が Adobe Stock のサイトにCreative Cloud のアカウントでログインしているので私の予め持っている Creative Cloud の ライブラリの中に透かしの入った状態の写真を保存できる仕組みになっています。何種類かライブラリを作ってあるんですがではこの lynda.jp という名前のライブラリに保存してみましょう。「保存されました」と出たらPhotoshop の方に移動してみます。こちらが 私が今 Photoshop CC 2015.1 でレイアウト作業をしているWeb サイトのデザインカンプです。そしてこちらのアイコンがライブラリのパネルです。 ここに先程保存したアジサイの写真がすでに同期されています。これはまだ Adobe Stock からライセンスを買っていない状態の透かしが入った状態の写真です。実際にレイアウトの中に入れてみましょう。ライブラリパネルから写真をドラッグ&ドロップするだけでこのように写真が入ってきます。そして、バウンディングボックスが表示されていますのでこれを使って横幅を合わせまして丁度良いところで Return もしくはEnter キーを押して大きさを確定します。次に、写真を実際に使用するエリアでクリップしたいと思います。レイヤーパネルを開いて今ここに Adobe Stock からダウンロードしてきたアジサイの写真が入っています。因みに、この写真のサムネイルにこの雲のアイコンがついているものはAdobe Stock からダウンロードしてきた写真だよ、というサインです。では、この写真の下にメインエリアという名前で予め作ってあった写真を使うエリアのレイヤーこちらを使ってクリップしていきましょう。写真のレイヤーで右クリックしてクリッピングマスクを作成するとこのメインエリアの大きさで写真がクリップされました。あとは位置を調整してみたいと思います。 このように、写真の透かしが入った状態ですがデザインの中に Adobe Stock の写真を入れることができました。あとはこちらをクライアントチェックに回してOK をもらえたら、写真の購入をしてみたいと思います。写真の購入をしたい時にはまたライブラリパネルを開いて対象となる写真を右クリックします。「画像を購入」というメニューが出てくるのでこちらを選択します。そうすると、「Adobe Stock 画像を購入」というメッセージが出てきました。これは今私が Adobe Stock の月額課金をしていない状態なので出てきたアラートです。OK を押すとブラウザの方に移動します。そしてここでどのようなプランで購入するかという選択画面が出てきますのでお好きなものを選択すると透かしがない状態の写真に差し変わるようになっています。ここまで、このレッスンではAdobe が 2015 年に開始したストックフォトサービスAdobe Stock からカンプ用の写真をPhotoshop 内に直接ダウンロードしてレイアウトに使用したり購入したりする方法について解説しました。

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

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

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

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

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

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