Join Justin Seeley for an in-depth discussion in this video Why use Photoshop for web design?, part of Photoshop CC 2014 for Web Design.
One question that many aspiring web designers ask me all the time is why they should even bother using Photoshop at all in their web design work flows. In this movie, I'll give you some reasons as to why I use Photoshop in my personal designs, and we'll also talk about how the role of Photoshop has changed in the world of web design as well. You know, at its core, Photoshop is simply an image manipulation tool. Meaning that you create graphical elements like photos, icons, et cetera with it. Photoshop was not designed to handle code.
Although, there have been some advancements in that area as of late; I still say that Photoshop's still not ready for prime time in that regard just yet. So, why should you use Photoshop for web design? Well, I use Photoshop because it enables me to generate web assets much faster than any other app thanks to the new generator feature that Adobe recently introduced in CC. Truth be told, I had all but abandoned Photoshop as my web design starting point until this feature came about. Second, Photoshop gives you a better visual representation of the finished product and makes it much easier for your clients to understand what their sites will look like without having to show them an actually working prototype, which can take way longer to create than any PSD file ever could.
While Photoshop might not have a ton of web coding features built in, there are some rudimentary CSS tools that allow front-end designers to easily convert certain things over to standards compliant CSS. Like gradients, drop shadows, et cetera. Finally, Photoshop has an ever expanding group of vector tools, which enable you to create resolution independent graphics, which are perfect for modern web designs. Especially on devices that require quote unquote retina quality graphics. All that being said, there are still many pain points for using Photoshop for web design as well.
For instance, there's still no multi-page workflow unless you count layer comps, which I don't. But that's a big sticking point for a lot of people as you can't have multiple pages inside of Photoshop. You're also unable to really simulate responsive web designs in Photoshop without the help of tools like Edge Reflow. Which can have it's own learning curve. While Photoshop may have CSS capabilities, the code isn't always, shall we say, as clean as developers might like it to be. And often times, it includes unnecessary information that most web designers would simple disregard upon actually creating the functioning prototype.
Using Photoshop can also make you feel as though you're doing double the work when it comes to your designs. This really only applies to you if you're a designer or developer capable of coding your own web sites. Even so, it's a big deal to many people and a big reason why many modern web designers are opting to just, what is called, design in the browser and leave Photoshop to just handling the small stuff, like graphic elements that they need along the way. Many people also claim that abandoning Photoshop will save you some time. Well, let's explore that. Here's a typical old school work flow for web designers.
This would be the same work flow that most people were using in the early days when print and web sort of mimicked each other. First of all, we'd start with a sketch, as most design projects do, after all. And this would be based on the specs that the client gave you. You would then turn those specs and that sketch into a beautiful PSD mockup and send it to your client for approval. Upon approval, the designer would then hand this finished comp off to the developer to be coded into HTML and CSS. Once there was a working prototype, the client would then review it and hopefully approve it.
Then you would hand off the final deliverables or simply publish the website once it's all finished. Okay, let's get a final count here. There are one, two, three, six steps total in this old school workflow. Okay? Now, let's take a look at how that compares to a quote unquote new school method of designing for the web. You almost always start out with a sketch, much the same way you did in the previous workflow. Then you move on to creating a wireframe mockup in-browser, which means you're coding it and designing it as you go, and you're using apps like Photoshop to create only the graphics that you'll be using within the code itself.
Next, you'll get client approval of the wireframe mockup, then you'll go back to work cleaning it up, and putting the finishing touches on the full scale prototype that you're going to show the client, and hopefully get their approval again. Then you would also hand off the final deliverables or upload the site. By my account, that's also six steps. So really, I'm not convinced that ditching Photoshop saves you all that much time in the long run. What do you think? I believe really and truly that this comes down to a personal choice for you as a designer.
If you are purely a front-end or aesthetic designer, Photoshop is still very much in play for you. Mockups will always be an essential reference tool for developers and hybrid designers alike. So I think that generating ones that closely resemble the final product is also really beneficial. Right now, learning code is the hottest trend on the planet, but I realize not everyone is onboard with that just yet, and it can be scary. And that's okay. And that's also why Photoshop is still a great tool for new and aspiring web designers.
Eventually, yeah, you're probably going to have to know some code. I'm almost positive of that. But until then, Photoshop on, my friend.
- Why use Photoshop for web design?
- Decoding the mysteries behind screen size and resolution
- Giving your website a purpose with a content strategy
- Customizing a web workspace in Photoshop
- Designing responsively
- Creating wireframes on a grid
- Choosing colors and fonts
- Developing a UI kit with Photoshop
- Assembling a page mockup
- Creating image sprites
- Optimizing images
- Integrating with the rest of the Adobe Creative Cloud