Archivo de la etiqueta: Software.

Exportar como HTML

Los 3 editores gráficos Illustrator, Photoshop y Gimp de los que ya se ha hablado en este blog, cuentan con herramientas para subdividir una imagen basándose en las guías de la imagen; el primer paso para exportar imágenes, texto y crear un documento HTML de la manera más práctica.

  • Gimp

En Gimp, la herramienta Gillotina corta la imagen a lo largo de cada guía, de manera similar a cortar documentos reales con una guillotina para papel, creando imágenes nuevas con sus piezas.

  • Photoshop

En una imagen con guías, seleccione la herramienta Slice o en español, Sector, haz clic en Slices Guides o Sectores guías en la barra de opcion.

  • Illustrator

En una imagen con guías, seleccione del menú Objeto > Slice o en español, Sector > Crear a partir de Guías.

Para cambiar el tipo de Sector a uno de imagen, texto o espacio sin imagen, haz clic sobre la placa o icono sobre ella, al hacerlo aparecerán opciones que te permitirán definir el tipo adecuado, agregar etiquetas, cambiar su nombre, agregar el texto y enlaces que se van a exportar.

Toma en cuenta que al seguir este procedimiento todas los Sectores o Slices creados anteriormente, son borrados y recuerda iniciar cada enlace con «http://» para evitar errores de vinculación..

Exportar como HTML

Exportar como HTML creará automáticamente un documento HTML y una carpeta con las imágenes a partir de las imágenes nuevas creadas a partir de los Sectores de la imagen abierta.

Para esto es importante considerar los formatos de imagen más adecuados para su función:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

  • Gimp

El filtro: http://docs.gimp.org/es/python-fu-slice.html exporta como varios formatos, entre ellos html.

  • Illustrator o Photoshop

En Illustrator o Photoshop puedes Guardar para Web en el menú Archivo > Guardar para Web.

Con MEGAWEB EXPRÉS aprenderás a usar estos archivos para desarrollar un Sitio Web dinámico compatible con dispositivos móviles  y más diseñando un portal Web.

Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

 

CSS Sprites e interactividad

CSS Sprites

Es una forma de reducir el tiempo de carga de una página Web ahorrando también el uso de ancho de banda al llamar a una sola imagen que contiene a todas o varias imágenes del Sitio Web, mostrando con CSS únicamente las partes necesarias.

Interactividad

Al colocar el mouse o hacer clic sobre cualquier enlace, ya sea imagen, botón o texto, algo llamado conocido en inglés como hover y al hacer clic, es posible, cambiar sus características:

  • En el caso del texto, cambiar su color, decoración, peso, tamaño, etc.
  • En el caso de imágenes, cambiar una por otra, cambiar su opacidad, tamaño, etc.

Aprende esto y más diseñando un portal Web. Regístrate hoy en el VideoTaller: MEGAWEB EXPRÉS.

Crear imágenes con animación

Crear imágenes con animación como gifs animados para banners publicitarios, MEMES, botones, divisores y para otros usos es muy sencillo.

Es recomendable usar la menor cantidad de colores posibles para optimizar su tamaño y evite alternar colores muy contrastantes y rápidos que puedan causar mareo, convulsiones y cualquier molestia al usuario.

En Gimp:

Usar GIMP para animar, requiere pensar en cada Capa como un Cuadro que conforma la animación.

Duración de cada cuadro:

Si fuera distinta para algún cuadro, tendríamos que indicarla junto al nombre de la capa en milisegundos y entre paréntesis, por ejemplo si queremos que un cuadro dure un segundo pondríamos al lado del nombre de la capa (1000ms).

Animaciones con transparencias:

Combinar y reemplazar.

Si nuestra imagen está compuesta por capas con transparencias tenemos dos métodos para manejar nuestros cuadros:

  1. Combinar: Yuxtapone las capas mostrando que hay debajo de aquellas con transparencia.
  2. Reemplazar: Reemplaza por completo una capa o cuadro con otro.

