Objetivo. Ajustar las opciones de formato para conseguir un archivo ligero y con calidad dirigido a la posterior publicación web.

Transcripción

1 Ejercicio. Unidad 1. Guardar para Web Adobe Photoshop CS Práctica n 01 Objetivo. Ajustar las opciones de formato para conseguir un archivo ligero y con calidad dirigido a la posterior publicación web. Una vez tengas tu imagen abierta. 1. Haz clic en el menú Archivo. 2. Haz clic en Guardar para Web. Se abrirá el cuadro de diálogo de Guardar para Web. Observa que en primera instancia se muestra la imagen con los ajustes optimizados para un tamaño de archivo pequeño con una calidad aceptable. 3. Haz clic en la pestaña 2 copias. Se mostrará a la izquierda la imagen original y a la derecha la previsualización de la imagen comprimida. Al pie de la imagen podrás ver sus características de compresión: Prof. Blanco, Alberto Andrés 1 de 3

2 Adobe Photoshop CS Práctica n 01 Si no puedes ver la imagen completa puedes ajustar el zoom desde el desplegable en la esquina inferior izquierda de la ventana. 4. Modifica las opciones para lograr una mayor compresión, o para alcanzar mayor calidad. Puedes usar los ajustes predefinidos de Photoshop. Observa como el tamaño del archivo cambia según escojas un ajuste u otro. Para los formatos de archivo GIF y PNG puedes decidir los colores que se almacenarán sirviéndote de la paleta y los botones de configuración. Pulsa para añadir nuevos colores. Pulsa para eliminar existentes. Prof. Blanco, Alberto Andrés 2 de 3

3 Adobe Photoshop CS Práctica n Haz clic en la pestaña 4 copias para trabajar con diferentes modelos de ajuste a un mismo tiempo. Podrás crear 3 tipos diferentes de formatos para comparar entre ellos. 6. Cuando tengas un modelo optimizado y quieras guardarlo, haz clic sobre él para seleccionarlo. 7. Pulsa el botón Guardar y se abrirá el cuadro de diálogo de Guardar optimizado como Dale un nombre al archivo y pulsa Guardar. Prof. Blanco, Alberto Andrés 3 de 3

4 Ejercicios Tema 1: Introducción a Photoshop CS Ejercicios Unidad n 01 Ejercicio 1: Crear Imágenes con Fondo Transparente 1. Abre el archivo fondotransparente.psd de la carpeta ejercicios e intenta guardarlo para publicarlo luego en una página web. 2. Deberás eliminar el fondo rojo y convertirlo en transparente. Prof. Blanco, Alberto Andrés 1 de 1

5 Ejercicio. Unidad 2. Área de Paletas. Adobe Photoshop CS Práctica n 02 Objetivo. Aprender a utilizar y gestionar el Área de paletas. Si observamos el entorno de Photoshop veremos que en la esquina superior derecha podemos encontrar un cajón con pestañas. Es el Área de paletas. En este cajón podremos incluir todas las ventanas (o paletas, como se llaman en Photoshop) que queramos, para acceder mucho más rápido a ellas y que no ocupen espacio en el resto del área de trabajo. Para descubrir una paleta sólo hay que hacer clic sobre su pestaña: Veamos los pasos que hay que seguir para añadir las paletas que queramos en el Área de paletas. Prof. Blanco, Alberto Andrés 1 de 2

6 Adobe Photoshop CS Práctica n Haz clic sobre la pestaña de la paleta que quieras tener en el área de paletas y mantén el botón apretado. 2. Ahora arrastra la pestaña hasta el área de paletas. 3. Una vez allí, suelta el botón del ratón y la paleta se habrá añadido al área. Para eliminar una paleta del Área de paletas hay que hacer el recorrido contrario: 1. Haz clic sobre la pestaña de la paleta que quieras quitar del área de paletas y mantén el botón apretado. 2. Ahora arrastra la pestaña hasta cualquier zona del área de trabajo. 3. Una vez allí, suelta el botón del ratón y verás que la paleta ya no se encuentra en el área de paletas sino que se halla en el área de trabajo como ventana. También es posible ordenar las paletas dentro del Área de paletas. Para ello sigue los siguientes pasos: 1. Haz clic derecho sobre la pestaña que quieras desplazar. Se mostrará el siguiente menú contextual: 2. Podrás elegir entre diversas opciones. Haz clic sobre la que más te interese. 3. Repite estas acciones hasta haber ordenado las pestañas tal y como querías. Prof. Blanco, Alberto Andrés 2 de 2

