GUÍA 10 Tema: Creación de Galerías WEB y PDF, Gif animados.

Transcripción

1 89 Edición Fotográfica. Guía 10 Facultad: Ciencias y Humanidades Escuela: Comunicaciones Asignatura: Edición Fotográfica. GUÍA 10 Tema: Creación de Galerías WEB y PDF, Gif animados. Contenidos Uso de otras acciones semiautomáticas con la ayuda de Bridge: Galerías Web y PDF así como también para la elaboración de gif animados. Objetivo Específico Que el alumno realice una recopilación de todos sus trabajos utilizando las herramientas de Photoshop para crear galerías Web y PDF. Materiales y Equipo Guía Número 10 Traer imágenes en formato jpg, de cada uno de los trabajos realizados durante el ciclo tanto para el laboratorio de Edición fotográfica, como para la clase teórica. Introducción Teórica Uso de opciones semiautomáticas Photoshop le permite realizar tareas por medio de opciones que ya vienen preparadas para que Ud simplemente seleccione algunas opciones por medio de Adobe Bridge que s una aplicación multiplataforma incluida con los componentes de Adobe Creative Suite. Ud puede utilizar Adobe Bridge como un explorador que le ayuda a encontrar, organizar y examinar activos para crear contenido de impresión, Web, vídeo y para dispositivos móviles. Puede iniciar Bridge desde la barra de control de Photoshop haciendo clic en el segundo ícono de izquierda a derecha. Desde Adobe Bridge, puede: Gestionar archivos de imagen, vídeo y audio: previsualizar, buscar, ordenar y procesar archivos en Adobe Bridge sin abrir aplicaciones individuales. También puede editar metadatos para archivos y utilizar Adobe Bridge para colocar archivos en sus documentos, proyectos o composiciones. Gestionar sus fotos. Realizar tareas automatizadas, como comandos por lotes.

2 Crear una Galería Web Edición Fotográfica. Guía 10 Una galería de fotografías Web es un sitio Web con una página principal con imágenes en miniatura y páginas de galería con imágenes en tamaño completo. Cada página contiene enlaces que permiten al visitante navegar por el sitio. Por ejemplo, cuando un visitante hace clic en una imagen en miniatura de la página principal, la imagen en tamaño completo asociada se carga en la página de la galería. Utilice el comando Galería de fotografías Web para generar automáticamente una galería de fotografías Web a partir de un conjunto de imágenes Guarde los archivos de imagen en una sola carpeta. 2. Los nombres de las imágenes deben estar enumerados en el orden que quieran que aparezcan en su Galería Web. 3. Abra Adobe Bridge y busque la carpeta donde tiene las imágenes. 4. Para abrir las preferencias de la galería Web deben hacer presionar Command+ F4 o hacer click en la opción Salida. 6. Seleccionar Galería web en el panel a la derecha y colocarle todas las preferencias que requiera para su Galería Web. 7. Indicar en ese panel derecho la carpeta donde se guardará. 8. Hacer click en guardar.

3 91 Edición Fotográfica. Guía 10 Si está utilizando Adobe Creative Suite CS3 los pasos a seguir son un poco diferentes: 1. Seleccione los archivos o carpeta que desee utilizar en Adobe Bridge. 2.Las imágenes aparecen en el orden en el que se muestran en Bridge. Si prefiere utilizar otro orden, cámbielo en Bridge. 3.Realice una de las siguientes acciones: En Adobe Bridge, elija Herramientas > Photoshop > Galería de fotografías Web. En Photoshop, elija Archivo > Automatizar > Galería de fotografías Web. Elija un estilo para la galería en el menú emergente Estilos. En el cuadro de diálogo aparece una previsualización de la página principal del estilo seleccionado. 4. (Opcional) Especifique una dirección de correo electrónico como información de contacto para la galería. 5. Elija los archivos de origen para la galería en el menú Usar. 6. Imágenes seleccionadas de Adobe Bridge Utiliza imágenes seleccionadas antes de abrir el cuadro de diálogo Galería de fotografías Web. 7.Carpeta Emplea imágenes de carpetas seleccionadas con los botones Examinar (Windows) o Seleccionar (Mac OS). Seleccione Incluir todas las subcarpetas para incluir las imágenes de todas las subcarpetas de la carpeta seleccionada. 8. Haga clic en Destino y, a continuación, seleccione una carpeta en la que almacenar las imágenes y las páginas HTML de la galería. Luego, haga clic en Aceptar (Windows) o en Seleccionar (Mac OS). 9. Seleccione las opciones de formato para la galería Web. Elija los elementos del menú Opciones para visualizar cada conjunto de opciones. 10. Haga clic en OK. Photoshop coloca los siguientes archivos HTML y JPEG en la carpeta de destino: Una página principal para la galería denominada index.htm o index.html, en función de las opciones de extensión. Abra este archivo en cualquier navegador Web para previsualizar la galería. Imágenes JPEG dentro de una subcarpeta de imágenes. Páginas HTML dentro de una subcarpeta de páginas. Imágenes en miniatura JPEG dentro de una subcarpeta de miniaturas. La función Automatizada para crear una galería Web funciona de manera diferente en Adobe Creatvie CS3 y CS4, en el primero se realizan las acciones directamente en Photoshop, sin embargo en el segundo se realiza todo desde Adobe Bridge pero el resultado es bastante similar.

