Believe it or not, if you’re using Photoshop to design website, you’re on the right path to become a successful web designer. This is simply because Photoshop is one of the most advanced tool in the design industry that can make your creative imagination comes true with its plethora of professional tools which boost your productivity at the same time.

But how well do you know about Photoshop? Sometimes we’re wondering why certain web designer can design a website layout with extremely heavy graphics in 5 days, while we need around 10 days to complete that kind of design. It’s probably not about how fast you can click, it’s about how well you know about Photoshop, how you gonna unlock its full potential to boost your productivity.

We want you to know how to unlock its full potential. Yes, that’s why we created this post, to provide you 10 extremely useful Photoshop tips to boost your design speed. There can be shortcut, feature or setting you don’t know about, but not anymore. With this article you gonna learn them all, and you will design faster, and faster.

Note: Shortcut keys mentioned in this article are in Windows Photoshop format. If you are using Mac, be sure to know that Ctrl = Cmd (Command) and Alt = Opt (Option).

10. Undo, More Undo Please

I totally believe that we designer are very addictive to undo something, even until when we made a mistake on sketching, we tend to ‘undo’ it.

Well as you might know by pressing Ctrl + Z in Photoshop you can undo the previous action you made, but when you press the same key combination again, it will redo the previous action. This is quite unnatural and troublesome as you always need to undo multiple times to get to the state you want.

Believe it or not, Photoshop has a specific button for multiple undo, and it is Alt + Ctrl + Z. Yes, by using this key combination you can undo multiple times, according to the value of History States you set in Edit > Preference > Performance.

If you’re used to common Undo’s key combination which is Ctrl + Z, you can simply press Ctrl + Shift + Alt + K to access Keyboard Shortcut panel and change Undo’s key combination under the Edit section to Ctrl + Z.

9. Sampling Color, anywhere!

Stumbled upon a nicely designed website and wondering which exact colors is it using? This happens very often when I’m seeking inspiration during the time I’m doing site layout in Photoshop. For me I will launch a color picker, pick the color and get its hex number, then click on the color palette in Photoshop, then input the hex number then get the color, pretty annoying isn’t it?

Well you don’t really need to suffer like that, you can actually just click on Eyedropper tool or pressing I to activate it, then drag the Eyedropper icon to anywhere on the monitor screen to get the color you want. Yeah, it’s really that easy.

8. Flexible Guide

Tip #8 is actually combination of 2 tips, I hope you don’t mind about getting more tips. As web designer we have to deal a lot with guide to position an element correctly, in other words is pixel perfect.

How do you create a guide? Click on View, New Guide then decide it’s horizontal or vertical guide, input its position and click Enter? Alright, you can save these works by just pressing Ctrl + R to activate the Ruler tool, click on the tool and drag it down to create a horizontal guide, or vice versa.

Besides instant guide creation, here’s another useful tip for you. While dragging a guide with Move tool which can be activated using V key, press and hold Alt key to change the horizontal guide to vertical guide, or vice versa. Now you can probably consider yourself as professional on using guide.

7. Fun Layer Style Cloning

Layer styles are very entertaining when you can just apply them to make, let’s say, a social media icon looks pretty charming and unique, but it will be very tiring if you want to apply same layer styles to all social media icons which usually come in multiple pieces.

Have you ever realized that there’s an fx icon beside your layer? Well everything exists for a reason, if you press Alt and drag the fx icon to another layer, it will copy first layer’s styles to the one you dragged to, convenient isn’t it?

Also if you are interested about the common use of that fx icon, it allows you to move a layer’s styles to another and all you need to do is simply drag the icon to another layer without pressing Alt key.

6. Element Centering Made Easy

In order to achieve a pixel perfect design, we oftenly have to position element to exactly where it should be. This seems easy as you can just create some guides and snap the element to those guides, but it will be daunting if you want to absolute center an element in certain area, which requires a lot of guides, measurement and focus.

In fact you have a way to make this entire process a lot more easier, click on the element’s layer which you want to absolute center, then press Ctrl + A to select the entire document. After that, fire the Move tool and you will see some icons beside the option, Show Transform Controls. Click on the 2nd icon to vertical center the element, then click on 5th icon to horizontal center the element, there you go, an absolute centered element.

You can not only absolute center the element in entire document’s area, but also absolute center it in certain area. Let’s say I want to absolute center an element in footer area, I can simply select the footer area by using the Selection tool which can be activated by pressing M key, then absolute center the element in that specific area.

You can study other alignment options beside the Show Transform Controls option, they are very useful for aligning your elements in a wide range of situations.

5. View Selection, One At A Time

