Design Graphics SVG dans votre navigateur

Sep 12, 2025

Comment

[dix] [dix] [dix]

[dix]

Le Rédacteur en chef est une suite d'édition de vecteur libre qui fonctionne directement dans votre navigateur. Ce didacticiel couvre les outils de base de la forme et les outils d'édition que vous pouvez utiliser pour modifier tous les vecteurs sur le site. De cette façon, vous pouvez construire des badges, des boutons, des logos ou de tout autre chose avec une relative facilité.

[dix]

L'interface graphique de cet éditeur se sent similaire à Adobe Software. Si vous utilisez déjà Photoshop ou Illustrator, vous aurez plus de facilité à apprendre les cordes. Mais même les débutants complets peuvent plonger dans ceci et ramasser les bases à partir de zéro.

Obtenez Adobe Creative Cloud

Nous allons utiliser ces icônes de shopping de Vecteury.

Il suffit de visiter la page Icônes et de cliquer sur le 'Edit & Amp; Téléchargez le bouton '. Cela ouvre l'éditeur directement dans votre navigateur afin que vous puissiez personnaliser et construire sur ces graphiques. Pour ce didacticiel, nous vous montrerons comment trouver certaines de ces icônes et les convertir dans un graphique de barres de progression plus vaste - le choix idéal pour n'importe quelle page d'accueil de la ecommerce.

Donc, avec ces icônes shopping ouvertes dans l'éditeur de Vectezezy, nous pouvons commencer!

[dix]

01. Choisissez les icônes

Click into the icon group and select one icon, then click Duplicate at the top — Cliquez sur le groupe d'icônes et sélectionnez une icône, puis cliquez sur Dupliquer en haut.

Double-cliquez sur le groupe d'icônes pour sélectionner toutes les icônes (vous devrez peut-être double-cliquer deux fois). Je vais utiliser trois icônes spécifiques pour ce tutoriel: les sacs à provisions, la carte de crédit et la boîte-cadeau.

Sélectionnez le sac d'achat et cliquez sur Dupliquer en haut de la page. Cela devrait vous donner un duplicata de l'icône entière. Déplacez-le vers le haut et en double sur les deux autres.

Remarque: la boîte-cadeau n'est pas entièrement regroupée. Donc, lorsque vous cliquez dessus, vous sélectionnerez uniquement une pièce de l'icône. Pour résoudre ce problème, faites glisser une zone de sélection via toute l'icône de cadeau, puis au sommet Cliquez sur Edition - & GT; Groupe. Maintenant, vous pouvez dupliquer toute l'icône actuelle en un clic.

Une fois que vous avez des duplicats des trois icônes, double-cliquez sur n'importe où sur la toile vide. Cela vous amène en dehors du groupe d'icônes afin que vous puissiez sélectionner d'autres objets sur la page. Si vous cliquez sur l'une des icônes plus anciennes, vous sélectionnerez tout le groupe. C'est parfait, car vous voudrez les traîner sur la toile afin qu'ils soient hors de vue.

02. Effacer les ordures

Change the background opacity if you want it to be white instead of transparent — Changer l'opacité d'arrière-plan si vous voulez qu'il soit blanc au lieu de transparent

Double-cliquez sur chaque icône dupliquée pour accéder aux formes individuelles à l'intérieur. Nous n'avons besoin que de l'icône principale, vous devez donc sélectionner et supprimer les arrière-plans de cercle colorés et déposer des ombres.

Pour ce faire, zoomez simplement très proche et sélectionnez le cercle de fond. Appuyez ensuite sur Supprimer et il devrait disparaître.

Si toute l'icône disparaît - ne paniquez pas. Cliquez simplement sur Annuler vers le haut ou appuyez sur CTRL / CMD + Z et réessayez. Vous devrez peut-être double-cliquer pour entrer dans le groupe Icon.

À la fin, vous devriez avoir trois icônes propres prêtes à être utilisées. Si vous n'aimez pas l'arrière-plan transparent, vous pouvez toujours accéder au panneau d'arrière-plan dans le menu de gauche (troisième bouton) et augmenter l'opacité à 100% pour un fond blanc pur.

03. Ajouter du texte

Add text labels under each icon with the same font settings — Ajouter des étiquettes de texte sous chaque icône avec les mêmes paramètres de police

Cette barre de progression sera incroyablement simple; Il suffit de faire de la publicité trois étapes d'un magasin de commerce électronique.

Pour souligner ce processus, ajoutons des étiquettes sous chaque icône. Dans la barre d'outils à gauche, trouvez l'outil de texte (deuxième bouton), puis cliquez sur sous l'icône du sac pour ajouter un bloc de texte. Ajoutez le texte 'Shop' et appuyez sur Entrée sur votre clavier.

Cette auto-sélectionne le texte afin que vous puissiez le déplacer et trouver une bonne position. Mais si vous sélectionnez à nouveau l'outil de texte, vous pouvez modifier la famille de polices, la couleur, la taille, l'espacement des lettres et d'autres fonctionnalités.

J'utilise une taille Semi-Bold Open Sans 30 avec un espacement de -1,50 lettres. La couleur du texte est # 525252.

Dupliquer ce texte deux fois et placez les duplicats sous les autres icônes. Utilisez le texte 'Payer' sous l'icône de carte de crédit et "Recevoir" sous la case-cadeau.

Vous devez utiliser l'outil Sélectionner pour repositionner les icônes au-dessus du texte. En outre, l'espace chaque icône proche de l'équidistant à part si possible.

04. Réglage des graphiques

Shift+click to select the ribbon shapes and change the background colour — Maj + Cliquez pour sélectionner les formes de ruban et modifier la couleur d'arrière-plan.

Avant de créer la barre de progression, vous pouvez modifier toutes les couleurs que vous aimez dans les icônes.

Pour ce faire, double-cliquez pour entrer n'importe quel groupe d'icônes, puis sélectionnez la forme que vous souhaitez modifier. Dans ce cas, je modifierai le ruban de boîte-cadeau pour changer la couleur du bleu au vert.

Une fois que vous êtes à l'intérieur du groupe d'icônes, maintenez SHIFT enfoncé tout en cliquant sur pour sélectionner plusieurs éléments à la fois. Je sélectionnerai les rectangles horizontaux et verticaux, plus la forme de l'arc en haut.

Dans le panneau Sélectionner (première icône dans le menu de gauche), recherchez les paramètres de remplissage. Vous verrez la couleur par défaut est # 2E3192. Cliquez dessus pour accéder à une roue de couleur déroulante. Ici, vous pouvez soit faire glisser pour trouver la couleur que vous souhaitez, soit entrer directement un code hexagone.

Entrez # 518531 et appuyez sur Entrée. Cela devrait sauvegarder le résultat et mettre à jour les trois formes à la fois. N'hésitez pas à jouer avec tout autre paramètre de couleur que vous souhaitez changer!

05. Démarrer la barre de progression

Click the top-left circle in the Elements panel to add a new circle to the canvas — Cliquez sur le cercle supérieur gauche du panneau Éléments pour ajouter un nouveau cercle à la toile.

[dix]

Pour créer une barre de progression, vous n'avez besoin que de deux formes: cercles et rectangles. Heureusement, ces deux sont disponibles dans le panneau Éléments situés au bas du menu Outils.

Cliquez sur le panneau des éléments et sélectionnez la forme du cercle, qui est le tout premier élément de la liste. Il placera automatiquement un cercle gris foncé au centre de votre espace de travail.

Vous pouvez redimensionner le cercle en faisant glisser les petites boîtes carrées blanches dans le coin ou la limite de sélection. Cela fonctionne bien, mais ce n'est pas aussi précis que la fonction de redimensionnement directe.

Alors, revenez plutôt à l'outil Sélectionner et assurez-vous que votre nouveau cercle est sélectionné. Au début du panneau Sélectionner un outil, vous devez voir une taille de sélection avec une valeur de hauteur et de largeur.

Entrez 100 dans les deux champs et faites glisser votre premier cercle sous la première icône.

06. Cercles de duplication

Resize the circle and duplicate twice, then move them under each shopping icon — Redimensionnez le cercle et dupliquer deux fois, puis déplacez-les sous chaque icône de shopping.

Avec votre forme de cercle sélectionnée, cliquez sur Dupliquer dans le menu supérieur. Maintenant, repositionnez cette duplication de sorte qu'il aligne étroitement avec votre cercle d'origine. Essayez de le faire droit sur le premier cercle afin qu'ils ressemblent à une forme.

Maintenant, si vous tenez Maj enfoncée et cliquez sur, vous pouvez faire glisser ce cercle en double dans une ligne droite horizontalement. Cela vous permet d'aligner parfaitement tous vos cercles dans une ligne droite (ou assez proche d'un).

Faites ceci jusqu'à ce que vous ayez trois formes de cercle différents à 100 x 100, chacune placée sous les trois icônes.

07. Ajouter des lignes de connexion

Select the rectangle shape and arrange it behind the three circles — Sélectionnez la forme rectangle et arrangez-le derrière les trois cercles

Retournez sur le panneau Éléments et trouvez la forme carrée. Cliquez pour ajouter un carré sur la toile.

Avec cette forme sélectionnée, revenez à l'outil Sélectionner et trouvez le panneau de taille de largeur / hauteur. Étant donné que ce rectangle devrait couvrir toute la largeur de la barre de progression, nous avons juste besoin d'une forme vraiment longue. Ainsi, changez la hauteur à 10 et la largeur du nombre quelconque dont vous avez besoin pour connecter tous vos cercles ensemble. Le mien est de 750 largeur.

Maintenant, avec ce rectangle en position, regardez vers le bas du panneau SELECT où il indique Arrangement & amp; Flip. Cliquez sur la deuxième icône de la rangée supérieure, ce qui vous permet de déplacer toute forme sélectionnée derrière les autres formes.

Remarque: vous devrez peut-être cliquer sur le bouton inférieur à quelques reprises pour obtenir le rectangle derrière les trois cercles. Mais maintenant, le rectangle de connexion n'est visible que entre les formes de cercle afin que nous puissions ajouter du texte dans les cercles plus tard.

08. Récolation

Recolour all the shapes and include a small stroke on the three circles — Recolorer toutes les formes et inclure une petite course sur les trois cercles

La barre de progression actuelle a l'air un peu sombre, alors modifions un peu la couleur.

Cliquez pour sélectionner le rectangle long et rechercher les paramètres de remplissage dans le panneau Outils. Changez la couleur en # C5C5C5 et appuyez sur Entrée.

Maintenant, cliquez sur n'importe où sur toile pour désélectionner le rectangle. Nous voulons également changer les couleurs du cercle et elles devraient être plus claires, en utilisant le gris plus foncé comme une couleur de bordure.

Hold Shift, puis cliquez sur chacun des trois cercles. Ajustez la couleur de remplissage sur # F5F5F5, appuyez sur Entrée, puis cliquez sur l'icône X pour fermer le panneau de sélection de couleur de remplissage. Ci-dessous, vous trouverez des paramètres de trait. Changez la course de course à # C5C5C5 et appuyez sur Entrée.

Cliquez sur l'icône X pour fermer ce panneau de sélection des couleurs, puis modifier la taille de la course à 6. À ce stade, je vous recommande également de regrouper tous les cercles et le rectangle ensemble en faisant glisser une boîte de sélection et en allant d'édition & gt; groupe. Maintenant, vous pouvez ajuster la position de toutes les formes à la fois facilement.

09. Ajout d'étapes de progrès

Add a text label into the first circle and duplicate the text for all three shapes — Ajoutez une étiquette de texte dans le premier cercle et dupliquez du texte pour les trois formes.

Ajoutons quelques chiffres dans chaque cercle pour finaliser la conception de la barre de progression.

Cliquez sur l'outil Texte et entrez le numéro 1 dans le premier cercle. J'utilise Open Sans Extra-Bold, taille 45 avec la couleur # C5C5C5 pour correspondre aux frontières. Faites glisser ce texte afin qu'il soit positionné au centre du cercle.

Dupliquez l'élément de texte et déplacez-le dans le deuxième cercle avec le texte '2'. Faites la même chose pour le troisième cercle avec du texte '3'.

10. Mettez en surbrillance la première étape

Recolour the first circle blue so it appears like the active progress step — Recolourez le premier cercle bleu de sorte qu'il apparaît comme l'étape de progression active

En tant que touche de finition, mettons en évidence la toute première étape en utilisant un contour bleu plus léger. Sélectionnez d'abord le numéro '1' que vous venez de créer et modifiez le remplissage en # 4976A3. Cliquez ensuite sur pour sélectionner le cercle derrière le texte. Trouvez les paramètres de course et changez la couleur de la course sur # 4976A3. Cela devrait ajouter une bordure bleu foncé autour du cercle. Avec le cercle toujours sélectionné, cliquez sur les paramètres de remplissage et changez la couleur sur # E2EBFA.

Et c'est tout! Vous pouvez maintenant exporter ceci en tant que PNG / JPG à l'aide de la fonctionnalité de téléchargement dans le coin supérieur droit. Vous pouvez également masquer le fond blanc pour exporter ceci comme PNG transparent et modifier la taille du document global à l'aide du panneau d'arrière-plan (troisième bouton dans le menu gauche).

Ou si vous souhaitez enregistrer ceci pour les modifications futures, allez simplement à File & GT; Enregistrer pour plus tard. Vous devrez créer un compte Vecteury gratuit, mais c'est un excellent moyen de garder votre dur labeur économisé pour une référence future.

Cet article est apparu à l'origine dans magazine net numéro 295. Achetez-le ici .

Lire la suite:

10 règles d'or pour les SVG réactifs
Explorez les nouvelles fonctionnalités passionnantes dans SVG 2
Supercharger des animations SVG avec GSAP

[dix] [dix]

[dix]

Design Graphics SVG dans votre navigateur

01. Choisissez les icônes

02. Effacer les ordures

03. Ajouter du texte

04. Réglage des graphiques

05. Démarrer la barre de progression

06. Cercles de duplication

07. Ajouter des lignes de connexion

08. Récolation

09. Ajout d'étapes de progrès

10. Mettez en surbrillance la première étape

Comment - Most Popular Articles

Comment modéliser l'art concept au cinéma 4D

Créer et animer des polygones SVG

Comment créer des glaçures avec aquarelle

Créer un mouvement dynamique dans une composition

Créer de superbes textures turiles dans le mélangeur

Faire une double exposition dans Photoshop

Les secrets de la réalisation d'un mémoire de conception créatif

Comment maîtriser l'ombrage de la peau en 3D

Catégories