Tuto 35: Superpon Imagen/ Overlay Image

Tuto 35

Para este tutorial vamos a hacer algo diferente. Vamos a Crear un lienzo/canvas.

El lienzo sera de 400×400, y pondremos la opcion de Transparente/transparent.


Tambien utilizaremos las siguientes imagenes, que TIENEN que estar guardadas en sus dispositivos (celular o computadora)


Antes de empezar hay que saber unas cositas.
Vamos a usar un lienzo transparente, vamos a empezar desde 0 pero cuando ustedes practiquen pueden empezar con un lienzo del color deseado. Ese color sera su fondo/background para su firma/imagen.

Tambien si tienen alguna imagen que quieran usar como background/fondo la pueden subir primero con el URL o desde su dispositivo y usar una segunda imagen que TIENE que estar en su dispositivo guardada.

Bueno tal vez se estan preguntando que vamos a hacer?
Lo que haremos es encimar o pegar imagenes.

Y como haremos esto?

Con la tercera opcion bajo la pestaña de avanzado, se llama “superpon imagen” o en ingles “Overlay Image” (circulo azul)

Cuando recien presionamos la opcion esto es lo que veremos en la parte izquierda de la pantalla.

Vemos que tenemos la opcion de “choose file” o en español seria escojer imagen. Y luego el boton de cargar/upload.

Vamos a presionar “choose file” (circulo azul)

Esto nos llevara a las imagenes que tenemos en nuestro dispositivo. Vamos a escojer la imagen azul que estamos usando para practicar. Que es la siguiente.

Una vez escojida nos llevara de regreso al sitio. Y ahora va a aprecer una letras con la direccion de la imagen dentro de la cajita que antes decia “choose file”
Presionen “Cargar” o en ingles “Upload” y listo la imagen se va a subir.

Al subirse, la imagen subida aparece donde estan las imagenes. Y nos aparecen varias opciones en la parte izquierda.


En español

2 Me gusta

Y asi se ve, notese que la imagen subida (dependiendo del tamaño de la imagen que usen) es mas grande que nuestro lienzo.

Eso lo podemos solucionar con la primera opcion de “Resize Frame” o en español “Redimensionar marco”

Movemos la barrita hacia la izquierda para hacerla mas pequeña y hacia la derecha para mas grande.
En este caso necesitamos hacerla mas pequeña.

Quiero que noten algo.
Nuestra imagen es mas ancha que nuestro marco.

Y eso esta perfectamente bien.
Para este ejemplo NO necesito TODA la imagen.
La podemos encimar y al aplicar los cambios se va a recortar para quedar del tamaño del lienzo.
Al hacer esto vamos a perder parte de la imagen. Si quieren TODA la imagen entonces suban la imagen primero en lugar de crear lienzo.

La imagen la pueden mover con tan solo presionarla y sostener.

Esta imagen me gusta mas la parte de abajo. Y entonces voy a alinear las esquinas de la imagen con las del lienzo y aplicar los cambios cuando esten bien alineadas.

En este caso la imagen usada era rectangular y el lienzo cuadrado.
Hay partes que no van a quedar perctectas.
Hize la imagen un poco mas grande para que alcanzara a cubrir todo el lienzo. Siempre dejando las dos esquinas de abajo alineadas para guiarme.
Pero ustedes si quieren pueden solo ensimarlo o usar cualquier esquina que quieran guardar. Recuerden la imagen tiene que cubrir todo el lienzo.

Al usar las esquinas de la izquierda de abajo quiere decir que la parte de la imagen que mas tendre va a ser la parte de la izquierda de abajo.

Aplique los cambios y asi quedo.


Notese que ya no tengo toda la imagen original, ahora solo tengo una parte que quedo del tamaño del lienzo.

2 Me gusta

Para este ejemplo, voy a volver a presionar el overlay/superpon.

