Manual Taller Photoshop

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Taller de Photoshop
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Juliana Monteiro Lazaro Miguel Angel Alvarez José A. Quirós
Directora de CriarWeb.com Director de DesarrolloWeb.com http://www.promocionatuweb.com
http://www.criarweb.com http://www.desarrolloweb.com (1 capítulo)
(4 capítulos) (9 capítulos)
Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 1

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
Introducción al Taller de Photoshop

En este artículo vamos a presentar el Taller de Photoshop, que se trata de una reunión de
artículos prácticos para realizar diseños de sitios web y componentes de páginas web.
En DesarrolloWeb.com, ya desde hace tiempo, venimos publicando una serie de artículos
prácticos que tratan sobre el trabajo con Photoshop para crear los componentes fundamentales
para la realización de páginas web, como por ejemplo la creación de banners en formato Gif
animado, fondos para páginas web, efectos sobre texto, creación de Tumbnails de forma
automática y por lotes, etc. En definitiva, una serie de artículos que serán de utilidad a los
diseñadores de páginas web que realizan su trabajo creativo utilizando Photoshop, el más
potente de los programas de diseño gráfico.
Son todos artículos prácticos pensados para guiar al diseñador de webs, paso a paso, en las
tareas más típicas a acometer con el programa. Como solemos hacer, publicamos los artículos
en el taller a medida que los vamos escribiendo. En estos momentos ya hay bastantes artículos
disponibles, pero iremos publicando más materiales en el futuro, con los que enriquecer este
texto y en los que mostraremos más partes del proceso de creación de webs y componentes
para sitios web.
En este taller no se trata de explicar el programa Photoshop y todas sus particularidades, sino
que se explica la manera de proceder para la realización de componentes, interfaces y diseños
para la web. Por tanto, se supone que el lector tiene cierta experiencia y soltura con el
programa. Sin embargo, aclaramos que nuestro taller está pensado para personas con poca
experiencia y que en la mayoría de los casos explicamos las cosas con suficiente detenimiento
como para que sea fácil de realizar las prácticas con el programa para cualquier persona.
No obstante, cabe señalar que en DesarrolloWeb.com estamos publicando un Manual de
Photoshop, en el que sí explicamos los detalles más básicos del software, con el que
aprenderemos a dominar las herramientas que utilizamos en este Taller de Photoshop para la
realización de páginas web.
Para los lectores más ávidos de talleres complejos, para crear efectos impactantes y retoques
de fotografía curiosos, recomendamos también un Taller de Photoshop publicado en
DesarrolloMultimedia.es . En dicho taller se explican temas más enfocados al diseño en
general, mientras que en el presente manual de desarrolloweb.com, explicamos más bien los
que tienen que ver con la producción de páginas web.
Así que sin más tardar, dejamos el link con la portada de nuestro Taller de Photoshop.
Esperamos que sirva de utilidad.
Artículo por Miguel Angel Alvarez
Crea un GIF animado con Photoshop

A partir de la versión 5.5 de Photoshop tenemos a nuestra disposición un programa muy
interesante para realizar, entre otras cosas, trabajos específicos para el web, como pueden ser
la creación de GIFs animados o imágenes que cambien al pasar el ratón por encima (Rollover).
El producto en concreto es Image Ready y vamos a estudiar la manera de trabajar con el para
realizar un GIF animado.
Referencia: Podemos saber lo que es un GIF animado en un artículo de DesarrolloWeb.com

Crear un archivo .psd con los distintos fotogramas
La primera tarea para realizar un GIF animado con Photoshop es crear un archivo .psd, que es
el formato propio de Photoshop donde podemos mantener capas, que serán necesarias para
realizar el GIF animado.
Nota: Las capas son propias de Photoshop y de otros programas de diseño gráfico y permiten editar
partes del gráfico de manera independiente. Quien quiera dominar Photoshop y similares deberá
familiarizarse con el trabajo con capas.
Cada capa creada con Photoshop puede ser un fotograma del GIF animado, así que podemos
crear tantas capas como imágenes queramos que haya en la animación. Luego con Image
Ready podremos intercalar esas capas en el orden que queramos y asignarles un tiempo de
visualización a cada.
Una vez creada la imagen con las distintas capas con Photoshop, podemos guardarla
con extensión .psd, para que guarde toda la información de las capas. Una vez
guardada podemos pasar el archivo a Image Ready, que es el programa que
utilizaremos para animar las capas en un GIF animado.
Para pasar el archivo desde Photoshop a Image Ready cómodamente, podemos

utilizar un botón que hay en la parte de abajo de la barra de herramientas. El botón
se encuentra en los dos programas y podemos verlo remarcado en la imagen de la
derecha.

Nota: La acción de pasar de un programa a otro será muy repetida durante el

trabajo con Photoshop e Image Ready, puesto que cada programa tiene unas
capacidades distintas y las acciones que se hacen con un programa no tienen
porque estar disponibles en otro. Por ejemplo, si queremos editar una capa,
debemos hacerlo desde Photoshop y si queremos crear fotogramas y seleccionar
las capas que se deben visualizar en cada uno, deberemos hacerlo con Image
Ready. Es aconsejable guardar el archivo .psd antes de pasar de una aplicación a
otra.
Trabajo con Image Ready
Para definir cada uno de los fotogramas de la animación y sus propiedades tenemos una
ventana llamada Animación. Si no la vemos al abrir Image Ready podemos mostrarla en el
menú de Ventana > Mostrar animación.
La ventana de animación contiene un botón para añadir fotogramas que tiene forma de
documento nuevo. En cada fotograma podemos seleccionar de manera independiente las capas
que se desean visualizar, de modo que debemos crear los distintos fotogramas de nuestra
animación e indicar qué capas se deben visualizar en cada uno de ellos. Por cierto, las capas se
pueden hacer visibles o invisibles desde la ventana de capas con el ojo que hay al lado de cada
una de las capas. Cuando se puede ver el ojo la capa es visible y cuando no hay ojo es que es
invisible.
Para asignar el tiempo de visualización de cada uno de los fotogramas tenemos un registro de
los segundos de visualización justo debajo de la miniatura del fotograma. Al pulsar sobre ese
registro de segundos aparecerá una ventana donde seleccionar cualquier duración, en
segundos.

