Gráficos y Fotografía

Gráficos y Fotografía, Sistemas, Trucos

Capturas de pantalla y capturas aplazadas en Windows. Herramienta recortes.

/

Hoy os hablamos de una de las herramientas que más usamos en nuestro trabajo diario: la herramienta de recortes de Windows para realizar capturas de pantalla. Lo que todos conocemos como “pantallazo“.Siempre me impresiona que mucha gente no la conoce y no la use. Ya hemos hablado otras veces de herramientas de captura de pantalla pero, desde hace unas versiones, Windows incluye una, y muy buena. Recortes (Snippets) es una herramienta aparentemente muy simple. La ejecutas, le das a Nuevo y capturas el trozo de pantalla que quieres. Hasta ahí perfecto.Después puedes o copiar y pegar en un correo o un documento de texto, o guardarlo como imagen. La herramienta tiene además utilidades para pintar, resaltar y realizar selecciones de forma libre o de pantalla completa. Capturas aplazadas. Pero, sin duda, la funcionalidad que más me gusta, es la de “Aplazar“. Cuando seleccionamos ahí el delay en segundos, podemos pinchar en Nuevo y realizar lo que queremos en la pantalla. Tras esos segundos realizará “el pantallazo“. Esto permite capturar hechos que ocurren cuando hacemos hover o acciones con el ratón. Hechos que, de otra manera, no podríamos capturar la ser “dinámicos“.

Gráficos y Fotografía, Trucos

Cómo recortar un vídeo usando Shotcut

/

En ocasiones grabamos un vídeo y tenemos que quitar ciertas partes. Porque queden “feas” o porque, por seguridad, no deben mostrarse. Podemos optar por grabar sólo parte de la pantalla, pero con OBS (el que usamos) no es fácil, como os mostramos. Es mucho más fácil grabar todo y usar el filtro de recorte de Shotcut para quitar lo que no queramos. Como recortar un vídeo con Shotcut. Shotcut dispone de un filtro de vídeo que es Recorte. Es muy sencillo de usar, y con opciones de recortar desde el centro, o recortar por arriba, abajo, derecha o izquierda. En este vídeo explicamos cómo usarlo. Después de recortar, graba los cambios y exporta tu vídeo tratado.

Diseño Web, Gestores de contenidos, Gráficos y Fotografía

Plugin para descargar fotos en las galerías NextGEN.

/

Hace unos días un cliente nos pidió que sus usuarios pudieran descargar las fotos de su página web de manera sencilla. Su página usa el plugin NextGEN gallery para crear galerías. Afortuandamente existe un plugin para ello y os lo dejamos aquí por si os surge la misma petición. NextGEN Download Gallery Un desarrollador ha creado NextGEN Download Gallery, que básicamente es otra plantilla que incluye la opción de descargar las imágenes individualmente (seleccionando cuales por las típicas casillas) o descargar todas las fotos del álbum. Es de agradecer que la gente comparta sus desarrollos para que todos podamos aprovecharnos de ellos. Buena solución y gratis.

Diseño Web, Gráficos y Fotografía, Trucos

Convertir imágenes a Base64. Cómo y por qué

/