Often in designing a layout you need to check how an element looks exactly by its own or by few elements, for example in website layout below, I want to check slider’s buttons to confirm that they do not have transparency so they look exactly the same with or without slider’s image.

In past I have to turn off the visibility of slider image’s layer, slider background’s layer and even content’s background layer, but now I can just simply hold down the Alt key, then click on the ‘eye’ icon beside the button group to turn off all layers’ visibility so that I only view those buttons. After I checked them, I can just repeat the trick again to bring all layers’ visbilibity back.

This trick is also extremely useful while it comes to image slicing. You want to slice slider’s button without any other element like slider image, so you can use this trick to turn off all layer’s visibility to just slice the button, then repeat the trick to recover all layer’s visibility so it saves a lot of time wasted on turn on and off layers’ visibility.

4. Customize Font’s Tracking, Anytime

This particular tip shows you how to increase the font’s tracking in certain part of the type easily, so it might only be used on certain specific situation like logo or button creation, but it’s a professional tip that can save lots of time on finding fonts with suitable typography for your logo or button creation.

Alright, let’s say I want to decrease the tracking of the type, ’360′ so my logo’s type looks unique that visitor remembers it easier. I can select ‘POLO360′ by using Type tool which can be activated by pressing T key, then hold down the Alt and press < button to start decreasing the type’s tracking, which will bring the result above.

You can use this trick to tackle tracking issue of some artistic fonts, so there’s no worries about tracking next time you want to find graphical fonts for your logo creation!

3. Instant Layer Selection = Win

Layout design is an exhausting job as we have to tackle lots of issues such as typography, spacing and graphic, but it will be overwhelming if we want to find a specific element’s layer from hundreds of layers.

Let this trick makes your designer’s life easier. Activate the Move tool using V key and hold down the Ctrl key, then click on the element and you will automatically select the element’s layer. It’s really that simple but keep in mind that if you put elements into a group, then by using the same trick you will be selecting the group’s folder that contains the element you clicked, as shown above.

2. Smart Object For Smart Designer

Just as its name, Smart Object makes your editing smarter by carrying out 2 primary functions: perform nondestructive transforms and perform filtering. This feature comes in very handy especially when you’re producing a site layout with heavy graphics like stock photos, social media icons and UI kits, and all you need to do is right click a layer, then click ‘Convert to Smart Object’ to enjoy its benefits.

The first function says that once a layer is converted into a Smart Object, you can transform it anyway you want without losing its original quality. In our case we want to make the image slider smaller so we convert image slider’s layers to Smart Object and transformed it into something smaller.

Ouch, it’s just too small so I decided to change it back.

Looks like everything’s okay and nothing happened right? Below is the result if you applied a backward transformation without converting layer to Smart Object.

So you can probably see the difference here, especially slider’s buttons part. The backward transformation without Smart Object applied on layers makes the slider and slider’s buttons lose their quality. So by converting a layer to Smart Object, you can transform it to any smaller size you want but once you regretted about your decision, you can change it back without losing quality.

Another benefit by converting layer into Smart Object is once you applied filter on a Smart Object, a filter’s layer will appear under the Smart Object’s layer so you can disable filter easier by just turn off the visibility of the filter’s layer, and that’s called nondestructive filtering, great time saver for your project.

1. A Snapshot Of Beautiful Past

Now you learned how to undo multiple times, copy layer styles, faster layer selection and using Smart object these great time saving tips. Well, these are really handy skills that greatly boosts your productivity but how about after 2 hour’s work, you regretted your editing and decided to start from the middle? Redo it completely will be very exhausting and boring even you applied all killer tips you learned before, so that’s when Snapshot kicks in.

Snapshot allows you to create a temporary copy of any state of your editing so when you have trouble on improving your design and decided to go back, you can simply click on a snapshot to bring you back to the state you desired. To take a snapshot, you just have to open History palette, and click on the 2nd icon you see on the bottom of the palette.

There are also some useful features for snapshot like you can take multiple snapshots so you have more choices and you can name them so you remember them easier. Ultimately you can also use these snapshots to compare different effects you created for your design.

However, be sure to remember that once you closed the document, snapshots will be deleted instantly so if you want to keep those states, you can click on each snapshot and save the document as another file.

Reflection

You’ve come to the end of the article, great job. By this time you should got enough time-saving killer tips to boost your design speed, but always remember that learning is the best way for you to know more about your Photoshop, thus increasing your productivity. So keep learning more, and you will become a more competitive web designer of all time.

Well we’ve shared our best, how about you? If you don’t mind, please share your Photoshop killer tips to let us know the better way to use Photoshop, thanks for your generosity!

