5 Photoshop Tips for Illustrator-lovers Getting Into UX Design

Many fellow designers I’ve met are in one of two camps – “pixel-perfectors” or “vector virtusos”. It would seem that, like learning skiing or snowboarding, you learn one or the other first, and forever after you tend to favor it, later discovering that you are completely disoriented when careening down the hill trying the other, bumbling and muddling through to stay on your feet.

I’m one of those vector people. I started using Adobe Illustrator about 11 years ago and immediately fell in love with how it worked and what I was able to create with it – everything from logos to illustrations for diagrams. I could make my original artwork super tiny or extremely huge. I could size it up or down without any loss of quality. How cool is that?

When I began working on visual designs for UI and UX projects, I dove right into using Illustrator to make my visual graphic designs because of all the wonderful effects and unique shapes I could create for icons, buttons, panels, boxes, etc. But what I found was that the type and thin 1px strokes didn’t render as crisply out of AI to JPEG as when rendered out of Photoshop. So I started migrating myself to PS for web comps. The text rendered much more closely to the final output once programmed. However, for situations when I knew the final application was not going to be rendered in a traditional browser, but in Flash, like an Adobe AIR or Flex application, AI was the clear winner because the final product was all going to be vector in the end.

It’s taken time to get used to PS and I’ve really had to force myself to go that route, learn to use the layers, but I do have to say that once you get the hang of it, the visual effects, strokes, shadows, are much better in PS because you can get consistency. Of course Fireworks is great also, however I haven’t quite become an avid user of it because it’s still very much Macromedia-ized in the way some tools operate. I’m more used to the Adobe User Interface principles.

Here’s 5 Tools that I recommend if you’re struggling with the switch from Adobe Illustrator to Adobe Photoshop:

1. The White Arrow Tool is Your Friend
The actual name is the Direct Selection Tool (Hot Key = “A”) and you’re familiar with it already in Illustrator for moving around individual nodes of shapes you create. The reason why this is especially useful in Photoshop is because unlike Illustrator, you can’t just select individual objects by sweeping over them with the mouse. You must select the layer, and then the object. To get around the layer picking and get right to business, use your Direct Selection Tool to choose the object you want to work on. Plus, if you’re working with rounded corner boxes or other items that have many nodes, it’s a great way to make finer adjustments to the shape, just like you would in Illustrator.

2. Keep Your Info Panel Open When Sizing Shapes
In Illustrator, we’re used to being able to scale objects very quickly and easily by entering the dimensions or grabbing the corners or nodes of the shapes and just pulling them out to our desired size. Photoshop seems to be missing this feature, or I just don’t know about it! With the Info Panel open, you can quickly see the size in pixels of your buttons and panels or other shapes in your design. If you create the shape and you need to resize it here or there, select the Direct Selection Tool and click on your Shape object. Once it’s selected, then switch to the Move Tool (Hot Key = “V”), and drag out the grab handles while watching the Info Panel. You’ll see the size numerically change. Undo this action (Option + Z) and then voila – you see your original dimensions and can adjust it from there using the Direct Selection Tool. Resize and reconfirm you dimensions as needed. I‘m constantly toggling back and forth between the Direct Selection and Move tools. (A-V-A-V)

3. Show Transform Controls
I generally find that it is helpful to have the Show Transform Controls checkbox selected all the time because that gets me the traditional grabber boxes we’re used to seeing in Illustrator to scale objects. A tiny detail, but very important feature to use in Photoshop.

4. Create Text Using Text Boxes (yes, always)
How many of you out there just grab that Text Tool and just start typing away? C’mon, raise your hands; you know you do it because it’s just faster right?? Well cut it out!

By simply making it a habit to use a textbox for every piece of text you lay down, you’ll ensure that you will be able to resize your columns of text and maintain consistency and control of line-height for menus and body text. And you can flow text from column to column too, just like you would in InDesign, if you’re familiar with that app. This is really critical during development time because you need to be able to communicate to your developer about how to implement your type in the CSS stylesheets so your design comes out pixel perfect every time.

5. Use a Grid and Keep in Separate Layer
Try Blueprint. As you’ll read when you get to the site, Blueprint offers a well proportioned grid, broken into 30px increments horizontally that allows us to focus on designing in a standard format that will be very easy to develop against, and is totally flexible for any design we want to create.

Download the zip file and you’ll have templates you can use in Photoshop. Open it up as your base template, keep the grid in its own separate layer so you can turn it off/on and start building right on top of it. It comes with all the grid lines in a semi-transparent layer, guides, and even includes some sample layouts for dividing the space in thirds or quarters that you can view/hide on the fly for quick reference. Love it! I’m sure you will too.

Bonus – Ever wanted to know how to make those slick, shiny Web 2.0 buttons? Check out this Photoshop tutorial by Iris Design:

If you have any tips you want to share, be sure to post a comment, I’d love to hear from you. More tips to come in future articles…