SNS用の画像にも!スクショを使った背景デザイン!短時間で整った背景の作り方

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

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

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

 

今日のテーマ:スクショ背景

スクリーンショット の撮影方法、そしてデザインへの展開方法について解説しています!スクショを活用することで時短にそして簡単に整列したデザインを作ることができます。

意外とスクショを活用している例は見ることがあります。そんな実例を通してスクリーンショット を有効活用していきましょう!

SNSの画像にも使えるスクリーンショットを使ったデザインの紹介!

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

多くの画像が整った背景写真はスクショを使っています。

多数の要素を整列させ配置する背景を使うこと意外と多いですが、その時に1枚1枚を配置するのは大変です。そんな時に使えるのがスクショ1枚を配置するだけの裏技!

このスクショを背景として使うことで1枚の画像でサンプルデザインのような多数の写真を使った複雑背景を作ることができます!

サンプルデザインの背景はsalon.ioというポートフォリオ作成サービスのスクショになります。salon.ioは画像のドラッグ&ドロップだけで作れるポートフォリオ作成サービス。

このサービスは画像が綺麗で並ぶのですがそれをスクショをしてるだけです。しかもブラウザのサイズを変えることで横3つ並び、横4つ並びなど変えてスクショを撮ることも!

Salon.io is a web-based application made for photographers, …

 

またインスタは正方形で統一されてるのでインスタのスクショも背景として使いやすいです!

あるいはよく見るスクショ活用としてはPCの写真、スマホの写真の画面部分にスクショをのせて配置するイメージ画像。

これもスクショを使うことで簡単合成が可能に。資料作成にも使えると思います。

このツイートの画像もスクショを重ねてその上で加工しています。

Macではcmd +3で表示画面のスクリーンショット、cmd +4で選択範囲のスクリーンショットが可能です!

 

多数の写真を整列して配置することは意外と面倒ですが今回のようにスクショを使うことで誰でも簡単に作ることができます!

例えば下記の画像はデザイン研究所のインスタ投稿で使用している画像になります。

このようにスクショの上に半透明の図形など重ねれば可読性もデザイン性も高いビジュアルを作ることができます。

これは過去投稿149で紹介した「10年は使える背景テクニック」ですね。ぜひスクショ活用してみてください!

関連記事

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

 

スクリーンショット のショートカットキーは?▼
Macではcmd+3で表示画面のスクリーンショット 、cmd+4で選択範囲のスクリーンショット

 

スクリーンショット を上手に活用しよう!

1枚ずつ個別に並べる必要なく、たった1枚で作ることができます。

 

デザ研
とても便利!!

 

 

スクショをデザインに活用するなら拡張機能を使おう!

前章ではスクリーンショット のショートカットキーなどを紹介しました。

この章でのサンプルでは縦長サイトのスクリーンショットを背景に透過させています!

 

縦長サイトでは普通のスクリーンショット で撮影しても全ては収まりきりません。ではどうすればいいのか?

表示画面だけでなくWEBページ全体をスクショしたいときは、chromeの拡張機能であるFireShotを使っています!

ウェブページ全体をスクリーンショット撮影。PDF/JPEG/GIF/PNGでキャプチャ、編集、保存やアップロード、印刷、…

Fireshotでは縦長のサイトでもWEBページ全体のスクショを画像として保存することが可能です!

 

例えば練習で参考サイトをトレースするために画像にしたい時や、ポートフォリオで自分の作ったサイトを画像にする時などにも使えますね。

 

chromeの拡張機能を使ってページ全体をキャプチャしよう!

簡単な操作でできるFireshotはとてもおすすめです。もちろん無料です!

 

もっとスクショ背景のポイントを使ったデザインが見たい方!

この記事で解説したスクショ背景のデザインをもっと見たい方は、、、

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

 

デザ研
クリックするとスクショ背景を使ったデザイン”だけ”が表示されます!

SNS用の画像にも!スクショを使った背景デザイン!短時間で整った背景の作り方。まとめ

いかがでしたでしょうか?2つのデザインサンプルでスクリーンショット の活用を解説していきました。

まとめますと、、、

スクリーンショット は

  1. 表示画面をキャプチャしたいならcmd+3
  2. 選択範囲をキャプチャしたいならcmd+4
  3. ページ全体をキャプチャしたいならFireshot

になります!

 

こちらの記事では背景デザインについてまとめていますのでぜひ記事をご覧ください。

関連記事

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

・Macのスクショのショートカットキーを覚えよう!
・Fireshotでページ全体のキャプチャを撮ってみよう!

 

 

この投稿をInstagramで見る

 

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


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

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

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

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

CTR IMG