Diseño web

TEXTO EN FONDO RELUCIENTE EN PHOTOSHOP

2009-08-11T09:11:00.000-07:00

Para comenzar utilizaremos una imagen de 150x250 pixeles y de fondo blanco. Después creamos un texto de color negro, procedemos a duplicarlo y ocultamos una de las capas de texto. La primera como en la imagen.

Paso siguiente en la ventana capas procedemos a combinar visibles. Recordar que si no hacemos esto, las siguientes instrucciones no serán realizables.

Despues buscamos filtro/desenfocar/desenfoque gaussiano y colocamos un valor alrededor de 1.5, evitemos desenfocar más que en el ejemplo.

Ahora vamos a imagen/ajustes/invertir. Después vamos a filtro/estilizar/solarizar. Paso seguido vamos a imagen/ajustar/niveles automáticos y nos debe quedar esto.

Después de hacer todo esto buscamos filtro/estilizar/viento y lo aplicaremos desde la derecha, una vez hecho esto repetimos la aplicación del filtro, pero en este caso desde la izquierda. Y volvemos a imagen/rotar lienzo/90°ACD. Paso seguido volvemos a aplicar filtro/estilizar/viento desde la derecha y desde la izquierda.

Luego giramos la imagen a su estado original imagen/rotar lienzo/90°AC. Paso después vamos a imagen/ajustar/tono-saturación, y le damos a colorear y ponemos el color que mejor nos parezca. Recordar que también podemos hacer este pasó en imagen/ajustar/equilibrio del color. Por ejemplo en este caso le dimos color azul.

Por último iremos a la capa de texto que ocultamos al principio y le damos para que sea visible. Y el resultado final será:

APERTURA DEL ARCHIVO DE ORIGEN

2009-07-20T12:33:00.000-07:00

Una vez visto el archivo final.htm en el navegador, ya está todo listo para empezar.

1.- En Fireworks, debe elegir Archivo > Abrir.
2.- Acceder a la carpeta Tutorial2 en el disco duro. Desplazarse a Tutorial2/Start y abir
global.png.
Debe recordar que conforme vaya avanzando con el tutorial, deberá guardar regularmente el trabajo con Archivo >Guardar.

IMPORTACIÓN DE UN ELEMENTO GRÁFICO

Una vez que haya abierto el diseño inacabado de la página Web de Global, tiene que importar un elemento gráfico. Como ya ha estudiado el Tutorial básico de diseño gráfico deberá utilizar el archivo JPEG creado. Ahora si no lo ha estudiado todavía, deberá utilizará una imagen provista.

1.-Elegir Archivo > Importar y siga uno de estos procedimientos:
 Si ha estudiado el Tutorial básico de diseño gráfico, desplazarse a la carpeta Tutorial1/Export.
 En caso contrario, desplazarse a la carpeta Tutorial2/Assets.

2.- Seleccionar vintage.jpg y hacer clic en Abrir.

3.- Hacer clic en cualquier punto del área blanca y vacía del lienzo. La imagen aparece seleccionada.

4.- Arrastrar la imagen hasta colocarla como se muestra en el siguiente gráfico.

TUTORIAL BÁSICO DE DISEÑO WEB (FIREWORKS MX 2004) II

2009-07-17T08:34:00.000-07:00

COPIA DE LA CARPETA

Antes de comenzar con nuestro II tutorial debemos copiar la carpeta Tutorial2 que hemos descargado para poder guardar los resultados del trabajo y así poder conservar los archivos originales por si otros usuarios utilizan el tutorial. Cabe mencionar que si estamos utilizando Windows, debemos asegurarnos de descomprimir los archivos que hemos descargado para este tutorial antes de continuar. En Macintosh, StuffIt Expander descomprime los archivos de manera automática

1.- Elegir la carpeta Tutorial2 que hemos descargado del sitio Web.

2.-Seguir uno de estos procedimientos:

 (Para Windows) Realizar una copia de la carpeta pulsando las teclas Control +C , luego
Control +V para poder pegar la copia en el escritorio.
 (Para Macintosh) Pulsar Comando +D para duplicar la carpeta.

3.- Debemos llamar a la nueva carpeta Tutorial2_Copy.

Visualización de la página Web finalizada

Podremos visualizar el archivo del tutorial finalizado para comprobar el aspecto final del proyecto
Después de exportarlo como archivo HTML.

1. Iniciar el navegador Web.

