Pixil.info

Coming up on today’s epsiode:

Using layer comps and smart objects to set up sub-pages and ready-to export slices for web build out. By creating slices inside of smart objects and organize your layers and folders, this can drastically help you structure your comp for buildout.

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.

• 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.