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

WEBCRE8TOR.COM

ウェブデザインB 第14回

webdesignb14

この記事の目次

授業評価アンケート

ここで授業評価アンケートの回答を行いましょう。
注意点を説明しますね。

ウェブデザインB 授業評価アンケート

ロゴデザイン 後編

今回は前回に引き続き、ロゴデザインの制作を行います。
まずは先週行なった「ラフスケッチを絞り込む or 組み合わせる」の続きとして、
ロゴスケッチを最終的なカタチに仕上げましょう。

ロゴデザインのコツ

さらに細かくロゴデザインのことを解説するために、
様々なコツを伝授したいと思います。

コツ その1「見本サイトで理想のロゴデザインを探す」

最初のコツはまずはベースとなるものが必要ですね。
そのためにはまず、ロゴデザインの見本を探してみるのが近道です。

参考:ロゴストック|ロゴマークのデザインギャラリー
参考:Logospire – a logo inspiration gallery

上記の2つのサイトはクオリティの高いロゴが集められているのでおすすめです。

すでに先週の工程を終え、あとは仕上げるだけという人も、
グラデーションの使い方だったり、文字の形状の見せ方だったり、
様々な手法を目で見て吸収して表現の幅を広げてみましょう。

コツ その2「回転・変形させてみる & 色々な角度から見てみる」

次のコツは、
自分が描いたロゴスケッチを回転・変形させてみる・いろんな角度から見てみる」ことです。

丸ごと回転させてみたり、部分的に変形させてみたり、
立体的にすると影がどう落ちるか考えてみたり・・・。

描くだけではなく頭の中で粘土のように色々と変形させてみましょう。
今まで考えもしなかったデザインにたどり着くためには、
一度「この形がベスト」と思っているカタチを壊してみるのが有効です。

コツ その3「なぜロゴを作るのか?に立ち戻って考える」

そして最後のコツは、「ロゴ制作のきっかけや役割などの制作背景に立ち戻ってみる」ことです。

全てのデザインは考えることから始まります。
何のためのロゴ?何を目的としている?といったポイントに立ち戻ってみると、
案外あっさりとヒントが見つかったりします。

ロゴデザイン実践

では少し時間をとります。ロゴデザインを完成させ、
次のIllustratorを使ったデータ化の工程に問題なく進めたいですね。

なお先週、

「講義が始まる前までにPCに取り込める人は取り込む、
最低でも課題用紙を印刷して手元に準備するように」

・・・と言いましたができてきますか??
PCへの取り込みができている人は完璧です。そのまま使ってください。

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

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

今回はPCを使い、手書きのロゴデータをベクターデータにしていきましょう。
その前に・・・ロゴスケッチをスマホで撮影し、メールで送るなどして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

続きは来週

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

ロゴデザインのまとめ

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

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

パーツ別デザインレイアウトパターン 後編

前回はパーツ別デザインレイアウトパターンのレクチャーとして、
「ヘッダー」「フッター」の役割及び参考アーカイブサイトを見ていきました。

今回は「メインコンテンツブロック」のレイアウトパターンを紹介していきたいのですが、
レイアウトは無限に存在するため、下記の記事を参考に様々なパターンを見てみましょう。

新しい発見があるかもしれませんよ。

Webデザインの基礎!ページのレイアウト構造 | ウェブラボ(株)スタッフブログ

WEBレイアウトの基本4パターンそれぞれのメリット・デメリット-エムタメ!

サイトの目的に応じて、適切なレイアウトを考える。 | ドコドア

これだけは絶対押さえたい!Webサイトの定番レイアウトパターン6選

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE