RESOLUCIÓN DE IMAGENES

En esta práctica vamos a crear un cartel de una agencia de viajes, con dos imágenes.

La primera imagen

Nos dan una imagen, de tamaño 35 x 56 cm y de resolución 300 ppp y tenemos que pasarla a 14 x 28 cm y averiguar la resolución.
Los pasos son los siguientes:
                                                                                               

Primero pasamos las medidas de la imagen original a pulgadas, como está en cm se divide con 2,54.                                 Ancho > 35 : 2,54 = 13,78 pulgadas

Alto    > 56 : 2,54 = 22.05 pulgadas

Lo segundo se pasan igual las medidas a pulgadas, pero a la que los queremos poner como resultado final.                    Ancho > 14 : 2,54 = 5,51 pulgadas

Alto    > 28 : 2,54 = 11,02 pulgadas

Lo tercero multiplicamos las pulgadas de la medida original por la resolución que nos da.

Ancho > 13,78 x 300 = 4.134 pixeles

Alto     > 22,05 x 300 = 6.615 pixeles

Y por último, resolvemos la resolución dividiendo los pixeles de anchura entre pulgadas de anchura (de la medida a la que lo tenemos que pasar) y lo mismo con el alto.

Ancho > 4.134 : 5,51 = 750 Resolución

Alto    > 6.615 : 11,02 = 600 Resolución

La primera quedaría:

Ancho: 14 cm

Alto: 28 cm

Resolución: 750 (se coge la mayor resolución porque es para imprimir).

La segunda imagen

Nos dan una imagen, de tamaño 9 x 14 cm y de resolución 150 ppp y tenemos que pasarla a 17 x 27 cm y averiaguar la resolución como antes.

Los pasos son los mismos que antes:

- Primero                                Ancho > 9 : 2,54 = 3,54 pulgadas

                                               Alto > 14 : 2,54 = 5,51 pulgadas

- Segundo                               Ancho > 17 : 2,54 = 6,69 pulgadas
                                               Alto     > 27 : 2, 54 = 10,63 pulgadas

- Tercero                                Ancho > 3, 54 x 150 = 531 pixeles
                                               Alto    > 5,51 x 150 =  826,5 pixeles

- Por último                            Ancho > 531 : 6,69 = 79,37 Resolución
                                                Alto    > 826,5 ; 10,63 = 77,75 Resolución           

La segunda quedaría:
Ancho: 17 cm
Alto: 27 cm
Resolución: 79,37 

Cartel de la agencia de viajes y el logotipo

BOTONES Y EFECTOS

A partir de la página web Todo Photoshop he creado dos botones y dos efectos.

Botón de Metal

  

• Para hacer el botón de metal lo primero creamos un documento nuevo en Photoshop de 240 x 70 píxeles.
• En una nueva capa y usando la herramienta de selección rectangular creamos una selección que rellenamos con la herramienta de degradado con blanco y negro.
• Luego creamos un rectángulo más pequeño en el medio con la herramienta de selección y creamos un nuevo "canal alfa" pintamos esta selección de color blanco, a este canal le aplicamos un desenfoque gaussiano y luego modificamos los niveles.
• Seleccionamos el "canal alfa", creamos una nueva capa y rellenamos la selección con un degradado con blanco y negro.
• Creamos una nueva capa y modificamos la selección anterior con contraer a 2px y rellenamos esta selección con otro degradado con el color frontal que queramos y blanco de color de fondo. A esta selección le agregamos un contorno interior negro.
• Por último hacemos una nueva capa y usando la selección anterior la   recortamos con la herramienta de selección rectangular (+Alt), eliminando   así la parte inferior. Contraemos la selección 2px y rellenamos con degradado y duplicamos la capa para rotarla 180º y posicionarla debajo. 

Botón Web

  

• Para este botón creamos un documento y rellenamos el fondo de color gris claro. En una nueva capa creamos un óvalo con con la herramienta elipse y lo llenamos con un color gris algo más oscuro que el fondo anterior.

  

