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 Photoshop Foundations Slices & Save for Web Optimization: Part 2

Rachel Varon
seal-mask
.a{fill-rule:evenodd;}techdegree
Rachel Varon
Front End Web Development Techdegree Student 16,723 Points
Posted by Rachel Varon
.a{fill-rule:evenodd;}techdegree
Rachel Varon
Front End Web Development Techdegree Student 16,723 Points

Original image that we sliced??

Great lesson! I learned a lot about file types and optimization. I am wondering though, the original image that you used and sliced up of the "Smells Like Bakin'" site, was it a prototype of the website? Why are you slicing it up to start with and how did it come to be? If it is an existing website, why do you need to slice it? This may be too basic, but in the design flow and process, where are we? Did you design the site and are now building it or are you optimizing an existing site? Thank you.

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Rachel, sorry if I didn't explain that well enough. It's a good question actually. Some people prefer to work in programs like Photoshop or Illustrator to first create the visual design. It was a very common thing in the past to do this, although it's becoming less common with the advent of newer tools and design workflows.

It used to be that some web designers would create all the graphics for a website in a graphic design program, and then slice them out of the document to later code the images into a web page. This isn't to say that people still don't do this, but with new features in CSS it's getting a lot easier to recreate gradients, shadows, and even some graphics using pure CSS. A good thing, right?

Well I like to think so! Anyhow, Treehouse from my experience tries to cover a little of everything so you get the full experience, methods and tools used by web designers. Below are some resources I think you might like for different design workflows. Hope I was a little bit better explaining this time. Sometimes it's a little difficult to grasp the question. :smiley:

Workflows, Mockups and Prototyping

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hey Rachel, if you're referring to Slices & Save for Web, it's mostly for demonstration purposes.

However, if you're looking to get experience on the actual design and mockup process, I've included a couple workshops below on that. I'm not sure if this answers your question fully, but I'd guess more graphic design courses will become available in the future. You might also look out for the new Web Typography course that should come out any time now.

Wireframes, Photoshop Mockups, & Creating Favicons

Welcome to Treehouse and best wishes on any new-learned skills!

Rachel Varon
seal-mask
.a{fill-rule:evenodd;}techdegree
Rachel Varon
Front End Web Development Techdegree Student 16,723 Points
Rachel Varon
.a{fill-rule:evenodd;}techdegree
Rachel Varon
Front End Web Development Techdegree Student 16,723 Points

Thank you for responding Dustin. So are you saying that it was only a demo exersize and wouldn't generally be a part of the design process? I guess I'm just not really clear on why we slice at all. :)

I will check out the courses you recommended. Thanks