Este documento describe el programa Pixel Perfect, una extensión para Firefox/Firebug que permite a diseñadores y desarrolladores superponer composiciones web sobre páginas HTML en desarrollo para lograr un diseño pixel perfecto. Explica que primero se crea un boceto en un programa de diseño y luego se importa y superpone en la página con opacidad reducida para seguir las guías del diseño. También enumera los componentes como añadir superposiciones, cambiar la opacidad y ajustar la posición. Muestra ejemplos del pro

1. PIXEL PERFECT
Melissa Aguilar. Tema 56

2. PROGRAMAS DE DISEÑO
 Para realizar diseños y estilos creativos para paginas Web, se
utilizan diferentes programas que permiten realizar dichos
diseños
InDesign
• Adobe
InDesign es
una aplicación
de maquetación
Dreamweaver
•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ón
Photoshop
• 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

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

4. QUE ES PIXELPERFECT?
 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

5. 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.

6. 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.

7. 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.

8. 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.

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

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

11. EJEMPLOCONT…
 Al final, podemos
observar el resultado
de superponer
imágenes a una
pagina Web
mediante Pixel
Perfect

12. OTROS EJEMPLOS

13. OTROS EJEMPLOS

14. Gracias por su Atención