Imagen | FB91

Posts Tagged ‘imagen’

Marca de agua en GIMP usando imágenes

Saturday, March 20th, 2010

A raíz de este post surgió la pregunta de como sería realizar una marca de agua en GIMP usando una imagen. La respuesta está en los modos de capas, para ello voy a hacer dos ejemplos, el primero de un logo por sobre una imagen de fondo, y el segundo de una imagen pequeña por sobre una imagen de fondo.

Ejemplo 1

El logo a utilizar será este: https://wiki.ubuntu.com/Artwork/Official?action=AttachFile&do=get&target=UbuntuLogo.png
La imagen de fondo a utilizar será esta: http://ubuntustudio.org/files/US1.png

Abrimos la imagen de fondo y el logo con GIMP, a la capa que contiene al logo le damos como Modo de capa, “Solapar“

Nos va a quedar algo similar a esto:

Ejemplo 2

La imagen pequeña a utilizar será esta: http://img.tomatone.net/big/The%20Simpsons%20Movie%20(2007)%20DVDRip.jpg
La imagen de fondo a utilizar será esta: http://i.imgur.com/BbWKr.jpg

Abrimos la imagen de fondo y la pequeña con GIMP, antes de aplicar algún Modo de capa, conviene difuminar un poco los bordes de la foto para que no quede tan “cortante”, sino mas bien algo armonioso. Entonces seleccionamos la capa de la imagen pequeña | click derecho | añadir canal alfa (ya que es JPG y dicho formato no acepta transparencias) vamos a hacerle click derecho de nuevo y seleccionamos alfa a selección. Luego, seleccionar, Difuminar, con un valor de 40 pixeles aproximadamente; por último, seleccionar | Invertir (ó Ctrl. + I) y eliminamos lo seleccionado presionando Supr. (tantas veces como sea necesario). También le pueden bajar un poco la opacidad para que quede mejor.

Finalmente le damos, a la capa de la imagen pequeña, el modo de capa Superponer y nos quedaría algo así:

Hay que resaltar que dependiendo de nuestra imagen de fondo, o nuestra imagen que le queremos aplicar la marca de agua, el modo de capa puede variar. En algunos casos queda mejor aplicar el modo Valor o Tono.

Cualquier duda usen los comentarios! o muestren como les quedaron sus trabajos

Tags: agua, GIMP, imagen, marca
Posted in Manipulación de imágenes | No Comments »

Convierte tu foto a caracteres, en GIMP

Friday, February 26th, 2010

En este simple tutorial van a aprender a convertir una imagen en caracteres, es más fácil de lo que parece, en unos pocos pasos lo van a tener listo

Lo primero, obviamente, seleccionar una imagen desde tu PC o de algún banco de imágenes; y también tener preparado algún texto (lo más extenso posible) cuyo contenido sea alusivo a la imagen o simplemente un texto aleatorio sin sentido.

Vamos a empezar abriendo nuestra imagen en GIMP, y luego en una capa superior pegamos el texto. Lo más recomendable es que el texto no tenga saltos de línea o “huecos” en blanco porque sino el resultado final no va a ser el mismo.

Imagen a caracteres GIMP

Para que la tipografía quede más “junta” es preferible modificar un poco el texto, teniendo seleccionada la capa de texto y desde la ventana de “opciones de herramienta” modificamos el espacio entre los caracteres y el espacio entre los reglones. (ver imagen)

imagen a caracteres GIMP

Una vez puesto el texto en su lugar, hacemos click derecho en la capa del texto y seleccionamos la opción “Texto a selección” ó “Alfa a selección” (dá lo mismo en este caso), ahora con el texto seleccionado hacemos foco en la capa de la imagen y vamos a Editar – Cortar (o simplemente “Ctrl + X”). Luego, agregamos una nueva capa, en la cual pegamos (Ctrl + V) lo que acabamos de cortar.

Finalmente borramos las capas iniciales (la del texto y la de la imagen) dejando únicamente la del texto pegado. Para que quede mejor el efecto final es conveniente agregar una capa color negro que sirva de fondo.

Imagen a caracteres GIMP

Tags: convertir, GIMP, imagen, texto
Posted in Manipulación de imágenes | 6 Comments »

Evitar que una imagen colapse un DIV

Tuesday, January 26th, 2010

Cuando tenemos un DIV con un ancho fijo y dentro de él colocamos una imagen que supera las dimensiones del DIV que la contiene, lo que sucede es que la imagen en cuestión colapsa y se sale de su elemento contenedor.

Usando la propiedad max-width lo que se logra es que la imagen no sobrepase un ancho prefijado y de esta manera que no colapse.

Ejemplo (con un div con borde verde):

la imagen desborda el div

imagen contenida dentro del div

Para empezar construimos un simple código HTML que nos va a servir para colocar el div junto a su imagen (usen una imagen de tamaño grande para notar mejor el resultado)

^?View Code HTML

 
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head>
<body>
 
<div id="a">
<img src="imagen.jpg" alt="imagen de prueba" />
</div>
 
</body>
</html>

Ahora si abren el archivo HTML en el navegador verían algo parecido a la primer imagen de arriba, es decir, la imagen en su tamaño completo colapsando al div contenedor. Lo que no verían sería el borde del div ya que hasta ahora no agregamos código CSS. Por eso lo siguiente es hacer el archivo style.css como sigue:

^?View Code CSS

#a{
	width: 400px;
	border: 4px dotted #0f0;
}
 
#a img{
	max-width: 400px;
	height: auto;
}

Y acá lo importante es como está usada la propiedad max-width, que como el nombre indica, le dice a la imagen el ancho máximo que puede tener, y también agregué la propiedad height: auto porque si a nuestra imagen en el HTML la declaramos con alto y ancho, entonces el max-width modificaría solamente el ancho pero como le damos height: auto entonces modificaríamos también el alto, para que no pierda su proporción inicial la imagen.

Tags: colapsa, CSS, desborda, div, html, imagen
Posted in Tutoriales | Tips | No Comments »

IMG to TXT

Sunday, January 3rd, 2010

IMG to TXT es una aplicación que desarrollé mientras practicaba PHP y la librería GD, consiste básicamente en subir una imagen y luego usando funciones como imagecolorat se convierte la imagen en un conjunto de caracteres de distintos colores formando la imagen original; me sirvió (y mucho) de guía estos sitios, muy recomendables:

SargentoWeb (más específicamente la sección de _php_gd)
ForosDelWeb (y su subforo de PHP)
PHPya
El libro “Desarrollo Web con PHP y MySQL” de Luke Welling y Laura Thomson

Por si le sirve a alguien para ejercitar, les dejo el código fuente explicado brevemente: DESCARGAR (es muy livianito, pesa nomás 17,9 KB el sitio completo)