Cómo preparar imágenes para la web

Por   13-02-2019

Cómo preparar imágenes para la web

Las imágenes que elija utilizar en su sitio son extremadamente importantes, ya que dirán mucho sobre usted como negocio. Asegúrese de elegir imágenes que sean llamativas y de una calidad decente.

La clave para obtener buenas imágenes web es mantenerlas lo más pequeñas posible. Recuerde: cuanto más grandes sean sus imágenes, más tardarán en cargarse cuando alguien vea su sitio web. Las imágenes son buenas para agregar interés visual a su sitio, pero si agrega demasiadas, puede comenzar a verse abarrotada.

Software de edición de imágenes

Hay muchos paquetes de software de edición de imágenes disponibles, y casi todos serán suficientes para la edición básica de imágenes para su sitio web.

Probablemente la opción más popular sea Adobe Photoshop, ahora disponible tanto en la versión profesional completa como en una versión reducida (Photoshop Elements) para usuarios domésticos. También hay muchos programas gratuitos de edición de imágenes disponibles en la web que tienen funciones casi idénticas a las de Photoshop.

En esta guía, le mostraremos cómo usar Photoshop y GIMP, que es un programa gratuito que se puede descargar desde http://www.gimp.org/.

Tipos de archivo

Para fotografías y gráficos con degradados (combinaciones de colores suaves), le recomendamos que guarde sus imágenes como archivos JPEG; estos archivos se comprimen por lo que serán de un tamaño relativamente pequeño, al tiempo que conservan los colores suaves sin distorsiones.

Para imágenes con colores sólidos planos, como un ícono o un gráfico de texto, debe guardar como archivos GIF: son mejores para gráficos nítidos o en bloques porque son más pequeños en tamaño de archivo que los archivos JPEG, pero harán que las fotografías se vean granuladas.

Para obtener más información sobre los tipos de archivos y la resolución, consulte Guardar para web.

Cortando

A veces, tendrá que recortar una imagen para enfocar un sujeto en particular o eliminar los detalles no deseados alrededor de los bordes de una fotografía. La mayoría del software de imágenes tendrá herramientas para que hagas esto.

En photoshop

1. Abra el archivo que desea editar seleccionando 'Abrir ...' en la barra de herramientas Archivo en la parte superior de la ventana y seleccionando su imagen en el buscador de archivos.

2. Seleccione el icono 'Recortar' en la paleta de la izquierda, o presione 'C' en su teclado.

3. Haga clic y arrastre desde un punto en la imagen para crear un rectángulo. - Esta es la sección que quieres mantener.

4. No se preocupe si no está bien la primera vez; puede cambiar el tamaño del rectángulo haciendo clic y arrastrando las esquinas antes de que esté listo para recortar.

5. Para recortar la imagen, haga doble clic en el rectángulo que ha hecho.

En gimp

1. Abra el archivo que desea editar seleccionando 'Abrir ...' en la barra de herramientas Archivo en la parte superior de la ventana y seleccionando su imagen en el buscador de archivos.

2. Seleccione el icono del escalpelo ('Recortar o redimensionar una imagen') en la paleta de la izquierda, o presione 'Mayús + C' en su teclado.

3. Haga clic y arrastre desde un punto en la imagen para crear un rectángulo. - Esta es la sección que quieres mantener.

4. No se preocupe si no está bien la primera vez: puede cambiar el tamaño del rectángulo haciendo clic y arrastrando las esquinas antes de que esté listo para recortar, o especificando el ancho y la altura en el cuadro "Recortar y cambiar el tamaño".

5. Para recortar la imagen, haga doble clic en el rectángulo que ha hecho.

Recortar a medida

A veces necesitarás cambiar las proporciones de tu imagen. Para evitar que la imagen se estire cuando cambie el ancho o el alto, deberá recortarla para que tenga un tamaño adecuado en lugar de cambiar el tamaño de una imagen (que ya está en proporción), como se muestra a continuación.

Por ejemplo, tienes una imagen de 250 px de alto y 300 px de ancho. Necesitas que la imagen sea cuadrada para usarla como una miniatura de tu sitio web, por lo que necesitarás perder esos 50px adicionales del ancho.

