blog

BLOGブログ

ARCHIVES

ユージ

鬼のように高いフォントがなくてもなんとかなる!?ECで盛り上がるバナーを作る際のPhotoshopエフェクト!コストを掛けずにバナーを作ろう!

こんにちは!

 

 

 

 

ネットショップを始めたばかりの方に朗報!?

 

 

 

 

 

 

無料のフォントでそれっぽく魅せる方法を今回は記載していきたいと思います!

 

 

 

 

 

恐縮なのですがphotoshopは持ってる前提です。。。。

今回使用しているのは「photoshopsCS6」です!

 

 

 

 

 

いいフォントって本当に高いですよね…
ネットショップを始めたばかりの店長さんは
いきなりは手がでない金額になってます。

 

 

 

 

 

 

でも、でも、でも
無料のフォント(元々入ってるフォント)でも作れます!

 

 

 

 

 

 

売れる店ほど雰囲気にあったフォントの使い方が本当に上手いですよね!

 

 

 

 

 

 

前回のブログ
ECサイトですぐ使える!バナーを簡単に作るための背景色と文字色について
も是非チェックしてみてください!

 

 

 

 

 

 

前回は単純に文字の色と背景の色の何が簡単でいいの!?
って話でしたが今回はフォントを加工していきますので
一気に幅が広がります!

 

 

 

 

 

 

 

デフォルトで入っているフォントはMacとwindowsでは違いますが、
今回は一般的なwindowsのデフォルトフォントだけでやってみましょう!
(Macはヒラギノが入ってるだけで、スタート地点がかなり違う気がしますね…)

 

 

 

 

 

 

 

では始めましょう!
(※できるだけ簡単にできるように余計な部分は触らず必要最低限いじっていきます!)
(※数字が若干違ってもぜーんぜん問題ないので気軽にやってみてください!)

 

 

 

 

 

 

0817-001

最終的にこんな感じにするのが目標です!

 

 

 

 

 

 

すぐできそうで若干ややこしいんですよね・・・

レイヤーを重ねたり・・・

などでも全然出来ますがより簡潔にするために

パッと書いたテキストから全てをスタートさせます!

 

 

 

 

 

 

 

 

初心者のかたは覚えておいて損はないかと思いますので

順を追って確認していってください!

 

 

 

 

今回使うフォントは「impact」

PCに入っているかと思います!

 

 

 

 

 

0817-002

まずはスタート地点・・・・

テキストモードで何でもいいので文字を書きましょう!

 

 

 

 

ややこしいので文字サイズと行間だけしか触っておりません。

 

 

 

 

 

ここで文字の間隔などを触るだけでも雰囲気はだいぶ変わります(今回はデフォルト)

 

0817-003

ここは特に難しいところはないですね!

 

 

 

え、そもそもこの文字のウィンドウどこにあんの?!

 

 

 

って方は「フォトショップの一番上」の「ウィンドウ」ってところを押して「文字」というところを押しましょう!

 

 

 

 

 

では次のステップへ!

 

 

0817-004

グラデーションをつけましょう!

 

 

 

 

0817-006

この辺りでどこの画面よそれ!

 

 

 

 

って方は右の方におそらく出ている「レイヤー一覧」のその文字の部分を右クリックして「レイヤー効果」ってところを押してみてください!

 

 

 

 

レイヤー効果>グラデーションオーバーレイ>グラデーション

で上記の画面にいけます!

 

 

 

 

 

 

グラデーションで何色かを混ぜて

いい感じにしていきます。

 

 

 

 

 

 

この辺りはご自分の好きな色や作ってみたい色合いでやってみても全然大丈夫です!

とにかく色のところをいじってどうなるかを確認していってください!

 

 

 

 

 

0817-005

さて、色が固まった!

というタイミングでひとつだけやっていただきたいことが!

 

 

 

 

 

今のタイミングでは何事も起きませんが

「描画モード」を「スクリーン」に変更しておいてください。

これが完成形の薄いストライプと関係してきます。

 

 

 

0817-007

0817-008

 

先ほどのレイヤー効果(レイヤースタイル)の画面で

境界線にチェックを入れて上記のようにしてみください!

サイズが境界線の太さですね!

 

 

 

 

 

0817-009

0817-010

 

同じくレイヤースタイル画面で

「ドロップシャドウ」をいじっていきましょう!

 

 

 

 

 

これも境界線と同じくかなり使うので

色々いじってみてください!

 

 

 

 

要は「影」です。

この画面で

影を「濃くしたり薄くしたり」

影の「色を変えてみたり」

影の「場所を変えてみたり」

できるのです。

 

 

 

 

 

 

0817-011

 

0817-012

 

今回の例だと ぶっちゃけ最終形であんまりこれが効いてる!

ッて感じにはなってませんが

要は「立体感」です。

せっかくなので上記と同じように設定してみてください。

(ほとんど変わらないレベルですが・・・)

 

 

 

 

 

 

 

 

ここまでくると結構完成に近づいてますね!

あとは最後の難関「パターンオーバーレイ」です。

 

 

 

 

 

 

0817-013

0817-014

パターンさえ持っていれば難しいことはなにもないのですが、

これさえあればそれっぽくなるといっても過言ではないかもしれません・・・・

 

 

 

 

 

ただ「グラデーションオーバーレイ」や「カラーオーバーレイ」と組み合わせるときが少し厄介です。

 

 

 

 

 

何もせずにこれらを組み合わせると打ち消し合い、

最終的にこの「レイヤー効果」で一番上のやつが勝ちます。

(勝つというか表示されます。)

 

 

 

 

 

カラー>グラデ>パターン

 

てな感じです。

 

 

 

 

 

 

ただ今回は何も心配いりません。

なぜなら先ほど「グラデーションオーバーレイ」で「スクリーン」を選択していただいたからです。

 

 

 

 

 

 

今回は大丈夫かと思いますが、

次回からこれらを組み合わせるときには「描画モード」が重要ということを覚えておいてください!

 

 

 

 

 

 

0817-015

そんな感じで完成です!

 

 

 

 

 

是非試してください!

 

 

 

 

 

 

 

いやいや。

「パターン」ってなんだよ。

それがわからんのだよ。

 

 

 

 

 

って話になりますよね。

 

 

 

 

 

 

 

 

簡単に言うと「パターン」をフォトショップに記憶させて

いつでも使えまっせー というやつです。

 

 

 

 

 

 

うん、でもストライプ持ってないよ。

どうすんのこれって話ですよね。

 

 

 

 

 

 

基本的にパターンを読み込ませるためには

①パターンを自分で作る

②切り取ってパターンにする

③無料で素材が色々あるのでそれを使う

まだあるかもしれませんが

知る限りこんな感じです。

 

 

 

 

 

初心者の方は②③にしましょう。

 

 

 

 

 

 

せっかくなので②のやり方だけ

お伝えしますね。

 

 

 

 

 

 

 

 

我らがエフエフエフエフマンのパターンを作ってみましょう。

0817-016

パターンにしたい部分を選択ツールで選択して

 

 

 

 

0817-017

 

編集>パターンの定義

でパターンの登録完了です!

 

 

 

 

簡単です!

 

 

 

0817-018

 

 

 

あとはレイヤー効果>パターンオーバーレイ>↑このパターンを選択

 

 

 

するだけです!

 

 

 

 

 

それを使って文字を作ると。

 

 

0817-019

 

こんな感じですね。

 

 

 

 

いつか使おう。

 

 

 

 

 

 

それではまた次回!

 

 

 

 

 

 

 

 

この人が書いた記事

ユージの記事をもっと見る

関連する記事