Cuando tengamos la animación tal como deseamos que aparezca en nuestra página web
seleccionamos en el menú Archivo, la opción "Guardar optimizada como..." y nos aparecerá la
ventana típica para seleccionar el directorio y el nombre de archivo que queremos asignarle.
Optimizar la imagen con Image Ready
Podemos modificar las propiedades de la imagen GIF, como número de colores o el tipo de
paleta para optimizar la imagen, con objeto de que ocupe el menor espacio posible en bytes y
sea rápida de descargar. La optimización se debe realizar respetando la calidad de la imagen
tanto como seamos capaces. Para realizar estas acciones Image Ready dispone de una
ventana llamada Optimizar, que si no aparece podremos mostrarla desde el menú Ventana >
Mostrar optimizar.
La característica más interesante para optimizar en un fichero GIF es el número de colores. Por
lo general, a menor número de colores, menor tamaño del archivo. En la ventana del
documento podemos encontrar unas solapas que nos permiten seleccionar la versión de la
imagen que queremos visualizar: la versión Original o la Optimizada. Las solapas 2 copias o 4
copias permiten comparar entre la versión original y algún tipo de optimización.

Referencia: Hablamos sobre formatos gráficos y la optimización de imágenes en cada uno en un artículo
Formátos gráficos para páginas web.
Resultado obtenido
Para realizar este artículo hemos creado un GIF animado que se puede ver a continuación. No
es muy atractivo, pero será interesante ver el resultado conseguido.
Referencia: Hemos hecho otro ejemplo de animación con Photoshop e Image Ready que puede
complementar este artículo: Crear un GIF animado con Photoshop II.
Artículo por Juliana Monteiro Lazaro
Crear un GIF animado con Photoshop II

Vamos a ver otro artículo sobre como crear un GIF animado con el programa Photoshop e
Image Ready, un software que acompaña a Photoshop desde su versión 5.5. Este artículo se
debe leer a continuación de Crea un GIF animado con Photoshop, que explica paso a paso el
proceso, incluidas algunas tareas que no vamos a relatar aquí, para no repetir los conceptos.
Vamos a realizar un GIF como el que se puede ver debajo de estas líneas. El mensaje
publicitario no importa mucho, lo que sí hemos querido incluir es la famosa frase "clic aquí",
que suele incrementar el nivel de efectividad de un banner varios puntos. Así que vamos a
crear una animación que imite y solicite el clic del ratón encima del banner.

Crear un archivo .psd con los distintos fotogramas
Como ya se explicó en el artículo sobre crear un GIF animado en Photoshop, el primer paso
consiste en crear un archivo de Photoshop (de los que tienen extensión .psd) con las distintas
capas que contienen los diversos fotogramas de la animación. En la imagen se puede ver ese
archivo que contiene la capa del puñal, y la de los distintos textos y punteros del ratón que, al
estar colocados cada uno en una posición distinta y verse uno detrás de otro, darán sensación
de movimiento.
Para conseguir las imágenes de los punteros del ratón que se van a utilizar en la animación
hemos accedido a la ventana de configuración del ratón del panel de control de Windows. Se
puede ver en la siguiente imagen la ventana a la que nos referimos.
Trabajo con Image Ready

Una vez tenemos la imagen realizada la pasamos a Image Ready pulsando el botón de más
abajo de la barra de herramientas. Desde Image Ready definiremos la animación a base de
indicar qué capas estarán visibles en cada fotograma. Para ello crearemos fotogramas desde la
ventana de animación y, colocándonos en cada fotograma, seleccionaremos las capas que
deseamos que se vean en la ventana de capas.
Posteriormente habrá que asignarles un tiempo adecuado a cada fotograma. No es

recomendable hacer una animación muy lenta que aburra al posible lector, ni una muy rápida,
que podría hacer demasiado difícil la lectura. El tiempo se asigna en la ventana de animación
pulsando debajo de la miniatura de cada fotograma. Podemos seleccionar varios fotogramas y
darle un mismo tiempo a todos o bien seleccionar fotograma a fotograma y asignarle un
tiempo distinto.
Para guardar la animación en un archivo GIF seleccionamos la opción "guardar optimizada

como" del menú archivo. Hay que fijarse en este punto en la ventana de optimizar, que
aparece con el la opción Ventana > Mostar optimizar, donde podemos seleccionar el formato en
el que deseamos guardar la imagen (en este caso GIF) y las características del archivo, como
pueden ser número de colores, tramado, paleta, etc.
Resultado obtenido
Mostramos a continuación una vez más el resultado obtenido en este ejercicio, que esperamos
haya resultado interesante.

Maquetar una web a partir de una imagen con Photoshop

A la hora de diseñar una página web, resulta muy cómodo hacer las pruebas de creatividad
utilizando un programa de diseño gráfico, en lugar de realizar la maquetación directamente en
HTML.
Uno de los programas más útiles para realizar el diseño de la página es Adobe Photoshop, que
ofrece muchas utilidades para el retoque fotográfico, pero también para el diseño gráfico en
general. Las últimas versiones del programa además disponen de ayudas muy interesantes
para diseñar las páginas web, como los sectores o la opción Guardar para web.
Nota: ya explicamos algunas cosas de las que vamos a utilizar en este ejercicio en un artículo anterior:
Sectores de Photoshop
Vamos a ver en este taller una muestra sobre cómo se pueden utilizar los sectores para
maquetar una página web en HTML.
Por ejemplo, en Photoshop podríamos haber diseñado la siguiente imagen que vamos a utilizar
para la cabecera de la página:
Esta imagen la podemos partir en sectores. Los sectores son áreas de la imagen que luego
vamos a guardar en un archivo independiente, optimizado para visualizarse en Internet. Los
sectores los realizamos a nuestro gusto. Posiblemente nos interese que el logotipo o el banner
principal se encuentren en una imagen separada, o posiblemente hayamos pensado colocar
una barra de navegación que deseamos que esté en un mismo sector, que luego vamos a
llenar con el texto de la barra.
Los sectores nos pueden haber quedado de manera similar a como aparece en esta imagen:
Una vez realizados los sectores, seleccionamos la opción "Guardar para web" del menú de
archivo. Esto nos permite acceder a una ventana donde se pueden elegir las opciones de
optimización de las imágenes, seleccionando las características de todos los sectores o bien,
definiendo unas propiedades específicas para cada sector.

