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)

12月23日(金)-グラフィックデザイン基礎⑥Illustrator・埋め込みとリンク

【リンク】

メリット:埋め込みに比べ軽い。
リンク済の元データを変更すると、リンク先でも変更される。

デメリット:aiデータとリンク元データ(psd等)は保存先フォルダの指定でリンクされているので、フォルダを移動するとエラーになる。
できれば同じフォルダに保管が良いとのこと。
★会社により、フォルダごと納品するかなどルールが異なるので、適宜相談する。

【埋め込み】

メリット:元データを紛失してしまっても埋め込み済のデータは影響を受けないので残っている。

デメリット:埋め込み元データを変更しても反映されない。データが重い。

【方法】
ファイル→配置→リンクのチェックを外して配置
または、
リンクのチェックは入れたまま配置→プロパティ下部クイック操作欄【埋め込み】
→(レイヤーが複数のPSDファイルの場合)Photoshop読み込みオプション「レイヤーをオブジェクトに変換」を選択でOK

12月21日(水)-グラフィックデザイン基礎⑤Photoshop・レタッチ

レタッチ

レタッチは直接画像データを加工するため、スマートオブジェクト化していると作業ができないことが多いので、ラスタライズ化しておく(レタッチ作業が終わったら再度スマートオブジェクト化でOK)

・カンバスサイズ→イメージタブから変更可能

基準位置の●が基点になるので、上下左右どこかを伸ばす場合は基点を矢印で位置調整する。

・画像解像度→イメージタブから変更可能
解像度を変更する場合、解像度:350などに変更し、必ず下の「再サンプル」のチェックを外す(☑したままだと正しいサイズにリサイズされないため)


・解像度を上げると画像は小さくリサイズされる
・解像度は印刷する場合、最低250~350くらい必要とのこと(ガビガビになって印刷に耐えられないため)
・WEB用なら、72くらいで十分(100くらいだとより綺麗かもだけど、現状だと仕事でも72でOKとのこと)
★ただし、低解像度だと選択範囲ももわもわになったりなどするので、150くらいの解像度で作業し、提出時に72くらいにするのがベストとのこと。

【応用1】

なげなわで大まかに範囲選択し、編集タブ→【コンテンツに応じた塗りつぶし】で細かく調整できる。

【応用2】カンバスサイズを大きくした際など、空白部分を簡単に埋める方法

①元画像部分を少しと、空白部分を全選択

②編集タブ→【コンテンツに応じた塗りつぶし】

【応用3】髪の毛や動物などぽわぽわしたものの選択

【A】クイック選択ツール→何も選択しない状態で、上部の【被写体を選択】
または
【B】①クイック選択ツールでクリック後、上部の【選択とマスク】
→右側の表示▼を「オーバーレイ」など見やすい表示に変更
②上部の【髪の毛を調整】
③さらに調整する場合は、左側ツールバーの【境界線調整ブラシツール】で直接毛などぽわぽわした部分をなぞるといい感じになる
 ・上の+-で範囲を調整
 ・右側のエッジを調整しても自然になる

12月21日(水)-グラフィックデザイン基礎⑤Photoshop・マスク

マスクの種類

◆クイックマスクモード
…他3つのマスクと違い、一時作業用のマスクモード
ツールボックス下部の「クイックマスクモード」

レイヤーマスク
…ブラシで細かく調整ができるので、輪郭のぼやけたものや細かい作業に向いている。
レイヤーウインドウ下部の「レイヤーマスク」
レイヤーウインドウでは、黒色でマスク表示される。

ベクトルマスク
…ペンツールを使いパスで選択範囲をとるため、輪郭のはっきりしたものに向いている。
レイヤーウインドウでは、グレーでマスク表示される。

◆クリッピングマスク
…画像の一部分を調整したり、一部分のみ表示させたいときに向いている。
直下のレイヤー1枚にのみ作用する。

・クイックマスク

一時的なマスクを作成するモードで、アルファチャンネルのように保存はできないが、選択範囲を編集する場合に便利で、画像に選択範囲を作成できる。
ツールボックス下部の[クイックマスクモード]をクリックすると、 選択範囲の外が薄赤色でオーバーレイ表示される。
★「クイックマスクモード」ボタンWクリックで、オーバーレイの色を変更できる。(標準の赤だと見づらい場合など)

【方法】
①基本的に、選択ツールなどである程度範囲をとり、「クイックマスクモード」クリック、ブラシで細かい範囲を調整する。
 ・黒…マスク部分(非表示部分)を増やす
 ・白…マスク部分を減らす=見えるようにする
 →グレーや半透明などの色の濃度やブラシの硬さで調整する。

