Crea tu nombre en Captcha


Formato:
[16:9] | [4:3] | personalizado
Ancho de la imagen (100/800):

Alto de la imagen (30/600):
Fuente: 
añadir sombra:

Tamaño de la fuente:
Posición del texto:
Automática - Manual -
Posición:
Posición X: 
Posición Y: 
Reset X/Y
Separación entre letras:
Automática - Manual - Separación: 
Tipo de variación: 
Variación: 
Ángulo:  Aleatorio: 
Líneas verticales:
Número de líneas:  Grosor:  Aleatorio: 
Líneas horizontales:
Número de líneas:  Grosor:  Aleatorio: 
Colores:
Fondo:
degradado hasta:

Letras:
degradado hasta:
aleatorio hasta:


Líneas:
aleatorio hasta:
Tipo: 
Compresión png: 
Calidad jpeg: 

Crea tu nombre en Captcha Info.

Este generador de captcha es un generador de imágenes dinámicas, que no debe usarse para un sistema captcha real. Usar un sistema captcha con imágenes guardadas no es la mejor idea. Sé que parece contradictorio, un generador de imágenes captcha que no sirve para usarlo como sistema captcha real. Bueno, en realidad sí que sirve, pero repito. No es la mejor idea.

¿Entonces que sentido tiene?. Pues es una forma fácil y rápida de crear visualmente imágenes que nos pueden servir para diferentes usos.

- Para la cabecera de una página web.

Cabecera para página web generada en phpyjavascript.com Nombre en Captcha
Cabecera web generada en phpyjavascript.com

- Para un menú web basado en imágenes.

- Para el encabezado, cortinillas o transiciones en tus vídeos.

Cortinilla para vídeo generada en phpyjavascript.com Nombre en Captcha
Cortinilla/Título “The End” para vídeo generada en phpyjavascript.com

 

- Para fondo de pantalla en tu PC, tablet o teléfono móvil.

Fondo de pantalla generado en phpyjavascript.com Nombre en Captcha
Fondo de pantalla generado en phpyjavascript.com

 

– Y me imagino que para muchísimas cosas más, que seguro que se te ocurren cuando veas sus posibilidades.

Le he llamado generador de captcha por su similitud con los captcha.

Aquí pongo un vídeo donde explico y muestro el funcionamiento del generador de imágenes captcha, por si no te apetece leer todo el rollo de aquí abajo. :)

Vamos ya con la Info.

Dimensiones de la Imagen

Aquí puedes elegir entre tres opciones:

1ª.- [16:9] Los sliders quedan anclados entre sí para ajustarse automáticamente a la proporción de dieciséis novenos, y cuando cambies un valor en cualquiera de los dos cuadros de valores, el otro cambiará a su valor proporcional. Así si en Ancho pones 480, el valor de Alto se pondrá en 270. Y si pones por ejemplo 360 en Alto, el valor de Ancho cambiará a 640.

2ª.- [4:3] Los sliders quedan anclados entre sí para ajustarse automáticamente a la proporción de cuatro tercios, y al igual que con [16:9], cuando cambies un valor en cualquiera de los dos cuadros de valores, el otro cambiará a su valor proporcional. Así si en Ancho pones 480, el valor de Alto se pondrá en 360. Y si pones por ejemplo 480 en Alto, el valor de Ancho cambiará a 640.

3ª.- [Personalizado] Los sliders quedan libres entre sí para permitir cualquier proporción, esto es útil para poder hacer imágenes más altas que anchas, como para fondos de pantalla de móviles o tablets, o para hacer una imagen con poca altura y muy ancha, como para un banner o la cabecera de una web. Así podríamos hacer por ejemplo una imagen de 600 píxeles de ancho por 150 píxeles de alto, o una de 250 de ancho por 600 de alto.

Las dimensiones tienen un límite de entre 100 y 800 píxeles de ancho y entre 30 y 600 píxeles de alto, creo que es suficiente para cubrir la mayoría de las necesidades.

Fuente

