Diseño Gráfico
El diseño gráfico es una profesión cuya actividad consiste en concebir, programar, proyectar y realizar comunicaciones visuales, producidas en general por medios industriales y destinadas a transmitir mensajes específicos a grupos sociales y con objetivos claros y determinados
También se conoce con el nombre de diseño en comunicación visual, debido a que algunos asocian la palabra gráfico únicamente a la industria gráfica, y entienden que los mensajes visuales se canalizan a través de muchos medios de comunicación, y no solo los impresos.
- Andres Cordeiro
- Diseño Gráfico
Introducción
Hace un tiempo comenzamos a trabajar en un pequeño proyecto interno llamado img-web-optimizer, un script diseñado para automatizar la optimización de imágenes antes de subirlas a una web. Aunque existen herramientas similares, necesitábamos un flujo muy concreto y sencillo, por lo que optamos por desarrollar nuestro propio proceso.
Sin embargo, al crear este script nos dimos cuenta de que gran parte del trabajo se apoya en una herramienta fundamental dentro del mundo del tratamiento de imágenes desde terminal: ImageMagick. Creo que gran parte del publico no la conoce. Así que hoy vamos a ver qué es exactamente, para qué sirve y por qué se ha convertido en un estándar a la hora de automatizar tareas repetitivas relacionadas con imágenes.
¿Qué es ImageMagick?
ImageMagick es un conjunto de utilidades open source diseñado para crear, editar, convertir y procesar imágenes digitales desde la línea de comandos. Puede trabajar con más de 200 formatos y permite encadenar operaciones complejas sin necesidad de abrir un editor gráfico. Una de sus grandes fortalezas es su integración con otros lenguajes. Además de la interfaz por terminal, existen librerías que hacen uso de sus capacidades:
- Imagick para PHP
- PythonMagick para Python
- magick para R
Estas librerías permiten incorporar funciones de manipulación de imágenes en automatizaciones, scripts de servidor, paneles de análisis o tareas estadísticas, lo que amplía enormemente el uso de ImageMagick más allá de la terminal.
¿Por qué es útil en flujos de trabajo repetitivos?
Cuando trabajamos con grandes cantidades de imágenes —por ejemplo para subir productos a un catálogo, generar miniaturas o convertir lotes enteros de archivos— un editor gráfico tradicional puede volverse un cuello de botella. Abrir imagen por imagen, editar, exportar, revisar… es un proceso lento.
ImageMagick, en cambio, permite ejecutar todas esas operaciones con una sola línea de comando. De ahí que herramientas como img-web-optimizer se puedan construir sobre él: un único script puede procesar decenas o cientos de imágenes en segundos manteniendo consistencia en formato, tamaño o compresión.
Comandos esenciales de ImageMagick
A continuación veremos algunos de los comandos más útiles y comunes para entender su potencial. Todos ellos parten del motor principal del programa, el comando magick.
1. Convertir formatos de imagen
magick imagen.png imagen.jpg
Convierte una imagen de PNG a JPG sin necesidad de abrir ningún programa gráfico.
2. Redimensionar imágenes
magick imagen.jpg -resize 800x800 imagen_800.jpg
Crea una versión con ancho y alto máximo de 800 píxeles.
3. Comprimir imágenes JPG
magick imagen.jpg -quality 70 imagen_opt.jpg
Reduce el peso del archivo manteniendo una calidad aceptable.
4. Procesar varias imágenes a la vez
magick mogrify -resize 1200x1200 *.jpg
Aplica cambios in situ a todos los archivos JPG del directorio.
Importante:
mogrifysobrescribe los archivos originales; conviene usar copias.5. Comparar dos imágenes
magick compare original.jpg procesada.jpg diferencia.pngGenera una imagen resaltando las diferencias entre dos archivos.
Esta herramienta es especialmente útil en automatizaciones de calidad, cuando se quiere asegurar que la compresión o el procesado no han alterado detalles importantes.
Tareas peligrosas y tareas seguras
Como hemos mencionado, comandos como mogrify pueden ser peligrosos porque modifican directamente los archivos originales. Por eso siempre se recomienda trabajar con copias cuando se estén probando opciones nuevas.
Por otro lado, herramientas como compare o funciones de medición de distancias y errores entre imágenes permiten evaluar si el resultado final se mantiene dentro del estándar de calidad que queremos. Esta capacidad de validación automática es una de las razones por las que ImageMagick es tan usado en entornos de producción.
Conclusión
Aunque ImageMagick incluye comandos que requieren precaución —especialmente aquellos que sobrescriben archivos— ofrece también utilidades muy potentes para garantizar la consistencia y la calidad del material que procesamos. La herramienta compare, por ejemplo, permite detectar desviaciones en la calidad de forma automática, lo que resulta clave cuando trabajamos con grandes volúmenes de imágenes.
Todo esto convierte a ImageMagick en un estándar para automatizar procesos repetitivos de tratamiento y optimización de imágenes. Su integración con lenguajes como Python, R o PHP permite crear flujos de trabajo completos, como en el caso de nuestro script img-web-optimizer, que aprovecha su eficiencia para simplificar lo que antes requería largos procesos manuales.
Si os interesa, en futuras entradas podemos ver ejemplos más avanzados o explicar cómo integrar ImageMagick en scripts personalizados.
El sentido de este post, que realmente son pruebas que hice cuando me puse hacer el post de Sustituir imagenes y texto en fichero svg de inkscape.
Un poco teoria de SVG generado Inkscape
Sabemos que un fichero svg su formato es XML, por lo en principio nuestro enfoque inicial es buscar información como sustituir contenido de un fichero XML.
XML es un lenguaje de marcado extensible, que fue creado para almacenar y transportar datos, legible tanto para humanos como para dispositivos.
En W3school hay un tutorial bastante completo de XML, dentro del cual podemos encontrar : XPath y Xquery
- XPath se puede utilizar para navegar a través de elementos y atributos en un documento XML.
- XQuery fue diseñado para consultar datos XML. Tiene el mismos sentido de uso que el SQL es para las bases de datos,
Lo queno encuentro es como poder sustituirlo, pero me imagino que XPath se puede realizar, hay que estudiarlo un poco.
Empezamos con XQUERY
Encontré el siguiente documento en internet, que pareció muy interesante, donde explica muy bien la funcionalidad de XQUERY.
Ya se esta haciendo costumbre que cada fin de semana, me líe con algo nuevo, este semana toco automatizar los textos y las imágenes de un fichero SVG generado con Inkscape.
La ideas es hacer un cartel de oferta, pero que los textos, precios y imágenes las pillará de forma externa, para que el cliente pueda generar carteles oferta de forma automatizada, sin tener que generar el uno a uno.
Un cartel como esté.
Me puse buscar información y aquí este otro post que es intento Manipular SVG como si fuera un XML, pero fue fallido el intento.
En grupo de telegram de Inkscape en Español pregunto y me comentan de:
- LPE BOOL -> Que atraves de LPE BOOL puedo hacerlo, pero no es muy intuitivo.
- NEXT-GENERATOR-> Me comentan tambien de un proyecto llamado next-generator, que busque por ahi.
El primero tiene pinta de ser algo de inkscape, pero realmente no por donde empezar.
El segundo Nextgenerator es una extensión inkscape.
Nextgenerator - Extension de inkscape.
El proyecto se encuentra GitLab /Moini/nextgenerator , al leer la descripcion del proyecto, creo que es lo que busco.
El problema que no se mucho como va el tema de las extensiones en inkscape.
Nueva busqueda información y encuentro esta entrada del Blog de Mairin Duffy que nos indica como es la instalacion además de explicar como utilizarlo.
Os pongo un video de su canal donde explica como hace una plantilla svg para presentaciones conferencias ( ingles)
En el podemos ver que lo hace por
%VAR_mivariable%
Donde mivariable el titulo del campo, es decir la primera linea del csv. Lo colocamos con %VAR_ al principio y lo cerramos con %
Bueno hasta aquí llegue, con esto soluciono parte del problema que es el cambiar los textos, me faltaría el poder cambiar la imagen.
[NADA MAS POR MOMENTO, LO DEJO ASÍ, OTRA VEZ SERÁ.. ]
¿Como poner un texto en un trayecto ?
Si queremos poner un texto en un trayecto , debemos seleccionar los dos objetos: el trayecto y el texto, luego en el menú de Texto debemos seleccionar poner en trayecto , listo el texto, el texto recorre la forma del trayecto.
¿ Como poner un texto dentro de una figura ?
Al igual que en el anterior, seleccionamos los objetos (la figura y el texto) luego en menú de Texto seleccionamos "Fluir en el marco", listo el texto pasa dentro del objeto.
El caso es que hice la prueba con un triangulo, que lo genere con la herramienta polígono y no me funciona.. bueno continuaré... :-)
Fuentes de la entrada:
¿Qué es Inkscape?
Inkscape es una herramienta de diseño gráfico vectorial libre y de código abierto, con Inkscape se puede hacer diagramas, líneas, gráficos, logotipos, y gráficos mucho más complejos, nació con el objetivo de ser una herramienta libre de código abierto y cumpla completamente con los estándares XML, SVG y CSS2.
Inkscape principalmente fue desarrollada para el sistema operativo GNU/Linux, pero en la actualidad es multiplataforma y hay versiones para Windows, Mac OS X, y otros sistemas derivados de Unix.
¿Los primeros pasos en Inkscape - Paneles, lienzo y ventanas?
Si ya conoces otras herramientas de diseño, inicialmente es bastante intuitivo.
Optimizar y reducir peso imagenes con tinypng.
Al subir imágenes a una web es muy recomendable optimizarlas al máximo, que no sean muy pesadas, por ello recomiendo utilizar alguna herramienta de optimización de imágenes.
Nosotros ahora vamos utilizar la herramienta que nos facilitan en la web tinypng.com, esta herramienta tanto optimiza imágenes png como jpg, funciona perfectamente ambos formatos.
En esta web se puede subir varios imágenes a la vez, tiene máximo 20 imágenes para versión gratuita, la optimización es muy rápida, consiguiendo reducir el peso de la imágenes más de la mitad, una vez comprimidas puedes descargar todas juntas en un zip.
Cuando lo descargamos las descomprimidos para que podamos ver la diferencia que hay entre la original y la comprimida, no se nota, verdad!
En web fijo que no se nota, me imagino que si fuéramos imprimir en formato grande seguramente si se notaría algún pixelado.
- Olalla
- Inkscape
Inkscape no tiene ninguna forma preestablecida para instalar fuentes, según su wiki oficial, porque se alimenta de las fuentes predeterminadas del sistema.
Lo primero que tienes que tener claro es que los sistemas operativos suelen tener dos carpetas donde guardan las fuentes del sistema y del usuario, aunque en principio inkscape se alimenta de los dos , pero deberías tener claro donde instalar las fuentes, si es para el usuario o para el sistema.
A veces , si acabas de intalarla y NO te aparecen puede ser cosa de cache del sistema o usuario, lo mas practico es reiniciar y ver si realmente no te aparecen INSKCAPE.
Donde las instalamos las fuentes?
Según el sistema operativo tendremos varias opciones para instalarlas, pero lo que tenemos que tener claro es si las queremos para un usuario o para todo el sistema. Como siempre desde aquí solo vamos a comentar como instalar en sistemas linux.
El tratamiento de imagenes para mi siempre es un trastorno
Vamos indicar como optimizar imágenes para utilizar en el desarrollo web, imágenes que no pierdan la calidad, que pesen poco, sin cambiar el tamaño de la foto.Hoy en día hay muchas herramientas para tratar imagenes, por ello hacemos este post para definir cuales utilizamos y cuales fuimos descartando.
También pondremos programas que utilizamos para tratar imagenes, simpre que sean sencillos y que pueda tratar varias imagenes a la vez.
Herramientas gráficas para optimizar imagenes.
Herramientas online como tinypng , son ideales para optimizar imagenes de forma sencilla sin necesidad de tener nada instalado en nuestro ordenador.
TinyPng
Para nosostros es una de las mejores aplicaciones web para optimizar imagenes, muy facil y sencilla de utilizar. Tiene una limitación de MG y ficheros para el servicio gratuito.
Reduce el peso de las imagenes de una forma considerable, sin perder nada calidad, hay pocos aplicaciones online y incluso de escritorio que lo superan,
Gimp
Este programa es una herramienta open source para tratamiento de imagenes. A la hora ver los resultado de como comprime, es impresionate, consigue incluso mejores resultados que tinypng.
A la hora guardar la imagen ( exporta como) si es una imagen jpg no permite configurar la compresion y que datos poner.
En la web gráffica encontré la siguiente entrada:
Siete herramientas para identificar una tipografía
Donde nos indica varías aplicaciones donde podemos identificar la tipografía de una imagen. Algo que un diseñador necesitará muy a menudo.
Son varias herramientas, pero yo me quedo con las dos que os indico.