Manual curso Photoshop

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual de Photoshop

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Director de DesarrolloWeb.com http://www.desarrolloweb.com (21 capítulos)

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introducción al Manual de Photoshop Sin duda, el programa de diseño gráfico por excelencia es Adobe Photoshop. Desde siempre lo ha sido y hoy por hoy pocos competidores podrán hacerle un algo de sombra. Bien cierto es que para diseñadores de páginas web es una herramienta que resulta incluso más potente de lo necesario, pero también es cierto que nunca está de más contar con una utilidad, tan buena, que los límites sean más bien nuestros propios conocimientos que sus posibilidades.

La mayor de las desventajas de Photoshop podría ser su precio, que resulta en nuestra opinión exagerado y poco al alcance de la mayoría de diseñadores nóveles. Otro de los puntos flacos de Photoshop, para las personas con poca experiencia, es su dificultad de uso. Quizás tantas opciones como tiene, siendo algunas poco intuitivas si no hemos aprendido a usar el programa desde sus inicios, hace que todavía sea más difícil de digerir para las personas que empiezan a trabajar con Photoshop.

En cuanto al precio del programa poco podemos hacer, puesto que venderlo tan caro es una decisión de la propia empresa creadora del software, Adobe. Pero donde podemos ayudar y estamos decididos a hacerlo, es en la parte de aprendizaje del mismo, sobre todo para aquellos usuarios que comienzan su andadura con el programa. Por ello, comenzamos este Manual de Photoshop, en el que vamos a ir explicando, poco a poco, las herramientas más fundamentales para poder utilizar el programa de una manera sencilla.

Este manual de Photoshop, por tanto, está pensado para personas sin experiencia, ya que vamos a explicar las cosas para aquellos que quieren dar sus primeros pasos y empezar a soltarse en su uso. Una vez leído este manual podremos trabajar de manera autónoma y hacer cosas como retoques fotográficos, diseños de páginas web, iconos botones, banners, etc. por nosotros mismos.

Ahora bien, para los que ya conocen Photoshop y quieren aprender a realizar cosas más complejas relacionadas con el diseño de páginas web, recomendamos leer nuestro Taller de Photoshop, que ya da por sabidas las cosas que explicamos en este manual y pasa directamente a la práctica sobre casos de uso útiles pensados, como decía, para diseñadores de sitios web. En el Taller de Photoshop podrás encontrar casos prácticos, como la realización de efectos de texto, banners, fondos para páginas web, acciones por lotes para procesamiento de múltiples archivos al mismo tiempo, retoques diversos, etc.

De paso, también queremos comentar que en nuestro sitio web "hermano" DesarrolloMultimedia.es, estamos publicando un taller de Photoshop con otra serie de artículos prácticos, menos focalizados en la web y más en el diseño general, que también resultarán de mucho interés para los entusiastas de Photoshop. Visitar el Taller de Photoshop de DesarrolloMultimedia.es Tal como acostumbramos a hacer en DesarrolloWeb.com, iremos publicando el manual a medida que lo vamos escribiendo. En el momento de redactar esta introducción, ya hemos publicado una veintena de artículos, así que ya se dispone de una buena cantidad de contenidos e información para ir aprendiendo muchas cosas interesantes. Por la misma razón, de ir publicando los artículos a medida que los escribimos, puede que haya temas que no se hayan tratado todavía, al menos con la profundidad que sería necesaria. No obstante, nos iremos ocupando en rellenar huecos y completar las informaciones para que este manual sea completo y útil.

Nuestros objetivos iniciales son básicamente explicar las distintas herramientas con las que cuenta Photoshop, obviando algunas tareas básicas comunes a otros programas de Windows, como abrir archivos, guardarlos, etc. que se supone por sabido para poder seguir el manual.

Así pues, esperamos que en los próximos artículos podáis ir conociendo Photoshop y

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

aprendiendo a dominar sus herramientas y funcionalidades.

Sin más, te dejamos el link a la portada del Manual de Photoshop.

Artículo por Miguel Angel Alvarez

Photoshop Todo diseñador web ha de conocer algunas herramientas que le permitan crear gráficos para incluir en páginas web. Existen en el mercado múltiples programas pero el que tratamos aquí es una de las mejores opciones.

A lo largo de sus distintas versiones ha ido sofisticándose cada vez más e incorporando nuevas herramientas, a la vez que se perfeccionaban las existentes. Con todo se puede decir que estamos hablando de un programa muy completo, vivo y muy práctico.

Es importante conocer todas sus herramientas y saber utilizarlas, por este motivo nuestro equipo esta desarrollando un manual de photoshop. Por otro lado estamos publicando todas las informaciones prácticas para explicar el uso de Photoshop, y los casos más interesantes en que los diseñadores web pueden utilizarlo, en el Taller de Photoshop, que actualizamos periódicamente.

Aparte, existe mucha información externa sobre Photoshop, que publican otras webs y nos puede servir para conocer el programa. Existen multitud de páginas interesantes y completas, veamos sin más algunas de ellas: • • • • • • • •

Introducción a Photoshop. Ofrecido por la universidad de Navarra, un PDF bastante amplio sobre Photohop 4. Quizás hoy en día poco actualizado.

Solo Photoshop. Tiene tutoriales y artículos para aprender diversas técnicas.

Canal Photoshop. Otro sitio dedicado a Photoshop.

Introduction to Web Design with Adobe Photoshop . Es una web en Inglés pero con muy buena pinta.

Web Studio. Entre otras cosas, muchos trucos con Photoshop.

Adobe Photoshop Tutoriales. Más información y ayudas sobre Photoshop en castellano.

Página de Adobe del producto Photoshop. Información de primera mano.

Adobe Photoshop Tips. Tutoriales de Photoshop por Adobe, empresa creadora del producto.

Pensamos que ahora no te faltará información sobre Photoshop, una buena elección.

De todos modos, comentamos que existe una categoría de nuestro directorio totalmente dedicada a Photoshop donde se pueden encontrar más enlaces, artículos, manuales, etc.

Artículo por Miguel Angel Alvarez

Pinceles de Photoshop Los pinceles de Photoshop son una herramienta muy útil para el diseño gráfico digital. Nos podemos hacer la idea de que son como por pinceles que utilizamos en el dibujo artístico, pero Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

3

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

con la salvedad que son digitales y gracias a ello nos permiten realizar una gama mucho más variada de acabados.

En el dibujo artístico convencional los pinceles son con los que dibujamos a mano alzada, aportando al dibujo distintas texturas y diversos grosores del trazo, dependiendo del tipo de pincel, que se pueden combinar con distintas tonalidades de tinta. Photoshop tiene ya incorporados diversos pinceles para dibujar con el ratón del ordenador, que ofrecen una buena gama de posibilidades.

La herramienta de pincel (en las versiones de Photoshop en inglés se llaman Brushes) se puede seleccionar desde el menú de herramientas de Photoshop y está agrupada junto con la herramienta de lápiz o la de sustitución de color. Para seleccionar una de estas herramientas se puede hacer con una pulsación prolongada del botón del ratón sobre la herramienta de pincel o la que haya en ese espacio.

Una vez seleccionada la herramienta pincel podemos configurarla para aportar diversos tipos de grosores, texturas y difuminado de los bordes.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

4

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Con los pinceles que vienen por defecto en Photoshop podemos elegir varias grosuras y difuminados y además alterar valores como el diámetro del pincel y la dureza. A mayor grosor, el área que pintaremos con el pincel también será mayor. La dureza sirve para definir lo concreto o definido que será el trazo del pincel, con menor dureza más difuminado será el trazo, sobre todo en los bordes. Podemos alterar por nosotros mismos esos valores para obtener distintos acabados, así como cambiar el color del pincel a través del selector de colores de Photoshop.

Entre las opciones de la herramienta de pincel también está la opacidad y el flujo. La opacidad sirve para dibujar con más o menos transparencia del trazo y el flujo es algo parecido, para que el trazo sea más o menos marcado. Debo admitir que no veo mucha diferencia entre estas dos opciones de configuración.

Dibujar a "mano alzada" con Photoshop, o por decirlo de otra manera, utilizar un pincel para pintar en el lienzo con el movimiento del ratón es sencillo. Lo complicado es obtener un resultado atractivo a partir de un lienzo en blanco, aunque para el retoque fotográfico a veces puede venirnos muy bien aplicar diversas pinceladas o alteraciones del color.

Dejo aquí un enlace con un artículo de nuestra sección de breves, donde presentamos un vídeo de un dibujo en Photoshop a partir de un lienzo en blanco, pintando de una manera artística y con unos resultados muy similares a los que un buen pintor podría obtener sobre papel: http://www.desarrolloweb.com/de_interes/video-dibujo-artistico-photoshop.html Para el diseño gráfico digital, y en lo que a nosotros nos respecta: el diseño para webs, los pinceles quizás en principio puedan ser poco útiles, pero un buen uso de ellos puede aportar unos toques de calidad y originalidad a las creaciones. Más aun cuando sepamos instalar y configurar en nuestro Photoshop pinceles creados por otros diseñadores, que muchas veces ofrecen gratis en sus páginas web.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

5

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En el siguiente artículo veremos cómo instalar nuevos pinceles en Photoshop y conseguirlos en diferentes páginas.

Artículo por Miguel Angel Alvarez

Instalar pinceles de Photoshop En el artículo anterior explicamos qué eran los pinceles de Photoshop y como utilizarlos en nuestros diseños. A continuación vamos a explicar cómo conseguir e instalar pinceles de Photoshop, que podremos utilizar para dar un aspecto más acabado y profesional a los diseños. Lo primero será hacerse con unos cuantos pinceles nuevos para instalarlos en nuestro sistema. En la web hay multitud de páginas interesantes para conseguir pinceles de Photoshop. Suelen ser las páginas de los propios creadores de los pinceles, que los ofrecen para descarga en sus propios sitios. Nosotros vamos a ofrecer unos links interesantes donde podréis descargar pinceles muy atractivos visualmente que se pueden utilizar en vuestros diseños.

Nota: Las herramientas de pinceles mejoradas, que permiten la creación de nuevos pinceles así como la instalación de pinceles de otros creadores, se encuentran disponibles a partir de la versión CS de Photoshop. Cualquier versión anterior (Photoshop 7 y anteriores) necesitaría utilizar los pinceles por medio de capas, que muchas veces también ponen para descarga los propios creadores de los juegos de pinceles.

Pinceles de flores y vegetales Una lista de pinceles interesantes para crear hojas, flores o pequeñas plantas y hiervas.

Recife dirty Una serie de pinceles para ensuciar el lienzo y crear un efecto de manchas diversas.

Pinceles de llamas Pinceles de Photoshop para hacer llamas. Aunque claro, las llamas habría que retocarlas para crear el efecto preciso de fuego.

Pinceles Urban Scrawl Varios pinceles de temas urbanos con un toque artístico caricaturizado. Para descargar estos pinceles hay un icono en la parte de la izquierda.

Como se ha podido ver, una página interesante para conseguir distintos pinceles es http://deviantart.com. Simplemente hacer una búsqueda por "photoshop brushes".

Una vez tenemos descargados algunos pinceles, vamos a aprender a instalarlos. Es muy sencillo. Lo que tenemos que hacer es seleccionar la herramienta de pincel, luego 1) en las opciones del pincel arriba del todo pulsamos la flechita hacia abajo, que hay al lado del tipo de pincel que tenemos seleccionado. 2) En la ventana de opciones que aparece tenemos que pulsar otra nueva flecha con más opciones que aparece en la esquina superior derecha. 3) Por último seleccionar la opción que pone "Cargar pinceles…". Mirar la siguiente imagen para aclarar las dudas.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

