Diseñe gráficos SVG en su navegador

Sep 13, 2025

Cómo

[dieciséis]

los Editor de Vecteezy es una suite de edición de vectores gratis que corre directamente en su navegador. Este tutorial cubre las herramientas de formas básicas y las herramientas de edición que puede usar para editar cualquier vectores en el sitio. De esta manera, puede construir insignias, botones, logotipos o cualquier otra cosa con relativa facilidad.

La GUI para este editor se siente similar al software Adobe, por lo que si ya usa Photoshop o Illustrator, tendrá un tiempo más fácil de aprender las cuerdas. Pero incluso los principiantes completos pueden sumergirse en esto y recoger los conceptos básicos desde cero.

Obtener Adobe Creative Cloud

Vamos a utilizar estos iconos de compras de Vecteezy.

Simplemente visite la página de los iconos y haga clic en 'Editar y amplificador; Descargar 'botón. Esto abre el editor en su navegador para que pueda personalizar y construir sobre estos gráficos. Para este tutorial, le mostraremos cómo nabear algunos de estos iconos y convertirlos en un gráfico de barra de progreso más grande: la opción perfecta para cualquier página de inicio de comercio electrónico.

¡Así que con esos iconos de compras se abren en el editor de Vecteezy, podemos comenzar!

01. Elige los iconos

Click into the icon group and select one icon, then click Duplicate at the top

Haga doble clic en el grupo de iconos para seleccionar todos los iconos (es posible que deba hacer doble clic dos veces). Usaré tres iconos específicos para este tutorial: las bolsas de compras, la tarjeta de crédito y la caja de regalo.

Seleccione la bolsa de compras y haga clic en Duplicar en la parte superior de la página. Esto debería darle un duplicado de todo el icono. Mueve esto hacia arriba y duplique los otros dos.

Nota: La caja de regalo no se agrupa completamente, por lo que cuando hace clic para duplicar, solo seleccionará un pedazo del icono. Para solucionar esto, simplemente arrastre un cuadro de selección durante todo el icono de regalo, luego en la parte superior, haga clic en Editar- & gt; grupo. Ahora, puede duplicar todo el icono actual con un solo clic.

Una vez que tenga duplicados de los tres iconos, haga doble clic en cualquier lugar del lienzo vacío. Esto le brinda fuera del grupo de iconos para que pueda seleccionar otros objetos en la página. Si hace clic en cualquiera de los iconos más antiguos, seleccionará todo el grupo. Esto es perfecto, porque querrás arrastrarlos hacia abajo del lienzo para que estén fuera de la vista.

02. Borrar la basura

Change the background opacity if you want it to be white instead of transparent

Haga doble clic en cada icono duplicado para acceder a las formas individuales en el interior. Solo necesitamos el icono principal, por lo que debe seleccionar y eliminar los coloridos fondos del círculo y la caída de las sombras.

Para hacer esto, simplemente zoom en muy cerca y seleccione el círculo de fondo. Luego presione Eliminar, y debe desaparecer.

Si todo el icono desaparece, no se asuste. Simplemente haga clic en Deshacer cerca de la parte superior o presione CTRL / CMD + Z y vuelva a intentarlo. Es posible que deba hacer doble clic para ingresar al grupo de iconos.

Al final, debe tener tres iconos limpios listos para usar. Si no le gusta el fondo transparente, siempre puede acceder al panel de fondo en el menú de la mano izquierda (tercer botón hacia abajo) y aumentar la opacidad al 100 por ciento para un fondo blanco puro.

03. Añadiendo texto

Add text labels under each icon with the same font settings

Esta barra de progreso será increíblemente simple; Sólo publicidad de tres etapas de una tienda de comercio electrónico.

Para enfatizar este proceso, agreguemos etiquetas debajo de cada icono. En la barra de herramientas de la izquierda, busque la herramienta de texto (segundo botón) y luego haga clic debajo del icono de la bolsa para agregar un bloque de texto. Agregue el texto 'Tienda' y presione ENTER en su teclado.

Este auto-selecciona el texto para que pueda moverlo y encontrar una buena posición. Pero si selecciona la herramienta de texto nuevamente, puede cambiar la familia de fuentes, el color, el tamaño, el espacio de las letras y otras funciones.

Estoy usando abiertos SANS SEMI-BOLD TAMEY 30 con un espaciado de letras a -1.50. El color del texto es # 525252.

Duplica este texto dos veces y coloca los duplicados debajo de los otros iconos. Use el texto 'PAGO' bajo el icono de la tarjeta de crédito y 'Recibir' debajo de la caja de regalo.

Debe usar la herramienta Seleccionar para reposicionar los iconos sobre el texto. Además, espacio cada icono cerca de Equidistant Sart si es posible.

04. Ajuste de gráficos

Shift+click to select the ribbon shapes and change the background colour

Antes de crear la barra de progreso, puede alterar los colores que desee en los iconos.

Para hacer esto, haga doble clic para ingresar a cualquier grupo de iconos, luego seleccione cualquier forma que desee cambiar. En este caso, editaré la cinta de la caja de regalo para cambiar el color de azul a verde.

Una vez que esté dentro del grupo de iconos, mantenga presionado MAYÚS mientras hace clic para seleccionar más de un elemento a la vez. Seleccionaré los rectángulos horizontales y verticales, más la forma del arco en la parte superior.

En el panel Seleccionar (primer icono en el menú de la izquierda), busque la configuración de llenado. Verá el color predeterminado es # 2E3192. Haga clic en ese menú de relleno para acceder a una rueda de color desplegable. Aquí, puede arrastrar para encontrar el color que desea, o ingrese un código hexagonal directamente.

Ingrese # 518531 y presione ENTER. Esto debería guardar el resultado y actualizar las tres formas a la vez. ¡Siéntase libre de jugar con cualquier otra configuración de color que desee cambiar!

05. A partir de la barra de progreso.

Click the top-left circle in the Elements panel to add a new circle to the canvas

Para crear una barra de progreso, solo necesita dos formas: círculos y rectángulos. Afortunadamente, ambos están disponibles en el panel de elementos ubicado en la parte inferior del menú Herramientas.

Haga clic en el panel de elementos y seleccione la forma del círculo, que es el primer elemento en la lista. Coloque automáticamente un círculo gris oscuro en el centro de su espacio de trabajo.

Puede cambiar el tamaño del círculo arrastrando las pequeñas cajas cuadradas blancas en la esquina o el límite selecto. Esto funciona bien, pero no es tan preciso como la función de cambio de tamaño directo.

Por lo tanto, vuelva a la herramienta Seleccionar y asegúrese de que se seleccione su nuevo círculo. En la parte superior del panel Seleccionar herramienta, debe ver un tamaño de selección con un valor de altura y ancho.

Ingrese 100 en ambos campos y arrastre su primer círculo debajo del primer icono.

06. Duplicar círculos

Resize the circle and duplicate twice, then move them under each shopping icon

Con la forma de su círculo seleccionado, haga clic en Duplicar en el menú superior. Ahora, reposicione este duplicado para que se alinee estrechamente con su círculo original. Trate de hacerlo justo en la parte superior del primer círculo para que se vean como una forma.

Ahora, si mantiene presionado CAMBIO y haga clic en, puede arrastrar este círculo duplicado en línea recta horizontalmente. Esto le permite alinear perfectamente todos sus círculos juntos en una línea recta (o lo suficiente como uno).

Haga esto hasta que tenga tres formas de círculo diferentes a 100 x 100, cada una colocada debajo de los tres iconos.

07. Añadir algunas líneas de conexión.

Select the rectangle shape and arrange it behind the three circles

Vuelve al panel de los elementos y encuentra la forma cuadrada. Haga clic para agregar un cuadrado en el lienzo.

Con esta forma, se debe volver a la herramienta Seleccionar y encontrar el panel de ancho / tamaño de altura. Dado que este rectángulo debe abarcar todo el ancho de la barra de progreso, solo necesitamos una forma realmente larga. Así que cambie la altura a 10 y el ancho a cualquier número que necesite para conectar todos sus círculos. El mío es 750 de ancho.

Ahora, con este rectángulo en posición, mira hacia la parte inferior del panel Seleccionar donde dice Arrange & AMP; Dar la vuelta. Haga clic en el segundo icono en la fila superior, que le permite mover cualquier forma seleccionada detrás de las otras formas.

Nota: Es posible que tenga que hacer clic en el botón inferior unas cuantas veces para obtener el rectángulo detrás de los tres círculos. Pero ahora el rectángulo de conexión solo es visible entre las formas del círculo, por lo que podemos agregar texto a los círculos más adelante.

08. Recolorante

Recolour all the shapes and include a small stroke on the three circles

La barra de progreso actual se ve un poco oscura, así que vamos a alterar un poco el color.

Haga clic para seleccionar el rectángulo largo y encontrar la configuración de llenado en el panel Herramientas. Cambie el color a # C5C5C5 y presione ENTER.

Ahora, haga clic en cualquier lugar fuera de lienzo para deseleccionar el rectángulo. También queremos cambiar los colores del círculo, y deben ser más ligeros, usando el gris más oscuro como un color fronterizo.

Sostenga el turno, y haga clic en cada uno de los tres círculos. Ajuste el color de relleno a # F5F5F5, presione ENTER y luego haga clic en el icono X para cerrar el panel de selección de color de relleno. A continuación, encontrará configuraciones de accidentes cerebrovasculares. Cambie el relleno del trazo a # C5C5C5 y presione ENTER.

Haga clic en el icono X para cerrar este panel de selección de color, luego cambie el tamaño de la carrera a 6. En esta etapa, también recomiendo agrupar todos los círculos y el rectángulo juntos arrastrando un cuadro de selección y iba a editar & gt; grupo. Ahora, puede ajustar la posición de todas las formas a la vez con facilidad.

09. Añadiendo pasos de progreso

Add a text label into the first circle and duplicate the text for all three shapes

Agregemos algunos números a cada círculo para finalizar el diseño de la barra de progreso.

Haga clic en la herramienta de texto e ingrese el número 1 en el primer círculo. Estoy usando SANS abiertos extra en negrita, tamaño 45 con el color # C5C5C5 para que coincida con los bordes. Arrastre este texto para que esté posicionado en el centro del círculo.

Duplica el elemento de texto y muévalo al segundo círculo con el texto '2'. Haz lo mismo para el tercer círculo con texto '3'.

10. Resalte el primer paso

Recolour the first circle blue so it appears like the active progress step

Como toque final, resaltemos el primer paso usando un contorno azul más ligero. Primero seleccione el número '1' que acaba de crear, y cambie el relleno a # 4976A3. Luego haga clic para seleccionar el círculo detrás del texto. Encuentre la configuración del accidente cerebrovascular y cambie el color del trazo a # 4976A3. Esto debería agregar un borde azul oscuro alrededor del círculo. Con el círculo todavía seleccionado, haga clic en la configuración de llenado y cambie el color a # E2EBFA.

¡Y eso es! Ahora puede exportar esto como PNG / JPG utilizando la función de descarga en la esquina superior derecha. También puede ocultar el fondo blanco para exportar esto como un PNG transparente y cambiar el tamaño general del documento utilizando el panel de fondo (tercer botón en el menú del lado izquierdo).

O si desea guardar esto para futuros cambios, simplemente vaya a Archivo & GT; Guardar para más tarde. Tendrá que crear una cuenta gratuita de Vecteezy, pero es una excelente manera de mantener su trabajo duro guardado para futuras referencias.

Este artículo apareció originalmente en revista neta Número 295. Comprarlo aquí .

Leer más:

10 reglas de oro para SVGS sensibles
Explora las nuevas características emocionantes en SVG 2
Animaciones SVG de supercarga con GSAP

Diseñe gráficos SVG en su navegador

01. Elige los iconos

02. Borrar la basura

03. Añadiendo texto

04. Ajuste de gráficos

05. A partir de la barra de progreso.

06. Duplicar círculos

07. Añadir algunas líneas de conexión.

08. Recolorante

09. Añadiendo pasos de progreso

10. Resalte el primer paso

Cómo - Artículos más populares

Cómo eliminar las arrugas en Photoshop

Cómo dibujar un gato

Crea un componente de carrusel flexible

Cómo crear obras de arte de juego estilizado

Pinte un retrato como van Gogh

7 formas asesinas para influir en el comportamiento del usuario

Modelo Darth Vader en Zbrush

Haz una exposición doble en Photoshop

Categorías