Voy a volver a escojer una imagen. (Choose image) Pero esta vez sera la imagen de la monita. Esta es la que habias echo transparente en la tarea.

Notese que no sale la monita completa. Asi que tendremos que hacerla mas pequeña. Como a la primera usando el Resize frame/Redimensionar marco.

Algo que paso cuando la subi fue que note que alrededor de la monita habia quedado esta linea blanca que no se borro cuando la hize transparente.

Entonces que hize? Guarde en mi dispositivo el lienzo que hize con la imagen azul. Una vez guardado subi la monita para recortarla un poco y que ya no hubiera esa linea.

Ya recortada la guarde en mi dispositivo y volvi a subir mi lienzo que ya tenia listo con la imagen azul.

Ahora si.
Una vez subida. Hize la imagen mas pequeña con el “resize frame” o “Redimensionar marco” (circulo azul)

Pero ustedes acomodenla como quieran mas grande o pequeña.

Tambien podemos hacerla mas transparente para que paresca parte de la primera.
Usando la segunda opció que dice “set look through” o
“Ajuste de opacidad” (circulo morado)

Solo tienen que mover la barrita hacia la izquierda para hacerla mas invisible y a la derecha para hacerma mas visible.


Para mi ejemplo la deja todo hasta la derecha por que la quiero bien visible.

Tambien pueden “girar” la imagen.
Usando la tercera opcion que dice “rotate overlay” (circulo azul)


Solo tienen que mover la barrita a la izquierda y la imagen se movera hacia la izquierda. Si se fijan hay unos numeritos justo debajo de la barrita…esa cambia de numero para reflejar los grados que se estan moviendo. (La imagen empieza en 0) En este caso a la izquierda son grados negativos. Si saben el grado que quieren lo pueden escribir directamente en la cajita.

A la derecha son los grados positivos. Cuando movemos la barrita se mueven/gira la imagen a la derecha.

Este es bueno si que queremos poner detallitos en las esquinas de la imagen.


Pueden agregarle Sombra/shadow a su imagen. Y escojer el color que quieran, igual que cuando ponen sombra al texto. (Circulo naranja)

O pueden hacerle “swap” con tan solo seleccionar la cajita donde dice swap.
Lo que hace swap es que cambia la imagen que esta atras para adelante. Y la de adelante se convierte en el fondo. (Circulo rojo)

Al seleccionar swap salen las opciones del circulo verde que dicen “overlay” pero ignorenlas.

Cuando esta como la quieren applican/apply los cambios y listo.
Tenemos una imagen/firma nueva. Asi me quedo a mi.

7WIbQRPxacdN

Nota: tambien pueden subir la imagen azul de nieve directamente con url/dispositivo y redimensionarla y luego usar el overlay/superpon para ponerle la monita arriva.
Y asi quedaria.
Jr25JT219ssa

Nota2: despues que ya las tengan asi pueden agregarle borde o texto. O como la quieran arreglar. Si quieren agreguen mas cosas con superpon/overlay.

2 Me gusta

Gracias manta un tuto muy interesante ahi la llevamos paso a pasito
linda semana

2 Me gusta

Manta aca esta mi tarea solo que se me olvido borrar las rallitas de la imagen de Elsa, disculpe usted maestra :apple:

oie_m531E6lwcy15

1 me gusta

Manta aqui mi tarea espero y este bien

2 Me gusta

Cualquier duda me preguntas. Puede que se me olvide algo o errores de dedo asi que si tienes dudas me preguntas.

Que linda Manta. I’ll let it gooo, por esta vez :joy:

Muy bien. Le cambiaste el fondo :+1:

Gracias maestras Manta, seguro fue por la manzana :joy:

Gracias manta
Asi es manta use otro fondo a mi me gusto como quedo

1 me gusta

Te quedo super bien. Me acuerdo que me preguntaste de este y de como poner el fondo del color que querias. Y pues ves en este esta todo. Puedes poner el color o imagen de fondo que quieres.