6

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Para terminar de cargar los pinceles tenemos que seleccionar de nuestro disco duro el lugar donde tenemos los pinceles que hemos descargado. A partir de ese momento estarán disponibles en nuestro sistema y podremos utilizarlos para hacer nuestros propios diseños.

Para muestra, pongo un par de imágenes que he creado en pocos minutos a partir de algunos de los pinceles que he propuesto para descarga en este artículo:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

7

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Esta imagen utiliza los pinceles de Flores y Vegetales

Esto es una pruebecilla, para jugar con las opciones de pincel, con uno de los pinceles que ofrece el paquete Urban Scrawl.

Artículo por Miguel Angel Alvarez

Crear pinceles con Photoshop Vamos a hacer un pequeño tutorial para crear pinceles con Photoshop a partir de un dibujo.

Estos pinceles luego los podremos utilizar en tantas creaciones o diseños como deseemos.

Podremos redimensionarlos o cambiarles el color o la opacidad, con lo que aumentaremos fácilmente las posibilidades de nuestros diseños.

Los pinceles de Photoshop se pueden utilizar para pintar, tanto con la herramienta de pincel como con la de lápiz. Podemos encontrar en Internet diversos pinceles creados por distintos diseñadores, que los ofrecen gratuitamente para cualquier uso. Estos pinceles se pueden

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

8

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

descargar e instalar en nuestro sistema, como vimos en el artículo Instalar pinceles de Photoshop . Sin embargo, en este artículo vamos a mostrar cómo crear por nosotros mismos un pincel personalizado y utilizarlo en nuestros diseños.

Los pasos para crear un pincel con Photoshop son muy sencillos.

1.- Primero creamos un dibujo.

El dibujo o diseño puede ser de cualquier cosa y lo debemos hacer en una o varias capas sobre un lienzo vacío. Podemos utilizar cualquier color, por ejemplo el negro, porque posteriormente podremos cambiar el color a los pinceles en el momento de uso de los mismos.

Este es un diseño de prueba, que igual no os parece muy bonito, pero nos servirá para el ejemplo.

2.- Luego, con el dibujo, creado en una o varias capas, pulsamos sobre la opción del menú, "Edición - Definir valor de pincel…"

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

9

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3.- Ahora nos solicitan un nombre para darle al pincel, que podemos escoger el que queramos.

Siempre está bien que sea descriptivo.

4.- Con estas acciones nuestro pincel está guardado y listo para usar en nuestra lista de pinceles de Photoshop. Para utilizar el pincel creado tenemos que seleccionar la herramienta pincel o la herramienta lápiz y escoger el pincel recién creado. El pincel que acabamos de crear lo podemos escoger apretando la flechita hacia abajo que hay al lado de la muestra del pincel, en la barra de opciones de la herramienta pincel o lápiz. Lo podemos ver en la siguiente imagen marcado con una flecha roja.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

5.- Por último, podemos utilizar el pincel tantas veces como deseemos en tantos diseños como queramos. El pincel guardado estará siempre disponible en nuestro Photoshop. Además, como decía, podemos cambiar el color del pincel, la opacidad, etc. a través de la barra de opciones de la herramienta pincel o lápiz.

Eso es todo. Para acabar, dejo una muestra de uso del pincel que acabo de crear, con varios colores.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Crear un pincel con Photoshop, es fácil y útil!

Artículo por Miguel Angel Alvarez

Configurar un pincel de Photoshop En un pasado artículo de nuestro manual Taller de Photoshop explicamos cómo crear nuestros nuevos pinceles personalizados. Ahora vamos a explicar la manera de configurar nuestros propios pinceles, o cualquiera que tengamos en nuestro Photoshop.

El asunto es bien simple. Se trata de utilizar la ventana de pinceles, que tiene una serie de opciones interesantes, unas más útiles que otras, para aportar una personalización interesante a los resultados. Para ver esta ventana de configuración de pinceles hacemos lo siguiente: 1) Con la herramienta de pincel seleccionada, marcamos el pincel con el que queremos trabajar.

2) Luego apretamos el botón "Conmutar paleta pinceles", que podemos ver señalado en la imagen siguiente.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

3) Aparecerá una ventana donde podemos definir las opciones de trabajo con el pincel. La ventana tiene este aspecto:

Ahora podemos jugar con las distintas opciones de la paleta de pinceles, que ofrece diversas configuraciones que pueden ser muy interesantes. A la vez que vamos cambiando las opciones, en la parte de abajo nos nuestra una muestra de cómo quedaría nuestro pincel al aplicarlo en cada momento.

En esta paleta de pinceles veremos una serie de opciones de modificación del pincel, que podemos seleccionar o deseleccionar pulsando el checkbox correspondiente. Aparte, pulsando en cada una de las distintas opciones, accederemos a un formulario donde se puede alterar el comportamiento de cada una con distintos parámetros.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Práctica de configuración de un pincel de césped Hemos creado un pincel que imita a césped o hierba. Quizás no sea el mejor pincel de cesped que podríamos haber creado, pero servirá para nuestro ejemplo. El aspecto de este pincel es el siguiente:

Para crear a partir de este archivo un pincel hay que hacer un par de pasos que se describieron anteriormente en el artículo Creación de pinceles con Photoshop.

Si utilizamos el pincel tal cual, el efecto de césped no será muy conseguido. Por ejemplo sería así:

Ahora bien, el césped nunca es tan homogéneo y el color tampoco es siempre exactamente el mismo verde. Pero la paleta de configuración del pincel nos puede ayudar bastante con unos simples cambios.

Dinámica de forma: La hierba no tiene siempre la misma forma ni la misma inclinación. Así que en esta opción de pincel podemos modificar diversos parámetros para que cada vez que se coloque un poco de césped este sea un poco distinto que el anterior.

Dispersión: El césped tiene cierta dispersión. No está colocado de manera lineal. Tampoco queremos que la dispersión sea muy marcada, porque un césped bien cuidado debe ser también un poco homogéneo.

Dinámica de color: El césped queremos que sea verde, pero no siempre el mismo tono de verde. Por eso, a través de la opción de pincel dinámica de color podemos alterar parámetros como el tono o el brillo para que cambie un poco cada ramillete de hierba. Haremos que el brillo varíe bastante y un poco el tono.

Con estos tres valores, más el suavizado, que aparece seleccionado por defecto desde el principio, podemos observar como el aspecto de nuestro césped ha cambiado bastante y ahora es un poco más realista.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Este pincel de césped nos ha servido para aprender a configurar un pincel de Photoshop.

Aceptamos que el resultado no es de un realismo extraordinario, pero nos ha servido para la práctica. Os recomendamos probar vosotros mismos las distintas opciones de configuración de pinceles de Photoshop.

Artículo por Miguel Angel Alvarez

Selecciones con Photoshop En este artículo vamos a ver uno de los elementos de Photoshop más básicos y fundamentales para trabajar con este programa de diseño gráfico, las selecciones. Son uno de los temas más recurrentes y explicados dentro del Manual de Photoshop que estamos publicando en DesarrolloWeb.com.

Introducción a las selecciones de Photoshop Las selecciones son una de las dos cosas que tenemos que dominar para sacar partido a Photoshop, la otra cosa que debemos conocer y utilizar con soltura son las capas. Dominando las tanto las selecciones como las capas, podremos realizar muchas de las operaciones típicas con el programa y nuestro aprendizaje en adelante se simplificará bastante.

El cometido de las selecciones, tal como indica la palabra, es delimitar o seleccionar partes de una imagen. En esas partes delimitadas por una selección luego podremos hacer cosas, que afectarán a la zona seleccionada y no al resto de la imagen. Cuando trabajamos con Photoshop a menudo nuestras actividades se basan en realizar selecciones, para luego realizar cualquier tipo de efecto sobre el área de la imagen seleccionada, como pintar sobre ella, realizar un filtro, copiar parte de una imagen, etc.

Es tan fundamental el uso de selecciones que operaciones tan básicas como rellenar de color una parte de la imagen, se hacen primero seleccionando el área que queremos colorear y luego utilizando la herramienta de bote de pintura (porque de otra manera el bote de pintura es muy probable que pinte todo el lienzo de la imagen). Así que, si no sabemos Photoshop, uno de los primeros asuntos que tenemos que aprender es a seleccionar partes de una imagen.

Durante nuestro trabajo con Photoshop tendremos también que tener en cuenta la selección que podamos tener activa en cada momento, pues cualquier acción que realicemos con el programa se efectuará sólo dentro del área que tengamos seleccionada. En este sentido, probablemente alguna vez te ocurrirá que intentes realizar una acción, como pintar con el pincel sobre la imagen, y el pincel no pinte nada. Esto puede deberse a que tengamos una selección realizada y estemos intentando pintar fuera de ella. El resultado será que el pincel no Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

pintará nada, pues las acciones que hagamos con Photoshop sólo se realizan, como digo, dentro del área que esté seleccionada.

Un detalle, para que nos podamos dar cuenta de lo importante que es el uso de selecciones, es que Photoshop dispone un menú del programa (de los típicos Archivo, Edición...) que es para uso exclusivo de acciones con selecciones (Menú "Selección"). Dicho sea de paso, este menú contiene muchas opciones para realizar con selecciones, como seleccionar toda la imagen, deseleccionar (eliminar la selección actual), invertir la selección, modificarla de varias maneras, etc. Conviene echar un vistazo a este menú para ver qué acciones permite.

Herramientas para seleccionar Existen muchas maneras de realizar selecciones en Photoshop, por medio de diversas herramientas, que ofrecen distintos tipos de métodos para seleccionar partes de una imagen, que nos serán útiles en unos u otros casos. Estas herramientas de selección ni siquiera son las únicas que se pueden utilizar para hacer selecciones, pues todavía hay una serie de métodos que podemos utilizar, de manera adicional a las herramientas que ofrece Photoshop. No obstante, vamos a empezar enumerando y describiendo las distintas herramientas disponibles, que se pueden acceder desde la botonera de herramientas. Más adelante veremos otros métodos para seleccionar que también nos pueden facilitar nuestro trabajo.

Herramientas de selección básicas Englobadas dentro de un mismo botón, de la botonera de herramientas, hay varias herramientas de selección básica, como la selección rectangular, marco elíptico, o las selecciones de fila y columna única.

Nota: Por si no lo hemos dicho, para desplegar el listado de herramientas que hay debajo de un mismo botón, hay que hacer clic sobre el botón y mantener por un segundo el botón del ratón. Entonces aparecerán las distintas herramientas que se encuentran englobadas en un mismo espacio.

Estas herramientas de selección las explicamos en el artículo Herramientas básicas de selección en Photoshop.

Herramientas de lazo Son unas herramientas más complejas para realizar selecciones de áreas irregulares. También hay varios tipos de lazo, que pueden ser útiles en unas ocasiones u otras. Está el lazo normal, Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

16

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

que permite hacer una selección dibujando a mano alzada, el lazo poligonal, que permite dibujar una selección marcando los diversos vértices de un polígono, y el lazo magnético, que es un lazo a mano alzada en el que el propio programa intenta ajustarse a las formas de la imagen que haya sobre el sitio donde estemos dibujando el lazo.

De todas las herramientas de lazo para hacer selecciones, la más interesante y recurrida es el lazo poligonal, que hemos explicado con detalle en artículo en Selecciones poligonales.

