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ページの実績を見せて、面接に繋げていく。

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

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

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

12月16日(金)-グラフィックデザイン基礎③Illustrator

シェイプ形成ツール

塗りのオブジェクトを選んで、1つのグループにできる
※線オブジェクトには使えない、塗りのみ

ペンツール

・最初の1クリックから最後のクリックまでハンドルを作る(クリック後そのままドラッグ)

・Alt押下後、片方のハンドルのみドラッグで片側のみ動かせる(またはアンカーポイントツール)
※ハンドル掴んでからAltは×、線がコピーされてしまうので必ずAlt押してからハンドル操作

・ペンツールで描画中に、Alt必要(片側のハンドルのみでOKと分かっている)なときは、描画中にAlt押してもできる
クリックしてハンドルを伸ばしながらAltを押すと、描きながらでも片側のみのハンドル操作ができる

【ハンドルを作り忘れたとき】
アンカーポイントツールをクリックし、ドラッグで作成できる

【アンカーポイントを増やす方法】
ダイレクト選択ツールでオブジェクトを選択後、ペンツールでセグメント(線)の上をドラッグ(ペンマークの右下に+が表示された状態)
※あまり増やしすぎると逆に難しくなるので注意

【アンカーポイントを消す方法】
ダイレクト選択ツールでオブジェクトを選択後、ペンツールでアンカーポイントをクリック

ガイドと定規

ガイド・定規:印刷には出ない線
【表示タブ→定規→定規を表示】(Ctrl+R)※よく使うのでショートカット覚える
上か左の定規からドラッグでガイドが引ける
ガイドの位置移動:ダイレクト選択ツールでドラッグorプロパティのXYWHでも可能(Photoshopは不可)

回転ツール

①ダイレクト選択ツールでオブジェクト選択後、
②回転ツールでオブジェクトの回転したい基点を、
Alt押しながらクリック

リフレクトツール(反転)

①ダイレクト選択ツールでオブジェクト選択後、
②リフレクトツールでオブジェクトの反転したい基点を、
Alt押しながらクリック

1つ前の動作の繰り返し

Ctrl+D ※よく使うのでショートカット覚える

配置

・トレースなどする際、アートボードに画像を配置することができる

【ファイルタブ→配置→画像選択
→下部:リンクのチェックを外し、テンプレートのチェックのみ入れる→配置】

・トレース時作業がやりやすいよう、画像の濃度を変更できる

【配置した画像レイヤーテンプレートの画像サムネイルをWクリック
→画像表示濃度を変更→必ず再ロックしておく】

スポイトツール

・塗りを前面にしてからスポイト
・Shift+スポイトで、塗りの色のみ吸える(線の色は反映されない)

練習作品

12月13日(火)-Illustrator トレース予習

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ペンツールとベジェ曲線

・ペンツール → 直線のパスを描画
・曲線ツール → 曲線のパスを描画
図形の組み合わせで描く方法の他に、ペンツールを使って自由に描画できる

【応用】
ペンツール(直線)を使用しているとき、次のクリックしたポイントでドラッグすると曲線が描ける

【メモ】
・(先生より)レタッチもトレースも数をこなすこと
特にキャラクターなどのトレース(模写)での練習は上達が早くなるとのこと

12月13日(火)-Photoshop レタッチ予習

レタッチ

※スマートオブジェクト化しているとレタッチ作業ができないので、ラスタライズ化してから行う
レタッチ作業時のみラスタライズ、作業後再スマートオブジェクト化など、人によるとのこと

・パッチツール

消したい対象を範囲で囲う→ドラッグすると移動領域をAIがなじませて消してくれる

・コピースタンプツール

Alt押してコピペできる(ただのコピペでなじませてはくれない)

・スポット修正ブラシツール

ドラッグでAIがなじむように修正してくれる

・コンテンツに応じた移動ツール

AIがなじませて移動してくれる

 

・ぼかし

輪郭をぼかせる

・シャープ

輪郭をはっきりさせる
※やりすぎると画質が荒れるので注意

・指先ツール

指で画面をこすったようになじませられる

 

・覆い焼きツール

塗っていくと明るくできる
上部「範囲」で、特に効果的にしたい部分を指定できる?※要確認
ハイライト:明るい部分、シャドウ:暗い部分、中間色

・焼き込みツール

画像内の暗い部分(影など)を強調できる

 

12月13日(火)-CMS構築基礎③

メディア

【PDF】
→サムネイル表示できない
サムネイル表示したい場合は、JPGやPNGなどで別ファイルで表示させる
PDFはDLして読んでもらうなどの資料向け

【JPG】
・圧縮率が高いので画質が荒れやすい
・データが軽い

【PNG】
・圧縮率が低いので画質は綺麗め
・データがJPGより重い
・透過画像が作成できる

 

※画像を借用する場合

・「営利目的ではありません。」
・「勉強のために使用させていただきました。ありがとうございました。」
・「勉強のためにトレースさせていただきました。」
等の謝辞をトップページの隅やプロフィールページ等に載せておくのがよいとのこと
※作品を載せた全ページに記載したりは不要
※©(コピーライト)は付けない。©は著作者しか使用できないので、注意。

【注意】
※人物は借用を避けたほうが良い(著作権の他に被写体の肖像権があるため)
→使う場合は自分で撮った(被写体の許可がある)ものまたは、無料画像サイトのものを使用する

※ロゴマークも借用は避けたほうが良い(商標権が絡むので)

作品を掲載する際のポイント

・どのツールのどんな機能を使用したか
・何を描こうとしたのか
・どのくらいの時間を使ったのか など
技術と結果を明確にすると良い

特に、現在・過去・未来、
現在の作品の自己評価、過去の作品からの改善点、次はこうしたいという未来への目標
これらを考えて次に繋げていく
過去に作成した作品をブラッシュアップして比較し、成長曲線を可視化できるようにすると良い