Inkscape ロゴを作ってサイトで使う方法

サイトに使うロゴマークを作ります。

 

コードを書かないノーコード、bubbleバブルで制作中の「塊根植物、グラキリスを紹介するサイト(仮定)」に使うグラキリスのロゴマークを作りますがもちろん色々なサイトに応用できます◎

 

写真を下に敷いて上からトレースするので簡単です◎

 

写真を取り込む

Inkscapeを立ち上げる>ファイル>インポート でデスクトップに用意した写真を取り込みます。

 

選択して>Open

 

「画像のインポート形式」今回は埋め込み、リンクどちらでも構いません◎

INKSCAPE 9時限:画像の埋め込み?リンク?

 

controlを押しながらだと比率を保ったまま拡大縮小出来ます。

 

トレースする時に下の写真をテープで止める様に画像を右クリック>オブジェクトのプロパティ>で右に出たロックにチェックを入れます。こうするとこの画像は動かないので作業が楽です。

 

準備が出来ました。

 

 

写真をトレースする

円ツールcontrolを押しながら正円を作ります。(前回使った時の影響で白と黄色の円が出来ました)フィル/ストロークを画面右に出します。

左下にフィル/ストロークの表示が無い場合は上のメニューの オブジェクト>フィル/ストローク で出します。 

 

フィルは中身でストロークは外側の線です。まずはアウトラインをトレースしたいのでフィルの「塗りなし」をクリックしてストロークのみ見やすい色にしてドーナツの様にします。

 

ストロークが太過ぎてやりにくいので「ストロークのスタイル」タブを押して幅を細くします。

 

ペンツールで枝部分を描きます。所々クリックして最後は最初の点が赤くなれば閉じれます

この時点で形が完璧でなくても大丈夫です

 

ノードツールで所々クリックして作った四角をクリックすると先に丸のついた棒が表示されます。これを動かして形を整えます。

 

ペンツール、ノードツールの詳しい使い方はこちらをご覧ください

INKSCAPEで写真をトレースして簡単に描く

 

本体の丸(1)と枝3本(234)のアウトラインが描けました。デザイン的に4以外の123を統合したいのでこの3つをshiftを押しながらクリックして選択し、

 

(分かり易く123を水色にしました)上のメニューのパス>統合

 

余計なラインが無くなって3つが1つのアウトラインになりました。

 

そろそろ本番の色を付けます。上でやったように「フィル/ストローク」で設定してもいいですし、画面下にずらっと並んだ色見本から付ける事も出来ます。左下のフィル、ストロークが現在の色状態です。

フィルが付いていないからNoneになっているね

フィルに色を付けるのは色見本の中からクリックすればOKです。ストロークの場合はshiftを押しながらクリックします。

 

フィルをクリーム色、ストロークをグレーにしてロゴマークっぽくストロークを太くします。

 

残っていた4番の枝も同じ色の設定にしました。4番は一番最後に作ったので上に出てしまっています。最新の物ほど(レイヤーが同じだった場合)上に来ますので4番以外のイラストを選択>最前面に移動 で4を後ろにやります。

 

スッキリしました。

 

で、4の枝を先ほどのように統合してしまうとどうなるかと言うと、、やっぱり統合しないほうが形が適度にはっきりしてグラキリスっぽいので今回は統合しません。

 

今まで作ったパーツをバラバラにならないようにオブジェクト>グループ化しておきます。

 

1つにまとまりました。

 

葉っぱもペンツールで描きます。

フィルに色がない状態から色を付けるには「塗りなし」の横の四角をクリックすると、

 

色が付けられます。葉っぱのアウトライン(ストローク)にも枝などと同じグレーを設定したい時は色々な方法がありますがshiftを押しながらスポイトツールで色を拾うのが簡単です◎ shiftを押さないとフィルの色が拾えます。

 

描いた物を回転させたい時は選択した状態でもう一度クリックします。すると矢印の形が(なんだか回転できそうに)変わります。そうしたら矢印を動かして丁度いい位置にします。

 

葉っぱも描き終わって全てを1つのグループにしました。後ろに敷いていた画像を削除するため、オブジェクト>すべてのロックを解除 して写真をDeleteで捨てます。

 

 

ファイルのサイズ、大きさを変更する

(ロゴを斜めに傾けました)ファイルサイズの横が長いので短くします。ファイル>ドキュメントのプロパティ

 

ドキュメントのプロパティと言う窓が出ますので

 

好みのサイズにします。A4、A5など規定のサイズにも出来ますし今回は幅を小さくしました。

 

 

サイトで使えるように保存する

最後にbubbleバブルで制作中のサイト(仮定)で使えるように保存します。ファイル>名前をつけて保存

 

名前を付けて保存形式、保存先などを選びます。保存形式はsvg(SVG)にしました。

サイトのロゴには拡大縮小しても綺麗に表示されるsvgがお勧めです◎

 

サイトのロゴを綺麗に表示

サイトの顔となるロゴの保存形式

 

デスクトップDesktopを保存場所に指定したのでこんな感じで保存されました。「logo2.svg」です。

 

 

実際のサイトに使ってみる

bubbleバブルで制作中のサイト(仮定)にアップします。bubbleはコードが書けなくてもサイトやアプリが作れます。フリープランも有ります◎

ノーコード bubble 解説_新規登録、削除、save point

 

いつくか制作中の中から「グラキリスのサイト」編集ボタンを押して

 

トップ画面の左上の位置に先ほど保存したlogo2.svgをアップロードします。

 

入りました。これは編集画面なので実際の表示を見てみます。

 

PCで見た所。

 

スマホで見た所。良さそうです◎

 

 

svgで保存するメリット

svgで保存した画像は拡大縮小に強いので117×142pxサイズの「logo.svg」を左上に小さく表示しても下に大きく表示してもどちらも綺麗に見えます。

 

 

「元データ」として残す

せっかく作った色々な素材が枠の外に残っています。今後使う(かもしれない)場合は「元データ」として残しておいて、サイトにアップする用には枠の外を削除した物を別名で保存するのがいいと思います◎

 

右「logo3.svg」は枠外にイラストを残した「元データ」でファイルサイズは21KBです。左「logo2.svg」は枠外のイラストは削除してサイト用に保存、当然ファイルサイズは10KBと軽くなっています。今回は「logo2.svg」をサイトに使用しました。