7 Ejercicios Tema 2: El Entorno de Photoshop Ejercicios Unidad n 02 Ejercicio 1: Trabajando con la Vista de la Imagen 1. En este ejercicio te proponemos que muevas las ventanas o paletas del área de trabajo para que te familiarices con el entorno. Cámbialas de sitio y tamaño y abre nuevas ventanas desde el menú Ventana. 2. Una vez hayas cambiado toda la disposición deberás encontrar un comando en la barra de menús que te permitirá volver al estado original del área de trabajo. 3. También deberás abrir unas cuantas imágenes y explorar las opciones de organización de ventanas también desde el menú Ventana. 4. Por último deberás encontrar un comando en la barra de menús que afecte a todas las ventanas que tengas abiertas. Ejercicio 2: Trabajando con el Entorno 1. Abre el archivo de imagen espejo.gif de la carpeta de ejercicios. 2. Ahora explora las opciones que te ofrece el menú Vista, presta especial atención en los comandos Encajar en pantalla y Píxeles reales. 3. Encuentra el modo de hacer aparecer las Reglas de medición y la Cuadrícula en la imagen. Prof. Blanco, Alberto Andrés 1 de 1

8 Ejercicio. Unidad 3. Usar el Tampón de Clonar Adobe Photoshop CS Práctica n 03 Objetivo. Usar el Tampón de Clonar Ejercicio paso a paso. 1. Abre el archivo obras.jpg de la carpeta ejercicios. 2. Seleccionamos la herramienta Tampón de Clonar en el panel de herramientas. 3. Mantendremos pulsada la tecla Alt para seleccionar la zona de la imagen que queremos copiar haciendo clic sobre ella. 4. Una vez seleccionada la zona a clonar, el tampón está listo para copiar. Lleva el puntero del ratón al punto que quieres modificar y pulsa el botón izquierdo del ratón creando tantos trazos como sea necesario. Observa como los trazos crean una copia exacta de la zona que escogiste en principio. Durante todo el proceso verás que el puntero del ratón se desdobla, mostrando una aspa en el lugar de donde se extrae la información y la punta del pincel en la zona donde realizarás la copia de la imagen. Prof. Blanco, Alberto Andrés 1 de 1

9 Ejercicio. Unidad 4. Usar el Borrador mágico Adobe Photoshop CS Práctica n 04 Objetivo. Utilizar el Borrador mágico para borrar fondos. Ejercicio paso a paso. 1. Abre el archivo caminamos.jpg de la carpeta ejercicios. 2. Selecciona la herramienta Borrador mágico. 3. Haz clic sobre el cielo. 4. Observa que no se ha borrado del todo. Subiremos la Tolerancia para que acepte una gama de colores más amplia. 5. Desactiva la casilla Contiguo para que también borre colores pertenecientes a la gama pero no contiguos a la muestra donde hicimos clic. 6. Cada vez irá borrando más cielo. Ajusta el nivel de Tolerancia hasta que consigas el resultado final. Prof. Blanco, Alberto Andrés 1 de 1

10 Ejercicios Tema 4: Las Herramientas de Borrado Ejercicios Unidad n 03 Ejercicio 1: Uso de la herramienta Borrador de Fondos 1. Extrae el edificio de la fotografía borrado_fondo.jpg que encontrarás en la carpeta de ejercicios. 2. Para ello utiliza la herramienta Borrador de fondos y sus diferentes opciones. 3. El resultado final que deberás conseguir deberá parecerse a esto: Prof. Blanco, Alberto Andrés 1 de 1

11 Ejercicio. Alineamiento y Distribución de Capas Adobe Photoshop CS Práctica n 05 Objetivo. Aprender a alinear diferentes capas Ejercicio paso a paso. Abre el archivo Ejemplo Alineamiento.psd que se encuentra en la carpeta Ejercicios. Vamos a alinear estos tres objetos dispuestos en capas diferentes: 1. Enlaza todas las capas que quieras alinear. Para enlazarlas haz clic en el cuadrado a la izquierda de la miniatura. 2. Ahora selecciona la herramienta Mover. 3. Activa la capa que quieras que sea el referente de alineación haciendo clic sobre ella. Prof. Blanco, Alberto Andrés 1 de 2