2. En nuestro disco duro, ubiquemos la carpeta Tutorial2 que hemos descargado del sitio Web y posicionémonos en la carpeta Tutorial2/Complete.
Cabe resaltar que de forma predeterminada en algunas versiones de Microsoft Windows ocultan la extensión de los tipos de archivos conocidos. Si no hemos modificado este parámetro previamente, los archivos de la carpeta Complete aparecerán sin extensión. Cuando trabajamos con gráficos y páginas Web es mejor ver las extensiones de archivo. Para mayor información sobre cómo activar de nuevo las extensiones de los archivos, revisar la Ayuda de Windows.

3. Seleccionar el archivo final.htm y después arrastrarlo a la ventana abierta del navegador.
En este tutorial terminaremos la versión parcial de esta página para Global (empresa de alquiler de coches).

4. Desplace el cursor por la imagen de Vintage grande. Podemos apreciar que cuando el cursor se desplaza por la imagen de Vintage, otra imagen de la página cambia. A esto se le denomina rollover desunido.

5. Desplacemos el cursor por la barra de navegación que recorre la parte superior de la página Web. Como vemos, los botones cambian a medida que el cursor pasa sobre ellos. Haga clic en el botón Rates para comprobar el vínculo. Este vínculo conduce a la página de Fireworks en www.macromedia.com/es/. Sin embargo, en el tutorial tendremos que introducir nuestra propia URL para éste y otros elementos.

6. Utilizar el botón Atrás del navegador para poder volver a la página final.htm.

7. Desplazar cursor por la imagen de Worldwide Airports. Aparecerá un menú emergente.
Desplacemos el cursor por todas las opciones del menú, incluida la primera, que también contiene un submenú.

8. Hacer clic en United States para poder comprobar el vínculo y regresar a la página final.htm.

9. Después de ver esta página Web, puede cerrarla o dejarla abierta para consultarla mientras estudiamos el tutorial.

Cabe resaltar que la carpeta Complete además incluye el documento de Fireworks utilizado para generar el archivo HTML. Para poder obsérvalo, haga doble clic sobre final.png.

TUTORIAL BÁSICO DE DISEÑO WEB (FIREWORKS MX 2004) I

2009-07-01T08:13:00.000-07:00

En este primer tutorial describiremos las tareas básicas de diseño de gráficos Web e interactividad con Macromedia Fireworks MX 2004. Este tutorial mostrara el flujo de trabajo habitual en Fireworks para diseñar una página web. Aprenderemos lo siguiente:
 Copiar la carpeta Tutorial2
 Visualizar la página Web finalizada
 Abrir el archivo de origen
 Importar de un elemento gráfico
 División del documento
 Creación de un rollover (arrastrar y colocar)
 Creación y edición de botones para generar una barra de navegación
 Creación y edición de un menú emergente
 Optimización del documento
 Exportación de HTML
 Comprobar el archivo finalizado

Conocimientos necesarios
Para comprender este tutorial tenemos que estar familiarizado con el diseño gráfico en Fireworks u otras aplicaciones de imágenes de mapa de bits o vectoriales. Concretamente debemos saber realizar lo siguiente en Fireworks:
 Almacenar documentos
 Seleccionar objetos
 Editar las propiedades de los objetos
 Aperturar y utilizar paneles
 Utilizar capas y objetos
 Crear y editar texto
 Exportar imágenes

Aprendamos A Diseñar

2009-06-15T07:47:00.000-07:00

Animaciondivertida les da la bienvenida, poco a poco les ire dejando consejos sobre diseño web, animacion flash, herramientas y algunos datos interesantes que podran ser de gran ayuda para todos aquellos que nos apasiona el mundo 3D.

El diseño web es apasionante, pero no a todos les parece de la misma manera, hay muchos a los que hablar de pequeñas cosas como un editor grafico les hace pensar que nunca entenderan este complejo mundo.

Es por esoq ue iniciaremos con un tutorial de FIREWORKS MX 2004
Esta es una aplicación destinada para el manejo de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente para la creación rápida de prototipos de sitios Web e interfaces de usuario, asi tambien para la creación y Optimización de Imágenes para web.
Fireworks está enfocado en la creación y edición de gráficos para internet. Está diseñado para integrarse con otros productos de Adobe,
como Dreamweaver y Flash.
Está disponible de forma individual o integrado en Adobe CS3.

Los dejo con el tutorial, al finalizar estaremos en posibilidad de hacer esos lindos diseños que tanto nos llaman la atencion de las webs que visitamos.