#pixel-perfect

ocean kissed - free to use

64. What was the last movie you saw? Opinion?

The last movie I saw was Kubo and the Two Strings. And wow it was one of the best animated movies I’ve seen. The stop motion alone was dazzling but the story was just so emotionally impacting that it brought everything together so well. Highly recommended

85. What motivates you to succeed?

Um…I’m not entirely sure. I guess it’s just a will to succeed? I take pride in what I do and I never want to do a shitty job which causes me to put a lot of effort into most things. So I guess my determination to succeed motivates me?

91. If you could have dinner with any one person, living or dead, who would they be and why?

I’d probably want to talk with Mary Shelley. While Frankenstein may not be my favorite book of all time, she truly defined the writing craft by creating the science fiction genre and showing that women were capable of works beyond romance. And I think it would be really interesting to talk about writing style with such a defining author.

I keep tabs on several different job boards, so that I can recommend them to my grads from The Iron Yard. I saw this again today -- "Proven ability to design and implement pixel-perfect designs so that they’re pixel perfect" -- and I almost lost it.

For all you aspiring front-end developers out there, for all of my students, for everyone I've taught the last four years, for all my grads hunting for jobs on the market, and especially for all you pixel-pushing designer-only-types, this is for you:

Pixel-Perfect Doesn't Matter

Design is not about creating something for your viewing pleasure. It’s about the challenge of solving a problem, something that doesn’t quite work or just feels ‘wrong’.

It’s about loving that challenge. The bigger, the better. It’s a quite common perception that a designer’s work is all about how it looks, if the colour scheme matches your preferences or the typeface is your favourite.

Seeing as how I am a Senior at the University of Akron, I'm currently in the market for a web design job post-graduation. There's a lot of opportunities out there, but there's one line I keep seeing on job requirements.

"Must be able to create Pixel Perfect websites based on mockups." or something along those lines.

Pixel Perfect is an illusion, a falsehood, a contradiction, and an impossibility.

The web is no longer pixels, there are no standard sizes that become "the page." Everything is fluid. The designer cannot control what size device their website is viewed at, nor can they choose to ignore a large portion of the browsing population by only catering to a certain screen size.

The idea behind a "pixel perfect website" is pretty understandable. If print design has standard sizes, so must web right? Surely 960px wide is a standard "website" width. Why should I bother scaling it up for higher resolution screens, or down for people who have multiple windows open? Why even bother with tablets or mobile devices?

It's a very understandable line of thinking. The problem is that it's a line of thought that is a few years behind its prime. Today, there are no standard sizes for the web. There are some theoretical breakpoints, but even those aren't ideal. Everything has to be viewed on all devices, because if a user comes to your website on their phone and runs into a frustrating experience, they won't be back.

The web is fluid now. There is no way to successfully constrain it to certain sizes. Pixels are out, percentages are in.

Knowing that circle shapes can be a tricky business to get pixel-perfect in Photoshop — due to there being no 'Snap to Pixels' checkbox, like there is in the rectangle and rounded rectangle tools — I was a bit concerned about how to get a nice, even repeating pattern for my flower.

ATTEMPT #1: Draw a circle in Photoshop (using the rounded rectangle tool with a large corner radius, for that lovely Snap to Pixels), duplicate it a few times, and arrange the circles by eye to make the petals.

However, I was working at a small size (like 30px wide), and it was hell to get everything aligned. I gave up.

ATTEMPT #2: Moved to Illustrator. I figured Illustrator probably has a feature for this, and as it turns out, it has several.

To ensure pixel-perfection when I move back to Photoshop, I did the following:

Make a pixel grid, following this guide to turn Illustrator into pixels.

Go through the Preferences changing anything that looks pixel-relevant, such as Selection & Anchor Display > Snap to Point: 1px and General > Keyboard Increment: 1px. Also, in the View menu, check Snap to Pixel.

Double-check everything's set up right by drawing a circle and zooming in to see if it lines up to the pixel grid.

Pay attention to how things line up: is the center of the circle a pixel, or a pixel boundary? (This will affect things like: if there's an uneven number of petals, and you have two that meet at the center at the bottom, will it come to a single point/pixel? Or will the middle be between two pixels, making it blurrier or give it a gap?)

Pasted it into Photoshop using this trick: pixel perfect vector pasting.

Did any further Photoshop edits using this guide: pixel perfect vector nudging.