Faster layer renaming in Photoshop

The fastest way to manually rename a bunch of layers in Photoshop is to double-click / run your keyboard shortcut for “Layer” → “Rename Layer…” (in my case Shift+CMD+R) on one then use the tab key to apply the new layer name and jump to the next visible layer. I’ve known about this shortcut for a good long while now.

A GIF of layers being renamed with the tab key

What I only learnt a couple of weeks ago by happy accident however, is that by holding down the shift key whilst pressing tab you can reverse the order of the renaming so that rather than cycling through layers from top to bottom, you can go bottom to top.

A GIF of layers being renamed with the tab key in reverse order

I thought this might have been a discreet addition in CC 2015 but no. As I found out after a quick search, it’s been in Photoshop for a good few years now (since CS6).

Save for Web in Photoshop CC 2015

As of Photoshop CC 2015, Save for Web is deemed a legacy feature. It’s held up pretty well over the years I think, considering it was built on top of ImageReady which was first released in 1998 (again, nice to see the Photoshop team pushing things forward).

If, like me, your workflow relies heavily on Save for Web, then no need to worry just yet. No features have been removed from it and whilst it may be removed in the future, it won’t be going anywhere for time time being. Nor will this update have any affect on your actions and scripts.

From Jeff Tranberry’s blog:

The new Export As workflows are a complete redesign of how you export assets out of Photoshop. Export As has new capabilities like adding padding to an image and exporting shapes and paths to SVG. We also introduced the Quick Export option, which allows you to export an entire document or selected layers very quickly with no dialog.

I’ve already written about some of the new Quick Export options, but the “adding padding” part is particularly interesting to me here. It’s absence in previous releases is one of the reasons I have never used Generator for day-to-day work.

From Photoshop’s documentation:

If your asset needs to occupy a certain width and height, specify those values as the Canvas Size. The Export As… dialog updates the preview to center the image within those bounds.

Quick Export in Photoshop CC 2015

Amongst the banner features announced for Photoshop CC 2015, there are a few small niceties that have been added too. My favourite so far is “Quick Export as PNG”.

Before now I had an action that would duplicate my selected layer or group to a new document, trim the transparent space on all sides and save it as a PNG to my desktop. But no more.

There are 2 different ways you can use Quick Export. Either by going to “File” → “Export” → “Quick Export as PNG” if you want to export the whole document or by right clicking on a layer or group and selecting “Quick Export as PNG” from the menu.

Quick Export as PNG shown in the Photoshop File menu

You can of course set a keyboard shortcut for both of these. To export the whole document, open up the keyboard shortcuts window (“Edit” → “Keyboard Shortcuts…”) and under “Shortcuts For: Application Menus” toggle “File” then “Export>” and click on “Quick Export as PNG” to set your shortcut. For layer and group exporting, go to “Shortcuts For: Panel Menus”, toggle “Layers” and click on “Quick Export as PNG” to set your shortcut. I like Control + Command + E for the former and Control + Shift + Command + E for the latter.

Bonus tip: For years now I’ve had my Caps Lock modifier key set to be Control instead. It makes a drastic improvement to the speed and comfort of using these sorts of shortcuts. You can change it by going to “Keyboard” → “Modifier Keys…” in the System Preferences.

My Keyboard settings

Collapse folders and styles after running Bjango Actions

Running any of the scale actions in Marc Edwards‘ wonderful Bjango Actions leaves all of the folders and layer style summaries open in the layers panel. Instead of always collapsing them manually, I just made a short addition to the end of each of the scale actions. They now collapse everything but the group layer style summaries 1 for themselves once everything has finished scaling. You can then quickly collapse the layer style summaries for all groups by atl-clicking on one of the toggle arrows (unactionable). You’ll have to be running Photoshop CC for this update to work.

A before and after of the Photoshop layers panel.


  1. Unfortunately the “Collapse All Groups” command doesn’t currently collapse them. Feedback submitted here

How to copy an RGB value in Photoshop

