PhotoshopだけでSVGロゴを作る方法。イラレ代替サイト、変換も使いません。

ハウツー
コロのicon
コロ

フォトショップだけでSVGロゴの作成が可能だったので方法をまとめてみました。
変換もイラレ代用サイトも使いません。

フォトショップでロゴを作る

手順

1.
フォトショップでロゴを作る
2.
テキスト、イラストはシェイプに変換
3.
書き出し形式SVGで書き出す
これだけです。
手順を詳しくみていきます。

1. フォトショップでロゴを作る

テキストを入力
An image from Notion

2. テキストはシェイプに変換

レイヤーパネルのロゴの箇所を右クリック > シェイプに変換
An image from Notion

イラストがある場合のシェイプ作成方法

自動選択ツールで選択範囲を作成 → 選択範囲を右クリック> 作業パスを作成
An image from Notion
作業パスがアクティブな状態で、
レイヤー > 新規塗りつぶしレイヤー > ベタ塗り を選択し、新規レイヤーを作成するとシェイプが作成できます。
An image from Notion

3. 書き出し形式SVGで書き出す

レイヤーパネル > SVGをコピー or 書き出し形式
SVGをコピーでは、直接クリップボードにコピーすることが可能。
An image from Notion
SVGを選択して書き出し
An image from Notion

表示してみる

作業パスの具合でイラストがうまくライン取りできないことがありますが、その辺りは微調整お願いします。
An image from Notion
簡易的ですが、フォトショップだけでSVGロゴを作る方法でした!
ロゴタイプならフォトショップだけで十分ですが、ロゴマークなどをSVGで作る時はイラレがおすすめです。
Photoshop
Adobe
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい