Photoshopをさらに使いこなす!

CSSへの書き出し・読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshop CCからCSSファイルとの連携も可能になりました。テキストレイヤーからCSSスタイルをコピー&ペーストできたり、すでに色が定義されているCSSをスウォッチとして読み込むことが可能です。
講師:
04:21

字幕

Photoshop CC の新機能の1つにレイヤースタイルから CSS を書き出す機能が追加されました。非常に便利ですね。Web サイトを作るうえで色とかの情報を設定したりそれをもう一回 CSS で書き直したりということが無くなるというのはかなりありがたいことです。では早速見てみましょう。例えばここ「気持ちいい一日のために」これをスタイルをコピーしたいと思います。右クリックをして上から二番目「CSS をコピー」というのがあります。これをクリックしてテキストエディターやメモ帳でもいいです。このまま貼り付けるとこのように色々なスタイルが当てられています。因みに、この「. 気持ちいい一日のために」というのはPhotoshop のここ、レイヤー名がクラス名としてなっているんですね。例えば today という風にレイヤー名を変えて右クリック、「CSS をコピー」します。テキストエディターで貼り付けてみるとこのように today に変わりました。ですので、なるべくレイヤー名は英語などそしてそのスタイルWeb サイトを作る上でクラスを付けることを意識しながらこのレイヤー名を付けていくと良いです。更に、ここの要素を見ていきましょう。 font size、font family はありがたいです。colorline-heighttext-alignここで使わないものはどんどん削除しちゃいましょう。line-height とか position は要らないですね。ここは別の HTML と含めてスタイルをコーディングしていくと思うので。ここの情報だけあるとかなり便利ですね。その他にもこの角丸長方形も同様に右クリックをして「CSS をコピー」テキストエディターに貼り付けてみましょう。こちらも同様になりました。要素が違うのは border-width線の幅ですね。あと、線の色線のスタイルこれは普通の直線やドットなど色々選べます。あとは、角丸特にこの角丸などは見た目だけで分からないし作った後 Photoshop のデータから参照できないケースもあるんです。なので、スタイルをコピーでこのように同じサイズにするには角丸の具合を同じサイズにするにはどうしたらいいかというのがすごく便利です。ここに位置情報もありますがこれも要らないので削除しておきましょう。こうすることで非常に便利。もう一回 Photoshop で定義したスタイルをCSS で又同じように書かなくてもよくなります。 また、Photoshop で嬉しい所は既に CSS が書かれている場合その CSS に書かれた色をスウォッチとして読み込むことができます。まずはスウォッチパネルを表示させましょう。そして、ここのパネルの右上の三角の所これをクリックして「スウォッチの読み込み」をクリックします。そうすると読み込むのはどこか、となるのでここで CSS を設定しましょう。CSS ファイルが読み込めるようになっています。選択して、「開く」を押すとこのように今追加されました。これで Web サイトで既に定義されている色を基にPhotoshop のデザインをすることができます。こうしておけば人によってデザインが違うとかWeb サイトと Photoshop のデータで色が違うとかそういったことが無いのでこの色の共有ができるというのも物凄くありがたいですね。このレッスンでは PSD ファイルからCSS のスタイルをコピーして書いていく方法また既に定義されたスタイルシートからスウォッチパネルに色を読み込む方法を紹介しました。

Photoshopをさらに使いこなす!

このコースではPhotoshop用のエクステンションや連携可能な他のソフトなどを活用して、普段の作業をよりいっそう便利にする方法を紹介します。BridgeやCamera Rawフィルターを素材の整理や補正に利用したり、CanLinkItやdevRocket、speccterなどのエクステンションを活用した業務の効率化について解説します。

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

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

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

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