Una vez hemos seleccionado todas las opciones necesarias, guardamos el trabajo, con lo que
obtendremos un archivo HTML con una tabla, que contiene a su vez las distintas imágenes
generadas a partir de cada sector y guardadas con las opciones de optimización seleccionadas
previamente.
Eliminar una imagen de un sector y sustituirla por un texto
Posiblemente alguna de las partes o sectores generados, donde tenemos una imagen,
queramos que disponga un texto, para poder escribir lo que se desee, en lugar de visualizar
una imagen, que siempre es mucho más estática.
Por ejemplo, puede haber un espacio para el título de la página y, ya que el título puede
cambiar en cada página del web, puede que nos resulte interesante que ese título sea un
texto, que se puede editar, en lugar de una imagen. O bien, puede que tengamos un espacio
para situar la dirección de la empresa dueña del sitio web, tal como hemos hecho en el diseño
que estamos trabajando, y deseamos que la dirección aparezca como un texto en lugar de una
imagen, ya que los textos son indexados por los buscadores y queremos que puedan indexarse
las palabras de la dirección de la empresa como palabras clave de la página.
Entonces, necesitamos sustituir la etiqueta de la imagen por un texto. Para ello, simplemente
hay que localizar la etiqueta que corresponde a la imagen que deseamos sustituir y borrarla,
cambiándola por el texto que tiene que ir en lugar de la imagen. Pero atención, porque esto
nos puede cambiar el diseño de la tabla y descolocar las imágenes que van dentro. Para
evitarlo, simplemente ajustamos los valores width y height de la celda donde estaba la
imagen, a los que tenía la propia imagen que deseamos sustituir.
Por ejemplo, este es el código HTML generado por Photoshop para la composición anterior.
Cada sector está en una imagen independiente.
<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>
<TD>
<IMG SRC="imágenes/espacio.gif" WIDTH=214 HEIGHT=1></TD>
<TD>
<TD>


<TD>
<TD>
<TD></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="imágenes/cabecera-original_01.gif" WIDTH=214 HEIGHT=85></TD>
<TD ROWSPAN=2>
<TD COLSPAN=2>
<TD>
<TD>
</TR>
<TR>
<TD>
<TD COLSPAN=2>
<IMG SRC="imágenes/cabecera-original_06.gif" WIDTH=216 HEIGHT=9></TD> <TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<TD>
</TR>
<TR>
<TD>
<IMG SRC="imágenes/cabecera-original_08.gif" WIDTH=214 HEIGHT=27></TD> <TD>
</TR>
</TABLE>
Fijémonos que está en negrilla la celda y la imagen donde aparece la dirección de la supuesta
empresa que ha encargado el proyecto. Esta imagen es la que vamos a sustituir por el texto de
la dirección:
<TD width=215 height=16>

<font size=1 face=verdana>C/ Mayor nº 23, 3B - 28230 Madrid</font></TD>
<TD>
Cabe remarcar que hemos aplicado a la celda el mismo ancho y alto de la imagen que iba
dentro. Además, el texto lo hemos puesto en una fuente de tamaño pequeño porque si el texto
supera el espacio reservado para la tabla se descuadrará el diseño.
Podemos ver el resultado obtenido en una página aparte.
Creación de un fondo para una página web en Photoshop

Vamos a ver un ejercicio sencillo de creación de un fondo que luego utilizaremos en una página

web. Para crear el fondo trabajaremos con el programa Adobe Photoshop , que es una de las
mejores opciones de software profesional para diseño gráfico.
Merece la pena ver el fondo de la página web que vamos a crear. Para hacerse una idea exacta
del objetivo de este artículo.
Paso 1. Nuevo archivo
Vamos a empezar creando una nueva imagen con Photoshop. Al crear el nuevo fichero, nos
solicitan el ancho y el alto que va a tener. La anchura del fondo, para que quede bien en todas
las definiciones, la vamos a sobredimensionar, creándola lo más grande posible. Por lo que
respecta a la altura del archivo, podemos limitarla a unos pocos píxeles, puesto que el fondo se
va a repetir en un mosaico por toda la altura de la página.
Como la imagen que vamos a crear de fondo es simétrica de izquierda a derecha, vamos a
trabajarnos solamente la mitad izquierda y luego la duplicaremos y voltearemos
horizontalmente la copia para hacer la otra mitad. Tranquilos, lo veremos todo poco a poco.
Por ejemplo, vamos a hacer un documento de 1100 pixels de ancho por 20 de alto.
Paso 2. Líneas horizontales de fondo
En la imagen pondremos un fondo de color blanco, para empezar a dibujar, si es que no lo

tenemos ya al crear el documento vacío. Para ello podemos colorear de blanco una capa con el
bote de pintura. La tecla rápida para pintar con el bote de pintura es ALT+SUPRIMIR, para
pintar con el color frontal y CTRL+SUPRIMIR en caso de querer pintar con el color de fondo.
Ahora vamos a pintar unas líneas horizontales por todo el lienzo. Es conveniente ir creando
cada nuevo elemento en una nueva capa, para que queden independientes y podamos operar
con ellos de manera independiente, en caso de necesidad. Podemos crear nuevas capas en el
menú "Capa - Nueva - Capa...".
Para pintar las líneas, vamos a utilizar la herramienta de "Selección de fila única", que es una
herramienta que depende del icono de selección, en la barra de herramientas. Para ver más
herramientas que dependan de un icono hay que dejar pulsado el ratón sobre un icono de la
barra de herramientas, con lo que aparece un menú desplegable. Ver la imagen siguiente.

Con la herramienta de fila única vamos a seleccionar una fila y vamos a pintar de gris. Como
solo tenemos seleccionada una fila, aplicando el bote de pintura, sólo se pintará la fila
seleccionada. Pintaremos todo el lienzo con filas de gris, alternadas con filas de color blanco.
Como el color blanco lo hemos puesto de fondo, no hace falta pintar esas filas.
Paso 3. Definimos el área del cuerpo de la página
Ahora, con la herramienta de selección "marco rectangular", vamos a seleccionar parte de la

imagen. Empezando por la derecha seleccionaremos, por ejemplo 350 píxeles de ancho y todo
el alto de la imagen.
Para saber el ancho de la selección que estamos haciendo hay que tener visible la ventana
"info", que mostrará datos sobre los elementos que estamos utilizando, en este caso las
selecciones. Nos interesa que las medidas nos las den en píxeles, de modo que, si no las
tenemos ya en píxeles, seleccionamos la medida a través de la mencionada ventana "info",
punsando en el icono "+" de abajo a la izquierda. Ver imagen siguiente.

Una vez realizada la selección, pintaremos de blanco en una nueva capa.
A continuación, podemos hacer una línea vertical que separe la parte a rayas de la parte con
fondo blanco. Esta línea vertical la podemos hacer con la herramienta de "lápiz" o bien
utilizando la herramienta de selección de "columna única" y pintando de un gris oscuro o
negro.
Paso 4. Difuminado del borde del cuerpo
Vamos a decorar un poquito más el fondo de la página creando un difuminado que pondremos
pegado al borde del espacio blanco. Ver siempre el resultado final del ejemplo para hacerse
una idea exacta de lo que queremos hacer.
Este difuminado lo conseguimos a su vez en varios pasos. Primero hacemos una selección
cuadrada del área donde vamos a hacer el difuminado. De unos 20 píxeles.
Luego, tomaremos la herramienta "degradado", que está situada compartiendo el espacio con
el icono "bote de pintura". El degradado permite algunas variaciones. Para acceder al editor de
degradado pulsamos la muestra del degradado en la barra de opciones. Ver imagen.

