PhotoshopでWebデザイン

ベクターシェイプの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ベクターシェイプの作成方法をみていきます。
講師:
07:10

字幕

では、シェイプツールを使って実際にベクターの画像を描いていきましょう。「ファイル」>「新規」で適当なサイズのドキュメントを作成してOK を押します。「シェイプツール」に持ち替えます。キーボードの U で持ち替えることができます。マウスカーソルでこのアイコンの上を長く押してあげると中に入っているオプションを見ることができます。「長方形」だけでなく「角丸長方形ツール」「楕円形ツール」「多角形ツール」「カスタムシェイプツール」と色々入っています。また「ラインツール」ですね。これらをこう切り替える時にShift+U でも変えることができます。まずは「長方形ツール」から見ていきましょう。塗り始める前にこの色を変えましょうか。「塗り」の所のこの色をクリックします。自分の好きな色に変更してドキュメント上をクリックドラッグで長方形を描きます。もし正方形を描く場合はShift を押しながらクリックドラッグこんな感じに縦横同じ長さの正方形を描くことができます。今は一つのレイヤーを選択したまま二つ目のシェイプを描く始めたので一つのレイヤーの中に二つが入ってしまいました。もし、これを別のレイヤーにしたい場合はレイヤーを何にも選択していない状態にして描き始めます。 そうするとこんな感じに別レイヤーとしてシェイプを描くことができます。では、次は「楕円形」を見ていきましょう。色を持ち替えます。ドキュメント上をクリックドラッグで簡単に楕円を描くことができます。Shift を押しながらクリックドラッグで軽な丸を描きます。次は、「角丸長方形」ですね。ボタンとはよく使える角の丸い長方形になっています。クリックドラッグで簡単にボタンのようにシェイプを描くことができます。この時に、この角の丸さをここで変更することができます。例えば、もう少し丸い「10」という感じにしてあげるとこんな感じのもう少し角の軟らかいボタンを描くことができます。次は、「多角形ツール」ですね。「多角形ツール」は五角形とか八角形を作るのが得意です。ここに角の数を入れる所があって今は5個入っています。なので、クリックドラッグで五角形を描くことができます。もし、ぴったりこの下を直角に合わせたい場合は作成時に Shift を押してあげます。そうするときれいなこういう角度でも回ってくれるのでこういう 90 度下向きとか90 度上向きというのを簡単に作れます。角の数を増やしてあげると八角形とかも簡単に描くことができます。 では最後に、「カスタムシェイプツール」を見ていきましょうか。これは丸とか四角とは違って始めからいくつかシェイプは用意されています。デフォールトでは矢印とか、音符とか禁止のマークとか、ハートとかこういうのは用意されています。使いたいものを選択して色を決めてあげて描きます。この時も縦横の比率を守りたい場合はShift を押してあげます。こんな感じに、簡単にベクターシェイプを描くことができます。この「カスタムシェイプツール」これが Photoshop のデフォルトのシェイプです。右上の「歯車」のアイコンをクリックしてあげると他にも Photoshop に始めから入っているのが分かります。例えば、「動物」とか「矢印」後は「自然」とかWeb というのもあります。この Web を選択しましょうか。クリックそうすると「現在のシェイプを Web のシェイプで置き換えますか?」と聞かれます。もし、このシェイプを全て消してWeb 用のもので置き換え場合はOK を押します。下に追加したい場合は「追加」を押します。「追加」をしましょうか。「追加」下に入りました。Web で使えそうなショッピングカードのボタンが入っています。 こちらをクリックして色を選択して「グレー」にしましょうか。クリックドラッグでShift を押しながらプロポーションを保ったままショッピングカードを描くことができます。また、もう一つの方法はシェイプツールの時にドキュメント上をクリックします。クリックドラッグではなくてクリックします。そうすると、「カスタムシェイプを作成」というウインドウが出てきて自分できれいなサイズを決めて作成することができます。例えば、横幅「100px」で「縦横比を保持」にしてあげるとこんな感じに「高さ」は自動で入力してくれます。こうするときれいに100px×100pxのようなボタンを作ることができます。Web デザインでボタンとかを作成する場合もうサイズが決まっている可能性が高いです。例えば、30×20 でボタンを作ってくださいとかそういう時にこのドキュメント上をクリックしてから自分で数字を入力して作成する方法が効果的です。ここでは簡単なシェイプの描き方を見ました。次ではもう少し突っ込んでこの塗りと周りの線の色の変更方法を見ていきたいと思います。

PhotoshopでWebデザイン

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

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

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

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

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