30 Clean and Bright Website Designs
30 Vibrant Examples of Spring Photography
20 Amazing Examples of Vector ArtworkHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
20 Crucial Photoshop Features All Web Designers Should Know
As web designers it can be easy to fall into a rut or a comfort zone in our daily Photoshop work. Today’s article highlights 20 features that are crucial to an effective design workflow in Photoshop. Are you using all of them in your work?
Sometimes, it’s better to stick to the basics. More often than not, web designers go for flash over substance. While it’s true that people are attracted to bright visuals more than bland text, it doesn’t give designers the license to go for overkill. Using the tools available to you can help understanding the fundamentals of web designing.
Adobe Photoshop is one of the best software for web design, but its potential has not been tapped completely by the designers. With this in mind, here are the 20 most overlooked features of Photoshop for web designers.
Start with Sketching
Before you start using Photoshop for a project, take some time to sketch out the design you plan to create. It gives you a solid idea of what you are looking for. Then, scan the sketches and translate them on to Photoshop. Designing becomes that much easier when you have a blueprint in front of you.
Helpful Resources:
Use Grids
Using grids helps you align and place your sketches perfectly. Often, web designers don’t use grids, looking to use the fancy features to come up with a quick design. There are grids available on Photoshop in various sizes and dimensions. You can select one according to your requirements.
Helpful Resources:
Tips on Using the Grid in Photoshop
How to Setup a Layout Grid in Photoshop
How to Create a Grid Quickly with Photoshop
Snap, Snap
Snaps work very well with grids. They increase the scale of your design, providing easier viewing. You can see your work in a larger size, decreasing the strain on your eyes. As a web designer, sitting in front of the computer is your bread and butter but that doesn’t mean you should ruin your eyesight. By turning the Snapping feature on, you ensure your design is accurate.
Helpful Resources:
Organize Your Files
Organizing your PSD files on Photoshop isn’t even a feature in the true sense of the word. It is the most basic of functions, yet most designers feel they are too cool for school. They don’t want to spend their ‘precious’ time organizing their files. God help any designer who has to take over the project from them!
Helpful Resources:
Keeping Photoshop Files Organized
How to Effectively Organize Your Photoshop Layers
How to Organize Your Photos in CS5
Take Shortcuts
If you feel you are wasting your time organizing your files, using the shortcuts available on Photoshop will enable you to save some. Like all computer programs and software, Adobe has provided a number of shortcuts for users on Photoshop. It is a simple matter of finding them out and using the ones you need.
Helpful Resources:
Create Versions
You don’t have to stick to just one design when you are working on Photoshop. You can create multiple versions of the layout you are designing by using the Layer Comps feature. Photoshop has a feature called Smart Objects which will help you keep all the layouts in one place. That way you don’t have to worry about organizing or losing anything.
Helpful Resources:
Create Versions in Photoshop Elements 10 Organizer
Mask Your Folders
‘Masks’ has to be one of the most inconvenient features of Photoshop for a web designer. Yet, you can make it work for you by creating folders in which you save all your files. For instance, you can organize the files and images related to one project and place them in a folder, putting a mask on it. This way, you avoid the hassle of placing a mask on each layer while also getting to know the purpose of each mask.
Helpful Resources:
Clipping Mask to a Layer Group
How to Mask Groups in Photoshop
Creating Mask over Multiple Layers
Speed Photoshop Up
This is a goldmine for any web designer. No longer would you have to wait for Photoshop to respond to your action or command. Waiting for an image or file to load is frustrating. You can take care of that once and for all by speeding up Photoshop. You only have to change a couple of settings:
• Change the save option for Image Previews to ‘Never Save’
• Set the Cache Levels to 1
That’s it! You just made Photoshop faster for you.
Helpful Resources:
2 Settings to Speed up Photoshop
9 Tips to Speed up Processing Time
Add ‘Subtle Patterns’
Subtle Patterns is available outside Photoshop but you have the option to download the files and import them to Photoshop. It is a collection of patterns and textures which you can add to the background of your designs, albeit ‘subtly’. There are virtually endless combinations you can create and use.
Helpful Resources:
70 Subtle Patterns for Minimal Design
Learn to Use the ‘Pen’
Using the ‘pen’ on Photoshop is akin to learning to write. Web designers in general don’t feel the need to add anything to their existing designs. This is why they avoid making the effort to learn using the ‘pen’. However inconvenient the learning process might prove to be, the ‘pen’ can prove to be very useful in the long run.
Helpful Resources:
Basics of Photoshop Drawing and Layouts
Check Color Accuracy
Oftentimes designers have to use the same color several times in a layout or template. To the naked eye, the intensity and shade of the color may appear consistent but you can be mistaken. That is why you should check the color accuracy to ensure the same color has been used.
Helpful Resources:
Accurate Color Correction Made Easy
Customize Photoshop’s Settings
Again, this might not be a Photoshop feature but is one thing web designers should be familiar with. You should customize the settings according to your needs. While it is convenient to go with the default settings but they are for elementary users. If you wish to use Photoshop professionally, change the settings.
Helpful Resources:
How to Reset Photoshop Settings
Expand Your History
A great reason for changing the default settings is the History States. The History States is set to 20, which means you can only view the previous 20 steps you have performed. For complex designs, you might need to go back 30 or even 50 steps, which is only possible if you change the settings on the History feature to expand it.
Helpful Resources:
Remove the Blur
If you don’t know how to do this, you need a basic Photoshop tutorial. One of the best features of Photoshop is that you can remove the blur from any image. This is particularly helpful if you have received an image from an external source and it isn’t of the quality you desire. You can simply sharpen it up a little using High Pass.
Helpful Resources:
Select the Font You Want
There are a number of plug-ins and font solutions you can add to your Photoshop. That enables you to select from a wide range of fonts and use the one you feel suits your design the best. Focusing on the design doesn’t mean you should overlook the font to use.
Helpful Resources:
Vector-ize
How many times have you gone back to change the design and found that the original shape is no longer there? It is a common headache faced by designers. You have to then make some changes to the design to get the shape you are looking for. The solution to that is using Vector Smart Objects. It will retain the shapes of every part of your design.
Helpful Resources:
Go ‘Pixel Perfect’
Photoshop is a complete all-round tool for web designers. Once you have completed your work, it wouldn’t hurt to spend some time checking for any errors or oversights. With all the features and tools, you can easily clear any blurry edges, shadows or consistency issues.
Helpful Resources:
How to Draw Hand Crafted Pixel Art in Photoshop
Be the Boss
Not exactly a feature per se, but you will find that Photoshop becomes easier to use once you have modified it sufficiently. Change the layout and settings of the interface to suit your needs. It will make you feel more at home using the software.
Color Up!
There is an active community by the name of ‘Kuler’ which provides you the answer to any questions you have regarding color themes and how to use colors in Photoshop. An extension is available through Photoshop to access it!
Helpful Resources:
Customize Photoshop
With endless features and tools, you can customize Photoshop settings to suit your needs. Remove any features you don’t need and add plug-ins and extensions you have use for. Make Photoshop your one-stop solution and provide great designs to your clients.
Helpful Resources:
A word of warning for web designers: be selective. With so many features, you might be tempted to use all but you have to restrict yourself to only the ones you actually need to use.
About the Author:
Jay Adrianna is a Freelance Writer, and has been since 2009. She is also a WordPress enthusiast and an Internet Marketer. She loves writing on a myriad of niches including freelancing, blogging, marketing, business, and many more.
4 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
This is wonderful! This is something, I would say, for everyone who has learned the basics and is ready to move on to learning what all of those ‘greyed-out’ features do!
For lack of participating in any formal PS education, many of us go at learning PS in such a hap-hazard way, it’s amazing we have learned a thing! Lack of time and/or resources decide how much ‘formal’ I can do. Something like this kind of organizes what one needs to learn, then, goes one further and gives links. Fantastic!
Thank you!
Su
Thanks Su! There are a lot of basic features here that are often over looked. I learn PS in quite a hap hazard way myself, mainly through trial and error. I wish I’d had more of a comprehensive guide or course to follow.
Wow! This is so useful! I’ll be checking out the links you share here, especially the pen tool…Thank you so much for sharing all this!
This Photoshop grid generator is quite useful for making layout designs
https://www.photoshopsupply.com/brushes/grid-photoshop