②調整後、再度「クイックマスクモード」クリックで選択範囲ができている状態になる。

③レイヤーマスク化する場合は、レイヤーウインドウ下部の「レイヤーマスク」、
またはクリッピングマスク化◑でもOK(選択範囲を保存しておくと便利かも)

・レイヤーマスク

レイヤーの一部だけを表示・非表示ができる。(レイヤーウインドウでは黒色表示)
元の画像を変更せずに部分的な補正や切り抜きが行えるため、 後に修正が必要になっても、レイヤーマスクを変更するだけでよい。

★ある程度選択範囲を取ってから「クイックマスクモード」で、色々なツールで調整ができる。

★レイヤーマスク後、元の画像(全体像)を見たいときは、Shift押しながらレイヤーウインドウのマスクのサムネクリックで×表示になり、元画像が見れる。

・ベクトルマスク

ペンツールまたはシェイプツールで作成したベクトル画像を使い、画像全部または、画像の一部をマスク化または、選択範囲をとれる。

★シェイプツール(長方形ツールなど)でマスクをする場合は、シェイプレイヤーをラスタライズ化後に行う。(クリッピングマスクにも応用できる)

【ペンツール】→範囲をとって、上部の「パス」を「シェイプ」にすると、イラレのようにオブジェクトが作成できる。
ベクトルマスクの場合は、「パス」で、色や塗りのないパスが描けるので、これをマスク化する。

【方法】
①ペンツールのパスで範囲指定後、パスウインドウに「作業用パス」ができている。
②-A 選択範囲化する場合

ウインドウ下部の左から3つめ◌【パスを選択範囲として読み込む】で選択範囲化できる。戻す場合は右隣の◇【選択範囲から作業用パスを作成】でパス化できる。
②-B ベクトルマスク化する場合
パスの状態で、上部【マスク】クリックでマスク化される(レイヤーウインドウではグレー表示)。
パス状態でマスク化されるので、パス選択ツール⇦で修正できる。

・クリッピングマスク

あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能。
クリッピングマスクを使用すると、背面 (下) のレイヤー (ベースレイヤー) の透明ピクセルが、前面 (上) のレイヤーに対してマスクとして機能する。
クリッピングマスクを解除することで、元の状態に戻る。

