Photoshop

トンマナを合わせたバナー作り

Photoshopwebデザイン

トンマナ とは、「トーン&マナー」の略で、 広告 におけるデザインの一貫性を持たせることを指します。 また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ 」は企業部 ブランディング においても重要です。


仕事では既存のコーポレートサイトとは別に定期的にキャンペーンサイトやランディングページ、バナーなどを制作する事がよくあります。その場合、既存のコーポレートサイトとある程度デザインを合わせる事で、その「企業っぽさ」や「らしさ」などを判りやすくユーザーに伝える事が出来ます。

Webデザイナーになって理想のキャリアを実現しませんか?

www.adop.co.jp

今回はクライアントワークで作成したサイトのトンマナに合わせたバナーを作ってみましょう。
300×250(PC用)
320×100(スマホ用)
の2サイズを作成します。
さらにCCを使用している人はアセット機能を使って画像を書き出しましょう。
CC以降、アセット機能を使う事で2倍、3倍サイズで書き出す事が非常に簡単に出来るようになりましたが、2倍、3倍のように非常に大きくする場合は大きいサイズの画像をスマートオブジェクトとして使用するようにしましょう。

helpx.adobe.com

blogs.adobe.com

liginc.co.jp

画像の補正

Photoshop

トーンカーブを使った補正

トーンカーブはデータの劣化をおこさずに細やかな補正ができます。
トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろん、最大で14個のポイント(制御点)を作成しより微妙な部分の調整をおこなうことができます。
例えば、各階調ごとの調整やRGBごとの成分調整が可能です。

f:id:yachin29:20171017013418p:plain

使用素材
http://yachin29.com/school/photoshop-hosei.zip

photoshopの描画モードを使う

Photoshop

描画モードを上手に使う事で、様々な合成が出来るようになります。
各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。

psgips.blog24.fc2.com

焼き印のようなロゴを作る

f:id:yachin29:20151210235011p:plain
  1. 白い台紙とロゴ画像を1つのレイヤーに結合する
  2. 結合したレイヤーを選択し「フィルター→ノイズ→ダスト&スクラッチ」を選択し、「半径:4」でクリック。全選択でコピー。
  3. 木のテクスチャにペーストし、チャンネルのRGBをコントロールクリックして反転。
  4. 「レイヤー」から「新規→選択範囲をコピーしたレイヤー」を実行。レイヤーに焼印と名前をつける。
  5. 「焼印レイヤー」のサムネをクリックし選択範囲→選択範囲の変更→境界をぼかすで「半径:20」(けっこう大きめ)くらいでOK。3と同じように背景レイヤーに戻って「新規→選択範囲をコピーしたレイヤー」を実行。レイヤーにぼかしと名前をつける。
  6. 「焼印レイヤー」を選んでレイヤースタイルの光彩(内側)で乗算、不透明度:50、色を黒、サイズを30くらいに。レイヤーオプションを焼きこみカラー。
  7. 「ぼかしレイヤー」のレイヤーオプションを焼きこみリニアに。
  8. 不透明度を調節

紙にスタンプされたようなロゴを作る

f:id:yachin29:20151211000109p:plain
  1. 白い台紙とロゴ画像を1つのレイヤーに結合する
  2. 描画色を赤 背景色を白に変更
  3. スタンプの画像を開き、フィルター→スケッチからギザギザのエッジを選び、「画像のバランス10」、「滑らかさ15」、「コントラスト23」
  4. フィルターから「描画→雲模様」のあと編集から雲模様のフェードを選んで、描画モードをスクリーンにすると、絵柄の部分だけ雲模様が残る
  5. フィルターから「スケッチ→コピー」で「ディテール7」「暗さ30」。続いて「新しいエフェクト」で新規フィルターを追加し、「スケッチ→スタンプ」を選択し、「明るさ暗さのバランス:40」「滑らかさ:5」で全選択でコピー。
  6. テクスチャにペーストし、レイヤーモードを乗算、焼き込みに
  7. 不透明度で微調整

湯気を付ける

新規レイヤーを作り(スクリーンでチェック)、描画色を初期設定にもどす
フィルターから雲模様1
フィルターから「ぼかし移動」角度:90、距離:40程度
フィルターから変形→波形で、波形:5、「波長は最小:10最大:250」、「振り幅は最小:1、最大:40」、比率は「水平:100%、垂直:15%」
投げ縄ツール(ボケ50)で切り取り、レイヤーマスクを追加。
不要な所を消しゴムで消す
不透明度を下げて調節

Assorted Logosrichardperkins.deviantart.com

