PhotoshopでWebデザイン

ウェブデザインしやすくワークスペース作り

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhotoshopのワークスペースをWebデザインしやすいようにして登録する方法を理解します。
講師:
06:18

字幕

ワークスペースの設定とパネルを見ていきましょう。Photoshop はWeb デザインに限らず写真の編集や 3D などにも使われます。なので、非常に機能が多いです。その分、こういうパネルも多いですね。Web デザインに使わないパネルもたくさんあります。それを排除してよく使うパネルを手前に持ってきてそれをワークスペースとして登録していきたいと思います。右上に「初期設定」とあります。ここに、Photoshop に始めたら登録されているワークスペースがあります。例えば、3D3D の編集がし易いワークスペースですね。もしくは、「写真」写真が編集し易いワークスペースです。しかし、ここに Web がないですね。Web は自分で作っていきましょう。初期設定に戻してここから作って行きたいと思います。まず、文字をよく使います。文字のパレットがないので「ウィンドウ」>「文字」を選択します。そうすると「文字」と「段落」のパレットが入りました。アイコンとして入りました。この右上の右を向いた三角形二つ重なったこのボタンを押してあげるとこの中に収めることができます。アイコンをクリックすると出せます。ここで戻します。 こんな感じです。このアイコンの列幅を広げてあげるとこんな感じに名前が出ます。名前が出て更に右側の様にしたい場合はここボタンを押します。右上のボタンをポチッとします。そうすると右側見たいになります。しかし、ここはアイコンで登録しておきましょう。実は右側も同じです。これもここのボタン右上のボタンを押してあげるとアイコンに戻ります。幅を変えると名前が消えます。こんな感じなので、二種類パネルのまま登録しておきたいものとアイコンでこう使う時にこう出したいもの分けて登録します。文字だけではなく文字のスタイルを編集することも多いので「ウィンドウ」>「文字スタイル」を選択します。「文字スタイル」を出すと同時に「段落スタイル」も出てきます。これも登録しておきましょう。次に、右側を見ていきましょう。実際に出ている方のパネルですね。まず、「カラー」これをよく使うんですがそれよりも、「スウオッチ」こちらをよく使います。なので、左側にこのタブを移動します。クリックしてドラッグアンドドロップです。「スウオッチ」もう出来上がった色が登録されています。この方がクリックしてすぐ使えるのでこれをよく使います。しかし、この「スウオッチ」でフィールトでは名前が「RGB レッド」とか「RGB イエロー」と普通の名前が付けられています。 Web デザインに適していないのでWeb デザイン用のカラーパレットに切り替えたいと思います。右上のこのボタンをクリックしてここのリストから自分の使いたいパレットを選択します。今度は Web 用に「Web スペクトル」これを選択します。Photoshop に「置き換えますか?」と聞かれます。OK を押すと今あるこの「スウオッチ」全部消えて「Web スペクトル」で置き換えられます。「追加」を押すと今ある「スウオッチ」の下に登録されます。今回は OK を押します。入れ替わりました。この効果ですねWeb デザインをし易いです。マウスカーソルを載せるとこんな感じに名前が「#99FFFF」のようなヘックスコードで教えてくれます。ヘックスコードで登録しておくと後で、CSS で色を変える時に非常に便利です。下を見ていきましょう。「色調補正」と「スタイル」があります。この「色調補正」はあまり使わないのでダブルクリックで閉じておきます。写真の加工をする場合はよく使うんですがWebデザインではよく使えません。更に、「スタイル」「スタイル」はたまに使います。こちら側に用意したいと思います。タブをクリック、ドラッグでアイコンの下に青色の線が入るまで持って行って話します。 そうすると、ここに「スタイル」を登録することができました。その下に見ましょう。「レイヤー」一番よく使います。広め取っておきたいと思います。この間を摘むとサイズを変えることができます。「チャンネル」これも画像の編集は使うんですがWeb デザインではあまり使いません。右クリックをして「閉じる」。その隣に「パス」これもよく使います。Web デザインの中では「シェイプツール」を使って四角を描いたり、まるを描いたりとよくします。その時に、この「パス」のパレットをよく使うので取っておきます。今、Web デザインし易いようなワークスペースが作成できました。これを十課以降も使用したいので登録していきたいと思います。右上の「初期設定」の所を開いて「新規ワークスペース」これをクリックします。名前を付けられるので今回は Web としましょう。W-e-bもしですね、「キーボードショートカット」も変更してた場合はこれにもチェックを入れます。今回は入りません。「メニュー」ももし変えた場合はこれにチェックを入れます。今回は入りません。このまま「保存」を押します。十回以降もし別のワークスペースになったとしても例えば、「モーション」でWeb デザインをするときはこのリストから Web を選択すればすぐに、自分が登録したWeb デザインし易いワークスベースで作業を始めることができます。

PhotoshopでWebデザイン

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

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

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

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

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