Photoshopをさらに使いこなす!

webデザインに適した設定にする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
photoshopは写真加工ソフトとして非常に有名ですが、Webデザインでも多く使われています。Webデザインをするときに便利な設定を覚えておきましょう。
講師:
06:11

字幕

Photoshop は基本的には写真を加工するということで非常に有名ですがWeb サイトの制作も十分に行えます。Web サイトを制作する時に見落としがちな設定気を付けなければいけないことを本レッスンにてポイントとして確認しておきましょう。まずは Photoshop のメニューから「環境設定」を開いて下さい。ここの中の1、2、3と移動していってずっと下に行くと左側に「単位・定規」というのがあります。ここをクリックしてこの単位が mm ではなくpixel になっていることを確認して下さい。印刷ですと、mm の設定が必要ですがWeb デザインにおいてはpixel で行われるので要注意ですね。また基本的に自分で何かを入力していなければPhotoshop は解像度が72 の 300これは「プリント解像度」印刷の時「スクリーン解像度」72 となっています。もし誤って何かで設定が変わっているかもしれません。Web デザインをする際にはこの「スクリーン解像度」が72 になっていることをしっかり確認しましょう。またレイアウトを頻繁にする必要があるのでガイドの設定も重要です。私はここを「シアン」そして「実線」にしていますがものによって見づらいとか自分の見やすい色というのも各種細かく設定ができます。 カスタムにて色を変更することもできますので自分の使いやすい色を設定しておきましょう。特に Web デザインではグリッドの設定が重要です。グリッドのサイズを 10 pixel とかあとは 100 pixel で4分割とかにしておくと良いですね。ここではグリッドの線を10 pixel分割線を一個だけにしました。この右側のサムネールをクリックすると色を変更することができます。例えば白っぽい時に見えやすいガイドの色黒っぽい時に邪魔にならないようなガイドの色などがあります。ドキュメント、デザインするドキュメントによって変えておくと良いですね。ここではちょっと明るめの色にしておきます。黒だけど少しグレーっぽくしてますね。これで OK を押して設定が完了します。まずガイドですが、一番上のメニューから「表示」ずっと下に行って「定規」を選択します。メモリが pixel で表示されてますね。ここ上下からルーラーをこの様に引くとガイドを引くことができます。これは予め設定しておいたガイドです。不要な時はドラッグしてルーラーの方に持っていくと削除することができます。これでガイドの設定ができましたね。レイアウトの目安となるプリントされない線なので細かく引いてちゃんとはみだしていないか等チェックしましょう。 更に要素と要素の間をちゃんと間隔を綺麗に空けたい時、というのにグリッドを使います。先程のガイドと同様にメニューの「表示」から「表示・非表示」ここで「グリッド」を選択します。ショートカットキーはCommand+@Windows だとCtrl+@ になります。この様に先ほど設定した色でグリッドが引かれました。いっぱい四角ができているのがわかりますね。ここ、写真の所を見ると、グリッドから少しずれていることがわかります。Web デザインではなるべくこういうグリッドをぴったりあわせておくとレイアウトが非常に便利になります。細かく移動したい時は、矢印キーにて選択して上下左右と移動させましょう。これで、ここの四角が丁度10 pixel なので名前の部分を、この四角2つ20 pixel 分の中央に置きこの様にレイヤーとすることで10 pixel の間隔で余白を空けるということができます。この様にしておくと、自分自身でデザインしてコーディングする時他の人がコーディングする時もちゃんと 10 pixel 空ければ良いということがわかるので非常に便利ですね。また Photoshop で図形を描く時Photoshop CS6 以降であれば問題ないですが古いバージョンを使用すると画面の関係で四角がぼやけてしまうことがあります。 この様に四角を引くと今は Photoshop の CC を使ってるので端っこがピッタリ綺麗に表示されてますがCS5 等ですとこのパスがちょっとだけずれてしまってぼけの原因になってしまう時があります。Photoshop CS6、CC 以外を使っている方はここの「エッジを整列」等にチェックを入れて拡大した時、ちゃんとぼけていないかというのをチェックしましょう。画面が引いている時はわからないですが拡大すると凄くわかるので四角を引いてみてちゃんとぼけていないかというのを拡大・縮小で確認しましょう。これができれば Photoshop での基本的な Web デザインの設定ができます。

Photoshopをさらに使いこなす!

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

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

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

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

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