1月14日(土)-イラストロゴ作成実習④

・shift+alt+ドラッグで上下左右同じXY軸でコピペできる

・QRコードなどの配置
リンクで設定していた場合、クライアントへ提出する際は埋め込みにして送る
(画像を選択し、上のバーで【埋め込み】ボタンクリックでOK

カラーガイド

色を選択した状態でカラーガイドウインドウを開くと、「ハーモニールール」でおすすめの配色組み合わせが表示される

名刺

・暗めの背景の場合、文字は白に近いグレーなどよりFFFFFFの白などが良い
・文字は5pt以上(できれば小さくても7~8pt)あるのが良い(4以下だと印刷時潰れたりかすれる可能性がある)
・文字の太さを変えたりしてメリハリをつけると良い
・社名とロゴは近くが良い
・ごちゃごちゃせず余白を大事にする

名刺のおすすめフォント

(アジェンダより)
・源ノ角ゴシック
・源ノ明朝
・貂明朝
・A-OTF UD新ゴ
・筑紫A丸ゴシック
・VDL ロゴJrブラック
・TA-F1ブロックライン
・TBシネマ丸ゴシック
・VDL ペンレディ
・砧 山本庵クラシック

・Adobe Fonts(Typekit)はAdobe契約している場合のみ使用できる
※学校のPCではDLしない
自分のPCで使用したい場合、「アクティベート」をONにすると使用できる

・GoogleFontもあるのでおすすめ(商用・非商用いずれの場合でも無料で使用OK)

練習作品

使用ソフト|Illustrator(作業時間:約130~150分)
企画のフィンランド案内サイトのテーマで名刺を作成しました。

【修正後】

・先生より、文字色(暗めの背景の場合、白よりの色よりFFFFFFの白の方が良い)などアドバイスいただいたので修正しました。
・文字の太さを変えてメリハリを付ける(=フォントが太字に対応していないのか変化がなかったため、次回作成時気を付ける)
・オーロラのグラデーションを自然な感じに少し斜めに変更しました。

1月13日(金)-イラストロゴ作成実習③

アクセスマップ

・A4、解像度300dpi、CMYKでボード作成
・JR=白黒の線、私鉄=柵状の線がセオリーなので、あえて変えると混乱を招くので変更しない
・なるべく白黒グレー(無彩色)を除く3色程度で表すとスッキリ見える

アピアランス(JR線路の書き方)

①ペンツールで線路の線を引く
②アピアランスウインドウ→【線:】をクリック
③破線欄(線分:線を引く長さ、間隔:空白の長さ)を入力
 例:線分6・間隔12
④アピアランスウインドウ左下の【□新規線を追加】で同じパス上に線が追加できる
⑤追加した線のptを少し細くすると、線路っぽくなる
 応用:◌のオブジェクトでやるとダーツみたいになる

応用(私鉄線路の書き方)

①6ptの線を作る
②【□新規線を追加】で20ptの線を作る
③破線で線分6・間隔40とかにすると私鉄っぽくなる

応用(ナビルートの書き方)

①6ptの線を作成
②破線で、線分0・間隔12、線端:丸で、点々のルート線ができる
③破線右側の【□コーナーやパス先端に破線の先端を整列】で、線が折れ曲がったところの点の配置間隔を綺麗に整理できる

fxについて

アピアランスや文字ウインドウ下の【fx】で色々応用ができる
例)アピアランス【fx】
・スタイライズ→ドロップシャドウ→オブジェクトに影ができる
・光彩外側→外側に発光している感じにできる
例)文字【fx】
・円弧→文字の形が円弧に変形できる

【※要確認※】
こういうアピアランス【fx】や線の破線などもデータ提出時は別々の部品にしなければいけない?

方法)オブジェクトタブ→【アピアランスを分割】
※これも文字のアウトライン化と同様に元に戻せないので、必ず最終段階でオリジナルデータを保存しておき、別データで末尾に「~ol」など付けて保存する

マップ作成後、クリッピングマスクで型抜き

①一番上のレイヤーにマスク用のオブジェクトを置く
②全オブジェクト選択後、オブジェクトタブ→クリッピングマスクを作成で型抜き出来る

【メモ】

・最終段階で文字をアウトライン化するとき、一度にまとめてテキスト選択ができる
①選択タブ→オブジェクト→「すべてのテキストオブジェクト」
②全選択後、書式タブ→アウトラインを作成

練習作品

使用ソフト|Illustrator
企画の店舗のアクセスマップを作成しました。

1月12日(木)-ユーザーインターフェイス基礎②

★【デザインの考え方の教科書②】再読しておく!

【アクセスマップについて】

・目的地を地図中央に配置するように考えて作成する

