ブラウザのSVGグラフィックの設計

Feb 2, 2026

操作方法

the vecteezy編集者あなたのブラウザで正しく実行される無料ベクトル編集スイートです。このチュートリアルでは、サイト上のベクトルを編集するために使用できる基本的な形状ツールと編集ツールをカバーしています。このようにして、バッジ、ボタン、ロゴ、または他のものが相対的な容易さで構築できます。

このエディタのGUIはAdobeソフトウェアと同様に感じますので、すでにPhotoshopやIllustratorを使用している場合は、ロープを学習できる時間が簡単です。しかし、完全な初心者でさえもこれに飛び込み、スクラッチから基本を拾うことができます。

Adobe Creative Cloudを入手してください

私たちはこれらのショッピングアイコンをVecteezyから使用するつもりです。

ただアイコンページをご覧ください。編集＆ampをクリックしてください。ダウンロードボタン。これにより、ブラウザでエディタが開き、これらのグラフィックをカスタマイズして構築できます。このチュートリアルでは、これらのアイコンの一部をNABする方法を説明し、それらを大きな進歩棒グラフィックに変換します - eコマースホームページのための完璧な選択。

それで、Vecteezyエディタで開くのはそれらのショッピングアイコンを使って、私たちは始めることができます！

01.アイコンを選ぶ

Click into the icon group and select one icon, then click Duplicate at the top — アイコングループをクリックしてアイコンを1つ選択してから、上部で複製をクリックします。

アイコングループをダブルクリックしてすべてのアイコンを選択します（2回ダブルクリックする必要があるかもしれません）。このチュートリアルのために3つの特定のアイコンを使います：買い物袋、クレジットカードとギフトボックス。

買い物袋を選択して、ページの最上部で複製をクリックします。これはあなたにアイコン全体を複製するべきです。これを上に向かって移動し、他の2つを複製します。

注意：ギフトボックスは完全にグループ化されていないので、重複して複製するとアイコンの一部を選択するだけです。これを修正するには、ギフトアイコン全体の上に選択ボックスをドラッグしてから、上部をクリックして編集＆gt;グループをクリックします。今、あなたは存在するアイコン全体をワンクリックで複製することができます。

3つのアイコンすべての重複があると、空のキャンバスの任意の場所をダブルクリックします。これにより、ページ上の他のオブジェクトを選択できるように、アイコンのグループの外側になります。古いアイコンをクリックすると、グループ全体を選択できます。これは完璧です、あなたはキャンバスからそれらをドラッグしたいので、彼らが見えないのでそれらをドラッグしたいので。

02.ゴミをクリアしてください

Change the background opacity if you want it to be white instead of transparent — 透明の代わりに白くなる場合は、背景の不透明度を変更してください。

重複した各アイコンをダブルクリックして、内部の個々の図形にアクセスします。メインアイコンのみが必要なので、カラフルな円の背景を選択して削除して、影を削除する必要があります。

これを行うには、単に非常に閉じて背景の円を選択します。その後、Deleteを押して消えます。

アイコン全体が消えている場合 - パニックにしないでください。上部の近くに元に戻すか、Ctrl / CMD + Zを押してもう一度やり直してください。ダブルクリックしてアイコングループ内に入る必要があるかもしれません。

最後に、使用する準備ができている3つのクリーンアイコンがあるはずです。透明な背景が好きではない場合は、左側のメニュー（3番目のボタンダウン）の背景パネルにアクセスして、純粋な白い背景のために不透明度を100％に増やすことができます。

03.テキストを追加する

Add text labels under each icon with the same font settings — 同じフォント設定で各アイコンの下にテキストラベルを追加する

このプログレスバーは非常に簡単になります。 eコマースショップの3段階を広告するだけです。

このプロセスを強調するために、各アイコンの下にラベルを追加しましょう。左側のツールバーで、テキストツール（2番目のボタン）を見つけ、[バッグ]アイコンの下をクリックしてテキストブロックを追加します。テキスト 'shop'を追加してキーボードに入力します。

これにより、テキストを自動選択して、移動して良い位置を見つけることができます。ただし、テキストツールをもう一度選択すると、フォントファミリ、色、サイズ、文字の間隔などの機能を変更できます。

