1月23日(月)-ECサイト運用基礎②バナー/レイヤー効果

参考サイト

Photoshopのレイヤースタイルの使い方【全種類一覧解説】 | 321web
【Photoshop】描画モードの基本と効果的な使い方 | デザナビ
Photoshop で塗りつぶしツールを利用して色を変更する方法 | IT/Web 総合情報サイト – Webolve

レイヤー効果

・レイヤー右クリック→レイヤー効果→ドロップシャドウ(影)や境界線(切り抜いた写真や文字にふちどり)など付けられる
(または、【fx】からもOK)

・レイヤー一枚一枚は面倒なので、レイヤーグループにして一括で効果をつけると楽

・Photoshopのオブジェクト(シェイプ?)は後から色を変更するのが大変なので、【カラーオーバーレイ】または【グラデーションオーバーレイ】を使うと楽とのこと
→プロパティから色変更できるっぽい

例)ドロップシャドウ

レイヤー効果【応用】外枠の作り方

新規レイヤー作成→バケツで何色でもいいので塗りつぶし→レイヤー効果→【境界線】→内側・塗りをなしで線のみにすればOK

バナー【メモ】

・1時間1個での作成が目標
・文字のみのバナー練習がある程度済んだら画像付きバナー模写の練習
・白黒で配置してから色をつけるとイメージしやすいとのこと
・Photoshopで文字の一部を消す場合、レイヤーマスクで黒で塗りつぶせばOK
・Photoshopで文字幅を【B】以上に太くする場合、レイヤー効果【境界線(外側)】で太くできる
・Photoshopで文字をふちどる場合、レイヤー効果【境界線】で外側or内側設定、+文字色を変更すればOK

文字のみバナーの模写練習作品

使用ソフト|Photoshop(作業時間:約150分)
3つ目の画像はボーダーの背景がうまくできなかったため、パターンで修正しました。
参考サイト:【かんたん】Photoshopで斜めのストライプを作る方法 | ゆずゆろぐ。

▼借用元元画像(BANNER LIBRARY)
1枚目:https://design-library.jp/10108
2枚目:https://design-library.jp/12771
3枚目:https://design-library.jp/13069
4枚目:https://design-library.jp/11946

パターン【応用】

ストライプのパターンを文字で試してみました。(Photoshop)
黄色の文字色→・パターンオーバーレイ(ピンクのストライプパターン)
       ・境界線(赤色で外側2px)
       ・ドロップシャドウ(暗い赤色)