Diseño para manazas

Navegadores, correo electrónico, sitios web, programas de intercambio, chat, navegación, diseño web, etc.

Moderador: alegsa

Responder
Catweazle
Mensajes: 35
Registrado: Vie Dic 06, 2013 5:57 am
Ubicación: España
Contactar:

Diseño para manazas

Mensaje por Catweazle » Jue Dic 12, 2013 3:26 pm

Lunapic (http://www160.lunapic.com/editor/) es un genial editor online que permite realizar los más complicados diseños de forma sencilla y semiautomática. Tiene más de 200 efectos de imagen y sobre todo permite efectuar retoques directos en imágenes animadas (redimensionar, rotular con más de 1000 diferentes fuentes, cambiar los colores y más) sin que estos pierden el movimiento. Para mostrar el funcionamiento, aquí algunos ejemplos:


Abrimos una imagen
Imagen


Acto seguido seleccionamos "Copy Image to Clipboard" (copia al portapapeles) en el menú "Edit" antes de pinchar en "Crop Image" (recortar), bien en el menú "Edit" o bien pinchando en el pequeño rectangulo arriba a la izquierda de la página
Imagen


En la pantalla a continuación, seleccionamos el modo "Polygon/ Freeform" en el recuadro "Tool" y pasamos el puntero para seleccionar la silueta de las llamas y pinchamos en "Crop"
Imagen


Con lo cual obtenemos la imagen de la llama a la cual aplicamos "Fire Animation" en el menú "Animation" y veremos como las llamas cobran vida.
Imagen

Ahora hace falta pegar estas llamas otravez en su sitio, para esto pinchamos en "Edit" y seleccionamos "Swap Image with Clipboard" (intercambiar la imagen con la del portapapeles) con lo cual se saca la imagen previamente copiado allí y se copia las llamas animadas al portapapeles. Tenemos ahora en pantalla la imagen del principio de la chimenea. Vamos otravez a "Edit" y esta vez seleccionamos "Paste Image from Clipboard" (pegar la imagen desde el portapapeles) y nos aparecen las llamas animadas por encima de la imagen original, las arrastramos a su sitio haciendolas coincidir y luego las pegamos con "Apply Pasted Image".
Imagen


Observamos que al pegar tenemos una chimenea animada, pero al intercalar las fotogramas, Lunapic ralentiza mucho la animación, esto lo ajustamos yendo al menu "Animation" y en "Edit Animation Setting" nos aparece una pantalla con diferentes opciones donde ponemos la velocidad ("Speed") a la velocidad deseada (los 20 ms por omisión valen), lo aplicamos y ya esta lista la imagen
Imagen




Resultado final
Imagen

Otra forma de animar partes


1 cargar imagen
Imagen


2 como en el ejemplo anterior copiarlo al portapapeles "Edit" > "Copy Image to Clipboard"


3 aplicar en "Animation" > "Groovy Rainbow"
Imagen


4 en "Edit" > "Swap Image with Clipboard" para volver a la imagen original


5 seleccionamos "Crop Image" y esta vez en "Tool">"Circle" y recortamos (Cutout) los ojos, primero uno y lo repitamos con el otro
Imagen


6 vamos otravez a "Edit">"Swap Image with Clipboard" para sacar la imagen animada y a continuación "Edit" > "Paste image from Clipboard"


7 Ajustamos la imagen con los ojos recortados sobre la animación y pegamos


8 Ajustamos la velocidad en "Animation" >" Edit Animation Settings" a 10 o 20 ms y obtenemos este resultado
Imagen

Seguimos


Vamos a convertir la imagen de la bruja en un avatar redondo


1 como en los ejemplos anteriores copiamos la bruja al portapapeles y en "File" elegimos "New Blank Image" y aparece un lienzo blanco


2 en "Edit" pinchamos en "Resize Image" (redimensionar imagen) para poner el lienzo al tamaño de la bruja (230x230 pixeles)


3 con "Crop Image" recortamos un círculo aproximadamente en el centro del lienzo, dejando algo de espacio entre el círculo y el borde y lo cortamos con "Cutout"


Imagen


4 como antes "Swap Image with Clipboard" y Paste Image from Clipboard" para pegar el lienzo encima de la bruja, pero esta vez después de ajustar el lienzo con la bruja seleccionamos en "Edge Fade" 5 pixeles para difuminar los bordes del lienzo y pegamos
Imagen


5 Observamos que Lunapic ha difuminado todos los bordes, tanto dentro del círculo como también el borde exterior del lienzo, por esto hemos dejado algo de espacio para recortar el borde exterior con "Crop image" > "Tool" > "Rectangle" (por omisión) y pinchando en "Crop" dejando sólo el círculo con la bruja.


6 después de ajustar otravez la velocidad de la animación, vamos a "Edit" > "Transparent" y esto nos lleva a la función de poder elegir el color que queremos convertir. Pinchamos en el borde blanco que acto seguido se convierte en transparente


7 en "Edit" ahora elegimos "Auto Crop Image", esto ajusta el fondo transparente automáticamente al tamaño de la imagen


8 una última vez a "Edit" y "Resize Image" y ajustamos la imagen al tamaño del avatar requerido, ponemos 120x120 pixeles y ya tenemos el avatar


Imagen


Tenemos que hacerlo de esta manera, ya aunque Lunapic permite editar directamente una imagen animada, tiene algunas limitaciones y algunos retoques no son aplicables directamente, por ejemplo no se puede recortarla en forma de círculo directamente sin que se pierde la animación, sólo se puede hacer de forma directa en rectángulo, y tampoco se puede añadir otra animación. Pero bueno, aun así sigue siendo genial


También muy útil: Igual que en el Gimp o en las últimas versiones de Photoshop, Lunapic tiene una función de borrar de forma inteligente determinados objetos de la imagen de forma sencilla. Basta con seleccionar el objeto y pinchar en "Remove & inpaint" y el objeto desaparece sin rastro (si no es muy grande), ya que recorta el objeto y rellena el hueco con el color y estructura del fondo

Invito a experimentar con este programa y probar múltiples opciones que ofrece, sin miedo, ya que tiene la opción de deshacer lo hecho mediante miniaturas abajo en la página y así permite volver a cualquier imagen anterior.
Cabe mencionar que también permite editar vídeos (hasta 100 fotogramas) y entre otros, convertirlo en una animación en formato gif o incluso flash (swf)
PD Para compartir las imágenes online, la mejor opción, y más cómoda, es de usar Imgur ( http://imgur.com ) existen apps para navegadores Chrome y Firefox ( http://imgur.com/apps) que permiten, entre otros, subirlas y obtener el link, con bbcode incluido que sólo falta pegar tal cual aquí, simplemente haciendo clic con el botón derecho sobre la imagen y elegir "Upload to Imgur). No requiere registro y no borra las imágenes después de un tiempo, al contrario de otros
(Este tutorial es de creación propia)

soltectrillo
Mensajes: 3
Registrado: Mié Dic 25, 2013 7:09 pm

Re: Diseño para manazas

Mensaje por soltectrillo » Mié Dic 25, 2013 7:36 pm

Parece buena esta aplicación. La probaré para el diseño de mi página

Responder