What is "pixel perfect" ?


#1

Hello,

Could someone explain to me the concept of “pixel perfect”? Does it visually look different than regular designs? Is it difficult to implement?

I am not a designer, I just code :slight_smile: . I noticed that some of the flash designs at our company have rounded corners that look “odd”. Like the rounded corners are not 100% flush with the rest of the rectangle. The curvature is also not 100% smooth. I was wondering if this is a symptom of “pixel not perfect” - if that term exists.

Thanks
skimo


#2

I’m not sure what pixel perfect means, but I hink it has something to do that flash will look the same in all browsers, while HTML/CSS won’t. I’could be wrong of course :D. But yes, flash doesn’t look perfect on rounded rectangles, diagonals and pretty much anything that isn’t horizontal or vertical :smiley:


#3

I thought it is a level of precisity.


#4

pixel perfect is just an expression really…my understanding is that it means everything is perfectly and very precisely positioned in whatever environment you are working within…

Any line on a screen that is not vertical / horizontal and uses aliasing as an attempt to smoothen the line may appear slightly off position… you can try and fix this using Stroke Hinting in Flash…


#5

I think it’s just a stupid claim like the web 2.0 thing. Though, pixel perfect should mean that the final result is without jagged edges, crisp clear quality, with a correct aspect ratio. To achive this you should use proper antialias, position and size everything in an integer pixel value. That’s all. :slight_smile:


#6

it’s a firebug addon :stuck_out_tongue:


#7

it’s a myth :smiley:

No I don’t know what it is, am I noob :frowning:


#8

its when whatever you design in photoshop or fireworks looks exactly the same in all browsers.

With Flash this is easy,with xhtml/css its much harder.


#9

yeah, flash has issues with anything not horizontal or vertical :smiley: For rounded corners, make sure the shape and parent movieclip are both on integer values and select stroke hinting for the shape outline :wink:


#10

As mentioned many times before in this thread, I think it means that your layout is the same in any browser and on any system.


#11
it's a firebug addon :P

lol :smiley:

I almost went searching for it :slight_smile:


#12
I almost went searching for it :)
it's true, i use it.

#13

I actually was thinking about pixel perfect a while back and there are in fact two uses for the phrase, outside of the firebug addon :P.

  1. Having the end product appear visually the same regardless of the browser its being viewed in.

  2. Exact positioning of an element within a file. For example, placing a button at the 1.0 x position instead of 1.2, which places it between pixels causing for an anti-aliased or jagged edge appearance.

And yeah, its an addon as well.


#14

wow. Thanks for feedback. Thanks for the stroke hinting tips…

By the definitions mentioned, can we say envato sites are pixel perfect? :slight_smile:


#15
By the definitions mentioned, can we say envato sites are pixel perfect? :)

hell no! :-|, View this site in IE6


#16

From my experience, it’s a term used by a photoshop designer who designs a website interface and hands it over to the developer who put it together for the online working version and the end result is ‘pixel perfect’ to the original photoshop design… so no 2 pixel lines that should have been 1 and no weird spacing or pixels that are off a tad and looks the same on all browsers :wink:


#17
I almost went searching for it :)
it's true, i use it.

Hey I’ve found it :slight_smile:


#18
I almost went searching for it :)
it's true, i use it.

Hey I’ve found it :slight_smile:

What does it do?


#19
What does it do?
it helps obtaining a pixel perfect layout when building a site.
basicly it lets you add an overlay image over html so you can check if every element
is where it supposed to be.

#20
By the definitions mentioned, can we say envato sites are pixel perfect? :)

hell no! :-|, View this site in IE6

sad but true lol :smiley: