Photoshop For Web Design – Can The Titan Of Graphics Hold Up?

Depending on who you ask, Photoshop may or may not be recommended to use for web design. Many more experienced designers who've been using Photoshop for years continue to use it. But younger designers in smaller agencies often use other, more specialized tools. Here, we'll take a closer look at whether Photoshop should be used for web design or not. Here we go!

Is Photoshop used for web design? Yes, it most certainly is!

Yes, Photoshop is used for web design, handling a variety of tasks.

So is Photoshop is used for web design? Yes, absolutely. Because if it's visual nature and flexible set of tools and commands, many designers are still using Photoshop to handle web design tasks. So really the bigger question is, In what ways is Photoshop used in web design?

See, it's important to understand that while Photoshop's primarily an image editor, it can handle a lot of different kinds of tasks, including of course web design duties.

Let's explore how Photoshop can be used for web design a bit further...

Learn how to build your small business website!

What Specific Web Design Tasks Can Photoshop Handle?

As mentioned, at it's core Photoshop is a graphics editor. Editing images of all kinds is what Photoshop does best. Over the years, more and more tools, commands, and features have been added to Photoshop, allowing users to put it to work in all kinds of different ways.

Photo retouching, video work, print design and even forensics -- and much more! -- are all ways that Photoshop is used in a wide range of industries.

But as it relates to web design, what can Photoshop do? What can Photoshop be used for in web design? Well, I've been able to narrow down Photoshop's web-related capabilities to four broad areas: Photo editing, image optimization, building web assets, and constructing page layouts.

Let's take a quick look at each...

  1. Photo adjustment and manipulation: Being able to adjust and edit photos really goes without saying because again, Photoshop's roots are in image editing. But in a web design role, you can use Photoshop to handle photos that'll be a part of your website.
  2. So here, you can use Photoshop to not only crop and size your images correctly, but also use Photoshop's powerful colour correction tools to get your photos looking their best. Product photos, head shots of your team, photos of your product or service in action can all be taken care of by Photoshop's powerful editing tools.

    But getting your images looking their best isn't enough. You'll also have to make sure they load quickly for your visitors. This is where Photoshop's next role comes in...

  3. Image optimization: Image optimization simply means choosing the right web-friendly graphic file format for the kind of image you're working on, and then reducing that image's file size so that it loads fast inside a web browser.
  4. Really, image optimization is a balancing act -- you're balancing between quality and file size. Really, this is all about image compression. Not enough compression, and your pages will take too long to load. Too much compression, and your images look like they're from The Lego Movie! So it can be tricky.

    And although there are a variety of online services and other options to handle image optimization and image compression, I haven't found anything that gives me the fidelity and control that Photoshop does. Every image on my websites passes through Photoshop's image compression tools.

  5. Creation of web assets: Another area in web design where Photoshop shines is in the creation of page elements like banners, buttons, icons, and so on. Whatever your page graphic needs might be -- a cover for your ebook, an attention-grabbing banner, and so on -- Photoshop can handle it.
  6. In fact, Photoshop can handle a lot of traditional print design duties -- think business cards, brochures, and so on). So using Photoshop to design the same sorts of visual elements for the web is a breeze. Myself, I'll often times work in a bit of Illustrator for these tasks too, bringing my Illustrator objects into Photoshop as Smart Objects. But that's a whole other conversation!

  7. Building web layouts: Finally, Photoshop can be used to build web page layouts. This includes anything from a skeletal wireframe design that's used to determine the rough proportions and positioning of layout objects, right up to a complete and fully-designed layout.
  8. However, it's important to note that Photoshop can sometimes have a hard time when it's being used to build web layouts. This is not it's forte, and with the advent of responsive design (that is, layouts that are flexible and adapt to the device that's viewing them) there are better options if you'll be doing a lot of this sort of work.

    We'll talk more about Photoshop's limitations when it comes to building web layouts in just a bit.

So there's a look at the wide range of web design tasks that you can use Photoshop for. If your needs are few, or if you'll be handling some or all of these tasks yourself, then Photoshop's a great choice for web design.