En photoshop

1. Seleccione la herramienta 'Recortar' de la paleta de herramientas a la izquierda o presione 'C' en su teclado.

2. Antes de usar la herramienta de recorte en la imagen, escriba las proporciones requeridas de su nueva imagen en la barra de opciones en la parte superior de su ventana. p.ej. ancho: 250px, altura: 250px. Asegúrese de escribir 'px' para los píxeles después del número para que Photoshop no piense que está hablando de centímetros.

3. Haga clic y arrastre la herramienta de recorte en la imagen como lo haría normalmente. Notará que el cuadro tiene proporciones establecidas, por lo que no puede cambiar la forma de su rectángulo mientras arrastra, solo el tamaño.

4. Haga doble clic en el rectángulo que ha hecho para recortar la imagen. Siempre que establezca las proporciones correctamente de antemano, su imagen se recortará y se ajustará a las dimensiones que necesita para que pueda guardar desde aquí sin necesidad de cambiar el tamaño.

En gimp

1. Seleccione el icono del bisturí ('Recortar o redimensionar una imagen') en la paleta de la izquierda, o presione 'Mayús + C' en su teclado.

2. Haga clic (pero no arrastre) un punto en la imagen para crear su área de recorte

3. Aparecerá una ventana emergente de 'recortar y cambiar el tamaño' donde puede ingresar las proporciones requeridas en los cuadros 'ancho' y 'altura'. Asegúrese de seleccionar 'px' para que GIMP sepa que desea medir el tamaño en píxeles.

4. Cuando cambie el ancho y la altura, verá que el área de recorte en su imagen también cambia las dimensiones. Para cambiar la posición de esta área dentro de la imagen, cambie los valores de los campos 'Origen X' y 'Origen Y' en la ventana de recorte y cambio de tamaño.

5. Cuando esté satisfecho con el tamaño y la posición, haga clic en 'Recortar' o haga doble clic en el rectángulo que ha hecho para recortar la imagen.

Redimensionamiento

La resolución estándar para imágenes impresas es de 300 puntos por pulgada (ppp) y superior, mientras que para imágenes web es de solo 72 ppp. Cuando cambia el tamaño de sus imágenes para la web, siempre debe configurar la resolución de la imagen a 72 ppp, para que pueda ver qué tan grande se verá en la pantalla antes de ponerla en su sitio web.

Si ya tiene imágenes en su sitio web, puede averiguar qué tan grandes son haciendo clic derecho en la imagen y seleccionando "propiedades". Esto le indicará la altura y el ancho de la imagen para que sepa qué tamaño tendrá para hacerlas en el futuro.

En photoshop

1. Abra el archivo que desea editar seleccionando 'Abrir ...' en la barra de herramientas Archivo en la parte superior de la ventana y seleccionando su imagen en el buscador de archivos.

2. Vaya a Imagen> Tamaño de imagen ... para ver las dimensiones actuales de la imagen.

3. Para cambiar el tamaño de su imagen, cambie el ancho o la altura en píxeles. Si se habilita 'restringir proporciones' (en la parte inferior), la imagen cambiará el tamaño de ancho y alto al mismo tiempo. Es una buena idea mantener esto encendido para que sus imágenes no se estiren. Consulte Recortar a medida si necesita cambiar las proporciones de su imagen sin estirarlas.

4. Asegúrese de que la resolución esté configurada en 72 píxeles / pulgada para que sepa que está viendo su imagen en su tamaño real.

5. Haga clic en Aceptar para cambiar el tamaño de su imagen.

En gimp

6. Abra el archivo que desea editar seleccionando 'Abrir ...' en la barra de herramientas Archivo en la parte superior de la ventana y seleccionando su imagen en el buscador de archivos.

7. Vaya a Imagen> Escala de imagen ... para ver las dimensiones actuales de la imagen.

8. Para cambiar el tamaño de su imagen, cambie el ancho o la altura en píxeles. El símbolo de la cadena vinculada significa que si cambia una dimensión, la otra también cambiará. Es una buena idea mantener esto encendido para que sus imágenes no se estiren. Consulte Recortar a medida si necesita cambiar las proporciones de su imagen sin estirarlas.

9. Asegúrese de que la resolución X e Y esté configurada en 72 píxeles / pulgada para que sepa que está viendo su imagen en su tamaño real.

10. Haga clic en 'Escala' para cambiar el tamaño de su imagen.

Nota: nunca es una buena idea hacer una imagen más grande de lo que era antes. El software de edición de imágenes se ve obligado a "adivinar" los detalles de la imagen y agregar nuevos píxeles, lo que a menudo da como resultado una imagen de bloque o de apariencia borrosa. Esto se conoce como pixellation. Hacer una imagen más pequeña por otro lado, suele estar bien.

Por este motivo, es una buena práctica mantener el archivo grande original guardado en caso de que necesite cambiarlo de tamaño nuevamente.

Ahorro para web

Recuerde: cuanto más grande sea su imagen, más tardará en cargarse. Para las personas con una conexión a Internet más lenta, una imagen grande puede tardar varios minutos en aparecer.

El tamaño de la imagen no es solo la cantidad de píxeles que tiene. También depende de la calidad de la imagen y de la cantidad de colores de los que está hecha.

Cuando guarde imágenes para usarlas en la web, siempre tendrá que sacrificar cierta cantidad de calidad de imagen para que se cargue en el menor tiempo posible.

En photoshop

1. Una vez que haya terminado de editar su imagen, vaya a Archivo> Guardar para web ...

2. Verá una vista previa de cómo se verá su imagen una vez que se guarde.

3. Elija su tipo de archivo en el primer cuadro desplegable en el lado derecho de la pantalla. Para obtener más información sobre cómo elegir un tipo de archivo para su imagen, consulte 'Tipos de archivos'.

4. Elija la calidad de su imagen guardada moviendo el control deslizante de calidad * hacia la izquierda o hacia la derecha. También puede elegir una configuración de calidad en el menú desplegable debajo del tipo de archivo (por ejemplo, bajo, alto, máximo, etc.). Intente elegir la calidad más baja posible sin afectar la imagen que ve en la vista previa. Si se ve borroso o arenoso, has ido demasiado lejos.

5. Haga clic en 'guardar' y elija un nombre de archivo para su imagen. (guárdelo con un nuevo nombre para que pueda guardar una copia de su imagen original)

* Nota: Al guardar un gif, en lugar de un control deslizante de "calidad", aparecerá un cuadro desplegable donde podrá elegir la cantidad de colores de su imagen. Cuantos menos colores tengas, más pequeña será tu imagen. En muchos casos, sus gifs pueden verse mejor con menos colores ya que serán más consistentes.

En gimp

1. Una vez que haya terminado de editar, vaya a Archivo> Guardar como ... (guárdelo con un nombre nuevo para poder guardar una copia de su imagen original)

2. Haga clic en "Seleccionar tipo de archivo" y seleccione el que necesite. Para obtener más información sobre cómo elegir un tipo de archivo para su imagen, consulte 'Tipos de archivos'.

3. Haga clic en 'guardar'

4. Elija la calidad de su imagen guardada moviendo el control deslizante de calidad * hacia la izquierda o hacia la derecha. Intente elegir la calidad más baja posible sin afectar la imagen que ve en la vista previa. Si se ve borroso o arenoso, has ido demasiado lejos. (Para ver una vista previa de su archivo guardado, simplemente haga clic en 'Mostrar vista previa en la ventana de imagen'.

5. Haga clic en 'Aceptar' para guardar su imagen.

* Nota: Al guardar un gif, se le preguntará si desea convertir a color indexado o en escala de grises. Esto dependerá de si tu imagen tiene color o no. Haga clic en 'exportar' y continúe. GIMP no le da una opción para especificar los colores o la calidad de su gif, así que salte el paso 5 y guarde como siempre.

Últimas Imágenes

Etiquetas

Entradas del blog

Compartir

Imágenes HD más buscadas

Cargando...