Esto es un truco muy interesante en ciertos casos. Coge una imagen y la convierte en código, el cual es puede poner en un html para mostrar directamente la imagen. Os enseñamos cuando y cómo hacerlo. Cuándo es interesante convertir imágenes a Base64. Básicamente en 3 situaciones. En firmas de correo que admitan html. El poner la imagen ahí como código y que no tenga que buscarla de otro sitio reduce la posibilidad de spam y facilita la carga. En ciertas ocasiones es la única manera porque no permiten subir imágenes (firma de Gmail). En páginas web que tengamos que poner imágenes pero no nos deje cargarlas de sitios de terceros o subirlas porque esté restringido. En tu página web cuando quieres reducir la carga de imágenes. Cuando una web abre una imagen el código es como este:<img src=”….”  title=”….” alt=”……..” />La web abre un proceso para cargar esa imagen desde ese src y esto gasta tiempo y procesador. Las imagenes en Base64 se cargan “incrustadas”, directamente desde código, y no tiene que abrir otro proceso ni gastar tanto tiempo. Cuando no es interesante. Las imágenes en Base64 aumentan el código, y no permiten etiquetas para SEO. Así que no es bueno hacerlo en todas. Sólo en ciertas como los favicon, iconos, logos pequeños, ciertos fondos en css o cualquiera que tarde mucho. También si se cargan desde sitios de terceros. No lo hagáis en imágenes grandes, el código sale larguísimo. Nosotros, por ejemplo, hemos puesto como ejemplo un logo grande, pero porque lo teníamos a mano. Nunca lo pondríamos tan grande en Base64. Cómo se hace. Lo mejor es usar un sitio web. Existen varios si buscas en Google, por ejemplo https://www.base64-image.de/ Ahí subes la imagen y te dará el código tanto para html como para css. Una imagen en Base64 en html se carga así: <img src=”data:image/gif;base64,……..” title=”Título” /> En CSS se pondría algo como: background: #FFF no-repeat center center url(“……”) En los puntos suspensivos se pone el código que te dan las webs anteriores.    

Gráficos y Fotografía, Trucos

Cómo pixelar o difuminar una cara en una foto con Paint o Gimp

/

Cuando tenemos páginas web o redes sociales, y queremos subir la foto de una persona, pero no tenemos su consentimiento, lo lógico es que pixelemos o difuminemos la cara. Más aún cuando estamos hablando de menores. Un cliente nos ha preguntado cómo hacerlo, así que os dejamos un vídeo del proceso usando dos programas. Primero MS Paint, programa que está en todos los Windows. Es más difícil de hacerlo en Paint, y los resultados son peores, pero para un apaño os sirve. Esto es normal porque Paint es un programa muy básico. Como mejor solución os enseñamos también cómo hacerlo en Gimp, el programa de retoque fotográfico gratuito, alternativa a Photoshop del que sabéis que somos fans (porque no hay que pagar jejeje). Os recomendamos instalarlo porque es muy útil. En Photoshop se hace de manera muy parecida a Gimp (tiene herramientas y filtros similares). Proceso. En MS Paint el truco es seleccionar la cara y luego minimizar la selección pulsando Ctrl y reduciendo la selección (o Ctrl -). Una vez reducida la volvemos a aumentar y eso hace que pixele. Como veréis en el vídeo, podéis tener que hacerlo en varios intentos. En Gimp sólo tenemos que seleccionar la cara con la herramienta de selección elíptica, y luego tenemos dos opciones: Aplicar un filtro de desenfoque (como el de pixelar o el desenfoque Gaussiano). Usar la herramienta de emborronado para difuminar la cara. Vídeo con el proceso.

Gráficos y Fotografía, Trucos

Cómo vectorizar una imagen usando Adobe Illustrator

/

Uno de los vídeos que más se ven en nuestro canal es cómo vectorizar una imagen usando Inkscape. Hoy os queremos enseñar a hacer lo mismo usando Adobe Illustrator (el programa que más se usa para diseño vectorial). El problema que presentamos es el siguiente: un logo que se ha diseñado con poca calidad, que no podemos rediseñar (o no queremos hacerlo desde cero) pero que necesitamos en mayor resolución. El logo en baja calidad pixela en cuanto se aumenta de resolución. Para resolver esto vamos a vectorizar el logo original en Adobe Illustrator. Vectorizarlo convierte cada color y cada curva en fórmulas matemáticas. Además, vamos a crear capas de cada componente lo que nos permite luego modificarlo individualmente. Una vez en formato vectorial podemos escalarlo tanto como queramos. Esto lo podemos salvar en un formato vectorial, que cualquier diseñador puede modificar, y también exportarlo a formatos de imagen bitmap típicos como jpg, png etc Aquí os dejamos el proceso:

Gráficos y Fotografía, Trucos

Cómo eliminar arrugas e imperfecciones en las fotos con GIMP