The following is a result of me scratching my own itch, hopefully you’ll find it useful too. Before we go any further, it’s worth noting that this is a Mac-only solution. If you’re running Windows and want to re-write what I’ve done in VBScript or Javascript (or are just curious) then carry on. If you just came for the how-to then this isn’t for you, sorry.

Unlike web designers who work primarily with hex values when it comes to colours, interface designers work mostly with RGB(A). Unluckily for us, whilst Photoshop provides an easy way to copy a shape’s hex value to the clipboard it doesn’t offer an RGB(A) equivalent. If you are unfamiliar with this feature of Photoshop, here’s the quickest way to use it:

  • Go to Edit ➜ Keyboard Shortcuts
  • Under Shortcuts for select Panel Menus
  • Toggle Color
  • Scroll to Copy Color’s Hex Code and assign it a keyboard shortcut

I’m constantly grabbing colour values from PSDs, but after a while opening the content options of each of the layers whose values I need, then typing out said values manually into an RGB([red], [green], [blue]) string gets pretty tedious, pretty quickly.

A few weeks ago I wrote a script that does a fairly good job replicating Photoshop’s native “Copy Color’s Hex Code” except of course, it’s “Copy’s Color’s RGB Code”. It’s been a good time-saving addition to my workflow, despite it’s limitations due to one of Photoshop’s AppleScript restrictions: as far as I can tell from Adobe’s documentation, there’s no way to get any form of colour value from the currently selected layer in Photoshop (although I’m more than happy to be proven wrong if you know of a way). As it doesn’t use the selected layer for the colour, it wouldn’t make sense for it to use the alpha channel value of the currently selected layer either, so if your layer has one you’ll need to add that manually. Hence the use of “RGB” instead of “RGB(A)” above.

What that means is that once setup, the only difference between the native functionality and our scripted one is that you’ll have to use the colour picker to select the colour you want to copy instead of selecting the layer. Whilst not ideal, as I said, it’s still saved me a lot of time.

Ok, now let’s take a look at the script:

-- Convert the current foreground colour in
-- Photoshop to RGB then copy to clipboard
-- by Elliot Jackson | http://casualnotebook.com
tell application "Adobe Photoshop CC 2014"
  set fgc to convert color foreground color to RGB
  set redInt to red of fgc as integer
  set greenInt to green of fgc as integer
  set blueInt to blue of fgc as integer
  set the clipboard to "RGB(" & (redInt) & ", " & (greenInt) & ", " & (blueInt) & ")" as text
end tell

And here’s a step-by-step of what it’s actually doing:

  1. Convert the current foreground colour in Photoshop to red, green and blue values.
  2. Independently set the values of the red, green and blue channels to the nearest integer.
  3. Add each value to it’s appropriate slot in the “RGB($red, $green, $blue)” string.
  4. Copy the whole lot to the clipboard.

Note: The values are put into an RGB() string because of how we have things setup here at Realmac. If you’re interested, here are the macros that we use:

#define RGBA(r, g, b, a) [NSColor colorWithDeviceRed:(r / 255.0) green:(g / 255.0) blue:(b / 255.0) alpha:a]
#define RGB(r, g, b) RGBA(r, g, b, 1.0)

If you are using a version of Photoshop other than CC 2014, you’ll want to change tell application "Adobe Photoshop CC 2014" to whichever release you have.

Let’s get this setup so you can actually use it. There are two parts to this, adding the script as a Service and then giving it a keyboard shortcut in Photoshop.

Setting the script as a Service:

  1. Launch “Automator.app” from your Applications folder.
  2. Select New Document ➜ Service.
  3. In the search box (top left), type “Run AppleScript”
  4. You should have 1 result come up, if you don’t then make sure “Library” is selected on the left.
  5. Drag it over to the main area, delete any code that’s already in the input then paste in the script above.
  6. File ➜ Save and give it a relevant name, this will be used later.

