Lesson 07 メタリックで映り込みのあるロゴ - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

Webデザイン 表現&技法の 新・スタンダード

Lesson 7

メタリックで映り込みの あるロゴ

	制作・文			奥山寿史（ユルユラデザイン.）
＞	To Use			Photoshop | Illustrator
＞	Browser			IE 7over | Firefox 2over | Safari 2over

メタリック感があり映り込みの入ったロゴはスタイリッシュなサイトに映える。オブジェクトの正確なサイズ調整や整列、グラデーションの再調整など、細かい作業はIllustratorで行うとやりやすい。

Illustrator の新規ドキュメントを[カラーモード：RGB] で作成する。スウォッチパレットで新規スウォッチを[R0／G0／B0]、[グローバル]にチェック、[名前：LogoColor]で作成する【1-1】。[フォント：Arial Bold]、[サイズ：65px]で「Arial Metal Font」と入力。グラデーションを適用するために、書式メニュー→"アウトラインを作成"でグラフィック化し、オブジェクトメニュー→"複合パス"→"作成"でひとつのオブジェクトとして扱えるようにしておく【1-2】（複合パス化した際に文字が透明になってしまった場合は、見やすいように適当な色を設定しておく）。


【1-1】グローバルにチェックを入れておくと、あとでこの色の設定を変えた時に、ドキュメントで同じスウォッチを使用している箇所がすべて変わる。グラデーションに使用している箇所も変わるので、完成後に色の微調整をしたり、まったく違う色みに変えることが可能だ【6-6】【6-7】


【1-2】

文字をコピーして、編集メニュー→"背面へペースト"を実行。そのままオブジェクトメニュー→"パス"→"パスのオフセット..."を選択し【2-1】、[オフセット：1px][ 角の形状：マイター]で適用する【2-2】。このオブジェクトの塗りを【2-3】のグラデーションに設定しよう【2-4】。


【2-1】


【2-2】


【2-3】［種類：線形］［角度：90°］ 【a】 ［位置：0% ／LogoColor：70%］ 【b】 ［位置：100% ／LogoColor：30%］


【2-4】 背面のオブジェクトのみ表示した状態

前面の文字の塗りを【3-1】のグラデーションに設定する【3-2】。前面の文字をコピーし、編集メニュー→"前面へペースト"で複製して、【3-3】のグラデーションに変更する【3-4】。


【3-1】［種類：線形］［角度：90°］ 【a】 ［位置：50% ／LogoColor：0%］ 【b】 ［位置：100% ／LogoColor：60%］


【3-2】


【3-3】［種類：線形］［角度：90°］ 【a】 ［位置：0% ／LogoColor：10%］ 【b】 ［位置：45% ／LogoColor：100%］


【3-4】

[ツール]から[楕円形ツール]を選び、[幅：900px]、[高さ：80px]の楕円形を描画。「Arial Metal Font」の文字と楕円形を選択し、選択状態の「Arial Metal Font」を再度クリックしてキーオブジェクトに指定したら、整列パレットの[水平方向中央に整列] 【4-1】で横方向の位置を揃える。縦方向の位置は仕上がりをイメージして調整しよう【4-2】。楕円形と最前面にある「Arial Metal Font」の文字を選択し、オブジェクトメニュー→"クリッピングマスク" → " 作成" を実行【4-3】。そのままパスファインダの[切り抜き]で切り抜いておく【4-4】【4-5】。


【4-1】


【4-2】この楕円形オブジェクトはメタリックを表現するカーブになるので、仕上がりをイメージして幅や高さ、位置を調整する。楕円形オブジェクトは色を付けて、透明パレットで[描画モード：乗算]にするとオブジェクトの配置イメージがつかみやすい


【4-3】


【4-4】


【4-5】切り抜きしておくことで、オブジェクト「Arial Metal Font」だけの範囲でPhotoshopにペーストできる

すべてを選択してコピーし、Photoshopで新規ファイルを作成【5-1】、編集メニュー→"ペースト"を[ペースト形式：スマートオブジェクト]で実行する0【5-2】。イメージメニュー→"カンバスサイズ..."で[基準位置：上中央]に設定し、[高さ]をおよそ倍の数値に変更する【5-3】【5-4】。


【5-1】[カラーモード：RGB]、[解像度：72dpi]で[プリセット：クリップボード]にすると、[幅][高さ]の数値がIllustratorでコピーしたオブジェクトのサイズになる


【5-2】スマートオブジェクトを選択すると、Illustratorで作成したオブジェクトの情報を保った状態でペーストできる


【5-3】今回は下に余白を設けたいので、[基準位置]を左図のようにする


【5-4】

スマートオブジェクトレイヤーの「サムネイル」を⌘（Ctrl）+クリックして【6-1】選択範囲を作成。下に新規レイヤーを作成し、選択範囲を黒で塗りつぶす。さらに編集メニュー→ " 変形" → " 垂直方向に反転"で反転し【6-2】、[移動ツール]で【6-3】の位置に配置する。このレイヤーを[塗り：20%]に設定し、「レイヤーマスク」を追加【6-4】。レイヤーマスクサムネイルが選択された状態で、グラデーションツールを「描画色から透明に」に設定、下から上に描画して映り込みのイメージにする【6-5】。背景レイヤーを削除するか非表示にし、ファイルメニュー→"Webおよびデバイス用に保存..." で[PNG-24]形式で保存すれば完成だ。スマートオブジェクトのサムネイルをダブルクリックし、Illustrator上で「LogoColor」スウォッチのカラー定義を変更すれば、簡単にカラーバリエーションが作成できる【6-6】【6-7】。


【6-1】


【6-2】


【6-3】拡大表示をして、上下の文字がピッタリつくように配置しよう


【6-4】


【6-5】グラデーションを描画する際、描画色が黒になっているか注意。またグラデーションの具合によって映り込みのイメージが変わるので、色々試してみよう


【6-6】映り込みのカラーはPhotoshop上で変更する必要がある


【6-7】