Coming up on today’s epsiode:

We’re going to take a look at Photoshop’s new 3D features.

Adobe added features but deleted some compatibility available in CS3. Being able to import Product models for print, video and web makes a very efficient workflow.

Although new camera control abilities were added in CS4, an incredibly useful ability is no longer there.

Features add and deleted

3D mesh animation support no longer works in CS4. This mean 3D models with animated parts no longer playback inside photoshop. The new 3D UI has deleted the timeline scrubber for the mesh. Making layer styles out of one object with different product stages would be a great workflow. You can still use CS3 for this, but wont be playback in CS4. Hopefully Adobe is able to bring this feature back. Being able to save all collateral as one psd file would save a lot of headaches. So to use playback, I import my Maya model into 3D Max and export it as a .3DS file.

CS3 Mesh Animation Workflow

You can just open it photoshop cs3. Then just set each layer at the need keyframe. Now set a layer comp for each state.

Coming up on today’s epsiode:

We take a look at using layer comps to change the overall looks of a layout.

In a past episode, we talked about using layer comps to save time when building out websites. Today we going to take a closer look at layer comps, and how they can change the entire look of your project.

Alright so lets say your client likes the layout… but ask you to change the color scheme. Lets also say our client doesn’t know exactly which colors to choose. Instead of picking just one, our client suggests several color schemes. So the best way to do this… in a non-destructive way, is to use Layer Comps.

Step 1: Create a new layer comp.

First, save our project’s current state, so lets open up the layer comps palette and click the create new button. Lets go over these three check boxes.

• Visibility keeps track of what layers turned on or off
• Position stores the location of your layers.
• and Appearance holds all of your layer style information.

So depending on how drastic you want your layout to change, you’ll need to check the appropriate boxes. In this example all use all three.

Step 2: Changing your layout.

Now that we’ve saved our current state, lets start changing stuff around! First I’ll start with changing the colors. I’ll be using layer styles to do this. So once the color is changed on this first layer, we’ll copy that layer’s “layer style” and paste it on other layers with similar attributes. Check out how I can change all of these text layers at one. To do this, I’m using the cmd+shift while clicking on each layer. Right click, and paste the layer style. Works great in situations like this.

Alright next, I’m going to flip the sidebar and content. I’ll need to change the position of the gradient on the sidebar background color. Next, Lets switch to the header image to something more appealing. Just turn this one on… and the other one off.Alright, once your happy with your changes, lets save it out as a new layer comp. So in the layer comp palette, create new, leave those boxes checked and okay!

Now lets switch between these two colors. Okay looks pretty good, so now lets setup another color. So just repeating the same steps from before. Alright here we are….. It’s pretty amazing switching thru layer comps like this. Sorta resembles Javascript Style Sheet switching.

Alright so with all that done. Let’s export these out. I’ll be using the “Layer Comps to Files” export script. If your on CS4, you’ll notice adobe added a few new file formats. Alright and with that, you’ve just created an advanced layer comp workflow. Take a moment to play around with the position and appearance, try to create something totally different!

Coming up on today’s epsiode:

Jermbo shows us his painting techniques in photoshop.

Well lets go a head and open up photoshop. I like to start out with a sketch and scan it in so i have a good base to start painting on. The first thing I like to do is make a white layer and place it on the bottom on the layers.

Then I set the sketch to about 50% opacity. make a new blank layer on top of the sketch and start painting. I have completed some of the painting before but you can see the layers of what i have done. On that first layer above the sketch I grabbed the brush set the opacity to 20 or 25% and slopped on color to get a basic color pallet. Once the base colors are placed down, i make a new layer and start blending the colors together.

I like to use the eye dropper to pick my next color, that way the colors stay in the came range. I turn on and off the sketch and bg layer to see my progress at times. Now that I am happy with the hands i will start on the bg. the easiest thing I do is make a new layer and set it behind the hands layer.

Coming up on today’s epsiode:

We take a closer look at using layer comps and smart object for web build out. Find out how these techniques can help you save time and keep organized!

How to Create Layer Comps for build out:

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.

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.

Coming up on today’s epsiode:

Using 3d objects inside Photoshop and Illustrator. When developing graphics for product, using 3D objects can help position graphics on products more easily and is a huge time saver. Before we had to take pictures, or make a 3D objects inside illustrator. Photoshop’s 3d abilities get around the limitations of illustrator. By allowing you to more quickly visualize objects you rotate in your comp.

3D Objects in Illustrator
In illustrator we’ll draw half of the objects path under Effects, 3D, Revolve. We then map the lable. Then copy and past it into photoshop. Now this is great, but if we needed to rotate the object, we have go back into illustrator. Heres where we start to see the cons.

First we can’t see what it will look like on the comp. We have to re-render the object each time we move the object around. We even have to re-render if we cancel out.

3D Objects in Photoshop

Photoshops ability to read 3D objects is a huge time saver. To set this object up, we can model in any 3D app. We’ll using maya in our example. We can Modify a cylinder and or import an illustrator curve and revolve the surface. A couple things to keep in mind when texturing. First is to not use a small pic to repeat a pattern. Make sure the textures are big enough to cover your UVs. Second is that material shaders will not export. To make a color make sure the add it to your texture map. Another draw back is that lights do not render correctly. We can export this as an OBJ file. Here we can see the two file it exports. The .obj and a .mtl fle that has info on the textures. In addition you will also need the 3 textures files this object use for its cap, label and bottle color. Open up in photoshop. We can use the default size. So we get to our 3D tools by double clicking on the layer. The tools open on at the top. We select the rotate and roll tool to orbit around. This doesn’t look like the texture was in maya. The light info isn’t read properly. We can change the light settings and render mode to something else. The one I found that looked the best is under render mode, shaded illustration. Thats better, but the con to using this render is that it adds a stroke around the object. We can workaround this by cranking up the crease threshold all the way up. Then we can change the line color. If we drop down the the layer options, we can see the textures attached. Something to keep in mind is that we can’t add any new textures, but we can edit. We double click the texture name to open the texture.Inside the label texture we can see that it can handle multiply layers. This make editing so fast and easy. Just save to update any changes that always come up. The file does not overwrite the original file, but imbeds it as a psb file. Plus we can still apply layer styles.

So that’s working with 3d objects in photoshop and illustrator.