ramonjosegn
Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Hola chicos/as.
A raíz de otro hilo donde estábamos debatiendo este tema vi que algunos usuarios no tienen muy claro cómo hacer que sus imágenes tengan el tamaño adecuado para insertar en sus blogs u otros sitios web, o cómo hacer que encajen en la zona de "imágenes destacadas" en WordPress. La verdad es que es entendible, ya que es un proceso que generalmente requiere un par de pasos y tener unos conocimientos mínimos de diseño gráfico.
Así que, después de hablar con [MENTION=45450]engonga[/MENTION] [MENTION=48544]jeffnegocios[/MENTION] [MENTION=150526]Cajuna[/MENTION] les prometí un tutorial sencillo para poder redimensionar sus imágenes de forma rápida y fácil.
En este tutorial explicaré cómo hacerlo con ZONER PHOTO STUDIO que es un programa para editar fotos que me encanta (y uso a diario) y que puedes conseguir gratis en la web en su edición LITE, aunque también he compartido versiones antiguas en el foro EN VERSIÓN PRO PROMOCIONALES gratis.
PASO 1. -
DESCARGA E INSTALA EL SOFTWARE ZONER PHOTO STUDIO LITE
DEBIDO A LAS MUCHAS RESTRICCIONES DE LA EDICIÓN 18 VAMOS A TRABAJAR CON LA VERSIÓN 17 LITE
La puedes descargar desde el siguiente enlace web
Zoner Photo Studio FREE es el software para fotos de Windows de primer nivel.
https://free.zoner.com/es/
Ver el archivo adjunto 75041
Procedemos con la instalación del software.
Te recomiendo que actives la instalación PERSONALIZADA y desactives la opción de ESTABLECER COMO VISOR POR DEFECTO en caso de que ya tengas un visor para ver tus fotos que te agrade (Zoner no es precisamente rápido abriendo para ver fotos).
Si no quieres mezclar configuraciones de otras versiones también te recomiendo desactivar la opción de importar configuraciones viejas.
Una vez instalado saldrán algunos consejos habituales hoy día en el software, simplemente aceptamos.
PASO 2. -
En este paso lo que haremos será ubicar el tamaño de la imagen que deseamos redimensionar/cortar.
Por ejemplo si se trata de un theme para WordPress y queremos saber qué tamaño debe tener generalmente tenemos varias opciones:
- consultar la documentación del theme
- revisar la demo del theme para verificar los tamaños que usa
Para este tutorial vamos a suponer que quiero averiguar el tamaño de la imagen destacada PRINCIPAL en el theme POINT.
Busco el demo y lo encuentro ubicado en el siguiente enlace web
Point – Just another MyThemeShop Playground site
Dependiendo del navegador tendremos diferentes formas de averiguar el tamaño. Generalmente también se pueden usar algunos addons del navegador para conocer el tamaño.
SI USAS MOZILLA FIREFOX
Con el botón derecho sobre la imagen escoges "VER INFORMACIÓN DE LA IMAGEN", luego seleccionas el nombre de la imagen y ahí saldrán las dimensiones
Como puedes ver el tamaño de nuestra imagen es de 620 píxeles de ancho por 315 píxeles de alto.
SI USAS CHROME
Personalmente siempre recomiendo NO USAR CRHOME para productividad, porque toca dar mil vueltas para poder hacer algo productivo.
Pero como sé que muchos lo usan el proceso sería de la siguiente forma
Botón derecho sobre la imagen y escogemos INSPECCIONAR
Se abrirá el panel de desarrollo (por defecto a mano derecha), el panel se abrirá con la ubicación de la imagen seleccionada
Una vez abierto dejamos el puntero del mouse/ratón sobre el código HTML de ubicación de la imagen.
Esperamos unos segundos y se mostrará un previo con las dimensiones de la imagen
SI USAS OPERA
El proceso es igual que para Chrome, pero la opción a escoger al situarnos sobre la imagen es INSPECCIONAR ELEMENTO
Ahora ya sabemos que nuestra imagen tiene un tamaño de 620 píxeles por 315 píxeles, y podemos averiguarlo con cualquier navegador que usemos.
PASO 3. -
A continuación escogemos la foto que queramos.
En mi caso voy a descargar una foto de PIXABAY.
Voy a descargar la imagen de esta chica para poder cortarla y llevarla al formato final de 620x315
LA RECOMENDACIÓN ES QUE SI TIENES VARIOS TAMAÑOS PARA BAJAR ESCOJAS EL TAMAÑO MÁS CERCANO AL TAMAÑO QUE DESEAS (y si quieres una copia adicional a tamaño máximo por si necesitaras la imagen en el futuro).
PASO 4. -
Abrimos la imagen en ZONER PHOTO STUDIO.
Para abrirla usa el explorador del programa
Si quieres copiar y pegar, en Zoner la opción es menú ADQUIRIR > DESDE EL PORTAPAPELES
PASO 5. -
Si has abierto la imagen mediante al explorador a continuación tienes que ACTIVAR EL EDITOR
Si optaste por copiar y pegar el EDITOR SE HABRÁ ACTIVADO DE FORMA AUTOMÁTICA
PASO 6. -
Te recomiendo si quieres tener más espacio que desactives el navegador inferior.
Simplemente clic en el botón "Tira de imágenes"
PASO 7. -
Activamos la herramienta RECORTAR
PASO 8. -
En las opciones de RECORTAR escogemos ASPECTO FIJO
PASO 9. -
En las opciones ANCHO y ALTO ingresamos los valores que averiguamos al prinicipio, es decir, 620 de ancho y 315 de alto.
OJO ESTOS VALORES NO SON LOS QUE TENDRÁ LA IMAGEN EN UN PRINCIPIO, SON SÓLO DE REFERENCIA PARA PROCEDER CON LA PROPORCIÓN DEL RECORTE
PASO 10. -
Hacemos clic sobre la imagen y sin soltar arrastramos con el mouse/ratón sobre la zona que nos interesa conservar (puedes mover la selección creada desde su interior para ajustarla mejor o tirar de los bordes para mejorarla).
En mi caso voy a escoger la zona del rostro
PASO 11. -
Una vez que estés ya satisfecho con el resultado haz clic en el botón APLICAR
PASO 12. -
ESTE ES EL PASO MÁS IMPORTANTE POR FAVOR NO TE LO SALTES
Hacemos clic en el botón ESCALAR (o Editar > Escalar en el menú)
PASO 13. -
En las opciones de escalar escogemos PULGADAS
De esta forma se activará RESOLUCIÓN
AQUÍ SIEMPRE VAMOS A PONER 72 que es una resolución estándar para web. Hoy día algunos monitores soportan resoluciones más altas, como 92 DPI, pero por lo general usar 72 te ayudará a comprimir mejor tus imágenes.
Como habrás visto este cambio AFECTÓ EL TAMAÑO DE NUESTRA IMAGEN.
Regresamos a la opción PIXELES, y de esa forma podrás comprobar que el tamaño ha cambiado
A continuación corregimos uno de los dos valores, y automáticamente debería recalcularse el valor del otro.
En mi caso voy a ingresar el ancho de 620
Hacemos clic en APLICAR
PASO 14. -
Guardamos nuestra imagen con la opción GUARDAR JPEG PARA WEB
El cuadro de diálogo lo podemos dejar tal cual, por lo general la compresión es más que aceptable con los ajustes por defecto para imágenes que no sean más grandes de 800 píxeles, aunque por supuesto eres libre de jugar con el panel.
PASO 14. -
Así queda mi imagen, TAMAÑO PERFECTO Y COMPRIMIDA PARA WEB, con un solo programa y sin gastar un centavo en software.
- - - Actualizado - - -
NOTA - Sé que lo más lógico sería escalar la imagen y cambiar la resolución al mismo tiempo, CON ESO TE EVITARÍAS UN PAR DE PASOS, pero no sé qué paranoia les dio al equipo de ZONER que al principio se podía hacer todo de una sola vez, ahora les dio porque hay que cambiar pulgadas por un lado y píxeles por otro y como ves si cambias un dato cambian todos, lo cual resulta todavía más confuso. En los próximos días compartiré cómo hacerlo con PHOTOSHOP donde efectivamente puedes hacer todo de una sola vez. Ya os contaré la magia... pero eso será en unos días...
A raíz de otro hilo donde estábamos debatiendo este tema vi que algunos usuarios no tienen muy claro cómo hacer que sus imágenes tengan el tamaño adecuado para insertar en sus blogs u otros sitios web, o cómo hacer que encajen en la zona de "imágenes destacadas" en WordPress. La verdad es que es entendible, ya que es un proceso que generalmente requiere un par de pasos y tener unos conocimientos mínimos de diseño gráfico.
Así que, después de hablar con [MENTION=45450]engonga[/MENTION] [MENTION=48544]jeffnegocios[/MENTION] [MENTION=150526]Cajuna[/MENTION] les prometí un tutorial sencillo para poder redimensionar sus imágenes de forma rápida y fácil.
En este tutorial explicaré cómo hacerlo con ZONER PHOTO STUDIO que es un programa para editar fotos que me encanta (y uso a diario) y que puedes conseguir gratis en la web en su edición LITE, aunque también he compartido versiones antiguas en el foro EN VERSIÓN PRO PROMOCIONALES gratis.
PASO 1. -
DESCARGA E INSTALA EL SOFTWARE ZONER PHOTO STUDIO LITE
DEBIDO A LAS MUCHAS RESTRICCIONES DE LA EDICIÓN 18 VAMOS A TRABAJAR CON LA VERSIÓN 17 LITE
La puedes descargar desde el siguiente enlace web
Zoner Photo Studio FREE es el software para fotos de Windows de primer nivel.
https://free.zoner.com/es/
Ver el archivo adjunto 75041
Procedemos con la instalación del software.
Te recomiendo que actives la instalación PERSONALIZADA y desactives la opción de ESTABLECER COMO VISOR POR DEFECTO en caso de que ya tengas un visor para ver tus fotos que te agrade (Zoner no es precisamente rápido abriendo para ver fotos).
Si no quieres mezclar configuraciones de otras versiones también te recomiendo desactivar la opción de importar configuraciones viejas.
Una vez instalado saldrán algunos consejos habituales hoy día en el software, simplemente aceptamos.
PASO 2. -
En este paso lo que haremos será ubicar el tamaño de la imagen que deseamos redimensionar/cortar.
Por ejemplo si se trata de un theme para WordPress y queremos saber qué tamaño debe tener generalmente tenemos varias opciones:
- consultar la documentación del theme
- revisar la demo del theme para verificar los tamaños que usa
Para este tutorial vamos a suponer que quiero averiguar el tamaño de la imagen destacada PRINCIPAL en el theme POINT.
Busco el demo y lo encuentro ubicado en el siguiente enlace web
Point – Just another MyThemeShop Playground site
Dependiendo del navegador tendremos diferentes formas de averiguar el tamaño. Generalmente también se pueden usar algunos addons del navegador para conocer el tamaño.
SI USAS MOZILLA FIREFOX
Con el botón derecho sobre la imagen escoges "VER INFORMACIÓN DE LA IMAGEN", luego seleccionas el nombre de la imagen y ahí saldrán las dimensiones
Como puedes ver el tamaño de nuestra imagen es de 620 píxeles de ancho por 315 píxeles de alto.
SI USAS CHROME
Personalmente siempre recomiendo NO USAR CRHOME para productividad, porque toca dar mil vueltas para poder hacer algo productivo.
Pero como sé que muchos lo usan el proceso sería de la siguiente forma
Botón derecho sobre la imagen y escogemos INSPECCIONAR
Se abrirá el panel de desarrollo (por defecto a mano derecha), el panel se abrirá con la ubicación de la imagen seleccionada
Una vez abierto dejamos el puntero del mouse/ratón sobre el código HTML de ubicación de la imagen.
Esperamos unos segundos y se mostrará un previo con las dimensiones de la imagen
SI USAS OPERA
El proceso es igual que para Chrome, pero la opción a escoger al situarnos sobre la imagen es INSPECCIONAR ELEMENTO
Ahora ya sabemos que nuestra imagen tiene un tamaño de 620 píxeles por 315 píxeles, y podemos averiguarlo con cualquier navegador que usemos.
PASO 3. -
A continuación escogemos la foto que queramos.
En mi caso voy a descargar una foto de PIXABAY.
Voy a descargar la imagen de esta chica para poder cortarla y llevarla al formato final de 620x315
LA RECOMENDACIÓN ES QUE SI TIENES VARIOS TAMAÑOS PARA BAJAR ESCOJAS EL TAMAÑO MÁS CERCANO AL TAMAÑO QUE DESEAS (y si quieres una copia adicional a tamaño máximo por si necesitaras la imagen en el futuro).
PASO 4. -
Abrimos la imagen en ZONER PHOTO STUDIO.
Para abrirla usa el explorador del programa
Si quieres copiar y pegar, en Zoner la opción es menú ADQUIRIR > DESDE EL PORTAPAPELES
PASO 5. -
Si has abierto la imagen mediante al explorador a continuación tienes que ACTIVAR EL EDITOR
Si optaste por copiar y pegar el EDITOR SE HABRÁ ACTIVADO DE FORMA AUTOMÁTICA
PASO 6. -
Te recomiendo si quieres tener más espacio que desactives el navegador inferior.
Simplemente clic en el botón "Tira de imágenes"
PASO 7. -
Activamos la herramienta RECORTAR
PASO 8. -
En las opciones de RECORTAR escogemos ASPECTO FIJO
PASO 9. -
En las opciones ANCHO y ALTO ingresamos los valores que averiguamos al prinicipio, es decir, 620 de ancho y 315 de alto.
OJO ESTOS VALORES NO SON LOS QUE TENDRÁ LA IMAGEN EN UN PRINCIPIO, SON SÓLO DE REFERENCIA PARA PROCEDER CON LA PROPORCIÓN DEL RECORTE
PASO 10. -
Hacemos clic sobre la imagen y sin soltar arrastramos con el mouse/ratón sobre la zona que nos interesa conservar (puedes mover la selección creada desde su interior para ajustarla mejor o tirar de los bordes para mejorarla).
En mi caso voy a escoger la zona del rostro
PASO 11. -
Una vez que estés ya satisfecho con el resultado haz clic en el botón APLICAR
PASO 12. -
ESTE ES EL PASO MÁS IMPORTANTE POR FAVOR NO TE LO SALTES
Hacemos clic en el botón ESCALAR (o Editar > Escalar en el menú)
PASO 13. -
En las opciones de escalar escogemos PULGADAS
De esta forma se activará RESOLUCIÓN
AQUÍ SIEMPRE VAMOS A PONER 72 que es una resolución estándar para web. Hoy día algunos monitores soportan resoluciones más altas, como 92 DPI, pero por lo general usar 72 te ayudará a comprimir mejor tus imágenes.
Como habrás visto este cambio AFECTÓ EL TAMAÑO DE NUESTRA IMAGEN.
Regresamos a la opción PIXELES, y de esa forma podrás comprobar que el tamaño ha cambiado
A continuación corregimos uno de los dos valores, y automáticamente debería recalcularse el valor del otro.
En mi caso voy a ingresar el ancho de 620
Hacemos clic en APLICAR
PASO 14. -
Guardamos nuestra imagen con la opción GUARDAR JPEG PARA WEB
El cuadro de diálogo lo podemos dejar tal cual, por lo general la compresión es más que aceptable con los ajustes por defecto para imágenes que no sean más grandes de 800 píxeles, aunque por supuesto eres libre de jugar con el panel.
PASO 14. -
Así queda mi imagen, TAMAÑO PERFECTO Y COMPRIMIDA PARA WEB, con un solo programa y sin gastar un centavo en software.
- - - Actualizado - - -
NOTA - Sé que lo más lógico sería escalar la imagen y cambiar la resolución al mismo tiempo, CON ESO TE EVITARÍAS UN PAR DE PASOS, pero no sé qué paranoia les dio al equipo de ZONER que al principio se podía hacer todo de una sola vez, ahora les dio porque hay que cambiar pulgadas por un lado y píxeles por otro y como ves si cambias un dato cambian todos, lo cual resulta todavía más confuso. En los próximos días compartiré cómo hacerlo con PHOTOSHOP donde efectivamente puedes hacer todo de una sola vez. Ya os contaré la magia... pero eso será en unos días...
Última edición:
