- 『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。
- Web Design 初級コースの Lesson 14 のまとめ！
こんにちは、涼太郎です。
この記事は、デザイン書籍『けっきょく、よはく。』でお馴染みのingectar-eさんが提供するFullme Web Design セットコースの体験記録です。
今回は、初級コース Lesson 14の範囲で僕が学んだことのまとめをしていきます。
Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。
Lesson 14 バナー制作（アイシャドウ）
Fullme Web Designコースの第14回目は「バナー制作（アイシャドウ）」がテーマです。
実践：対角線のレイアウトを使ったアイシャドウのバナーデザイン
今回はアイシャドウのバナーを制作していきます。
同じ素材を使って300×300の大きさと728×90の大きさのバナーを作りました！
300×300
出来上がったものがこちら👇
728×90
出来上がったものがこちら👇
使用フォント
全部で3種類のフォントを使用しています。
「New」にはGoogle Fontsの Birthstone Bounce を、
「01」「02」にはフリーフォントの Bradley Hand を、
それ以外の文字にはモリサワフォントの Star Times Display Pro を選びました！
画像
今回の画像はunsplashからお借りしております。
工夫したところ
はじめ、レッスンに従った構図で配置していたのですが、選択した画像が違うからなのかどうも収まりがよくなかったのでガラッとレイアウトを変更しました。
さらに、今回のテーマである対角線構図を意識してガイド線を置いて角度を合わせてみました。
ガイドは『最強構図 知ってたらデザインうまくなる。 [ ingectar-e ]』から持ってきた！
提供された画像によって完成像の印象が異なる。
それは画像自体の見栄えによる部分もあるし、その画像をより印象的に見せるための構図が変わってくるからということになると思う。今回僕が選択したアイシャドウのパレットがふたつ並ぶ画像は、対角線や二分割の構図を作成するのにちょうどよかった。
また、同じ対角線だとしてもレッスンで提供された画像だとうまくいく要素の配置も別の画像にするとスッキリしない見た目になることがわかった。
完成品
最後に、もう一度作成した画像を載せておきます。
Webデザインを学びたいなら、Fullmeしよう。
バナーを作るのにもだんだん慣れてきた感じがしています。
表現方法を覚えていくと対応力がついて自信にも繋がっていきますね！書籍やサイトを眺めて引き出しを増やしていきたい。
ここまで読んでくださったあなたもFullme体験しませんか？
こちらの書籍がおすすめ。
