Images are a core element of web design, whether they exist to showcase a product or to create a mood, you would be hard pressed to find a website without a single image.
Adobe Photoshop has been at the core of working with raster graphics since the mid-90s and has naturally gone hand in hand with creating web experiences.
In this article I plan to go over a few of my most common day to day tasks in photoshop and how they work with my process.
Resizing and cropping images
Even though a lot of optimization services offer image compression and reduction post-upload, it is still best practice to ensure the images that you’re serving aren’t taking up an atrocious amount of storage on your server. I use photoshop to resize/crop and then export images because it lets me see the estimated file size of my format and compression choices before they go on the server. To pull up the best export options we click File > Export > Export as, and on older versions of Photoshop “Export for web”
For bulk cropping and optimization tasks where I need to convert more than 10 or so images I use: FastStone Photo Resizer.
Creating transparency for effect
With WebP, images with transparency are now a lot less expensive in terms of load time than PNGs. This allows us to implement images with alpha values more easily. Rather than have all our images in blocks, using photoshop to create transparency behind subjects can allow us to create a more engaging web page where images fit seamlessly alongside text.
There is a wealth of tools available in photoshop for creating transparency for different tasks, with the polygonal lasso being the most accurate, but most time consuming. We can also use the magic wand, quick select tool and then the “select and mask option” to refine the edges. Later versions of photoshop also have a “select subject” tool that uses AI to predict the foreground object that you want to isolate.
Ensuring Uniformity
If we were creating a large section of logos to be placed in a grid to illustrate a selection of clients or technologies, then ensuring the logos were all placed on a canvas of an identical size would greatly help us. Even though you will never get a perfectly uniform result when creating a logo grid in terms of width/height, this can be a good foundation before tweaking the rest in CSS.