・周辺駅やランドマーク(目印)になるものを配置
※なるべくコンビニやお店などなくなる可能性が考えられるものよりは、病院や公的施設、神社などにしておくと地図の変更が少ない

※グーグルマップは著作権がある
・Web上に配置する場合は、Googleの名前が載るので営利目的でもOK
・印刷物にはグーグルマップは使用できないので注意!

=実際の地形は誰にも著作権がないのでグーグルマップをある程度トレースならOKだけど、グーグルマップそのままをきっちりトレースしてしまうのは×

名刺

名刺サイズ:91×55mm
・印刷のずれを考慮して内側、外側を余裕を持って作る

名刺の作成

①A4とかでボード作成し、91×55mmの線なし・塗りのみの四角を作る
(基準となる名刺サイズ=ズレなければこのままの範囲が印刷される)
※画面提出用などで線を作る場合、0.25~0.5mmがおすすめとのこと
②オブジェクトタブ→トリムマークを作成
③オブジェクトタブ→パス→パスのオフセット
④オフセット:3mm、その他はそのままでOK(マイター・過度の比率4)
【オフセット】→同じ比率で拡大縮小ができる機能
⑤④のオフセットを-3mmでもう一つ作る
⑥①・④・⑤で作った四角を選択し、右クリック→ガイドを作成
⑦ガイドのレイヤーをロックしておく

1月11日(水)-イラストロゴ作成実習②

◆ロゴマーク=シンボルとロゴタイプ、またはロゴタイプのみ(装飾有り無し)で作られたもの

・ファビコン=ブラウザで表示したとき、タブの左上に表示されるマーク(ブクマした際のマーク)

ロゴデータをクライアントへ提出する際のルール

①バージョンを落としたaiデータ(ver.8.0がおすすめとのこと)で提出
 一緒にPDFも添付するとより良い

②文字はすべてアウトライン化する
(最終入稿前にアウトライン化、アウトライン化後のデータと、アウトライン化前データの2種類を保管しておく)

③線はすべて塗りにしておく
 ※1/11アジェンダ「ロゴデータを渡すときの鉄則」参照

④透明部分は白を使用しない ※同じく上記参照
 パスファインダー等の型抜きなど、きちんと処理しておく

⑤色指定 ※先生の提案データ例ファイル参照 ※:DeNAのロゴ説明ページ参照

【メモ】

・整列

オブジェクト全選択後に、基準にしたいオブジェクトをさらに再選択すると位置の基準になる。


・線のあるオブジェクトを拡大縮小するとき、
 【線幅や【角の大きさも追随で変更するかしないかの設定


オブジェクト選択後、プロパティ下部の「…」クリック、
□角拡大・縮小
□線の太さ  のチェックを付け外しして調整できる。

・アウトライン表示、非表示
ctrl+Y

A4アートボード1枚に複数の正方形の枠を一覧で作る方法

①イラレでA4を新規作成し、適当に正方形を作る
②プロパティでX・Y:0、W・H:70mmで作成(A4横幅=210mmなので3分割)
③編集タブ→環境設定→一般→キー入力:70mmに設定
④オブジェクト選択し、alt+→で70mmごとにコピペできる
⑤コピペでできた3つのオブジェクトを選択し、alt+↓で下にもコピペできる
⑥最後に、できた全てのオブジェクト選択後、右クリック→「ガイドを作成」
⑦「レイヤー1」にガイドが複数入っているので、「ガイド」等に名前変更しロック、新規レイヤーから作業していくのがおすすめとのこと
⑧最後にキー入力の設定を戻しておく

パス上文字ツール

オブジェクト選択した状態で、パス上をクリックでオブジェクトの形に沿って文字が入力できる
【応用】テキスト真ん中らへんの線をパス内側へ持ってくると内側に文字を移動できる

エリア内文字ツール

オブジェクトの中に文字を表示できる
★文字を普通に入力後、エリア内文字ツールに変換も、逆も可能
・文字ツール→エリア内文字ツール:枠の右側の○をWクリックで●にする
・エリア内文字ツール→文字ツール:枠の右側の●をWクリックで◌にする

文字の変形

・V/A→カーソルを置いた部分のみ文字間隔を調整(-50や100など…)
・VA(↔)→文字全体の間隔を調整

文字のグラデーション(再確認しておく)

①文字をアウトライン化
②複合パス化
③グラデーションツール

練習作品

使用ソフト|Illustrator(作業時間:約140~160分)
企画予定のフィンランドの案内サイトに使用できそうなロゴマークを考えました。
雪マークを”e”にはめ込んだものが”e”に見えづらいとのことだったので、修正していきたいと思います。