2011 is like the year of renaissance for the web. Each month, there are more and more great web applications released – on the web, Mac, Windows, Android, you name it! This is probably good as you got more tools and choices, but with hundreds and hundreds new apps released, it will be pretty hard for you to get the really good one to use.

To save your time wondering in the sea of new applications, we’ve put together a list of some new quality apps that came out recently, such as Lubith that generates WordPress theme without involving code, or BufferApp that lets you manage your Twitter efficiently, and even generator that produces privacy policy’s content for your website.

So, without further ado, let’s check out these 20 quality web apps we hand-picked for you this month. Full list after jump!

Fyels

Fyels claims to be the world’s easiest file sharing system. Just drag and drop the file you want to upload, and as long as you are well with 2GB limit, everything is great.

BufferApp

Buffer is an extremely handy tool for those who want to build a Twitter following, or who just don’t want to overwhelm their followers with too much information at one time. Basically, you just add all your tweets to your buffer and they get sent out at predetermined times. Very handy.

CSS3 Generator

This CSS3 generator is really handy whenever you need to knock something up quickly, or just want to look at an example of what code does. It got a bunch of different functions, and you can’t beat the price either.

Tweepi

Tweepi is a great tool, currently free, that lets you manage your Twitter account very easily. You can easily follow or unfollow all sorts of people, based on all sorts of different requirements you set.

Simplenote

Simplenote is an incredibly helpful tool that syncs across pretty much any platform you can think of. As well as a beautiful, minimal web app, it can sync with iOS, Android, WebOS, Mac, Windows or even inside your browser.

TeamLab

Teamlab is a free portal for your team. You can manage projects, collaborate with your teams, edit documents and more. And it’s free.

Coolendar

Coolendar claims to be a whole new planning experience. It turns your planning into simple, pretty lists that let you remember what you need to remember, when you need to remember it. You can organise it with tags, talk to it through Google Talk or email, and more.

Memolane

Memolane creates a timeline of your life. You can import you social feeds from Twitter, Facebook, Instagram, Flickr and a number of other services, and share this data with whomever you see fit. It’s also very beautiful.

Meetin.gs

Meetin.gs is a new approach to organize meetings online. It lets you create agendas, share notes and materials, and integrates with a number of different web services. That means people actually know what is going on when they go to meetings.

ResizeMyBrowser

ResizeMyBrowser is a handy tool for resizing your browser window, so you can easily discover how that site or app you are working on will look on any device. It comes with a bunch of handy presets so you don’t have to remember all those different screen resolutions either.

Nirvana

Nirvana is a GTD (Getting Things Done) app for the web. It’s like all other GTD apps you might know, except online, and very beautiful. It’s currently in beta, but you can sign up for an invite. Worth a look.

PrivacyPolicyGenerator

As the name suggests, Privacy Policy Generator generates a privacy policy for your site or app based on the criteria you determine. It’s not something we think of often, but many websites really need them.

Timetrack

Timetrack lets you do invoicing and manage timesheets online, and looks gorgeous in the process. Really handy for small businesses, and an alternative to things like Harvest. Worth a look.

Lubith

Lubith is a WordPress theme generator for people who don’t know or don’t want to create their own. You can drag and drop your way around the interface, and save the final product you use on your own site, all from your web browser.

Apollo

Apollo is a Basecamp alternative that integrates project management and CRM (Customer Relationship Management) into one central location. You can also manage a range of different tasks from within the app.

Jux

Jux lets you bring together a bunch of different pieces to make your own, personal website in no time. Similar to About.me.

Flow

Flow is task management for teams. It works anywhere with anyone so you have things organised in a jiffy. They also have an iPhone and Mac app if that’s what you’re in to.

Flipsnack

Flipsnack turns your PDFs into books that you can embed on any site, and you can flip through like you were reading on an iPad. An interesting way to display a range of different things.

LaunchList

LaunchList helps you keep track of all those little tasks you need to ensure to take care of before you launch any new site – something anyone who has ever launched a site will be very familiar with.

Pen.io

Pen.io is an extremely simple tool for those times you’ve got an idea in your head that you want to share, and it’s nicely formatted too. It’s kind hard to explain, so check out this example.

That’s all for May, Stay Tuned!

This is going to be a monthly feature from now on, so if you have any great app you’d like to add to the list, here’s what you can do:

• Leave a comment below,
• Send a tweet to @hongkiat with hashtag #hkwebapp, or
• Submit us via our tip submission form.

That’s all for this month, but we’d love to hear your suggestions for next month’s list, as well as your comments on apps we’ve featured this month.

Be sure to subscribe to our RSS feed to keep up with all the latest and greatest web apps, and all the other great content we offer.