I would also like to add to his list of a what a web design app should consist of is an accurate (and easy) way to reproduce CSS effects such as the many different types of border styles. Basically we’re in agreement that CSS should play a more integral role earlier on in the design stage.

So why not build a desktop app for web design around WebKit? I’m not talking about an in-browser AJAX toolkit for dragging elements around and changing fonts, but an actual desktop application built with WebKit as the core to its display.

It’s clear whoever creates a piece of software blending both a graphics editor with the concept of designing in a browser (with WebKit) could have a very bright future. Who knows, Adobe could do it. Stranger things have happened.

Let me know what you thing by sending me an @tkenny reply on Twitter.

On the other hand however, you will need to create the elements with HTML and CSS in the first place before using them in Photoshop so why not just design in the browser? This could be useful but if you’re going to create something in HTML and CSS so it can render as it would in a browser will you not have to create everything within HTML and CSS due to the vast differences between the way Photoshop renders elements (especially text) differently?

I’m interested what you think of this idea. Personally I think it’s great to see Adobe reaching out to web designers which isn’t something they traditionally do or have ever done as far as I know. I don’t think they’ve paid paid us much notice judging from the last few updates of Photoshop so it’s certainly encouraging. Send me an @tkenny reply on Twitter with your thoughts.

Of course you could just explain your idea to the client but the problem here is they may not understand what you mean or have a hard time visualising it. The next step is to show them something similar on another site but there is still a disconnect from what you want the client to see and what they’re actually seeing.

Build Your Idea as Part of the Design Stage

Why not go ahead and build your idea? After all, the most effective way to display any ideas is to build a fully working version as part of the design. There can be no confusion as to how it will work as it will be up and running for the client to see and interact with for themselves.

When the client can actually use the concept themselves and as long as it works well and is a good idea, they will be much more likely to like it and agree to sign it off as part of the design. They’ll also be much more engaged in the design and confident with your work, creating an increased trust in you, which can only have a positive effect as the project moves forward.

Example

At my workplace, we have recently adopted this approach and finding it immediately effective. Sovereign had a poorly implemented promo area that was barely used by visitors so we decided that the best approach to propose an improvement was to build a fully working concept of what we wanted to show.

If you head over to the Sovereign site, you will see that the concept was agreed and as it was already built by myself, it was implemented into our CMS with minimal effort for our developers.

If you’re like me and work with a separate team of developers who don’t specialise in CSS, you can teach them new techniques or encourage them to use progress enhancement with CSS3 such as border-radius and text-shadow if they don’t already.

No Need to Re-Invent the Wheel

One of the real benefits of this approach is that while it may seem like it will extend the design phase considerably, it really doesn’t have to. Chances are that any idea you have will be similar to something that has already been created and released for free by someone in the excellent design and development community we’re a part of.

In the case of Sovereign, all I needed to do was modify Build Internet!’s superb Interactive Picture tutorial and place it on top of a screenshot of the homepage to complete the illusion of how the final version would look for our customers. Every web designer should know how to code HTML, CSS and even possibly some Javascript, so modifying existing code shouldn’t be a problem and for some even creating something from scratch should also be easy and therefore not take too long to develop.

Any extra time spent is worth it because it is offset in development time. As you’ve already built part of the design, you’ve saved development time as you’ll be able to copy and paste it straight into the build.

Conclusion

The benefits of this approach are clear and while it may take a little extra time to develop a working version of an something as part of the design phase it is worth it for the increased trust in the relationship between you as the web designer and your client. Whether you’re developing your design yourself or passing it onto a development team, the completed development of the concept can just be slotted right into place.

Taking this to the Next Level

Andy Clarke proposes that we skip the design stage in Photoshop completely and design directly in the browser using HTML and CSS in his Designing With CSS tutorial DVD. I haven’t seen it yet but the core idea is certainly something I am keen to explore in the future.

Try this in your next project and let me know how you get on. If you already use this approach then let everyone know how it works for you by leaving us a comment.

The following are advanced Photoshop techniques that can help with your day to day use of Photoshop.Convert Layer Styles into their own Layers

Sometimes you will want to have more control over layer styles. The good news is that you can. Take this example of a New Zealand map which has an outer glow and a stroke applied as layer styles.

If you select a layer that has layer styles applied to it, you can navigate to Layer > Layer Style > Create Layers which will create separate layers for each of your layer styles. As you can see below, the map has been separated into its original later, the stroke layer and the outer glow.

You can now edit these layers on their own just like any other.

Batch Action Processing

Actions are a great way of automating a repetitive task but what if you need to apply the same action to many files? Sure, you can do them one by one but of course this is time consuming if you have to apply it to many files.

Luckily Photoshop can do this for you. Go to File > Automate > Batch… in Photoshop which will bring up the following dialog box.

Automate batch actions.

The best thing to do is to place all the images you want into a folder and then choose that folder as the source. You can then choose a destination and filename formatting.

Remember you can even use this as a simple operations such as saving a batch of files of one format into another.

Cutting Out Images with the Help of Calculations

Here is a quick tip for cutting out objects from images. If there is a decent amount of contrast between the object and the surrounding area or background then we can use a Photoshop feature called calculations to cut the object out very quickly.

