WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

バナーの作成

バナー広告とはディスプレイ広告の1つです。
広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。


バナー広告の種類

  • モバイル:代表的なサイズ 320x50、320x100
  • パソコン:代表的なサイズ 300x250、728x90、160×600


モバイル用のバナーはPC用に比べ、極端にサイズが小さいのでテキストや画像の選択が非常に難しくなります。
さらにモバイル用であれば高解像度ディスプレイで閲覧される事が前提なので、2倍のサイズで作成します。


f:id:yachin29:20191205123220g:plain


f:id:yachin29:20191205123231g:plain



anagrams.jp



既存バナーのトレース

f:id:yachin29:20161125092848j:plain




アセット機能を使ってみる

以前はwebサイト制作のワークフローとして、Photoshopでカンプを作成し、画像を書き出す為に「スライスツールで各画像を切り出す」という作業を行なっていましたが、この「スライスツールで画像を切り出す」という作業が色々と制約があり、とても細かい作業の為、非常に面倒でした。

これがPhotoshopのCCになってから「画像アセットの生成」という機能に変わり、面倒なスライスツールを使う必要が無くなりました。
さらにレイヤー構造を保ったまま、複数のレイヤーを1枚の画像にまとめる事など、今までのスライスツールでは出来なかった事も出来るようになり、作業効率も非常に上がるので、ぜひ覚えましょう。

「画像アセットの生成」の作業手順

  1. photoshopの作業(psdデータ)データを名前を付けて適切な場所(フォルダー)に保存
  2. レイヤー、もしくはフォルダーに画像のファイル名と拡張子(jpgやpngなど)を付ける
  3. 「ファイル」の生成→「画像アセット」にチェックを入れる

f:id:yachin29:20190301111313p:plain

これだけでpsdデータを保存したフォルダーに「〇〇-assets」というフォルダーが生成され、その中にファイル名を付けたレイヤーが画像として書き出されます。
万が一、上手く生成されない場合は「環境設定」の「プラグイン」の項目の一番上の「Generaterを有効にする」にチェックが入っているか確認してみましょう。


レイヤーの命名規則

アセット機能を使用する際に一番重要なのは適切なレイヤー名を付ける事です。アセットで書き出す事の出来る画像拡張子は「jpg」「png」「gif」「svg」の4つです。
また、複数のサイズや複数の拡張子で書き出したい時はファイル名とファイル名の間にカンマを入れます。


例「200% logo@2x.jpg,logo.jpg」

そうすると「〇〇-assets」フォルダーに以下のように複数の画像が生成されます。
f:id:yachin29:20190301113818p:plain



また複数のレイヤーをフォルダーにまとめ、フォルダーに拡張子を付けると、ファルダーの中の各レイヤーが1つにまとまった画像が生成されるので、こちらも実際にやってみましょう。




詳しい命名規則はこちら
blogs.adobe.com


note.com



helpx.adobe.com