Se señala colocando combine para combinar o replace para reemplazar en la capa entre paréntesis al lado del tiempo:

Nombre de la capa(xxxxms)(combine) ó (replace)

Degradados.

Para evitar perder la suavidad en degradados de color sólido a transparencia es recomendable simularla con capas en las que el degradado sea de color sólido al color de fondo.

Previsualizar la animación:

Mediante el Previsualizador podemos en cualquier momento ver como va quedando nuestra animación, abriéndolo en: Filtros > Animación > Reproducir Animación.

Al guardar una animación a color es necesario indexarla, ésto puede hacerse automáticamente al exportar o manualmente en: Imagen > Modo > Indexado (Alt+I).

Exportar gif:

Por último hay que recordar guardar la animación final en: Archivo > Guardar, señalando la extensión .gif y marcando la casilla de «Guardar como animación» y la casilla «Convertir a tonos de gris» si es en blanco y negro o «Convertir a indexada…» si usa todo tipo de colores.

Al exportar se presentan las opciones de:

  • Entrelazar: Carga la imagen de forma progresiva, mostrando distintos niveles de definición o calidad visual con cada pasada, hasta que se completa.
  • Comentario GIF: Espacio para comentar la imagen.
  • Repetir eternamente: reinicia la animación cuando finaliza.
  • Pausa entre cuadro cuando no se especifique: Cuando no se especifica en el nombre de capa ninguna duración todas tomarán la que se especifique aquí.
  • Colocación de cuadros cuando no se especifique: Igual que la anterior pero para elegir entre «Combinar o Reemplazar».

Optimizar y exportar fotografías y otras imágenes en mapa de bits

Importar las imágenes

Al importar imágenes en mapa de bits a Photoshop o Gimp para incluirlas en un Sitio o diseño Web, es recomendable empezar por:

  • Escanear la fotografía revelada,
  • Escanear los negativos o
  • Importar los archivos de las fotografías desde la cámara digital.

Optimizar imágenes en mapa de bits

Es importante contar con fotografías que cuya corrección de color, contaste y retoque fotográfico sean innecesarios o ya hayan sido aplicados, para como diseñadores Web, enfocarnos en optimización del modelo de color, resolución, ajuste del tamaño y tipo de archivo para Web.

Encuadre

  • Recorte en Gimp:

Para elegir la herramienta de Recorte. Has clic en el botón  en la caja de herramientas o en el menú: Herramientas > Herramientas de transformación > Recortar en la ventana de la imagen.

Cuando cambie el cursor, has clic y arrastra formando un rectángulo que cubra únicamente las partes de la imagen que desees conservar, si tu primera selección no fue de tu agrado, puedes arrastrar las esquinas o bordes del rectángulo para cambiar las dimensiones del área seleccionada y hacer doble clic sobre la imagen para aplicar el recorte.

Sus dimensiones y proporción se muestran en la barra de estado.

Exportar para Web.

  • En Gimp:

Archivo > Exportar como… > Seleccione el tipo de archivo.

  • En Photoshop:

Archivo > Exportar para  Web, seleccione el tipo de archivo desde el menú en la parte superior de la nueva ventana.

Las extensiones recomendadas para publicar las fotografías en Internet son:

  • JPG: Es la más recomendable para fotografías por su gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores, por ejemplo sólo grises o para animaciones.
  • PNG: fotografías editadas para contener transparencia, de mayor calidad que los .gif.

Extensiones recomendadas para compartir originales:

  • PSD: Imágenes a editar en Adobe Photoshop.
  • EPS
  • XCF: Imágenes a editar en Gimp.

Es recomendable que los archivos de imágenes se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Fuente: http://docs.gimp.org/es/

Espacio de color

Un espacio de color o modelo de color es un modelo para la representación matemática del color que describe la forma en la que los colores pueden representarse, usualmente compuesto de 3 o 4 valores, por ejemplo: CMYK y RGB.