12 Adobe Photoshop CS Práctica n Y escoge un tipo de alineamiento para el grupo. 5. Si eligiésemos Alinear centros verticales, las capas se dispondrían de este modo: Prof. Blanco, Alberto Andrés 2 de 2

13 Ejercicios Tema 5: Las Capas Ejercicios Unidad n 05 Ejercicio 1: Trabajar con Capas 1. Abre el archivo capas.psd en la carpeta ejercicios. 2. Observa las 16 capas, hay 8 fotos numeradas y 8 fondos también numerados. 3. Deberás ordenarlas y colocarlas de forma que la foto 1 se encuentre encima del fondo 1, la foto 2 encima del fondo 2, etc. 4. Además deberás centrar la foto dentro de su fondo correspondiente para que tengan un borde verde. 5. Luego tendrás que distribuirlas por el lienzo de forma que puedas verlas de este modo: Prof. Blanco, Alberto Andrés 1 de 1

14 Ejercicio. Copiar y Pegar selecciones Adobe Photoshop CS Práctica n 06 Objetivo. Aprender a copiar y pegar selecciones. Ejercicio paso a paso. 1. Abre cualquier imagen que tengas. 2. Selecciona la herramienta Marco rectangular. 3. Haz clic en la imagen y manteniendo pulsado el botón del ratón arrástralo hasta encerrar la zona a copiar en el área de la selección. Entonces, suelta el botón. 4. Haz clic en Edición Copiar o pulsa Ctrl+C. El contenido de la selección se copiará en el portapapeles. Si escogieses Cortar (Ctrl+X) el contenido se suprimiría de la imagen y se almacenaría en el portapapeles a espera de ser pegado en algún sitio. 5. Abre un archivo nuevo desde Archivo Nuevo. 6. Selecciona Portapapeles en el desplegable Predefinido para que el nuevo documento tenga las dimensiones del área copiada. 7. Pulsa OK y se creará el nuevo documento. 8. Pega el contenido del portapapeles desde Archivo Pegar o pulsando Ctrl+V. Prof. Blanco, Alberto Andrés 1 de 1

15 Ejercicios Tema 6: Las Selecciones Ejercicios Unidad n 06 Ejercicio 1: Copia y Pegado de Selecciones 1. Abre las imágenes hemisferic1.jpg y hemisferic2.jpg de la carpeta de ejercicios. 2. Selecciona en ambas los edificios ayudándote de las herramientas de selección. Te recomendamos que utilices el Lazo magnético. 3. Utiliza un Calado de 10px. 4. Cópialas y pégalas en un nuevo documento para conseguir algo parecido a esto: Ejercicio 2: Selecciones Personalizadas 1. Abre el archivo de imagen caballero.jpg de la carpeta de ejercicios. 2. Selecciona la estatua completa despreciando el fondo. 3. Copia la selección en un archivo nuevo con fondo blanco y del tamaño del portapapeles para que te quede esto: Prof. Blanco, Alberto Andrés 1 de 1

16 Ejercicio. Trabajando con Capas. Adobe Photoshop CS Prácticas n 07 Objetivo. Editar las capas de formas más avanzadas: las transformaciones y las máscaras. Efecto espejo Ejercicio paso a paso. 1. Abre la imagen espejo.gif de la carpeta de ejercicios. 2. Dobla la altura del tamaño del lienzo. Para ello haz clic en Imagen Tamaño de lienzo. Se abrirá el siguiente cuadro de diálogo. 3. Cambia las unidades a píxeles y dobla la altura. 4. Ancla la pintura existente a la parte superior para que el espacio añadido se cree por debajo de éste. Prof. Blanco, Alberto Andrés 1 de 5

17 Adobe Photoshop CS Prácticas n Ahora selecciona, con el Marco rectangular por ejemplo, la imagen inicial. 6. Cópiala con el comando Edición Copiar o pulsando Ctrl+C. 7. Ahora pégala. Utiliza el comando Edición Pegar o pulsa Ctrl+V. 8. Observa que se ha creado una nueva capa con una copia de la imagen. Vamos a Transformarla. Selecciona el Comando Edición Transformar Voltear vertical. 9. Coloca la imagen volteada debajo de la original. Ahora es un reflejo perfecto. 10. Lo siguiente que haremos será distorsionarla un poco con la ayuda del comando Transformar Distorsionar para que no sea una copia exacta. 11. Arregla las partes que queden vacías con el Tampón de Clonar. 12. Pásale la herramienta Dedo con una Intensidad del 15% para crear un efecto de distorsión mayor. Prof. Blanco, Alberto Andrés 2 de 5

18 Crear máscaras de capa Adobe Photoshop CS Prácticas n Crea un nuevo documento en blanco desde Archivo Nuevo. 2. Copia las imágenes mascara1.jpg y mascara2.jpg (en la carpeta de ejercicios) y pégalas en dos capas diferentes en el nuevo documento. 3. Colócalas en la posición que quieras que adopten en la composición final. 4. Ordena las capas de modo que en la capa superior se encuentre la imagen sobre la que crearemos la transparencia. Prof. Blanco, Alberto Andrés 3 de 5

19 5. Selecciona la capa superior. 6. Pulsa el botón Añadir máscara vectorial. Adobe Photoshop CS Prácticas n Selecciona la herramienta Degradado y crea un degradado teniendo en cuenta que la zona negra será la transparente. 8. Repite el paso anterior hasta estar satisfecho con la transparencia. 9. Es aconsejable que mantengas las capas tal y como están en este momento por si más tarde quisieras realizar modificaciones. Pero si lo que deseas es crear una imagen plana en una sola capa sigue los siguientes pasos: 1. Haz clic derecho sobre la miniatura de la máscara y selecciona Aplicar máscara de capa. Ambas, la capa y su máscara se fusionarán. 2. Enlaza las dos capas. 3. Haz clic en Capas Combinar enlazadas. Prof. Blanco, Alberto Andrés 4 de 5

20 Adobe Photoshop CS Prácticas n 07 Prof. Blanco, Alberto Andrés 5 de 5

21 Ejercicios Tema 7: Trabajando con Capas Ejercicios Unidad n 07 Ejercicio 1: Cambio de Perspectiva 1. Abre la imagen porton.jpg de la carpeta de ejercicios. Como ves, se trata de la puerta de una iglesia vista desde abajo. 2. Tendrás que aplicarle transformaciones para que parezca que la foto fue tomada desde el frente. El resultado final que te pedimos es este: Prof. Blanco, Alberto Andrés 1 de 1

22 Ejercicio. Composiciones con Texto y Formas Adobe Photoshop CS Práctica n 08 Objetivo. Crear composiciones con formas y texto. Ejercicio paso a paso. Vamos a crear esta imagen a partir de formas simples y un poco de texto: Abre un documento nuevo desde Archivo Nuevo. Dale las medidas de 650 píxeles de anchura y 425 de altura. Con la ayuda del Bote de pintura rellena la capa entera de color blanco. Para ello asegúrate de que el color Frontal es de ese mismo color. Ahora selecciona la herramienta Forma personalizada y haz clic en el desplegable Forma. Prof. Blanco, Alberto Andrés 1 de 3

23 Pulsa el botón y carga la biblioteca Web. El sistema te preguntará que si estás seguro, dile que sí. Selecciona la forma Volumen. Crea una capa nueva pulsando el botón en la ventana de Capas. Ahora, asegurándote de que la herramienta Forma está en posición Rellenar píxeles Adobe Photoshop CS Práctica n 08, mantén pulsada la tecla Shift (para mantener las proporciones 1 a 1) y dibuja la forma en el lienzo. Haz clic en Edición Transformar Rotar y gira la forma 180 grados para cambiar su orientación. También puedes hacerlo seleccionando la opción Voltear horizontal. Ahora seleccionaremos otra forma. Haz clic en el desplegable de Forma y carga la biblioteca de Música. Los siguientes pasos son iguales a los anteriores. Crea nuevas capas donde colocarás las notas musicales; ayudándote del comando Transformación, rótalas y colócalas dispersadas sobre el lienzo. Una vez tengamos todas las formas añadiremos el texto. Selecciona la herramienta Texto. Escoge una fuente que te guste y aumenta su tamaño sobre los 70 puntos. Haz clic sobre el lienzo y escribe una frase. Pulsa el botón para aceptar los cambios. Ahora deformaremos el texto. Pulsa el botón. Elige el estilo Levantar y modifica su curva al 44% y la distorsión horizontal a - 58%. Prof. Blanco, Alberto Andrés 2 de 3

