Web系

Illustrator(イラストレーター)で作る、HUD風デジタルイメージ

デジタルでサイバーなイメージを、イラストレーターを使って作成する方法です。HUDに憧れる男子共通の夢を、デザイナーのひばりが叶えます。

123
1. HUDについて
→ HUDは『男の夢』である理論
awqe
2. HUD風をイラストレーターで作成する方法
『照準』の作り方
『ボックス』の作り方
『目盛り』の作り方
『円』の作り方
awqe
3. HUD風を取り入れたWEBサイト紹介
映画『攻殻機動隊 新劇場版』
NHKスペシャル|カラーでよみがえる東京~不死鳥都市の100年~
awqe

 

デザインイメージの話をしている時なんかに出る話題「なんかデジタルで、サイバーというか、メーターと数字がたくさんあるあれ。なんて言うのか・・・」

はいはい。わかりますよ。『HUD』で画像検索してみてください?
awef
「そうそう!これこれ!」

もともとは戦闘機に導入されていた技術で、コックピットのガラスに燃料や高度といった情報、敵機への照準などが表示されていたようです。

hud_on_the_catヘッドアップディスプレイ(Head-Up Display、略称: HUD、「ハッド」と発音する)は、人間の視野に直接情報を映し出す手段である。 この技術は軍事航空分野において開発され、実験的にではあるがさまざまな分野に応用されている。

ー引用ー
「”HUD”」『フリー百科事典 ウィキペディア日本語版』より。”2016年11月07日 15時(日本時間)現在での最新版より“URL: http://ja.wikipedia.org/

個人的見解を多分に含みますが、HUDは「男が誰でも好きな物ベスト3!」に入ってくると思います。(あと2つは「忍者」と「炎」)
男子は誰でも幼少期に「ロボット」に触れる機会があります。そこで『近未来的』な物への憧れを抱くようになり、大人になってからは、より具体的な『近未来感』を感じるHUD(言葉は知らなくとも)にテンションが上がらざる負えないのだと思います。『攻殻機動隊』や『アイアンマン』の雰囲気が好きな人なんかは特にヨダレもんですよね!わかります!

今回はイラストレーターを使用して、HUD“風”のパーツを作成するチュートリアルを用意しました。どれも意外と簡単な方法で作成することができます。ヨダレを拭きながら実践してみて下さい!

HUD, Illustrator, イラストレータ, アイアンマン, デザインテクニック, デジタル, 攻殻機動隊, 未来, WEB

 

HUD風をイラストレーターで作成する方法

 

『照準』の作り方

 

4

ロックオン!するなら必須のコレ!! 左ジャブも右ストレートもハナ小判もこれで!

1-1

特に難しい事はありません。四角いオブジェクトの線を破線にします。ポイントは線がコーナー部分に必ず来るように設定すること。

『ボックス』の作り方

2

HUD風のデザイン的なポイントは、直線と円で構成し、斜めの要素はなるべく45度で統一すること。周りに細めの線を添わせると、より雰囲気が出ます。

ボックスの角を斜めにしたい場合は、以下の作り方だととても楽です。

 

1.オブジェクトの「角を丸める」機能で4角を等しく丸める

2-1

 

2.「アンカーポイントツール」で各ポイントのハンドルを消す

2-2

自動で45度の線になり、それぞれの斜線の長さもを等しく作れます。

 

『目盛り』の作り方

3

数値の表現に必要な目盛りも、破線を応用すると簡単です。

3-1

こちら、実は「太さ15ptの破線」の、線の部分を極端に短くすることで目盛り感を出しています。この作り方だと、後の編集も楽です。

『円』の作り方

1

これがあるとグッと近未来感が高まりますね! こちらも破線の応用で作ることができます。

4-1

サイズを少しずつ変えた円を重ねていきますが、線のパターンも変えています。

実線での通常の線に加えて、破線の線分と間隔をランダムに指定した円を入れるのがポイントです。

一番内側の円は、先ほどの目盛りの作り方の応用で、線分の数値を小さくしています。

 

このようにイラストレーター独自の機能を活用して、思いのほか簡単に「HUD風」を作成することができます。あとは各パーツを構成するセンスが必要です。次からは参考になりそうなWEBサイトを紹介します。

 

HUD風を取り入れたWEBサイト紹介

 

映画『攻殻機動隊 新劇場版』

みんな大好き攻殻機動隊。
5-4
5-3

円がありますね~。斜め線でのラインや、背景の点や線の使い方でHUD感が出ています。

 

NHKスペシャル|カラーでよみがえる東京~不死鳥都市の100年~

パララックスデザインによる錯視も含め、見事に未来感が出ています。ぜひサイトに訪れ、スクロールしてみて下さい。
5-2
5-1

HUDを活用したデザインは黒の背景が多いですが、このサイトのような明るく、透明感のあるデザインも良いですね。

 

未来感の感じられるHUDですが、最近では車のタコメーター部分がディスプレイになっていたり、フロントガラスに速度やナビが表示されるといった技術が、日進月歩で進んでいます。もはや現実となりつつあるHUDに今後も注目です。

 

The following two tabs change content below.
ひばり 一博
元ケーキ屋という異色の経歴を持つWEBデザイナー。県内自治体系サイトの他、病院から葬儀屋まで数々のサイトを手がける。 オールラウンダーで撮影、セミナー、ナレーションなど幅広く業務をこなすが、毎日ケーキを食べていた頃より太ってしまった。このブログでダイエット企画ができないか画策中。