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

Creative CloudのWebサイト上でExtractを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopを使って作成したデザインカンプをCreative Cloudに同期し、Webブラウザ上で画像を切り出したり、CSSやテキストを抜き出したりする機能「Extract」について、ご説明します。
講師:
06:28

字幕

このレッスンでは Photoshop を使って作成したデザインカンプをCreative Cloud 上に同期しWeb ブラウザ上で画像を切り出したりCSS やテキストを抜き出したりする機能 Extract についてご説明します。これから説明する機能を使うにはPhotoshop を使って作成したドキュメントをご自分のマシンにある Creative Cloud Files のフォルダー内に入れておく必要があります。このフォルダー内に置いてあるファイルはCreative Cloud を通じて同期されWeb サイトにログインしてブラウザ上で扱うことが可能です。ご自分のマシンの中でこのCreative Cloud Files のフォルダーの場所が分からない方はこちらのマシンに予めインストールされているCreative Cloud デスクトップアプリケーションのアイコンをクリックして「アセット」>「ファイル」とタブをクリックして表示されるこの画面こちらの「フォルダーを開く」ボタンを押します。そうすると、自動で Creative Cloud Files のフォルダーを開いてくれますのでこの中に作った PSD を入れておくようにしましょう。 では、Creative Cloud の Web サイトにログインした状態で作業を進めていきます。この Creative Cloud の Web ページにどのようにたどり着くかですがこれも最初からやってみたいと思います。また先程使った Creative Cloudデスクトップアプリケーションのアイコンをクリックして「アセット」>「ファイル」とタブを辿っていきます。そして「Web を表示」をクリックしてください。もしログインがまだの方はログインをした後にこちらの「マイアセット」のページにやってきます。今サンプル用の1つの PSD が登録されていますのでこちらをクリックして開きます。そして Extract のタブをクリックします。全体表示、画面にフィットした状態でPSD が表示されますので使いやすいサイズに拡大表示をしておきましょう。1:1 原寸大にしても構いませんし見づらいようでしたら 50% 等にしておいてもかまいません。では、ここからテキストや CSS を取り出す作業をしてみましょう。まずは1番大きなキャッチコピーこちらの部分をクリックしてみます。青いダイアログボックスが出てきますので「テキストをコピー」をクリックしてみます。 クリップボードにテキストがコピーされたのでDreamweaver に移動してみます。こちらに右クリックしてペーストします。すると、今コピーしたテキスト、キャッチコピーがペーストされたことが分かります。では、今度は CSS の方を Extract から抜き出してみたいと思います。またブラウザに戻って今度はこちらの「仕事をしたい」というボタンの背景にうっすらグラデーションが付いていますのでこちらの CSS をコピーしてみたいと思います。少し拡大表示をしてこちらの「仕事をしたい」ボタンの後ろにある角丸の背景をクリックします。そして表示されたダイアログボックスの「CSS をコピー」をクリックします。クリップボードにコピーされたのでDreamweaver で CSS ファイルの方に移動してまたペーストしてみましょう。先程のボタンの背景には角丸それからグラデーションが指定されておりましたのでそれらの指定が全てこのようにコピーされてペーストすることができました。テキストと CSS だけではなく画像を書き出すことも可能です。もう一度 Web ブラウザの方に戻ってきます。また表示倍率を変えて全体表示に戻した後今度はこちらのメインのお花の写真を書き出してみたいと思います。 花の写真をクリックしたら今度はダイアログボックス右側のダウンロードボタンをクリックします。そして書き出しのファイル形式を選びますがここでは JPEG にしておきましょう。画質は少し低めの 60 にしておきます。そして、保存をクリックします。そうしますと、この画像は右側の「アセット」というタブの所に書き出されたものが入ります。ローカルのマシンにもすぐに同期されます。先程の Creative Cloud デスクトップアプリケーションを開いて「フォルダーを開く」をクリックしますとファイル名の付いた assets というフォルダーが出来上がっています。こちらのフォルダーを開きますと今書き出した画像がこのように同期されていることが分かります。プレビューしてみると、このような感じで書き出されていることが分かります。この時のファイル名も予め付けておいたレイヤー名に基づいて付けられるのでレイヤー名を分かりやすく半角英数で付けておくと便利です。いかがでしょう。Extract を利用すると画像の書き出し、テキストの抜き出し、CSS の抽出などコーディングの効率が非常にアップするイメージが掴めたのではないでしょうか。 是非試してみてください。ここまで、このレッスンではPhotoshop を使って作成したデザインカンプをCreative Cloud に同期しWeb ブラウザ上で画像を切り出したりCSS やテキストを抜き出したりする機能 Extract についてご紹介しました。

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

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

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

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

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

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