This image will work well for this method.

View the channels panel to see the red, green and blue channels.

Channels panel

Calculations in Photoshop is a way of combining two different channels into one so now we need to work out which two together will give us the most black (plane) against white (the sky). We will then turn the end result into an alpha channel to create a selection.

To begin using calculations go to Image > Calculations… and you will see the following options.

Photoshop's calculations dialog box.

In this case, the green and blue channels combined together give the best result.

At this point a new channel will have been created. This is the alpha channel but it’s not perfect. We need to create the maximum contrast of black against white to create the perfect selection. We do this by changing the values of black and white using levels (keyboard shortcut: ctrl or cmd + L). The key is to remove as much grey as possible without destroying the outline of the object in the image. Also, use the brush tool in white to brush out the ground layer.

Once you’re happy, hold CTRL (CMD on Mac) and click on the alpha channel to make the selection. Head back into the layers panel and invert the selection (CTRL/CMD + Shift + I). Now apply this as a layer mask and you will only see the plane remaining.

Now we can move the plane onto a different image.

While this works well on a light background such as the blue sky, below you can see that it doesn’t work so well on a dark background.

There is a simple fix once again involving the levels tool but first, select the layer mask of the plane and apply Filter > Blur > Blur More twice. This creates varying levels of grey on the edge of the layer mask.

Blur the layer mask for greater control

With the layer mask still selected, use the levels tool to reduced the amount dark values which will contract the layer mask and hide the light outline.

It may need a bit of tweaking depending on the image but you saved a lot of time that would have been spent with the pen tool.

Layer Comps

Layer comps allow you to create different versions of the same layout in one Photoshop file, making it easier to manage multiple variations of page designs.

Layer comps panel.

When creating a new layer comp, you can save the visibility, positions and layer styles of all layers. This means that layer comps will only remember theses values. Make sure that they’re all always ticked or you will come across problems with multiple layer comps.

New layer comp options

The final tip that makes this even more useful is the ability to save out each layer comp to its own file. Go to File > Scripts > Layer Comps to Files… which will bring up the following dialog box to save each layer comp out whatever file type you choose.

Save all layer comps into their own files.

Two different versions of the same layout in one .psd file using layer comps.

Typography Keyboard Shortcuts

Let’s face it, dealing with text in Photoshop is not exactly a pleasant experience. Luckily there are some keyboard shortcuts to ease the pain a little.

• Double click the T icon in the layers panel to select all text in that layer.
• Commit text changes by pressing CTRL/CMD + Enter.
• With text selected, hide the selection colour with CTRL/CMD + H to see an accurate preview of the text. Great when working with colour.
• CTRL/CMD + Shift + Left or Right arrow key selects the whole next or previous word.
• CTRL/CMD + Shift + > to increase font-size by 2 points.
• CTRL/CMD + Shift + < to decrease font-size by 2 points.
• CTRL/CMD + Shift + ALT/Option + > to increase font-size by 10 points.
• CTRL/CMD + Shift + ALT/Option + < to decrease font-size by 10 points.
• CTRL/CMD + ALT/Option + Left or Right arrow keys to increase or decrease kerning between letter by 100.
• ALT/Option + Left or Right arrow keys to increase or decrease kerning between letter by 20.
• CTRL/CMD + ALT/Option + Up or Down arrow keys to move the baseline up or down by 10.
• ALT/Option + Up or Down arrow keys to move the baseline up or down by 2.
• CTRL/CMD + Shift + L, R or C keys to align the paragraph of text left, right or centre.

Smart Filters

Introduced in Photoshop CS3, smart filters give you great control when dealing with filters. All you have to do is select your desired layer and then Filter > Convert for Smart Filter. Start applying filters and you will see that they appear below the layer name in the layers panel.

Smart filters in action

Now you can reorder them and double click to edit. The best thing is this is a non-destructive way of applying filters as you can delete them and return to the layer’s original state.

These are just some examples of advanced Photoshop techniques. We’ll be looking at more in the future but make sure you seek out some of your own. If you do find any, post them in the comments to share with other readers of Inspect Element.

Create Shortcuts for Common Tasks

One of the most frequently and repetitively used feature of Photoshop are the layer styles. Rather bizarrely, there’s no keyboard combination for copying or pasting layer style to and from layers.

Another great example is cropping. Just about every other image editing software includes a keyboard shortcut for crop so why doesn’t Photoshop?! It’s a strange one for sure.

You can even go as far as creating a shortcut to invoke a filter. Creating shortcuts for specific functions can improve productivity if it is something you use multiple times a day so the point is that if it’s something you use a lot, and it doesn’t have a keyboard shortcut, create one.

BONUS: One problem creating new keyboard shortcuts is when using another machine that has the default configuration can be frustrating. Fortunately Bittbox have found a way to sync Photoshop settings between multiple computers. Very handy if you’re using different computers at home and at work.

Unfortunately this is a Mac OS X only feature. I had hoped that Safari 4 on Windows would support it but no luck. A quick search reveals that there doesn’t seem to be a plugin that can replicate this functionality in Firefox which is a shame. Hopefully someone out there is developing one, or planning to!