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

Dreamweaver上でExtractを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Creative CloudのWebサイト上からだけではなく、Dreamweaver上でもExtractを利用し、画像切り出しおよびCSSやテキストの抜き出しをする方法について、お話ししていきましょう。
講師:
04:36

字幕

このレッスンでは CreativeCloud のWeb サイト上からだけでなくDreamweaver 上でもエクストラクトを利用して画像切り出しや CSS テキストの抜き出しをする方法についてお話ししていきます。今見て頂いてるのはDreamweaver の画面です。HTML ファイルと CSS ファイル、空のものを1つずつ作った状態になっています。Dreamweaver CC 2015 でエクストクトを使うには右上のドロップダウンメニューからExtract を選択して下さい。そうしますとしばらく読み込み時間があった後に左側のパネルに Creative Cloud Files の中身が表示されます。そして「PSD をアップロード」というボタンから新しい PSD を選択して入れることもできます。ではここでは新しい PSD を1つアップロードしました。この画面からアップロードした PSD はCreative Cloud Files のフォルダの中に複製されて保存されます。では今使おうとしているPSD をクリックしましょう。解析に少し時間がかかりますので待ってみます。PSD が表示されましたのでこちらからまずはテキストを抜き出してみたいと思います。 ではこの本文のテキストをクリックしてみましょう。「テキストをコピー」をクリックします。そして index.html の方でペーストをしますと本文のテキストがコピペされたことがわかります。次は CSS です。それではこのヘッダー部分の背景色をコピーしてみたいと思います。ヘッダー部分の長方形を選択して「CSS をコピー」をクリックします。次に CSS ファイルで右クリックしてペーストしましょう。バックグラウンドカラーがコピペされたことがわかります。最後に画像の書き出しもやってみたいと思います。今度は此方の猫の写真こちらを選択して「アセットを抽出」この下向きの矢印のボタンをクリックします。保存先、保存先は Creative Cloud Files にしたいのでこちらを選びます。ご自分がお使いになるフォルダを選択して頂いて構いません。保存先のフォルダーを指定してファイル名を指定します。最初の状態ではレイヤー名がこちらに入っていますのでレイヤー名を半角英数字空きがないという状態でつけておくと変更する必要がありません。それから、PNG もしくは JPEG で画像の書き出し形式を選択します。決まったら右下の「保存」をクリックしましょう。 これでアセットとして画像が抽出されました。index.html の中から挿入してみましょう。Image、そして Creative Cloud Files先程書き出された、この cat1.pngを選択して開きます。こちらを見て頂きますと書き出した画像がこの様に HTML 要素の中に入ったことが分かります。1点注意事項ですけどこのエクストラクトの機能はオフラインになっていると使うことが出来ませんので必ずインターネット回線がある環境で使ってください。以上、このレッスンでは Creative Cloudの Web サイト上だけではなくDreamweaver 上でもエクストラクトを利用して、画像切り出しCSS やテキストの抜きだしをする方法について解説しました。

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

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

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

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

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

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