Varita mágica Otra de las herramientas para realizar selecciones es la varita mágica, que realiza una selección del área donde se haga clic. La selección que realiza es de todo el área que tenga un color parecido al lugar donde se ha hecho clic, limitando la selección por cualquier cambio de color, más o menos brusco.

Sin duda, la herramienta de varita mágica es una de las preferidas por los usuarios inexpertos, pero poco a poco cuando vamos dominando el programa, la vamos utilizando cada vez menos.

Podemos ver una descripción de la varita mágica en el artículo Selecciones con la varita mágica de Photoshop

Herramienta recortar Esta herramienta también la podemos englobar dentro de las herramientas de selección, porque sirve para hacer una selección, que luego podemos recortar para quedarnos en la imagen únicamente con la parte seleccionada y recortada.

La herramienta de recortar la hemos explicado en el artículo Recortar y redimensionar con la herramienta de recorte de Photoshop

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

17

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Otras cosas interesantes sobre las selecciones de Photoshop Hasta ahora hemos enumerado y descrito ligeramente las herramientas de selección que dispone Photoshop, pero como decía, existen varios otros modos de realizar selecciones y operar con ellas, que también convendrá conocer. Lo veremos más adelante en este manual.

Pero quería llamar la atención sobre otros temas que también debes conocer sobre las selecciones y ya hemos tratado en otros capítulos del Manual de Photoshop http://www.desarrolloweb.com/manuales/manual-photoshop.html. Uno de ellos es el suavizado y calado de selecciones de Photoshop, que nos servirá para hacer selecciones con los bordes suavizados y difuminados. Esto lo podemos conocer en el artículo Suavizado y calado de la selecciones en Photoshop Artículo por Miguel Angel Alvarez

Herramientas de selección básicas en Photoshop Dentro de las herramientas de selección de Photoshop existen unas que son las más básicas, y que por tanto debemos aprender primero. Son las selecciones para crear rectángulos, óvalos o columnas y filas únicas. Estas herramientas están todas englobadas dentro del mismo botón de la barra de herramientas de Photoshop y podemos acceder a todas ellas con una pulsación prolongada del ratón sobre el botón señalado en esta imagen.

No son las únicas herramientas para realizar selecciones, como ya comentábamos en el Manual de Photoshop en el pasado artículo de selecciones con Photoshop, pero sí son las más sencillas de entender y de utilizar.

De modo que, vamos a presentar para los lectores de DesarrolloWeb.com unas explicaciones sobre estas herramientas, aunque hay que admitir que son tan básicas que poco necesita explicarse.

Selección rectangular Esta herramienta se llama en realidad Marco Rectangular, aunque a veces la podemos conocer como selección rectangular, o selección cuadrada. Sirve para hacer rectángulos y también cuadrados.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

18

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Con el marco rectangular podemos hacer clic en un área y arrastrar, con el botón pulsado, para definir un rectángulo. Una vez soltemos el botón, se creará la selección del área que hayamos marcado.

Por experimentar un poco, una vez que hemos realizado la selección, podemos intentar pintar con el bote de pintura, o con un pincel, y veremos que Photoshop sólo edita la parte de la imagen que se haya seleccionado.

Un detalle interesante a la hora de hacer las selecciones rectangulares es el uso de las teclas "Alternativa" (Alt) y "Mayúsculas" (la de la flecha hacia arriba). Estas dos teclas permiten ajustar la forma de la selección en el momento que la estamos realizando. Con Alternativa conseguimos que la selección se haga con centro en el lugar que hicimos el clic en la imagen.

Con mayúsculas conseguimos que la selección se realice con todos los lados iguales (será un cuadrado).

Selección de elipses La segunda herramienta básica para hacer selecciones es la herramienta de selección de elipses, que se llama en realidad marco elíptico y sirve para realizar elipses y círculos.

Coloquialmente también podremos llamarla selección circular.

Esta herramienta funciona igual que la herramienta de marco rectangular, sólo que realiza elipses o círculos. Podemos probar para hacer cualquier tipo de elipse, marcando la herramienta, haciendo clic en cualquier parte de la imagen y arrastrando hasta otro punto.

Veremos que se realiza una circunferencia o elipse dentro de los puntos que hayamos marcado como inicio y el punto hasta donde hayamos arrastrado con el botón del ratón pulsado.

Al igual que la selección rectangular, la selección de elipses tiene la posibilidad de ajustarse, en la hora de creación, mediante las teclas Alternativa y Mayúsculas. La tecla alternativa hará que se cree la elipse en el centro donde hayamos hecho el clic para iniciar la selección. La tecla mayúsculas lo que hará es que se dibujen círculos perfectos en vez de elipses.

Selección de fila y columna única Estos dos tipos de selecciones, que explicaré juntas, se suelen utilizar poco, pero también vienen bien de vez en cuando, por lo que merece la pena conocerlas. Sirven para realizar una selección de una fila o una columna de píxeles.

Estas dos herramientas hacen una selección de todo el área de la imagen, pero con un píxel de altura o anchura. La fila única hace una selección de toda una fila de píxeles, es decir, una selección tan ancha como la propia imagen, pero de solo un píxel de alto. La selección de columna única hace una selección de toda la altura del documento, pero un solo píxel de ancho.

Estos dos tipos de selecciones (fila y columna única) pueden servir para pocas cosas, aunque a veces nos vendrán bien. Por ejemplo, sirven para dibujar líneas verticales u horizontales en toda la anchura o altura de una imagen.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

19

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artículo por Miguel Angel Alvarez

Recortar y redimensionar una imagen con Photoshop En este artículo vamos a ver cómo trabajar con la herramienta de recortar de Photoshop. Hoy esta herramienta me parece muy básica, pero aun recuerdo cuando Photoshop era un misterio para mi y vi a un amigo recortando una imagen con la herramienta de recortar. Le dije enseguida: "He, para ahí un momento! ¿Cómo has hecho eso?" y es que todos hemos sido novatos alguna vez y necesitamos que nos abran los ojos, o apurar nuestra capacidad de ser autodidactas.

De todos modos, aunque este artículo sea sencillo, nos viene como anillo al dedo, puesto que estoy haciendo una serie de textos explicativos de las herramientas de Photoshop, que venimos publicando en desarrolloweb.com en el manual de Talleres de Photoshop. Así que espero que este texto sirva de ayuda, sobre todo para las personas más inexpertas y que no tienen un amigo diseñador que les muestre las cosas.

Herramienta Recortar de Photoshop Localizamos la herramienta de recortar de Photoshop en el panel o barra de herramientas del programa. Tiene un icono con esta forma:

Esta herramienta debería estar siempre visible en la barra, puesto que, al menos hasta Photoshop CS2, está sola en la casilla del panel. CS2 es la versión del programa que estamos usando para este tutorial de Photoshop de desarrollo web .com. De modo que no hay modo de que la herramienta esté escondida.

El funcionamiento de la misma es extremadamente sencillo, muy parecido a la herramienta de selección rectangular, aunque con algún añadido de funcionalidad. Simplemente tenemos que seleccionar un área, pinchando en cualquier parte de la imagen y arrastrando hacia cualquier lado.

La herramienta recortar hace una selección rectangular del área marcada con el ratón, que podemos editar una vez realizada, para ajustarla a las dimensiones deseadas. La selección que se crea tendrá este aspecto:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

20

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

La selección se puede editar al instante, poniendo el ratón en el borde o la esquina de la selección realizada. Veremos que el puntero del ratón cambia y se convierte en una línea con flechas hacia los lados. Eso quiere decir que podemos hacer clic con el botón izquierdo del ratón y arrastrar para cambiar el tamaño de la selección.

También podemos mover la selección a otro lugar de la imagen. Para ello hacemos clic en cualquier parte de dentro de la selección (menos en el punto que aparece en el medio de ella) y arrastramos al lugar donde queramos colocarla.

Una vez que tenemos la selección creada, del área que nos interesa recortar, podemos ordenar el recorte pulsando la tecla Enter, o bien apretando con el botón derecho en cualquier parte de la selección y seleccionando la opción Recortar. Photoshop recortará la imagen entonces y nosotros nos quedaremos sólo con la parte de la imagen que teníamos seleccionada.

También podemos cancelar la selección en cualquier momento con la tecla Escape (ESC).

Redimensionar y recortar en un solo paso Para acabar con el repaso a la herramienta de recortar de este artículo de desarrolloweb.com, vamos a ver cómo podemos recortar una imagen y redimensionarla, todo en un mismo paso.

Cuando seleccionamos cualquier herramienta de Photoshop aparece un panel de opciones de la herramienta. Este panel se sitúa generalmente en la parte de encima de la interfaz del programa, debajo de la barra de menús, aunque podría estar en otro lugar o ni siquiera estar visible. Tiene esta forma:

Si no lo vemos, podemos mostrarlo desde el menú de Ventana - Opciones.

Entonces, para redimensionar el área recortada simplemente, antes de hacer la selección de recorte, escribimos unos valores en las opciones de anchura y altura. En la imagen anterior hemos colocado como anchura 120 píxel y como altura 60 píxel. Entonces, a la hora de hacer la selección veremos como esta mantiene las proporciones de ese tamaño indicado. Luego, cuando pulsemos Enter, se recortará el área seleccionada y se redimensionará al tamaño marcado en las opciones.

Artículo por Miguel Angel Alvarez

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

21

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Suavizado y calado de la selección en Photoshop Las selecciones que podemos hacer con Photoshop pueden tener una configuración de suavizado y calado que es importante saber manejar. En este artículo vamos a explicar qué son estas cosas.

Suavizado o antialiasing El suavizado sirve para indicar que los bordes de la selección no estén totalmente definidos o rectangulares, sino que tengan un levísimo efecto de difuminado. Hay que entender que las imágenes digitales, de ordenador, son realizadas por puntos y que si las líneas de la selección fuesen por el camino que marcan los puntos, quedarían muy cuadradas o dentadas. Con el suavizado simplemente se disimulan los puntos de las imágenes digitales, de modo que las curvas parecen más curvas perfectas. Esto se consigue por medio de la coloración, en una gama más clara que la de la línea principal, de los alrededores de la imagen.

Hay varios tipos de selecciones. Las que son cuadradas, que hacemos con la herramienta de marco rectangular, o las que son de fila o columna única, no tiene sentido hablar de suavizado o antialiasing, porque ya son cuadradas de por si. Pero las que tienen curvas se les puede aplicar un suavizado para que las curvas parezcan más delicadas.

Por si no he conseguido explicar bien lo que es el suavizado o la idea de antialiasing, podemos ir a la descripción de Antialiasing de la Wikipedia, que todavía es más críptica que mi descripción, pero que tiene un ejemplo que puede ser bueno para a hacerse la idea.

Calado El calado es un difuminado de los bordes. Sería como un suavizado pero mucho más fuerte, en el que podemos además definir el área de difuminado de los bordes que queremos. El calado viene muy bien para que a la hora de pegar la porción de imagen seleccionada no parezca como que es una imagen aparte que se ha superpuesto, sino que los bordes queden menos marcados.

El calado lo debemos utilizar con cuidado para conseguir un efecto interesante. Cuanto mayor sea el área seleccionada mayor calado debemos utilizar para que quede bien.

Cómo definir si queremos calado o suavizado Cuando seleccionas una herramienta te aparecen una serie de opciones debajo de la barra de menús. En el caso de las selecciones unas de las opciones que podemos elegir son las de suavizado y calado.

