CÁLCULO DE REPRODUCCIONES Y RECORTES

CÁLCULO DE REPRODUCCIONES Y RECORTES 

En esta entrada explicaré la forma de calcular la escala de la reproducción de una imagen a diferente tamaño y diferente encuadre. 

Normalmente en los tamaños de la imagen original no coinciden con el espacio reservado para su publicación, por lo que necesitamos hacer una ampliación del original de la imagen o por el contrario una reducción de la imagen.

También puede darse el caso de que el espacio reservado para la publicación no sea proporcional a la imagen original, entonces tendremos que hacer un encuadre de la imagen.

El encuadre es la selección que finalmente se mostrara en la imagen. Esto se utiliza para delimitar el punto de interés de la imagen. La zona que nos sobra se llama el recorte.

Para saber cuanto debe ampliarse o reducir la imagen es necesario conocer las dimensiones del ancho y el alto. Para ello utilizamos la siguiente formula:


Escala de la reproducción= Dimensiones Reproducción/Dimensiones Del Original

A continuación he colocado ejemplos de diferentes imágenes aplicando esta la formula:
 

En el segundo ejemplo se calcula los encuadres, dimensiones de reproducción y recortes según el cuadro destinado a la reproducción y apartir de la imagen original:

Imagen de CNICE

IMAGEN 360º

IMAGEN 360º

Para la imagen de 360º voy a utilizar estas imágenes:

Para crear la imagen de 360º utilizare la aplicación de DERMANDAR. Pinchas sobre "creat" y te saldrán las siguiente opciones:

Pinchas sobre la opción de 360º  y eliges las imágenes que quieres utilizar para crear la imagen. A continuación te creara la imagen 360º:

Una vez creada la imagen podemos subirla a la web, pinchando en "mi cuenta" y luego "mis panoramas" puedes ver el resultado final:

http://www.dermandar.com/p/cFcepb/classroom-360.

IMÁGENES PANORÁMICAS

IMAGEN PANORÁMICA

Para crear una imagen panorámica lo primero que tienes que hacer es realizar unas fotos, recordando dejar un poco de espacio entre cada fotografía para facilitar la unión de las imágenes.

Para la panorámica he seleccionado cuatro fotos:

Para crear la panorámica en Photoshop nos vamos al menu archivo y vamos hasta la opción automatizar y a continuación seleccionamos la opción Photomerge.

Photoshop abrirá los archivos aparecerán en el centro del listado, A continuación pinchamos ok y Photomerge empezara a unir las imágenes.

Alfinal obtendremos nuestra foto panorámica compuesto por las imágenes seleccionadas y en capas.

Como ultimo paso vamos al menu capa y le damos acoplar.

OPTIMIZACIÓN DE LAS IMÁGENES

OPTIMIZACIÓN DE LAS IMÁGENES

La optimización de las imágenes nos ayuda a presentar una buena calidad en las imágenes, para que su peso y velocidad de carga sean los más óptimos.

He preparado tres imágenes como ejemplo:

Imagen con fondo 

En la primera imagen he optimizado la resolución de la imagen al máximo y en la segunda imagen he bajado la resolución al mínimo, por lo cual se puede observar la diferencia de colores y su resolución. Finalmente las he guardado en formato JPG.

Las siguientes imágenes las he guardado en dos formatos PNG 24 y PNG 8, este tipo de formatos ayuda a la hora cargar la imagen en la página web. La primera imagen en formato PNG 24 se presentara una mayor velocidad a la hora de cargar la imagen y la segunda imagen con formato PNG 8 carga más lento y se pueden observar ligeros saltos de color:

Las siguientes imágenes las he guardado en formato GIF y GIF COMPURSERVE . Se pueden observar claramente las diferencias, el GIF COMPURSERVE está pixelado, presenta irregularidades y baja calidad en la imagen: 

Imagen con transparencia

 Al igual que las anteriores he optimizado la resolución al máximo de la primera imagen y la segunda he bajado su resolución al mínimo, con la diferencia de que contiene un fondo trasparente. Las he guardado en formato JPG, a diferencia de que el formato JPG no admite transparencias, por lo cual coloca un fondo grisáceo:

 También he guardado las imágenes en PNG 8 y PNG 24, a diferencia que el formato JPG el PNG si admite transparencias por lo que el fondo es transparente. La diferencia entre PNG 24 es que a diferencia de PNG 8 admite más colores:

 

Las siguientes imágenes las he guardado en formato GIF COMPURSERVE Y GIF, las cuales presentan las mismas características que los anteriores gifs:

 

Y por ultimo la imagen CLIPART, como las anteriores la primera la he guardo en formato JPG a máxima resolución y la segunda a baja resolución, en las cuales se puede apreciar la diferencia:

Estas en formato NPG24 y NPG 8, en las cuales se puede observar un aumento del brillo a diferencia del formato JPG:

Por ultimo GIF y GIF COMPURSERVE:

Las imagenes pertenecen a CNICE

ANIMACIÓN PHOTOSHOP

ANIMACIÓN PHOTOSHOP

Con photoshop  también se se puedn crear animaciones apartir de varios fotogramas. Con la ayuda de las herramienta de photshop "línea del tiempo". Lo más basico que debes saber es que se trabaja como cualquier photoshop, pero a la hora de guardar, hay que guardarlo en formato photoshop.

