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

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

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

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

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

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

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

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

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

Pixabayで素材検索・ダウンロード

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

→ 今回使用した円の装飾オブジェクト配布ページ

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

SVGデータをIllustratorで開く

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

目的の円オブジェクトをコピーする

1. オブジェクト全体がグループ化されていますので、クリックで全て選択 ＞ 右クリック ＞ グループ解除します。
2. 好きな円オブジェクトを選択 ＞ コピーします。

Photoshopファイルにペーストする

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

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

デザインの練習

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

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

ファイルの管理（おまけ）

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

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

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