Entre las diversas opciones que nos permite el degradado, seleccionaremos "degradado de
color frontal a transparente".
Pondremos como color frontal negro o un gris oscuro y realizaremos el degradado en nuestra
imagen, en el espacio de 20 píxeles de ancho que habíamos seleccionado. Como siempre,
haremos esta acción sobre una capa nueva para que quede independiente.
El degradado debe realizarse totalmente recto en la horizontal, de manera que quede igual en
la parte de arriba y en la de abajo. Así, al repetirse el marco en el fondo de la web, creará un
mosaico perfecto. Si queremos hacer una línea recta para aplicar el degradado, podemos
utilizar la tecla mayúsculas a la vez que dibujamos el degradado de derecha a izquierda.
Posiblemente el degradado haya quedado demasiado oscuro. Para suavizar el efecto

simplemente vamos a cambiar la opacidad a la capa donde está dibujado el degradado.
Para ello, en la ventana de capas hay una opción para cambiar la opacidad. Pondremos la
opacidad como deseemos.

Paso 5. Duplicar el fondo
Llegado a este momento quizás sea buena idea guardar el trabajo, pues vamos a acoplar la
imagen, convirtiendo todas las capas en una y puede que necesitemos en algún momento
recuperar las capas creadas hasta el momento. Ahora acoplaremos la imagen, en el menú de
"Capa - Acoplar imagen". Tendremos una única capa como fondo.
Seguidamente queremos duplicar la imagen. Hacemos una selección de todo el documento con
"Selección - Todo" y un "Edición - Copiar" y "Edición - Pegar". Esto nos creará una nueva capa
con la imagen entera. Debemos voltear horizontalmente esta capa para que sea simétrica a la
que teníamos antes. Esto lo hacemos con el menú "Edición - Transformar - Voltear horizontal".
Ahora aumentamos el tamaño del lienzo, para que quepan las dos partes que tiene nuestro
fondo. Lo hacemos desde "Imagen - Tamaño del lienzo". Ponemos un punto de ancla a la
derecha y tamaño del lienzo del doble de lo que tenía nuestra imagen. En este caso el tamaño
del lienzo sería 2200 píxeles.
Para finalizar, movemos la nueva capa que habíamos creado anteriormente a la zona que ha
quedado vacía del lienzo. Ambas partes deben coincidir y formar lo que va a ser el fondo
simétrico de la página.
Con ello habremos acabado de realizar el fondo. Podemos guardar la imagen desde la opción

"Archivo - Guardar para web". La imagen resultante, a pesar de ser muy ancha, debe ocupar
pocos KB, tal vez 2 ó 4 KB. Guardaremos la imagen con formato GIF, el adecuado dadas las
características de esta imagen.
Paso 6. Colocar este fondo en una página web
Para utilizar un fondo de estas características lo debemos incluir dentro de una declaración de
estilos CSS. Para ello, simplemente editamos nuestra hoja de estilos y definimos un fondo de
imagen, situamos el fondo al centro y hacemos que se repita verticalmente.
Referencia: Se pueden obtener nociones de Hojas de estilo en cascada en nuestra sección CSS a fondo.
Para los que no conozcan las hojas de estilos, ponemos aquí el código que debería tener
nuestra declaración CSS para definir el fondo de una página. La declaración de estilos debe
colocarse en la cabecera de la página, entre y .
<style type="text/css">
BODY{
background: url('fondo-pagina-web.gif') center repeat-y;
}
</style>
Conclusión
Hasta aquí llega este artículo. Sólo decir que hemos elegido unos tonos grises para el color de
fondo, pero con poco esfuerzo se pueden cambiar los colores para conseguir adaptarse a las
necesidades de cada uno.
El artículo ha quedado un poco largo, pero esperamos que no resulte pesado o difícil para
concluir. Hemos intentando explicar las cosas para personas con pocos conocimientos de
Photoshop pero, sin duda, este programa es bastante complejo y es fácil liarse con las capas o
las selecciones.
Para acabar, podemos ver el resultado final en una página web que utiliza el fondo que hemos
creado.
Crear un fondo con líneas diagonales con Photoshop

Vamos a ver como construir un tipo de fondo bastante utilizado recientemente en páginas web
que resulta muy sencillo de hacer y que tiene cierto gusto. Se trata de un fondo realizado con
líneas diagonales que ocupan toda la pantalla. No obstante, nosotros crearemos una imagen
muy pequeña, que no ocupa casi espacio en Kb. Al incluirla como fondo en una web se
generará un mosaico y se podrán apreciar las líneas diagonales.
El proceso no tiene ninguna dificultad. Empezamos creando un nuevo documento en blanco.

No tiene que ser muy grande, tal vez 150x150 pixels, lo suficiente para no quedarnos cortos
de espacio.

Seleccionaremos la herramienta de línea, que está agrupada junto a las herramientas de

formas, cuadrados, rectángulos, etc.
Luego haremos una línea en el documento que habíamos creado. Con ello se creará
automáticamente una capa con forma de línea. La línea la podemos hacer del color que se
desee, dependiendo de nuestras necesidades. También podremos hacerla con distintas
anchuras. Dependiendo de la anchura el efecto conseguido variará un poco.
Para nuestro ejemplo queremos que la línea tenga una inclinación de 45 grados. Para ello, a la
hora de pintar la línea en diagonal, pulsamos la tecla mayúsculas. Veremos como Photoshop
nos ayuda a que la línea quede con el ángulo deseado, pues siempre que se mantiene pulsada
esta tecla, los ángulos que permite hacer son de 0 grados, 45 ó 90 y sus complementarios.
Ahora tenemos que duplicar la capa de la línea, para obtener varias líneas. Lo haremos a
través de la ventana de capas, pulsando con el botón derecho del ratón en la capa a duplicar y
seleccionando "Duplicar capa...".

