Should Web Developers Learn How To Use Photoshop?

When I returned to coding after a long break, I felt sorry that I had wasted a lot of time. I learned image manipulation software instead of coding. That’s when I started to wonder:

Is Photoshop still relevant for a web developer?

No. You don’t need Photoshop to be a web developer. That’s it, case closed. The work is now split, you have a designer and a coder. The coder is writing code the designer is designing. Everyone is creating in Figma anyway these days. Which resembles Photoshop by the way.

Things are not as easy as you might think, though.

I stumbled upon many terms like back-end, front-end, a generalist, a
specialist. Some are saying no, others are still saying no :) but think
it’s an excellent skill to have. Everyone seems to agree on one thing,
it’s not needed.

Knowing Photoshop is not required, but your life would be so much easier if you knew it. Some old-school UI designers in some companies are still using Photoshop for design. If you knew it, there would be no
miscommunication between you two.

Opening a PSD file, and going through the layers, picking the right color codes with the color picker is a must. You should be comfortable doing this if you’re going to work at a company that has this type of workflow. There is this opinion. A developer without Photoshop is like a Photographer without a D-SLR camera.

So what is my take on it?

Don’t get me wrong I am no expert. I am doing an eight-month Bootcamp that helps you find remote work after graduation. We have been cloning
websites from day one. Although, my journey as a web developer started
much earlier.

Let me give you some background.

By the way, you can skip the next paragraph. I would :).

After graduating, I left for China and worked as a dancer for ten years. Long story short I ended having a lot of free time on my hands and decided to put it to good use. I wanted to build my blog. But for me, as a creative person, the limitations that WordPress themes gave wasn’t an option.

I learned some basic HTML and CSS and started on building my “awesome” looking blog. Cause who needs content right :)? The first roadblock I stumbled upon was when I realized that I need images for almost everything.

Back in 2009, you didn’t have the possibilities CSS3 gives you today. One would need a photo editing app for almost everything. Rounding corners unique fonts logos e.t.c. One would cut every piece of the layout and place it on their website. Thank God those days are gone :).

The whole website building venture got derailed by learning how to use Photoshop. Illustrator, Adobe Flash, After Effects, Premiere Pro and Autodesk Maya with ZBrush.

As you can see, I don’t know any of that good enough. Yes, I got carried away. I enjoy learning new stuff, and I don’t regret a thing.

How Photoshop helped me understand how to make specific effects with HTML and CSS?

If you understand how Photoshop layers work, you can transfer it to code
without a problem. For starters, you should learn some basic HTML and
CSS, but that’s easy. There are a lot of tutorials online, and they’re
all good.

You can achieve great results with ::before and ::after pseudo-elements. Check this article , the website is an excellent resource for CSS tricks. Learning to position elements with absolute positioning was a revelation for me. That’s when the “Aha!” moment came. I started to compare it to the way you would place your items on the canvas in Photoshop. Change your
thinking change your life :).

You see, layers in Photoshop go from bottom to top.

Onion layers are an excellent reference to imagine how Photoshop layers
work. The ones on the top overlap the ones underneath. Changing the
blending modes, sizing, and order can make for some impressive results.
You can group them in folders within folders and so forth.

That all translates to HTML and CSS. Layers as the HTML tags inside other
tags within div. All these elements can be absolute positioned on top of each other, z-indexed, and ordered. You can change the display, transparency and a lot more. Yes, it is a lot to take in. CSS is enormous; it still has some limitations compared to Photoshop, but the gap is closing fast.

To prove my point. At the time of writing this article. I thought it would be a good idea to solve the problem we faced with my coding partner. When cloning the smashing magazine website, we struggled to copy the animated shadow underneath every image with pure CSS. We couldn’t do it at the time. After some weeks of re-learning CSS, I thought: “How I would do it in Photoshop?”

The answer is I would take another element. Rotate it around the x-axis.
Blur it. Reduce the opacity and place it underneath the dropping shadow
element. Ok, following the same logic how can you do that with CSS?

Position it “absolute” center it to the parent element, rotate it X and blur it. Voila, the same result with CSS. You can change the background color to radial-gradient, instead of using blur. I haven’t tried that.

I don’t know if it takes a lot of raw power for the browser to render it. The original website is using PNG Images instead.

It took way more time, though. I always forget that the “:: before” and”:: after” are inline pseudo-elements by default. Can’t rotate them if you don’t change it to display block or inline-block. They won’t show off if the content value is not specified either. I wish someone would remind me of these things when I code on my own. That would save hours of my life.

One more plus to knowing Photoshop is that you don’t need someone else’s pictures. You can make them yourself. I had to read a lengthy study
about copyright infringements and images from google. It scared me
enough to stick to using my photographs instead since I can make them
anyway.

Photoshop is not needed for web development. Grasping the basic concepts from using it helped me a lot. Hopefully, it will help you too.

Previously published at https://medium.com/@vmwhoami/is-having-photoshop-skills-essential-for-web-developers-625865accf82