ShareThe first part of this series, written quite a while ago now, covered a couple of utilities that I still use today – an image resizer and program for taking screenshots. I’ll cover re-sizing again here, plus a few other tips, tricks, and tools that I have since added to my go-to list of best practice design techniques.
#1 Re-sizing images
As computers get quicker, the images supplied by our clients get bigger. Quite often we receive (very gratefully, I should add) a WeTransfer link to a job lot of super high-quality 20 megapixel+ photos. As soon as you add a few of these full-size images to your design, your design file will start to slow down, taking longer to load, pan around the screen, and – if for some reason you’re still designing websites in Photoshop – the program will eventually crash. If your machine is running slowly, it could be that it’s out of RAM and if that’s the case, Photoshop and those unnecessarily large photos are probably to blame. This would happen to me when trying to put together multiple social ads in Photoshop using a different image for each ad.
The solution here is to keep a copy of the original images and do a batch resize of the whole folder. Reducing the dimensions to half the height and width will reduce memory requirements by four times, greatly speeding things up.
There are several batch resizers for Mac and Windows. I use Light Image Resizer (formally VSO Image Resizer) on Windows. I’m quite impatient and a bit lazy, so like all utilities and add-ons I use, it’s very quick and efficient to use once set up.
#2 Allow clients and colleagues to create images themselves
Giving clients the power to tailor their own images for their site is a great thing. It means they can do that small job themselves without having to ask you to do it each time, creating a bit of goodwill and hopefully speeding up the process along the way too! Ideally, the site you build for them will re-size and crop images automatically, but that’s not always possible and there can often be a requirement for an especially wide image in one part of the site that needs the human touch to get the subject of the shot in just the right position. And of course, as images constitute the majority of a web page’s page size, using the correct image size will also greatly reduce the loading speeds, thus boosting your PageRank score.
For these situations, we recommend online photo editors like Pixlr or Photopea. They both have all the power of Photoshop for basic image tweaking, but without the expense.
#3 Keep a copy of utilities
Utilities come and go, and I learnt a few years ago to download and keep copies of my favourite ones. One I still use today isn’t available online anymore but luckily, I downloaded and saved it 18 years ago!
#4 Keep a record of app settings
In a similar way to the backup of apps, I keep logs of tips, program settings and keyboard shortcuts which come in handy when refreshing or upgrading to another PC. (If you were wondering, I’m exactly as much fun in real life as my backups of PC utilities and programs settings would suggest!)
#5 A bonus Photoshop shortcut
I have an extra Photoshop keyboard shortcut to add to the twelve we published in 2019. This one will allow you to align horizontal centres with ease.
Why is a centering shortcut important? In the grand scheme of things, it of course isn’t, but it will allow you to do the job without having to select the Move tool first and then click on Centre in the options, and subsequently continue working while forgetting that you’re still using the sub-par Move tool and not the Marquee tool, thus messing up every selection and element move you do until you come off the Move tool. Am I right or am I right?
Go to Edit > Keyboard Shortcuts, and in the Application Menu Command tab, go to Layer > Align > Align horizontal centres. I assigned the F4 key to this.
Because it’s Photoshop, you still have to select the background layer as well as the layer you want to centre, but then regardless of which tool you are using, it’s just F4 (or your own assigned shortcut) and you’re done.
And yes, I got that shortcut note from the ‘Program Settings’ folder. 😊
If you’d like help when it comes to graphic design for the web, speak to a member of our team today!
Neither the author nor Coast Digital is affiliated with any of the programs mentioned above – they have been chosen purely on merit.
