PixabayのSVG形式の素材をPhotoshopに配置する方法

こんにちは。Webデザイナーのフクモトです。

Pixabayで見つけた素敵な円の装飾素材。
ベクターデータでダウンロードしたら、ファイル形式がSVGになっていて、どうやってデザインに取り込めばよいか？と困っている人に。

今回は、PixabayからSVG形式でダウンロードした素材をPhotoshopに配置する手順を紹介します。

Pixabayとは

Pixabayは商用利用が可能なフリー素材サイトです。
https://pixabay.com/ja/

SVG （ Scalable Vector Graphics ）

Scalable Vector Graphicsは、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。ーウィキペディアー

SVG形式のデータを直接、Photoshopで開くことはできますが、ラスタライズ（ピクセルで構成されたビットマップデータへ変換）された状態で開くので、使い勝手がよくありません。

自由に拡大縮小してレイアウトできるベクターデータとして扱うには、SVG形式のデータを一旦、Illustratorで開き、Photoshopに配置していく手順になります。

SVG形式はパスで構成されたベクターデータなのでIllustratorで開くことができます。

contents

ダウンロードからPhotoshop配置までの手順

以下、詳細を説明していきます。

Pixabayで目的の素材ページを開きます。

ベクターイメージ（SVG）を選択してダウンロード。
ベクター形式の場合、ログインを求められます。
Googleアカウントなどを使うと簡単です。

ダウンロードしたSVGデータをIllustratorで開きます。
3.5MBあるので少し重く、時間がかかります。

Photoshopファイル側でスマートオブジェクトとしてペーストして出来上がりです。

ベクターデータなので自由に拡大縮小してレイアウトできます。

デザインの練習です。
偉人の名言を題材にしてレイアウトしてみました。

重心の取り方が難しいですね。

このSVG形式のファイルはファイル容量が3.5MBもあるので、開く際にいちいち時間がかかります。
オブジェクトを半分に分けて、ai形式で保存しておくと管理が楽です。

このようにベクターデータとしてストックしておくと、印刷物にもWeb素材にも活躍します。

以上、SVG形式の素材をPhotoshopに配置する方法でした！

Webもデザインも未経験からフリーランス歴15年 。『仕事は自分で創りだす』をモットーに生きてきた50代。2013年⇒Webクリエイターズスクール設立。

Webデザインスクール卒業後、仕事に繋げられない迷子さん、独学、在宅、フリーランス、SNSに頼らず仕事を得たい人を対象に「学んだ事を安定的な収入にする方法」や仕事獲得につながる営業方法をお伝えしてサポートしています。