CMYKLos modelos de color sin una función de mapeo asociada a un espacio de color absoluto, donde las interpretaciones de los colores en el espacio están definidos colorimétricamente sin referencias a factores externos, es prácticamente un sistema de color arbitrario sin conexión a un sistema de interpretación de color.

Crear y exportar imágenes vectoriales

Al crear imágenes vectoriales en Inkscape o Illustrator para iniciar el diseño Web, es recomendable empezar por escanear o fotografiar el boceto de la interfaz, para digitalizarla:

  1. Trazándolo con la herramienta: Pluma.
  2. Usando las formas predeterminadas como: polígonos, círculos y líneas para recrear todos sus elementos.

Exportar para Web.

Una vez digitalizada la imagen de la página de inicio y otras páginas con estilos propios, ésta debe ser dividida en secciones que contrendrán solo fondos, texto o imágenes, ésto puede ser visto a más profundidad en el video de ésta sección del VideoTaller.

Muchos programas para diseño presentan el menú: Archivo > Exportar para Web o similares, para hacer más simple la exportación a html, jpg, gif y png a partir de la imagen de interfaz.

Las extensiones recomendadas para publicar las imágenes en Internet son:

  • JPG: Imágenes complejas, que contengan gran cantidad de colores.
  • GIF: Imágenes que contengan pocos colores o con animación.
  • PNG: Imágenes que contengan transparencias, de mejor calidad que los .gif.

Es buena práctica mantener los nombres de archivos sin espacios, ni caracteres especiales y en minúsculas.

Compartir los archivos originales editables.

Las extensiones recomendadas para compartir los archivos originales son:

  • SVG.
  • EPS.
  • AI.

Es recomendable que estos archivos se transfieran comprimidos, especialmente en Zip, para evitar la corrupción de archivos.

Navegador con Herramientas de desarrollador Web

Un navegador con la extensión Web developer o Desarrollador Web, te permitirá revisar y probar el Estilo (CSS) y HTML de una página Web.

Revisión y pruebas de estilo (CSS) y HTML

Mozilla Firefox

Firefox es un navegador Web libre y de código abierto para Windows, Mac, Linux y ya cuenta con la Herramienta Desarrollador Web integrada para probar cambios en el CSS y HTML en la página que visitas.

* Firefox viene preinstalado en muchas de las distros. de Linux.

Servidor Web Local

Para poder desarrollar un Sitio Web dinámico es necesario hacerlo en un Servidor Web HTTP, en este caso Apache, contar con una base de datos MySQL, el lenguaje PHP y opcionalmente contar con PHPMyAdmin para el manejo de las bases de datos.

El Servidor Web Local te permitirá desarrollar y probar tu Sitio Web evitando subirlo a Internet hasta que esté completamente listo para su lanzamiento.

Aunque pueden ser instalados Individualmente es más sencillo hacerlo desde un solo paquete como el siguiente.

El Paquete con Apache, MySQL y PHP:

Editores gráficos

El software para diseño puede ser clasificado en 2 tipos: aquel que edita mapa de bits, como lo son los que permiten la corrección de color, fotomontajes o cualquier tipo de edición fotográfica y aquel en el que puedes crear y editar ilustraciones en vectores.

Las aplicaciones para edición fotográfica (mapa de bits) y de vectores (escalables sin perder calidad) te permitirán entre otras cosas crear el diseño de interfaz, la optimización y exportación de imágenes para Web.

Editor de imágenes en mapa de bits:

Gimp

El editor de imágenes gratuito más popular del mundo es Gimp, puedes descargarlo en:

Editor de imágenes en Vectores:

Inkscape

Inkscape es un editor de gráficos vectoriales profesional para Windows, Mac y Linux, el equivalente libre y de código abierto de Adobe Illustrator.

* Si usas Debian/Ubuntu: puedes descargar ambos directamente del Centro de Software.

 

¿Tienes otras sugerencias? Comenta debajo.