En este momento que estoy escribiendo esto, hay 72 fuentes entre tipos y estilos. Esto es así porque hay algunos tipos que tienen diferentes estilos, como “Bold” (grueso o negrita), “Extended” (ancha o grande), “Italic” (itálica o cursiva), y alguno más. Tienes que tener en cuenta que no todos los tipos de fuente soportan acentos, cedilla, eñe, y símbolos de arroba y euro. Por defecto está seleccionada “J.D. Handcrafted” que soporta acentos, cedilla, eñe, y arroba, (euro no). Igual algún día pongo algunos tipos más.

Podemos también añadir sombra al texto, con una separación de entre uno y cinco píxeles. Por defecto viene activada con un píxel de separación.

También podemos cambiar el tamaño de letra entre 10 y 200, introduciéndolo en el cuadro de valor o arrastrando el slider. Por defecto viene con un tamaño de 40 píxeles.

Posición del texto

Puedes elegir entre dos opciones:

1ª.- [Automática] Donde podemos elegir en que posición de la imagen se sitúe el texto. Hay nueve posiciones entre Arriba, Centro, y Abajo, e Izquierda, Centro, y Derecha.
2ª.- [Manual] Donde podemos posicionar el texto con mucha más precisión, ya que podemos mover el texto píxel a píxel cambiando los valores de X e Y en sus cuadros de valor, y además podemos poner valores por fuera de las dimensiones de la imagen, quedando así el texto recortado. Esto puede servir para hacer unos efectos muy chulos. Pero ves con cuidado con esos valores, ya que no he puesto un límite, y el texto puede salir completamente de la imagen.

Separación entre letras

Aquí tenemos también dos opciones:

1ª.- [Automática] Donde la separación entre letras será la que tenga por defecto esa fuente.

2ª.- [Manual] Donde la separación la podemos cambiar a nuestro antojo. Tampoco hay límite para este valor, así que se puede poner un valor negativo, invirtiendo así el orden de las letras. En alguna ocasión esto hace un efecto interesante.

Variación entre letras

Con variación entre letras me refiero a variación en altura (en Y), ya que la variación entre letras en X es la separación, que ya la hemos visto antes.

Aquí tenemos cinco opciones para elegir:

1ª.- [Horizontal plano] La que viene por defecto. El texto tal cual es, con todas las letras a la misma altura (sin variación en Y).

2ª.- [Aleatorio] Donde podemos poner un valor y las letras variarán en altura desde su posición natural menos ese valor y su posición natural mas ese valor de forma aleatoria. Me explico. Si el texto está en 100 píxeles en Y, y pones 20 en la variación, las letras variarán entre 100-20=80 y 100+20=120. Así que las letras se colocarán entre 80 y 120 píxeles en altura de forma aleatoria, y esos valores cambiarán cada vez que generes una nueva imagen, así que si el resultado no te satisface, le vuelves a dar a generar hasta que salga una combinación que te guste.

3ª.- [Zig Zag] Esta opción es parecida a la de aleatorio, pero los valores de variación se alternan y son absolutos. Me explico. Si el texto está en 100 píxeles en Y, y pones 20 de variación, las letras se posicionarán alternándose en 80 y 120 píxeles de altura, haciendo un zig zag. 80,120,80,120…

4ª.- [Diagonal parriba] Jeje, parriba, jeje, me río yo solo… Pues aquí la variación se aplica restando la cantidad introducida a la posición en altura de las letras, letra a letra, quedando un efecto divertido, ya que las letras se van hacia arriba en diagonal. De ahí el nombre “Diagonal parriba”.

5ª.- [Diagonal pabajo] Sé que no hace falta que te explique que hace esta opción, así que no te lo explico.

Ángulo de las letras

Aquí podemos variar el ángulo de las letras, ya, ya sé que es obvio, pero creo que alguien habrá pensado que varia el ángulo del texto. No es así. Varia el ángulo de las letras una a una. Con número positivo las inclina hacia la derecha (sentido horario), y con número negativo hacia la izquierda (sentido anti-horario). Y marcando aleatorio, si has puesto una inclinación de 15 grados pues variarán aleatoriamente entre 15 grados a la izquierda y 15 grados a la derecha.