Triggering it with a Keyboard Shortcut

  1. Launch System Preferences then go to Keyboard.
  2. Go to Shortcuts ➜ Services.
  3. Scroll down until you see it. It will be named the same as what saved it as in Automator.
  4. Select it then click Add Shortcut. Make sure this doesn’t conflict with any of your existing Photoshop ones.

Restart Photoshop and there we go, you should now be able to use it. If you want to run it manually, go to Photoshop ➜ Services ➜ [ whatever you named it ] in the menu bar. Granted it takes a few minutes to setup but in the long run, it’s worth it.

Hopefully you’ll find this as useful as I have.

Note: This is a re-post from my old (and retired) blog.

A Guide to Optimising Photoshop Performance

Many of us have a love hate relationship with Photoshop. It’s an incredibly powerful tool that helps us get stuff done, it is however also undeniably temperamental. At times it can slow down or become unresponsive.

So today I’m going to try and help you optimise Photoshop based on your needs. Taking the time to tweak a few performance settings based on your workflow can make a massive difference.

As a UI designer, I work almost exclusively with files that have dozens and dozens of layers but are fairly small in size. I’ll show you how I personally have my performance options set as well as giving a few tips for those of you who work more with large documents and photography.

General Tips

Let’s start with some tips that will help your performance no matter what you use Photoshop for.

File Sizes and Dimensions

I work primarily with PSDs. To ensure compatibility with other applications and due to the design of the file type, Adobe has limited the format to a maximum of 2GB.

This is the first thing worth checking if things are starting to get slow. The file size can quickly build up if you’ve got all of the screens of your app in one PSD, especially when you start adding in things like Layer Comps on top of that.

Since version 14.2 of Photoshop CC, we have had access to a new feature called Linked Smart Objects. These make breaking up your app into multiple files much easier and a lot less hassle to keep up to date in the long run. Using them to break up designs is something that I have started doing and it really is a win win situation. Not only does it keep Photoshop snappy, it also allows you to be much more organised with your app’s screens.

Adobe has places limits on other file types as well. No file can be larger than 300,000 x 300,000 pixels and PDFs are limited to 10GB. Those of you who use Photoshop’s Large Document Format don’t need to worry though, the file size limit for those is 4EB (4 million terabytes).

The Efficiency Indicator

The is a handy way to keep track of the toll your PSD is taking on the system.

In the bottom left hand corner of your Photoshop window, there’s an indicator that can show you a variety of information about your current document. By default it is set to “Document Sizes” which will read something like “Doc: 12.5M/384.5M”.

By clicking on the ▶ symbol to the right of it, you can change it to show a variety of different information including “Efficiency”.

Efficiency Indicator

The indicator will now read something like “Efficiency: 100%”. When that value goes below 100%, it means that Photoshop has used all of the available RAM you have allocated for it and is now using the scratch disk. This will cause Photoshop to slow down.

If you see it drop below 90% then you should allocate more RAM to Photoshop in your settings (more on this later).

If you work in Full Screen Mode, the indicator is hidden. Fortunately, we can also access the information via the info panel.

This post was originally written for the Realmac Software blog. Check out the rest of it over there.

Info panel

There are two ways you can easily free up some RAM:

  • Purge “Undo”, “Clipboard” and “Histories” (Edit → Purge → All).
  • Close any documents you’re not currently using.

Warning: Purging, whilst effective, cannot be undone. If you think there’s a chance you’ll want to undo some steps in one of your documents then only purge your Clipboard.

Mavericks Users: Disable App Nap

If you use a lot of automated tasks or actions in Photoshop, you might have noticed them run a lot slower when the app is in the background since you installed Mavericks.

The guilty party here is a feature Apple introduced in version 10.9 called App Nap. The idea is that it helps you save power when multitasking by detecting when an app is completely hidden behind other windows and consequently slowing it down. Whilst it works well in general, that’s not something we want for Photoshop.

Fortunately, there is an easy way to disable it for certain applications:

  • Right click Photoshop in Finder
  • Choose “Get Info”
  • Check “Prevent AppNap”

Get Info panel

Disable Thumbnails

