Course info
Apr 24, 2015
2h 30m

This course will show you how to create a mockup inside of Photoshop, name the layers correctly, and group them for easy asset generation. Then you will learn how to extract the assets out of Photoshop CS6 and Photoshop CC and CC 2014. Finally, you will create a website from the mock-up and learn about the pipeline from design to development.

About the author
About the author

Todd Shelton is a Front-End Web Developer making mobile/web applications. He is a lecturer at IUPUI's School of Informatics and Computing in Indianapolis, Indiana. He runs a successful user group called Dev Workshop, and hosts an annual conference in Indianapolis, IN called Dev Workshop Conf.

More from the author
JavaScript Animation with GSAP
3h 12m
Apr 7, 2016
Section Introduction Transcripts
Section Introduction Transcripts

Hello I'm Todd Shelton and I'm going to be your course instructor for Design to Development. We're going to take a look at how to create a mockup inside of Photoshop. It doesn't matter which version you're using, CS6 or Creative Cloud, but inside of that mockup we're going to learn how to create the layers, name them correctly, and even group them correctly so it makes it easy and efficient to export those or extract those assets out of Photoshop and into our development environment. That's basically what this course is going to be about, is extracting all of those assets out of Photoshop very efficient and also the pipeline we're going to use to get our assets out and into the development environment is going to save you time and money, which in the end is better for the client. Let's take a look at what we're going to be developing.

Asset Generation with CS6
Welcome to this module on Asset Generation with CS6. During these sections we're going to talk about all the tools and ways to extract the assets out of Photoshop so we can get all of our images or anything else, for that matter, out to our projects. We're going to talk about such tools as the crop tool, which I would not recommend using a lot. You will use it a little bit, but you won't use is as really an asset generation tool. The next one is the slice tool. This has been around for a long time in Photoshop and people have been using it for quite a while. It did serve its purpose, it was a great tool, I still use it from time to time, but not very often, only if I really, really need it. Smart Objects, when these came around they were great, I love them and personally in Photoshop CS6 these are the best way to extract your assets and I'll show you why here in a little bit. Then we can also use the selection tools to get our assets and move them to a new layer or whatever to extract those. Again, the selection tool is not best the tool, almost like a crop tool. They have their purpose, but their purpose really isn't to extract assets. So let's go ahead and get started in the next section extracting our assets with the slice tool.

Website Creation and the Design to Development Pipeline
In this module we are going to learn the pipeline from our mockup inside of Photoshop to our website development environment. It's very easy using the Creative Cloud 2014 Extract Assets that we learned in the last module and it can still be done using CS6 and prior, it's just that using the older versions of Photoshop you have to save each image out in its own folder inside your development environment. I think you'll find that the way we're going to learn with Creative Cloud is really easy to get our assets out and into our development environment very quick and that is important, time is money. So let's get started talking about our development environment.