4 Edición Fotográfica. Guía Presentación PDF También se puede crear presentaciones PDF de una manera sencilla, eligiendo la opción Archivo>Automatizar>Presentació n en PDF (si está trabajando con Photoshop CS3). En el cuadro de diálogo seleccione las siguientes opciones para crear una presentación PDF: 1. Haciendo clic en el boton Explorar y seleccionando las imágenes que desea en su presentación 2. Seleccione las opciones de salida que desee. 3. Seleccione las opciones de presentación que necesite. 3. Guarde el archivo. Si trabaja en CS5, la presentación PDF se realiza desde Bridge CS4 siguiendo los pasos a continuación: 1. Seleccione los archivos o carpeta que desee utilizar en Adobe Bridge. 2.Las imágenes aparecen en el orden en el que se muestran en Bridge. Si prefiere utilizar otro orden, cámbielo en Bridge. 3.Realice una de las siguientes acciones: 1. Guarde los archivos de imagen en una sola carpeta. 2. Los nombres de las imágenes deben estar enumerados en el orden que quieran que aparezcan en su Galería Web. 3. Abra Adobe Bridge y busque la carpeta donde tiene las imágenes. 4. Para abrir las preferencias de Salida PDF deben hacer presionar Command+ F4 o hacer click en la opción Salida. 6. Seleccionar PDF en el panel a la derecha y colocarle todas las preferencias que requiera para su Documento PDF. GIF ANIMADO Photoshop nos permite crear animaciones en imágenes, vídeo y flash. Nos vamos a centrar en las animaciones gif. Si lo piensas, una animación es una secuencia de imágenes estáticas, en la que cada una se muestra un tiempo concreto. Si los cambios entre imágenes son suaves, dará una sensación de fluidez y movimiento. En Photoshop jugaremos principalmente con la posición, visibilidad y efectos de los elementos. Por ejemplo, podríamos crear el siguiente banner:

5 93 Edición Fotográfica. Guía 10 Al hacerlo, en la parte inferior de la ventana de Photoshop se abrirá la barra de animación: De momento veremos esta barra, llamada Animación (cuadros). Para crear las animaciones, vamos creando cuadros. En cada cuadro variamos la opacidad, los efectos o la ubicación de los elementos. En este primer marco, colocamos los elementos como queremos que se vean al principio. Por ejemplo, si queremos que un elemento no sea visible ahora, pero los sea más adelante, reducimos su opacidad al 0%. O si queremos que se mueva de la posición A a la posición B, en este primer marco lo colocamos en la posición A. En la imagen anterior, tenemos solo un elemento. Cuando lo tengamos, creamos otro fotograma. Para ello, usamos el botón Duplicar los cuadros seleccionados. El cuadro será idéntico al anterior. Con el nuevo cuadro seleccionado, realizamos lo cambios que queramos en la imagen. Por ejemplo, queremos hacer desaparecer un elemento de la imagen. Así que vamos al panel Capas, y reducimos su opacidad a 0%. En este momento tendríamos dos cuadros. En uno los elementos están de una forma, y en otros de otra. Para crear una transición más suave, necesitamos fotogramas intermedios. Por ejemplo, para hacer desaparecer un elemento, podemos intercalar cuatro cuadros más, y que en cada uno se reduzca la opacidad un 20%. Esto no tenemos que hacerlo a mano, Photoshop lo hará automáticamente. Para hacerlo seleccionamos los dos cuadros entre los que queramos intercalar una animación, y pulsamos el icono Intercalar cuadros de animación.

6 Edición Fotográfica. Guía 10 Aparecerá un diálogo como el siguiente: En Cuadros para añadir, indicamos el número de cuadros intermedios que se generarán. Cuantos más cuadros, más suave será la animación, pero de mayor tamaño será el gif final. En Capas, marcamos si queremos que se muestren Todas las capas, o solo las seleccionadas. Y por último, marcamos los Parámetros que cambiarán, entre Posición, Opacidad y Efectos. En nuestro ejemplo, queremos cambiar solo la opacidad de la capa, y añadimos únicamente 4 cuadros. 94 Además, para que la animación sea fluida, el tiempo de los cuadros ha de ser breve. debajo de cada uno se muestra el tiempo que el cuadro será visible. Si hacemos clic sobre el tiempo, podremos cambiarlo. Observe que en la parte inferior, encontramos también controles de reproducción que nos permitirán ver la animación. En la esquina inferior izquierda encontramos el control de bucle. Podemos hacer que toda la animación se repita una vez, un número determinado de veces, o de forma infinita. Tenga en cuenta que si lo hace infinito, del último cuadro volverá al primero. Si no quiere que el cambio sea brusco, haz que el último cuadro sea igual al primero. Una vez que lo haya creado, es hora de guardarlo. Para ello vamos al menú Archivo y elegimos Guardar para web y dispositivos. En el diálogo Guardar para web y dispositivos nos aseguramos de elegir el formato GIF, ya que es el único que nos permite guardar animaciones.

7 95 Edición Fotográfica. Guía 10 Procedimiento GALERÍA WEB 1. Coloque las imágenes de todos los trabajos realizados durante el ciclo, en una carpeta que se llame Imágenes para Portafolio, dentro de una carpeta que se llame Guía 10, en su carpeta personal. 2. Prepare las imágenes colocando correctamente los nombres de cada trabajo y ordenándolas según el orden en el que quiere que aparezcan. 3. Si desea puede diseñar una imagen que sirva como portada para cada unidad para mejorar la calidad de su presentación. 4. Póngale la viñeta correspondiente a cada imagen. 5. Realice las correcciones y ajustes de enfoques, tonos, efectos etc. según la necesidad de cada una de las fotografías. 6. Cree y Guarde una acción a partir de los ajustes que haga en las imágenes. Guardela como acción g10 7. Utilice las opciones para crear una galería Web y una presentación PDF que contenga todos sus trabajos a manera de portafolio. 8. Guardelos apropiadamente dentro de la carpeta Guía 10 en sus documentos. GIF ANIMADO 1. Abra una imagen que desea animar 2. Haga copias de esa capa, y en cada una de ellas realice el cambio que desea generar en la animación del gif, cada capa debe tener un cambio, tantos como lo crea conveniente. 3. Cuando tenga las capas listas, abra la ventana de animación desde el menu ventana>animación 4. En el panel de capas, hag alas copias que necesita recuerde que debe tener la misma cantidad de capas en el panel de animación como en el panel de capas. 5. Cuando ya los tenga debe de crear la secuencia de esta manera: 6. En la primera capa del panel de animación debe estar activa (con el ojo activo), la primera capa del panel de capas y solamente esa. 7. En la segunda capa del panel de animación, debe estar active la segunda capa del panel de capas (recuerde el orden de la secuencia que desea generar), y así sucesivamente hasta terminar con todas las capas que tiene. 8. Modifique la parte de la visualización y reporducción del gif, lo usual es 0.10 fracciones de Segundo pero esto dependerá de la imagen que se trabajará y el movimiento que se desea obtener. Al mismo tiempo, puede modificar la forma de preoducción que puede ser, una vez, tres veces o una reproducción continua. 9. Guardar el gif animado de esta manera: menu archivo>guardar para web y dispositivos>gif>256colores>guardar.

8 Edición Fotográfica. Guía Recuerde guardar en su carpeta personal de la guía 10 el gif animado junto con la captura de pantalla en donde se vea el panel de capas y de animación visible. Referencias Bibliográficas Adobe Photoshop CS 5, Guía del Usuario. Adobe Photoshop CS 4, Guía de Usuario. La Biblia de Photoshop CS3, Laurie Ulrich Fuller, Robert C. Fuller; Ediciones Anaya Multimedia, España 2008.