スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > クールなベクターガールを作成する方法

クールなベクターガールを作成する方法

投稿日:2010年02月26日   レベル:初心者    ソフトウェア:PhotoShop Illustrator

このチュートリアルでは、クールなベクターガールを作成する方法を紹介します。

Step1:はじめに

黒の背景色で600×900ピクセルの新規ドキュメントを作成してください。
ここからアヴリル・ラヴィーンの画像をダウンロードしてください。
他の人物画像でも構いません。

ダウンロードした画像

ダウンロードした画像を配置します。



Step2:境界線に沿ってパスを描く

ペンツールペンツールを選択し、オプションバーでシェイプレイヤーモードを選びます。
描画色を#990066に設定してください。
髪の毛の境界線に沿ってパスを描いてください。
パスを描いていくと、ピンクのシェイプが現れます。

境界線に沿ってパスを描く

このピンクのシェイプに隠れてしまって境界線に線を沿わせるのが難しくなるので、ピンクシェイプの不透明度を50%にして、見やすくして作業してください。
アンカーポイントの切り替えツールアンカーポイントの切り替えツールを使いながら、髪の毛の境界線にきれいに沿うようにしてください。

境界線に沿ってパスを描く

ピンクにしたい他の領域にも同じ作業をしてください。

境界線に沿ってパスを描く

ピンクのシェイプがどうなってるかを確認するため、一時的に画像を非表示にします。

境界線に沿ってパスを描く





Step3:女性のイラストを仕上げる

画像を再表示して、白と紫のシェイプの作業に移ってください。
これらの作業は時間がかかりますが、かなりクールな結果になるでしょう。

女性のイラスト



Step4:イラストレーターで背景の曲線を作成する

ここで、IllustratorAdobe Illustratorを使用します。
デフォルトの設定のまま新規ドキュメントを開きます。
ペンツールペンツールを使って、下記のように2つのパスを交差させてください。

背景の曲線を作成

「オブジェクト」−「ブレンド」−「ブレンドオプション」を選択します。
ステップ数を20に、方向を「垂直方向」に設定してください。

ブレンドオプション

2つのパスを選択し、「オブジェクト」−「ブレンド」を選びます。
2つの線の間に数本の線が現れます。
これらの線を選択して「Ctrl」+「C」でコピーします。
ここから私が描いた線をダウンロードできます。

背景の曲線を作成



Step5:フォトショップで曲線を配置する

ここで、PhotoShopAdobe Photoshopに戻ります。
「Ctrl」+「V」でスマートオブジェクトとして貼り付けてください。
サイズを変更して、好みのサイズに調整してください。
線のレイヤー上で右クリックをして「オーバーレイ」を選んでください。
カラーを#9BF205に設定します。

背景に曲線を配置する

同じ工程を繰り返して、女性の背景にさらに線を描きます。

背景に配置する



Step6:抽象的なシェイプを作成する

新規レイヤーを作成し、「抽象」というレイヤー名を設定します。
多角形選択ツール多角形選択ツールを使用して抽象的なシェイプの選択範囲を作り、女性に使用したものと同じ色で塗りつぶします。
下に描いたように、女性とドキュメントの端の部分を抽象的なシェイプで結びます。

抽象的なシェイプを作成

同じ工程を頭と肩の部分にも繰り返してください。

抽象的なシェイプを作成



Step7:イラストの前面に曲線を配置する

画像の前面にも曲線を追加します。
すでに背景で使っているので、ここでは緑は使わないでください。
ピンクか紫、白などを使用しましょう。

イラストの前面に曲線を配置する

縦方向のまっすぐな線を加えてもクールでしょう。

イラストの前面に直線を配置する



Step8:仕上げ

カスタムシェイプツールカスタムシェイプツールを選択して「六角形(フレーム)」を選んでください。
描画色を白にして、下の画像のように3つの六角形がくっつくように描きます。

カスタムシェイプ 六角形

仕上げに、同じ工程を繰り返して、さらに六角形をドキュメントに追加します。



Step9:完成

お気付きの方もいらっしゃるかもしれませんが、このデザインは全てIllustratorAdobe Illustratorで作成することも可能です。

完成



引用:Web Design Library 著者:10Steps.SG 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング