Usa el Creador de Formas a Mano Alzada gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué las Formas Bocetadas Se Sienten Amables
La geometrÃa perfecta se siente precisa, y a veces la precisión es el mensaje equivocado. Un rectángulo dibujado a mano se siente como un boceto, un borrador o una idea, mientras que un rectángulo perfecto se siente como una decisión final. Esa diferencia explica por qué las formas bocetadas son populares en bocetos de interfaz, cómics, gráficos explicativos y contenido infantil: señalan que la idea está abierta, es juguetona o está en proceso. La herramienta de arriba dibuja rectángulos, cÃrculos, lÃneas y triángulos con irregularidad de dibujo a mano, usando Rough.js cuando está disponible, con un generador de irregularidad integrado como respaldo, y te da SVG para descargar.
Rough.js crea la sensación de boceto de forma honesta: dibuja cada borde dos veces con pequeños desplazamientos, asà que las lÃneas tiemblan como tiembla un bolÃgrafo en una mano real. También rellena las formas con sombreado de lÃneas paralelas irregulares, en lugar de un relleno plano, lo que mantiene el aspecto de boceto dentro de la forma además de en sus bordes. El resultado parece dibujado, no filtrado, porque la irregularidad está en la geometrÃa misma.
Cómo Usar el Creador
Elige primero una forma. Los rectángulos sirven para cajas, tarjetas y llamadas. Los cÃrculos sirven para insignias, caras y destacados. Las lÃneas sirven para subrayados, flechas sin punta y divisores. Los triángulos sirven para flechas, montañas y botones de reproducción. Después define el nivel de irregularidad. Cero es casi perfecto, lo que frustra el propósito, y el máximo es muy suelto, lo que sirve para borradores ásperos. Un valor medio alrededor de dos es el punto ideal para la mayorÃa de los gráficos: claramente dibujado a mano, todavÃa legible como la forma deseada.
Después elige un color de trazo y un color de relleno. Los trazos oscuros sobre un relleno claro se leen mejor, porque las lÃneas del boceto necesitan contraste para registrarse como lÃneas y no como manchas. Pulsa Volver a dibujar cuando quieras una variación nueva, porque cada dibujo usa una irregularidad aleatoria nueva. Cuando una versión se sienta bien, copia o descarga el SVG antes de volver a dibujar, o se perderá.
Usar Bien las Formas Bocetadas
Las formas bocetadas funcionan mejor cuando todo el gráfico se compromete con el estilo. Una sola caja bocetada en una página de geometrÃa perfecta parece un error, mientras que una página de cajas, lÃneas y anotaciones bocetadas parece un boceto deliberado. Adapta también tu texto al estilo: una fuente manuscrita o informal combina con formas bocetadas, mientras que una fuente corporativa rÃgida lucha contra ellas. Si no puedes cambiar la fuente, mantén la irregularidad baja, para que las formas se sientan humanas sin chocar.
Mantén las formas bocetadas sencillas. Un rectángulo bocetado con una etiqueta corta es encantador. Un diagrama bocetado con veinte formas superpuestas es ruido visual, porque cada irregularidad compite por atención. Usa las formas bocetadas para énfasis, como rodear la parte importante de una captura, enmarcar una cifra clave o subrayar un titular, y deja el resto de la página tranquilo.
Salida SVG y Edición
El SVG descargado es marcado vectorial estándar, asà que escala a cualquier tamaño sin borrarse y se abre en cualquier editor vectorial. Puedes recolorearlo, cambiar su tamaño o combinar varias formas en una escena mayor. Como la irregularidad está grabada en los datos de la ruta, la forma mantiene su aspecto dibujado a mano en todas partes, incluso en visores que nunca oyeron hablar de Rough.js. Esa portabilidad es el punto de exportar SVG en lugar de depender de una biblioteca en el momento de mostrar.
Una nota práctica: los archivos SVG con rellenos ásperos pueden ser más grandes que las formas planas, porque el sombreado añade muchos segmentos de lÃnea. Para uso web, eso rara vez es un problema con unas pocas formas, pero si construyes una página con docenas de formas bocetadas rellenas, prefiere formas solo con trazo o reutiliza una forma varias veces.
Preguntas Frecuentes
¿Por qué cada redibujo se ve distinto? Porque la irregularidad es aleatoria por diseño, como una mano real que nunca dibuja la misma lÃnea dos veces. Vuelve a dibujar hasta que una versión se sienta bien, y luego descárgala.
¿Puedo usar el SVG en diapositivas o documentos? SÃ. El SVG se importa en la mayorÃa de las herramientas modernas de diapositivas y documentos, y se mantiene nÃtido a cualquier tamaño. Si tu herramienta necesita PNG, convierte el SVG con cualquier conversor gratuito.
¿Qué pasa si Rough.js no carga? La herramienta usa un generador de irregularidad integrado que mueve cada punto, asà que igual obtienes una forma realmente bocetada, no un error.
Dibuja una forma arriba, vuelve a dibujar hasta que se sienta hecha a mano y descarga el SVG.