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 Oscar Overlund
Oscar Overlund
100 Points

Custom Illustrator/Photoshop Layout to Development

Hi

I create my own layouts in Illustrator and Photoshop. I cant see in any of the tutorials on this site where it shows us how to work with designed layouts from illustrator/photoshop in the development stage. Can anyone confirm if there are any tutorials that show this?

Thanks

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Tagging Nick Pettit to get his thoughts on this

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Oscar,

Creating a layout in Photoshop and slicing it up into HTML is sort of an old way of thinking. This is a very complex topic to get into in a forum post like this, but I'm planning to write a blog post in the near future.

For now, you may want to check out Photoshop Foundations where we discuss slices and saving for the web. That's the closest to what you're probably looking for.

9 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's what CSS is for.

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

^ lol

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I was actually serious if a bit terse. I think the industry is moving away from slicing up PSDs.

I think the original poster's mental model is something like this:

Whereas Treehouse is using a mental model closer to this

ziddy
ziddy
3,463 Points
ziddy
ziddy
3,463 Points

I've been wondering the same issue here. There is no course teaching about slicing the .psd file into html/css. Because in real world, designers design in Photoshop and slice it into html/css.

In the Smells Like Bakin', they are not teaching how to slice..the files are already been sliced and used with grids. Waiting for that tut..because no one just build website directly using frameworks..without designing the mock up first in Photoshop.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The web is moving away from slicing this is a great example they start with Photoshop mockups and build things with little slicing required.

http://webdesign.tutsplus.com/sessions/bringing-premium-pixels-to-life/

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

I agree. I build my sites the other way around:

  • wireframe first
  • get functionality in place second
  • then develop the graphics as needed

I usually end up developing each graphic asset on its own. In my experience marketing, who usually make up the screenshots with PSD files, want it a certain way, without necessarily considering UX or UI best practices (this was when I worked in larger companies 5 or 6 years ago). Making the graphic assets last also keeps you more agile (not in the SCRUM meaning, but you can be reactive) to client's needs if they don't like something and want changes.

Sorry I got in late on this conversation, but it's very apropos and interesting!

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

That would be interesting to see a tutorial on that. I do agree that the Smells Like Bakin'" website tutorial was lacking some key information on how they got everything they used for the project. However I wouldn't say "no one" builds a website directly. If there's one thing I've learned it's that everyone has their own methods of doing everything when it comes to web design. There is no set way of doing things.

ziddy
ziddy
3,463 Points
ziddy
ziddy
3,463 Points

I have to say that you are right Josh.

Just for Treehouse attention, I don't really think that Web Design tracks is for web designers. It is just teaching developing on the front-end, which is likely for developers mostly.

In my view, a web designer should be taught how to design the website in Photoshop (or any other software) first. Then, should be taught to slice it to HTML/CSS.

I know about Treehouse long time ago but did not sign up because they do not teach design in Photoshop. That what makes me sign up with Tutsplus because they have many PSD to HTML/CSS course.

What makes me subscribe to Treehouse at last because the teachers are talking to us like in classrooms. And the quiz, rewards make the learning process more fun.

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

That's true. Hopefully Treehouse will come out with something this year that solves that issue. I also agree that the web design track is mainly for front-end developers. I personally have zero experience designing in the Adobe Suite and I think more graphic design tutorials or tracks would be helpful.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> In my view, a web designer should be taught how to design the website in Photoshop (or any other software) first. Then, should be taught to slice it to HTML/CSS.

Creating pixel perfect design and slicing designs are pretty bad ideas.

Check out this article on why to kill photoshop over on the Treehouse blog.

2 good articles on this topic one that wonders if we are in a post-PSD era and the other discusses tips for designing in the browser.

Here are a few articles that provide some great commentary on how to design in this responsive world:

Mike Bronner
Mike Bronner
16,395 Points
Mike Bronner
Mike Bronner
16,395 Points

Thank you, James! Well said, and thanks for the links to the resources as well. I'll read up on those, too! :)

ziddy
ziddy
3,463 Points
ziddy
ziddy
3,463 Points

Good article and explanation but to me, it shows that Treehouse does not like Photoshop. Do you hate it?

A designer still need to wireframe and design the mock up first. Get some inspiration to design a website that has aesthetical value.

We design for client, not for us. It is not about us. It is true that client cannot open the PSD file, but what they want is good graphics (eye catching + beautiful + good ux/ui).

So, how do you guys design this Teamtreehouse website?

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

James,

Thanks for this info!! I'm still new and I feel like learning this early on will be beneficial. However, even if web designers no longer use PS that doesn't mean that clients or potential employers won't put it as a requirement for the job. What's the workaround for a company/client that wants you to know the Adobe suite if you don't want to use or just don't use it?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Treehouse does have a basic Photoshop & Illustrator course and those are probably good skills to have. This article on repurposing Photoshop has some great ideas on using Photoshop in a more responsive less slicy way. As the article points out the issue is less with the tool and more with how we use it, remembering to use the right tool for the right job.

If you want to be a designer then you need to get good with designing things for that I'd recommend:

Josh Hicks
Josh Hicks
14,146 Points
Josh Hicks
Josh Hicks
14,146 Points

So that brings us to the question of just how much "designing" a front-end developer NEEDS to know? Sorry for hijacking this entire question Oscar!!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Probably the stuff I've linked to would be really useful. I don't think you need to look at particular courses on color or typography.