/

Hoy, como sabemos que haréis y compartiréis muchas fotos en navidad, os dejamos un pequeño truco muy sencillo de edición gráfica: cómo eliminar arrugas e imperfecciones en las fotos con GIMP. En este pequeño vídeo os explicamos paso a paso cómo editar una foto y eliminar lo que no queramos, ya sea unas arrugas o unos defectos en una foto. Para ello usaremos el programa de edición gratuita GIMP y las herramientas de clonado y saneado. Para que veáis aquí tenéis nuestro ejemplo en un “antes” y un “después“. Y lo hemos hecho muy rápido. También os podrá servir para entender lo manipuladas que están las fotos en los medios gráficos. Si cualquiera (como nosotros) podemos hacer esto de manera tan sencilla, qué no podrán hacer los profesionales.  

Gráficos y Fotografía, Trucos

Como crear una imagen en blanco y negro con una selección en color en Gimp

/

Otro truco sencillo con Gimp para los que lo uséis como yo, a nivel usuario básico. ¿Por qué comparto esto? Porque creo mucho en producir contenido con lo que sabes para que otros aprendan. Así aprendimos todos en su día y ayudas a la gente que se inicia. Hoy os dejo un pequeño truco para hacer un efecto muy chulo. Poner una imagen en blanco y negro pero destacar un objeto o persona en color. Conviene ver el vídeo anterior sobre cómo poner una imagen en blanco y negro. En el vídeo os enseñamos dos maneras de hacerlo, una primera más correcta. Otra quizás más rápida. En este vídeo además practicaréis con la selección múltiple, el uso de varias capas, capas de transparencia (alfa) y el vídeo del otro día de cambiar una capa de color a blanco y negro. Esperamos que os guste.

Gráficos y Fotografía, Trucos

Como cambiar una imagen de color a blanco y negro usando Gimp

/

Nosotros usamos mucho las herramientas de retoque de imágenes tanto para contenido para páginas web como para contenido promocional. La herramienta que usamos es la gratuita Gimp. Como sabéis, de vez en cuando os dejamos trucos sencillos para poder realizar con estas herramientas. Hoy os enseñamos tres formas sencillas de cambiar una imagen de color a blanco y negro. Cada método tiene sus ventajas e inconvenientes. El primero es rápido. El segundo crea imágenes diferentes, y el tercero nos permite hacer un retoque más personalizado. El tercero es el que más usamos nosotros. Aquí os dejamos el vídeo:

Gráficos y Fotografía, Webs

AutoDraw: el paint táctil para tablets y móviles de Google

/

Google ha sacado hace unos días AutoDraw. Un programa para pintar, tipo Paint, pero en modo táctil. y vía web. Programas y apps para pintar hay muchísimos. Pero pocos se han fijado que muchas veces los adultos, y más aún los niños, usan los dispositivos que más a mano tienen (móviles y tablets) y estos tienen pantallas táctiles. Y las herramientas de dibujo tradicionales son difíciles de usar en estos programas. AutoDraw está pensado para pintar en modo táctil. No sólo tiene las herramientas y menús diseñadas ya para este modo, sino además tiene un modo predictivo. Tiene unos algoritmos que pueden decidir qué estás intentando dibujar, con sólo hacer unos pocos trazos. Y sugiere figuras ya hechas respecto a esas conclusiones con un menú que dice “do you mean” (quieres decir…). Es más, esos algoritmos van aprendiendo según la gente usa el programa. Prometen ser más precisos con el tiempo, y así afirman que el usuario podrá dibujar más rápido. Obviamente también puedes usarlo sin el modo predictivo. ¿Es útil? Depende para qué usuario y en que momento. Pero hoy es noticia por ese algoritmo predictivo y por la idea de diseñarlo totalmente en modo tablet. Yo ya estoy pensando en que va a ser algo útil para que use me hijo de 2 años. Probadla….aunque cuidado con Google que le gusta sacar productos y luego quitarlos.

Scroll al inicio