【方法】
画像をコピーして2枚のレイヤーを作り、
上側のレイヤーを選択範囲指定後レイヤーマスク化(下記のようなイメージ)
 (・上側レイヤー:選択範囲指定し、レイヤーマスク化する
 (・下側レイヤー:そのまま残す
 (・背景(ロック済元画像)

②上側レイヤーの画像サムネイル(左側)が選択された状態で、

下部の◑【塗りつぶしまたは調整レイヤーを新規作成】→プロパティで適宜調整する。



一番上に新規作成された調整レイヤーを右クリック→【クリッピングマスクを作成】で、直下レイヤーのマスク部分にのみ反映される。

★クリッピングマスクをやめたいときは、右クリック→【クリッピングマスクを解除】
★再調整したい場合は、調整レイヤーの◑をWクリックする
★上側のレイヤーが優先表示されるが何個でも調整レイヤーは作れる(グループ化しておくと楽)
・レベル補正>トーンカーブのほうが簡単だが、トーンカーブはすべて補えるので覚えたらやりやすいとのこと

【応用】画像を文字の形やオブジェクトの形で切り抜き表示する方法
①(・画像レイヤー
 (・文字やオブジェクト のレイヤー順にする

②画像レイヤーを右クリック→【クリッピングマスクを作成】で、直下の文字やオブジェクトの形で切り抜き表示される。
★複数の文字やオブジェクトで表示させる場合は、複数選択し右クリック→【シェイプ結合】でまとめることで、表示できる。

メモ

・Photoshopで画像を差し込みたいとき
ctrl+A・ctrl+C→ctrl+V
または、直接画像ファイルをデスクトップなどからドラッグでもOK

・ヒストグラム
→ファイルを開いた時点からの作業記録
保存した時点で消える(戻れない)ので注意

12月19日(月)-グラフィックデザイン基礎④

WordPressへのPDFのアップロード方法

メディアライブラリに入れるのでなく、最初から投稿・固定ページの「画像」→「アップロード」で直接PDFをアップロードする
※PDFファイルはそのままだと透明部分が黒色になるので、背景に白地を置くなどする

感想

本日は1か月で学んだツールなどを使いIllustrator、Photoshopで作品を作る、1回目の成績考査でした。
しっかり覚えたことが身についているか、時間内に作品を仕上げることができるか不安でしたが、試行錯誤しながら作っていく作業は手こずる分うまく形になったときは嬉しく、楽しく感じました。
時間内に目標していたイメージまでは完成することができませんでしたが、これからも練習していきたいと思っています。

12月17日(金)-CMS構築基礎④固定ページの作り方(パスワード設定と実用例)

ブロックエディタの主要機能

  • テキスト→「段落、見出し、リスト」(改行入力、リンク設定)
  • テキスト→「コード、整形済テキスト、詩」(複数の空白や改行をそのまま表示
  • テキスト→「テーブル」:表組型式を作成
  • メディア→「画像、ギャラリー」:写真掲載の基本
  • メディア→「カバー」:テキストをオーバレイした画像を配置
  • メディア→「メディアとテキスト」:写真と文章を並べる
  • メディア→「ファイル」:PDFファイルなどのダウンロードを配置
  • デザイン→「ボタン」:リンクを作成するのに便利
  • デザイン→「カラム」:横方向に複数欄を作成し、それぞれのメディアを指定可
  • デザイン→「続き」:抜粋に表示する範囲を指定
  • デザイン→「ページ区切り」:別ページにする時に指定
  • デザイン→「区切り」:文章と文章の間に水平線を表示
  • デザイン→「スペーサー」:空間を作成
  • ウィジェット→「ウィジェット」:色々な表示部品を指定
  • ウィジェット→「ソーシャルアイコン」:SNSへのリンクを作成
  • 埋め込み→「埋め込み」:代表的なサイトへのリンクを作成

参考サイト

WordPressブロックエディターの使い方
ブロックエディタ(Gutenberg)の使い方

投稿ページと固定ページ

使いやすい(見やすい)ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要

参考サイト

WordPressの固定ページと投稿ページの違いを解説
WordPressの「固定ページ」って? 「投稿」との違いや使い方を紹介
WordPressでカスタムメニューを作成する方法【初心者向け】

固定ページとは

「固定ページ」は、カテゴリーとの紐付けやトップページとの連動のない独立したページを作る機能で、お問い合わせページや会社紹介ページなどカテゴリーに属さないコンテンツを作るのに適している

パスワード設定

①パスワード保護を追加したいコンテンツのWordPressエディターを開く
②右側のサイドバーにある「公開状態」オプションをクリック
③「パスワード保護」を選択し、投稿のロックを解除するのに使用するパスワードを入力

ポートフォリオに作品を載せるのは、ある程度許容されていることであり、作品を掲載したことで著作権を訴えられるという可能性はほとんどない。
しかし、著作権や守秘義務をいい加減にしてよいというわけではない。
このことを決して念頭から離さず、ポートフォリオに掲載する場合は著作権や守秘義務にきちんと配慮していることを示すことを心がけるようにする。
そうした姿勢を見せることで応募先の企業によい印象を持ってもらえる可能性が高まる。

固定ページを企業向けページとして用意

ポートフォリオは「デザイナーが実績をアピールするための作品集」。
ポートフォリオサイトは、その応募企業様向けに利用する。

ポートフォリオサイトのトップページは基本送らない。
企業の応募要項に合った作品該当ページを、企業側が探してくれるわけはないので、しっかりとその企業に向けたページを用意すること。
権利や守秘義務を意識しパスワード設定をした固定ページを利用する。

求人票の宿題をまとめるのが固定ページ

求人票にある宿題「○○の出来る方」のアンサーをパスワード設定した固定ページで作成し、その応募企業様向けのページを作成する。
これから、ロゴやピクトグラム、アクセスマップや名刺、バナー作成をして、HTMLとCSSを学びLP(ランディングページ)を作成していくので、それを掲載できるように、企業用に改変したり、新規に作成したりする。
その宿題がクリア出来たら、様々な案件に対応できる100ページの実績を見せて、面接に繋げていく。

多くの作品を作っておき、様々な企業にアプローチできるように準備しておく

多くの企業が様々なサービスを提供しているので、これが出来れば仕事に繋がるという絶対はない。
また、社内に既にその技術スタッフがいれば、間に合っています。となり、契約に至る事も難しい場合もある。

対策は「多くの作品を用意しておく」こと。
未来の仕事に対して、雇用主は可能性を考えるため、より多くの種類の作品を用意することで、可能性を広げておく。
訓練時間で、より多くの作品を作れるよう意識していく。