『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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

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で開くことができます。

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

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

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

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

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

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


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

ベクターイメージ(SVG)でダウンロード

SVGデータをIllustratorで開く

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

SVGデータをIllustratorで開く

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

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

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

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

Photoshopファイル側でスマートオブジェクトとしてペースト

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

デザインの練習

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

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

ファイルの管理(おまけ)

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

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

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

この記事が気に入ったら
いいね ! しよう

Pocket
LINEで送る

関連記事

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!