Whenever you make a change to your document, Photoshop will automatically update the thumbnails of your layers currently visible in the Layers window.

Thumbnails are something I always have disabled anyway because it means I can see more layers in the window, plus I just think it looks better.

If you work with large files or move around a lot of layers, there is also a performance benefit is disabling them as well.

I think it’s safe to say all of us have experienced jarring layer nudging at some point or another, when your layers just can’t keep up with your arrow keys making it look like they’re moving in blocks with a slight delay rather than smoothly as you press your keys.

I found that disabling layer thumbnails helped this a lot. To disable them, click the ☰ button in the top right hand corner of your Layers window and choose “Panel Options”. Then under “Thumbnail Size” select “None”.

Photoshop Performance Window

This is where you can have the biggest impact on Photoshop’s performance. These settings all depend on how you use it, whether it be for editing photographs or designing UI’s.

My current setup is a 15″ rMBP with a 2.4GHz Intel Core i7 processor, 8GB of RAM and NVIDIA GeForce GT 650M 1024MB graphics. The settings I’m about to show you work well for me and how I use Photoshop but you might need to tweak them to suit your setup.

You can access Photoshop’s Performance settings window by going to Photoshop → Preferences → Performance… from the menu bar.

Memory Usage

Very simply, the more RAM you throw at Photoshop, the better performance you will get from it.

These controls allow you to choose how much RAM you want to allocate for Photoshop.

By default Photoshop will use 70%. If your setup has less than 4GB of RAM or you’re running 32bit Photoshop, avoid pushing it beyond this.

When I use Photoshop, it’s pretty much the only thing I have open so I push my “Let Photoshop Use:” setting right up to 98%. This works well for me and leaves just enough for things like Slack and Airmail. It might be too much for you though, start at 95% and bump it up or down a few percent over time until you find the right balance.

Available RAM: It’s worth noting that this is not your total amount of RAM as Photoshop subtracts the amount that is required by the OS.

History and Cache

Your History and Cache settings depend entirely on how you use Photoshop and optimising them based on your workflow is crucial.

Tall and Thin or Big and Flat?

Tall and Thin: This is the setting to go for if, like me, you work in documents with small dimensions and lots of layers. It will set your cache levels to 2 and your tile size to 128k.

Big and Flat: If you’re a photographer, this is the better setting to go for. It is designed for processing documents with few layers and large pixel dimensions. Big and Flat will set your cache levels to 6 and your tile size to 1024k.

Default: If you are unsure or if you feel like your usage of Photoshop falls somewhere between these two categories, just go for the default settings.

What are Cache Levels and Cache Tile Sizes?

The Cache Levels setting saves low resolution versions of the images to help Photoshop redraw the high resolution version faster. If you work with large files (dimensionally speaking) that have very few layers, you can consider putting this as high as 8. I have mine set to 2.

Photoshop processes data as tiles. The Cache Tile Size sets the amount of data Photoshop operates on at one time. If you use complex operations in Photoshop, a large Cache Tile size will help it process them faster. However, it does make onscreen operations slower. Again, it comes down to how you use the software.

History States

Every time you make a change to your document, Photoshop saves a snapshot of it allowing you to go back and undo steps. The value of your History States setting should be the maximum number of screenshots of your file you want Photoshop to store at any one time. Be careful though, as this uses your scratch disk, a higher value can impact Photoshop’s performance.

By default, the value is set to 20. This isn’t nearly enough for me personally as I like having a bit more leeway. Setting History States to 100 works best with my workflow.

Photoshop Preferences

### Scratch Disks

A scratch disk is a drive with free memory that will be used by Photoshop for temporary storage when your system runs out of RAM to perform an operation.

The faster the disk you select, the better. Ideally, it should be an SSD. Dedicated scratch disks are especially recommended for people who work with large images.

### Graphics Processor Settings

Using a graphics processor not only increases performance but activates features and interface enhancements as well. Make sure that “Use Graphics Processor” is checked in the bottom right of your Performance Settings window.

To change your GPU settings, click on “Advanced Settings”. There are 3 options to choose from depending on how much of the GPU you want to use. The benefits and downsides of each option are detailed in the Advances Settings window.

Having the drawing mode set to “Advanced” works best for me. However, if you are finding painting to be slow it’s worth experimenting with your settings here.

All of the changes in your settings that we have just discusses will only take effect once Photoshop has been restarted.

This post was originally written for the Realmac Software blog.

300,000×300,000 pixel Photoshop files

Those are, apparently, the dimensions a PSB file maxes out at. Out of curiosity, I tried creating a new document at those dimensions and despite having 36.91GB of free space I got the following warning:

OS X's “Your startup disk is almost full” warning dialog

@JonJungemann tried with 900GB of free space and got the same warning.

If anyone out there has more than 900GB worth of scratch disk space available, I’d love to know 1 how much is needed to create a file at those dimensions.


Update: @ckenney108 set a Drobo with 16.75TB of free space as a scratch disk and managed to create the file. It takes up 360GB of scratch space and 4.22GB on disk. I’m not sure why 900GB wasn’t sufficient to create it.

The Get Info pane of the PSB file


  1. My email address is elliot [underscore] jackson [at] me [dot] com. 

How to Export SVGs from Photoshop

Since the release of version 14.2 in January, Photoshop CC has had the ability to export SVGs with Adobe Generator. Whilst the developers still consider this to be an experimental feature, I have been using it for a while without any major issues.

To enable SVG exporting, we will need to create a configuration file for Generator.

Create the configuration file

  • Quit Photoshop.
  • Open your favourite text editor and paste in the following:
{
  "generator-assets": {
    "svg-enabled": true
  }
}
  • Save the file in your home folder—in my case /Users/Elliot—and name it generator.json.
  • Restart Photoshop.

If you don’t like the sound of that then you can just download the file here, put it in your home folder, restart Photoshop, and you’re good to go.

Export as an SVG

Open up your PSD and go to File > Generate > Image Assets. You will need to do this for each PSD you want to use Generator with.

When naming the layer (or group) you want to export, append .svg to the layer name. For example, your-layer-name.svg.

Layers Panel

It takes a couple of minutes to setup the first time but once done, your SVGs will export alongside your PNGs and any other generated assets.

As I said, this is still an experimental feature so it isn’t perfect yet. However, I have found that it has coped well with 90% of what I’ve used it for.

The beauty of it is that if it isn’t working for you as well as you’d like, you can do something about it. All of the the code is open source on Github.

Designing Apps for the Visually Impaired

Launching into the design (or redesign) of your app is exciting. You’ve got plenty of ideas floating around, sketches and wireframes everywhere and when the time comes to get cracking in Photoshop, you can’t wait to get started. At this stage there are plenty of thing to keep in consideration — colours, typography, grids etc. — but with these comes another consideration that is equally as important: accessibility.

As an app designer or developer, it’s normal to want to get as many people using your creation as possible. Unfortunately, there are many people who suffer from various forms of disability that could potentially hinder the experience they have with your app if these disabilities have not been taken into consideration in the design process. Each person that has a bad experience with your app means (at least) one less user for you and obviously, that’s something we don’t want.

The main types of disability that can have an effect on how people experience your app are as follows:

  • Visual: This includes people who are completely, partially, or colour blind amongst others.
  • Auditory: People who are completely or partially deaf are included in this category as are those who have bad speech perception.
  • Cognitive: This includes people who have learning disorders, dyslexia amongst others.
  • Motor: The results of motor impairment include lack of muscle control, poor stamina and muscle weakness amongst others. Each of the the above merit their own blog post so today we’re going to focus specifically on the various types of colour blindness, understanding them and testing for them to ensure the best possible experience for visually impaired people.

What is colour blindness?

If somebody is colour blind that does not necessarily mean that they are monochromats — people who can only distinguish brightness variations but not colours — which is the rarest form of colour blindness. It more commonly refers to people who have difficulty perceiving reds, yellows and greens from one another.

Full colour vs Monochrome

Deuteranopia, a subtype of red/green colour blindness, is the most common form of colour blindness affecting an estimated 1% of all males. This does not mean that people affected with this type of colour blindness will mix up red and green, but rather that they will confuse colours that are made up of red or green as a whole. For example, not being able to distinguish the difference between blue and purple.

Full colour vs Deuteranopia

The different types of colour blindness

We have already talked about the most common (deuteranopia) and the least common (monochromacy) types of colour blindness but there are two more variations that we should to be aware of as well:

  • Protanopia: The inability to distinguish between blue and green colours as well as between red and green colours.
  • Tritanopia: These people will confuse green with blue and yellow with violet.

Full colour vs Protanopia vs Tritanopia

What can we do as designers?

With the release of iOS 7, Apple has put a lot of focus on colour. Each app should have one key colour that defines all of the interactivity throughout the app (for example orange in Ember).

When selecting your colour palette, this is important to keep in mind. If your body, headline and key colours are indistinguishable from one another for someone with one of the aforementioned disabilities then all notion of colour based interactivity is lost within your app. Not good.

iOS 7 does offer some extra accessibility settings for people with disabilities, however these should not be relied on. They’re there to work with your app, helping out where possible (increasing text size with dynamic type etc.). They are not there to do all of the accessibility work for us.

Testing for visual disabilities

Fortunately, there are ways we can test our designs to make sure that everyone can have the same experience with our app.

Photoshop offers built-in testing for the two most common types of colour blindness, deuteranopia and protanopia.

Skala Preview is my tool of choice for seeing what my designs look like, in real time, on a device. It is particularly useful because it also has the ability to to preview designs from the point of view of people with deuteranopia, protanopia and tritanopia as well as monochromats.

Skala

Sim Daltonism will allow you to test all of the visual impairments we have discussed directly on your Mac.

Wrapping Up

With the ever growing ownership of smartphones, computers and various other digital interfaces it is more important than ever to ensure that what we create is accessible to the largest amount of people possible. This means taking into consideration not only ourselves but those who have visual, auditory, cognitive or motor disabilities as well.

This post was originally written for the Realmac Software blog.

Working with Type in Photoshop

In this post I’m going to show you some of the tools that I use in my workflow when working with type in Photoshop.

Anti-Aliasing

The elephant in the room seems to be as good of a place as any to start this post. In previous versions of Photoshop (pre-CS6) selecting the type of anti-aliasing method to use came down to choosing the best from a bad bunch really. However, a few months ago Adobe introduced two new OS-native options in the anti-aliasing settings in Photoshop: “Mac” and “Mac LCD”. These options aim to replicate the system anti-aliasing for fonts: “Mac” replicating OS X’s greyscale font smoothing and “Mac LCD” its sub-pixel font smoothing.For web designers, the CSS equivalent to “Mac” would be:

  -webkit-font-smoothing: antialiased

and the equivalent of “Mac LCD”:

  -webkit-font-smoothing: subpixel-antialiased

As iOS uses greyscale anti-aliasing for all of its type rendering, you should use the “Mac” anti-aliasing method in Photoshop when designing for iOS devices.

Character and Paragraph styles

Character and Paragraph style panels shipped with CS6 and allow you to save the attributes you’ve set for a specific text layer to then re-apply the exact same styling to other layers. To display the panels, go to Window > Character/Paragraph Styles in the main Photoshop window.

I find this feature very useful for keeping all of my typography consistent throughout a project.

If you are unfamiliar with this feature, Tuts+ have a handy getting started video on their site.

Wrap text with paths

I only really use this when doing web design but it’s still good to know about. If you want to wrap text around an image then you can do so fairly easily with vector paths. Make sure to have a look at this video tutorial from “Method and Craft” if you’re unsure how to achieve this.

Text wrapping around an image

Filter Text Layers

This is a fairly well known feature in Photoshop but I still find it useful. At the top of the layers panel there are various filtering methods including “Filter for Type Layers”. Activate this to only show text layers in the panel. It can be handy for making bulk changes to a project.

