Designing in Photoshop then exporting

The way I would do it is say your using the 960 grid system. Grab the CSS file and the PSD file. Then in Photoshop load in the PSD and then design your site around the grid. Once complete and ready to turn it into a real site, don't use the slice tool at all. What you need to do is ascertain what can be recreated in CSS and what cannot. Nowadays most things can be recreated in CSS3. So for the things you can't recreate in CSS like images and maybe the logo grab the Marquee Tool(M) draw around the things you want to turn into individual files copy it open new doc and paste then save for web as either .png, .gif, .jpeg all depends on quality you need and file size eg PNG for transparency etc. Once all assets are exported. Open up your text editor and get all the content on the page using HTML then over to CSS to create your layout. Keeping PS open is good so you can get colors and sizes of areas margins etc.

Hope this helps.

Any more questions then please ask or if unclear i would be happy to help

Thanks Adam

Hi Gareth,

Congratulations on completing the HTML and CSS modules! This is an interesting question so I'm going to attempt to give you a few options. First off, I'm a gold member and after a cursory glance at the library I can't see anything that specifically tackles how to layout web pages in photoshop ready for export, but don't quote me on that!

The first thing to note is that photoshop isn't your only option and doesn't have to be your go-to tool. In fact, lots of designers prefer not to use it. It's a very specific way of working with layers, and although lots of designers use photoshop, often you'll find it's because it's a tool they've been working with for a long time and so are very familiar with how it works. This may be the case for you too.

So what else is there? Well, many design agencies and freelancers I know have been using Adobe Fireworks for comping out designs. It's specifically built for web design/optimisation and has a good mixture of vector and bitmap tools. You also get multiple pages, master pages and other neat web design tools. Unfortunately Adobe announced recently that they're stopping updates for Fireworks, much to the anger of designers around the world. However it will still receive one major update before it's put to sleep!

If you're an Apple Mac user then there's a great alternative that's whipping up a storm at the moment. It's called Sketch by a company called Bohemian Coding. It's still a new product but already has a great set of features for specifically comping out web designs, including a built in adjustable overlay grid you can use on your page designs. It's also purely vector based, and uses tools that match up to how effects are generated in CSS such as drop-shadow and gradients. In fact, right-clicking on any piece of your artwork will give you the CSS code to simply drop into your .html files. It's very inexpensive, you might want to give that a look if you're on a Mac: http://www.bohemiancoding.com/sketch/

So back to your question about the grid and designing your web pages. The method of creating entire web design page layouts in an art package like photoshop is actually the "old" way of doing things. If you're doing client work, it can have a negative impact on how you deliver a project. Designing entire pages in artwork first is firstly very time consuming. Secondly, the artwork never ends up being exactly how the web page looks, which can cause problems when you have to explain to clients why things look different in the real web page to the artwork you submitted.

Designers are moving away from this paradigm and instead creating what has been termed as "Style Tiles". These are essentialy "mood boards" that layout the principle graphics such as navigation, type, colour options etc. I create 3 Style Tiles for a client and then use the chosen Style Tile for creating a wireframe (a basic layout of home page and internal pages). This is often referred to as "Designing In The Browser".

This all may be a bit beyond where you are in your studies for now, but it's helpful to know best practices before you invest too much time doing one thing only to have to do another. I still often design entire pages in Sketch so designing-in-browser is not a hard and fast rule. Just another way of getting things done without having to worry about pixel-perfect artwork.

So, from here I'd really recommend you firstly consider an alternative to photoshop. Some good arguments against photoshop can be found here:

http://blog.mengto.com/sketch-vs-photoshop/ and a small discussion on the topic here:

http://css-tricks.com/forums/topic/sketch-app-vs-photoshop/

Here's what I recommend

• Learn SASS (it's extraordinarily useful for your CSS work, I believe Treehouse have a brand new course on this)
• Learn about Stile Tiles (http://styletil.es/)
• Use your art package to design style and form, instead of page layout
• Use a CSS framework to design the layout of your pages then apply your styles so you're not worrying about pixel-perfect grid layouts in your art package (E.g. Bootstrap or Foundation). A framework isn't necessary but get's you off to a flying start with minimal effort.

If you're set on using photoshop for now, you can check out this beginners tutorial on how to lay out artwork in photoshop. (Note that this is a pretty old article now) http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop

I hope that helps. Feel free to reply if you have any questions. I'll do my best to answer them.

Also, just spied this blog post on teamtreehosue... http://blog.teamtreehouse.com/theres-more-than-one-way-to-mockup-a-website ... might prove useful!

Thanks everyone for getting back to me. Sorry for the late reply!

I suppose because I learnt originally in University the age old way of designing the site in Photoshop, then using the slice tool etc to export. From there it was dropping tables and onto DIVS along with CSS, which made life much easier.

I've been away from it for a while, so I've come back for a good refreshing course. I must admit that a lot has changed in the last few years! Especially the grid system and responsive design!

I need to look at alternatives, especially the ones mentioned above. I'm also a photographer, so Photoshop is 2nd nature to me now as well. But if there are faster ways of doing things, I'm all for it! Especially as time is money.

What I have been playing with recently, is a Grid overlay in Photoshop. I'm using that to drag elements onto mockups. Do you think this is the wrong way to go about it? I've noticed a lot of designers are using the Grid method like this, plus it's vaguely covered in one of the Grid modules here on Treehouse. I suppose there will always be multiple ways of doing the same thing, but ultimately I'm looking for the best method. Especially when it comes to creating websites for my portfolio.

One last thing, do you recommend the Grid system? I want to make sure that all my websites are responsive, so from what I've read and learnt so far, this seems to be the way to go about that.

Cheers, Gaz