■スポンサーリンク
こんにちは
きゃとらにです🐈
今回はデザインテクニックの練習記事書きました!
テーマは、『平面構成を意識したアイテム紹介画像』です
上の写真みたいにアイテム並べてるやつ、
よくインスタや雑誌で見かけません?
「(誰それ)の(アイテム名)紹介しまーす」
的なやつです
・カバンの中身
・化粧ポーチの中身
・街で買ったアイテム
とかとか、
自慢のアイテムをファッション雑誌っぽくフォトジェニックに紹介したい方のお役に立つかと思います
はい、フォトジェニックとか普段使わないんで胸焼けしそうですね
ではいってみましょー
- 参考資料
- 平面構成を意識したアイテム紹介
- アイテムを並べる
- 撮影した写真をPhotoshopを使い調整する
- Illustratorで画像を配置しする
- 文字を入れる
- 文字を調整して読みやすくする
- 完成
- おわりに
参考資料
今回の練習にあたり、使用したのはこちらの書籍です

ほめられデザイン事典 レイアウトデザイン Photoshop & Illustrator
- 作者: 永楽雅也,尾沢早飛,小森じゅん子,鈴木真梧,高橋としゆき
- 出版社/メーカー: 翔泳社
- 発売日: 2013/09/19
- メディア: 大型本
- この商品を含むブログ (1件) を見る
カッコ良くてプロいデザインが108リストアップされており、それぞれやり方を解説してくれています
PhotoshopやIllustratorでレイアウトデザインを身につけたい方に心強い一冊です
解説に写真が多く使用されているので分かり易い
字を読むだけじゃイマイチうまく手順を再現できない、なんてことがちょいちょいあるわたしもストレスフリーで見れました
気になる方はこちらでなか身をチラ見してはいかがでしょう?
kindle版もあるみたいですよ
ではこの本を見ながら実際に練習・再現してみましょう
平面構成を意識したアイテム紹介
平面構成とは?
「平面構成」とは、その名の通り平面上を構成していく作業のことです。「シンメトリー」「アシンメトリー」「リズム」「プロポーション(比率)」「配色」「構図」「バランス」 「重量感」といったデザイン理論を適宜利用しながら、どのように配置していけばもっとも美しく見えるかを考えていきます。
「シンメトリー」「アシンメトリー」までは分かるけどそれ以降は????
理論が分かって初めて意味があるんだろうけど現時点では分からん理論だらけ!!
そこら辺は追々やるとして
残念ながら今回は見よう見まねで
どれだけ本のお手本写真を再現できるかに注力してみようと思います
平面構成って、タイトルにまでしてるのに面目ない
アイテムを並べる


まずはアイテムの配置を決めます
本曰く、撮影前、予めアイテムの構成をラフスケッチにおこすと撮影がスムーズだそうです
恐らくさっき平面構成の説明でも出てきた「バランス」や「構図」、「リズム」などなどを考慮するためでしょう
その辺の知識がまだないので
とりあえず、区画整備した感じにものを配置するとこを真似てみました
それがコレ
「見栄えの比較的なマシな仕事関係ありそうグッズたち」という急ごしらえチーム
多肉植物なんも関係ねー
緑があると映えるのかな??って思ったんですけどね…
それにしてもこれ、何となく収まりの悪い感じするのは気のせいですかね?
カメラ紐がびろーんって出ちゃってるし
やっぱやり直し!
こっちのが横方向に整備されてるし、アイテム同士もくっつきすぎてなくてお手本に近い気がします
どうかな?


写真はこれを使うことにしました
では次は写真の調整をおこないましょう!
撮影した写真をPhotoshopを使い調整する
わたしはPhotoshopをもっていないので、クリップスタジオで作業しました
今回の写真は彩度を上げました
手順は、〔レイヤー〕→〔新規色調補正レイヤー〕→〔色相・彩度・明度〕
〔彩度〕のスライダーを右にずらして、色を鮮やかにしました
Illustratorで画像を配置しする
Illustratorを用い、画像を配置します
やり方は、〔ファイル〕メニュー →〔配置〕
わたしはIllustratorも持っていないのでクリスタで続行
文字を入れる
クリスタの〔テキスト〕ツールから〔源暎ゴシックM Heavy〕を使ってタイトルとアイテムリストをとりあえず置いてみました。
本では、Illustratorの〔文字ツール〕から〔ゴシックMB101/Bold〕を使っています
〔ゴシックMB101/Bold〕というフォントは雑誌などでタイトル表記によく使用されるフォントだそうです
ハネやハライまで表現されているため力強い印象を与える書体です
ただし、ディテールのある書体なだけに、書体の特徴を生かすにはある程度のスペースを必要とするようなので、
ウェブ上などといった、スマホなど小さなデバイスで表示させることもある場合は使用方法に注意が必要なようです(風格のあるゴシック体、ゴシックMB101を語る。 : 旧creative tweet.(引っ越ししました))
ウェブ用にはモダンゴシックが使いやすいようですよ
フォントの世界も深いんだなぁ
文字を調整して読みやすくする
まずは文字色を黒から白に変えました
これでお手本と同じ
わたしの写真の場合は、黒でも大丈夫かな?と思いましたが、
お手本の背景がうっすら透けて見える文字がカッコイイので真似しました
《タイトル文字の作成法》
1. フォントの色を白に変更したら、不透明度:70%に設定
2. フォントを複製し、上のレイヤーのみ黒で縁取り
アイテムリストで写真の文字と被った部分が読み取りづらいので、該当箇所の写真に「ぼかし」を入れます
《クリスタ「ぼかし」方法》
〔フィルター〕→〔ぼかし〕→〔ガウスぼかし〕
数字を入力しぼかし具合を調整します
これでいくらか文字が見やすくなりました
完成
黒文字版も作りました
どっちがいいかな?
おわりに

ほめられデザイン事典 レイアウトデザイン Photoshop & Illustrator
- 作者: 永楽雅也,尾沢早飛,小森じゅん子,鈴木真梧,高橋としゆき
- 出版社/メーカー: 翔泳社
- 発売日: 2013/09/19
- メディア: 大型本
- この商品を含むブログ (1件) を見る
今回、こちらの本に書いていることを限られた条件下ではありましたが、可能な範囲で再現してみました
ちょっとしたことに気を付けるだけでもなんだかオシャレで見栄えの良い画像が作成できた気がします
『平面構成』はほとんどできてないけど
みなさんもご興味があったらぜひやってみてください
映えます!
↓ kindle版

ほめられデザイン事典 レイアウトデザイン Photoshop&Illustrator
- 作者: 翔泳社
- 出版社/メーカー: 翔泳社
- 発売日: 2013/10/18
- メディア: Kindle版
- この商品を含むブログを見る
きゃとらに🐈
■スポンサーリンク