You can postion and scale objects precisely using the transform toolbar, which runs along the top of the screen if it is set to visible.

To show it, you must be in transform mode (Command-T [Mac] or Control-T [PC] or Edit > Free Transform), and the options must visible (Window > Options).

Positioning an object exactly

In the first of the following screenshot,

• I’ve shifted the Ruler Origin to 20,20, then
• I’ve gone into transform mode and set the anchor point to top left (by clicking the top left box in the grid of nine boxes at the top left of the screenshot).
• You can then type the offset from the Ruler Origin into the X and Y boxes.  If you knew that you needed to shift the object 23 pixels down and 17 across, you could enter ‘relative’ mode by clicking the triangle between X and Y.

Scaling with precision

Here, I’m transforming the circle using the Width and Height controls to resize my circle.  Note that the units displayed can be changed by typing them in.  You can even have a mix on units!  Here I’m using percentage and Pixels, which is just a gimmick .  Clicking the chain icon here is useful to ensure that aspect ratio is locked, and your object doesn’t get squashed.

You can also finetune the rotation and skew of the object using the transform toolbar, but I’m sure you’ve fugured that out already!  That’s it for today; let me know if you’ve got something to add by leaving a comment!

Photoshop sometimes appears to blur objects, lines or images.  This could be due to rounding, or losing data after transforming a layer.  Read on for best practice in resizing images and creating vector shapes, and come to grips with the way Photoshop displays your document.

Rounding Errors

Rounding is a result of displaying a objects of various sizes on a screen which has a finite number of pixels.  Read about moiré patterns to come to grips with this!

It occurs when, for instance, you have two objects snapped next to eachother, and you change your zoom level and ghost lines appear between the objects.  This is normal, and nothing to worry about: just ensure that you are looking at the document at 100% zoom (Command-Alt-Zero on Mac, Control-Alt-Zero on PC).  I find that every second zoom level looks right, and I get jaggies or ghosts in between.  In the images below, identical boxes are placed next to eachother, and shown at different zoom levels.

This can be disconcerting if you are editing a vector (like text), and it looks jaggy when you zoom right in.  This can be useful to allow you to compare all of the objects in your document in the same scale, to help align them and so forth.  If you export your document with vectors intact, the text will still be rendered dynamically in all its glory in Acrobat or Preview.

Losing detail by resizing

Blurring is not good if you’ve resized an image within your document inappropriately.

Photoshop culls data when you scale the image down, and then pixelates the image when you blow it up again.  To avoid this, right click the image’s name in the Layers palette, and ‘Convert to Smart Object’ before resizing.  This will embed the image in the document, and use it as a reference each time you resize the layer, avoiding the problem I’ve described.

Here is an example: the circle on the left has been copied and moved to the right, then scaled right down with the transform tool, then returned to its orginal size.  They would be indistinguishable if I had made the copy a Smart Object before resizing it.

Producing crip Vector Objects

If you position an object at 1.5 pixels, Photoshop will anti-alias it, resulting in the sort of blur you see in the bottom of two orange boxes in the diagram below.  You can avoid this a number of ways: ensure that the object’s size is an even number of pixels, and when moving it, snap it to the underlying pixels.  When drawing a Vector Object (Rectangle Tool: U) use the options drop-down and select ‘Snap to Pixels’ to guarantee crispness!

In some situations, it is simplest to create a shape the right size first off, rather than hammering something out and trying to resize it.  In this case, simply select ‘Fixed Size’ in the options box displayed above.  Similar options are available for other tools, such as the crop tool and free transform.

That’s it for now – if you’ve got any tips to contribute, throw out a comment – I’d love to hear about it!

When designing websites, I find it useful to set the Ruler Origin to the top left of the main content column, so that the dimensions shown on the ruler relate to elements that I will code, rather than to the page background, which can vary greatly in size.  Following are some tips for using the ruler, its origin and guides.  Using grids can be handy, especially if you like to use a system such as the ‘960 Grid System‘,  which makes it simple to layout a page by defining blocks and gutters, as occurs in print.

Using the Ruler Origin

(I used to have great trouble with changing the Ruler Origin, but I suspect that was due to a bug associated with Photoshop’s ruler.)

• Click and drag the origin (see diagram) to move it.  This means that the ruler counts down to the left of its new origin
• Holding shift constrains guide movement to the currently selected ruler units.
• To change the units displayed on the ruler, and hence the snapping, simply right click it.  Clearly, pixels are most useful for web design, but for print I use millimetres.
• Holding the control key temporarily suspends snapping.
• Double clicking the ruler origin resets it to 0,0.
• Right clicking the origin sets it to the the last clicked point on the document.  You can undo this to ‘unset’ the origin, in case the last setting was particularly delicate.  Not sure why this would be useful.. but it feels tricky!

Another way of working with the ruler is outlined in the post I mentioned above:

Setting up the Grid

Note that a layer will not snap to another layer (or a guide) of that object is not visible.  Snapping behviour depends on what is defined as set to snap, and whether it is visible.

• go into Preferences > Guides, Grids & Slices, and set gridline every 10px, and 10 subdivisions (see below).  Objects will snap to subdivisions as well.
  
• setup the document with grid visible,
  
• position your guides, (optionally lock them: View > Lock Guides)
  
• then I can hide the grid, and work to the guides alone

This is the first post in the Photoshop Precision series – check them out, and leave a comment if you’ve got something to add!

I found that whilst zoomed in to pixel-level, my cursor wouldn’t line up with the ruler, and I couldn’t move the ruler origin accurately.  After a while, the solution presented itself… I wasn’t the only one fooled!

I reckon that the PS behavior has changed, and I’ve put tips for using the ruler and origin in ta new post: Aligning guides to the pixel-grid.

• In the first screenshot, I set the ruler origin to the intersection of the guides, then am repeating the process as i take the screenshot.
• In the second, I am hovering so that the dotted indicators in the ruler itself align with the guide… They should track the cursor arrowhead.

Please note that as i took the screenshot, I am zoomed in to max and snap is set to all: the ruler is clearly out of alignment with the pixel grid!  To clarify: I have not been able to accurately set the ruler origin to the intersection of my guides.  Period!

A proposed solution

It has been suggested that fixing other glitches with the Photoshop ruler can be accomplished by:

• Setting the grid interval to 1px (Preferences > Guides, Grid, etc)
• Setting View > Snap To: Grid

But unfortunately, that doesn’t work for me.

This issue seems related to the Shape Tool Anti-Aliasing bug, in so far as it relates to glitches with the ruler.

“When the PS is freshly installed and you switch on grid (set to 1px) and rulers and zoom to max, you can see that when moving the canvas left or right that the grid doesn’t match the rulers even though they are both set to ONE PX. They diverge…” Joey33

I mention that issue, as the links above are the only leads I could find which were even vaguely relevant.

I am using CS3 10.0.1 on Mac, but I do remember being bothered by this long ago, certainly well prior to the release of CS3.

So, this post is a cry for help: I’ve trawled the Adobe support forums, Googled, and checked Sitepoint forums, and am stumpled.  If anyone has a solution, I’m all ears!

Update and Solution..

Well..I’m now using CS4, and can’t replicate those screen shots above, so I reckon something was amiss…

I’ve moved the solution to its own post because the normal behaviour is really straight forward, and I’ve thrown in some tips that I’ve discovered along the way.

You can read more at: Aligning guides to the pixel-grid.

I’m not sure if when I posted the solution at last update I had upgraded to CS4 or not.. Meaning: I’m not sure if this solution will work for CS3.

After SirReddSir’s comment, I had another look at this and found that the grid must be visible for snap-to-grid to function.  So basic!  This seems consistent with other functionality in Photoshop: A layer will not snap to another layer (or a guide) of that object is not visible.  That was a very persistent gotch for me!

My lesson:

• go into Preferences > Guides, Grids & Slices, and set gridline every 10px, and 10 subdivisions
  
• setup the document with grid visible,
  
• position my guides, (optionally lock them)
  
• then I can hide the grid, and work to the guides alone
  

Okay.. I can finally lay this topic to rest!  Thanks all.