Probably every web designer has their own set ofTricks Photoshop favorites up their sleeves. For good reason. Adobe's powerful image editing tool is a staple of the world of web design. Very few programs out there can compete with this excellent software and its wide range of features.
However, while most web designers already know a lot about PhotoShop, there is always more you can learn. After all, the program is not only powerful but also complex. In addition, new things are added regularly through updates.
For this reason, it's a good idea to keep exploring your favorite tool. To help you do that, in this tutorial, we'll look at some of the best Photoshop tricks. Of the Tricks that can improve your workflow, make work and life easier, save time, and help you design the best sites possible.
Are you ready to learn more about Photoshop? This is what we will see in the following.
1 - Streamline your workspace
Let's start with the basics. The first thing to do to improve your workflow is to set up Photoshop in a way that is compatible with how you use it. After all, the job gets easier with a cleaner tool.
For this reason, our first stop is “Window > Workspace > Graphic and Web > Essentials”. Choosing this option will change the tools available for what you are most likely to use for web design.
Then go to "Edit> Preferences". Here one of the most important stops are the units and the rules. Whichever measurement you choose here (most likely pixels), this will be the default for all future documents.
(Quick hint: To change the rules for single documents, just right-click on it and choose the desired unit of measurement.)
Then go to "Preferences> Performance> History and Cache" and click on "Web / UI Design".
This will change the cache settings to favor smaller files with many layers, which you will work most often.
On the same location, you can also choose the number of historical states. This is the amount of steps you can go back to if you want to undo something.
2 - Learn the keyboard shortcuts
For any program you use regularly, learning keyboard shortcuts is usually a good thing to do.
For example, I use Ctrl + Alt + 2/3 to create the h2 and h3 headers when writing this post. It's much faster than using the toolbartools of the editor because I don't have to leave the keyboard.
The same goes for Photoshop. Knowing how to perform an action with single keys is infinitely faster than clicking on the menus.
We'll be mentioning a bunch of keyboard shortcuts throughout this article. However, I also recommend this cheat sheet for learning the shortcuts to the most common Photoshop operations. On top of that, it's also a good idea to get in the habit of looking at keyboard shortcuts for things you do over and over again.
3 - Group layers and name them
When working with Photoshop, you will work with layers. Not only have most elements on separate layers, but changes such as brightness / contrast are also added as a layer.
For this reason, everything can be confused very quickly. Fortunately, there are plenty of options to do less, two of which are the ability to group and name layers.
First of all, by double clicking on any layer, you can change its name to whatever you like.
This way, you will easily understand whether a layer contains the background image, menu, or sidebar.
Alternatively, you can also choose multiple layers at once, either by holding down the Ctrl key to select individual layers or Shift to mark a range of neighboring layers. Ctrl + G turns them into a group.
4 - Doing Layer Searches
Naming and grouping layers is a good start. However, by working with dozens or even hundreds of them, you can still easily get lost.
For these cases, you also have the option to filter your layers. To do this, simply use the menu at the top of the Layers menu to filter by type, name, effect, color and more.
Otherwise, right click on the layers and choose the group option from there. Either way, your layers are much more organized. In addition, you can also name the layer groups.
Otherwise, directly select a layer using the Move tool, holding “Ctrl” and clicking on a layer or an object.
5 - Create a grid
The grid is one of the most important principles in web design. It brings the order to design and helps you place your objects. For this reason, it just makes sense to create a grid in Photoshop.
To do this, use "View> New marker". Alternatively, create horizontal and vertical guides by holding a click on a ruler and dragging into the document. Use Ctrl to move existing lines.
6 - Import color samples
You can load color swatches directly into Photoshop from HTML, CSS, or SVG files. This way you have a great starting point for your color scheme when using existing files, like a logo.
To take advantage of this Photoshop hint, open the Swatches panel, click the drop-down menu on the upper right corner and choose " Load Swatches ". Now navigate to the file and open it to import your new color samples.
7 - Save custom shapes
In particular, when designing multiple pages for the same site or websites that have a similar design, you will end up using the same objects and shapes multiple times. For this reason, it makes sense to save them in a custom form for quick reuse.
To do this, right-click on the shape in question with the path selection tool (the black arrow). Then choose Define the custom shape ". Once you've done that, you can access that shape through the options on the top bar of the Custom Shape tool. Just click on the drop-down menu where it says " Form And choose your saved form.
8 - Switch between the background and the foreground colors
To toggle the background color and foreground color without clicking the icon, simply press "X" on your keyboard. Also, if you want the colors to revert back to plain black and white, you can do so by pressing "D".
9 - Change the opacity via the keyboard
Another keyboard shortcut: for any tool that can change the opacity, you can just do it through the keyboard. The numbers 1 to 0 will set the opacity on everything between 10% and 100%. The same also works with the opacity of the layers.
10 - Draw straight lines
To draw a straight line with any tool, just hold down the Shift key. Then you can draw a line (Horizontal and vertical) which will automatically be linked as a nail. Otherwise, click on two different points to create a straight line between them.
That's all for these Photoshop tips, I hope it will help you better design on photoshop.
