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

Directora de CriarWeb.com CriarWeb.com http://www.criarweb.com (4 capítulos)

Miguel Angel Alvarez

Director de DesarrolloWeb.com DesarrolloWeb.com http://www.desarrolloweb.com (9 capítulos)

José A. Quirós

http://www.promocionatuweb.com (1 capítulo)

Taller de Photoshop: http://www.d http://www.desarrolloweb.com/ esarrolloweb.com/manuales/tall manuales/taller-de-photoshop er-de-photoshop.html .html

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

1


Introducción al Taller de Photoshop En este artículo vamos a presentar el Taller de Photoshop, 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, 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 inter faces 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 e n DesarrolloWeb.com estamos publicando un Manual de Photoshop,, en el que sí explicamos los detalles más básicos del software, con el que Photoshop aprenderemos a dominar las herramientas her ramientas que utilizamos en este Taller 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, tardar, dejamos el link con la portada de nuestro Taller de Photoshop. Photoshop. Esperamos que sirva de utilidad. Artículo por Miguel 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, 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



2


Introducción al Taller de Photoshop En este artículo vamos a presentar el Taller de Photoshop, 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, 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 inter faces 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 e n DesarrolloWeb.com estamos publicando un Manual de Photoshop,, en el que sí explicamos los detalles más básicos del software, con el que Photoshop aprenderemos a dominar las herramientas her ramientas que utilizamos en este Taller 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, tardar, dejamos el link con la portada de nuestro Taller de Photoshop. Photoshop. Esperamos que sirva de utilidad. Artículo por Miguel 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, 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



2


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, 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. Taller de Photoshop: http://www.d http://www.desarrolloweb.com/ esarrolloweb.com/manuales/tall manuales/taller-de-photoshop er-de-photoshop.html .html


3


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

trabajo con Photoshop e Image Ready, 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 de ben visualizar en cada uno, deberemos hacerlo con Image Ready. 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 bo tó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, visualizar, de modo que debemos crear los distintos fotogramas de nuestra animación e indicar qué capas se deben de ben 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.



4


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.

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


5


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. Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


6


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 Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


7


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.



8


Artículo por Juliana Monteiro Lazaro

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.



9


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.



10


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: C/ Mayor nº 23, 3B - 28230 Madrid

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. Artículo por Miguel Angel Alvarez

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 Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


11


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.



12


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.



13


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.



14


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.



15


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 Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


16


"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 .

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. Artículo por Juliana Monteiro Lazaro

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.



17


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...".



18


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.



19


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. Artículo por Juliana Monteiro Lazaro

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 Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


20


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.



21


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í.



22


Se puede ver el ejemplo en marcha en una página aparte. Artículo por Miguel Angel Alvarez

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 Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


23


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. Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


24


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:



25


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:



26


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:

Artículo por Miguel Angel Alvarez

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.



27


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".



28


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. Artículo por Miguel Angel Alvarez

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.



29


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.



30


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.



31


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.



32


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.



33


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, Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


34


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:



35


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. Artículo por Miguel Angel Alvarez



36


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.



37


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:



38



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.



39


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".



40


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. Artículo por Miguel Angel Alvarez Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html


41

		Taller de Photoshop: http://www.desarrolloweb.com/manuales/taller-de-photoshop.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización. 10 Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

manual-taller-photoshop

Recommend Documents