Introducción a Photoshop

Vista previa del material en texto

CURSO: Diseño Gráfico Digital 
Adobe Photoshop 
 
 
Presentación: 
La utilización de imágenes digitales es fundamental en el desarrollo de un sitio web. En esta unidad se abordara el tratamiento de imágenes digitales tanto vectoriales como mapas de bits y su incorporación a los sitios web.
Bloques temáticos: 
 
1. Interface. 
2. Herramientas de selección. 
3. Manejo de capas. 
1. Interface 
 
¿Qué es Photoshop? 
Photoshop, creado por Adobe Systems, es una de las herramientas software para el tratamiento de imagen más potente y popular de hoy en día. 
 
Debemos tener bien claro desde el principio que Photoshop no está pensado para dibujar, para eso es recomendable el uso de Adobe Illustrator (con el que ya trabajamos en el módulo anterior). 
Photoshop está principalmente orientado a tratar y manipular imágenes, o bien creadas por otros programas, o digitalizadas por un escáner o máquina fotográfica. 
Entonces, una vez introducida la imagen en el programa podemos retocarla, transformarla y editarla con un sinfín de posibilidades. 
De hecho, esta es una de las características más interesantes de Photoshop, ya que Adobe ha sabido crear un programa intuitivo y muy completo que hace que se desmarque de la competencia y sea el software más utilizado por diseñadores e ilustradores. 
Photoshop es un software comercial, y se ha de comprar una licencia para poder usarlo indefinidamente. No obstante, Adobe permite descargar y probar el programa totalmente gratis, pero por un periodo de 30 días. 
 
Área de trabajo 
Una vez abierto el programa observaremos diferentes barras y paneles distribuidos en el entorno de trabajo. 
Photoshop nos permite trabajar directamente con los mapas de bit o imágenes fotográficas que tengamos. 
Para abrir un archivo, vamos a Archivo → Abrir. 
Una vez abierta la imagen, todas las barras y paneles se encuentran activos y el área de trabajo toma esta forma: 
 
Pestaña de 
documento
 
Barra de opciones
 
de 
herramientas
 
Barra de menú
 
Paneles de 
ventanas
 
Barra de herramientas
 
Área de trabajo
 
 
Barra de menú 
La barra en el extremo superior es la Barra de Menú. 
Desde aquí podemos acceder a diferentes opciones de menú, como por ejemplo abrir un archivo, guardarlo y luego cerrarlo. 
 
 
Pestaña de documento 
En la pestaña de documento veremos: 
· El nombre del archivo 
· La extensión del archivo (.jpg, .gif, .psd, etc) 
· La escala de visualización en relación al tamaño real. 
· El modo y la profundidad de color 
 
 
El panel de herramientas 
El panel alargado que vemos en la imagen de la derecha es el Panel de Herramientas, ahí podemos ver en forma de iconos todas las herramientas disponibles en Photoshop. 
 
 
Este panel tiene dos formas diferentes de presentarse, una es la que podemos ver en la imagen. La otra (predefinida por Photoshop CS4) es exactamente igual pero con todas las herramientas dispuestas en vertical. Para cambiar de visualización sólo tenemos que hacer clic en el botón que aparece en la esquina superior izquierda . 
Prestemos atención, ya que algunas de ellas tienen un pequeño triángulo en su esquina inferior derecha . Éste es el indicador de grupo de herramientas. 
Si posicionamos el cursor sobre alguno de estos iconos y mantenemos pulsado un instante el botón del mouse (o pulsas el botón derecho), se desplegará la lista de herramientas pertenecientes al grupo. 
Por ejemplo, si desplegamos el menú del icono pincel se desplegará la lista de herramientas de dibujo. 
En el panel de herramientas podemos encontrar también los selectores de color: 
 
En Photoshop trabajaremos siempre con dos colores activos, que pueden ser totalmente configurados por el usuario. 
El color situado al frente será el color Frontal, la mayoría de las herramientas lo tomarán como color de trabajo. El que se encuentra detrás es el color de Fondo, podemos establecer este color como el color del fondo del documento, de esta forma podemos utilizar herramientas que pinten con el color de fondo y así imitar de alguna forma el borrado de píxeles. 
El recuadro que se encuentra al frente muestra el color que estamos utilizando, en cualquier momento podemos hacer clic sobre el icono de doble flecha e intercambiaremos los colores de los recuadros entre sí, haciendo que el color que se encontraba en el recuadro del fondo pase al frente y, por lo tanto, nuestras herramientas usarán ese color como predeterminado. 
Para seleccionar un color hacemos clic sobre uno de los recuadros y se abrirá el cuadro de diálogo Selector de color, que funciona de la misma forma que el que vimos en 
Illustrator. 
 
La barra de opciones de herramientas 
En la parte superior de la ventana y bajo la barra de menú encontramos la barra de Opciones de Herramientas, el contenido de esta barra cambiará según la herramienta que tengamos seleccionada. 
A medida que avancemos y aprendamos nuevas herramientas iremos viendo cómo utilizar esta barra y sus opciones. 
 
Desde aquí podemos cambiar aspectos de la herramienta como su tamaño, su opacidad, etc. Cada vez que hagas un cambio en la herramienta, éste se mantendrá para que cuando volvamos a seleccionarla su estado sea el mismo que era cuando la utilizamos por última vez. 
 
La barra de estado 
La barra que se encuentra al pie del espacio de trabajo se llama Barra de Estado. 
A la izquierda encontraremos un porcentaje, este número es el zoom aplicado a la imagen abierta. 
 
La información que se muestra a continuación se refiere al documento sobre el que estamos trabajando. 
Haciendo clic en la flecha negra podemos seleccionar qué información mostrar. 
 
Ejercicios de práctica 
 
Te invitamos a investigar la interface de Photoshop, observar los paneles, las herramientas: 
	- 	¿Qué diferencias y similitudes encuentran con Illustrator? 
2. Herramientas de Selección 
 
Una selección es la delimitación de un área de pixeles en una imagen de mapa de bit, representada por una línea discontinua móvil llamada “fila de hormigas” , que permite actuar sobre un conjunto de píxeles discriminando otros que permanecerán bloqueados a nuestras acciones. 
El conocimiento, elección y uso de las herramientas y métodos de selección correctos son fundamentales en la edición de imágenes. 
Las selecciones nos permiten trabajar en un área de la imagen sin preocuparnos de traspasar los límites del área de trabajo (a modo de reserva) así como editar trozos de imagen cortando, pegando, transformando, etc. (a modo de recorte). 
Dentro de las herramientas y comandos de selección podemos distinguir dos enfoques distintos del proceso: la selección por áreas y la selección por propiedades
En la primera se crea una forma única o por composición que delimitará el área y en la segunda se delimitará el área a partir de las propiedades comunes de un conjunto de pixeles. 
Siempre se seleccionan pixeles enteros por lo que el área mínima de una selección será un píxel y la máxima toda la imagen, sin embargo con la salvedad de lo anterior, la forma y extensión final de una selección no está limitada, pudiendo existir en una misma selección tantas áreas separadas (islas) y calados como sea necesario. 
 
Herramientas de selección por áreas 
 
Herramientas de selección por área tipo MARCO. 
 
 
· Marco rectángular: Selecciona áreas rectangulares o cuadradas a partir de su diagonal. 
· Marco Elíptico: Selecciona áreas elípticas o circulares a partir de la diagonal de su caja. 
· Marco Fila/columna: A partir de un sólo clic realiza una selección de una fila o columna de píxeles. 
 
 
 
Podemos sumar selecciones (de la misma herramienta o diferentes) presionando la tecla Shift al realizar una nueva selección. 
Podemos restar selecciones (de la misma herramienta o diferentes) presionando la tecla Alt al realizar una nueva selección. 
Para soltar una selección, vamos a Selección – Deseleccionar. 
O desde el teclar Ctrl + D. 
 
Herramientas de selección por área tipo LAZO. 
 
 
 
· Lazo a mano alzada: Permite delimitar áreas con un recorrido cerrado realizado a mano alzada. 
· Lazopoligonal: Permite delimitar áreas con un recorrido cerrado determinando los vértices de un polígono irregular. 
· Lazo magnético: El lazo magnético detecta las diferencias de luz y color en los contornos del recorrido cerrado que realicemos para determinar los límites de la selección. 
 
 
Opciones de las herramientas de selección por área 
En la barra de opciones de las herramientas de selección aparecen opciones comunes a todas las herramientas de selección, y específicas según el tipo de herramienta. 
 
Los cuatro iconos que aparecen a la izquierda de la imagen son comunes a todas las herramientas de selección y determinan la forma de actuar de las selecciones que se hagan sobre una selección previa. 
Los iconos son “nueva”, “suma”, “resta” e “intersección”, para saber cuál es el efecto y su atajo de teclado mirar más adelante la “Edición de selecciones”. 
La opción Desvanecer indica desvanecimiento expresado en pixeles y permite especificar el tamaño en píxeles de difuminado del contorno de la selección. 
 
 
Herramientas y procesos de selección por propiedades 
· Varita mágica: Permite, haciendo clic en un sólo pixel, seleccionar los de color similar. 
Sus opciones principales son: 
· la tolerancia que determina el grado de diferencia máximo de los píxeles seleccionados con el pixel muestreado, 
· el modo contiguo que restringe la selección a píxeles contiguos, descartando las posibles islas en el área de la imagen, o el modo “muestrear todas las capas” que activa la detección del color de los pixeles en todas las capas para su selección, de lo contrario se detectan sólo los de la capa activa. 
· Selección rápida: Mediante el recorrido de una punta de pincel (área de cursor) se detecta el color de los pixeles muestreados y se seleccionan los de color similar, añadiéndose en el recorrido las nuevas áreas de color detectadas y seleccionadas. 
Sus opciones principales son: 
· la punta de pincel (tamaño, dureza, espaciado, etc...), o el muestreo de todas las capas (igual que la varita), o “mejorar automáticamente” que ajusta de un modo más preciso los contornos a las formas detectadas. 
· Gama de color: Este comando abre un cuadro de diálogo mediante el cual podemos hacer selecciones a partir de sucesivas muestras de color, lo más importante de este comando es que permite previsualizar de distintas maneras la selección resultante. 
Este comando realiza selecciones utilizando el mismo concepto que la varita mágica sin embargo sus opciones lo hacen más complejo y preciso a la vez. 
 
 
 
Edición de selecciones 
· Suma (A+B): Añade nuevas áreas a una selección previa, se realiza pulsando shift (mayúsculas) antes de comenzar la selección del área que queramos añadir. 
· Resta (A-B): Quita parte de selección a una selección previa, se realiza pulsando alt antes de comenzar la selección del área que queramos quitar a la selección previa. 
· Intersección (AxB): Apartir de una operación similar a las anteriores deja seleccionado el espacio común de las dos selecciones, la previa y la nueva, se realiza pulsando alt+shift antes de comenzar la segunda selección. 
· Seleccionar todo: Selecciona todo el área de la imagen, está en el menú selección y su atajo es ctrl+a. 
· Deseleccionar: Deselecciona todo lo seleccionado, está en el menú selección y su atajo es ctrl+d. 
· Invertir: Es una operación sencilla pero que se usa mucho, simplemente invierte las áreas de selección/no selección, lo que permite trabajar en el área anteriormente excluida, por ejemplo cuando queremos trabajar sobre una figura y sobre su fondo. El comando se encuentra en el menú selección y su atajo de teclado es shift + ctrl + i. 
 
 
 
La herramienta borrador 
El Borrador permite sacar la información de color de una zona determinada del lienzo y sustituirla por el color de Fondo. 
 
En la barra de opciones encontramos todas las opciones para su configuración: dureza, opacidad o flujo hasta adaptarse a nuestras necesidades. 
 
 
 
Desde la barra de opciones, también podemos seleccionar el modo de borrado. Hacemos clic en la lista desplegable de Modo en la barra de opciones de herramientas. 
 
 
 
Podemos elegir entre que la punta del borrador actúe como un pincel, un lápiz o simplemente que adopte la forma de un cuadrado, eliminando completamente el contenido del área del cuadrado. 
Opacidades bajas dejarán el elemento borrado semitransparente. Esto es útil en casos puntuales, pero si queremos hacer semitransparente toda una imagen, podemos hacerlo con la transparencia de capa. 
La herramienta Borrador mágico 
El Borrador mágico actúa únicamente sobre un color en la imagen, dejando las áreas afectadas de color transparente. 
 
Esta herramienta acepta un valor de Tolerancia que, según aumente, borrará también los colores similares al color seleccionado en principio. 
Si seleccionamos la casilla Contiguo (activada por defecto) sólo se borrarán las áreas con el color de muestra conectadas a ésta. Si se encontrase desactivada, el color de muestra se borraría de toda la imagen. 
Para acabados más profesionales, podemos jugar con las opciones Suavizar, que hará más suave la transición del área borrada a la que se mantiene intacta. Y la opción Opacidad, que en rangos bajos no borra totalmente el color, sino que lo hace más transparente. 
 
Ejercicios de práctica 
 
a. Utilizando la herramienta de selección que consideren más adecuada, la tarea consiste en cortornear la figura y ayudado con las herramientas de borrador, eliminar el fondo de cada una de las siguientes imágenes: 
 
 
 
 
 
3. Manejo de capas 
 
Qué son las capas y para qué sirven 
El sistema de capas de los editores de mapa de bit permite componer una imagen a partir de la superposición de elementos gráficos o de transformación separados en distintos niveles (capas) intercambiables y editables. 
Para su mejor comprensión se suele comparar con la composición de imágenes a partir de la superposición de acetatos transparentes los cuales contienen figuras que se mezclan por superposición, aunque en los editores de mapa de bit este concepto se lleva mucho más lejos. 
Las capas fueron un gran avance en la edición de imagen digital pues permiten hacer reversible cualquier operación que realicemos en la imagen, además la posibilidad de guardar archivos con las capas separadas hace posible la reutilización de determinadas partes de una imagen. 
Cuando trabajamos con Photoshop, podemos guardar el archivo editable, con la distribución de capas, en formato .psd 
 
 
 
Tipos de capas 
Existen varios tipos de capas que cumplen distintas funciones, y dependiendo del editor puede haber diferencias entre la tipología. 
En general estas son las cuatro más importantes: 
· La capa Fondo: representa el soporte opaco de la imagen, es la capa que hace de papel de fondo y por eso no puede contener transparencias ni permite transformaciones o desplazamientos. 
· Las capas genéricas: son los “acetatos” que contienen las figuras que forman la imagen. 
Las áreas que no contengan nada quedarán transparentes, las figuras “flotan” dentro de su capa. 
Pueden ser creadas en gran número, se pueden nombrar, ordenar, agrupar, duplicar o eliminar. 
· Las capas de texto: son capas que contienen un elemento textual editable, mediante estas capas podemos insertar, editar y componer textos dentro de la imagen. 
· Las capas de ajuste son capas que modifican el color y la luminosidad de otras capas mediante parámetros de ajuste. 
· Las capas vectoriales: son capas que contienen información vectorial (trazados) editable. 
 
 
 
Capa vectorial
 
Capa de texto
 
Capa genérica
 
Capa fondo
 
 
 
