PhotoshopでWebデザイン

Dreamweaverと連携

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DreamweaverにPhotoshop画像をスマートオブジェクトとして配置する方法をみていきます。
講師:
03:07

字幕

Photoshopは他の Creative Cloud Applicationと連携させることができます。ここでは、Dreamweaver との親和性を見ていきたいと思います。まず、Chapter 12 のExerciseフォルダに入っているrobot_ad.psd のPhotoshop データをDreamweaver に挿入したいと思います。Dreamweaver に切り替えます。Dreamweaver CC でHTML の新規ドキュメントを作成します。「デザイン」タブにいることを確認してから「挿入」>「イメージ」>「イメージ」をクリックします。デスクトップのExcercise Files のChapter 12 のrobot_ad.psd を選択します。Dreamweaver に、まず保存する必要があるという風に言われます。OK ボタンを押します。保存していきましょう。まず、この画像が右下にドロップシャドウを含んでいます。なので、半透明が扱える「PNG 24」を選択します。OK を押します。保存する場所はデスクトップにあるExcercise Files のChapter 12 にしましょう。 この中に、新規フォルダとしてDreamweaverというフォルダを作成します。ここにrobot_ad.png で保存します。「保存」OK ボタンを押します。そうすると、この画像がスマートオブジェクトになりました。左上に、「同期したイメージ」というアイコンがあります。この画像は PNG としてDreamweaver では扱われますがPhotoshop データの情報もまだキープしています。右クリックから「オリジナルの編集に使用」>「Adobe Photoshop CC」を選択します。Photoshop でPSD ファイルが開きました。変更を加えたいと思います。「テキストツール」に持ち替えてTHE ROBOT IS COOLとしたいと思います。Command/Control+S で保存します。Dreamweaver に戻ります。右クリックから「オリジナルから更新」これを選択します。そうすると、オリジナルの PSD を基に最新の画像に更新することができます。この様に、アプリケーションの連携でワークフローをスピードアップできます。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

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

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

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