2025/09/23 本日は、バナーの模写を作成しました。
本日のアジェンダ
1限目
実技 ECサイトデザイン実習②
Photoshopの機能について
2限目
実技 ECサイトデザイン実習②
バナー模写練習
3限目
実技 ECサイトデザイン実習②
バナー模写練習
4限目
実技 ECサイトデザイン実習②
バナー模写練習
5限目
実技 ECサイトデザイン実習②
バナー模写練習
Photoshop操作のおさらい
レイヤースタイル
- レイヤーパネルで編集したいレイヤーを選択
- 下の 「fx」マーク から効果を追加できる
- よく使われるもの：
- ベベルとエンボス → 立体感を出す
- 境界線 → 枠線をつける
- ドロップシャドウ → 影を落として浮かせるように見せる
- 光彩（外側/内側） → 光のにじみをつける
- よく使われるもの：
- 複数の効果を重ねて、好みのスタイルに調整すると便利！
ブレンドモード（描画モード）
画像合成や色調補正でよく使うので、いくつか試して効果を比較すると覚えやすい！
レイヤーパネル上部のプルダウンで変更できる
よくわれるモードの特徴：
通常 → デフォルト（何も合成しない）
乗算 → 下の色と掛け算され、暗くなる
スクリーン → 下の色と反転して掛け算、明るくなる
オーバーレイ → 明るい部分はより明るく、暗い部分はより暗く、コントラストが強調される
ソフトライト／ハードライト → 写真の雰囲気を変えるのに便利！
バナー模写実習
ということで、実際にPhotoshop、イラストレーターを使ってバナー模写作成をしました。４時間でふたつのバナー模写を作成することができました。
まず一つ目：ビームスのバナーです。写真はAdobe Fireflyを使って生成しました。写真をさらに色相・彩度や明るさとコントラストを調節して参考画像の暗い感じに合わせて調整しました。写真をクリッピングマスクで四角くくり抜くところが苦労しました。Photoshopでオブジェクトを扱うのに慣れておらず、操作が手こずってしまったため時間がかかってしまいました。
二つ目：大阪王将のバナーです。餃子VSチャーハンということで、私が餃子がすごく好きなので選びました。背景の波線でできた境目や、中央のトゲトゲのオブジェクトを作るところが特に大変でした。先生より、このデザインはPhotoshopではなくIllustratorで作った方が早いかも？とアドバイスいただきましたので、写真の切り抜きのみPhotoshopで行い、それ以外のところはIllustratorで作成しました。
コメント