ramonjosegn
Sigma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
Hoy a raíz de uno de los posts en el foro me llamó la atención que algunos usuarios todavía no tienen claro cómo manejar herramientas básicas para escalar imágenes o subirlas a internet.
Voy a explicar los pasos básicos para dejar lista una web para subir a Internet con ADOBE PHOTOSHOP pero la verdad ES QUE PHOTOSHOP NO ES RECOMENDABLE PARA WEB. Precisamente por eso lanzaron otras herramientas como Adobe Image Ready, que sí permitían mejores tasas de compresión y pensaban en la web a todos los niveles.
Más tarde voy a publicar el mismo sistema con Zoner para que no tengas que invertir miles de dólares sólo para preparar una imagen para subir a Internet.
¿QUÉ NECESITAS?
- El software Adobe Photoshop (en la web de Adobe puedes bajar versiones de prueba)
- La imagen a preparar para internet
EL TURORIAL - PREPARANDO IMÁGENES PARA WEB EN PHOTOSHOP
Paso 1 . -
Seleccionamos la imagen que deseamos usar, en mi caso usaré esta imagen
( Download Photo - freeimages - es una foto gratuita pero necesitas registrarte para poder bajarla)
( si necesitas imágenes gratis puedes revisar el siguiente link - http://forobeta.com/tutoriales/369032-y-bajar-miles-de-imagenes-gratis.html )
Paso 2 . -
Abrimos la imagen en Adobe Photoshop
Paso 3 . -
Revisamos que la imagen se encuentre en modo RGB, es decir, que la imagen se forma con 3 canales (rojo, verde y azul), ya que estas son las imágenes que aceptan generalmente los navegadores (se usan 3 canales para formar imágenes en color y conseguir más compresión - las imágenes en escala de grises usan un solo canal por lo que pesan mucho menos).
También verificamos que la imagen se encuentre en 8 bits
Para revisar que la imagen esté en modo RGB y en 8 bits, accedemos al menú IMAGEN > MODO
En caso de que la imagen tuviera otros parámetros deberemos seleccionar imagen > Modo > color RGB y luego imagen > Modo > 8bits
(Para los manitas podéis hacer clic en la barra de estado en la zona de información del documento para obtener información rápidamente de la imagen
Paso 4 . -
Procedemos a cambiar la resolución de la imagen, la resolución recomendada para web es de 72 dpi, aunque hoy día algunos monitores soportan resoluciones más altas
Respetaremos el estándar habitual de 72 dpi (son los pixeles que hay en una pulgada) - nota: 72 dpi o 72 ppi o 72 ppp dependiendo del propgrama y el enfoque del documento
Tendremos que realizar varios pasos
Para ello accedemos al menú IMAGEN > TAMAÑO DE IMAGEN
A continuación vamos a seleccionar EL SISTEMA QUE USARÁ PHOTOSHOP para cambiar la imagen, dependiendo del sistema elegido conseguiremos mayor o menor calidad y enfoque.
Ya que en nuestro caso vamos a reducir el tamaño de la imagen escogeremos el algoritmo (sistema) BICÚBICA MÁS ENFOCADA que es el que recomienda el programa para reducciones
A continuación ingresamos 72 dpi en la casilla correspondiente
OJO NO HAGAS CLIC TODAVÍA EN ACEPTAR
Paso 5 . -
Ya tenemos nuestra imagen en formato CON LO SIGUIENTE:
- MODO RGB
- MODO 8 BITS
- ALGORITMO DE ESCALADO BICÚBICA MÁS ENFOCADA
- 72 DPI
Ahora debemos especificar el tamaño final de nuestra imagen, para ello podemos escoger cambiar el tamaño a lo alto o lo ancho.
Los tamaños seguros para mostrar imágenes los puedes encontrar en este link:
Designers Toolbox Web Safe Area
En mi caso voy a usar un ancho de 640 pixeles para mi imagen.
Así que simplemente inserto ese valor en la casilla ANCHURA
Hacemos clic en OK
Paso 6 . -
Abrimos el sistema de guardado especial de imágenes para web/internet. Para ello accedemos al menú
ARCHIVO > GUARDAR PARA WEB Y DISPOSITIVOS
Paso 7 . -
En el cuadro de diálogo podemos jugar con los ajustes que se nos presentan.
Mis recomendaciones para la imagen actual:
Modo - JPEG - para fotos es lo más recomendable, para logos mejor usar PNG, para imágenes de pocos colores usar GIF
Calidad - Alta - calidades alrededor de 72 son aceptables para web
Progresivo - Activado (esto hace que la imagen cargue por pasos y no de una vez, útil para los que tienen conexiones lentas)
Perfil ICC - Desactivado (añade información que no es útil en la web)
Desenfoque - Desactivado, por lo general - si lo usas ahorras unos kilobytes, como en mi caso
Paso 8 . -
Hacemos clic en GUARDAR
Paso 9 . -
Mi imagen lista para la web
Peso del archivo original - 1.234 megas
Peso del archivo final - 75.4 kilobytes
¿Se notó el cambio????????????
----
Si tenéis cualquier duda me avisáis, agradezco si lo hacéis con mención ( [MENTION=1576]ramonjosegn[/MENTION] ) para no demorarme en las respuestas, gracias
Voy a explicar los pasos básicos para dejar lista una web para subir a Internet con ADOBE PHOTOSHOP pero la verdad ES QUE PHOTOSHOP NO ES RECOMENDABLE PARA WEB. Precisamente por eso lanzaron otras herramientas como Adobe Image Ready, que sí permitían mejores tasas de compresión y pensaban en la web a todos los niveles.
Más tarde voy a publicar el mismo sistema con Zoner para que no tengas que invertir miles de dólares sólo para preparar una imagen para subir a Internet.
¿QUÉ NECESITAS?
- El software Adobe Photoshop (en la web de Adobe puedes bajar versiones de prueba)
- La imagen a preparar para internet
EL TURORIAL - PREPARANDO IMÁGENES PARA WEB EN PHOTOSHOP
Paso 1 . -
Seleccionamos la imagen que deseamos usar, en mi caso usaré esta imagen
( Download Photo - freeimages - es una foto gratuita pero necesitas registrarte para poder bajarla)
( si necesitas imágenes gratis puedes revisar el siguiente link - http://forobeta.com/tutoriales/369032-y-bajar-miles-de-imagenes-gratis.html )
Paso 2 . -
Abrimos la imagen en Adobe Photoshop
Paso 3 . -
Revisamos que la imagen se encuentre en modo RGB, es decir, que la imagen se forma con 3 canales (rojo, verde y azul), ya que estas son las imágenes que aceptan generalmente los navegadores (se usan 3 canales para formar imágenes en color y conseguir más compresión - las imágenes en escala de grises usan un solo canal por lo que pesan mucho menos).
También verificamos que la imagen se encuentre en 8 bits
Para revisar que la imagen esté en modo RGB y en 8 bits, accedemos al menú IMAGEN > MODO
En caso de que la imagen tuviera otros parámetros deberemos seleccionar imagen > Modo > color RGB y luego imagen > Modo > 8bits
(Para los manitas podéis hacer clic en la barra de estado en la zona de información del documento para obtener información rápidamente de la imagen
Paso 4 . -
Procedemos a cambiar la resolución de la imagen, la resolución recomendada para web es de 72 dpi, aunque hoy día algunos monitores soportan resoluciones más altas
Respetaremos el estándar habitual de 72 dpi (son los pixeles que hay en una pulgada) - nota: 72 dpi o 72 ppi o 72 ppp dependiendo del propgrama y el enfoque del documento
Tendremos que realizar varios pasos
Para ello accedemos al menú IMAGEN > TAMAÑO DE IMAGEN
A continuación vamos a seleccionar EL SISTEMA QUE USARÁ PHOTOSHOP para cambiar la imagen, dependiendo del sistema elegido conseguiremos mayor o menor calidad y enfoque.
Ya que en nuestro caso vamos a reducir el tamaño de la imagen escogeremos el algoritmo (sistema) BICÚBICA MÁS ENFOCADA que es el que recomienda el programa para reducciones
A continuación ingresamos 72 dpi en la casilla correspondiente
OJO NO HAGAS CLIC TODAVÍA EN ACEPTAR
Paso 5 . -
Ya tenemos nuestra imagen en formato CON LO SIGUIENTE:
- MODO RGB
- MODO 8 BITS
- ALGORITMO DE ESCALADO BICÚBICA MÁS ENFOCADA
- 72 DPI
Ahora debemos especificar el tamaño final de nuestra imagen, para ello podemos escoger cambiar el tamaño a lo alto o lo ancho.
Los tamaños seguros para mostrar imágenes los puedes encontrar en este link:
Designers Toolbox Web Safe Area
En mi caso voy a usar un ancho de 640 pixeles para mi imagen.
Así que simplemente inserto ese valor en la casilla ANCHURA
Hacemos clic en OK
Paso 6 . -
Abrimos el sistema de guardado especial de imágenes para web/internet. Para ello accedemos al menú
ARCHIVO > GUARDAR PARA WEB Y DISPOSITIVOS
Paso 7 . -
En el cuadro de diálogo podemos jugar con los ajustes que se nos presentan.
Mis recomendaciones para la imagen actual:
Modo - JPEG - para fotos es lo más recomendable, para logos mejor usar PNG, para imágenes de pocos colores usar GIF
Calidad - Alta - calidades alrededor de 72 son aceptables para web
Progresivo - Activado (esto hace que la imagen cargue por pasos y no de una vez, útil para los que tienen conexiones lentas)
Perfil ICC - Desactivado (añade información que no es útil en la web)
Desenfoque - Desactivado, por lo general - si lo usas ahorras unos kilobytes, como en mi caso
Paso 8 . -
Hacemos clic en GUARDAR
Paso 9 . -
Mi imagen lista para la web
Peso del archivo original - 1.234 megas
Peso del archivo final - 75.4 kilobytes
¿Se notó el cambio????????????
----
Si tenéis cualquier duda me avisáis, agradezco si lo hacéis con mención ( [MENTION=1576]ramonjosegn[/MENTION] ) para no demorarme en las respuestas, gracias