Todas las herramientas de selección tienen la posibilidad de definir un calado. Pero sólo tienen la opción de suavizado las herramientas de selección que tienen la posibilidad de hacer curvas o lineas oblicuas (todas las que no son cuadradas, como la herramienta de lazo poligonal o marco elíptico).

Para definir estos parámetros se pueden elegir en la barra de opciones de herramienta.

Ejemplos de imágenes con suavizado y calado En la siguiente imagen podemos ver el resultado de hacer varias selecciones con diversas configuraciones de suavizado y calado. La selección no ha sido hecha con mucho detalle y esmero, pero sirve para ver el efecto que queríamos comentar.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

22

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

La imagen de más a la izquierda es la original, de la que hemos partido para hacer la selección. La siguiente es el resultado de hacer una selección sin suavizado ni calado. Se pueden observar los bordes que aparecen como dentados, porque siguen la estructura de pixels de la imagen digital, tal cual. La siguiente imagen se obtuvo con una selección con suavizado. Se parece bastante a la imagen que no tiene suavizado, pero si nos fijamos en los bordes podríamos ver son más suaves y las curvas parecen más delicadas (si ampliásemos esa imagen se vería todavía mejor). Por último tenemos un ejemplo de calado, en el que se pueden ver los bordes mucho más difuminados.

Artículo por Miguel Angel Alvarez

Recortar una silueta con Photoshop y selecciones poligonales A la hora de retocar una imagen o de trabajar con archivos gráficos para hacer composiciones , una de las tareas más habituales es realizar selecciones de áreas, para recortar y pegar en la composición o retoque fotográfico. En este taller para novatos en Photoshop vamos a explicar el modo de trabajo con la herramienta de selección poligonal, que sería la más facilita para comenzar a hacer selecciones complejas de áreas irregulares.

Como siempre me gusta decir, lo más importante de Photoshop, al menos para empezar, es dominar las capas y selecciones. Este sería el primer tutorial para conocer las selecciones complejas, para realizar recortes de áreas de la imagen que se podrán utilizar composiciones.

En artículos siguientes veremos otras herramientas para hacer el trabajo con mayor detalle y precisión, utilizando herramientas más complejas.

Herramienta de lazo poligonal No obstante, comencemos viendo dónde está la herramienta de lazo poligonal. Se encuentra junto con la herramienta de lazo y con la de lazo magnético. Si tenemos cualquiera de estas herramientas seleccionadas, para acceder al lazo poligonal simplemente tenemos que hacer clic con el ratón continuadamente durante un par de segundos, para que se nos muestre y podamos seleccionarla.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

23

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Una vez seleccionada podemos experimentar con ella haciendo unas pruebas. Pinchamos en cualquier parte de la imagen y con ello comenzaremos la construcción de la selección. Luego podemos ir haciendo clic en diversas áreas de la imagen para ir definiendo el perímetro de la selección.

Una vez tenemos definido el perímetro de la selección, debemos cerrarla para terminar su definición y poder operar con ella. Cuando se va a cerrar la selección aparece un simbolito al lado del cursor del ratón con un círculo. Esto quiere decir que si hacemos clic la selección quedará cerrada y con ello perfectamente definida.

Otra opción para cerrar una selección poligonal es hacer doble clic en cualquier parte del lienzo. Con ello se cerrará la selección uniendo el primer punto con el lugar donde se ha hecho el doble clic.

Selección de una silueta con el lazo poligonal La selección tiene que comenzar por un punto y acabar en el mismo punto, por lo que podemos escoger cualquier punto que nos interese. Entonces vamos haciendo punto tras punto, el recorrido de la silueta. Algunos consejos para hacer una buena selección serían: • • •

•

•

Ten en cuenta que cuantos más puntos pongas, mejor definida estará la selección.

No des muy rápido al botón del ratón entre punto y punto, no sea que dos clics muy juntos se confundan por un doble clic y se cierre la selección.

Haz bastante zoom para agrandar la visualización de la imagen, para poder hacer la selección sobre un área mayor donde tengas mejores posibilidades de marcar puntos en los lugares correctos.

Si vas a reducir la imagen de dimensiones, conviene hacer la selección de la silueta antes de reducirla. Así, aunque tengas algunas imperfecciones, se disimularán al reducir la imagen. Si lo haces con la imagen reducida directamente se verán los defectos de la selección.

Si te equivocas, porque dejes de seleccionar un área que sí te interesaba o porque selecciones un área que no deseabas, no te preocupes. Lo mejor es que continúes hasta terminar la selección y luego restes o añadas más área. Para restar una selección a otra

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

24

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

•

•

tienes que apretar la tecla alternativa (Alt) cuando comienzas a hacer la selección que quieres restar a la que ya tienes realizada (verás que aparece un signo menos “-” al lado del cursor del ratón). Para añadir una selección a otra utiliza la tecla mayúsculas (también llamada Shift, la que tiene la flecha hacia arriba) en el momento que empieces a hacer la nueva selección que quieres adicionar (verás que aparece un signo “+” al lado del cursor del ratón).

Casi siempre es bueno utilizar un suavizado en la selección. Y en los casos que la silueta seleccionada sea muy grande o la vayamos a pegar encima de otra imagen, está bien experimentar con diversas configuraciones de calado.

Se paciente, porque es una operación delicada y un clic en falso puede perjudicar mucho a la selección realizada durante varios minutos.

Para continuar, sería bueno consultar el artículo que explica los suavizados y los calados en las selecciones.

En artículos posteriores explicaremos cómo hacer la selección con la herramienta pluma, que nos va a permitir resultados mucho mejores, aunque el funcionamiento se haga más complejo.

Artículo por Miguel Angel Alvarez

Selecciones con la varita mágica de Photoshop En este artículo básico de manejo de Photoshop vamos a tratar la herramienta varita mágica, que sirve para hacer selecciones de una manera sencilla y rápida. Quizás este artículo no represente mucha dificultad, pero pensamos que será útil para nuestros lectores más inexpertos y para ir completando nuestra gama de tutoriales sobre las herramientas de Photoshop. Por ahora, todos los artículos sobre el programa los estamos publicando en el manual Taller de Photoshop.

Recuerdo las palabras de un amigo, colaborador y ex-compañero de trabajo, Angel Deblás, -un fiera del diseño gráfico- cuando comentaba hace bastante tiempo algo como esto: “Por facilidad, vamos a utilizar la varita mágica para hacer esta selección, aunque no debería utilizarla.” Su comentario me sorprendió y aun lo recuerdo hoy. Por supuesto, le pregunté qué quería decir con que no debería utilizar la varita mágica, ya que yo la encontraba tan útil.

Angel me comentó que siempre hay en Photoshop alguna manera de hacer una selección y que quede mejor que utilizando la varita mágica.

La razón por la que me he parado a escribir este comentario en este artículo publicado en desarrollo web .com, es que me parece ideal como introducción y para transmitir los conocimientos de un profesional del diseño que una vez pude absorber. Así que, aunque la varita mágica nos parezca útil, sin lugar a dudas, tenemos que administrar su uso y no pasarnos de cómodos. A veces convendrá utilizar la selección poligonal o la herramienta de pluma.

La herramienta varita mágica de Photoshop sirve, como decía, para hacer selecciones. Las selecciones que se pueden hacer con la varita son de cualquier tipo, cuadradas, redondas, poligonales o de formas irregulares, así que es bastante versátil. El uso es el siguiente: Seleccionamos la herramienta varita mágica, que tiene esta forma:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

25

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Luego podemos hacer clic en cualquier parte de una imagen con la varita y entonces obtendremos una selección dentro de la imagen. Para establecer los límites de la selección, Photoshop evaluará los colores que hay al lado del pixel marcado con el clic y si son el mismo, o similares, la selección también abarcará esos puntos. De esta manera, continúa muestreando colores de la imagen y añadiéndolos a la selección si son parecidos. El resultado es que la selección va creciendo por las partes de la imagen que tengan un color homogéneo o similar.

Así pues, los límites de la selección creada serán marcados por la forma de la propia imagen y los colores que tenga.

La varita nos sirve, por ejemplo, para seleccionar siluetas en una fotografía. Por ejemplo, si tenemos una foto con un cielo homogéneo y utilizamos la varita sobre el cielo, se seleccionará toda la área azul. Podemos ver en la siguiente imagen una selección hecha con la varita mágica del cielo de esta foto tomada en Valencia.

Como veremos en la imagen, se ha seleccionado la mayoría del cielo, ajustando los bordes de la selección al borde de las figuras captadas en la foto. Como veremos, no todo el cielo se ha seleccionado, porque hay partes del mismo que no son muy parecidas al color azul sobre el que hemos hecho clic inicialmente y por tanto no se han muestreado como colores parecidos y

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

26

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

no se han cargado en la selección.

Opciones de la varita mágica de Photoshop Con las opciones de la herramienta varita podemos modificar su comportamiento, para por ejemplo, decir cuan estricto o tolerante debe ser el muestreo de la imagen para definir los bordes de la selección. Las opciones de cualquier herramienta de Photoshop las podemos ver generalmente en la parte de arriba de la ventana del programa y si no aparecen, podemos forzar que se muestren con el menú Ventana – Opciones.

La más importante de las opciones de varita es la Tolerancia. Que permite especificar con un número cuan tolerante o estricta a cambios en los colores es la selección. A menor valor de tolerancia, más estricto será el muestreado de colores. De tal modo que, si ponemos tolerancia cero, sólo se seleccionarían las partes contiguas al punto donde hemos hecho clic de la imagen que tengan el mismo color. Si la tolerancia es muy alta la selección se expandirá, aunque los colores varíen más. Si al hacer la selección de la anterior imagen hubiéramos marcado tolerancia más alta, por ejemplo 60, se hubiera seleccionado toda la área de la foto que corresponde al cielo.

Por tanto, para ajustar las partes de la imagen que entrarán dentro de la selección con la varita, debemos ajustar el valor tolerancia.

Entre las opciones también hay otras importantes: Suavizar, permite que los bordes de la selección se suavicen, de modo que aunque sean curvos, no se produzca un pixelado.

Contiguo, es para que la selección sólo sea de píxeles contiguos. Es el modo por defecto y como hemos explicado la herramienta. Pero si no lo marcamos, permite seleccionar todos los pixel de la imagen que tengan un color parecido, aunque no estén contiguos al lugar donde hemos hecho clic inicialmente.

Muestrear todas las capas tiene una utilidad interesante cuando trabajamos con distintas capas en Photoshop. Una cosa importante: con la varita mágica en principio hacemos selecciones sobre la capa en la que estamos trabajando, sin muestrear otras que puedan estar abajo o arriba. Si seleccionamos muestrear todas las capas, haremos que la varita se fije en todas ellas como si fuera una sola.

Artículo por Miguel Angel Alvarez

Herramienta Pluma de Photoshop La herramienta pluma de Photoshop nos permite dibujar trazados de una manera detallada y con posibilidades completas, haciendo tanto rectas como curvas. Además, la pluma tiene la particularidad que nos permite alterar un trazado una vez realizado o, si nos equivocamos, volver hacia atrás con el comando edición-deshacer.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

27

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Lo malo de la herramienta pluma, al principio, es casi siempre cuesta un poco para aprender a manejarla y a veces hace cosas que no esperamos o no controlamos. No obstante, es una herramienta muy útil para hacer diversas cosas con Photoshop, no sólo trazados o siluetas complejas, sino también selecciones avanzadas.

La herramienta de pluma es la siguiente:

