There has been a big discussion about using Photoshop to design websites. I heard many voices that Photoshop is going to be replaced soon and it won’t be a choice of most designers.
We started talking about designing in the browsers, or using some other alternative softwares, but still, it’s 2014 and almost every designer I know uses Photoshop to design websites.
I use Photoshop too and I have some good reasons to keep using it in the near future. Here is why…
Everyone asks for PSDs.
The thing is that you, as a designer, don’t really have a choice when it comes to choosing design software. It all depends on what your clients and developers require from you.
It’s very hard to use anything else than Photoshop for your designs. Even if I really wanted to try some alternatives, most of the teams I have worked with have asked me for PSD files.
There was a time a couple of years ago when Adobe Fireworks was more popular and some developers asked for layered PNGs or PSDs. However, Adobe decided to discontinue developing Fireworks, so we’re all back in Photoshop.
PS has been the most secure option for designers for years. Most front-end developers know how to use Photoshop and how to easily extract your graphics from the PSD files. There are tons of tools and third-party plugins that make that job even easier.
If you’re a freelance designer and often work with different teams, you need to be prepared that they will ask for PSD files.
Adobe wants us to keep using Photoshop.
I’ve been waiting for Adobe’s response to the huge demand for making the PSDs responsive. There it is: Adobe Edge Reflow. It’s still new and fresh but I really like the idea of this app.
Adobe doesn’t tell us that there is a new app and we should all stop using Photoshop to design websites. You can either design your website directly in Reflow from scratch or import your PSD files and make them responsive.
It’s a perfect solution if your client asks you for both PSD files and wants some mobile screens. You can drop your PSD file into Reflow, rearrange and scale some elements and produce alternative screens of your designs.
Designing in the browser from scratch.
Many designers who know HTML/CSS started designing directly in the browser and simply skip the entire design process in Photoshop or any other software.
Well, I tried that too and it didn’t work for me. I feel like it limits my creativity because I can’t quickly execute various visual ideas that are in my head. Instead of focusing on being creative, I focus on making it actually work in the code.
Even though I skip the entire Photoshop designing step, it makes the entire process much slower because of the endless amount of trying and fixing things.
I call designing in Photoshop a “pre-design” step. It helps me to visualize the entire website concept and I often omit pixel-perfect details and finish that part up in the browser while coding.
Master your design skills, not software skills.
The headline of this paragraph is the best conclusion to my blog post. Designers, let’s focus on our design skills. Let’s master our design techniques and styles. If we develop our skills, we can design beautiful websites no matter what software we use.
Check out my other blog post with some tips on how to improve your design skills.
We’ve been using Photoshop for so many years but who knows what the future brings? Web design especially changes so rapidly that it’s hard to predict and prepare.
I will keep using my Photoshop.
I agree. I’ve tried designing in the browser without working in Photoshop and it slows me down too because I’m constantly fixing or tweaking as I go along, which I find to be very distracting.
For me, lo-fi mockups on paper followed by working in Illustrator and Photoshop before prototyping in the browser works best. In my view, Illustrator and Photoshop are great for laying down basic layout, colours, typography etc, and prototyping in the browser allows for a) building something in context to demonstrate to clients and, b) it allows for quicker minor iterations before production.
I ought to give Edge Reflow a go soon. I’ve heard of it but never got around to trying it out.
I like creating hi-fi mockups in Photoshop but they’re not so pixel-perfect when I know that I’m going to code it, I just need a design concept and I can take it from there.
Thanks for your comment!
But at same time you can re-use templates and code from previous projects, whereas for Photoshop you have to move everything manually, because there are no styles for interaction between objects (basically, everything is position:absolute in photoshop, no margin, padding, width, height, float, box-size, no even tables)
I agree as well. I has tried “Prototyping” in the browser but it doesn’t work for me.
It is possible and I have no doubts that we could make a nice looking theme coding CSS directly in the browser BUT you need a solid HTML/CSS framework and I found myself being much less creative.
If I can’t be creative when designing websites, then I would have no fun doing it at all 😉
As both a designer and developer, I tend to agree with you and your assessment. I always use Photoshop for the design portion, and even if I am going to develop the site myself, I always try to have my designs pixel perfect. The extra minute or two it takes in Photoshop during design to have the correct measurement for each item makes my development go that much faster. And if I decide to have someone else do the code work, it takes away the questions that come with “sloppy” design files.
And making changes for responsive design in Photoshop is not all that hard if you have a well designed and clean psd file.
Converting simple pages to mobile responsive in Photoshop is not that hard but I found many problems when the pages were more complicated. Especially when then some modifications are needed and you need to apply them both in your desktop mockups and mobile mockups.
You’re right that it’s all much easier if you keep your PSDs clean.
That’s the problem, in Photoshop you have to manually measure “pixel perfect”, because everything is position:absolute, so you have to double check everything with rulers to see if you accidentally moved object few more pixels, whereas in code you can set “margin-bottom: 20px” and all same blocks with that class have 20 pixels between them, no need to manually move them every time you add new blocks.
I have to admit that I never use Photoshop to design websites — mainly because I’ve never taught myself how to use it in a way that’s any faster than designing on the fly.
For me, I need to design and make changes in realtime, because that’s simply the most efficient way for me to work.
As we can all see your process works pretty well for the themes you create 🙂
I would still encourage you to try at least pre-design typography in Photoshop. I think you would like the way to quickly try different color schemes.
That’s why your themes have great design aspects which repeats everywhere. They are not great in designs.
I don’t think the focus on evolving software is as important as much as the responsibilities of designers and/or from what direction we’re approaching each project. If you’re strictly “designing” a site, why not rely on Illustrator, Photoshop, or anything else you’re most productive with?
But if you’re going to be involved in “building” a site, you should start with your feet planted in a browser, focused on code, and use those tools as needed for handling required images and assets. At least for now they’re usually the best tools for those particular jobs. The foremost worry shouldn’t be about the tools though–they’ll always be changing. It’s making sure the workflow is laid out and planned for what will best get you from idea to reality.
Michael,
I agree with you. We have to use what’s the best for the project and our team after all.
Most of the teams I worked with required PSDs from me. If you want to be a flexible designer and be able to work with different teams, then it might be hard to avoid Photoshop.
Of course, as a designer, you need to know how websites work, so your PSD files are possible to code and you can easily extract graphics from it. I think some designers forget about it and too many people blame Photoshop for it.
In early 2013, Dan Rose wrote about the limitations of Photoshop for web design for Smashing Magazine: http://www.smashingmagazine.com/2013/04/22/repurposing-photoshop/
In the fall of 2013, I heard Dan speak at Chicago WebVisions and he had pretty much changed his mind and spoke on “Redeeming Image Editors for Mobile Web Design.” Adobe obviously wants to be a solid player in the web world. I would not give up on PS unless you are a really rapid front end coder!
Great post Rafal. Design on the browser by coding does not work for me either.
I mostly use Photoshop for designs however I have been playing with Sketch http://www.bohemiancoding.com/sketch/ lately and I loved to use it. Its main focus is on Interface designs and has a great feature that provides the CSS code. But as you said we should master our design skills. We have to work with the tools we are more productive and comfortable with.
Been reading a bit of your site (good stuff!) and had to just pop a quick note in here about InVision. Seems like it might be a missing link in your process that could help.
Cheers
Totally agree! I have seen many posts where they wanna make me stop using photoshop, but they can not:)
I am 70% coder, and 30% designer. And even though i am fast and skilled when it comes to the front end stuff. Its exactly as you say, the creativeness dies on me. I have a vision in my head, i code it up, just to realise it wasn’t what i expected it to be. Then i get tired of it since it took me some time to do the stuff. If it had been in photoshop, i would have seen it much faster.
I think the best way of doing it, is using photoshop roughly. And when you know the idea works, then its a code go ahead.
William
pixney.com
Use Export Kit and take the hard work out of converting your PSD to HTML. Its a plugin for Photoshop that will convert your PSD in minutes to HTML5 and responsive CSS3 – no coding required – but it gives you super clean code without tables!
Check here: http://exportkit.com/plugin/environments/html5/convert-a-psd-to-html5 you can convert your PSD in a few clicks – not weeks or months.
So the answer to the Post is – YES – use Photoshop for your designs, now with Export Kit you can convert your PSD on the fly to HTML, CSS, JavaScript and more without the hard work.
PS is best.A flexible layout is core feature of responsive web design.
hi guys.
I am a beginner just little knowledge of HTML CSS Photoshop and Dreamweaver. i want to learn web designing so kindly give me direction where should i start from. what should i focus on and how should i learn.
Thanks
Hi Shami,
First of all forget Dreamweaver – I don’t know of any web professionals that use it. You would be best to start with learning about design principles, i.e what makes a good design?,then learn photoshop so you can put those principles into action. Next you should study HTML and CSS followed by basic javascript.
In my opinion http://www.teamtreehouse.com offer the best structured training programmes. They are also offering a months free trial membership so you can try before you buy.
HTH and good luck!
I agree the “pre-design”,some of coding assist’s information be stay on the pictures show to programmer.
I am not sure if it is too late to answer, buut I’ll still do it 🙂
I visited an Institute in Berlin where I learned developing and designing webdesign. This was in 2001.
I never was tought to slice huge images to embed them into a web layout and I have always learned to code by hand directly in the browser.
If I have a first meeting with a client, I listen to what they want (if they know what they want, which is seldom) and after the meeting I sit at my desktop and create a design online.
Images for design create http-requests and there are enough of those already by all the scripts and css files a moderate modern site needs.
Nowadays with flat and material design, there is absolutely no need for designgraphics. The only images used for design should be an oversized background image which covers the whole back of the website, which is quite On Vogue at the moment.
I’ve used Photoshop for nearly twenty years. I used it for web design. Today I mainly use it to edit images though. That is what it’s best for. I found I gradually stopped using it as my CSS skills improved and CSS caught up to Photoshop in terms of its graphic ability. Photoshop was once very good for creating graphics for the web but the adoption of the SVG format requires vector based graphics that are better created in programs like Adobe Illustrator (icons, logos). You really can’t use the graphic you’ve created of your site within your site. You can use the markup you create. I like designing in the browser because that’s the native space for the final product. It’s fluid. The PS canvas is not. HTML/CSS is also a much better layout tool for organizing text.
It’s really a comfort issue. If you’re more comfortable using PS to layout your website then you should use that tool.
Such an excellent and helpful tutorial. Thanks for sharing.
Hi, I’ve always used Indesign or Illustrator to build a site design and pass the PDF file to the programmer. So I’ve never used Photoshop to design a website. But this new programmer asked for Photoshop files (PSD).
So my question is, ‘can’t a programmer use a PDF file to develop a site? ‘
Hanbi,
You can save a layered PDF and instruct your programmer to use Illustrator, but I think using Photoshop is much more common and that’s why programmers expect PSD files.
If your programmer doesn’t know how to use Illustrator, you can export all the design assets for him (at extra cost?) and provide all the information about typography (web style guide would be best: http://rafaltomal.com/free-web-style-guide-psd-template/ – you can recreate it in Illustrator).
I don’t understand why devs still need PSDs. Sure in the days of skeuomorphism and fixed width sites.
Sites are fluid now, so a PSD can never be more than snapshot at one particular size.
Consequently, a PSD is not going to contain any usable assets, nor fixed dimensions.
So what is it a dev needs the PSD for? A PDF should suffice.
Therefore, for a designer, a proper layout software – like Sketch, Illustrator, Affinity etc – would make a lot more sense.
I reckon if your dev wants a PSD, get a new dev.
Chris,
I see your point. I don’t know what’s your experience working on various design projects with different development teams, but most developers I worked with were just more familiar with Photoshop than any other software. I’m a web developer too and I see benefits of having my design in a PSD.
PSD actually contains a lot of useful information and is fully layered, which makes exporting assets really easy. The biggest downfall is like you said, it’s just a snapshot of one screen, but a new artboards feature and Adobe Edge Reflow can help with that too.
If you prefer to design websites in Adobe Illustrator and your developers are comfortable working with PDF files, that’s fine! Whatever works best for you and your team.
Thanks for your comment.
Thank you very much for your explanations
Many people are all for it, whilst some believe that designers shouldn’t touch code. However, those designers that do code are getting more confident and some are even arguing that designing in Photoshop is no longer relevant in certain scenarios.
Nice post and very usefull opinions.
Thanks mate!
Photoshop is so bad to make sites: you can’t flow the different blocks, you cant have responsive design, or style classes. I still dont understand why do people make sites in Photoshop, it’s extra job to convert it to code and waste of time. It will be even faster/more precise to code site, make only separate pictures in Photoshop (instead of whole picture).
Or I think, there should be some good program to allow fast prototyping. Photoshop is not good for prototyping but 99% of web designers still doing that.
p.s. Firework sucks too. Probably even worse than Photoshop. If anything, I think InDesign is best for prototyping, even though it was made for print industry.
p.p.s. (can these be combined into one comment, please?) the worst thing about photoshop design, is that designers never provide with [i]already made[/i] button designs, images, effects. You have to manually crop them from layers. It would be great to be able to reuse parts from different projects, but every time designers reinvent wheel and coder have to reinvent it too.
And they also never provide style guide. So I code one page, and then on different page style is completely different, so I have to change my code on old page to fit all pages.
With prototyping program, it would be much easier to have style guide, and instanced images would be already cropped, easier to not screw up module grid (force to abide it instead of putting objects “by eye”), etc.