PIXEL PERFECTMelissa Aguilar. Tema 56

PROGRAMAS DE DISEÑO

Para realizar diseños y estilos creativos para paginas Web, se utilizan diferentes programas que permiten realizar dichos diseños

InD

esi

g n• Adobe InDesign es una aplicación de maquetación

Dre

am

wea

ver •Adobe

Dreamweaver es una aplicación destinada a la construcción, diseño y edición de sitios y aplicaciones Web basados en estándares

Flash

• Adobe Flash Professional es una aplicación de creación y manipulación de graficos vectoriales con posibilidades de manejo de código mediante el lenguaje Action Script en forma de estudio de animaciónP

hoto

sh op•Adobe Photoshop es

una aplicación informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits

Siempre se debe tomar en cuenta que una pagina Web no solo debe ser atractiva, sino funcional

QUE ES PIXEL PERFECT?

Pixel Perfect es una extensión para Firefox / Firebug

Permite a los desarrolladores y diseñadores web, superponer fácilmente una composición web

Se realiza a través de la parte superior del HTML desarrollado

De esta manera, el diseño de la pagina Web impecable

COMO FUNCIONA?

Primero que se realiza es un boceto aproximado en algún programa de diseño gráfico y después plasmarlo en el navegador de la manera más aproximada posible.

COMO FUNCIONA? CONT…

Con Pixel Perfect se tiene la posibilidad de importar el boceto realizado,(en formato PNG, JPG, GIF, etc.) y superponerla sobre la página web real que se esta creando con una opacidad reducida.

COMO FUNCIONA? CONT…

El resultado es parecido a calcar, ya que sólo se tendrá que seguir las guías del boceto para dejar la pagina web tal y como se concibió en un principio.

COMPONENTES

Añadir Superposición: Permite que se agregue uno o mas formatos gráficos al diseño de pagina Web.

Opacidad: Se puede cambiar la opacidad para que la composición sea más transparente o menos transparente.

Posición: Los controles de posición están destinados a ser utilizados para un ajuste fino.

EJEMPLO

Pagina Web a aplicar pixel perfect. En la parte de abajo, podemos observar los componentes del plugin

EJEMPLO CONT…

Se añade una imagen mediante la opción de añadir superposición . Dependiendo de lo que se desea, se modifica la opacidad.

EJEMPLO CONT…

Al final, podemos observar el resultado de superponer imágenes a una pagina Web mediante Pixel Perfect

OTROS EJEMPLOS

OTROS EJEMPLOS

Gracias por su Atención