Debajo de la herramienta pluma hay varias otras herramientas complementarias que probablemente necesitemos usar en determinados momentos para realizar algunas acciones con los trazados o las formas.

Para empezar a operar con la herramienta pluma de Photoshop podemos seleccionarla y pulsar en cualquier parte de la imagen. Con ello colocaremos un primer punto del trazado. Luego podemos pulsar en cualquier otra parte de la imagen y colocaremos un segundo punto, creando un trazado que va desde el primer al segundo punto colocado (estos se llaman puntos de ancla). Podemos continuar poniendo puntos de ancla y se irá dibujando el trazado, a base de rectas, entre los distintos puntos de ancla que venimos poniendo. Merece la pena experimentar un poco con la herramienta en este punto para ver su comportamiento.

Hacer curvas con la herramienta pluma Una curva con la herramienta pluma es muy fácil de hacer. En nuestra sucesión de colocación de puntos de ancla, después de colocar un punto de ancla, haciendo clic, vamos a mantener pulsado el ratón y arrastrar en cualquier dirección. Veremos que se crea un curva y que al mover el ratón, arrastrando con el botón izquierdo pulsado, la curva se va modificando.

Una vez tenemos hecha la curva deseada vamos probar a colocar un nuevo punto de ancla.

Veremos como el trazado continúa con otra curva, que se adapta de manera que la curva anterior y la nueva estén perfectamente trazas una como continuación de la otra.

Como podemos ver en la imagen anterior tenemos dos curvas en el trazado, una adaptada a la otra. Si queremos que la segunda línea del trazado no tenga en cuenta la curva anterior podemos utilizar la herramienta complementaria Convertir punto de ancla. Entonces pulsamos en la línea que sale hacia fuera del trazado, y la arrastramos a otra posición. Podemos ver el resultado en la siguiente imagen:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

28

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Si quisiésemos que la segunda línea del trazado fuera recta, entonces colocaríamos la línea que sale del punto de ancla encima del propio punto de ancla.

Podemos seguir colocando puntos de ancla hasta que terminemos el trazado, colocando los nuevos puntos también con la herramienta pluma. Para completar o terminar el trazado tenemos que pulsar en el primer punto de ancla que creamos, veremos que el cursor del ratón con la herramienta pluma, que aparece un pequeño circulito, para avisar que colocando ese punto de ancla se cerrará el trazado.

Transformar un trazado ya terminado Una vez terminado el trazado todavía podemos seguir transformándolo, con la herramienta convertir punto de ancla, para transformar las curvas o con otras herramientas complementarias. Por ejemplo, con la herramienta Añadir punto de ancla, podremos adicionar nuevos puntos de ancla al trazado, que a su vez podremos convertir en curvas.

Continuar un trazado no terminado con la pluma A veces nos ocurrirá que estamos dibujando un trazado con la pluma, que no hemos llegado a completar, es decir, no hemos colocado puntos de ancla haciendo un recorrido completo que Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

29

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

acabe en en el primer punto de ancla colocado. Entonces puede que necesitemos operar con otras herramientas de Photoshop como por ejemplo la herramienta de mover para recolocar el trazado en otro lugar. Entonces queremos continuar el trazado incompleto colocándole nuevos puntos de ancla. Pero seleccionamos la herramienta pluma y ocurre que Photoshop empieza un nuevo trazado, en vez de continuar con el que estábamos realizando.

Para continuar con un trazado no completado entonces tenemos que, con la herramienta pluma, pulsar encima del primer o último punto de ancla realizado, según queramos continuar el trazado por el primer o último punto dibujado. Veremos que el cursor de la herramienta le sale un simbolito como con una línea y un círculo en medio. Después de haber hecho clic en el punto de ancla deseado, primero o último, hacemos clic en otra parte para colocar un nuevo punto de ancla continuación del pulsado.

Experimentar con la herramienta pluma Como hemos visto, hay bastantes detalles para trabajar con trazados y diversas herramientas complementarias que nos pueden ayudar a realizar el trazado o transformar uno ya realizado.

Lo mejor es experimentar por nosotros mismos para adquirir cierta soltura con la herramienta pluma de Photoshop, y las complementarias, porque no es una cosa fácil de dominar.

Artículo por Miguel Angel Alvarez

Selección de una silueta con la herramienta pluma de Photoshop El otro día estuvimos dando unas nociones sobre cómo hacer una selección en Photoshop de una silueta, para luego hacer con ella un recorte para utilizar en cualquier composición de imagen. Vimos la técnica para realizar la selección con la herramienta de lazo poligonal, y luego vimos acerca de las opciones de suavizado y calado de las selecciones. Ahora vamos a ir un paso adelante explicando la técnica para hacer selecciones con la herramienta pluma de Photoshop.

La herramienta pluma de Photoshop sirve para realizar trazados o formas que luego podemos utilizar para varias cosas. Nosotros en este caso vamos a aprender a utilizar la herramienta pluma para hacer una selección avanzada, que incluya líneas rectas, pero también curvas perfectamente trazadas. Además, la pluma nos da la posibilidad de dibujar la selección en varios pasos, sin problema por equivocarnos, porque siempre podemos volver atrás y seguir haciendo la selección por el sitio donde la dejamos, mientras que estaba bien hecha.

La experiencia me ha demostrado que es mucho más interesante utilizar la pluma para hacer una selección, en caso que sea complicada o muy grande, en comparación con la herramienta lazo poligonal. Por varias razones: •

•

Porque con la herramienta pluma podemos realizar curvas perfectas, que podemos adaptar a la silueta que queremos seleccionar. Con el lazo poligonal sólo podemos hacer líneas rectas. Con lo que los resultados con la pluma serán siempre mucho mejores.

Porque la herramienta pluma permite editar un trazado a medida que lo vamos haciendo, pudiendo volver hacia atrás si nos hemos equivocado, con el menú edición -

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

30

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

deshacer, o bien alteando el trazado realizado una vez ha sido terminado.

Antes de continuar, conviene leer el artículo donde explicamos los detalles generales de la herramienta pluma.

Hacer una selección con la herramienta pluma Con Photoshop hacer una selección de una silueta es sencillo. Algunas recomendaciones iniciales ya las dimos cuando explicamos cómo hacer selecciones con el lazo poligonal.

Para empezar el trazado colocaremos un primer punto de ancla. Luego iremos colocando nuevos puntos de ancla pulsando en otros lugares del elemento que queremos seleccionar. A medida que coloquemos otros puntos de ancla se van haciendo rectas, pero siempre podemos hacer una curva, en el momento que colocamos un punto de ancla, sin dejar de pulsar el botón izquierdo, arrastrando con el ratón.

Cuando hacemos trazados y colocamos curvas, el siguiente punto de ancla continuará la curva realizada en el anterior punto de ancla. Esto es un efecto que suele ser indeseable y para evitarlo podemos utilizar la herramienta Convertir punto de ancla para mover las líneas que salen de los puntos de ancha hacia fuera. A veces conviene llevar esas líneas para el centro del todo, para que el anterior punto de ancla colocado no influya el siguiente que pongamos.

Por cierto, con la herramienta pluma seleccionada, cuando pulsamos alternavia (ALT) nos sale automáticamente la herramienta Convertir punto de ancla, para no tener que seleccionarla en la barra de herramientas de Photoshop.

Otra cosa que cabe comentar es que a veces dejamos un trazado no completado y entre medias utilizamos otra herramienta de Photoshop, entonces al poner un punto de ancla nuevo, se inicia un nuevo trazado. Entonces, para continuar con el trazado que teníamos antes tenemos que seleccionar la capa donde está el trazado que queremos proseguir y, con la herramienta de pluma, pulsar en el último o el primer punto que había en el trazado incompleto.

Pero todas estas técnicas del uso de la pluma ya las habíamos comentado en el artículo herramienta pluma de Photoshop.

Aquí vemos un trazado a medio completar en el que hemos utilizado la pluma, lo que nos permite crear líneas curvas adaptadas al contorno del objeto que se desea seleccionar.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

31

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

A medida que vamos haciendo el trazado veremos que se va creando un relleno, que a veces experimentaremos que nos tapa la propia imagen y nos dificulta hacer la silueta. La soluci贸n es alterar la opacidad de la capa que contiene el trazado, desde la ventana de capas.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html 漏 Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizaci贸n.

32

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Hacemos el trazado, hasta completarlo, terminando otra vez por el primer punto que empezamos. Con ello quedará realizado el trazado del área que pretendemos seleccionar. El resultado será algo como lo que vemos en esta imagen

Para hacer la selección a partir de este trazado ya sólo nos queda, con la herramienta pluma, hacer clic con el botón derecho en el trazado y pulsar en "Hacer selección...". Nos aparecerá un cuadro de diálogo para la creación de la selección.

Entre las opciones que encontraremos al hacer la selección están el conocido suavizado y el calado.

Una vez realizada la selección veremos la calidad de la misma, sobretodo en cuanto a curvas se refiere, que quedan mucho mejor definidas utilizando la herramienta de pluma, que con la herramienta de lazo poligonal.

En definitiva, hacer selecciones con la herramienta pluma de Photoshop, tiene muchas ventajas.

Artículo por Miguel Angel Alvarez

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

33

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Capas de Photoshop Las capas de Photoshop son una de las herramientas que tenemos que dominar para poder trabajar con soltura con este potente programa de diseño. La otra cosa que debemos aprender a dominar son las selecciones. En el Taller de Photoshop de DesarrolloWeb.com ya hemos publicado varios artículos sobre las selecciones, así que es el turno de hablar de las capas.

El diseño en Photoshop, y en muchos otros programas de diseño gráfico, se realiza a través de la creación de diversas capas. Las capas son algo así como componentes independientes de la imagen, sobre las que se puede dibujar o crear efectos de manera que afecten sólo a dicha capa. Al superponer diversas capas se obtiene el diseño completo de la imagen. ¿Qué ventajas se obtiene al trabajar con distintas capas?

Sería una pregunta interesante de responder, para poder entender la razón por la que el trabajo con Photoshop se basa en la creación de distintas capas. Al trabajar con capas, como se ha dicho, se puede operar sobre una parte de una imagen, sin que se alteren otras partes de la misma. Esto es muy útil, ya que nos permite realizar cambios en elementos de la imagen sin preocuparnos del resto del diseño.

Una de las principales utilidades de las capas consiste en que cualquier capa se puede posicionar de manera independiente. Es decir, podemos tener una capa con un elemento gráfico y al mover esa capa, podemos situar ese componente en cualquier otro lugar de la imagen, sin que se desplacen otras partes del gráfico.

Al crear distintas capas podemos también realizar efectos sobre las mismas de manera independiente. Por ejemplo, podemos tener un texto en la imagen que está en una capa y luego hacer un efecto de sombra sobre la capa de texto. Como el efecto es independiente para esa capa, el sombreado sólo se aplicará al texto, dejando el resto de la imagen inalterado.

Otras de las muchas utilidades recurrentes a la hora de trabajar con capas es crear una nueva capa, copia de una anterior. Entonces podemos experimentar haciendo cambios en esa capa copia con total libertad. Si luego por cualquier cuestión no nos gustan los cambios, siempre podemos tirar a la basura la capa copiada y alterada y volver a la capa original de la que habíamos partido.

Lo cierto es que las utilidades de las capas son muy numerosas y las podremos experimentar en nuestro trabajo en el día a día con Photoshop. Cuando hacemos cambios a una imagen, para estar seguros que no vamos a estropear nada, siempre conviene crear una nueva capa y hacer nuestras pruebas o dibujos sobre ella. Si no nos gusta lo que hemos hecho, siempre podemos desechar la capa creada sin que nos afecte a nuestra imagen.

