Sei sulla pagina 1di 53

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 1
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 2
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 3
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 4
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 5
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 6
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 7
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 8
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 9
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 10
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 11
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 12
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 13
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 14
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 15
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 16
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 17
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 18
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 19
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 20
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 21
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 22
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 23
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 24
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 25
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 26
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 27
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 28
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 29
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 30
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 31
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 32
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 33
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 34
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 35
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 36
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 37
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 38
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 39
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 40
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 41
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 42
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 43
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 44
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 45
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 46
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 47
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 48
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 49
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 50
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 51
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 52
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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 53
© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

Potrebbero piacerti anche