私は-1.50文字の間隔で開いているSANS SEMI-BOLDサイズ30を使用しています。テキストの色は＃525252です。

このテキストを2回複製し、他のアイコンの下に重複を置きます。クレジットカードのアイコンの下に「Pay」というテキストを使用し、ギフトボックスの下に「受信」します。

テキストの上のアイコンを再配置するための選択ツールを使用する必要があります。また、可能であれば、各アイコンが等距離に近いスペース。

04.グラフィックの調整

Shift+click to select the ribbon shapes and change the background colour — Shift +クリックしてリボンの形を選択して背景色を変更します

プログレスバーを作成する前に、アイコン内で好きな色を変更できます。

これを行うには、ダブルクリックしてアイコングループを入力してから、変更したい形状を選択します。この場合、ギフトボックスのリボンを編集して色を青から緑に変えることができます。

アイコングループの内側にあると、一度に複数のアイテムを選択するときにShift Shiftを押します。水平方向と垂直方向の長方形を選びます、そして上部の弓形を選びます。

選択パネル（左側のメニューの最初のアイコン）で、塗りつぶし設定が見つかります。デフォルトの色が表示されます。＃2E3192です。その塗りつぶしメニューをクリックしてドロップダウンカラーホイールにアクセスします。ここでは、希望の色を見つけるためにドラッグしたり、直接16進コードを入力したりできます。

＃518531を入力してEnterキーを押してください。これは結果を保存し、一度に3つの形状すべてを更新する必要があります。あなたが変更したい他の色の設定で自由にプレイしてください！

05.進行状況バーの起動

Click the top-left circle in the Elements panel to add a new circle to the canvas — CANVASに新しい円を追加するには、要素パネルの左上円をクリックします。

プログレスバーを作成するには、サークルと長方形の2つの形状だけが必要です。ありがたいことに、これらの両方が「ツール」メニューの一番下にある要素パネルで利用できます。

[要素]パネルをクリックして、リスト内の最初の項目である円の形を選択します。それはあなたのワークスペースの中央に暗い灰色の円を自動的に配置します。

角の小さな白い四角ボックスを角または選択境界にドラッグすることで、円をサイズ変更できます。これはうまく機能しますが、直接サイズ変更機能としては正確ではありません。

そのため、代わりに選択ツールに戻り、新しい円が選択されていることを確認します。 [ツールの選択]パネルの最上位には、[高さと幅]値の選択サイズが表示されます。

両方のフィールドに100を入力して、最初の円を最初のアイコンの下にドラッグします。

サークルを複製します

Resize the circle and duplicate twice, then move them under each shopping icon — 円のサイズを変更して2回複製してから、各ショッピングアイコンの下に移動します。

サークルシェイプを選択した状態で、トップメニューで[複製]をクリックします。それでは、これを複製して元のサークルと密接に整列します。 1つの形のように見えるように、最初の円の上に正しく入ってみてください。

今、Shiftキーをクリックしてクリックすると、この重複する円を水平方向に直線的にドラッグできます。これにより、すべてのサークルをまっすぐな線で完全に合わせることができます（または1つの間に十分に近い）。

100 x 100で3つの異なる円形があるまでこれを行い、それぞれ3つのアイコンの下に置かれています。

07.コネクティングラインを追加します

Select the rectangle shape and arrange it behind the three circles — 長方形の形を選択し、3つの円の後ろに手配します

要素パネルに戻って正方形の形状を見つけます。クリックしてキャンバスに1つの正方形を追加します。

この形状で選択された選択ツールに戻り、幅/高さのサイズパネルを見つけます。この長方形は進行状況バーの幅全体に及ぶ必要があるので、本当に長い形を1つ必要です。そのため、すべてのサークルを一緒に接続する必要がある番号に、高さを10と幅に変更します。鉱山は幅750です。

今、この長方形の位置にある場合は、選択パネルの下部に見えます。フリップ。上部行の2番目のアイコンをクリックすると、選択した形状を他の形状の後ろに移動できます。

注：3つの円すべての円の後ろに長方形を取得するには、下のボタンを数回クリックする必要があります。しかし今、接続の四角形は円形の間にのみ見えますので、後でサークルにテキストを追加できます。

