BoxySVGでロゴ作りチュートリアル

ロゴ制作って、一筋縄じゃいかないけど、AdobeのAIなんて使わなくても、SVGエディタ使えばいいという話は過去のブログで何度も言ってきた。 【過去に書いたロゴ制作に関するブログ】 [Figma] SVGエディタとしてFigmaを使う価値ありと判断した話 ロゴ作りを仕事で受けることになりそうなのでビジネス的に構築方法などを思考してみた 中でもBoxySVGというソフトが、使いやすくて、最近では、Figmaなどではなく、BoxySVGでほぼ構築できるようになってきた。 今回は、BoxySVGを使ってロゴを作る時に、いろいろなテクニックがあるので、それをブログにまとめておきたいと思います。 ※BoxySVGは期間限定で無料で利用できますが、無料期間を過ぎても無料で使い続けることができる方法を記載しています。 無駄なコストをかけたくない人はこの記事を参考にしてみるといいでしょう。

ロゴ完成形

BoxySVG起動

BoxySVGは、アプリでも提供されていますが、WebアプリとしてブラウザでURLにアクセスするだけでも全く同じ使い方ができます。 ブラウザアクセス https://boxy-svg.com/app アプリダウンロード https://boxy-svg.softonic.jp/mac

基本ステージサイズの設定

最初に、ステージサイズを作るロゴサイズに合わせておきます。 今回は、横長のロゴを作るので、適当な比率でステージをセットしておきます。

注意点

この時に、ロゴのサイズが最終的にPNGにして64pxx64pxであっても、できれば、100の倍数単位でのステージ設定にしておきましょう。 このツールに限ったことではないと思いますが、パーツを細かく作っていく時に、なるべく小数値を使わないようにしたほうが、各種機能のバグを回避しやすくなります。 ※実際に、今回のチュートリアルでも、小さいサイズだと、うまく操作ができない場合があります。

ベースとなるSVGアイコンをダウンロードしてくる

ロゴの作り方で、セロから自分で全てパスを描いていって作ってもいいんですが、 フリーでダウンロードできるアイコンなどを使って、効率的にロゴを作るとスピードとクオリティが担保しやすいので、個人的によくこの方法でやっています。 ということで、フリーSVGダウンロードサイトなどで、見合ったアイコンをDLします。 今回は、SVG Repoというサイトにアクセスしてみました。 https://www.svgrepo.com/

注意点

フリー素材をダウンロードするサイトでは、ダウンロードした素材を変更する事を禁止する規約がある場合があるので、それぞれのサイトの規約を必ず重視してください。 今回DL舌素材は、次のようにCC(クリエイティブ・コモンズ)と書かれていたので、自由に改編できますね。

オブジェクトの配置

ダウンロードしたSVG素材を、画面にドロップ&ドラッグして、オブジェクトをステージに配置します。 画面左上の「変形」ツールをクリックして、適切なサイズに拡縮します。

楕円の作成

次に円形オブジェクトで、マウスドラッグして、次のように楕円形を作成します。 画面右上の「塗り」ツールで、「なし」を選択します。 さらに、「ストローク」ツールで、線の幅を適当なサイズに変更します。 今回は、土星の輪っかのようにしてみました。 さらに、「ジオメトリ」ツールの回転で値を変更して、傾けておきます。

衛生オブジェクトの追加

ワンポイントになる小さな丸を配置しておきます。 今回は手抜きで簡単なストロークだけにしておきますが、ここに別のアイコンを設置して、味を出してもいいかもしれません。

パス化のテクニック

サークルツールで作ったモノは、サークル・オブジェクトとして現在登録されています。 これを、今後扱いやすくするために、パス化しておきます。 対象のオブジェクトを選択して、上部メニューの「形状」から「形状をパスに変換」を選択すると、サークルツールのオブジェクトがパス化されます。 パス可するとどうなるかというと・・・ サークル・オブジェクトの場合は、以下のように、緑色のドットで座標１つで円のサイズで管理されています。 それをパス可すると、適切なポイントが設置されて、曲線でのつながりになるため、今回の場合は４つのポイントで構成されるようになりました。 この状態は、パスはストロークという線と、その線の太さの表示で成り立っていますが、これを形状のままパス可しておきます。 変換するオブジェクトを選択した状態で、同じく「形状」メニューから、「ストロークをパスに変換」を選択します。 この時に、冒頭説明した、画面サイズが小さいと、うまくパス可が行えず、何も無いパスに変換されたり、座標がズレてしまうことがあります。 座標ズレの場合は元座標に移動すればいいのですが、何も変換表示されない場合は、ステージサイズを変更してやり直すことをオススメします。 さらに、画面右の「レイヤー」ツールを見ると、パス可すると新しいオブジェクトが追加されるので、古いオブジェクトは、削除しておきましょう。 慣れるといきなりストロークをパス変換するのでも問題ないです。 今回は、挙動をみてもらいたくて手順を踏んでみました。

オブジェクトの切り抜き

すべてのオブジェクトがパス可されたら、次のは、それぞれ重なっている箇所を切り抜く処理を行います。 ダイヤモンドの前の位置に来る、楕円の前部分の箇所に次のように「スプライン」ツールで、くり抜き用オブジェクトを作成します。 わかりやすく見えるように、スプラインで作成したオブジェクトのストロークを消しておきます。 ２つのオブジェクトを選択します。 この時、くり抜かれるをするオブジェクト、くり抜くオブジェクトの順に選択をします。（逆にすると逆にくり抜かれてしまいます） 「形状」メニューから、「除外」を選択。 無事にくり抜かれました。 同じ手順で、他の前後関係のオブジェクトの切り抜き作業を行います。 無事に切り抜き完了

完成したらテキストデータで取り扱う

無事にロゴが完成したら、画面下の「要素」をクリックして、インスペクター（ソースコード）を表示して、一番上位階層のDOMを右クリックして「外側のSVGをコピー」を選択しておきます。 それをテキストエディタなどで、logo.svgとして保存すると、ロゴファイルの完成です。

あとがき

BoxySVGは、初めて触るとわかりにくいツールかもしれませんが、慣れるとサクサクと形状を作り込んでいくt高尾ができます。 まあ、どんなツールでも、そうなんですけどね。 自分の手取り足取り使えるようになって初めてクリエイティブが活かせるというモノですよね。 ちなみに、今回注意書きしたように、まだまだいろいろなところにバグや足りていない機能などもあるので、そのあたりは別の方法でカバーして使うという強い気持ちが必要かもしれません。