El panel de capas 
El panel de capas nos permite visualizar, editar, ordenar y modificar las capas y sus propiedades de forma intuitiva a través de movimientos simples e iconos. 
Estas son las operaciones básicas que se pueden realizar: 
· Activar capa: Haciendo un clic en la parte vacía de la capa. 
La capa activa es en la que se realizarán las acciones sucesivas. 
· Activar varias capas:Se realizan clics sucesivos pulsando simultáneamente la tecla shift (para capas sucesivas) o Ctrl (para capas alternas). 
· Enlazar capas: Las capas pueden quedar vinculadas si una vez activas pulsamos el botón de enlace en la parte inferior del panel. 
Esto hará que las capas se muevan y se trasladen en grupo. 
· Mostar ocultar una capa: Haciendo clic en el ojo a la izquierda de la miniatura de la capa. 
· Ordenar las capas: Haciendo clic en una capa y arrastrándola hasta la posición deseada (capas superiores estarán por delante en el orden visual). 
· Renombrar capas: Doble clic en el nombre y editar. 
· Eliminar capas: Un clic en la papelera del panel o pulsar la tecla borrar para eliminar la capa activa o bien arrastramos la capa que queramos eliminar (aunque no esté activa) a la papelera del panel. 
· Crear capa vacía: Hacemos clic en el botón “nueva capa” del panel. 
· Duplicar capas: Arrastramos la capa y la soltamos en el botón de “nueva capa”. 
· Combinar capas: Con el comando “combinar capas” del menú capa o con el atajo Ctrl+E. 
El resultado es que las capas combinadas se fusionan en una sola capa. 
Trasladar capas: Se pueden trasladar capas de un documento a otro haciendo clic y arrastrando la capa desde el panel de capas al documento de destino.
· Opacidad: es una propiedad de las capas que permite graduar su nivel de transparencia con un valor porcentual (0% - 100%). 
La opacidad de una capa se aplica a toda el área de la capa por igual añadiéndose la transparencia de los pixeles contenidos en esta. 
· Modo de fusión: es una propiedad de las capas que modifica la manera de mezclar el color de los pixeles de una capa con las que hay debajo de esta. 
En cada modo de la lista se realiza una discriminación entre los valores de luminosidad y color (o ambos) de los pixeles, determinando un sistema aditivo o sustractivo de mezcla con los pixeles de las capas inferiores. 
 
 
 
Capa activa
 
Enlazar capas
 
Mostrar/ocultar 
capa
 
Renombrar capa
 
Eliminar capas
 
Crear capa vacía
 
Opacidad
 
Modo de fusión
 
 
Gestión de capas 
La gestión de capas se hace especialmente necesaria cuando trabajamos con un número grande de capas. 
Las operaciones básicas para la gestión son el bloqueo y la agrupación de conjuntos de capas. 
En el panel de capas encontraremos la opción de crear grupos de capas (mediante el icono de carpeta de la parte inferior del panel) que nos sirven para agrupar capas bajo un mismo nombre de grupo y modificar algunas de sus propiedades en conjunto. 
Estas propiedades (opacidad, modo de fusión, bloqueo, etc) se combinan con las propiedades de cada capa contenida. 
 
Bloqueo de capas 	 
 
 
Grupo de capas
 
El bloqueo de capas nos permite limitar las acciones que podemos realizar sobre una capa o grupo de capas. 
Los distintos iconos de bloqueo representan las acciones a limitar. 
Son los siguientes: 
· Bloqueo de transparencia: Limita la modificación de los píxeles transparentes de la capa, no podremos “pintar” en pixeles transparentes y no podremos borrar píxeles existentes. 
· Bloqueo de pintura: Limita la modificación gráfica de los píxeles de la imagen, no podremos modificar el color ni la transparencia de ningún pixel de la imagen. Este bloqueo contiene al anterior. 
· Bloqueo de desplazamiento: Limita el desplazamiento de la capa (como en la capa fondo), aunque si podremos desplazar áreas recortándolas. Este bloqueo es independiente de los anteriores. 
· Bloqueo total: Limita todas las acciones anteriores y además el cambio de modo de fusión, de opacidad y la posibilidad de eliminar la capa, aunque permite cambiar su posición en el orden de capas y duplicarla. 
Ejercicios de práctica 
 
a. Utilizando las imágenes otorgadas para el ejercicio (pueden agregar además todas las que quieran), crear la siguiente composición, teniendo en cuenta el tipo de capa y su apilamiento.