Luego trasladaremos un poco la posición de la capa duplicado. Tan sólo unos píxel, pero los
suficientes para que quede un espacio en blanco entre las líneas. Para mover una capa unos
píxel será útil usar el cursor del teclado, con la herramienta de mover seleccionada.
Repetiremos este proceso varias veces, de modo que queden una serie de líneas separadas a
la misma distancia.
Una vez creada la imagen con las distintas líneas, vamos a acoplar sus capas, con el menú
"Capa - Acoplar imagen". Con esto conseguimos que haya una sola capa en toda la imagen.
Ahora viene el momento más delicado, que es obtener a partir de esta imagen una porción que
permita hacer un mosaico perfecto para que en el fondo de la página tengamos líneas en
diagonal por todas partes.
Para ello tenemos que hacer una selección cuadrada (con todos los lados del mismo tamaño) y
fijarnos en un detalle. Tenemos que hacer la selección de manera que el píxel que hay en la
esquina superior izquierda corresponda con el píxel que habría a continuación de la esquina
inferior derecha. Para hacernos una idea exacta, sería bueno ver la siguiente imagen.

Podríamos haber hecho la selección más grande, pero siempre teniendo en cuenta que sea
cuadrada y que haya una correspondencia entre el píxel de la esquina superior derecha de la
selección y el que está en la esquina contraria, aunque por la parte de fuera de la selección.
Copiamos entonces la selección y la pegamos en otro documento, que guardamos con

extensión .gif, que sería la más adecuada para este tipo de imagen. Este archivo es el que
utilizaremos como fondo de la página.
Ahora mostramos la imagen obtenida con este proceso. Como es muy pequeña, para que se
pueda apreciar, la hemos ampliado artificialmente, cambiando en el código HML los atributos
width y height de la etiqueta IMG.
Para acabar, podemos ver una página con el fondo que hemos creado.
Fondo tipo mosaico a partir de una imagen con Photoshop

Vamos a crear un fondo con Photoshop a partir de una imagen. El fondo lo utilizaremos en una
página web y se mostrará creando un mosaico. El objetivo de este artículo es explicar cómo se
deben hacer los retoques en la imagen, de manera que el mosaico creado se vea
correctamente tramado.
Esta técnica se puede hacer con distintos tipos de imágenes, por ejemplo con unas nubes o
una pared de ladrillos. Al hacer el mosaico, la página se mostrará con todo el fondo lleno de
nubes o ladrillos. En nuestro ejemplo hemos partido de una imagen con unas raíces. El
resultado final será un fondo de una página todo lleno de raíces.
Podemos ver el ejemplo en una página aparte.
Primero creamos una selección de un trozo de la imagen inicial. Haremos la selección del área

que más nos guste. El tamaño escogido puede variar, pero nos fijaremos que tanto la altura
como la anchura sea divisible por dos, para facilitar el siguiente paso.
Copiaremos la selección y la pegaremos en un documento nuevo. Luego, sobre este nuevo

documento, haremos un filtro de desplazamiento. Esto se hace desde el menú Filtro - Otros -
Desplazamiento... En la ventana de propiedades del filtro nos solicitan los píxeles que se desea
desplazar horizontal y verticalmente. En estos campos colocaremos la mitad del tamaño
horizontal y vertical de la imagen. Por ejemplo, si la imagen tenía tamaño 176x148, el
desplazamiento horizontal sería de 88 y el vertical de 74.
El resultado obtenido después de hacer el filtro es el siguiente:
A continuación, para que el fondo se vea correctamente tramado al hacer el mosaico, debemos
disimular los cambios bruscos que hay en el dibujo en la parte central.

Para disimular esta área utilizamos la herramienta "Tampón de clonar", clonando en el área
central otras partes de la imagen, de modo que se disimulen esos cambios bruscos en el
dibujo.
Por si alguien no sabe utilizar la herramienta "Tampón de clonar" hay que decir que con la tecla
"alt" y pinchando con el ratón en una parte de la imagen, se selecciona el punto desde donde
vamos a copiar. Luego soltando la tecla "alt", pintamos en cualquier otra parte de la imagen.
Se pintará clonando el dibujo del área seleccionada previamente.
Dependiendo de la imagen de la que hemos partido, el proceso de clonar puede ser más o
menos complicado. Nuestra imagen resultado, después de haber hecho los cambios, es la que
utilizaremos como fondo de la página.
Se puede ver la imagen obtenida aquí.

Se puede ver el ejemplo en marcha en una página aparte.
Efecto de reflejo de texto en Photoshop

Vamos a ver un pequeño tutorial sobre un efecto de reflejo de texto. Utilizamos Photoshop
como programa de diseño gráfico.
El efecto que queremos conseguir es como un texto que aparece reflejado en la parte de
abajo. El efecto de reflejo es muy sencillo de conseguir con Photoshop, duplicando la propia
capa de texto y volteando verticalmente, pero lo veremos paso a paso.
El resultado sería parecido a este:
1) Creamos el texto con la herramienta de texto y escribimos lo que deseemos.
El efecto de relieve que tiene esta imagen lo hemos conseguido con un efecto de capa de
Photoshop. Para llegar ello pulsamos el menú capa - estilo de capa - Bisel y relieve. También
se puede acceder al menú de efectos de capa haciendo un doble clic en la capa donde tenemos
el texto, en la ventana de capas, y luego seleccionando bisel y relieve de entre todos los
efectos posibles. Pero este efecto de relieve tampoco es muy fundamental para este tutorial.
2) Duplicamos la capa, la volteamos verticalmente y la posicionamos debajo del texto
Para duplicar la capa podemos darle con el botón derecho del ratón a la capa en la ventana de
capas y encontraremos una opción para duplicarla. También podemos acceder a esta opción en
el menú Capa - Duplicar capa.
Para voltearla verticalmente lo hacemos desde el menú de Edición - Transformar - Voltear

vertical.
Para situarla, tomamos la herramienta de mover, que está arriba y a la derecha el el menú de
herramientas, al lado de la herramienta de hacer selección.
3) Cambiamos la opacidad y hacemos una máscara de capa

Para cambiar la opacidad/transparencia se puede hacer desde la ventana de capas. La

hacemos un poco más transparente, porque los reflejos suelen ser más tenues que los objetos
reales. Una opacidad del 50% o 60% puede ser buena.
Ahora queremos que el texto se vaya difuminando un poco hacia abajo, porque los reflejos
suelen ser más suaves en la parte de abajo que en la de arriba. Para esto es bueno hacer una
máscara de capa. Para ello veamos esta imagen.
Una vez creada la máscara de capa, tenemos que hacer un degradado para ocultar parte de la
capa reflejo. Hacemos el degradado con la herramienta correspondiente, en la capa que
queremos ocultar parcialmente.
Con esto hemos acabado! Se puede ver el efecto resultante a continuación.
Artículo por José A. Quirós
Efecto de texto con Photoshop

Vamos a ver una manera de hacer un efecto que podemos utilizar para dar un poco de
vistosidad a un posible titular o logotipo. Con Photoshop se pueden hacer infinidad de efectos
de texto, con tocar un poco los filtros o efectos de capa. Ahora veremos como tocando un poco
los efectos de capa "resplandor exterior" y "bisel y relieve" podremos modificar el estilo de la
capa para hacer un texto atractivo.
Partimos de un texto plano, que hemos hecho con la herramienta de texto de Photoshop.
Utilizaremos la fuente que nos venga bien para nuestro diseño. Nosotros hemos utilizado una
que se llama Horseradish.

Ahora vamos a hacer unos efectos de capa. Para entrar en la ventana de efectos de capa
tenemos que darle un doble clic en la capa sobre al que queremos hacer el efecto, en la
ventana de capas, justamente en el área que hemos marcado con un 1) en la imagen
siguiente.
Eso nos abre la ventana de efectos de capa. También podemos acceder a un efecto concreto
por la barra de menús: Capa - Estilo de capa - El estilo deseado. Concretamente, vamos a
jugar con los efectos de "resplandor exterior" y "bisel y relieve".
Podemos jugar con estos efectos hasta conseguir el resultado que más nos guste. Nosotros
hemos puesto los valores como sigue:
Resplandor exterior:
Bisel y relieve:

Esto nos dará como resultado una imagen similar a la siguiente:
Para terminar vamos a dar un par de retoques. Primero un degradado para el color del texto.
Creamos una capa nueva, con el correspondiente botón de la ventana de capas o con el menú
Capa - Nueva… - Capa. Luego, seleccionamos el área visible de la capa de texto. Esto se hace
con la tecla de Control (CTRL) pulsada y pulsando con el ratón en la capa de texto de la
ventana de capas, en el lugar que hemos marcado como 2) de la siguiente imagen:
Seleccionamos la herramienta de degradado, de blanco a transparente y la aplicamos en la

capa que hemos creado por encima del texto, de arriba hacia abajo. Con esto, nuestra imagen
ahora se parecerá a esto:

Por último, para destacar un poco más el resplandor exterior, vamos a meterle un color blanco
por el borde del texto. Volvemos a crear una nueva capa y volvemos a seleccionar el área
visible de la capa de texto.
Luego marcamos el contorno de la selección con blanco. Para eso desde seleccionamos el
menú Edición - Contornear. Las opciones serán contorno de 1 pixel en color blanco y hacia
dentro.
Con este efecto habremos conseguido un resultado parecido a esto:
Crear imagen en miniatura (thumbnail) con Photoshop

Los thumbnails son imágenes en miniatura. Son muy habitualmente utilizados en el diseño
web por razones de espacio en las páginas y por ahorrar transferencia y mejorar el tiempo de
carga. Generalmente, cuando se usan imágenes en miniatura, existe la posibilidad de hacer
clic en la imagen para aumentarla a un tamaño más grande.
Al mostrar la imagen en un tamaño más reducido, se ahorra transferencia porque no se
transfiere la imagen grande, a no ser que el usuario lo solicite. A menor transferencia de
información, la página carga más rápido y el visitante ha de esperar un menor tiempo antes de
poder visualizar los contenidos.
Para hacer imágenes en miniatura tenemos que utilizar un programa que nos permita
redimensionar la imagen y guardarla en otro archivo. Photoshop es un programa muy potente,
así que nos servirá perfectamente. Redimensionar una imagen es un ejercicio muy básico para
un tutorial de Photoshop, pero vamos a mostrar un par de métodos y el segundo de ellos
puede que bastantes usuarios lo desconozcan.
Para redimensionar una imagen con Photoshop podemos ir al menú Imagen > Tamaño de
imagen. Entonces nos sale un menú desde el que podemos ajustar un nuevo tamaño para la
imagen. Si el nuevo tamaño es menor, Photoshop redimensionará la fotografía o el dibujo para
ajustarlo a ese nuevo tamaño.

El menú tamaño de imagen permite seleccionar el nuevo tamaño en porcentaje o en píxeles,

como se puede ver en la imagen. Simplemente tenemos que aplicar un nuevo tamaño y
apretar el botón marcado con OK.
Luego podemos guardar la imagen en miniatura con el menú Archivo > Guardar para Web. Nos
saldrá una ventana donde podremos seleccionar el formato con el que deseamos guardar la
imagen y la calidad de la imagen.
Nota: recordamos que el formato óptimo para las fotografías es el JPG y que para optimizar el tamaño de
los jpg se tiene que ajustar la calidad. Las imágenes que son principalmente un dibujo se suelen guardar
en formato GIF, por ser más adecuado. El gif se puede optimizar rebajando el número de colores o paleta
de la imagen. Se puede obtener más información sobre optimización de imágenes en el artículo Formátos
gráficos para páginas web.
Crear thumbnail más rápidamente
Otro modo de obtener un thumbnail de una manera más rápida consiste directamente en
utilizar el menú Archivo > Guardar para Web. Desde la ventana que nos sale, aparte de
optimizar la imagen, podemos cambiar su tamaño. Para cambiar el tamaño tenemos en la
parte de la derecha y hacia abajo, una solapa que pone "Tamaño de imagen".

Tenemos que pulsarla y nos sale un menú adicional donde podemos ajustar las dimensiones de
la imagen que deseamos guardar. Podemos seleccionar el nuevo tamaño en píxeles o bien en
porcentaje. Una vez seleccionado el nuevo tamaño, apretamos el botón que hay un poco más
abajo que pone "Aplicar" para que esos cambios se vean en la imagen que estamos
guardando, a fin de que las optimizaciones de calidad se puedan hacer viendo los resultados
definitivos en la imagen.
Hacer un texto que se adapta a un círculo, Photoshop CS2

Existen tutoriales complicados con técnicas para conseguir con Photoshop que un texto se
adapte a una circunferencia. Esas técnicas eran necesarias de utilizar porque Photoshop no
tenía una manera directa de hacer que un texto se adapte a un círculo o una curva en general.
Ahora con CS2 es posible hacer esto y conseguir un texto editable que se adapta a un trazo.
En este artículo haremos un círculo y el texto se escribirá siguiendo la circunferencia. Pero en
realidad esto se puede hacer con cualquier tipo de trazo.
Primero creamos un archivo nuevo, en el que vamos a dibujar una circunferencia con la
herramienta elipse. Esta circunferencia nos servirá para adaptar el texto que vamos a escribir
más tarde.

Seleccionamos la mencionada herramienta elipse y dibujamos una circunferencia. El tamaño

será el deseado. Pero para la prueba vamos a hacer una elipse suficientemente grande para
trabajar con espacio.
En nuestra lista de capas tendremos el fondo y la elipse.

