Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Crear Thumbnails con Acciones Photoshop

Crear Thumbnails con Acciones Photoshop

 

Tutorial por Jorge Oyhenard (elQuique)

En este Tutorial veremos como grabar acciones con Photoshop CS3, específicamente una acción para crear Thumbnails de imágenes para una galería.

Galería de Imágenes Acciones Photoshop CS3

En esta oportunidad veremos como crear una galería de imágenes utilizando Photoshop, CSS y xHTML.

En mi caso, tengo 60 imágenes de 800x533 pixeles, de una Actividad Artística realizada en Foro Creativo (www.forocreativo.net), y lo primero que haremos es obtener copias de cada imagen con un menor tamaño, llamadas thumbnails, que son eso, una visualización pequeña de la imagen original. Con esto logramos ver varias imágenes de una vez y mucho mas rápido, y al dar click en cada una de ellas logramos verla de mayor tamaño.

Crear Acciones en Photoshop CS3

Lo primero que haremos será mostrar el Cuadro de Acciones (Actions), para esto vamos a Ventana (Window), Acciones (Actions), o presionamos ALT + F9.

Crear acciones con Photoshop

Para comenzar a grabar nuestra Acción, vamos a presionar en el icono Nuevo (New), y le damos un nombre, en este caso Crear_Thumbnails, y presionamos Record.

Crear acciones con Photoshop

De esta forma comenzara a grabar todo lo que hagamos. Y lo que haremos es sencillo, abrimos uno de los archivos de imagen, con Archivo (File), Abrir (Open), y seleccionamos la imagen de la carpeta donde estén las imágenes, y presionamos Abrir.

Crear acciones con Photoshop

Luego vamos a Archivo (File), Guardar para Web (Saver for web)

Y en la pantalla de Guardar para web, debemos setear todos los parámetros para que la imagen sea mas pequeña, y lo mejor optimizada posible. Abajo a la izquierda tenemos el formato (JPEG), el tamaño (7,25kb), y los segundos estimados que demora en mostrarse en la web (6 segundos en un modem de 14.4kbps).

Crear acciones con Photoshop

Seleccionado a la derecha en la solapa Tamaño de Imagen (Image Size), vamos a setear un Ancho (Width) de 150 pixeles, que al tener marcado la opción Mantener Proporciones (Constrain Proportions), ajustara automático el Alto (Height), y le damos al botón Aplicar (Apply).

Más arriba tenemos el  formato, puede ser GIF 32, 64, 128, PNG, o JPEG, que elegiremos en este caso, y específicamente el de alta calidad JPEG High que mantiene la Calidad (Quality) en 60%.

Por ultimo damos Guardar (Save). En este punto, vamos a tener en cuenta de guardar las imágenes en una subcarpeta thumb que debemos crear dentro de la carpeta donde están las imágenes grandes, esto es para dejar todo mejor organizado.

Y con esto, listo tenemos nuestra primer Thumbnails.

Ahora vamos a Detener la Grabación de la Acción con el botón Stop.

Esta acción, queda Guardada en Photoshop y podemos utilizarla todas las veces que se necesite, para esta y otras imágenes.

Pero como vimos la acción se realizo para una sola imagen, ahora haremos que esas 20, 40, 60 imágenes cambien de una sola vez.

Ejecutar Acciones por Lote

Para esto, simplemente vamos a la opción Archivo (File), Automatizar (Automate), Lote (Batch).

Luego vamos a seleccionar la Acción, Crear_Thumbnails, como Origen (Source), seleccionamos Carpeta (Folder), de manera que procesara todas las imágenes que están en esa carpeta, de una sola vez.

Con Seleccionar (Choose), elegimos la carpeta indicada, donde están todas las imágenes. Y marcamos la opción Sobrescribir comando “Abrir” en la acción (Override Action “Open” Commands), esto para que no haga el proceso de abrir archivo que grabamos en la acción, ya que era solo para la imagen1 y ahora se realizara para todas las imágenes de la carpeta.

Crear acciones con Photoshop

Por último damos OK, y aguardamos unos segundos a que procese todas las imagenes, con esto, tenemos todas las Thumbnals (reducciones) listas, en una carpeta Thumb, ya que al Grabar la Acción, esa fue la carpeta que usamos.

En la próxima entrega veremos como armar el xHTML y CSS para esta galería.

Comentarios de Crear Thumbnails con Acciones Photoshop

↑ Tutorial