Trabajo con Capas en Photoshop Casi todo el trabajo con capas se centraliza en la ventana de capas. Esta ventana se encuentra abierta por defecto al iniciar Photoshop, pero si no la vemos, siempre podemos mostrarla con el menú de "Ventana – Capas". A continuación vemos la ventana de capas:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

34

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

El otro lugar desde donde se pueden ordenar comandos sobre capas es el menú de "Capa", que tiene diversas acciones útiles y recurrentes para efectuar sobre las mismas.

En la ventana de capas tenemos un listado de todas las capas que forman parte de nuestro diseño. Conviene estar siempre muy pendientes de lo que pasa en la ventana de capas, para no despistarnos y controlar el proceso de diseño. Lo primero que tenemos que ver en esta ventana es que hay una capa que está con el fondo de color azul. Esto quiere decir que esa es la capa activa. Cualquier acción que realicemos con Photoshop se aplicará sobre la capa activa.

Por ejemplo, si utilizamos el pincel para pintar cualquier cosa en la imagen, en realidad estaremos pintando sólo sobre la capa activa.

Para cambiar la capa activa, simplemente tenemos que hacer clic en la ventana de capas sobre la capa que queremos trabajar con ella.

Otro ejemplo de la importancia de estar atentos a cuál es la capa activa de nuestra imagen es la creación de selecciones. Al hacer una selección y copiar el contenido de la imagen (CTRL + C o bien menú "Edición – Copiar"), lo que hacemos es copiar sólo el contenido de la capa activa.

Es importante saber cuál es la capa activa, porque ocurrirá en ocasiones que copiemos un contenido que no estamos deseando, por estar trabajando sobre una capa distinta a la esperada.

Nota: podemos copiar el contenido de un área seleccionada sobre la imagen completa (todas sus capas), en vez de solamente la capa activa con el menú "Edición - copiar combinado" o la tecla rápida "Mayúsculas + CTRL + C").

Otra cosa que tenemos que tener muy en cuenta es el orden de capas, puesto que dicho orden incide directamente en el diseño de la imagen, al mostrarse las capas que están más arriba sobre las capas que están abajo. Las que hay arriba se superponen y pueden tapar los contenidos de las capas que hay debajo. Para alterar el orden de las capas simplemente tenemos que, dentro de la ventana de capas, arrastrar y soltar una capa en otro lugar.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

35

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Problema típico que nos encontraremos al trabajar con Photoshop está directamente relacionado con el orden de las capas y la capa activa. Nos ocurrirá a veces que hacemos cambios sobre la imagen, como pintar con el pincel o rellenar de color, y luego no vemos que la imagen se altere. La razón de ello puede ser porque tenemos una capa encima, que no deje ver lo que estamos pintando sobre una capa cuyo orden está más abajo.

Hay una capa especial que es la capa "fondo". No todos los diseños de Photoshop tienen una capa fondo, de hecho al crear un archivo nuevo podemos elegir si queremos un fondo de color o un fondo transparente. En este último caso, simplemente no se colocará ningún fondo, para tener una imagen con fondo transparente. La capa fondo es especial porque no se puede mover y hay algunas otras acciones que tampoco se pueden realizar sobre el fondo. Así que tener cuidado con eso.

En el siguiente artículo de este manual vamos a ver una serie de las acciones más importantes a realizar con capas.

Solo un detalle más, que ahora no viene mucho al caso, pero que debe indicarse para ahorrar posibles quebraderos de cabeza. No todas las imágenes que abramos con Photoshop tienen la posibilidad de crear capas. Por ejemplo, si abrimos un archivo .gif, veremos que no se pueden crear capas. Esto es porque el modo de la imagen es "Indexado" y ese modo no permite capas. Pero podemos cambiar el modo de la imagen fácilmente desde el menú "Imagen - Modo - Color RGB".

Artículo por Miguel Angel Alvarez

Acciones más comunes sobre capas El trabajo con capas en Photoshop es muy rico, de hecho, cuando tengamos cierta práctica con el programa, comprobaremos estamos mucha parte del tiempo de diseño haciendo cosas con las capas. En el artículo anterior publicado en DesarrolloWeb.com sobre las capas de Photoshop ya vimos algunas de las acciones más comunes, como seleccionar una capa o cambiar el orden de las mismas. Ahora vamos a ver otra serie de acciones comunes que nos van a servir para explotar las posibilidades de las capas.

Crear una capa nueva Se puede crear una capa de dos maneras distintas. La primera es a través del menú "Capa Nueva - Capa". La otra manera es a través de la ventana de capas, con el icono de capa nueva, que está en la parte de abajo.

Al crear una capa nueva se coloca justo encima de la capa activa que tuviéramos en ese momento y además se activa la capa que se acaba de crear. Con este paso podremos crear tantas capas como queramos para ir practicando los conocimientos adquiridos.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

36

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Nota: al pegar cualquier pedazo de imagen sobre un diseño de Photoshop, siempre se crea una nueva capa con el contenido copiado previamente.

Eliminar una capa Con el botón de la derecha de capa nueva (con forma de un cubo de basura) se puede eliminar la capa que tengamos seleccionada como activa.

Otra manera de borrar una capa es con el menú "Capa - Eliminar - Capa". Y también podemos eliminarla desde la ventana de capas, arrastrando la capa que deseamos borrar y soltando sobre el botón de eliminar capa.

Ocultar una capa Podemos ocultar una capa, para que no se vea en la imagen, pero sin eliminarla, con el icono con forma de ojo que hay al lado de cada una de las capas de la ventana de capas. Esto es muy útil para dejar de mostrar elementos, pero sin perderlos del proyecto, por si acaso los queremos recuperar luego.

Esta acción también se puede ejecutar desde el menú "Capa - Ocultar capas".

Vincular capas En ocasiones podemos desear que dos capas estén unidas momentáneamente, para realizar acciones como alterar la posición, sobre dos o más capas a la vez. Para ello podemos seleccionar dos o más capas del listado que encontramos en la ventana de capas. (podemos seleccionar varias capas pulsando sobre una y luego con el botón Control -CTRL- haciendo clic sobre otra u otras).

Para vincular las capas seleccionadas basta con accionar el menú "Capa - Vincular capas".

Entonces aparecerá un símbolo de cadena al lado de las capas vinculadas.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

37

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

También podemos vincular capas, seleccionándolas y luego apretando con el botón derecho sobre una de ellas y haciendo clic en la opción "Vincular capas".

Duplicar una capa Podemos duplicar una capa para tener dos copias de la misma capa, que puede ser muy útil para muchos casos, como trabajar con una capa copia, dejando la original inalterada, para volver si se desea a la capa como estaba al principio. También puede ser muy útil para duplicar un elemento de nuestro diseño que queremos que se repita. Con la práctica veremos que esta acción es muy recurrida.

Para ello simplemente podemos arrastrar la capa que deseamos duplicar sobre el icono de nueva capa, de la ventana de capas. También lo podemos hacer desde el menú "Capa Duplicar capa".

Combinar capas Para acabar con esta serie de acciones típicas sobre capas, vamos a mostrar cómo combinar capas, esto es, unir dos o más capas para que se junten en una única capa. Combinar capas también es una acción bastante útil cuando tenemos varios elementos que sabemos que siempre van a estar juntos. También será util cuando tenemos varias capas y queremos aplicar un estilo de capa sobre todas ellas a la vez.

Para combinar capas tenemos que seleccionar varias capas a la vez, igual que hicimos para vincularlas, y luego ir al menú "Capa - Combinar capas". Veremos que todas las capas que habíamos seleccionado se unen en una sola.

Esta acción también se puede ejecutar desde la ventana de capas, haciendo clic con el botón derecho sobre cualquiera de las capas seleccionadas y marcando la acción "Combinar capas".

Conclusión Hasta aquí hemos presentado un buen listado de acciones sobre capas que a buen seguro servirá para que practiquemos bastante con las capas en Photoshop. En futuros artículos de desarrolloweb ofreceremos más detalles sobre el trabajo con capas Artículo por Miguel Angel Alvarez

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

38

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Estilos de capa en Photoshop Las capas de Photoshop tienen la posibilidad de incorporar estilos o efectos gráficos, como sombras, resplandor, relieve, trazos, etc. con una facilidad extrema. En este artículo de DesarrolloWeb.com, pensado para las personas que conozcan menos el programa de retoque fotográfico, veremos cómo aplicar estilos de capa.

En anteriores artículos habíamos explicado lo que son las capas de Photoshop, indispensables de manejar bien el programa, y algunas de las acciones típicas que se realizan con ellas, que conviene leer. Así pues, en esta misma línea de trabajo, vamos a seguir viendo utilidades de las capas.

Qué son los estilos de capa Los estilos de capa son una utilidad para aplicar efectos rápidos y personalizables a elementos de una imagen. A golpe de ratón podemos conseguir algunos efectos típicamente utilizados en composiciones gráficas, como sombras o resplandores, sin tener que complicarnos con procedimientos o trabajos que requieran de varios pasos. Además, lo bueno de los estilos de capa es que se aplican dinámicamente a las capas, de modo que, si la capa cambia, el estilo se adapta dinámicamente al nuevo formato de la capa.

Antes de existir los estilos de capa para hacer una sombra, por poner un ejemplo, teníamos que realizar una serie de pasos como realizar una selección del área visible de una capa, calar la selección, pintar de negro en una nueva capa por debajo del elemento a sombrear y finalmente ajustar la transparencia deseada para la sombra. Todos estos pasos ahora se resumen en uno único que es el estilo de capa sombra. Además, si en cualquier momento cambia la capa sobre la que se ha aplicado el estilo, la sombra cambiará también automáticamente, siendo que antes de los estilos de capa, tendríamos que volver a hacer todos los pasos para generar la sombra, cada vez que cambiase la capa a sombrear.

Cómo aplicar un estilo de capa Cuando tenemos una capa creada, podemos acceder al cuadro de diálogo para crear estilos de capa haciendo un doble clic sobre la capa que se quiere aplicar el estilo, en la ventana de capas. Esto nos abrirá una ventana que contiene un listado de estilos, que podemos seleccionar por medio de unos checkbox y donde además podemos configurar cada uno de estos estilos.

El menú de estilos de capa también se puede acceder primero seleccionando la capa sobre la que queremos crear estilos y luego activando el estilo de capa deseado a través del menú "Capa - Estilos de capa - El nombre del estilo de capa a aplicar o configurar".

Nota: Los estilos de capa sólo se pueden crear sobre capas, en principio a la capa especial "fondo" no se le pueden aplicar estilos de capa.

En la ventana de estilos de capa, se pueden seleccionar uno o varios estilos y haciendo clic con el ratón en cada uno de los diferentes items, se accede a un formulario donde se pueden configurar distintos parámetros para cada estilo. Se puede ver en la siguiente imagen la ventana de estilos de capa.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

39

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Podemos hacer nuestras propias pruebas creando una capa con cualquier contenido, pintando un área seleccionada o creando una capa de texto y accediendo como se ha dicho a los estilos de capa. Luego sugiero hacer cambios sobre la capa (pintando otras áreas o escribiendo nuevo texto) y veremos que los estilos se adaptan al nuevo contenido de la capa.

