Photoshop for Web Design 101 Part 2: The Basics

In our previous post in this series, we gave background about how the demographic makeup of the internet has changed so drastically since the early days: Website design, which was once an arena for the tech savvy, is now any person’s game. Now that you have the context, here are a few more basic time-savers that will be helpful as you begin to play around with Photoshop for your own web project.

Tip #2 – Color sampling made easy

Let’s say you’ve stumbled upon a website that really

speaks to you – its layout is clean and its color scheme really pops. While you don’t want to make a carbon copy of the website or rip-off what may be their trademark color pairings, there’s no harm in sampling some shades that they’ve incorporated for your own project. After all, what drove you to their website and kept you there in terms of aesthetics probably didn’t happen by accident, so by replicating some of that magic on your own homepage you’ll hopefully hook more visitors to stay and explore.

The long way of determining what shade  to use on the site involves launching a color picker, picking the color from the website to get its hex number, then inputting that hex number into Photoshop’s color palette to replicate. It may not sound like a lot of work, but it can be tedious.

You can skip a few steps by activating the Photoshop Eyedropper tool, click on the Eyedropper icon (it looks like an “I” on the top panel) and drag it to any area on your monitor – like the website you’re hoping to get inspiration from – to immediately have that color in your paintbrush.

Tip #3 – Guide your borders consistently

You want your elements to be aligned “pixel perfect.” A messy, inconsistent layout makes your site look lazy and loses your credibility, which inevitably translates to low user engagement.

This tip is another time saver to help you speed up one of the more tedious parts of the process so you can focus on your creativity and play around with Photoshop rather than get caught up in the technicalities.

Instead of using the View menu and creating a New Guide by inputting what you hope are more than approximate dimensions, just press CTRL+R to activate the Ruler tool, and drag the tool to your desired horizontal or vertical axes to quickly create a guide that is easy to manipulate.

As always, be sure that you are saving your project in multiple iterations as you go in an area that it can easily be recalled from on the Fasetto App. Stay tuned for more posts in the series that offer even more design tips for beginners just getting their bearings with web design on Photoshop.