レイアウトに余白を生むために!写真の中ではみ出したデザイン!

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

フォローするだけでデザインを学べるTwitterアカウント
毎日デザインのポイントを解説するインスタアカウントを運営しております。

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

 

今日のテーマ:写真の中にはみ出したデザイン

写真を使うデザインは多いかと思いますが、スペースを使うことなく写真の中に文字を入れるデザインの紹介です!

コンパクトにまとめられることでその分、余白を生むことができます。繰り返しの要素として使える今回のポイントぜひ参考にしてみてください!

余白の重要性に気づくためにはこちらの記事をご覧ください。

ちなみに余白を生む方法は今回の写真の中にいれるデザインの他に、

縦と横文字を混ぜる文字の最小サイズを知ること、枠を使わないことなど挙げられます!

 

レイアウトに余白を生むためには写真の中でデザインを!

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

4枚の写真の中でそれぞれ数字が入っています。

デザインをするに当たってデザイン範囲というのは限られれています。その中でどうデザインをするかというのがデザイナーの腕の見せ所。

今回は限られた範囲でも目を引く写真の中に大きな文字(数字)を入れたデザイン。写真の中で数字がはみ出しています。

こうすることで目を引く数字を大きく使いつつ、デザイン範囲を小さく収めることができます!

これを写真の外にこの大きさで数字を配置するとごちゃごちゃしがちです。(またごちゃごちゃしないよう数字の色も背景の緑と合わせています)

これは数字だけではなく、もちろん文字全般に対しても使えます。

また図形に対しても使うことができます。(こちらは次章で解説)

 

写真の中に文字デザインを入れる操作方法

個別写真の中に文字を入れる方法はイラレでもフォトショでもできるクリッピングマスクを使います。

イラレの場合

イラレは文字の中に写真を入れる場合は簡単ですが、

今回のような写真に文字を入れる場合は、写真と同じサイズの図形を作って図形と文字を複数選択してcommand(ctrl)+7になります!

文字の中に写真を入れる記事はこちら

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

フォトショの場合

フォトショは2つのレイヤーの間でoption(alt)を押しながらクリックです。

 

webデザインでもチラシでも○つのポイントや、○ステップでできる手順、○このメリットなど複数要素の繰り返しは多いかと思います。

クリッピングマスクを使って写真の中に文字を入れよう!

限られたレイアウトの中でワンポイントの文字を見せたい時はぜひ個別の写真の中に入れてみてください!

 

デザ研
他にも写真の中にデザインを入れたサンプルを見てみましょう!

 

画像の中にデザインを入れて限られたレイアウトに余白を!

こちらのデザインサンプルでは3種類の画像の中に入れたデザインを作ってみました。

このように前述したクリッピングマスクを使えば同じスペースでも様々なデザインを考えられます。

以下3つともクリッピングマスクを使っています。それぞれを見ていきましょう!

 

クリッピングマスクを使った写真上のデザイン

写真の中に数字を入れる

これは前章で解説した数字を写真の中に入れるデザインです。

クリッピングマスクを使えばはみ出しても問題なしです!

写真の中に図形を入れる

写真の中に図形を入れるパターンです。

これも写真の形に合わせた図形を作っているのではなく、斜めにした長方形をクリッピングマスクしているだけ!

この図形の配置はかなり頻繁に使っています。

写真の中に文字を入れる

写真の中に文字を入れるデザイン。

クリッピングマスクを使うことではみ出しても問題ないので大きな文字を配置できます。

ちなみにインパクトある大きな文字を配置する記事もありますので合わせてご覧下さい!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

写真の中に数字・図形・文字を入れてみよう

クリッピングマスクを使ってはみ出すのがポイントです!

またクリッピングマスクを使えば、写真の中に切り抜き写真をはみ出して配置することも考えられます!

 

もっと写真中ではみ出すのポイントを使ったデザインが見たい方!

この記事で解説した写真中ではみ出すのデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

 

デザ研
クリックすると写真中ではみ出すを使ったデザイン”だけ”が表示されます!

レイアウトに余白を生むために!写真の中ではみ出したデザイン!まとめ

いかがでしたでしょうか?はみ出しても大丈夫なクリッピングマスクを使うことでインパクトあるデザインもできますし様々な表現を使うことができます。

今回の記事は複数枚の写真を使うWEBデザインやチラシなどで使えるポイントですね。

イラレでもフォトショでも使えるクリッピングマスクを使った写真のデザイン配置をぜひ参考にしてみてください!

 

こちらの記事では反復について詳しく解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

・クリッピングマスクを使って写真の中に文字を入れよう
・写真の中に数字・図形・文字を入れてみよう

 

 

この投稿をInstagramで見る

 

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


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

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

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

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

CTR IMG