But it's important to remember that Photoshop isn't a web design tool first. It's a photo editor first (it's in the name!). For many designers who are doing a lot of wireframing and design mock-ups, there are faster, more flexible tools available.

So if there are better web design tools than Photoshop available, why's it still being used? Let's cover that next...

Why Is Photoshop Still Used For Web Design?

For designers who are very comfortable with Photoshop, who've been using it for a long time, it's simply the fastest way to mock up designs and layouts. But for younger designers who perhaps work in smaller agencies, they haven't been using Photoshop for nearly as long. As a result, they turn to other tools that are more specialized for web design, and simply use Photoshop for image adjustments and manipulation, and maybe image optimization.

Here's why more experienced designers continue to use Photoshop: Not only are these experienced designers very comfortable using Photoshop, but they've also figured out fast go-arounds for using Photoshop for more challenging tasks, like building web layouts.

So rather than learning a whole new piece of software and taking the time to adapt their workflows (which can be very slow, painful, and expensive), these more experienced designers simply continue doing what they've always done -- use Photoshop.

Younger designers who haven't been building and designing websites as long don't have those long-established habits and workflows. This makes it much easier for them to adopt newer and more powerful tools that are specifically geared towards web design, and specifically, mocking up page layouts.

See, early on in the evolution of the web, designers needed a method to mock up a design for a client, handle graphical web elements, and even handle special effects like drop shadows, gradients, and transparencies. And early on, these sorts of effects were only possible with graphics. Today, CSS easily handles these sorts of things. But back then things hadn't evolved very far. So Photoshop was the answer to all graphics-related issues.

Want a drop shadow on that text? Photoshop! How about a nice gradient on that button? Photoshop! How about a border on that sidebar? You guessed it, Photoshop!

There just wasn't any other way to do these sorts of things. So to handle this kinda stuff, designers simply reached for the same graphics editor they'd already been using for years in their other design work -- Photoshop!

Back then, for designers like me who were coming over to web design from the world of print, the transition was easy -- build a layout in Photoshop, get the client's approval, and then export the images and code. Or better yet, export the whole layout as a JPEG and hand it off to a web developer to code.

But since then, things have evolved. Photoshop is no longer the only answer to handling web design's visuals. And although experienced designers have kept up as web design has progressed, they're still using the same graphics tool they've always used, now just in different ways.

Probably the biggest change in recent years is the advent of the mobile web. In the early days of web design, layouts could often be fixed to a specific width. But now, with the explosion of smartphones, tablets, and other mobile devices, a more fluid approach to designing web layouts is needed.

Thus the birth of what's called responsive design. Responsive, or mobile-friendly, design means a layout is fluid, not fixed. It can then adjust itself to the device that's being used to view it. This created a problem for long-time Photoshop users because Photoshop uses fixed document sizes.

And this is a perfect segue into...

Where Photoshop Struggles With Web Design

As you're discovering, a big challenge for Photoshop is handling the big changes that have come along in mobile, responsive design. Mobile browsing has completely changed the way we use the web...and as a result, it's completely changed the way we design for the web.

Once mobile devices came along, web designers had to completely rethink how they'd design their layouts. Rather than thinking in terms of fixed-width layouts and dimensions, as a traditional print designer does, web designers now look at their designs as being like liquid.

After all, web designers have no idea what device or screen size their pages will be viewed on.

This might sound like a bit of a circus (it can be), and it's a big problem for Photoshop, too. Photoshop was never meant to build flexible, liquid layouts. Nor does it have the tools to handle these sorts of responsive designs built in.

In fact, for the first three quarters of Photoshop's life, responsive design didn't even exist!

Instead, Photoshop's always using fixed boundaries. Whether you're working on a photo, a layout, a graphic, any other kind of image, in Photoshop it's always going to be fixed to a specific width. But as you've discovered, modern web pages are not.

So how are designers getting around this limitation in Photoshop? Broadly speaking, there are a few ways. Some may just bite the bullet and build three separate web layouts within Photoshop -- one for smartphones, one for tablets, and a third for desktop computers. But that's a lot of work.

An alternative approach is to build a mock-up in Photoshop, and then once that design's approved, move the layout into code as quickly as possible. There, the design can be further refining and adjusted for other device sizes.

All of this means that many of the things that Photoshop was being relied upon for in previous years has rapidly changed.

So should you be looking to an alternative to Photoshop? Maybe. Perhaps Photoshop should be used just for photo editing and optimization duties. But it can be hard to know which way to go that'll work for your specific situation.

I go into much more detail on this in another post, Photoshop For Responsive Web Design. Join me there, and we'll dig into this issue further.

Meanwhile, is there a particular version of Photoshop that's best for web design? Lets' discuss...

Which Photoshop Version Is Best For Web Design?

So is there a version of Photoshop that's best for web design? Let's take a closer look at answering this.

Back in version CS6, a few handy web-related features were added to Photoshop. Being able to paste hex colour codes into Photoshop's Colour Picker window, for example, saves frustration and speeds things up. I'd been waiting for this simple addition for years. Additionally, Paragraph styles were added to Photoshop as well. This makes ensuring typography is consistent throughout a design much easier to maintain.

One other addition that was included with CS6 was document presets. So when creating a new file, dimensions for common mobile devices were available as presets, which definitely helps to speed things up.

But more modern versions of Photoshop CC include even more web-friendly features, like the ability to copy a layer's contents as CSS code. This might not sound like much, but it's huge! So here, you can extract specific page elements as code, which is amazing. There's also the ability to synch exported files via the Layers panel - in other words, if a layer's contents change in Photoshop, it's corresponding exported JPEG or PNG also updates. This is a huge time-saver.

As newer versions of Photoshop are released (via Adobe's Creative Cloud membership, of course), new web-related features and commands are sure to continue being added. And Adobe very rarely removes features. So going with the latest version of Photoshop CC very likely your best bet.

In fact, unless you have an older copy of Photoshop kicking around, going with a subscription to Photoshop CC (which starts at $10 per month) would be your only option! Adobe doesn't sell older, non-subscription versions of its software.

As for me, because my needs are few, I'm actually still rocking Photoshop CS6 here for my day-to-day work. But at the same time, I like to keep up with Photoshop's latest features via Creative Cloud, too. But that's just me.

Next up, if you're ready to learn Photoshop (or get better at using it for web design), then let's discuss a few of your options...

How To Learn Photoshop For Beginners

If you're a beginner, then the big question that might be on your mind is, How can you learn Photoshop quickly? In another post, Is Photoshop Hard To Use? Learn The Right Way And It’s Easy! we talk about where Photoshop can become challenging for new users, and how to quickly overcome common frustrations so that you can get up to speed quickly.

But here's the short 'n sweet: While you could start hitting up Google, YouTube, and online forums to learn Photoshop, this is easily the slowest, most frustrating way to get started. The problem isn't that the information isn't out there...the problem is that there's too much information out there! None of it is structured or organized well.

And one of the big points in the article I link to above is, Photoshop can get very complex and overwhelming quite quickly if you don't go about learning it the right way. And this is exactly what most people do -- which is why lots of people think Photoshop's hard.

Photoshop isn't hard, you just have to get a solid grip on the fundamentals first. In order to do this, I strongly recommend you find some kind of high quality, structured learning guide. Books, workshops, or online courses are exactly what I mean here. My go-to choice whenever I'm learning something new is to enroll in an online course. This way, I can rapidly get up to speed, but do it at my own pace from home.

And I take a lot of online courses!

Here on Ten Ton, I do have a Photoshop course, Getting Started With Photoshop CC. It's perfect for beginners who want to quickly gain a foothold with Photoshop. Give it a look -- maybe it'll be a good fit!

Or if you'd like to learn more about Photoshop, I have lots of articles and videos for you right here.

Enjoy!

Share this!
  • 2
  •  
  •  
  •  
  •  
Geoff Blake, Ten Ton Online

Hey, I’m Geoff. I teach small business owners how to build and grow their websites themselves. Start here (free!)