blog

top > 學展blog

2014.10.10 (Fri)

制作

写真や画像をベクターデータに変換!?オンラインサービス『PicSVG』のご紹介

pi1 写真や画像をベクターデータに変換!?オンラインサービス『PicSVG』のご紹介 學展ブログ

こんにちはよねちゃんです。

Illustratorで作業する上でJpeg、ベクターデータにしたいなんてときありませんか?
いちいちパスでトレースするのはなかなか面倒ですし時間もかかってしまいます。

そんなときにお使い頂きたいオンラインサービスがこちら”PicSVG”です!

PicSVGとは

pi1

写真はもちらんのことイラストや文字までさまざまな画像をSVGのベクター画像に変換してくれます。
対応している画像形式は一般的なJPEG, GIF, PNG。
(ファイルサイズは1MBまで)

使い方

使い方はとっても簡単!
まずはベクターデータにしたい画像を用意します。
予め切り抜きをしておくといいですよ!

Photoshopでの簡単な切り抜き方法はこちらの記事をご覧ください。
デザインを効率的に!Photoshopで写真を綺麗で簡単に切り抜く方法

では今回は上の記事でも使用したこの猫の画像を使用致します。

pi1-1

“Upload a picture”ボタンを押して画像を選択。

pi2

“Svg Color”から好きな色を選択して、

pi3

“Filters”からお好みのフィルターを選択します。

pi4

“Download image.svg”をクリックすると
画像だけが表示されたこのようなページにリンクされます。

pi5

保存方法

こちらから”.svg”形式のデータとして保存する方法をご説明致します。

まずは先ほどの画像のみが表示されているページのコードソースを表示させます。
Chromeの場合で説明するとツールバーから”表示”→”開発/管理”→”ソースを表示”をクリックします。

pi6

pi7

このようにコードソースが表示されたら
このコードの中の”<svg version=”1.0″…”から”</svg>”までをコピーしてください。

pi8

コピーができたらテキストエディターにペースト。

pi9

今回は”mi”を使っております。
(Macに付属した”テキストエディット”だとsvgが上手く書き出せないようです。)

ペーストできたら保存します。
このときファイル名の後ろにくる保存形式を”.svg”にしてください。

pi10

ファイル名を付け終えて保存をクリック。

無事.svg形式で保存することができました。

pi11

pi12

このようにIllustrator上でもちゃんと編集が可能なデータになっております。

おまけ

私、よねちゃんとさめちゃんさんの顔もPicSVGでベクターデータにしてみました!

pi112 (1)

ステンシルをするときなどにも使えそうですね!

〆(まとめ)

いかがでしたでしょうか?
制作を効率的にできるオンラインサービス”PicSVG”。
皆様もぜひ使ってみてくださいね!

學展の開催概要はこちらから >