Entonces tomamos la herramienta de texto. Al situarnos sobre el lienzo, nuestro puntero se

transforma en el típico cursor para mostrar que se va a insertar un texto (se muestra el típico
puntero de texto, que es una línea vertical con una línea pequeña horizontal abajo y arriba). Si
nos situamos con el puntero en la misma línea de la elipse veremos como el puntero se
transforma en un cursor de texto especial, como el que podemos ver en la siguiente imagen:
En ese punto hacemos clic para empezar a escribir un texto. Veremos que el texto que vamos
escribiendo se va colocando rodeando el círculo. Para ello, las letras se van adaptando al
recorrido de la elipse. El resultado será algo como lo siguiente:
Seguramente tengamos que editar la posición del texto, para situarlo en un lado u otro del
perímetro de la elipse. Esto lo tenemos que hacer con la herramienta de selección directa.

Ahora nos situamos con el puntero encima del texto. Veremos que el puntero se transforma
como en un guión para escribir texto, en el que aparece al lado una flecha, apuntando a uno u
otro lado del puntero. Entonces podemos pinchar y arrastrar para mover una guía para
recolocar el texto dentro del trazado de la curva.
Si queremos, podemos conseguir así mover el texto para que se coloque siguiendo la curva,
pero por la parte de dentro en lugar de la de fuera. Para ello simplemente habrá que arrastrar
la posición de la guía para dentro, o fuera, del trazo.

Con esto tenemos nuestro texto alrededor de un círculo. Hay que señalar que este texto es
perfectamente editable, por lo que fácilmente podremos cambiar el tamaño del texto, el color,
la fuente, etc. Como cualquier otro texto simple de Photoshop. De esta manera conseguirmos
adaptar el texto y que este sea totalmente editable.
La elipse luego podemos eliminarla o ocultarla para que no salga en la imagen. El trazado
ahora queda asociado al texto, por lo que es indiferente lo que hagamos con la silueta de la
elipse.

Esta es la manera más simple que existe de adaptar un texto a una circunferencia. Espero que
haya sido sencillo de entender.
Ahora puedes ver un vídeo sobre este tutorial, que hemos preparado en DesarrolloWeb.com.
Object 1
Cambiar el tamaño de todas las imágenes de una carpeta

con Photoshop
En ocasiones necesitamos imágenes de un tamaño determinado para una página web.
Podemos abrir imagen a imagen con Photoshop y editar su tamaño, guardarlas, etc. o
podemos realizar un lote para procesarlo automáticamente con Photoshop, de modo que este
programa se encargue de abrir todas las imágenes de una carpeta y cambiarles el tamaño y
guardarlas automáticamente, sin que tenganos que hacerlo una a una.
Este trabajo de hacer lotes es algo que sin duda algún día nos resultará muy útil y nos
ahorrará un trabajo tedioso y molesto de editar decenas de archivos o incluso cientos de ellos.
El proceso general para crear lotes y ejecutarlos automáticamente con Photoshop lo hemos
explicado en el artículo Crear un lote con Photoshop para ejecutar una acción sobre todos los
archivos de un directorio . En este caso vamos a explicar una receta para realizar las acciones
para cambiar automáticamente el tamaño de todos los archivos de una carpeta, pero sin duda
nos apoyaremos en explicaciones del artículo anterior, por lo que convendrá leerlo.
1.- Crear una carpeta con todos los archivos que deseamos redimensionar
Es bueno meter en esa carpeta copias de los archivos a procesar, en lugar de los originales,

para poder conservar los originales si los necesitamos más adelante.
2.- Abrir el primer archivo
3.- Crear la acción.

Este paso no es trivial. Tenemos que aprender a trabajar con acciones de Photoshop (PONER
ENLACE AL PRIMER ARTÍCULO QUE HAY EN ESTE DOCUMENTO DE WORD). Para ello creamos
una acción nueva. Luego con el primer archivo abierto vamos realizando los distintos pasos.
Primero modificamos el tamaño de la imagen a las dimensiones que necesitemos. Luego
guardamos el archivo con "guardar como" (nos preguntará las propiedades el jpg y el
directorio donde queremos guardarlo, para que la acción lo recuerde) Podemos guardar el
archivo "como copia", así nos respetará los archivos originales guardados en esa carpeta.
Vease la siguiente imagen:
Luego realizamos el paso de cerrar el archivo. Al final, la acción nos debe quedar como esto:

Atención que nos quede la acción el nombre del archivo a guardar de manera similar como
tenemos aquí. Si nos fijamos, el paso de guardar tiene propiedades, como la calidad del jpg o
el nombre del archivo. En este caso el nombre del archivo es el propio directorio donde se va a
guardar, el nombre será el mismo. Y vemos abajo que pone "con copiar", que quiere decir que
se va a guardar una copia.
4.- Creamos el lote

El lote se crea con las siguientes propiedades:
La acción a realizar será la acción creada anteriormente. La carpeta origen es donde tengamos
los archivos que queremos redimensionar. El destino es ninguno porque la propia acción tiene
almacenado el lugar donde se tiene que guardar.
Podemos jugar con el destino en otros casos si lo vemos útil, para conseguir resultados
distintos y que los archivos se guarden en otros lugares, con otros nombres, etc.
Con esto podemos apretar el botón que pone "Ok" para comenzar el procesamiento automático
del lote. Veremos que es bien simple y rápido modificar de una vez todos los archivos de un
directorio con Photoshop.

Definir un motivo para hacer un fondo con Photoshop

La herramienta bote de pintura de Photoshop es de las más utilizadas, incluso por los usuarios
con menos experiencia. Sirve para rellenar de color un área, ya sea un área que hemos
seleccionado o una imagen entera. Generalmente habremos utilizado esta herramienta para
rellenar un área de la imagen con un color plano.
En este artículo vamos a utilizar el bote de pintura, no para rellenar con un color plano, sino
para pintar un fondo de una imagen con un motivo personalizado. El motivo puede ser
cualquier cosa que necesitemos, como un logotipo, un tramado o una textura.
Primero tendremos que crear nuestro propio motivo. Para ello tenemos que definir el motivo.
Se hace realizando una selección con el motivo que queremos utilizar. En este caso hemos
seleccionado el logo de DesarrolloWeb.com.
Una vez seleccionado copiamos la selección en el portapapeles, con CTRL+C o el menú de

edición-copiar.
Una vez hemos copiado lo que queremos crear como motivo en el portapapeles, vamos al
menú edición-Definir motivo. Parece que la acción no da ningún resultado, pero con ello
habremos creado un motivo personalizado en nuestra lista de motivos de Photoshop.
Ahora vamos a utilizarlo. Para ello 1) marcamos la herramienta bote de pintura, 2) indicamos
que queremos pintar con un motivo y 3) seleccionamos el motivo que acabamos de crear.

Ahora, cuando utilicemos la herramienta bote de pintura, se pintará sobre la imagen un

mosaico con el motivo que acabamos de crear. Podemos probar por nosotros mismos el efecto
que sería pintar con ese motivo sobre un lienzo vacío. El resultado tiene que ser algo como lo
que se puede ver en esta imagen:
Esta técnica nos puede servir también para generar fondos con tramados que podemos utilizar
en una página web. Por ejemplo, podemos definir un motivo como este:
Al pintar sobre un lienzo vacío con este motivo nos saldrá un diseño como este que sigue:

Resaltar los colores de una foto con Photoshop

Uno de los usos más básicos de Photoshop es el retoque de fotografías, para lo que resulta una
herramienta con un sin fin de posibilidades. Existen diversos métodos de conseguir que las
fotos queden más impactantes y uno de ellos es el que vamos a explicar en este artículo:
resaltar los colores de una foto para que queden más vivos.
En el menú de Imagen, en la opción Ajustes, encontraremos muchas herramientas para

retocar la foto en varios parámetros. Pero no vamos a utilizar ninguna opción del menú imagen
pues, como muchos de nosotros sabremos, existen diversos modos de conseguir las cosas que
buscamos en Photoshop. Muchas veces algunos son un poco difíciles de encontrar por uno
mismo, puesto que requieren de varios pasos.
Primero abriremos una foto a la que queramos resaltar el color.
Luego, tenemos que abrir la ventana de Canales. Generalmente comparte un mismo espacio
con la ventana de capas, pero si no la vemos podemos acceder al menú Ventana, Canales.
Una vez hayamos localizado la ventana de canales, veremos que aparecen varios canales. Está
el canal RGB (que es la unión de todos los colores) y un canal por cada uno de los colores
básicos, Rojo, Verde y Azul. Entonces debemos mantener pulsada la tecla de control (CTRL) y
hacer clic en el dibujo que hay en el canal RGB.

Con esto habremos conseguido crear una selección de todas las áreas de color de la imagen.
Veremos la selección realizada en la imagen. Entonces, utilizando la herramienta de selección
de Photoshop, apretamos con el botón derecho en cualquier parte de la imagen y en el menú
contextual que aparece seleccionamos "Capa vía copiar".
Con ello hemos conseguido una nueva capa que contiene partes de la imagen con color. Si
vamos a la ventana de capas (menú Ventana, Capas), podemos ver esa nueva capa creada y si
ocultamos un momento el fondo veremos el contenido que tiene, que es casi transparente. La
imagen, no obstante, no ha cambiado todavía. Para el siguiente paso, volvemos a mostrar el
fondo, si es que lo habíamos ocultado momentáneamente, para que tanto la nueva capa como
el fondo estén visibles.
Ahora, en el menú de capa, pulsamos el desplegable que aparece arriba del listado de capas, a
la izquierda de donde está el selector de opacidad. Este menú permite modificar algunas
propiedades de la capa. Nosotros tenemos que seleccionar la opción que pone "Superponer".

Con ello hemos aumentado sensiblemente la cantidad de color que tenía la imagen. Los
resultados, si todo ha ido bien, son inmediatos. Podremos ver que la imagen cambia y el color
queda mucho más resaltado.
Eso es todo! Si queremos aumentar todavía más el efecto, simplemente debemos duplicar la
capa nueva que hemos creado. Ahora muestro el resultado de la foto cuyo color hemos
resaltado con un par de capas de color superpuesto. Podemos compararla con la primera
imagen de este tutorial para ver la diferencia de color de ambas imágenes.
Quizás ha quedado incluso demasiado sobreexpuesto el color, pero he querido reforzar el

efecto para que la primera imagen y esta última se puedan diferenciar bien.



Manual Taller Photoshop

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Taller Photoshop

Uploaded by

Copyright:

Available Formats

Tu mejor ayuda para aprender a hacer webs

Autores del manual

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 1

Introducción al Taller de Photoshop

Artículo por Miguel Angel Alvarez

Crea un GIF animado con Photoshop

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 2

Crear un archivo .psd con los distintos fotogramas

Para pasar el archivo desde Photoshop a Image Ready cómodamente, podemos

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 3

Nota: La acción de pasar de un programa a otro será muy repetida durante el

Trabajo con Image Ready

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 4

Optimizar la imagen con Image Ready

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 5

Artículo por Juliana Monteiro Lazaro

Crear un GIF animado con Photoshop II

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 6

Crear un archivo .psd con los distintos fotogramas

Trabajo con Image Ready

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 7

Posteriormente habrá que asignarles un tiempo adecuado a cada fotograma. No es

Para guardar la animación en un archivo GIF seleccionamos la opción "guardar optimizada

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 8

Artículo por Juliana Monteiro Lazaro

Maquetar una web a partir de una imagen con Photoshop

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 9

Eliminar una imagen de un sector y sustituirla por un texto

<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 10

<IMG SRC="imágenes/espacio.gif" WIDTH=34 HEIGHT=1></TD>

<TD width=215 height=16>

Podemos ver el resultado obtenido en una página aparte.

Artículo por Miguel Angel Alvarez

Creación de un fondo para una página web en Photoshop

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 11

Paso 1. Nuevo archivo

Paso 2. Líneas horizontales de fondo

En la imagen pondremos un fondo de color blanco, para empezar a dibujar, si es que no lo

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 12

Paso 3. Definimos el área del cuerpo de la página

Ahora, con la herramienta de selección "marco rectangular", vamos a seleccionar parte de la

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 13

Una vez realizada la selección, pintaremos de blanco en una nueva capa.

Paso 4. Difuminado del borde del cuerpo

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 14

Posiblemente el degradado haya quedado demasiado oscuro. Para suavizar el efecto

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 15

Paso 5. Duplicar el fondo

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 16

Paso 6. Colocar este fondo en una página web

Artículo por Juliana Monteiro Lazaro

Crear un fondo con líneas diagonales con Photoshop

El proceso no tiene ninguna dificultad. Empezamos creando un nuevo documento en blanco.

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 17

Seleccionaremos la herramienta de línea, que está agrupada junto a las herramientas de

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 18

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 19

Copiamos entonces la selección y la pegamos en otro documento, que guardamos con

Artículo por Juliana Monteiro Lazaro

Fondo tipo mosaico a partir de una imagen con Photoshop

Podemos ver el ejemplo en una página aparte.

Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html 20