Editar un estilo de capa Una vez creado un estilo de capa se puede editar en cualquier momento, para cambiar las propiedades de cada uno de los estilos aplicados (por ejemplo para cambiar la transparencia a una sombra, o la grosura de un trazo). Para ello podemos acceder también de dos modos, a través de la ventana de capas o bien a través del menú "capa - Estilos de capa". Lo más común es utilizar la ventana de capas como explicaremos ahora.

En la siguiente imagen podemos ver cómo aparece una flecha, sobre la capa en la que hemos creado el estilo, en la ventana de capas.

Al pulsar la flecha de la capa, se puede ver el un listado de los estilos que se han aplicado a esta capa. Con un doble clic en el estilo de la capa se puede acceder a la ventana de estilos de capa, viendo directamente el formulario de personalización del estilo sobre el que se ha hecho doble clic.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

40

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Copiar estilo de capa A veces tenemos necesidad de aplicar el mismo estilo de capa a dos capas distintas. Podemos haber aplicado el estilo en una capa y luego copiarlo a otra. Esto se hace con un clic con el botón derecho sobre la capa y seleccionando la opción "Copiar estilo de capa".

Luego podemos pegar ese estilo de capa en cualquier otra con el botón derecho del ratón sobre la capa y seleccionando "Pegar estilo de capa". Con esto ambas capas tendrán los mismos estilos de capa.

Los estilos de capa, como hemos visto en este artículo de Photoshop publicado en desarrolloweb.com, son muy fáciles de utilizar y configurar conforme a nuestras necesidades, para hacer efectos útiles y atractivos visualmente sin necesidad de esfuerzos ni conocimientos.

Artículo por Miguel Angel Alvarez

Máscaras de capa en Photoshop Las máscaras de capa son un recurso de diseño gráfico que está implementado en programas como Photoshop o Gimp. Son una de esas utilidades que resultan a menudo complejas o desconocidas para los usuarios nóveles de Photoshop, pero que vamos a tratar de explicar de manera sencilla en este artículo de DesarrolloWeb.com.

He de decir que las máscaras de capa es un tema relativamente nuevo para mi. Estuve trabajando con Photoshop durante años sin conocerlas, tan solo utilizándolas para la realización de algún tutorial de esos que te indican paso a paso cómo conseguir determinado efecto. Recientemente, después de estudiarlas mínimamente para poder comprender su utilidad, sé que muchas cosas que hacía en mi día a día con Photoshop las podría haber realizado más fácilmente con las máscaras de capa. Así que, sin más tardar, vamos a ver qué son y cómo utilizarlas.

Qué son las máscaras de capa Existen diversas maneras de explicar las máscaras de capa. Por el momento podemos hacernos la idea que son una herramienta que permite ocultar partes de una capa, pero sin Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

41

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

borrar esas partes, con lo que luego las podríamos recuperar simplemente desechando la máscara de capa.

Otra manera de entender las máscaras de capa es como si fueran selecciones. Puedes crear una máscara de capa y pintar en ella, entonces en realidad lo que estás haciendo es seleccionando o deseleccionando partes de esa capa.

En definitiva, sea cual sea la explicación teórica que prefiramos, voy a intentar decir qué son por la práctica.

En Photoshop tenemos una capa. Entonces creamos una máscara de capa (luego veremos cómo se hace esto, tranquilos). En la máscara podemos pintar en escala de grises, puesto que la máscara de capa realmente sólo permite pintar sobre ella en blanco, negro o en una tonalidad de gris.

Cuando pintamos en blanco, estamos seleccionando una parte de la capa y con ello estamos haciendo que se visualice normalmente. Cuando pintamos en negro sobre la máscara de capa, estamos deseleccionando una parte de esa capa y con ello se oculta ese área pintada de negro. Con los grises lo que conseguimos es un medio término, se seleccionan parcialmente los píxeles pintados de gris y con ello se consigue que se transparenten un poco (mayor grado de transparencia cuanto más oscuro sea el gris).

Como decía, la máscara de capa es independiente a la capa, por lo que en cualquier momento podemos deshabilitarla o eliminarla y con ello volvería a verse la capa tal y como la teníamos antes de crear la máscara. O podemos pintar de blanco sobre una parte previamente pintada de negro, con lo que haríamos que esas partes se volviesen a ver en la capa.

Cómo hacer una máscara de capa con Photoshop Podemos crear una máscara de capa en Photoshop desde dos menús distintos.

A) Desde la ventana de capas, con el icono que tiene forma de cuadrado con un círculo en medio, que podemos ver marcado en la siguiente imagen:

B) Desde el menú de "Capa - Máscara de capa - descubrir todas".

Con estas dos posibilidades creamos una máscara de capa, donde en esa máscara de capa están todos los píxeles pintados en blanco, con lo que la capa se verá entera, tal cual estaba anteriormente.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

42

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ahora podemos pintar de negro sobre la capa (en realidad estaremos pintando sobre la máscara de capa) y veremos que esas partes que pintamos encima se borran de la capa. Si pintamos en gris, se ocultaría parcialmente la capa, consiguiendo que esas partes en gris fueran semitransparentes.

Nota:Desde el menú de "Capa - Máscara de capa - Ocultar todas" crearíamos una máscara de capa donde toda la máscara está pintada de negro, con lo que la capa entera se ocultaría. Deberíamos entonces, por probar, pintar sobre ella en blanco para mostrar partes de la capa.

Una vez creada la máscara de capa, se mostrará en la ventana de capas, sobre la capa donde la hemos creado. Haciendo clic con el botón derecho sobre la máscara de capa accederemos a un menú contextual con opciones sobre la máscara de capa.

Dentro de la máscara de capa podemos pintar con cualquiera de las herramientas de Photoshop, por dar un ejemplo, incluso podríamos hacer un degradado de grises y ocultar parte de la capa con un gradiente de transparencia.

Cuando tenemos una capa que contiene una máscara de capa podemos pintar sobre la capa, haciendo clic sobre el icono de la capa, o pintar sobre la máscara de capa, haciendo clic en el icono de la máscara de capa. En la siguiente imagen están señalados los iconos de capa y máscara de capa.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

43

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Podéis practicar vosotros mismos con el uso de las máscaras de capa en Photoshop, para ir haciendo vuestras propias pruebas y en futuros artículos de desarrolloweb .com presentaremos ejemplos prácticos de uso de esta herramienta.

Artículo por Miguel Angel Alvarez

Sectores de Photoshop Es probable que en alguna ocasión nos hayamos encontrado con la necesidad de partir una imagen en varios trozos por diversos motivos. Por ejemplo, para realizar un diseño de página avanzado o para dividir una imagen muy grande en varios pedazos, con objeto de que se cargue más rápidamente. Este último es el cometido de este artículo, que describimos con más detalle a continuación.

A veces tenemos una imagen muy grande, con el logotipo de la empresa y una composición de fotografías u otros elementos gráficos. Esa imagen muy grande puede tardar mucho en cargar y si está, por ejemplo, en la portada, podría ocurrir que el visitante se impaciente y no llegue a ver cargar la imagen, abandonando el sitio web por culpa de una carga muy lenta. Una de las posibilidades para mejorar la carga y hacer que el visitante pueda ver alguna cosa antes de que la imagen termine de cargar por completo, consiste en partir la imagen en varios trozos.

De este modo, es muy probable que unos trozos se carguen antes que otros y que el visitante pueda ver partes de la imagen que van apareciendo, aunque la imagen completa todavía no pueda visualizarse.

Esta es una técnica bastante habitual que seguro que muchos habremos visto en diversas páginas web. Cuando yo veo una de estas imágenes partidas, muchas veces, espero a que se cargue entera, para ver el resultado completo, Otras veces, gracias a una imagen que se descarga partida en varios pedazos, también entiendo que la página está cargando correctamente y puede que no sea necesario visualizarla entera antes de pulsar cualquier enlace de mi interés.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

44

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Cómo partir una imagen en varios trozos fácilmente con Photoshop Adobe Photoshop, uno de los mejores programas de retoque fotográfico, contiene una herramienta para hacer sectores que nos puede servir para partir una imagen fácilmente. En la imagen siguiente podemos ver cuál es esta herramienta.

Con la herramienta de sector podemos definir diversos pedazos o sectores en una imagen.

Para ello haremos uno o varios cuadrados con la herramienta, de manera similar a como hacemos una selección. Los sectores se configurarán automáticamente para que la imagen quede dividida como deseemos. Por ejemplo, si hacemos un sector con la mitad de una imagen, automáticamente se creará otro sector para la otra mitad de la imagen.

Merece la pena que experimentemos un poco con la herramienta para crear sectores de distintas formas. Cuanto más sencilla sea la configuración de los sectores, más sencillo será el código fuente de la página resultante. Por ejemplo, en la imagen siguiente podemos ver como se han definido 8 sectores, dispuestos en 4 filas y 2 columnas.

Continuamos con el paso "guardar la imagen optimizada como", que se encuentra en el menú de archivo. Entonces nos aparecen 4 copias de la imagen, una la original y las otras 3 con distintas configuraciones de la imagen, optimizadas más o menos en tamaño, colores, calidad, etc. En esa ventana podemos seleccionar una de las 3 posibles optimizaciones, configurada como nosotros deseemos, y seleccionar la opción que pone "guardar HTML e imágenes *.html". Con ello se guardará un código HTML y un directorio con las imágenes generadas para cada uno de los sectores, optimizadas tal como nosotros hayamos escogido. Este paso lo podemos ver en la siguiente imagen.

Con ello vamos a conseguir, tal como habíamos adelantado, un código HTML que tendrá una tabla y en cada casilla de la tabla una imagen con cada sector, tal como se ha configurado con la herramienta de sectores.

La tabla tendrá esta forma. Este código ha sido generado con Photoshop, lo escribimos tal cual aparece. <TABLE WIDTH=580 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD> <IMG SRC="Images/ejemplosectores_01.jpg" WIDTH=294 HEIGHT=123 ALT=""></TD> <TD> <IMG SRC="Images/ejemplosectores_02.jpg" WIDTH=286 HEIGHT=123 ALT=""></TD> </TR> <TR> Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

45

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

<TD> <IMG SRC="Images/ejemplosectores_03.jpg" WIDTH=294 HEIGHT=127 ALT=""></TD> <TD> <IMG SRC="Images/ejemplosectores_04.jpg" WIDTH=286 HEIGHT=127 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Images/ejemplosectores_05.jpg" WIDTH=294 HEIGHT=139 ALT=""></TD> <TD> <IMG SRC="Images/ejemplosectores_06.jpg" WIDTH=286 HEIGHT=139 ALT=""></TD> </TR> <TR> <TD> <IMG SRC="Images/ejemplosectores_07.jpg" WIDTH=294 HEIGHT=111 ALT=""></TD> <TD> <IMG SRC="Images/ejemplosectores_08.gif" WIDTH=286 HEIGHT=111 ALT=""></TD> </TR> < /TABLE> Cómo optimizar los distintos sectores Como decíamos, Photoshop ofrece la posibilidad de optimizar la imagen a mostrar en base a varios factores, por ejemplo podremos decidir entre utilizar el formato GIF o JPG, así como definir los colores a utilizar en el GIF o la calidad del JPG. Para ello, una vez dentro de la opción "guardar optimizada como" debemos seleccionar qué sector queremos optimizar (esto se hace con la herramienta de seleccionar sector, que se encuentra arriba a la izquierda) y definir las opciones de optimización en la parte de arriba a la derecha.