24 Pulsa OK para aceptar los cambios. Adobe Photoshop CS Práctica n 08 Con la ayuda de la herramienta Mover coloca todas las capas de la forma que creas conveniente. Prof. Blanco, Alberto Andrés 3 de 3

25 Ejercicios Tema 8: Formas y Texto Ejercicios Unidad n 08 Ejercicio 1: Composición de Formas, Textos y Recortes. 1. Abre la imagen rio.jpg de la carpeta de ejercicios. 2. Utilizando recortes de capas deberás crear un nuevo documento con formas y texto donde utilizarás como fondo para el recorte zonas de esta imagen hasta conseguir la siguiente composición: Prof. Blanco, Alberto Andrés 1 de 1

26 Ejercicio. Edición Avanzada de Capas Adobe Photoshop CS Práctica n 09 Objetivo. Crear el efecto de gotas de lluvia mediante Estilos de capa. Ejercicio paso a paso. Crear Efecto Gota de agua 1. Abre un documento en blanco. 2. Selecciona la herramienta Pincel y el color Frontal negro. 3. Modifica las propiedades de la punta y dale una dureza del 60%. 4. Pinta sobre el lienzo intentando parecer una gota de lluvia. 5. Haz doble clic sobre la capa en la ventana Capas para ver el cuadro de diálogo de Estilos de Capa. 6. Cambia la Opacidad del relleno al 3% para reducir la opacidad de la pintura pero no de los efectos que creemos. Prof. Blanco, Alberto Andrés 1 de 5

27 Adobe Photoshop CS Práctica n Añade el estilo Sombra paralela y configura el Contorno como curva Gaussiana. 8. Dale un 100% de opacidad y cambia la Distancia y el Tamaño a 1 píxel. 9. Añade el estilo Sombra interior y en su configuración define el Modo de fusión como Subexponer color, la Opacidad al 43% y su Tamaño a 10 píxeles. 10. Añade un Resplandor interior, con Modo de fusión Superponer, Opacidad de 30% y color de muestra negro. 11. Activa también el estilo Bisel y Relieve. Prof. Blanco, Alberto Andrés 2 de 5

28 Adobe Photoshop CS Práctica n En su configuración selecciona Cincel duro en Técnica, cambia la Profundidad al 250% y el Tamaño a 15 píxeles. También aumenta el suavizado a 10 píxeles. 13. En la sección Sombra define el ángulo a 90º y la Opacidad del modo resaltado al 100%. Selecciona en el Modo de sombra Sobreexponer color y cambia la muestra de color a blanco y su Opacidad al 23%. 14. Ya tienes listo el estilo, ahora puedes guardarlo haciendo clic en Estilo nuevo y utilizarlo siempre que quieras. Ten en cuenta que el acabado dependerá siempre de la dureza del borde de la pintura sobre la que apliques el estilo. Prof. Blanco, Alberto Andrés 3 de 5

29 Adobe Photoshop CS Práctica n 09 Ejercicio paso a paso. Uso de Filtros Con una imagen abierta sigue los siguientes pasos: 1. Haz clic en Filtro. 2. Selecciona la opción Galería de Filtros. Se abrirá el cuadro de diálogo de Filtros. 3. Haz clic en Artístico para desplegar los filtros correspondientes a ese grupo. 4. Selecciona Cuarteado. Se aplicará el filtro. 5. Como lo que nos interesa es combinar diferentes filtros haremos clic en Nueva capa de efecto para añadir un nuevo filtro. Prof. Blanco, Alberto Andrés 4 de 5

30 Adobe Photoshop CS Práctica n Haz clic en Textura para desplegar el grupo. 7. Selecciona el Filtro Texturizar. Observa que se están aplicando dos filtros sobre la imagen. 8. Vamos a modificar las opciones de este Filtro. Haz clic en el desplegable Textura y selecciona Arenisca. 9. Reduce el Relieve a Pulsa OK para aceptar los cambios. Prof. Blanco, Alberto Andrés 5 de 5

31 Ejercicios Tema 9: Edición Avanzada de Capas Ejercicios Unidad n 09 Ejercicio 1: Texto con Estilo 1. Deberás crear un documento en blanco donde deberás intentar reproducir la siguiente composición. Todos los efectos del texto están hechos con estilos de capa, presta especial atención al degradado. Prof. Blanco, Alberto Andrés 1 de 1