アイコンの中身と装飾を分ける
複数のAIサービスアイコンを同じ画面へ置くと、元画像ごとに傾き、厚み、輪郭の強さが異なります。平面のロゴを中身として扱い、スマートオブジェクトの外側へ境界線、影、光、立体感を作ると、見た目の基準を共通化できます。
背景色が変われば、光や輪郭の色も調整します。再利用するのは固定値ではなく、ロゴを差し替えても同じ大きさと装飾構造から調整を始められる状態です。
差し替え可能なアイコン雛形を作る
- 01
平面ロゴを用意する
傾きや厚みが付いていないロゴを置き、基準となる外形と大きさを決める。
確認装飾をすべて隠すと、元の平面ロゴだけが見える。 - 02
中身をスマートオブジェクトにする
ロゴをスマートオブジェクト化し、差し替える内容と外側の装飾を分離する。
確認スマートオブジェクトの中身を変えても、外側のレイヤースタイルが残る。 - 03
共通の外形を揃える
必要に応じてカラーオーバーレイなどで基準形を作り、新しいロゴを重ねて外形と大きさを合わせる。
確認複数アイコンを横に並べたとき、見かけの大きさと傾きが揃う。 - 04
輪郭・光・影を外側へ付ける
レイヤースタイルで境界線、ベベル、光沢、影を作る。講義例では立体感の一部にEye Candyも使われているが、必須ではない。
確認アイコン同士の厚みと光の方向が揃い、ロゴ自体は読める。 - 05
実寸で効果を調整する
配置サイズが変わったら、レイヤースタイルの比率を調整し、輪郭や影が太すぎないか確認する。
確認縮小表示でもロゴが潰れず、輪郭だけが主張していない。 - 06
雛形として保存する
中身、共通装飾、案件ごとの調整を区別できるレイヤー名で保存する。
確認別のロゴへ差し替えても、元アイコンと同じ見かけの大きさから始められる。
保存する部分と毎回調整する部分を分ける
| 対象 | 再利用するもの | 案件ごとに確認するもの |
|---|---|---|
| アイコン | スマートオブジェクト構造、基本の輪郭・立体感 | ロゴ中身、見かけの大きさ、光色、影の強さ |
| 主見出し | 基準フォント、文字階層、基本のレイヤースタイル | 文言、行長、助詞の大きさ、改行位置 |
| 数字・英字 | 使う書体と数字の見せ方 | 日本語見出しとの高さ、間隔 |
| 補足文字 | 本文より弱く見せる基準 | 背景との明暗差、座布団の大きさ |
| PSD | レイヤー構造と命名 | 案件名、版、今回の素材と納品画像 |
一枚生成は完成品ではなく、構成の叩き台にする
文字組みをAIへ渡し、背景とアイコンを含む一枚のサムネイル案を生成した。
- 入力
- 先に組んだ文字を使い、背景を含むサムネイル案として仕上げる。
- 出力
- 生成案からアイコンの立体感や配置の方向を読み取り、実制作では文字組み、アイコン、レイヤースタイルをPhotoshopで再構築する。
- 採用理由
- 生成案の発想を使いながら、文字の可読性、アイコンの統一、差し替え可能性を手元で制御できるため。
生成案の使える構成を採り、ロゴと文字を編集可能なレイヤーで作り直している。
生成案に焼き込まれた文字やロゴを、そのまま完成データとして使う。
雛形を使っても必ず見直す箇所
前回PSDを上書きし、過去案件の編集データが失われる
原因別名の作業ファイルへする前に編集と保存を始めている
直し方複製元を開いた直後に今回名で保存し、保存先を確認してから編集する
保存したレイヤースタイルを別サイズへ使うと、輪郭や影が太すぎる
原因ピクセル寸法が変わっても同じ効果比率を使っている
直し方実際の配置サイズでレイヤースタイルの比率を調整する
契約したフォントを増やしたが、案件ごとの基準が決まらない
原因書体数を増やすことと、役割を決めることを混同している
直し方主見出し、数字・英字、補足の役割ごとに実際に使う書体と組み方を残す
実際の制作画面で確認する
動画内の画面と照らし合わせ、説明した判断がどこに表れているかを確認します。
差し替え可能なアイコンと文字基準を作る
やること
よく使うアイコンを一つ選び、中身をスマートオブジェクト、外側を共通レイヤースタイルに分けます。同じファイルに、主見出し、数字・英字、補足の文字見本も置いてください。
残すもの
別名保存した作業用PSD、差し替え可能なアイコン雛形、役割別の文字見本
自己確認
- 複製元と作業用PSDの名前と保存先を区別できる
- スマートオブジェクトの中身だけを変えて別ロゴへ差し替えられる
- 差し替えた二つのアイコンの見かけの大きさと光の方向が揃う
- 配置サイズを変えた後も、ロゴが輪郭や影で潰れていない
- 主見出し、数字・英字、補足の役割と使う書体が分かる
次へ進める状態か確認する
操作したかではなく、結果が基準を満たしているかを確認します。