Design 101: Photoshop for Web Design isn’t Just Outdated… it’s Bad Practice – Red Branch Media

Share on facebook
Share on google
Share on twitter
Share on linkedin
Design 101: Photoshop for Web Design isn’t Just Outdated… it’s Bad Practice – Red Branch Media

photoshop There as soon as lived a day the place Photoshop was the go-to place to your complete internet designing creativity to be born. Sure, the day the place you might convert these magical PSDs to HTMLs. That day has lengthy handed, although. In the event you’re contemplating to create an internet site with Photoshop, let me chime in with just a few the explanation why to not and the way it’s simply unhealthy follow. Don’t get me mistaken; Photoshop is a good program with wonderful capabilities. When you can nonetheless create internet belongings like pictures, you shouldn’t use it to make internet pages. Hold studying and I can just about assure you’ll agree with me.

The Day of PSDs

The follow of making an internet site in Photoshop was as soon as a good suggestion… in 2003. Again then; it labored properly since you might see exactly how your web site was going to look.

You are watching: web design 101 photoshop

The method was easy and efficient. Right here was a typical workflow, because of Treehouse:

  1. Design a excessive constancy pixel-perfect mockup in Photoshop of precisely what you need your web site to appear to be.
  2. Use the slice software to divide your web site’s imagery after which export it for the net.
  3. Write HTML and CSS that makes use of the imagery you exported from Photoshop.

Straightforward, proper? It labored so seamlessly {that a} designer might create a whole web site mockup, hand it over to the net developer, and the developer would then write the code. In just some steps, your web site can be dwell.

PSD to HTML: Why it’s Outdated

See more: photoshop download free windows 10 32 bit | Photoshop Services

So why can’t I simply observe that workflow above? The reply: the net is responsive and quickly altering. The issue with PSD to HTML is that you simply’re designing for a set decision. Within the current day, the net is totally responsive, which means {that a} web site must “…reply to the person’s habits and atmosphere primarily based on a display screen measurement, platform, and orientation.” As a result of a Photoshop atmosphere is a static one, there’s no solution to know the way it will prove and act on the net till it’s really developed. A Smashing Journal weblog article states, “No method of fixes or hacks will produce an actual match of our Photoshop comp.”

In the event you’re not designing a responsive web site, you’re lacking out on all the advantages. Take a look at this infographic posted by Shalaina Ocasio: Go Cell and Responsive…Or Go Residence! [Infographic]

Learn how to Use Photoshop Now

Certain, you may design an internet site on Photoshop for a normal concept, but it surely’s solely going to be a drain on time in the long term for those who make it pixel-perfect. My suggestion to you is for those who completely need to incorporate Photoshop into your internet growth course of is that you simply use it as a software as a substitute. For internet design, you may rapidly sketch up some cool concepts in a couple of minutes that you simply’d wish to current to your internet developer, however in the end they would be the ones to inform you if it’s an really possible concept or not. You may as well use Photoshop to create the belongings for web sites, reminiscent of designed pictures, GIFs, advertisements, and so forth. This shall be a simpler use of your time so your developer can merely plug your gadgets right into a format.


See more: How to Simulate X-Ray Photography in Photoshop | Photoshop Services

(Picture Credit score: Sketch web site)

Introducing Sketch: Photoshop’s Successor

So what for those who actually liked internet design, however your internet growth and coding expertise are nonetheless subpar? Let me introduce you to a present-day, responsive-ready successor to Photoshop; Sketch. With Sketch, you may design responsive web sites for the fashionable age of internet design. What’s extra is that you should utilize Sketch for different issues like designing interfaces or vector-based iconography. That’s fairly superior. Not satisfied but? What if I advised you you can see a real-time preview of your designs proper in your iPhone, iPad or internet browser? Yep, Sketch can do this too.

Even designer Sarah Parmenter (@sazzy) has proven her love for Sketch: “I like Sketch. I made the swap a while in the past and I haven’t seemed again. I used to be a Photoshop advocate for my complete working life till Sketch got here alongside, and inside every week, I used to be a complete convert.”


Ultimately, whereas Photoshop internet design is an outdated factor of the previous, you may relaxation assured that there’s a greater answer to take its place. That answer is Sketch. Don’t waste your time attempting to make Photoshop web sites, it’s going to solely convey you set-backs. As a substitute, use Photoshop as a software to make internet belongings reminiscent of pictures, GIFs, advertisements, and different items to your developer. Give Sketch a shot. It’s a chance to problem your self to be a greater designer by studying a brand new internet design program. A contemporary and sensible internet design program. Don’t let the chance move you by!

Leave a Reply


Powered by WhatsApp Chat

× How can I help you?
%d bloggers like this: