Pixil.info - Episode 4 - Web Buildout

So on my last tutorial, we took a look at using layer comps and smart object for web build out. Today, we're going to take a closer look at the How-To's and Go In-depth. Alright so when your design is ready for build out, you'll want to first make text layer comps. This will help us easily export our slices. So just click on the new layer comp icon in your layer comp palette, and name it Text On. Make sure you only have "visibility" checked. Next, make a Text Off layer comp. Then start turning off all the HTML text. To select a text layer with the move tool, you can hold down cmd or control key and click on the layer. So with all the text turned off and the layer comp selected, click on the Update icon to save the layer comp. Okay, now we can cycling threw them. This will now let us quickly turn off all the HTML text with a single click, which will lets us to export slices much faster.

How to setup the Navigation for build out (with Smart Objects):
Next, let's take a look at our navigation. The goal here is to set up the document to have roll over graphics. we can do this by converting the nav into a smart object, and then create roll over graphics along with layer comps and slices. First make a selection of the background layer, make it the size you want the smart object to be and convert it that into a smart object. So just copy merge, Paste, and name the layer. Right click the layer and convert to a smart object. Now open the smart object and copy the graphics over. just click and drag on the folder, and plop it into place. Now we have to double our canvas height. Basically we're going to set up the navigation for the CSS sliding doors technique. Duplicate the background layers and folders then shift them down. Create some cool graphics for the roll overs and save. When you switch back to our main layout, make the same marque selection of the background layer. Make that into a mask so you can mask out the roll over graphics. Also you might get warnings the layer comp palette. All you have to do to fix these is to hit the update icon or double click on the warning icon to clear the warning flag. So just cycle threw the layer comps and make sure their set properly.

How to setup Sidebar for build out:
Okay next, we'll convert our sidebar into a smart object. So just like before, create a marque selection to determine a canvas size for our smart object. drag over the graphics Adjust the layers, save it. Next create text layer comps. These may become tedious if your layers aren't organized, so its important to have layer organization.

How to create slices for build out:
Creating slices is a much better method then manually making selections, and exporting each image, piece by piece. By creating slices, we're able to save image name, compression setting, dimension, and the ability to export them out all at the same time. Before we start slicing, make sure we have guidelines set up so that they snap easily. Now draw out some slices. Name your slices simple and Make sure they're all consistent. So having a naming convention comes in handy. Next create slices in your smart objects. When you export your slices, make sure you switch to the Text Off layer comps. In the Save for Web & Devices dialog, you can change the name of the slices and set the image compression settings. In our save window, we can set to export selected slices only. I almost always have it have it set to this setting. Next export the slices inside the smart objects. You can select multiple slices by holding down the shift key and set the compression settings for all them at the same time. Check on our images when you're finished. Alright, that's it for my web build out workflow. I hope you've gotten something out of it, try it out. Let me know what you think, by post some comments. I'll be posting the PSD file on our site for reference. So you can download it and test it out. Remember, its all about using slices, layer comps, and smart object's. Dont forget, the key to making it easy is to being organized. Until next time, im ecken, cya later.

Pixil.info - Episode 2 - Web Buildout (Overview)

On today's episode, overview of using layer comps to set up sub-pages and ready-to export slices.
Creating slices inside of smart objects and organize your layers and folders to help you structure your sub-pages.

Layer Comps for Build Out
Layer comp are a convenient way to store a snapshot of certain aspects in a document. Here we're able to save a layer's visibility. Take a look at these two layer comps, text on and text off. When we cycle thru these two you'll notice that all this is really doesing is turn off and on the soon-to-be HTML text. By having your comp setup this way, it allows us to quickly export slices with out having to worry about the html text getting exported along with a background image.

Smart Objects & Slicing
Here we have an entire sub-page reside in one smart object. Inside our smart oubject we have slices and layer comps. Thats right folks, smart objects support slices. By converting your sub-page into a smart object, your able to create new slices for each new page. Also, notice we have our handy text on and text off layer comps. This is essential for exporting your slices. So in addition to converting your sub-pages into a smart objects, lets take a look at how we have our navigation set up. Here you'll find our favorite text on and text off layer comps. We also have our slices.

Just by looking at the layout, you'll notice we have it set up for the CSS sliding doors technique. This basically allows one background image contain different anchor states. so If you've done css menus before, you know the drill. thats basically all their is to the navigation. Alright so to sum thing ups, lets take a look at what we've learned so far.

• Use layer comps to set up sub-pages and ready-to export slices.
• Create your slices inside of smart objects.
• Organize your layers and folders to help you structure your sub-pages.
• Don't forget you can convert pieces of your website into smart objects.