練習作品
使用ソフト|Photoshop(作業時間:約20分)
写真の一部を文字に置き換えました。

▼借用元元画像(ぱくたそ)

練習作品
使用ソフト|Photoshop(作業時間:約5分)
写真の空部分を別の空に置き換えました。
(空の置き換え機能+色味調整)

▼借用元元画像(ぱくたそ)


使用ソフト|Photoshop(作業時間:約20分)
写真の一部を文字に置き換えました。

▼借用元元画像(ぱくたそ)

使用ソフト|Photoshop(作業時間:約5分)
写真の空部分を別の空に置き換えました。
(空の置き換え機能+色味調整)

▼借用元元画像(ぱくたそ)


◆「デザインの考え方」の教科書④参照
◆まずはたくさん真似(模写)してデザインのコツを分析、理解すること
・無意識にコツが蓄積されていく
・トレースは勉強にならないので、横に並べて目視や定規で測ったりしながら模写する
【先生よりおすすめの練習順】
①インスタとかで流れている文字のみのバナーの模写
②画像の入ったバナーの模写(画像は似ているもので代用)
③構成を真似して別のバナーへの変換(例:コーヒー広告のバナーの要素は丸パクりで、緑茶のバナーに転換するなど)
◆授業外でも練習してコツを覚えていく&ポートフォリオに載せられる作品数を増やすのがおすすめ
※学校のフォントは数に制限があるので、似ているフォントで代用する
・家で好きなフォントを使用して、アウトライン化して持ってくるのもあり
◆なるべくいろいろな種類のテイストのバナーを作成する
(和→洋、お堅め→やわらかめ、かっこいい→かわいいとか)
何種類か違うテイストも作成できるアピールができる
ただ、得意なテイストも多めに作ってアピールする
◆バナーは最新トレンドを使った方がいい(ずっと使われるものではなく一過性の消耗品なので)
◆最初のうちは色数を抑えた方が色の組み立てをしやすい
メインカラー、補色、アクセントカラー+白地など背景色の4色など
◆バナーはweb用なのでRGBで作る
◆修正しやすいデータ作りを心がける(リテイクありき)
リテイクにも時間をかけないようにする
◆バナーはサイズが決まっていない(案件ごとにサイズが異なる)
◆バナーの作業は1時間を目標にする
・目が慣れて沼にはまってよくないので時間をかけすぎない
・実際見る人は1~3秒ほどしか見ない
・1時間以上は予算と生産性が合わないと実際のweb業界でも言われる(理想は30分~1時間)
・バナーの単価は2~3,000円などで安い(初心者だと更に1,000~1,500円など低くなる)ので、早くさばけないと割に合わない
・Photoshopの画像処理とかまだ慣れずに時間がかかるのは大丈夫(1時間に含めない)
・慣れて作業がサクサクできる状態での1時間が目安
◆先生よりおすすめ参考サイト
・バナーライブラリー(模写した場合そのページもメモしておく)
・ピンタレスト
・Instagram
・新規ファイル作成→A4→裁ち落とし0(A4サイズのものを作るときに裁ち落としつける)、CMYK、300dpiで作成
必ず線なしの四角形をもとにトリムマークを作成する
(→線幅込みでトリムマークが作成されてしまうため数ミリ単位でズレる)
①元となる基準の四角作成、トリムマーク作成
②+3mm、-3mmでオフセット作成
③元の四角・+3mm・-3mmの3つの四角を選択し、右クリック→ガイド作成
・使う色は少なくし、ガチャガチャしないようにする
背景含め4色くらい(テーマ色・補色・アクセント色・背景色)
(白黒グレーの無彩色は色数に含めない)
【画像解像度】
画像が小さいときは大きくする必要がある
イメージタブ→画像解像度
→幅・高さを「mm」で必要な大きさを入力、解像度を印刷の場合300(webの場合72で十分)にする
→再サンプルに☑し、【ディティールを保持2.0】でOK
【CMYK】
Photoshopで画像を開くとRGBになっているので、印刷物を作成する場合CMYKに変換が必要になる
【注意】
先に色調補正やゴミ除去など、編集作業を終えて、RGBデータでオリジナルデータを保存後に、必ず別名保存でCMYKカラーデータを作成する
→イラレに印刷物用としてリンク・埋め込みする場合は、CMYK後のデータを使う
◆方法①
イメージタブ→モード→CMYKカラー→アラート出てもOKで大丈夫
◆方法②
編集タブ→プロファイル変換→変換後のカラースペース・プロファイル→【Japan color 2001 coated】がおすすめとのこと
プレビューで他のと比較できる
→OKでCMYK変換される
◆先生より、作業が重くなるので、埋め込み予定でもリンクで作業し、最後に埋め込みがおすすめとのこと
【流れ】
①作業終了後、
・画像リンクのまま
・文字のアウトライン化前
・アピアランスの分割前
で一旦オリジナルデータとして保存
②別名保存し、下記処理をしておく
・画像埋め込みにする場合埋め込み
・文字アウトライン化
・アピアランスの分割
保存名は必ず小文字英数字+ハイフン+アンダースコアのみ(文字化けするとリンクエラーになるため)
・ゴールド文字の参考サイト:高級感のあるゴールドのロゴデザインの作り方|【動画解説】初心者OK! イラストレーターの使い方
メリット:埋め込みに比べ軽い。
リンク済の元データを変更すると、リンク先でも変更される。
デメリット:aiデータとリンク元データ(psd等)は保存先フォルダの指定でリンクされているので、フォルダを移動するとエラーになる。
できれば同じフォルダに保管が良いとのこと。
★会社により、フォルダごと納品するかなどルールが異なるので、適宜相談する。
メリット:元データを紛失してしまっても埋め込み済のデータは影響を受けないので残っている。
デメリット:埋め込み元データを変更しても反映されない。データが重い。
【方法】
ファイル→配置→リンクのチェックを外して配置
または、
リンクのチェックは入れたまま配置→プロパティ下部クイック操作欄【埋め込み】
→(レイヤーが複数のPSDファイルの場合)Photoshop読み込みオプション「レイヤーをオブジェクトに変換」を選択でOK
レタッチは直接画像データを加工するため、スマートオブジェクト化していると作業ができないことが多いので、ラスタライズ化しておく(レタッチ作業が終わったら再度スマートオブジェクト化でOK)
・カンバスサイズ→イメージタブから変更可能
基準位置の●が基点になるので、上下左右どこかを伸ばす場合は基点を矢印で位置調整する。
・画像解像度→イメージタブから変更可能
解像度を変更する場合、解像度:350などに変更し、必ず下の「再サンプル」のチェックを外す(☑したままだと正しいサイズにリサイズされないため)
・解像度を上げると画像は小さくリサイズされる
・解像度は印刷する場合、最低250~350くらい必要とのこと(ガビガビになって印刷に耐えられないため)
・WEB用なら、72くらいで十分(100くらいだとより綺麗かもだけど、現状だと仕事でも72でOKとのこと)
★ただし、低解像度だと選択範囲ももわもわになったりなどするので、150くらいの解像度で作業し、提出時に72くらいにするのがベストとのこと。
なげなわで大まかに範囲選択し、編集タブ→【コンテンツに応じた塗りつぶし】で細かく調整できる。
①元画像部分を少しと、空白部分を全選択
②編集タブ→【コンテンツに応じた塗りつぶし】
【A】クイック選択ツール→何も選択しない状態で、上部の【被写体を選択】
または
【B】①クイック選択ツールでクリック後、上部の【選択とマスク】
→右側の表示▼を「オーバーレイ」など見やすい表示に変更
②上部の【髪の毛を調整】
③さらに調整する場合は、左側ツールバーの【境界線調整ブラシツール】で直接毛などぽわぽわした部分をなぞるといい感じになる
・上の+-で範囲を調整
・右側のエッジを調整しても自然になる
◆クイックマスクモード
…他3つのマスクと違い、一時作業用のマスクモード
※ツールボックス下部の「クイックマスクモード」
◆レイヤーマスク
…ブラシで細かく調整ができるので、輪郭のぼやけたものや細かい作業に向いている。
※レイヤーウインドウ下部の「レイヤーマスク」
レイヤーウインドウでは、黒色でマスク表示される。
◆ベクトルマスク
…ペンツールを使いパスで選択範囲をとるため、輪郭のはっきりしたものに向いている。
レイヤーウインドウでは、グレーでマスク表示される。
◆クリッピングマスク
…画像の一部分を調整したり、一部分のみ表示させたいときに向いている。
直下のレイヤー1枚にのみ作用する。
一時的なマスクを作成するモードで、アルファチャンネルのように保存はできないが、選択範囲を編集する場合に便利で、画像に選択範囲を作成できる。
ツールボックス下部の[クイックマスクモード]をクリックすると、 選択範囲の外が薄赤色でオーバーレイ表示される。
★「クイックマスクモード」ボタンWクリックで、オーバーレイの色を変更できる。(標準の赤だと見づらい場合など)
【方法】
①基本的に、選択ツールなどである程度範囲をとり、「クイックマスクモード」クリック、ブラシで細かい範囲を調整する。
・黒…マスク部分(非表示部分)を増やす
・白…マスク部分を減らす=見えるようにする
→グレーや半透明などの色の濃度やブラシの硬さで調整する。
②調整後、再度「クイックマスクモード」クリックで選択範囲ができている状態になる。
③レイヤーマスク化する場合は、レイヤーウインドウ下部の「レイヤーマスク」、
またはクリッピングマスク化◑でもOK(選択範囲を保存しておくと便利かも)
レイヤーの一部だけを表示・非表示ができる。(レイヤーウインドウでは黒色表示)
元の画像を変更せずに部分的な補正や切り抜きが行えるため、 後に修正が必要になっても、レイヤーマスクを変更するだけでよい。
★ある程度選択範囲を取ってから「クイックマスクモード」で、色々なツールで調整ができる。
★レイヤーマスク後、元の画像(全体像)を見たいときは、Shift押しながらレイヤーウインドウのマスクのサムネクリックで×表示になり、元画像が見れる。![]()
ペンツールまたはシェイプツールで作成したベクトル画像を使い、画像全部または、画像の一部をマスク化または、選択範囲をとれる。
★シェイプツール(長方形ツールなど)でマスクをする場合は、シェイプレイヤーをラスタライズ化後に行う。(クリッピングマスクにも応用できる)
★【ペンツール】→範囲をとって、上部の「パス」を「シェイプ」にすると、イラレのようにオブジェクトが作成できる。
・ベクトルマスクの場合は、「パス」で、色や塗りのないパスが描けるので、これをマスク化する。
【方法】
①ペンツールのパスで範囲指定後、パスウインドウに「作業用パス」ができている。
②-A 選択範囲化する場合
ウインドウ下部の左から3つめ◌【パスを選択範囲として読み込む】で選択範囲化できる。戻す場合は右隣の◇【選択範囲から作業用パスを作成】でパス化できる。
②-B ベクトルマスク化する場合
パスの状態で、上部【マスク】クリックでマスク化される(レイヤーウインドウではグレー表示)。
パス状態でマスク化されるので、パス選択ツール⇦で修正できる。
あるレイヤーの透明部分を使用して、その上のレイヤーにマスクを適用する機能。
クリッピングマスクを使用すると、背面 (下) のレイヤー (ベースレイヤー) の透明ピクセルが、前面 (上) のレイヤーに対してマスクとして機能する。
クリッピングマスクを解除することで、元の状態に戻る。
【方法】
①画像をコピーして2枚のレイヤーを作り、
上側のレイヤーを選択範囲指定後レイヤーマスク化(下記のようなイメージ)
(・上側レイヤー:選択範囲指定し、レイヤーマスク化する
(・下側レイヤー:そのまま残す
(・背景(ロック済元画像)
②上側レイヤーの画像サムネイル(左側)が選択された状態で、
下部の◑【塗りつぶしまたは調整レイヤーを新規作成】→プロパティで適宜調整する。
③
一番上に新規作成された調整レイヤーを右クリック→【クリッピングマスクを作成】で、直下レイヤーのマスク部分にのみ反映される。
★クリッピングマスクをやめたいときは、右クリック→【クリッピングマスクを解除】
★再調整したい場合は、調整レイヤーの◑をWクリックする
★上側のレイヤーが優先表示されるが何個でも調整レイヤーは作れる(グループ化しておくと楽)
・レベル補正>トーンカーブのほうが簡単だが、トーンカーブはすべて補えるので覚えたらやりやすいとのこと
【応用】画像を文字の形やオブジェクトの形で切り抜き表示する方法
①(・画像レイヤー
(・文字やオブジェクト のレイヤー順にする
②画像レイヤーを右クリック→【クリッピングマスクを作成】で、直下の文字やオブジェクトの形で切り抜き表示される。
★複数の文字やオブジェクトで表示させる場合は、複数選択し右クリック→【シェイプ結合】でまとめることで、表示できる。
・Photoshopで画像を差し込みたいとき
ctrl+A・ctrl+C→ctrl+V
または、直接画像ファイルをデスクトップなどからドラッグでもOK
・ヒストグラム
→ファイルを開いた時点からの作業記録
保存した時点で消える(戻れない)ので注意

作業時間:10分くらい
パッチツール、コピースタンプツール、シャープなどを使って手を消してみました。
背景のタイルがあまりうまくなじませられられなかったり、特にコップ左側がぼやけてしまったりするので、練習していきたいと思います。
※スマートオブジェクト化しているとレタッチ作業ができないので、ラスタライズ化してから行う
レタッチ作業時のみラスタライズ、作業後再スマートオブジェクト化など、人によるとのこと
消したい対象を範囲で囲う→ドラッグすると移動領域をAIがなじませて消してくれる
Alt押してコピペできる(ただのコピペでなじませてはくれない)
ドラッグでAIがなじむように修正してくれる
AIがなじませて移動してくれる
輪郭をぼかせる
輪郭をはっきりさせる
※やりすぎると画質が荒れるので注意
指で画面をこすったようになじませられる
塗っていくと明るくできる
上部「範囲」で、特に効果的にしたい部分を指定できる?※要確認
ハイライト:明るい部分、シャドウ:暗い部分、中間色
画像内の暗い部分(影など)を強調できる
・ファイルから開く(加工したい写真を取り込む)
・レイヤーパネルで複製
・右クリックでスマートオブジェクトに変換(非破壊データ化)
・背景のレイヤーを非表示(+ロック)
・PSDで保存 → 加工していく
・選択範囲取ってから、Shift(カーソルが+₊)で範囲追加、Alt(カーソルが+‐)で範囲削除できる
・Ctrl+Dで選択解除
・なげなわツール→自由に指定できる
・多角形選択ツール→直線で範囲指定したいときに便利(PC画面やテレビの枠など…)
ポチポチクリックしていく、終わらせるときは範囲を閉じるかWクリック
・マグネット選択ツール→自動で選択する(判定ゆるめ)
・オブジェクト選択ツール→AIが判断してピンクのオーバーレイが表示される
→クリックすると範囲指定される(判定ゆるめ)
※使用時は画面上部「オブジェクトファインダー」のチェックを入れること
ツールバー下部の「クイックマスク」や左上「選択とマスク」画面で細かい部分を調整する
・クイック選択ツール→ドラッグしていくと範囲指定できる
・自動選択ツール→クリックで範囲指定(許容値を変えて調整する)
【その他】
・移動ツール→レイヤーの位置移動や別タブからレイヤー移動もできる
・切り抜きツール→ボックスで調整してEnterで切り抜きできる
スマートオブジェクト化したレイヤーを加工せずにマスクで部分隠しができる
やり方:選択範囲を指定後→レイヤーパネル下部「レイヤーマスクを追加」
非表示にした部分が黒塗りでサムネイル表示される
細かく調整する場合、マスク側のサムネイルを選択し、ブラシで塗る(白=削除、黒=マスク部分を増やす)
白~黒で表現し、グレーなど中間色は半透明になる(グラデーションツールも使用できる)
ファイル→書き出し→「web用に保存(従来)」(Alt+Shift+Ctrl+S)
左上「プリセット」→JPG(高)、画質60などで保存(画質20くらいだと荒れる)
・ctrl+Tで変形
・ファイル保存名は、「クライアント名_lpやbannerなど商材名_日付.jpg」等が管理しやすいとのこと
・レタッチは数をこなす
うまくいかない写真はパスする(1時間以上はかけない)
いくつかこなすとパターンが分かってくる
・練習のときは小さい画像(作業が軽いので)、仕事のときは大きい画像(拡大すると荒れるため)
・ウィンドウタブの「オプション」を表示させると作業しやすいとのこと
WordPress:テーマの選定と切り替えウィジェット
Illustrator:基本操作の復習
Photoshop:選択範囲とレタッチ
・テーマの変更
外観→テーマ→新規追加→右上検索ボックスに、変えたいテーマの名称を入力し検索、インストールし有効化
Wordpress内にない場合、外部サイトでZIPファイルをダウンロードし、「テーマのアップデート」でZIPファイルをアップロード→有効化
・ウィジェット
サイドバーやフッターなどに表示されるカレンダーや検索ボックスなどのパーツ
Illustrator→ベクターイメージの編集ソフト
パスで作られる作品:アンカーポイント(点)同士をセグメント(線)で繋いで作成する
◆ペンツール…パスを描くツール
ハンドルを使用し曲線の角度や向き、長さ等を自由に変えられる
ハンドルの作り方→ペンツールでクリックしたままドラッグ
ハンドルを動かす方法:△ダイレクト選択ツール
・パスを閉じずに線を描き終える場合は、Escキー(オープンパス)
・パスを最後まで閉じたもの(クローズドパス)
Photoshop→ビットマップ画像編集ソフト
【最初の操作】
①元の画像レイヤーは鍵をつけて非表示にして保存しておく(復元するときのため)
②コピーしたレイヤーはスマートオブジェクト化しておく
スマートオブジェクト:画像を縮小→拡大などするとガビガビになってしまうので、必ず変換しておく
(レイヤー右クリック→スマートオブジェクトに変換)
※レタッチ作業はスマートオブジェクト状態だとできないので、ラスタライズ(スマートオブジェクトでなくすること)する
③PSDデータで最初に別名保存しておく
→この後作業を行っていく
【選択範囲】
Illustratorと同じように、ペンツールを使用し選択範囲を設定できる
【レタッチ】
・スポット修復ツール(クリックで不要物を消したりできる)
・修復ブラシツール(Alt押しながらクリックでコピペしたりできる)
・コンテンツに応じた修復ツール など
・ZIPファイルの開き方
ダブルクリックではなく、右クリック→「すべて展開」
・無料画像サイトを使用する際は規約をよく確認する
(PAKUTASOは使いやすそう)
【ポートフォリオについて】
・作品のクオリティを高くし、バランスを均一にする
(作品数のために自信のない駄作を載せてバランスを下げない)
・作品作成時は情報を残す
使用ツールや作業時間、何に気を付けて作成したか、アピールポイントなど
※クオリティを判断するのは作成者ではなく閲覧者なので、「よくできたと思います」などの感想は不要
・訓練記録だけでなく、作品ページを充実させる
新しい投稿が上になり、古い投稿は下に流れていく&文字の記録ばかり表示されると実績(どんな作品を作っているのか)がわかりづらい、作品作成ペースが遅い(少ない)とも見えてしまうため
授業以外での自習作品や、以前に作った個人的な作品もポートフォリオには載せてOK