Es muy habitual que deseemos aplicar la misma optimización a toda la imagen, es decir, guardarla toda, por ejemplo, como JPG y con calidad 20. Para ello deberíamos seleccionar sector a sector y aplicarle los mismos valores de formato, o bien seleccionar todos los sectores de una vez para aplicar una sola vez los valores de optimización de la imagen. Esto último se puede ver paso por paso en la imagen siguiente.

Paso 1: seleccionamos la herramienta de zoom para hacer la imagen más pequeña. Con el botón derecho podemos marcar que deseamos que la imagen sea un 25% del tamaño original, o lo que sea necesario para ver la imagen entera en la previsualización Paso 2: Con la imagen a tamaño reducido, para que se puedan seleccionar todos los sectores a la vez, marcamos la herramienta de sector, que se encuentra en la parte izquierda de la ventana.

Paso 3: con la herramienta de seleccionar sectores hacemos una selección de todos los sectores de la imagen. Con ello podremos aplicar de una sola vez las propiedades de todos los sectores de la imagen.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

46

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Paso 4: Marcamos los valores de optimización deseados para todos los sectores.

Una vez hemos definido las características de optimización para todos los sectores le damos al botón de "guardar" y seleccionamos la opción "guardar HTML e imágenes *.html".

Con ello hemos terminado el trabajo. Obtendremos un código e imágenes que luego podremos incorporar fácilmente dentro de nuestra página web. Se puede ver el ejemplo en una página aparte. Nosotros hemos optimizado esta imagen a JPG, por ahorrar espacio, aunque esta imagen -dadas sus cracterísticas- habría quedado con mayor calidad optimizada como GIF, aunque en la práctica nos ocupe más espacio si utilizamos un rango de colores alto.

Artículo por Miguel Angel Alvarez

Trabajo con acciones de Photoshop. Grabar y ejecutar una acción Las acciones de Photoshop son muy útiles cuando se tiene que realizar un mismo proceso repetidas veces sobre distintos archivos gráficos. Photoshop dispone de un medio de garbar ese proceso, en lo que se llama una acción, de modo que podamos luego aplicar la acción a otros archivos. Al aplicar la acción sobre un archivo se realizan todos los pasos del proceso grabado sobre ese archivo.

Imaginemos que tenemos varias imágenes y queremos, por ejemplo, cambiar su tamaño, hacer niveles automáticos y luego pasarle algún filtro. Podemos repetir el mismo proceso sobre todas las imágenes, una a una, realizando todos los pasos sobre cada imagen. O bien podemos grabar una acción con todos los pasos que queremos realizar y ejecutar la acción para imagen.

El trabajo con acciones nos permite hacer en un solo paso varias tareas.

Las acciones son configurables y nos permiten almacenar cualquier tipo de trabajo, incluso con varios ficheros. Luego esos trabajos los podemos aplicar sin ningún esfuerzo y rápidamente a otros archivos gráficos.

Grabar una acción con Photoshop Grabar o crear una acción es realizar una serie de pasos, que vamos a grabar, sobre uno o varios archivos. El método es simple. Se realizan todas las acciones que deseamos grabar y Photoshop las va memorizando dentro de la acción. Cuando hemos terminado de realizar los pasos deseados, detenemos la grabación y la acción queda almacenada para utilizarla donde se desee.

Para trabajar con acciones tenemos una ventana especial llamada "Acciones". Si no la vemos en la pantalla de Photoshop, podemos mostrarla desde el menú "Ventana - Acciones".

Para crear o grabar una acción tenemos que crear una acción nueva, desde la ventana de acciones, apretando el botón correspondiente. Mirar la imagen siguiente:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

47

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Al crear la acción nos piden el nombre que le vamos a dar a la misma. Es bueno poner algo representativo, para acordarse luego de qué se trata, pero en cualquier momento podemos cambiar el nombre. Una vez creada la nueva acción se muestra entre la lista de acciones y queda activa la grabación de la acción.

Ahora que está activa la grabación podemos hacer cuantas cosas queramos con Photoshop que se irán memorizando en la acción nueva. En cualquier momento, si deseamos hacer alguna cosa que no quede memorizada en la acción, podemos detener la grabación apretando al botón correspondiente. Mirar la imagen siguiente.

En nuestro caso, vamos a detener un segundo la grabación de la acción y vamos a abrir un fichero donde vamos a realizar una serie de trabajos que consistirán en la acción. Paramos la grabación porque el paso de abrir un archivo no queremos que se almacene en la propia acción. Una vez abierto el archivo podemos darle otra vez al botón de grabar para que todas las transformaciones del archivo se almacenen en la acción.

En este caso vamos a realizar un tamaño de la imagen para alterar sus dimensiones, luego vamos a pasar los niveles automáticos y varios filtros, como pinceladas, plastificado y mosaico.

Al ir haciendo todas estas cosas, con el botón de grabar acción pulsado, se van almacenando dentro de la acción que estábamos creando.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

48

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Podríamos haber realizado los pasos que hubiéramos deseado. Es indiferente las herramientas o comandos que realicemos, que se irán grabando en la acción.

Una vez realizados los pasos deseados simplemente detenemos la grabación y la acción queda almacenada. En este punto podemos hacer todavía cosas, como grabar nuevos pasos dentro de la acción, eliminar pasos creados, cambiar su orden, etc. Incluso podemos seleccionar y editar las propiedades de alguna de las acciones, como un filtro. Para eso pulsamos el icono de la flecha de al lado de una acción para mostrar sus propiedades y le damos doble clic al valor que deseamos editar.

En la imagen anterior estamos mostrando las propiedades del filtro mosaico, podríamos dar doble clic donde pone "tamaño de celda" para cambiar el tamaño de las celdas del mosaico y que el filtro tenga un comportamiento distinto.

Ejecutar una acción de Photoshop Una vez ha sido creada la acción y grabados todos los pasos a realizar podemos ejecutarla sobre cualquier otro archivo que tengamos abierto. Para hacer esto es tan simple como apretar el botón de ejecución de la acción.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

49

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Con ello se ejecutarán todas las acciones grabadas dentro de la acción de Photoshop sobre el archivo que tenemos abierto y activo.

Como hemos visto, las acciones de Photoshop son fáciles de crear y ejecutar. Nos pueden ayudar mucho y hacernos la vida más simple cuando tenemos que ejecutar acciones repetitivas sobre varios archivos.

En un siguiente artículo mostraremos como aplicar una acción por lote a todos los archivos de una carpeta de nuestro disco duro.

Artículo por Miguel Angel Alvarez

Lote con Photoshop para ejecutar una acción sobre los archivos de un directorio En ocasiones tenemos que realizar acciones repetitivas sobre varios archivos gráficos que hay en nuestro ordenador, como muestrearlos a dimensiones determinadas, aplicarle filtros o ponerles un marco… todo esto puede que lo tengamos que hacer sobre decenas o cientos de imágenes que vamos a tener que utilizar en un sitio web. Pues bien, simplemente vamos a aprender a hacerlo de una sola vez, lo que nos ahorrará mucho tiempo o dolores de cabeza.

Para aprender a hacer esto, vamos a tener que conocer previamente el trabajo con acciones, que es muy sencillo. Lo tenemos explicado en un artículo anterior publicado en DesarrolloWeb.com: Trabajo con acciones de Photoshop Pues bien, vamos a crear una acción de Photoshop para poder luego aplicarla a todos los archivos de una carpeta. En este caso vamos a realizar una acción muy simple, como aplicarle niveles automáticos, lo que generalmente sirve para mejorar el color de la fotografía.

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

50

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Una vez creada la acción vamos a crear el directorio con los archivos que vamos a editar. Es recomendable crear un directorio específico donde vamos a meter copias de todos los ficheros que deseamos modificar. Atención a este punto, pues en el directorio debemos meter copias de los archivos y dejar los originales en otro sitio seguro. Los originales no los vamos a tocar, sólo las copias, de modo que si no nos gusta el resultado obtenido siempre podremos volver a los originales para intentar procesarlos de nuevo o realizar otras acciones.

Así que hemos creado en algún sitio una carpeta o directorio donde hemos metido copias de un montón de archivos, todos esos archivos que deseamos modificar en un proceso automático.

Crear el lote de automatización con Photoshop Ahora vamos a definir el lote de para realizar la automatización con Photoshop. Para ello vamos a la opción de menú "Archivo - Automatizar - Lote…". Nos saldrá entonces una ventana donde tenemos que definir varias cosas para configurar la automatización:

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

51

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Grupo donde está la acción que deseamos ejecutar. Esto se puede mirar en la ventan de acciones.

Nombre de la acción a ejecutar: Este es el nombre que le pusimos a la acción que queremos ejecutar en todos los archivos del directorio.

Origen, Carpeta: que queremos que el origen o archivos fuente que se van a procesar estén en una carpeta.

Selección de la carpeta donde están los archivos: Hay que pulsar el botón seleccionar para elegir la carpeta donde están los archivos origen.

Destino: Lo que queremos hacer con los archivos resultantes después de haberles aplicado la acción. En este primer caso seleccionamos "guardar y cerrar".

Eso es todo lo que hay que configurar para este primer caso. Cuando apretemos el botón OK empezará a procesarse el lote automáticamente. Todos los archivos de la carpeta seleccionada se abrirán y se ejecutará sobre ellos la acción. Luego se guardarán y se cerrarán.

Especificar que los archivos procesados se guarden en otra carpeta y con propiedades determinadas Como hemos podido comprobar, si hemos realizado los pasos anteriores para procesar el lote, los archivos resultantes se guardan en nuestro directorio de origen sobrescribiendo a los archivos que estaban en la carpeta a procesar.

En cada archivo a guardar se nos pide las propiedades del jpg que queremos guardar. Esto Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

52

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

puede estar bien, si deseamos ajustar la calidad de los archivos uno a uno, pero puede que deseemos marcar una calidad o propiedades del jpg y que sean los mismos para todos los archivos a procesar. Asimismo, podemos desear que los archivos resultantes se guarden en otra carpeta destino, sin sobrescribir a los archivos originales o las copias que habíamos colocado en la carpeta a procesar.

Para conseguir esto podemos hacer una acción más compleja, donde también almacenaremos el paso de "guardar" o de "guardar como" y el de "cerrar".

Para esto vamos a crear una acción nueva o a modificar la acción que teníamos creada anteriormente. En nuestro caso crearemos una acción nueva donde grabaremos primero el paso de niveles automáticos, luego el paso de "guardar". Entonces, al guardar nos solicitará las propiedades del jpg. Ponemos aquí las propiedades del jpg con las que queremos que se salven todos los archivos. Finalmente, cerramos el archivo. Si hacemos un "guardar como" podremos seleccionar la carpeta donde queremos que se almacenen los archivos resultantes, que no tiene por qué ser la misma que en la que están los archivos de origen. Finalmente cerraremos el fichero. La acción nos quedará como esto:

En cualquier momento podemos editar las propiedades de la acción para definir de nuevo una nueva calidad del jpg o un nuevo lugar donde guardar los archivos, por ejemplo.

Entonces volveremos a ejecutar el procesamiento automático del lote, con el menú "Archivo Automatizar - Lote…", pero esta vez indicaremos que la acción será la nueva acción de photoshop que hemos creado y que el destino es "ninguno", porque el propio destino ha quedado definido dentro de las propiedades de la acción que se va a ejecutar.

Con ello conseguiremos que se procesen todos los archivos de la carpeta automáticamente sin que se nos pregunte nada para cada uno de ellos.

Artículo por Miguel Angel Alvarez

Manual de Photoshop:http://www.desarrolloweb.com/manuales/manual-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

53