En el artículo pasado vimos en teoría un poco acerca de lo que se puede hacer con las acciones con photoshop, recordamos que mencioné que se pueden automatizar varios procesos y tareas muchas de ellas frecuentes y algunas hasta tediosas. Bueno en este tutorial veremos en práctica como utilizarla para guardar fotos para web; veremos el paso que utilizó yo para guardar mis archivos para mis blogs, cuando lo aprendas, el proceso es rápido, ágil y sobre todo no tiene que tomarte mucho tiempo en guardar tus fotos para web, aun sin las acciones es rápido; comencemos:
¿Qué aprenderás:
- Guardar para Web
- Redimensionar imágenes
- Utilizar acciones para automatizar el proceso
Requisitos:
- Imágenes grandes, por ejemplo en este tutorial trabajaremos con: niña.jpg y nina-a-lapiz.jpg (puedes utilizar la misma imagen grande de la niña que utilizamos en el tutorial pasado de Foto a Dibujo a Lápiz y el resultado: nina-a-lapiz.jpg
- Convertir imagen a 500px de ancho, a una resolución de 72pixeles por pulgada (72 dpi)
Fundamentos:
¿Pór que 500px de ancho? Porque es el ancho promedio de una columna de contenido en una página web (nota: es variable, puede ser más o menos, en este caso utilizamos 500px que es lo que yo utilizo para este blog
¿Por qué a 72pixeles por pulgada? Porque es la resolución máxima en una foto optimizada para web; puedes elegir más grande pero corres el riesgo que no se descargue rápido en el navegador, mi recomendación es que no te excedas de esa resolución.
¿Qué es una resolución de imagen? Este término (resolución) lo estaremos mencionando a lo largo de los tutoriales y en curso, si no lo conoces y solo lo habías oído mencionar, te explico de la menta más sencilla lo que es, sin tanto rollo: la resolución es la cantidad de pixeles que hay en una pulgada de la imagen, es decir, que por cada pulgada lineal que tenga una imagen será de 72 pixeles, por ejemplo: si una imagen mide 1 pulgada cuadrada y tiene la resolución de 72ppp (dpi) 72px x 72px = 5,184 pixeles en total contenidos en la imagen.
Vamos a la práctica:
Lo primero que vamos a hacer es crear las acciones para luego hacerlo automático; photoshop ya tiene acciones creadas y vienen predeterminadas en el panel de acciones, sin embargo, vamos crear la propia basada en nuestra necesidad; lo primero que se hace con las las acciones es básicamente guardar los “pasos” que se hace en cada proceso, para luego hacerlo automático.
Abrimos la imagen nina.jpg
Abrimos el panel de acciones, para ver el panel podemos ir al menú ventana > Acciones (1), también podemos teclea la tecla F9 (2) o vamos damos clic en el icono de acicone en los paneles acoplados (3):
En el panel de acciones creamos un nuevo grupo de acciones
Le colocamos el nombre que desees yo en mi caso le puse Guardar Para Web
Creamos el grupo nuevo, (se puede ver la carpetita nueva con el nombre que le pusimos)
Luego creamos la acción nueva, la nombre como Redimencionar y Guardar
(podemos crear varias acciones dentro de un grupo), podrás que se creó la nueva accion Redimencionar y Guardar (1) y también verás que se activa el botón de Grabar (2), pues en ese momento Photoshop inicia el grabado de las acciones, puedes pararlo (3) si quieres, y luego guardar, si tienes que preparar algunos pasos si no, déjalo correr.
Vamos a crear los pasos de la acción nueva: damos clic sobre el botón grabar (si paraste la grabación, si no la paraste, continua).
- Nos aseguramos que la accion nueva Redimencionar y Graba este seleccionada
- Nos aseguramos que el botón Grabar este activado
- Vamos al Menú Imagen y seleccionamos Tamaño de Imagen
Nos aparece la siguiente ventana con los valores originales:
Introducimos los siguientes parámetros:
(1) Resolución de 72 Pixeles por pulgada
(2) Anchura de imagen 500 pixeles
Damos clic en Ok
La imagen ha sido redimencionada y su resolución ha disminuido; lo cual es un requisito indispensable para guardarla para web.
Aclaraciones:
¿Por qué solo la anchura y no la altura también? Porque no nos importa la altura que tenga, no es relevante, pues requerimos que de ancho no exceda de 500pixeles (en este caso, pues la anchura de la pagina web asi lo requiere, además no todas las fotos son del mismo tamaño a menos que sean tomada por la misma cámara en el mismo momento(en nuestro curso que estoy desarrollando veremos mas de cerca este detalle de acciones por lote, ahí si será importante la altura); lo que hicimos en este caso es crear un paso que sirva para cualquier imagen superior a los 500 pixeles con resolución mínimo de 72ppp.
Bueno hasta este paso ya tenemos la imagen que no excede de los 500pixeles por pulgada y no excede tampoco los 72 ppp.
Colocamos el zoom al 100% (1) (esto es importante pues será el tamaño REAL que tenga en pantalla en la página web).
NOTA: cuando ejecutamos este tipo de comando como el zoom, no se crean pasos de acción, observa el panel de acciones (2)
TIP: cuando trabajas para diseño web, debes de realizar tus gráfico e imágenes SIEMPRE al 100% pues ese será tu tamaño real que se verá tu imagen en la página web, Toma nota por favor sobre este consejo)
Ahora procedemos a grabar los pasos para guardarlo para web
(1) Nos aseguramos que esté selecionada la accion Redimencionar y Guardar
(2).- Nos aseguramos que el botón de Grabar esta activado
(3).- Vamos al menú Archivo y seleccionamos Guardar para Web y Dispositivos:
Nos abrirá la ventana de opciones para guardar para web, seleccionamos y verificamos los siguientes parámetros:
(1) Verificamos el tamaño real 100%
(2) Verificamos el tamaño aproximado del archivo resultante
(3) Verificamos el tamaño en Pixeles (podemos ver que tiene 500 pixeles de ancho)
(4) Seleccionamos JPEG
(5) Seleccionamos Calidad Media
(6) Seleccionamos o verificamos que tenga calidad 30
Nota: estos parámetros son solo una guía tu puedes elegir los que desees, solo piensa un momento que será para guardar varias imágenes con los mismos parámetros, puedes elegir mas calidad, otro formato: GIF o PNG; pero OJO: siempre vigila cual te conviene mas en cuanto a tamaño se refiere eso lo puedes verificar en el punto número 2 (Verificamos el tamaño aproximado del archivo resultante)
Cuando le des clic en Guardar seleccionas la carpeta en donde desees guardar tus imágenes, el nombre que te define es el mismo que tiene el archivo original (1); en mi caso seleccioné la carpeta optimzadas (2)
Vemos en el explorador de Windows el archivo resultante.
(1) Vemos la ruta en donde las futuroas imagenes se guardarán automaticamente con esta acción
(2) Vemos el archivo guardado nina.jpg
(3) Confirmamos (en windows solamente) El tamañ o de la imagen de 500px de ancho
(4) Vemos el tamaño del archivo en Kilobytes
Ahora paramos la grabación y procedemos a abrir otra imagen para poner nuestra acción…vaya la redundancia: en Acción!!
13.- Abrimos la imagen nina-lapiz.jpg
14.- En el panel de acciones: nos aseguramos tener seleccionada la accion Redimencionar y Guardar (1), luego hacemos clic sobre el botón Ejecutar (2) y entonces nuestra acción se ejecuta sin darnos cuenta, pues no abre ni una sola ventana, solo se ve en el panel de acción solo pasa de un paso a otro.
Vamos a la carpeta donde que grabamos en la acción pues ahí se grabaran las futuras imágenes, en esta acción, vemos que se encuentra otro archivo llamado: nina-lapiz.jpg junto con el archivo con el que hicimos la grabación de la acción.
(1) Confirmamos que la images se guardo en la mima caperta optimizadas
(2) Vemos que se encuentra la imagen que nos sirvio para grabar los paso de acción
(3) Vemos que el archivo efectivamente se guardo
(4) Vemos que la imagen se optimizó verificando su tamaño en pixeles
(5) Vemos y confirmamos que la imagen se guardó a 500 pixeles de ancho
Las acciones son comandos que nos pueden facilitar mucho la vida en photoshop; ahora que has terminado de leer este tutorial puedes practicarlo con otras imágenes más grandes, pues ya tendrás tu acción creada; solo recuerda que de manera predeterminada seleccionaste una carpeta, y ahí se guardaran todas las siguientes, para que lo tomes en cuenta.
Les comparto el PDF de SlideShare:
Descarga el PDF con más calidad:
PDF Tutorial de Acciones Photoshop
¿Qué tal te ha parecido este tutorial básico de acciones? Tienes alguna duda o algún comentario no dudes ni olvides dejarlo, te responderé personalmente. espero que te sirva este tutoriaL.
Sinceramente
Eduardo Núñez
Como usar photoshop | Aprende Photoshop 
Excelente y bien explicado, gracias…
Hola Fernando, gracias por tu comentario, Photoshop no es un programa que se aprenda de la noche a la mañana, y no es facil aprenderlo solo, a menos que dediques muchas horas, tiempo y disciplina, por esto, estoy haciendo los tutoriales lo mas claro posible y sobre todo que sea para ustede mas facil aprenderlo.
Saludos y gracias.
Gracias, lo probe y me ha servido, para no repetir cada una y otra ez lo mismo.
Que tal Erasmo, que bueno que te haya servido, las acciones suelen hacer el trabajo pesado, y sobre todo aquel que nos puede llegar a quitar el tiempo, aunque sean insignifacantes pasos, si automatizas los que mas usas, puedes ahorrarte muchisimo tiempo.
Gracias por tu comentario
Saludos
hola , quisiera recibir sus tutoriales, gracias
Holta Eduardo, muchas gracias por tu interés, para que recibas más tutoriales a tu correo, solo basta con suscribirte a este blog, en la siguiente imagen te expongo donde:
(1) La suscripción es GRATIS y puedes desuscribirte cuando quieras.
(2) Introduce en este campo el correo electrónico al que desees recibir la futura información.
RESPETAMOS muchisimo la privacidad de los usuarios, no hacemos mal uso de correo electrónico, valoramos su confianza y no queremos corromperla; asi que no tienes de que preocuparte, suscríbete con confianza.
Saludos
muy buenos los tutoriales, felicitaciones.
Muchas Gracias Eduardo, y gracias a todos por sus felicitaciones, gracias esto, estoy trabajando para que mis tutoriales sean lo más claro posible, que no les quede ni una pizca de duda de lo que se expone, he trabajado mucho tiempo con photoshop, y se lo dificil que es empezar a usarlo y como irlo llevando sin morir ni perder el alma en el intento, que no les quede ninguna duda contactenme si les queda alguna en particular.
Saludos y gracias de nuevo.
Deseo suscribirme a los boletines de Phptpshop
Hola Carlos, Gracias por tu interés. puedes suscribirte al blog en la parte superior izquierda de la página, en la columna izquierda tal y como se muestra en la imagen que comente hace unas horas.
Saludos
Hola. Mi más sincera felicitación por intentar instruirnos en el manejo de este excelente programa de retoque fotográfico. Mis conocimientos creía eran de algo más de iniciación pero noto que se me escapaban aspectos como la resolución de pantalla, el tamaño de una pagina web, etc por no no cansar.
Lo voy a utilizar para insertar las imagenes en un blog y para seguir practicando con el programa de retoque.
Gracias y enhorabuena.
Hola Luis, gracias por tu comentario, y gracias por alentarme a seguir, la verdad es que photoshop puede parecer imponente al manejarlo o intentar manejarlo, sin embargo siempre es bueno conocer todos los aspectos básicos y sobre todo los detalles que al pasarlos por alto, suelen dar problemas o simplemente no quedar como nosotros quisieramos.
Gracias y saludos
hola quisero saber si el photostop es gratis y seguro
Hola Luci gracias por tu comentario, lamento decirte que Photoshop no es Gratis, puedes descargar una version Trial en su pagina oficial http://www.adobe.com/es/ y si es seguro, te recomiendo que no descargues ninguna version gratuito de dudosa pagina, pues muchos de ellos ofrecen el programa con un crack que puede ser un virus o troyano que puede dañar tu equipo y tus archivos.
Saludos
GRACIAS!