Líneas

Aquí tenemos líneas verticales y horizontales. La posición de las líneas siempre es aleatoria, las verticales comienzan en cualquier punto del borde superior y finalizan en cualquier punto del inferior, e igual pasa con las horizontales, comienzan en cualquier punto del borde izquierdo y finalizan en cualquier punto del derecho.

Se les puede asignar un grosor distinto a las líneas verticales de las horizontales, y además si seleccionas aleatorio, el grosor variará aleatoriamente entre 1 y el valor introducido.

Recuerda, la aleatoriedad es para el grosor, no para el número de líneas, que siempre serán las que pongas.

Colores

Podemos personalizar los colores del fondo, las letras, y las líneas. Tenemos dos casillas de color, la primera o principal, que es la que contiene el color que se asignará al elemento en cuestión, y la segunda, que es la que contiene el color hasta donde llegará el degradado o la aleatoriedad, si la casilla correspondiente está marcada.

Tipo y compresión

Podemos generar la imagen en tres tipos distintos, PNG, JPG y GIF. La elección de uno u otro tipo dependerá del uso que le quieras dar.

De hecho, creo que lo normal es la opción que he puesto por defecto, PNG con compresión a nivel 9. Lo explico.

El formato PNG tiene 9 niveles de compresión, y a diferencia del formato JPG, PNG no tiene pérdida de calidad. Lo único que con el nivel 9, que es el más comprimido tarda más en generar la imagen y ocupa más espacio en disco (pesa más), pero con la misma calidad. Fíjate, una imagen de 320×180 píxeles con un texto y colores degradados, en nivel de compresión 9 ocupa unos 27 KB. y la misma en nivel 0 ocupa unos 173 KB.

Con el formato JPG podemos conseguir que nuestra imagen pese menos, pero pagando un precio a cambio. En cuanto menos ocupa, peor se ve. El formato JPG crea una aberración en el color, y en cuanto más comprimida está esa imagen, menos pesa pero más se aprecia esa aberración. La misma imagen que en el caso anterior:

– Con una calidad del 100% ocupa unos 47 KB.
– Con una calidad del 90% ocupa unos 21 KB.
– Con una calidad del 80% ocupa unos 14 KB.
– Con una calidad del 70% ocupa unos 10 KB.
– Con una calidad del 60% ocupa unos 9 KB.

Y con el formato GIF tampoco tenemos pérdida de calidad, igual que con el PNG, pero ocupa más que el PNG con nivel de compresión 9, estaríamos hablando de unos 40 KB. de peso para la misma imagen. Pero nos podría interesar tenerla en GIF si queremos hacer una animación GIF (GIF animado). Si buscas, hay multitud de herramientas online gratuitas para crear Gifs animados. Igual con el tiempo hago la mía propia, pero de momento usaré las que hay por ahí.

Bueno, ya hemos visto que sin pérdida de calidad el ganador es PNG.

– PNG compresión nivel 9 27 KB.
– GIF 40 KB.
– JPG calidad 100% 47 KB.

Y si estamos dispuestos a sacrificar algo de calidad podemos bajar el peso de la imagen con el formato JPG. Hay que tener en cuenta que estas diferencias de peso aumentan o disminuyen cuando aumenta o disminuye el tamaño en píxels de la imagen, y esas pruebas las he hecho con una imagen relativamente pequeña (320×180).

Espero que te haya sido de utilidad el Generador de imágenes Captcha.
Si quieres ver más vídeos súper chulos como este de aquí arriba, puedes entrar en mi canal de YouTube:
https://www.youtube.com/channel/UCRVYgvP93NzjmuKVUarJ79A
Y si te parece también te puedes suscribir y le puedes dar a “Me gusta”. -> Me gusta PHP y Javascript.com YouTube

Si te ha gustado, lo puedes compartir.