Buscó por todas partes el tema de icono perfecto, pero no le gustó lo que encontró y decidió crear su propio icono de carpeta personalizado. ¿Qué software debe usar y cómo puede comenzar? Este tutorial Boxy SVG proporciona instrucciones paso a paso para crear un ícono de carpeta simple.
Instalación
Hay muchas herramientas que puede usar para crear archivos SVG, pero la relativamente nueva SVG en forma de caja es uno de los más directos y fluidos. Boxy SVG está disponible para Windows, macOS y Linux. Está disponible para descargar de forma gratuita en Windows Store, Mac App Store y Snap store. Simplemente busque «boxy svg» en la tienda de aplicaciones respectiva para instalarlo. Los usuarios de Linux pueden instalarlo en cualquier distribución basada en Ubuntu. Encuéntralo en el Centro de software o enciende una terminal y usa:
sudo snap install boxy-svg
En Arch y Manjaro, primero deberá agregar soporte para paquetes instantáneos y luego usar el mismo comando.
Boxy SVG también está disponible como una aplicación web, aunque requerirá una suscripción para usarla.
Empezar con un rectángulo
Este tutorial Boxy SVG diseña un icono para carpetas. Dado que las carpetas son rectangulares, seleccione la herramienta Rectángulo, la 12 en la barra de herramientas izquierda, con el icono de rectángulo sólido.
Úselo para definir un rectángulo que cubra la mitad inferior del lienzo predeterminado, como el que se ve en la captura de pantalla a continuación.
Clonar y cambiar el tamaño
Con la herramienta Transformar seleccionada (la primera en la barra de herramientas izquierda con la flecha del cursor), haga clic en su rectángulo. Use los puntos de control en su cuadro delimitador para cambiar su tamaño un poco horizontalmente para que tenga un espacio vacío a su derecha.
Puede duplicar un elemento copiándolo y pegándolo (Ctrl + C, luego Ctrl + V en su teclado), pero intente esto en su lugar: mantenga presionada la tecla Alt, haga clic con el botón izquierdo en el rectángulo y arrástrelo hacia la derecha. Mientras lo arrastra, también mantenga presionada la tecla Mayús para restringir el movimiento de su rectángulo a solo un eje, en este caso, horizontalmente. Muévalo a la derecha de su rectángulo existente.
Transformaciones básicas
Si hace clic por segunda vez en un objeto con la herramienta Transformar seleccionada, los puntos de control cambiarán de color para mostrarle que, en lugar de cambiar el tamaño, ahora puede rotarlo (si usa los puntos en sus esquinas) o sesgarlo (con el puntos en sus lados).
Pero veamos una forma aún más versátil de transformar objetos usando puntos individuales. Cambia el tamaño de tu nuevo rectángulo para que esté a la derecha del anterior. Luego, seleccione «Forma -> Forma a ruta» de los menús en la parte superior para convertir el objeto seleccionado en una ruta editable.
Ahora puede modificar sus puntos individuales para cambiar su forma. Aunque no era necesario simplemente sesgar el rectángulo, esto muestra cómo modificar puntos individuales para crear formas más interesantes o tener un mejor control sobre la perspectiva.
Use la herramienta Editar (la segunda en la barra de herramientas izquierda, directamente debajo de la herramienta Transformar, con una flecha triangular) para seleccionar los dos puntos de control en el lado derecho de su nuevo rectángulo.
Con ambos seleccionados, haga clic izquierdo y mantenga presionado uno de esos puntos para elegirlo, luego arrástrelo hacia arriba mientras mantiene presionada la tecla Mayús (para restringir el movimiento en el eje vertical).
Colores y Perspectiva
Use la herramienta Transformar para mover su nuevo rectángulo, ahora más pequeño y sesgado, de modo que toque el más grande. Use la herramienta Relleno (primero en la barra de herramientas derecha, con un ícono de pincel) para darle un color. Por ahora, use cualquier color que desee como marcador de posición.
Cree un clon del rectángulo sesgado más pequeño y muévalo al lado izquierdo de su rectángulo más grande, usando los métodos demostrados anteriormente.
Con la herramienta Transformar activa, seleccione la herramienta Arreglo (con el ícono de cruz en la barra de herramientas derecha o presione A en su teclado). Haga clic con el botón izquierdo en su primer rectángulo sesgado, mantenga presionada la tecla Mayús y haga clic en el segundo rectángulo sesgado para seleccionarlos a ambos.
Use «Atrás» del grupo de opciones de orden Z en el panel Arreglo para enviar esos rectángulos detrás del más grande. «Frente» hace lo contrario y traerá un objeto al frente de todo lo demás. Las opciones adjuntas «Elevar» y «Bajar» mueven un objeto «hacia delante» o «hacia atrás» en pasos individuales.
Cree un clon de su rectángulo más grande y muévalo hacia la derecha y hacia arriba para que esté en contacto con el otro lado de sus rectángulos sesgados. Debe tener un rectángulo grande en contacto con su lado izquierdo y otro en contacto con su lado derecho, como se muestra en la captura de pantalla a continuación.
Envíe este rectángulo a la parte posterior también y asígnele un color diferente para que pueda distinguirlos fácilmente.
hacer la aleta
Con la forma básica de nuestra carpeta lista, es hora de hacer que se vea más como una carpeta. Una solapa de categoría ayudará con eso. La forma de la carpeta a continuación tuvo que modificarse un poco ya que parecía demasiado gorda.
Crea un rectángulo ancho y corto en un espacio en blanco de tu lienzo. Tendrá una idea básica de su tamaño si tiene en cuenta que pronto se convertirá en una solapa para la forma de carpeta básica ya diseñada.
Seleccione la herramienta Editar (segunda en la barra de herramientas izquierda), mantenga presionada la tecla Ctrl y haga clic y arrastre el punto de control del borde superior izquierdo de su rectángulo hacia el centro de su lado superior. Esto convertirá el borde superior izquierdo en una curva. Repita con el movimiento opuesto para el punto de control del borde superior derecho, arrastrándolo hacia la izquierda, nuevamente, hacia el centro del lado superior de su rectángulo. El resultado, como puede ver a continuación, debería ser un ex-rectángulo, con su lado inferior angular y el superior curvo.
Mueva la solapa para que esté en contacto con el lado superior izquierdo del rectángulo grande frontal de su carpeta.
Modifique su tamaño y ubicación hasta que crea que el resultado parece una carpeta.
Degradados y Sombras
La forma más fácil de dar la ilusión de volumen y hacer que los colores de los íconos sean más interesantes es mediante el uso de degradados. Seleccione el rectángulo frontal grande y la herramienta Relleno (primero en la barra de herramientas derecha o F en el teclado). En «Tipo», seleccione el segundo icono, «Gradiente lineal».
Deja el resto de opciones como están y dirige tu atención a su color. Para editar eso, seleccione la herramienta Editar (segunda en la barra de herramientas izquierda) y haga clic en cada punto de control de la «línea de degradado» en el rectángulo. Verá los selectores de color que aparecen en el panel de la derecha. Úselos para cambiar los colores de su degradado a un gris oscuro que va a un amarillo claro.
Observe el valor directamente debajo de los selectores de color, que estará acompañado de forma predeterminada por una configuración «Hex». Copie este valor en su portapapeles.
Seleccione el resto de los rectángulos y asígneles el mismo degradado. Dado que no parece haber una forma de «copiar degradados» en Boxy SVG, deberá ingresar los valores de color manualmente. Es por eso que debe copiar el valor de color del degradado anterior. Tendrás que volver a él para copiar también el valor del segundo color y pegarlo en el degradado de tu segundo rectángulo. Repita para los otros dos hasta que todos los lados de su carpeta tengan exactamente el mismo degradado.
Con la herramienta Editar activa, juegue con el degradado de cada lado de la carpeta. Haga que los lados izquierdo y derecho sean un poco más oscuros arrastrando el punto de luz de su degradado fuera de su rectángulo. Haz lo mismo con el lado de atrás, pero haz que se vea aún más oscuro.
Toques finales
Para hacer que el icono de la carpeta se parezca más a una carpeta que a un cuadro amarillo, falsifique algunas páginas como un bonito detalle adicional. A estas alturas ya debería estar familiarizado con los procesos involucrados.
Comience creando un rectángulo gris claro frente a su carpeta, algo más pequeño.
Agregue un trazo alrededor de este rectángulo para dar una ilusión de profundidad, sin los efectos de pseudo perspectiva que se usaron en la carpeta. Para hacer esto, con su rectángulo seleccionado, elija la herramienta Trazo (segunda en la barra de herramientas derecha o S en el teclado). Asígnele un color negro, pero gire el control deslizante de transparencia a alrededor del 80 por ciento, cerca del lado derecho. El borde que apareció alrededor de su rectángulo debe verse transparente y ser de un gris algo más oscuro que el color principal del rectángulo.
Copia y pega tu rectángulo. Dale al nuevo clon un valor de relleno gris algo más oscuro. Deja el trazo como está.
Use el panel Organizar para mover su nuevo rectángulo hacia atrás pero desplazado hacia arriba y hacia la derecha en comparación con el rectángulo de su página principal. Use la herramienta Transformar para girarlo de dos a cinco grados a la derecha.
Repita los últimos pasos para crear una tercera página detrás de las dos primeras.
Regrese al panel Organizar, seleccione las tres páginas y envíelas de vuelta. Use la opción «Elevar» para llevarlos hacia el frente paso a paso para que estén al frente de la parte posterior de su carpeta pero detrás de la parte frontal.
Este ejemplo agrega otro rectángulo debajo de la carpeta. Estaba sesgado hacia un lado, se agregó un degradado de gris a transparente y el panel Composición (tercero en la barra de herramientas derecha, C en el teclado) se usó para agregar un filtro de desenfoque gaussiano. El resultado fue una sombra agradable y suave debajo de la carpeta. Siéntete libre de saltarte ese pequeño detalle si lo deseas.
En el último paso de este tutorial Boxy SVG, use «Archivo -> Guardar como…» (Ctrl + Shift + S) para guardar el archivo. También puede exportarlo a un formato de mapa de bits más amigable que puede usar en otros programas, como PNG o JPEG, seleccionando «Archivo -> Exportar …» (Ctrl + E). Establezca los parámetros de formato (resolución, compresión) que desee utilizando el panel de la derecha y haga clic en «Exportar» para guardar su archivo en el tipo de archivo seleccionado.
Una vez que haya guardado su archivo, puede reemplazar sus íconos de Gnome con este recién creado.
Ahora que ha creado sus íconos, siga el siguiente tutorial para diseñar un logotipo en Inkscape.