カテゴリー別アーカイブ: Illustlator

12月21日(月) (実)Webデザイン制作基礎④ 講義内容

地図を作ってみよう

トレースを応用して、自分の好きな地図を作る事もできます。
googlemapと違って拡大や縮小ができませんが、よりデザインにあった地図を使うことが出来ます。
今日はIllustratorを使って、自由に地図を描いてもらいました。

  1. まずはgooglemapを開いて、トレスしたい場所をスクリーンショットします。
    windowsの場合は alt + fn + insertキー、macの場合はcommand + shift + 3キーです。
    windowsだと画像をコピーした状態に、macだと自動でデスクトップに、pngファイルとして保存されます。
  2. 次に、PhotoShopで新規ファイルを開き、ctrl + vで貼り付けます。それから大きさや表示位置を変更し、切り取ってみましょう。
    特に切り取らなくてもいい場合は、そのままIllustratorで開いてしまっても構いません。
  3. こちらではIllustratorに直接張りつけてみました。
    map01
    貼り付けた後、自由変形等で回転させたりして程よい角度にしてあげたり、不透明度を下げてあげたりするのもおススメです。
    準備ができたらロックして動かないようにしましょう。
    この時点で、新規レイヤーを作ると楽です。
  4. 地図をトレースしていきます。
    map02
    画像では主に直方体ツールで道を描いていますが、ラインツールやペンツールを使ってももちろんかまいません。
    他に、逆に道以外の部分をオブジェクトで描いて何もない部分を道に見立てるなど、様々な方法があります。
    主要道路と主なランドマークを描いてあげるだけでもそれっぽくなります。
    大雑把に作った後、細かい部分を描き足していくと楽です。

    プラスポイント

    上記地図で使っている線路は、少し応用的な技法で描いています。
    Illustratorには色々な小技があるので、調べてみても楽しいです。
    興味のある方は是非試してみてください。
    イラストレーターでJRの線路を描く
    Illustrator 修正が楽なデータ作成 線路と矢印はアピアランスでカーブ自在

  5. 完成。
    map
    トレス元の画像を非表示にして、保存すれば完成です。
    上記はわりとテキトウな感じですが・・・・・・センスと作りこみ次第で、様々なバリエーションの地図を作ることが出来ます。

フォントを増やしていこう

Illustrator、PhotoShopでは、パソコンにインストールされているフォントが使われる。
デフォルトでは数が少ないので、いろんなフォントを探して自分のPCに入れてみよう。

無料のフリーフォント集 フリーフォントケンサク
【2015年】デザイナーなら必ず入れておきたい25のフリーフォント!
画像と同じくフォントにも著作権があるが、フリーのフォントも多い。

フォントには有料のものも数多くある。デザイン会社などでは、複数のフォントを購入し、使用している。
フォントは日本語に対応しているものとしていないものがあるので、検索時は「日本語」をキーワードに含めるといい。

しかしWebにおけるフォントは厄介で、インストールしたフォントは基本的に自分の画面でしか見られない。
画像として表示すれば見られるが、テキスト部分もフォントを変更したいことはままある。

そこで、今はWebフォントと呼ばれる技術が使われる。
実はすごく簡単!webフォントの使い方&日本語対応webフォントまとめ
Webフォント(日本語/欧文)サイトまとめ9選!変更方法もご紹介します
大きく、googleに登録されているフォントを使う方法と、自分のダウンロードしたフォントをサーバーにアップして利用する方法がある。
今後サーバーへのアップロードの講義をするので、その後試してみるといいかも。

印刷物の作成について

DTPの説明があったので、少しだけDTPイラストレーターの基本です。
DTPに興味のある方は覚えておくといいと思います。

・印刷物を作る時の色設定:CMYK
・画像の解像度:300dpi(350dpiあるとなお良い)
・サイズ単位もpx以外のものを選ぶ

トンボとは?

印刷物を作る時は、必ず断裁する目印として、
トンボ(トリムマーク)をつけます。
tonbo

12月09日(水) CGコンテンツ制作演習⑨ 講義内容

Webデザインに使われるソフト

以前より、Adobeの製品がよく使われる。今はフリーのソフトも多いが、機能的にはPhotoShopないしIllustLatorが元になっていることが多いので、この二つを主に勉強すれば、大抵のソフトは利用できる。デザインに使われるAdobeの種類は三種類ある。

ソフト 拡張子 内容
PhotoShop .psd 写真編集に特化したソフト。画像の加工などが得意。今はパスや文字のレイアウトも、ある程度できるようになっている。
Illustrator .ai イラストや図形作成に特化したソフト。オブジェクト、フォントの取り扱いが得意。整列などがしやすいこともあり、枠作りはこちらのほうが得意かも
FireWorks .png 元はWeb開発用に作られたソフト。PhotoShop、Illustrator双方の機能を併せ持つ。今でも人気が高いのだが、CS6以降の更新をしないことが明言されている(CCにも含まれているが、中身はCS6)。フォトショとイラレ、そしてこれから使うDreamWeaverと操作性が類似しているので、とりあえずそれらを勉強しておくとあまり困らない。

※FireWorksの拡張子はなぜか.png。けれどちゃんとレイヤー等の情報も保存される。非常にややこしい。CS6では.fw.pngという長い拡張子でも保存できる。

Illustrator

ペンツール
PhotoShopと同じく、曲線を引くためのツール。Illustratorでは他のオブジェクトと同じく、塗りと線をつけることが出来る。ペンツールを使っている最中、ctrlキーを押しっぱなしにすると黒い矢印、altキーを押しっぱなしにすると白い矢印と同じことが出来るようになるので、上手く活用しよう。
また、ハンドルを出しながらshiftを押すとまっすぐなハンドルが描け、altを押しながらだと片方のハンドルの向きだけ変えられる。
トレースはパスの練習になるので、色々とやってみましょう。パスはとにかく練習あるのみ!
ベジェ曲線をゲーム感覚で特訓して自由に操れるようになる「The Bezier Game」
以前も紹介したもの。altキーの使いこなしが重要になります。

プラスポイント

オブジェクトを選択している状態だと、上部に「線:」というリンクが出る。ここをクリックすると、線パネルが開ける。
線パネルでは、線の細かい設定が出来る。下の画像では、ひよこの足の先を丸くした。
hiyokoashi

効果
イラストレーターでは、線や塗りに様々な効果をかけることが出来る。
今日は「ぼかし(ガウス)」で、ひよこのほっぺをぼかした。

プラスポイント

効果には様々な種類がある。
↓のは効果→スタライズ→落書き
rakugaki
この他、PhotoShopであつかったドロップシャドウのようなものも「効果」に含まれているので、色々試してみよう。

3D
イラストレーターでは、簡単な3Dモデルを作ることも出来る。
こちらも「効果」の一つ。
オブジェクトを選択して、効果→3Dからメニューを選ぶ。

押し出し・ベベル オブジェクトを押し出す形で3Dができる。文字などにも使える
回転体 オブジェクトを回転させる形で3Dができる。空洞なども作れる
回転体 作った3Dオブジェクトを回転させられる。

Web制作で使う機会はあまりないかもしれないが、技術の一つとして抑えておくといいかもしれない。
※3Dは非常に重たいので、作業するときは注意してください。
3D オブジェクトを作成する方法

単位の変更
イラストレーターは印刷物、Webなど、様々な媒体で使われるので、いくつかの単位が設定できる。
全体の設定をするときは、編集→環境設定(一番下)→単位から変更できる。Web制作に使うときは一般をpxに指定しておくと便利。