Filtering layers by type

Paste Lorem Ipsum

Another useful little time saver that shipped with CS6 is the ability to paste Lorem Ipsum text into your document from within Photoshop. When editing a text layer, go to Type > Paste Lorem Ipsum in the main menu to paste a paragraph of dummy text. I would recommend assigning a keyboard shortcut to this to make it even quicker.

Font Management

I use OS X’s built-in Font Book to manage the 269 fonts I currently have installed on my system. I have tried a lot different 3rd party font management applications in the past but they always ended up breaking something and felt unnecessary for the few fonts that I actually use.

There we have it. These are some of the things I do when working with type in Photoshop to improve my workflow. Hopefully you found this post useful! Let me know if there are any other aspects of Photoshop you would like me to talk about in further blog posts, on Twitter.

This post was originally written for the Realmac Software blog.

A Guide to Pixel Hinting

When looking at a website or interface, there are few things more annoying than half pixels. The resulting blurred edges make your potentially great product look hastily designed, uncared for and unfinished. Admittedly, if you are working with company logos, especially type-based ones, half pixels are a fairly regular occurrence and potentially frustrating to deal with. When it comes to icons, buttons or any other interface elements however there are no excuses.

So, today I thought I’d share some tips on Pixel Hinting – which very simply means moving your vector points so that they fall on the pixel grid.

Dealing with type logos

If you are working with a non-vector logo, you’re going to have to redraw it to be able to get the best, pixel-perfect results. For this example however, we already have a vector ready to go in Photoshop.

Download example.psd

As with any vector adjustment work, your best friends are going to be the Path and Direct Selection Tools as well as 3200% zoom. The actual process for doing this is very simple but depending on the size of the vector, it can get quite time consuming.

Tip: When using the Selection Tools, CMD+Click to quickly switch between the two.

Getting set up

Make sure that the “Snap Vector Tools and Transforms to Pixel Grid” option is deselected in your Photoshop preferences (Cmd+K). This will allow us to move our vector point in increments rather than 1px at a time.

Let’s get started

As this is a fairly repetitive process, we’re just going to fix the “R” here. It doesn’t have very good edges at the moment so should make for a good example. You will then be able to apply what you’ve learnt to the rest of the shapes.

Comparison

Now let’s get started. This is the “R” zoomed up to 3200%. I like to begin at the top of a shape and work down.

Step 1

As you can see, the top part isn’t too bad here. We’ll just nudge it up a little. Make sure you select all of the appropriate anchor points with the Direct Selection Tool.

Step 2

Next we’ll fix the left side. Start by nudging in the top two anchor points then the second two out.

Step 3

The bottom part isn’t too complicated either, just make sure you’re selecting the correct anchor points.

Step 4

Step 5

Step 6

Step 7

Finish up the outer part of the shape by bringing the last few points.

Step 8

Now for the inner section. Nudge in the left anchor points then nudge out the right ones.

Step 9

And we’re done! As you can see, it’s a very simple process that produces good results. Not all shapes are as straight forward as this one though. There are times when you might have to compromise and use a half pixel to keep the recognisable features of the shape intact but as a general rule, pixel hint!

Dealing with icons

Using icon sets is fine for quick mockups, but for final releases you should always make custom icons. I don’t pixel hint in quick mockups because they serve only to get your ideas out there and your time can be much better spent elsewhere. However, when the time comes to do your final icons here are a couple of tips:

Setup: I like to do icons in a separate PSD. Start by setting your background to #ffffff if it isn’t already and your vector colour to #000000. Black on white is the easiest way to spot those half pixels.

Know your dimensions: If your icons are going to be displayed at 32×32, there’s no point in making them at 46×46 or any other dimensions. Setup some guides in your new PSD and design for the size they’re going to be displayed at.

I hope you found this article helpful, and be sure to let me know on Twitter if there are any other Photoshop topics you’d like me to cover in future posts.

This post was originally written for the Realmac Software blog.