Photoshop tips tricks

As a web designer, you probably have your own set of Photoshop tricks that you use on a regular basis. This is true for all designers as the powerful capabilities offered by Adobe’s Photoshop software are unique.

Over the years, there have been many image editing tools that came to market with a goal to compete with Photoshop but so far none of them have succeeded to offer serious competition to Photoshop due to it’s vast array of features.

If you have been using Photoshop for a while then you will realize that nobody can really master Photoshop. It’s because of the sheer possibilities that Photoshop offers. You can learn basic Photoshop skills in a couple of months but what you can create with the software is limitless. Every day we see some designer posting an artwork he/she created in Photoshop which makes us wonder how it can be done in Photoshop.

The more you explore the software the more you discover it’s capabilities. So, in this post, we showcase some of the best Photoshop tricks that you can try. These tricks revolve around things that can save precious time, make complex tasks simpler, improve your workflow and help you become a better designer.

Photoshop Tricks for Web Designers

1. Organize Your Workspace

First things first, the very first step you can take to improve your workflow is to clean up and organize your workspace. You will be surprised with the difference it makes to your daily work once the workspace is streamlined.

Go to Window -> Workspace -> Graphic and Web. By selecting this option, Photoshop will rearrange and only display the tools that are needed for web design.

Then go to Edit -> Preferences. Navigate to Units & Rulers and choose your measurement unit (For ex: pixels). Once you do this, the unit will the be default for all future documents. You can always change the measurement unit for individual documents later on if you want.

The next setting is Preferences -> Performance -> History & Cache. Select Web / UI Design.

set up photoshop work-space
What this does is that it modifies the cache setting to favor smaller files with lots of layers.

If you want you can also set the number of history states. It basically means the number of steps you can revert back if you want to undo.

Once you are done with all these steps then exit the preferences. Press the T button on your keyboard to enable the font menu. Here you can set the preferred font which will be used for all new documents.

2. Group and Name Layers

In Photoshop, everything is centered around layers. It’s quite possible that in single documents, you might have hundreds of layers. Apart from the layers for individual elements, setting changes like contrast adjustment also get added as layer masks. Even for a Pro Photoshop user, it can get really confusing to deal with so many layers. Luckily, Photoshop offers a solution to this problem by allowing you to group and name layers.

Renaming a layer is as simple as double clicking on it and then changing the name.

photoshop tricks rename layers

Do this for one document and you will see the huge difference it makes when you are editing it in future. If you sell your design then your future clients can also understand your layered PSD file by reading the names of layers.

To group some layers, simply Ctrl+Click on the individual layers to select them. Ctrl+G then turns them into a group. You can then assign a meaningful name to the group.

3. Filter Layers

Sometimes a Photoshop document will have many layers and even naming & grouping layers is not enough. In such cases, you can make use of ‘Filter’ option to filter the layers by type, color, name, effect etc. The ‘Filter’ drop down is at the top of Layers menu.

filter layers in photoshop

Alternatively, you can also make use of the Move tool. Then press Ctrl + Click on a layer or object.

4. Import Color Swatches

Did you know that you can import your own color swatches into Photoshop? You just need to have your swatches ready in a HTML, CSS or SVG file. Go to Swatches panel. Navigate to the drop-down menu and select Load Swatches. Next step is open your file. In this way, you will have your color scheme loaded up and ready to use. This is extremely useful when working with existing design assets such as a logo.

5. Make use of Grid


photoshop grid

Image by

Grid is one of the key elements in web design. Grid defines the layout and acts as a placeholder for other objects. As a web designer, it’s essential for you to make use of Grid in Photoshop too.

This can be done by selecting View > New Guide Layout. Or, you may create horizontal and vertical guides by simply clicking & dragging a ruler.

6. Save Custom Shapes

This is especially applicable in web design where you have many web page with similar design using same shapes & objects. In Photoshop, you have the ability to save them as custom shapes for quick reuse later on.

To do this, just right click on shape with the path selection tool (the black arrow). Then, select the option Define Custom Shape. After doing this, the new custom shape becomes available via top bar options of the Custom Shape tool. Just navigate to the drop-down menu under Shape: and pick your saved custom shape.

photoshop tricks save custom shapes

7. Change Opacity via Keyboard

Another cool keyboard shortcut: The numbers 1 to 0 will set opacity to anything between 10% and 100%. It also applies to opacity of layers.

8. Swap Between Background and Foreground Colors

You may easily swap between background and foreground colors by simply pressing X on your keyboard. Also, if you prefer a black and white scheme, then simply press D.

9. Draw Straight Lines

In order to draw a straight line with any tool, just press the Shift key. Next, you can draw a horizontal or vertical line that will automatically be straight. Or, simply click on two different points to create a straight line between them.

10. Sample Color using Shortcut

The color picker tool is a pretty handy tool but it can get a bit tricky at times to pick a color from an object with different hue saturation levels. Fortunately, there is a workaround to this issue. If you need a specific color from an object with varying hue saturation levels, press the Alt button and simply click on the hue you desire. This trick works with all coloring tools like Pencil, Brush and Paint Bucket.

11. Add to or Remove From Selection

You can add to an existing selection by pressing Shift and selecting the part you want to be added. To subtract, do the same process but with the Alt button.

12. Dynamically Change Your Brush Size

Usually to change your brush size, you would have to navigate to the drop-down menu and drag it to the right size. But you can do it on the go by simply holding Alt & the right mouse button and then dragging left and right to decrease and increase the size of your brush.

13. Undo More Than One Step

Remember the History State setting we did earlier? By virtue of that setting, you can now undo several steps by using Ctrl+Alt+Z.

14. Save for Web

The Save for Web function basically ensures that the image size is as small as possible. It’s a very important setting because it directly impacts the site speed.

Navigate to File -> Export -> Save for Web.

15. Copy CSS Directly Out of Photoshop

This is the most useful feature that Photoshop offers web designers. You can easily export CSS which  the program creates. No more experimentation needed to see what works, simply export the ready-made CSS and your job is done.

You can export the CSS by right clicking a layer and choosing Copy CSS option. Bam, now you have all the necessary styles you need that you can copy into your stylesheet.