Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Jake Porritt
Jake Porritt
10,356 Points

Photoshop for Front-End Developers

Hey,

I'm wondering if someone could point me in the right direction for a course aimed at using Photoshop as a front end developer.

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

What exactly do you want to learn? How Photoshop fits into a front-end dev workflow, or how to use Photoshop?

5 Answers

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

Okay, I'll give you a somewhat opinionated answer here, and you can take it FWIW.

Photoshop is an incredibly complex piece of software that can be used for web development, but there are other, more focused apps available, like Sketch, that are more lightweight and are easier to learn, and just as valuable in terms of job skills. That being said, you really can't go wrong with Lynda.com. You can even find some great free tutorials on Adobe's own website.

You also need to invest in a Photoshop CC subscription. If you're a student, you are eligible for a discount.

What's most important is that you focus on learning specific web dev-related functions and avoid everything else like the plague (there's simply too much to learn in a short amount of time). I suggest focusing on:

  • the Photoshop interface (brief overview to familiarize yourself with common tools, panels, etc.)
  • Smart Objects (what they are, how they are made)
  • the Generator (this is the best way, IMO, to output library assets from Photoshop)
  • Paragraph and Character Styles (how to create and use them)
  • Copy CSS

Also, you will need a heavy dose of patience, mostly because Photoshop is very buggy with some of these features (I personally find their implementation of Paragraph and Character Styles infuriatingly).

At the end of the day, a lack of Photoshop experience should not prevent you from getting a front-end dev job at a reputable company. There are many ways to accomplish a task, and PS is one way of many. Plus, any skills you will need are better learned on the job from people you can instantly interact with.

That's my two cents.

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

To be honest, it depends on what you intend to use Photoshop for. There are some developers who use Photoshop for typography, logo creation, image editing, etc... but then there are some (like myself) who use Photoshop just for image editing.

Although they are often paired as a team, Web Designers and Front End Web Developers have different roles in the Web Development process.

Web Designers primarily focus on the visual components of a website such as colors images, fonts, logos, etc... and are often seen using Adobe Photoshop or Adobe Illustrator. (think of them as the painters of a construction team.)

Front End Web Developers on the other hand are responsible for the structure of websites. They work with the Web Design team to create a visually pleasing layout and then convert that design to functional, clean code. (they are the guys with hammers and nails in the construction crew!)

Based on experience, while working as a Front End Developer, Photoshop isn't going to be something that will be of use every day (I use Calculator more often than Photoshop). But it doesn't mean you shouldn't take time to learn it. It's a very powerful tool and will significantly help you down the line.

If you are going to learn Photoshop, I recommend learning Illustrator as well. Once you get the hang of one, the other will be much easier. Treehouse has some awesome tutorials for each in their design library. Check them out!

When it comes to landing a job, sometimes people know all of these tools but don't necessarily know which to use based on the task. If you put Photoshop on your resume, make sure you know when to use it.

Best of luck to you Jake!

Jake Porritt
Jake Porritt
10,356 Points
Jake Porritt
Jake Porritt
10,356 Points

Both. I've never used Photoshop before and looking through some job adverts a few have asked for people skilled in Photoshop

Jake Porritt
Jake Porritt
10,356 Points
Jake Porritt
Jake Porritt
10,356 Points

Thanks for both your responses. I appreciate them. I'll have a look at the Treehouse course in the design section. At least then I can have a basic understanding of using Photoshop. I guess I want to use it to sketch out ideas for possible design layouts.

Thanks.

Ryan Boone
Ryan Boone
26,518 Points
Ryan Boone
Ryan Boone
26,518 Points

I will say that in my experience, the best tool for design exploration has been a pencil and paper. There's a super-low learning curve and it's a lot quicker to iterate. In the early stages of design, fast and simple always wins.

Best of luck!

Anthony Mejia
Anthony Mejia
8,840 Points

I totally agree with Ryan! Pencil and paper is so much easier to use. Plus, you'll never run into problem of your paper having low battery.