Trabajar con diferentes tipos de efectos creea un efecto de movimiento o al añadir transiciones a varias imagenes.  Ejemplo:

 

Este es mi propia banner de Volskwagen:

HERRAMIENTAS PHOTSHOP

HERRAMIENTAS P.S.

Herramienta Mover: Sirve para mover el contenido de la capa en la que estamos trabajando. Con esta herramienta podemos mover o bien la capa o el area seleccionada.

 

Marco Rectangular: Herrammienta que sirve para hacer selecciones cuadradas o rectagulares.

 

Marco Elíptico: Herrmienta para crear marcos elípticos.

Varita Mágica: Esta herramienta sirve para hacer selecciones rapidas de un área de un mismo color. Pulsando sobre la imagen selecciona el área de la imagen con un color continuo.

Herramienta Recortar: Es un tipo de selección cuadrada, editable una vez definida, que sirve para recortar la imagen, quedandonos con el area selecionado.

Cuenta Gotas: Con el cuenta gotas podemos seleccionar colores, de cualquier zona de la imagen, para colocarlos como color frontal.

Pincel: Este pincel nos sirve para dibujar a mano alzada sobre la imagen. Se disponen de varios pinceles, formas, grosor, con la posibilidad de ajustar la dureza trazo.

 Borrador: Sirve para borrar secciones de la imagen, borra sobre la capa que estemos trabajando y al igual que el pincel tiene diferentes tipos de trazo . Tiene dos formas de borrar como el modo lapiz que borra todo sin suavizado y el modo pincel que borra difuminando los bordes.

Bote de Pintura: Esta herramienta sirve para rellenar una capa entera o una área seleccionada de color.

Herramienta de Texto: Sirve para escribir un texto sobre una imagen, el texto se puede escribir con diferentes fuentes y color de letra seleccionado.

Lupa: Esta herramienta sirve para ampliar oreducir la imagen.

PÁGINAS LEGIBLES E ILEGIBLES

PÁGINAS LEGIBLES E ILEGIBLES

La ligibilidad del texto es decir la facilidad para leer el texto, es un factor importante a la hora de crear una página web, ya que es la forma en que interpretaran los lectores lo que este representado en la página web, ya sean textos, imágenes, etc.

 Una mala presentación dificultara la lectura y puede espantar a los lectore. En el caso contrario ayuda a una buena obtención de la información. Los factores que afectan a la legibilidad del texto es la estructura:  

• Jerarquía: Consiste en la diferenciación de distintos bloques de texto. Los cambios de tipógrafia ayudan a organizar el contenido de acuerdo con su importancia.

• Contraste:  Un buen contraste entre las letras y el fondo del texto hará a la vista, facil de leer y finalmente más legible. Un mal contraste provocara en el lector una mala experiencia a la hora de leer.

• Interlineado: El espacio entre líneas individuales  de texto es un factor esencial. No puede ser ni muy ancho ni muy estrecho.

• Espacio entre letra: Una buena distancia entre las letras ayuda a una lectura fluida.

• Longitud de línea: Una buena longitud de línea  es la que permite al usuario terminar una línea y saltar a la soguiente de manera natural.

 Ejemplo de página legible:

 

Ejemplo de página ilegible:

COPYLEFT Y LICENCIAS CC

COPYLEFT Y LICENCIAS CC

• Copyleft.

 El copyleft consiste en la protección los derechos de autor, con el objetivo de la libre distribución de copias o trabajos, exigiendo que si el documento se modifica se preserve los derechos de autor. Estos documentos se aplican a trabajos infórmaticos, obras de arte, musica, cultura, ciencia o culaquier trabajo que sea creativo.

Este tipo de documentos se aplicaca con el objetivo de la libre explotación sin impedimentos, copia y destribución de un trabajo, ofreciendola simpre con la licencia o contrato. Así cada propietario de cada copia pudiera:

1. Usarla sin ninguna limitación.
2. Ver como está echo el trabajo.
3. Redistribución cuantas copias se realicen.

• Licencias CC 

Las licencias Creative Commons es una organización sin animo de lucro, la cual permite compartir documentos gratuitos de carácter creativo.

Creative commons ofrece al autor una forma simple y fácil otorgar permiso al público en general para compartir  y usar su trabajo bajo los términos y condiciones que el autor crea necesario

Reconocimiento (by): Se permite cualquier tipo de explotación de la obra, incluyendola finalidad de comercial.

 
Reconocimiento - No comercial(by-nc): Se permite la generación de obras derivadas siempre que no se con animo de lucro. Tampoco se permite el uso de la original con fianlidades comerciales .

Reconocimiento - No comercial - Compartir Igual (by-nc-sa) : No se permite el uso comercial del documento, ni de los derivados, la distribución de las cuales se debe hacer con licencia igual a la que regula la original.

Reconocimiento - No comercial - SinObraDerivada ( by-nc-nd):  No se permite un uso comercial de la obra original ni la generación de las derivadas.

Reconocimiento - CompartirIgual (by-sa): Se permite el uso comercial de las obra y de las posibles obras derivadas, la distribución de las cuales se debe hacer con una licencia igual a la que regula la obra original.

Reconocimiento - SinObraDerivada (by-nd): Se permite el uso comercial de la obra pero no la generación de obras derivadas.