ウェブデザインB 第14回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第14回

webdesignb14

ウェブデザインB 第14回

今回は前回に引き続き、ロゴデザインの制作を行います。
先週指示しましたが、画像データはPCに取り込んで編集できる状態になっていますか?

Webデザインの構築③ Webサイトのロゴデザイン

前回まではPCを使わず、頭と手を使って以下の4つの工程を行いました。

今回はPCを使い、手書きのロゴデータをベクターデータにしていきましょう。

ロゴデザイン課題その⑤ Illustratorで新規ファイルを作る

まずはIllustratorを起動しましょう。

Illustratorを起動

webdesignb14_01_01

ファイル > 新規で新規キャンバスを作成

起動したら、今度は新規キャンバスを作成します。

webdesignb14_01_02

ファイル名に「ロゴ」と入れて「OK」

新規ファイルの作成ウィンドウが出てくるので、名前をつけておきましょう。

webdesignb14_01_03

新規キャンバスが開く

新規キャンバスが開きます。

webdesignb14_01_04

ロゴデザイン課題その⑥ 画像をキャンバスに読み込む

ドラッグ&ドロップでキャンバス上に画像を配置

開いたキャンバスに画像をドラッグ&ドロップで配置します。

webdesignb14_02_01

見ながらの作業がしやすい位置に移動

ロゴの形状によって作り方もその時々で違いますが、
今回は画像を下絵にしてその上にアンカーポイントを打ってパスの生成を行います。

画像を配置してきたままの位置だと下絵を確認しづらいので、
移動ツールを使って移動したりサイズの拡大縮小を行いながら、
ロゴをキャンバスの真ん中に持ってくるようにします。

webdesignb14_02_02

不透明度を下げる

不透明度を下げて、画像を下絵に確認しながらパスを打てるようにします。
右上の不透明度の数値を50〜60%くらいにしましょう。

webdesignb14_02_03

ラフのレイヤーをロック

作業中に下絵が動かないように下絵をロックします。
ロックすると拡大縮小や移動などを受け付けなくなります。

webdesignb14_02_04

レイヤーパネルを開いてレイヤー名をつけ、新たにレイヤーを作成

半透明の下絵の下にパスを打つため、下絵レイヤーとパスのレイヤーを作りましょう。
まずレイヤーパネルを開き、現在レイヤーパネルにある「レイヤー1」などとなっているレイヤーの名前を「ラフ」などに変更します。
その後、右下の「新規レイヤーを作成」ボタンでロゴレイヤーを作成します。

webdesignb14_02_05

新規レイヤーにもレイヤー名をつけて重なりを下に

ロゴレイヤーを作成したらそのレイヤーを左クリックでつかんだまま下絵レイヤーの下に持っていきます。
これで準備完了です。

webdesignb14_02_06

ロゴデザイン課題その⑦ ベクター化する

ここからはひらすらパスを打つ作業をしていきます。
ペンツールを使いどんどんアンカーポイントを打ってパスを生成していきましょう。

webdesignb14_03_01

長方形ツールや楕円形ツールなどで外枠を作って細かい部分はペンツールでパスを別に生成してパスファインダーを使って切り抜く方法などもあります。
ベジェ曲線の細かい調整方法に関しては以下のページが参考になると思います。

ベジェ曲線の参考:トレースしていこう!ベジェ曲線を上手くあつかうポイント ロゴの作り方から学ぶベジェ曲線の基本!これでイラレが得意になる | 株式会社LIG

パスを生成し終えたら以下の画像のような感じになると思います。

webdesignb14_03_02

ロゴデザイン課題その⑧ 下絵レイヤーを削除する

パスの生成が終わったら下絵レイヤーはもう必要ありませんので削除しましょう。

下絵レイヤーのロックを解除する

ロックされたままだと拡大縮小や移動だけではなく削除もできませんのでまずは下絵のロックを解除します。

「オブジェクト > すべてのロックを解除」でロックを解除します。

webdesignb14_04_01

下絵レイヤーを削除する

ロックが解除できたらレイヤーを削除できます。
レイヤーパネルの下絵レイヤーをクリックして、右下のゴミ箱アイコンで削除します。

webdesignb14_04_02

下絵レイヤーを削除したら、ロゴのレイヤーのみになっていますね。

webdesignb14_04_03

続きは来週

今回で終わるかと思いましたが、まだ配色や文字との組み合わせが残っています。
ここまでだけでもなかなか時間がかかってしまうと思うので続きは最後の講義でレクチャーしようと思います。

今日のまとめ

今回ポイントになってくるのは手書きのロゴデザインラフを取り込んで下絵として使うところになってきます。
下絵のパスをそのまま使うこともありますが、なにせ手書きのものなのでパーツのサイズがおかしかったり傾いてしまっている場合がほとんどです。

違和感を無くし実際に使えるレベルにするため、またロゴとしてのクオリティをアップするためにも、下絵を参考にしすぎないことが重要だったりします。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE