全面写真を使うデザイン。余白の作り方をフォトショップで解説!

全面写真を使う四方裁ち落とし

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:全面写真を使う四方裁ち落とし

使うことの多い全面写真。WEBデザインでもメインビジュアルなど全面の写真を使うことは多いはず。そんな全面写真の弱点は余白がない場合があること。

そんな弱点を補う全面写真の余白の作り方を解説します!フォトショップを使えば写真に余白をあとから作ることができる!

 

レイアウトに関してのまとめ記事を作りました。具体的なレイアウトのデザイン例が豊富です。ぜひご覧ください!

関連記事

デザインにおけるレイアウトのポイントを知ることで圧倒的に作りやすくなります。今回の記事ではそんなレイアウトに関してのデザインポイントを紹介!どんなデザインにもレイアウトは存在します。そんなレイアウトのよくある[…]

超簡単!全面写真に余白を作るにはトリミングを活用しよう!

全面写真に余白を作るデザインサンプル

こちらが今回のデザインサンプルです。

全面に写真を配置するレイアウトである四方裁ち落としを使っています!

全面写真を使うことで迫力あるデザインを作ることができます!しかし文字情報が多いと配置が難しくなります。。。

全面写真に余白を作るデザイン解説

しかし写真加工で余白を多くすることで、文字情報が多くても配置することが可能!

加工方法は写真を拡大したりして余白が生まれるようにずらすことが最も簡単です!

初心者は写真を100%表示のまま配置することをしがちですが、写真の比率を変えずに大きくすることはよくやります。

写真はそのまま使ってもいいですが、拡大するという選択肢も持つべき!

 

全面写真に余白を作るデザインサンプル2

例えばこのように100%表示で使う写真はうまく文字を配置するための余白を作れていません。

 

全面写真に余白を作るデザインサンプル3

しかしこのようにすることで余白を生むことができ文字を配置することもできます。

全面写真に余白を作るデザインサンプル4

このように写真を拡大して使うことで余白が生まれたり、デザインの幅が広がります!

 

デザ研
拡大するのも一度思いっきりやってみましょう!

 

 

他にはブラシを使って写真を塗り潰すことや、レタッチで不要物を削除し余白を多く生むこともできます。このような写真加工はフォトショップ一択ですね!

そもそも余白の多い写真を使う、余白をとって撮影するのももちろんOKです!(これらは次章で詳しく解説しています。)

こちらの記事では余白で作る吹き出しデザインを解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

つまりまとめますと、、、

全面写真でも工夫次第で余白を生むことができる!

ということです。

 

ちなみに今回のデザインサンプルでは過去投稿079「初心者が使わないあれの使い方」で紹介した線をゴリゴリに使ったデザインになってます。

沢山の線を使っていますが線要素を反復させているので一体感あるかと思います!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

写真を拡大した他のデザイン例


デザイン提供:Udemy

こちらのデザインでも写真を大きく使うことで余白を生み、その余白に文字を配置していますね!

 

余白の少ない全面写真に余白を作る方法をフォトショップで解説!

インパクトある全面写真に余白を生む方法

上のデザインサンプルでも全面写真を使った四方裁ち落としですが、、、、

うまい具合に文字を配置する余白ができています。

実はこの写真にも余白を生んでいる秘密が。

元の写真は横写真でこのような写真なのです!

この写真を縦に左に余白を生むようにトリミングすることで文字をきれいに配置することができています。

横写真もトリミングすることで縦に使える!!

 

デザ研
ここからはさらに全面写真の余白を生み方を解説していきます!

 

全面写真の一部にブラシを使って余白を生むデザイン

全面写真の一部にブラシを使って余白を生むデザイン加工前

こちらも全面写真を使っています。そして右下にキャッチコピーを配置してみました。

しかし右下にペダルなどが写っており要素が多くていまいち文字が目立っていません。

全面写真の一部にブラシを使って余白を生むデザイン加工後

こちらのデザインでは黒のブラシを使って写真を一部、塗りつぶしてみました。

キャッチコピーがグッと頭に入ってきますよね。

このように写真に使われている色のブラシを使って余白を作ることができます!

 

全面写真の一部を消して余白を生むデザイン

全面写真の一部を消して余白を生むデザイン加工前

こちらの写真では、文字を配置したい部分に白線があり、読みにくくなっています。

 

全面写真の一部を消して余白を生むデザイン加工後

このように白線を消すことで余白を生み、かなり文字も読みやすくなりました!

 

スポット修復ブラシツールで全面写真の一部を消して余白を生む

ちなみに消し方はPhotsohopのスポット修復ブラシツールでなぞっているだけです。

このような小さなモノを消したいときはスポット修復ブラシツールですぐに消せます!

スポット修復ブラシツールのショートカットキーは?▼
Jになります。このような写真加工はPhotshopでおこないます!

 

まとめますと、、、

全面写真の余白を生むにはトリミング、塗りつぶし、削除などで可能!

今回紹介したポイントだけでも抑えておけば全面写真への文字入れもかなりやりやすくなると思います。

フォトショップにて全面写真の余白を作る方法まとめ

いかがでしたでしょうか?全面写真を使うインパクトあるデザイン。しかし弱点は余白が少なくなること。

しかし今回の記事のようなポイントを使うことで余白をしっかり作れた全面写真をデザインすることができます!

  1. 写真をトリミングして余白を生む
  2. ブラシで一部塗りつぶして余白を生む
  3. レタッチのようにツールを使って削除し余白を生む

このようなポイントを解説しました!

これはポスターもバナーもWEBデザインにも使えるポイント。ぜひ活用してみてください。

 

こちらの記事は背景デザインまとめ記事にも含まれています!

関連記事

背景のデザインに迷わないためのまとめ記事を作りました。ずばりデザインの背景には基本的には3種類のパターンで構成されます!この3種類のパターンにてそれぞれ自分の引き出しを増やせば迷うことはかなり少なくなると思います。[…]

・全面写真は工夫して余白を生もう!
・余白はトリミング、塗りつぶし、削除などで作ることができる。

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)1日1投稿(@designkenkyujo)がシェアした投稿

全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG