Advertisement

Adobe Photoshop CS6: Improvements for Web and UI Designers

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Photoshop CS6 has been hailed as a huge improvement for web and UI designers. I’m going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow.


Introduction

When I woke up on 26th March 2012, it was like any other ordinary Monday morning. I was still half asleep and recuperating from my weekend hangover. Then, as usual, I checked Twitter and that's when I noticed a shining little tweet that soon lifted me from my dazy haze. It told me that Adobe had released Photoshop CS6 Beta.

Now I'm sure I wasn't the only one to get a little bit too over excited about this (OK I'll admit it, I'm a geek). I mean, I work with Photoshop day in, day out and probably spend a lot more time and see a lot more of its UI than I do my own family. I soon got to work with studying as many of the 65 brand new features that I could. I soon found it to be one of the best updates for UI and web designers I've witnessed.


The New Interface

It's been nearly two years since Adobe last released an update to Photoshop and with this update comes a brand new interface. It's about time Adobe showed a little bit of love to its UI and I've got to say I'm impressed. You have the option to choose from four gray color schemes so you can set the contrast of the interface to suit your requirements. To set these you can find them in Preferences > Interface.

Photoshop CS6 The new interface

New Borders

One of the biggest questions I've been wanting to ask Adobe for a long time is "Why is there no option to add dotted or dashed borders?". This is probably one of the most popular techniques used in modern web design at the moment and until now it has been a long, drawn out process that involves cutting up lines or using the '-' key to create a series of "stitches".

Well, Adobe has certainly realized this and has introduced a tool to enable us to create them with ease and flexibility.

Photoshop CS6 Borders

Strokes can be added to any shape or path and come with several stroke options that work in a similar way to the stroke options panel in Illustrator.

  • Align - This allows you to select whether you want the stroke to align inside, outside or centre of the shape.
  • Caps - This option lets you choose whether you want the stroke line to have squared ends that end at the path point (Butt Cap), semicircular ends (Round Cap) or squared ends that square off past the path point (Square Cap).
  • Corners - This allows you to select how you would like the corners of the shape to be displayed. The options here are Milter, rounded and bevel.

Paragraph Styles

So you've just received your latest design back from the client. The PSD contains ten folders with each folder containing a page design for the site. It's a big file and the client wants to change the title font on each page and asks you if you can also make it a little larger so that it can become more readable. It's a simple enough amendment but it's one of those alterations that can be quite repetitive; trawling through all the folders, changing each title individually can take longer than expected.

Photoshop CS6 introduces 'paragraph styles' to take the sting out of amendments such as these. With paragraph styles you can effectively manipulate text just as you would in CSS by creating a set of properties for each style. You can set up 'H1-6' tags and 'p' tags or any other styles that you might want. When text has been created, you can simply select the style you want from the Window > Paragraph Styles. This option works in a similar way to same options in Adobe InDesign, but is perfect for this kind of scenario.

Photoshop CS6 Parapgraph Styles

Lorem Ipsum Arrives In Cs6

It's often the case that the simplest of ideas are usually the most successful and this is certainly true of a particular new feature of Photoshop CS6. How many times have you had to leave Photoshop to grab some lorem ipsum dummy text from elsewhere on the web? Well now you no longer have to. You can simply paste some lorem ipsum in from the bottom of the type menu.

This is a great feature, but my only snipe would be that it would be even handier if it came with a pre configured keyboard shortcut - even by typing in the word 'lorem' followed by return would be really great! This can be worked around, using actions and keyboard shortcuts, but still.

Photoshop CS6 Lorem Ipsum

Colors Become Hash Tag Friendly

If you perform front end development on the sites you create then I'm sure you'll spend a lot of time flicking between Photoshop and your chosen code editor. Probably no more so than to get the hex value color references. The problem before was that the hex value field of the color picker in Photoshop previously didn't accept the hash symbol (#) itself.

This resulted in problems when trying to match colors from the web and would often result in repeat journeys between your web inspector, your code editor and Photoshop. In CS6 Photoshop plays nicely and accepts the hash tag whether it's inputted or if not. Another little time saver that makes all the difference.

Photoshop CS6 Hash tag friendly

New Document Presets For Common Devices (iPhone, iPad Etc)

It was only a matter of time before Photoshop introduced canvas presets for common devices such as the iPhone. This is a great little feature that just saves us that little bit of extra time. In my opinion, being a successful UI or web designer is all about creating a great workflow and the more time savers that you have the quicker you can get the job done.

Another great tip is to create an action that opens a new document with the your chosen devices UI assets already in. For example I've created an action for iPhone, iPad and Android that automatically creates a document and brings in items such as the menu bar and common controls as well as guidelines and grids setup for it. This takes CS6's new document preset feature that one step further.

Photoshop CS6 Common devices presets

Shape Creation And Manipulation

In both web and UI design, shapes are important part of this process. We use them for banners, boxes, form inputs and in lots of other cases. Vector shapes have received a big overhaul in CS6 and brought some very welcome changes. Let's look at them.

  • Snap Vector Tools and Transform to Pixel grid. - This has been vastly improved in CS6 and now offers the ability to snap shapes to the pixel boundaries, including the pen and ellipse tools. This means that shapes appear sharp and crisp and never have bleeding edges. You can find this as a global option in Preferences > General
  • Paste Shape Attributes - By right-clicking on a shape layer, you are now able to copy a shape's attributes (such as color and stroke) and paste it on to another shape. This is a great time saver.
  • Shapes as Layers - Before, upon creating a shape, it used to appear in the layers panel as a solid color. This is no longer the case my friend; you are now able to see the actual shape in the layers panel.
  • Hiding the path. - It's now possible to toggle the path of a shape by pressing Command+shift+H/Ctrl+Shift+H. This makes it a lot easier to be able to see the correct effect when adding layer styles such as stroke.
  • Create the Exact Size of Shapes. Specifying a shape of exact size used to rely on looking at the info panel and having to draw the shape whilst trying to line up the measurements. Now you just enter the required fixed size in the options bar, place the cursor on your document and it will create a shape at the given dimensions.

Goodbye Info Panel, Hello Visual Feedback!

I can't recall the amount of times that I've been coding up a design and had to take image measurements or even image positions for sprites. I used to rely on the info panel to help with this. Okay, the info panel still exists so it's not necessarily 'goodbye info panel' but you may find yourself using it less and less now that visual feedback has been introduced in CS6.

It comes in the form of a nice little tooltip which gives you pixel dimensions alongside your cursor whenever you create a shape or marquee. No longer do you have to get your bearings as to where the info panel is on your screen as now the dimensions are always there next to your cursor. This is one of those features that makes it hard to believe that Photoshop never offered it before.

Photoshop CS6 Visual Feedback

Layer Searching

This is one that I most definitely require. I don't usually tidy my PSD's up and organize them until the very end. I'm sure some would disagree with this practice, but I just feel that if I were to organize my PSD as I went along then this would interrupt my creative flow. I feel I should be concentrating on making it look the best it can be and not having to break off and organize. If you are like me, or even if you're not, I'm sure you'll appreciate CS6's new ability to search through your layers. The search really is quite comprehensive and lets you filter layers based on the following:

  • Kind - This option lets you filter your layers based on pixel area, adjustment layer, text layer, shape layer and smart object.
  • Name - This is a simple search to filter your layers by the layer name.
  • Effect - Filters out layers with specific layer styles applied.
  • Mode - Filters out layers that have specific color modes applied.
  • Attribute - Filters out layers with specific attributes attached such as 'locked' or 'visible'.
  • Color - Filters out layers that you have grouped under a specific color.
Photoshop CS6 Layer Search

Other Useful Little Improvements.

  • Performance - When you first try out CS6 Beta you might just notice that everything seems to have become a little faster and more responsive to your actions. This is partly down to Photoshop's new graphics engine, Mercury. Everything that you do in Photoshop is now quicker than ever before.
  • Rename then tab to next layer - You can now rename a layer and just tab to move on to the next layer to rename it. Awesome!
  • Toggle Layer Styles Panel - When presenting my PSD to the client or the developer, it's always nice to send a clean, tidy PSD. Now there's a simple way to toggle closed all the layer style drop downs from the layer by simply option-click / alt-clicking on the little arrow that toggles the layer styles.

Conclusion

I've been using Photoshop CS6 for a little over two weeks and has it speeded up my workflow? The answer is yes. Not only has it speeded things up but it's made the little tedious tasks a lot easier and more rewarding to perform. CS6 has been noted as one of the best improvements for UI and web designers in a long time and I would have to agree. It's great to see that Adobe is getting back on top of its game with this new release and I'm looking forward to seeing if there are any more nice little additions when we see the full release.


And Finally...

Download it now and try it out for yourself!

Do you think there are still some features that Photoshop would benefit from that haven't yet been implemented? I'd love to hear your thoughts on this!

Advertisement