• Con la selección de la capa anterior calamos aplicando 4px de valor. Luego contraemos la selección otros 4px. Invertimos la selección y la rellenamos de color negro. Cargamos la seleeción de la capa del elipse, la invertimos y borramos con esa selección la capa que rellenamos de negro. Bajamos la opacidad de la capa un 70%.

  

• Creamos una nueva capa y cargamos la selección del óvalo, movemos la selección 10px hacia abajo y 10px a la derecha e invertimos la selección. Con esa selección mientras mantenemos presionadas las teclas Shift+Ctrl+Alt hacemos clic en la capa del óvalo y obtendremos la intersección, luego contraemos la selección 4px y calamos con un valor de 2px. Rellenamos con color blanco.

  

• Creamos otra capa y vamos a Filtro - Interpretar - Nubes y luego a Filtro - Interpretar - Nubes de diferencia. Cambiamos el modo de la capa a sobre exponer color. 

• Cargamos la selección del óvalo, invertimos y borramos lo que sobra.

• Cargamos la selección del óvalo y elegimos el color frontal blanco  y contorneamos por fuera a 2px. Modificamos el tono y  saturación con la casilla colorear activa.

        Para terminar le añadimos una sombra paralela.

Efecto Abstracto

• Lo primero creamos un documento de 400 x 400 px y aplicamos un degradado circular con los colores que queramos.
• Podemos crear en la imagen unos cuantos destellos.
• Vamos a Filtro-Relieve y ponemos de altura 25 y de cantidad 500.
• Podemos jugar con la saturación de la imagen hasta que quede como nosotros deseamos.

Efecto de papel roto

  

• Para crear este efecto primero abrimos la imagen en la que aplicaremos el efecto.
• Creamos un nuevo documento del mismo tamaño que la imagen original. En este archivo creamos una selección con la herramienta de selección rectangular, que cubra el área que vamos a visualizar de nuestra imagen original, y la rellenamos de negro.
• Duplicamos el archivo que acabamos de hacer y le aplicamos el filtro Interpretar - Nubes de diferencia dos veces. Guardamos el archivo en PSD.
• Seleccionamos el documento con el rectángulo negro y aplicamos el filtro Distorsionar - Desplazar con una escala horizontal de 20%, una escala vertical de 10% y el mapa en estirar, para luego cargar el archivo que guardamos anteriormente.
• Invertimos la imagen y la copiamos. Deseleccionamos todo e invertimos otra vez.
• Desplazamos y desenfocamos la imagen aplicando el filtro Otro - Desplazamiento con escala horizontal 5, vertical 7, con la opción de repetir píxeles activada. Aplicamos desenfoque gaussiano con un valor de 5 píxeles.
• Pegamos la imagen que copiamos en el paso 5 y cambiamos su modo de fusión a Trama.
• Por último copiamos y pegamos en este archivo nuestra imagen original.

IMAGENES 360º

Fotos usadas para la imagen 360º

Imagen 360º completa en linea.

 

También e utilizado el programa Dermandar

Para crearlo pinchamos en "create you panorama" y te saldran dos dibujos.

Uno en forma de "rosca" y otro en forma de media "O"

En este caso utilizaremos lo que pone "360º View" 

Se eligen las imagenes que quieres utilizar.

Nos saldran dos opciones.

1. Guardar: te mostrara la imagen panoramica

2. Aztualizar:

Por ultimo te da un cosigo para utilizar la imagen en la Web, pero debes ponerlo en el apartado de HTML

Y esta es mi imagen 360º

TRABAJO DE ANALISIS DE CROSS MEDIA

Para hacer mi trabajo, me basé en la empresa Nespresso. 
El programa que usé para crearlo fue Keynote.Paso a paso fui creándolo a base de Imágenes, tituos, enlaces..

- Para los titulos:

- Para las imagenes:

 

- Para los enlaces:

- Para los bordes de las imagenes:

BARRA DE MENUS

Archivo: tenemos las opciones como abrir, cerrar, guardar, guardar como..

Edicción: las opciones suelen ser, copiar, pegar, cortar, transicción, definir motivo..

Imagen: encontramos modo, ajustes, tamaño de la imagen, rotar..

Capa: Podemos hacer una capa nueva, duplicarla, borrarla, estilo de capa..