1月7日(土)-イラストロゴ作成実習①

ピクトグラムやロゴなど
決まった大きさのアートボードを複数作る方法

①イラレを開き、適当にA4などなんでもいいので新規作成
②アートボードの枠外に、適当に必要な大きさの正方形を作成(白塗り線なし)
③【アートボードツール】(左側ツールバー)を選択し、正方形をクリック(=アートボード化される)
④▲選択ツールで一旦正方形を選択し、【ctri+alt】で横にコピペ
⑤ctrl+Dで作業反復で複数コピペできる
⑥再度、【アートボードツール】でコピペした正方形をクリックしていくと同様にアートボード化される
⑦ウインドウ→アートボードで一覧になっているので、アートボード名をわかりやすく変更しておく(アートボード1、2…など)
⑧不要なアートボードも削除しておく
⑨レイヤーはこのあとのガイドと一緒にアートボード用としてロックしておいた方が作業しやすいかも

正方形のアートボードにセンターマークを表示/ガイドを引く方法

【センターマークを表示する方法】※通常こっちの方が見やすそう

①アートボードウインドウ右上のメニュー→「アートボードオプこっちのほうがション」を開く
②中央の表示→【センターマークを表示】【十字棒を表示】にチェックしOK

【ガイドを引く方法】

①表示タブ→定規→定規を表示
②適当に横と上からガイドを引っ張ってくる
③アートボードウインドウでアートボードが選ばれているか確認後、ガイドを▲選択ツールで選択
④表示→整列で、水平中央・垂直中央でガイドが真ん中になる
⑤表示→ガイド→「ガイドをロック」で動かなくなる(変更する場合は「ロックを解除」)

アウトラインについて

※詳細は1/7アジェンダ参照
・アウトライン化=文字などをオブジェクト化すること
・使用しているPCなど環境により、提出先に同じフォントがない場合があるため、データを提出する際にはオブジェクト化する

※【注意】アウトライン化してしまうと、フォントを元に戻せないので、
①データ提出前の最終段階でアウトライン化すること
②データ保存時、最後に2種類で保存しておくのが良いとのこと

例)1.アウトライン化前のオリジナルaiデータ
  2.アウトライン化後の入稿用aiデータ

2.は「~ol.ai」など、”ol”(アウトラインの略で通じる)をデータ名に入れるのが良いとのこと

【アウトライン化の方法(文字)】

①テキストを入力した状態
②書式タブ→「アウトラインを作成」=アウトライン化
③グループ化されているので、グループ解除すると、1文字ずつ修正ができる
※オブジェクト化後は文字の打ち直しなどができないので注意

【練習作品】

使用ソフト|Illustrator
企画予定のフィンランドで代表的なサウナの動作をピクトグラムで作成しました。
①サウナ → ②アバント(氷の張った湖へダイブ) → ③外気浴

1月6日(金)-ユーザーインターフェイス基礎①

ピクトグラムとは

言葉を使わなくても情報を伝えられる、単純化された視覚記号。
文字は使わず(数字はグレーゾーン)、マークだけで説明ができるもの。(=言葉の通じない環境や直感的にもわかりやすいマーク)

ロゴとは

ロゴタイプ、通称「ロゴ」 は、図案化・装飾化された文字・文字列のことで、団体名、商号、商品名、雑誌名、書名等を印刷・表示する際などに使用される。

ピクトグラムとアイコンの違い

マークという点ではピクトグラムとアイコンは同じ。
ただ、ピクトグラムは2色使いを主としているのに対し、アイコンには色使いの制限がなくカラフル。
そして大きな違いは、端的にいうと公共性のある表記か機能表記かということ。

【メモ】

・ユニバーサルデザイン(色合いなど)に注意する。
※色弱の方や宗教、ジェンダーなどに配慮した(少なくとも攻撃性のない)デザインを心がける
※東京都のカラーユニバーサルデザイン(PDF)参照


・デザインに赤い十字(✚)などを使うと法律違反
参考サイト(https://webtan.impress.co.jp/e/2014/07/08/17778

・色について
FF0000(赤)や000000(黒)などは主張が強いので、少し弱めの色を使う方がデザイン向きとのこと

・ピクトグラムを実際にイラレで制作する時間は5分くらいが理想とのこと

・ピクトグラムは極力要素をそぎ落とし、最低限の情報で伝えられるようにする(デザインの敗北=ゴテゴテにならないように注意)

・ロゴは10個程度アイデア出し→1日で10個作成しクライアントへ提出・提案するのが理想とのこと

・フォントは、英数字のみ使用する場合は英文書体を使用すると、並びが綺麗に見えやすくおすすめとのこと(日本語書体でもOK)