Photoshop for Web Design 101, Part 1: Introduction

People and companies that have their own websites used to be part of an exclusive club. In the relatively early days of the internet – let’s say the late ‘90s or early 2000s, so pretty much when the internet was in puberty – it wasn’t even commonplace for every company to have its own website, let alone a presence on yet-to-be-discovered social media.

It’s clear that that is no longer the case today. Not only does the small corner store at the end of your block likely have its own website, Yelp profile and Facebook fan page, but for all you know its owner and their cat could have their own blog or Tumblr that garners thousands of monthly visits.

Becoming “Internet famous” in this day and age is easier than ever. As a result, there are a bevy of programs out there that people can use to design their own websites without needing the technical know-how or HTML literacy that developers of the past once required. For free or for a small fee, people can sign up for WordPress or SquareSpace accounts that offer them templates that are easy to modify, giving them clean, professional looking website layouts that can go live quickly.

While taking advantage of one of these templates makes the most sense for many individuals or businesses looking to have a piece of real estate online, many tech-savvy designers opt instead to use Photoshop to layout their home pages. This isn’t the best option for the laymen, as Photoshop features an array of tools and supplemental programs that require users to have an intimate knowledge of the program to really deliver a professional product. But there are tips and tricks that users can employ to get themselves on the way to pro status in the world of Photoshop.

In this series, we’ll take you step by step to learn some of the most time-saving troubleshooting tips and tricks to make using Photoshop for website design a breeze.

Tip #1 – Accept “undo,” and do it often

Photoshop can be tricky with its keyboard shortcuts and tends to pair actions with shortcuts that seem unnatural to someone familiar with standard “copy/paste.” This is most evident when you want to “undo” an action, since Photoshop uses the “CTRL+Z” protocol to both take a step backward and then, when pressing this key-combo again, backtrack on your undo. This is a time suck because designers will be going back and forth repeatedly between commands, potentially confusing where in the drafting process they wanted to make a correction.

While this may seem like a fairly moot point to highlight, knowing your shortcuts – especially the ones you use most – is key, and Photoshop will make you dig sometimes to find the ones you really want. Here’s the trick: To undo multiple times without summoning a “redo,” press ALT+CTRL+Z. To backpedal on your undos, hit SHIFT+CTRL+Z.

Before you go ahead and make so many significant changes to your design that it you feel like you’re nowhere near where you meant to be in the first place, you save multiple drafts regularly using the Fasetto app so that you can share your work with collaborators and access previous drafts from anywhere.

In our next posts in the series, we’ll be getting deeper into the nitty gritty of Photoshop to shave even more time off of your design process.