08.再カーリング

Recolour all the shapes and include a small stroke on the three circles — すべての形を再現し、3つの円に小さなストロークが含まれています

現在の進行状況バーは少し暗いように見えますので、色を少し変更しましょう。

長い四角形をクリックして選択し、[ツール]パネルの[入力設定]を検索します。カラーを＃C5C5C5に変更してEnterキーを押します。

それでは、四角形の選択解除を選択するために、キャンバスの任意の場所をクリックしてください。円色の色を変えたいと思っています、そして境界の色として暗い灰色を使って軽量であるべきです。

Shiftキーを押しながら、3つの円のそれぞれをクリックしてください。塗りつぶしの色を＃F5F5F5に調整し、Enterキーを押してからXアイコンをクリックして塗りつぶしカラーセレクトパネルを閉じます。以下では、ストローク設定があります。ストロークの塗りつぶしを＃C5C5C5に変更してEnterキーを押します。

Xアイコンをクリックしてこのカラー選択パネルを閉じてから、ストロークサイズを6に変更します。この段階では、選択ボックスをドラッグして編集して編集することで、すべての円と長方形をグループ化することをお勧めします。グループ。さて、あなたは簡単にすべての形の位置を一度に調整することができます。

09.進行状況を追加する

Add a text label into the first circle and duplicate the text for all three shapes — テキストラベルを最初の円に追加し、3つの形式のすべてのテキストを複製します。

プログレスバーの設計を確定するには、各円に数回の数字を追加しましょう。

テキストツールをクリックして最初の円に番号1を入力します。カラー＃C5C5C5を罫線に合わせて、Open Sansが太字で、サイズ45を使用しています。このテキストをドラッグして、円の中央に配置されています。

テキスト要素を複製して、テキスト '2'で2番目の円に移動します。テキスト '3'を持つ3番目の円について同じことをします。

最初のステップを強調表示します

Recolour the first circle blue so it appears like the active progress step — 最初のサークルブルーを再カローにして、アクティブな進行状況ステップのように見えます

仕上げタッチとして、軽い青い輪郭を使用して最初のステップを強調しましょう。最初に作成したばかりの番号 '1'を選択し、塗りを＃4976a3に変更します。次にクリックしてテキストの後ろの円を選択します。ストローク設定を見つけて、ストロークの色を＃4976A3に変更します。これにより、円の周りに濃い青い境界線を追加する必要があります。 Circleがまだ選択されている状態で、[設定の塗り]をクリックして、カラーを＃E2EBFAに変更します。

以上です！これでこれを右上隅にあるダウンロード機能を使用してPNG / JPGとしてエクスポートできます。白い背景を隠すには、これを透過的なPNGとしてエクスポートし、背景パネル（左側のメニューの3番目のボタン）を使用して全体の文書サイズを変更することもできます。

または将来の変更のためにこれを保存したい場合は、ファイル＆gt;後で保存してください。あなたは無料のVecteezyアカウントを作成する必要がありますが、あなたのハードワークを将来の参照のために保存し続けるのは素晴らしい方法です。

この記事は最初に登場しました ネットマガジン 問題295.それを購入します ここに 。

続きを読む：

レスポンシブSVGSのための10ゴールデンルール
SVG 2のエキサイティングな新機能を探索する
GSAPでスーパーチャージするSVGアニメーション

ブラウザのSVGグラフィックの設計

01.アイコンを選ぶ

02.ゴミをクリアしてください

03.テキストを追加する

04.グラフィックの調整

05.進行状況バーの起動

サークルを複製します

07.コネクティングラインを追加します

08.再カーリング

09.進行状況を追加する

最初のステップを強調表示します

操作方法 - 最も人気のある記事

犬を描く方法

8素晴らしい新しいグラフィックデザインチュートリアル

オイルペイントで輝く目を作る方法

EMベースサイジングを用いた応答部位を設計する

HTMLビデオを操作する方法

Adobe XDを使ってモバイルアプリをプロトタイプする方法

あなたの手描きイラスト技術を洗練するための上のヒント

Unreal Engine 4でゲーム環境を作成する

カテゴリ