Is having Photoshop skills essential for web developers?
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.