Texto: paneles, opciones de idioma..

Selección: Todo, deseleccionar, invertir, guardar seleccion, cargar seleccion...

Filtro: Enfocar, desenfocar, distorsionar, pixelar, ruido...

Vista: Ajuste de prueba, colores de prueba, aumentar, reducir, guias, bloquea guias

Ventana: Ajustes, capas, color, linea de tiempo, pinceles, estilos, trazos, herrramientas

Ayuda: nos ayuda en linea del photoshop

CALCULO DE REPRODUCCIONES Y CORTES

Antes de todo, hay que saber que cuando se reproduce una imagen, se suele reproducir o más grande o más pequeña, muy pocas veces al mismo tamaño que el original.
¿Cómo se calculan las reproducciones y los recortes?

*FR: Factor de reproducción.

*DR: Dimensiones reproducción

*DO: Dimensiones original

Esta fórmula se aplica por separado tanto en el ancho como en el alto de la imagen.
Luego lo que salga, se multiplica por 100 y da el tanto por ciento.
Para saber lo que sobra, generalmente se coge el número mayor si salen diferentes, que ha salido de las dos operaciones del FR y se multiplica por el ancho del original y por el alto del original.
La siguiente actividad lo he hecho con illustraitor.

Primero lo he escalado al 50% y para hacer la imagen más pequeña se ponen los resultados en An. y Al.

Y por ultimo al 200%

Un vez completados todos los pasos, se guarda en formato ai. ( Formato de Ilustrator)

Y también se guarda en PDF:

Y ahora reproducciones y  recortes.
Con el siguiente ejercicio he hecho reproducciones y recortes. He utilizado la siguiente plantilla de QuarkXpress.

Hay que calcular:

• Las dimensiones del encuadre: Las dimensiones donde se va a poner la imagen (cuadro)
• Las dimensiones de la reproducción: Son las mismas del encuadre.
• Las dimensiones del recorte: Parte que se elimina al recorte dicha imagen.

Se calcula, se recorta la imagen y por último se inserta la imagen en dicho encuadre:

OPTIMIZACION DE IMAGENES

Comparacion de imagenes guardadas en distintos formatos: (PNG, GIF, JPG, )

 

- Con la primera imagen del pajaro he hecho lo siguiente:

 Las dos estan guardads en Jpg. pero la segunda imagen la he guardado en baja calidad (1). 

 Se ven los pixeles y un poco descolorida.

          Jpg.  Buena Calidad                                                                                 Jpg. Baja Calidad

Luego las he guardado en Png. 

                  Png.                                                                                           Png. Entrelazado

 

Y por ultimo las he guardado en Gif. 

 Se puede ver claramente las diferencias entre el Gif compurServe y el Gif que es la segunda. El Gif compurServe se ven los pixeles y desenfocado, tiene baja calidad, a diferencia de la segunda.

      Gif. CompurServe                                                                                             Gif.

- La segunda imagen lo que he hecho es ponerle el fondo transparente y la he guardado en Jpg.

Como Jpg. no admite transparencia, cambia por defecto la transparencia por un blanco crudo. A la misma foto le he puesto la calidad al 1.

Esta imagen está mas borrosa, porque es a la que la e bajado la calidad al










La misma imagen la he guardado también en Png. y Png entrelazado, el Png, si admite transparencia y de esta otra manera ya si que podemos ver el fondo blanco.

                     Png.                                                                                           Png. entrelazado

Png. entrelazado: si observas con el zoom, se notan mucho mas los pixeles de la imagen
Y para terminar esta imagen tambien la he guardado en Gif. la cual, también admite transparencia.

         Gif.                                                                                                     Gif.CompurServe:   

En esta imagen se ven 

 los pixeles mas grandes

Y por ultimo con la tercera imagen, que es una imagen clipart.

La he guardado en Jpg. y luego la he vuelto a guardar otra vezde la misma manera pero en este caso en baja calidad.

                  Jpg.                                                                                                         Jpg. Baja Calidad

Despues las he guardado en Png y Png. entrelazado

Y por ultimo la misma imagen guardada en Gif. y Gif. CompurServe