In the previous posts I wrote about a counter unit system against Apple’s 44-pixel rhythm. And today I would like to demonstrate on how to effectively use it.
Ofcourse all starts with what we Turkish people call ‘amele işi’ which is to say the idiots way of doing the hard work. But I like to start that way just to permanently have it at the side.
By now you know of the 4 pixel unit system I have proposed. If not, then I urge you to read the previous two posts I have uploaded.
Basically I proposed to divide the grid in 4 pixel units, that harmoniously works with apple native elements and produces better results in every aspect of the design. And now to implement it the easy way and the hard way.
First is the hard way, because I spent many hours trying to figure the 4 pixel unit system and alas only to find out very few people also did. And in the process spent countless hours with the photoshop grid and guides and therefore it may be good practice for you as well.
Open your Photoshop and make your canvas size 640 x 960 pixels. It is always better to work double canvas for retina display rather than working in original 320 x 480 and then multiplying by 2. Why? Well because if you’re working every shape with vector that may be fine but if there are any photoshop styles involved the produced resulted when multiplied will not be to your liking and they will %99 loose their crisp and shiny look. On the other hand the only bad side of working x2 is that you have to import finished page to your iPhone and look to find that the font is a bit out of scale or the button and you know exactly how many pixels to reduce it after a while.
So this is your canvas, say hi! And let’s get to work. Go to View on your above navigation and Click on View Guides. Cmd-R produces same result. Then make sure your zero point is exactly at the corner, then magnify by 600 or more and start putting a ruler guide in every 4 pixels! Hahahaha told you it was amele işi 🙂
Here is the result you should achieve.
In 100%
In 200%
In %3200
Notice how everything looks like the perfect grid? It is. And we will further demonstrate it. But before that I will also give you the easy way of working this grid.
HOW TO EASE THIS GRID WHEN DESIGNING
Okay so you have your perfect grid. But there is still a problem. Working with it. After a while you’ll realize it is almost painful to work this way, even if you open your ‘snap to grid’ option because your app will the pixel perfect you count everything and to count your 4 pixel units you find yourself working in 3200% zoom.
Double clicking your rulers will open your preferences, where you can change the color of your grids but let me tell you before hand it is not gonna work out.
Here is my solution.
Keep your grid but Cmd-H it and make it invisible while working, only to view them when necessary. all the while don’t forget the ‘snap to guide’ option turned on at all times.
Then open Illustrator! A designer’s best friend!
Always say hi to your canvas.
Then click on you line segment tool twice. Line Segment Tool Options will open.
To length punch in your canvas size 640 pixels, and click okay. This will produce one perfect line. But it will be a line and you don’t want a line so expand it into and object, and it will quickly become 1 pixel line object.
Then go ahead and click on rectangle tool twice to again open the options window and punch 4 pixels to 4 pixels. Place the square to the head of your canvas and then place your line directly above it.
Thats all you have to do as the rest is just Cmd-D as it will repeat your last action. Voila hold Cmd-D for a few seconds and all of your canvas is filled with your guide.
Now group that and copy-rotate 90 degrees. ho ho you got it.
Now range the color of your guides to a hue that your eyes won’t tire and export the document to photoshop and always keep it a top layer. Your objects will snap to your grid and when you want to have a close look the colors won’t tire your eyes!