f:id:yachin29:20171017011941j:plain
f:id:yachin29:20171017012546j:plain

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

Photoshop

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

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

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

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

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


レイヤーの命名規則

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

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

f:id:yachin29:20190301113818p:plain

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

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

詳しい命名規則はこちら
https://blogs.adobe.com/japan/dtp-photoshop-kihon-tips-04/blogs.adobe.com

helpx.adobe.com

GIFアニメーション

Photoshop

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animated GIF) ともいう。

一時はFlashや動画に取って変わられ見る事も少なくなりましたが、スマ ートフォンの普及により再び光を浴びることとなります。iPhoneFlashを対応しないことや、再生環境(端末やブラウザ)に差が生まれないこと、2,3秒で終わるショートなコンテンツなのでデータ量も低く抑えられているので、スマートフォンでも手軽に再生させる事が出来ます。

https://img.gifmagazine.net/gifmagazine/images/531933/original.gif

gifmagazine.net

授業ではテキストベースのGIFアニメーションを作り、バナーに組み込みましょう。

f:id:yachin29:20160114104727g:plain
f:id:yachin29:20190614125911j:plain

STEP1
輝きとなる白長方形を作り【フィルター】→【ぼかし】→【ぼかし(ガウス)】で4pixelぼかす

STEP2
ぼかした白長方形を斜め45°に回転し配置

f:id:yachin29:20190614130050j:plain

STEP3
Ctrl+クリックでロゴを選択し、空フォルダを制作しそこにベクトルマスクをかける

f:id:yachin29:20190614130118j:plain

STEP4
フォルダにマスクが掛かっているのを確認し白長方形をフォルダ内に入れる

f:id:yachin29:20160114113620p:plain

STEP5
上記のようにフレームを追加し、白長方形を移動させれば完成!

f:id:yachin29:20160114104956g:plain
f:id:yachin29:20160114113604p:plain

Photoshopで写真をポラロイド風にする(メゾティント加工)

Photoshop

f:id:yachin29:20180704123847j:plain
f:id:yachin29:20180704123946j:plain

元画像

Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。
まずはレイアー構造をしっかりと把握してから作業を始めましょう。









メゾティント加工

メゾチント(Mezzotint )とはもともとは版画の凹版技法のひとつ。
金属凹版にロッカーという櫛のような刃がついた器具で版全体に無数の刻みを入れたり、ささくれ状態の線をつくったりする。さらにその上をバーニッシャーやスクレーパーという金属のヘラのような器具でささくれを削ったりならしたりして絵を描き、刷る際にはインクを細かな刻みに擦り込んだ後に、刻みのない部分からは拭い落とす。これにより、刻みが残っている部分はインクの色が濃く現れ、刻みが削られたりならされたりした部分は白く浮き出るという効果が得られる。

  1. 任意の画像を色相・彩度の色相の統一を使って、セピア色にする
  2. 新規レイヤーを作り、「塗りつぶし→50%グレー」、「フィルター」→「ピクセレート」→「メドティント:長いライン」、「ぼかし移動(角度0、距離100〜200px)」、描画モード:比較(明)
  3. 新規レイヤーを作り、描画色:黒、背景色:白にしてく「雲模様1」、描画モード:焼き込みカラー
  4. 新規レイヤーを作り、複数のブラシサイズで濃い茶色で画像の四隅に影をつけ、描画モードを乗算にする

f:id:yachin29:20180704123804p:plain

Photoshopでの文字ツールの使い方

Photoshop

文字ツールを使う

  • 文字入力(配置したい位置ではなく、別の開いているスペースで入力する)
  • 入力後、移動ツールで配置したい位置に置く
  • 見出しを書く時はクリックして文字を書き始める
  • 段落文を書きたい場合はドラッグで段落文の範囲を決める(禁則処理を「強い禁則」に選択すると、句読点などが行頭に来てしまうことを防ぐことができます)

行間・字間を調節する

  • 行間は文字サイズより少し大きめにする程度(例:23px/25px)
  • 字間を調節する際は、カーニングを「オプティカル」に設定


色々なツールを使い文字を見せる

  • 縦書
  • 自由変形
  • ワープテキスト
  • 境界線

など

練習素材
http://yachin29.html.xdomain.jp/text.zip

使用するテキスト(実際に作業する際にはコピペせずにテキストツールを使って入力しましょう)

15時~LASTまではスイーツセットに出来ます!
季節のケーキ+ホットコーヒーで980円、ランチタイムはミニサイズが300円です。ぜひお試し下さい。

ホワイトチョコレート
ホワイトチョコをふんわりとしたくちどけのムースに。
甘さ控えめで男性にもおすすめ!
¥680円

洋梨の焼きカスタードタルト
洋梨とたっぷりカスタードクリームをいれて
焼き上げたタルトです。

完成
f:id:yachin29:20180412185554j:plain

Webの文字組み

Webの場合、紙媒体に比べると細かい文字組みは出来ませんが、それでも基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、
最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。
特に日本語の場合、1つの文章内にひらがな・カタカナ・漢字・全角英数字・半角英数字など様々な形の文字が混ざっている事があり、それぞれの特徴を知り、それに合わせた文字組みが必要になってきます。

  • ひらがな、カタカナは原則として詰める
  • 句読点などの記号も詰める
  • 括弧は一番細いフォントを選ぶ
  • 単位は小さな文字サイズにする
  • 助詞は一回り小さいフォントサイズにする


stocker.jp

バナーの制作

Photoshop

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。

バナーのサイズ

広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。

300×250(Yahoo!/Google)PC/スマホ ※推奨

728×90(Yahoo!/Google)PC ※推奨

160×600(Yahoo!/Google)PC ※推奨

336×280(Google)PC ※推奨

320×50(Yahoo!/Googleスマホ ※推奨

320×100(Yahoo!/Googleスマホ ※推奨

文字を入れてみる

決めたサイズとメインカラーで背景レイヤーを作り、文言を入れてみる。

優先順位とジャンプ率

入れた文言に対し、訴求したい順に優先順位を決め、文字サイズやジャンプ率をここで決めましょう。

文字のジャンプ率で印象は大きく変わる

ferret-plus.com

tsutawarudesign.com

バナー全体のデザイン

フォントの種類や色、テーマに沿ったデザインを作っていきましょう。
中々アイデアが出ない場合は既存のバナーを参考にしましょう。

uxmilk.jp

既存のバナー制作

既存のバナーをモデルにし、バナー画像を作成する。

フリー素材

食材・料理や野菜・果物のフリー写真素材 無料画像のフード・フォト

www.pakutaso.com

Photoshopでのマスク処理

Photoshop

画像のマスク処理


マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。

Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分けることによって、より効率的にデザインをすることが可能です。


クリッピングマスク

f:id:yachin29:20151002002549j:plain

クリッピングマスクは、切り抜きをしたいレイヤーのすぐ下にあるレイヤーの形に切り抜くことができます。
切り抜きは、文字でも図形でも手書きの図形でも可能です。
クリッピングマスクを作る場合は、レイヤーの順番に注意が必要です。

  • 切り抜きたいレイヤーが上
  • 切り抜きたい形が下のレイヤー

レイヤーマスク

選択範囲からマスクを作成します。
ブラシ・消しゴムなどでマスクの形を変更できるため、細かい微調整をしたい場合に向いています。
また、グラデーションツールを使う事で、徐々に変わる画像合成などが可能です。

f:id:yachin29:20151002010808p:plain

liginc.co.jp

Photoshop 基礎

Photoshopの基本的な使い方

Photoshopで行う作業は大きく別けると以下の3つ

  • 画像を作る。
  • 画像を補正する。
  • 画像を加工する。
f:id:yachin29:20121205022811j:image

Photoshopの初期化
目的は、無駄に消費されているメモリの記憶をリセットすること。
アイコンをダブルクリック等で起動。
このとき[Ctrl]+[Alt]+[Shift]を押したままに。
Adobe Photoshop設定ファイルを削除しますか?」とダイアログがでる。

  • カラー設定は「Web・インターネット用 - 日本」
  • 環境設定で注意する所は「単位・定規」Webは必ずPixelに。
  • ヒストリーの数を増やすと便利だが、増やし過ぎるとメモリーが足りなくなる。

・選択範囲を取る

  • 選択ツール
  • 自動選択ツール
  • マグネット選択ツール
f:id:yachin29:20121205023657j:image

などで選択範囲を取る。
微調整はクイックマスクモードで作業する。

・画像間の移動
別のファイルに選択範囲を切り取って移動

  1. 「練習_1」→「sky.psd」と「ダッキー.psd」を開く。
  2. 「ダッキー.psd」の中から選択範囲を決める。
  3. 「選択ツール」で選択範囲を「tsky.psd」の画面の上に移動する。
  4. ダッキーちゃんをちょうど良い大きさに「自由変形」で変更する。
f:id:yachin29:20121205024227j:image

ビネット効果

f:id:yachin29:20121205025253j:image