Tools, Tips and Tricks in Photoshop

Being a web designer, the first thing I open up on my computer is Photoshop. There are so many tools, effects and filters you can use on Photoshop that it is an indispensable tool. I do not use them all as they are not all relevant for what I need to do for my day to day tasks designing websites within Photoshop. So today I am going to talk about just a few of the tools that I find myself constantly using within my line of work.

Text / Character Tool

The text tool is a great tool for adding text into your Photoshop pages. There are a lot of default type fonts in Photoshop, but it is very important that you get the correct typeface to fit within the design, especially if having to match it with a logo font or existing branding, then having the wrong typeface on a website can make all the difference.

With the text tool you also have the character tool with more options to customise your text, such as making it all underlined, all capitals etc. Also you can control the space between each letter, as well as the line spacing, fonts and font weights.

Tips: 

1. Always create a text box, do not just click the text icon onto your page, but drag and make a text box to write in. This allows you have to full customisation of how long you want the text to go across the page.
2. If your are typing a lot of text in Photoshop type it up in a text document first so can check for spelling mistakes before copying it over into Photoshop as it does not have a spell checker on it.

Move Tool

The move tool is something that designers at WDL are constantly doing. You are always hearing us hitting the up down arrows on the keyboard so we get a 10 pixel nudge until we are happy with the space between areas or the position of an item. To do this you hold down shift and use your up and down arrows, which provide a 10 pixel gap each time you hit the arrow key. This makes a big difference from having a well spaced out design to not enough.

Rectangle Tool

With websites as they are viewed on rectangle shaped devices, it makes sense that the site has a rectangle feel to it, so the rectangle tool and I have become good friends. To give a rectangle shape that little more definition we use the layer styles and use a stroke, colour overlay, or there are also shadow options on there as well, but it is easier to edit the stroke colours and colour overlay by adding the layer style to it, then using the default option with the rectangle tool.

 Eye Dropper Tool

The eye dropper tool is brilliant to keep your hex code consistent throughout the site, or finding out the colour of a specific area within the design. It is also good when you are using a logo and to eye drop the logo so you can use variations of the logo colour throughout the site so everything is consistent with the brand.

Tip:  If you put your caps lock on when using the eye dropper your eye dropper changes to a more specific target icon so you can really specify the exact colour you are wanting.

Magnify Tool

The magnify tool is a great tool to zoom in on an area or zoom out to make sure it is all looking ok. Do not strain your eyes looking at the screen trying to see if areas are aligned, zoom in make sure it is perfect then zoom back out. Make sure you always view your work at 100% when checking and turn off any guides to ensure you see it as your users will.

Rulers / Guides

The first thing I do when load Photoshop is turn my rulers on as it is easy to put out guides, as you can just click and drag on the ruler and will produce a blue guide for you. This is to help to make sure all your areas will be aligned within the design, and can use them when you start to get your column grid set up.

This only covers the basics, but if you’ve got any favourite tips and tricks to using tools in Photoshop, let us know!