http://pixil.info Production workflow podcast Tue, 23 Feb 2010 18:04:07 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Copyright © Pixil.info 2010 eckenruiz@gmail.com (Pixil.info) eckenruiz@gmail.com (Pixil.info) posts 1440 howto, productivity, workflow, design, development, photoshop, web, php, tutorials, reviews The Production Workflow Podcast Wersquo;re a group of passionate designers just like you. Wersquo;d like to share our ideas, thoughts, and techniques with you. Check out our tutorials videos on design, development and workflows. Pixil.info Pixil.info eckenruiz@gmail.com No clean http://pixil.info/wp-content/themes/pixil_new/images/podcast144.jpg http://pixil.info 144 144 http://pixil.info/downloads/3d-satellite-model-for-photoshop/ http://pixil.info/downloads/3d-satellite-model-for-photoshop/#comments Mon, 15 Feb 2010 23:50:57 +0000 admin http://pixil.info/?p=333

3D Satellite for Photoshop

Giveaway: 3D Satellite Model for Photoshop

]]> http://pixil.info/downloads/3d-satellite-model-for-photoshop/feed/ 0 http://pixil.info/tutorials/optimize-iphone-games-by-baking-texture-light-maps-in-maya-2010/ http://pixil.info/tutorials/optimize-iphone-games-by-baking-texture-light-maps-in-maya-2010/#comments Mon, 08 Feb 2010 17:07:23 +0000 admin http://pixil.info/?p=316

Episode 23

Optimize your iPhone games performance by Baking Texture Light Maps using Maya 2010.

]]> http://pixil.info/tutorials/optimize-iphone-games-by-baking-texture-light-maps-in-maya-2010/feed/ 0 00:01:01 Episode 23 Watch Video Play NowHD Streaming Video iPhone VideoYouTube Coming up on today's epsiode: Optimize your iPhone games performance by Baking Texture Light Maps using Maya 2010. Today will be ... Episode 23 Watch Video Play NowHD Streaming Video iPhone VideoYouTube Coming up on today's epsiode: Optimize your iPhone games performance by Baking Texture Light Maps using Maya 2010. Today will be using Maya Baked Lightmaps to speed up game performance. The trick is getting fewer texture draw calls by baking your shadows into the texture. First will start by creating a texture sheet. A texture sheet holds all of the textures that are used to make up characters and other models in the game. So by combining textures into one file, you can get a faster performance by using less cycles for each texture. For this tutorial we'll be combining all the textures that make up this cell room. For this example we'll use a size of 1024x786. After all the textures are combined, make sure even plain color shaders are also in the Texture sheet. Link all your texture UVs to the sheet. Now we'll Adjust the lighting in the scene, check the render to see the were the shadow are casting. Now Select all polygons and in the polygons menu under Mesh #60; Combine Create a automatic poly projection for all the ploys in the polygons menu under Create #60; UVs #60; Automatic Mapping Option Box Using the default settings, under UV Set make sure the UV set name is: lightmap hit apply Go into your UV Texture Editor and select the new UV set under: UV Sets #60; and then the lightmap uv set You can switch to original uv coordinates if you need to here While still having the ploys selected go to the Render Menu Under: Lighting/Shading #60; Batch Bake (metal ray) Option Box The under Settings options check Back Shadows, the rest should be ok under Texture Bake Set Override Color mode #60; only light Under prefix: use the name of the room to easily spot them out For the iPhone will use the X and Y resolution of 256x256. Didn't get any higher quality with a higher number so, We can leave the Number of samples to 4. Fill Texture seams at: 3.0 Make sure Override mesh UV set assignments is checked with the UV set name to: lightmap Click on convert to bake the map, This shouldn't take too long Ok, now if we look in our project file under renderData/mentalray/lightmap/. You can see the room0_lightmap.tif Maya created. Open it up to check it out, Pretty good Ok we now have both of the UV sets in the scene and the baked lightmap. Now we have to go to each object in the visible scene and create a Layered Texture shader for each. Then we have to attach the textures and UVs to the baked shadow's UV set. We can do this by right clicking on an object Assign new Texture #60; layeredTexture Object goes green, The first layer will hold the lightmap file. Add another file node and link it to the lightmap. For the Blend mode use: multiply. now we can go to the second layer and select a file node. We'll link that to the color texture sheet. The blend mode should be at: none. Now we can link the UV sets together for this object and it's texture. To set up the UV relationship we'll go Under Window #60; Relationship Editors #60; UV Linking #60; UV-centric Scroll down to find the texture for this object. By default both are linked to the color texture. Select the lightmap and link it to the lightmap UVs Map1 should deselect the light map UVs from the color UVs. Now let's test link by going into the UV Texture Editor and switching between the sets. Now lets do a test render of the scene with the light off. If linked properly the shadows from any objects should still be in the render! Now we just have to attach each object and texture to the lighmap UVs, thats how to bake light maps in maya. Hope this helps in optimizing your next iPhone/iPad game. Maya,,Tutorials Pixil.info clean No http://pixil.info/downloads/create-3d-box-in-flash-cs4/ http://pixil.info/downloads/create-3d-box-in-flash-cs4/#comments Thu, 08 Jan 2009 18:26:07 +0000 PixilStaff http://pixil.info/?p=115

Episode 14

How to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.

]]> http://pixil.info/downloads/create-3d-box-in-flash-cs4/feed/ 7 00:01:01 Episode 14 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files 3D Box Flash CS4Ecken's Tutorial Coming up on today's epsiode: How to create a 3D Box and animate it using the ... Episode 14 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files 3D Box Flash CS4Ecken's Tutorial Coming up on today's epsiode: How to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4. Step 1: Create a square shape Start by drawing out simple square. Hold down the shift key to constrain the proportions. Now lets change the solid fill to a gradient by going the color palette, and lets change the type to a Linear gradient. Next lets remove the stroke, just goto the stroke color picker and choose the None option. Now lets make sure our square is in the center of the stage, we can do that by going to the align panel and click on the horizontal and vertical align buttons. Step 2: Position #38; Convert into a Movie Clip Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol... alright now lets nest this symbol inside another movie clip, and lets name this one 3D Box. So inside the 3D box movie clip is where we'll be setting up the 3D layers. Step 3: Duplicate Layers for Each Box Side Alright so now we can just copy and paste a few of these squares on some new layers. And lets name each copy after a side of the 3D Box such as top, bottom, left and right. Step 4: Rotate Each Side 90#186; #38; Position in Place Now lets convert all the frames into motion tweens by selecting them, right clicking and Create Motion Tween. Now lets start with the top layer and rotate the X axis 90 degrees. You can hold down the shift key to constrained your rotation. Next we can go inside the motion editor to ensure our rotation was a either a positive value, or a negative one. Just to make sure everything is set the name. Now we'll want to move this top layer up about half of the way. So just calculate half the height of the square and move it up so it sets on top. I like to use the 3D Position and View Panel to do this because you can easily change the values there. Now lets repeat this process for the bottom layer. But this time we'll want move the half way down, so again just change the value in the 3D Position and View Panel. Alright so next lets start on the left and right squares. Starting with left, lets rotate the Y axis 90 degrees and shift it over to the left about half of the width of the square. Again we can go inside the motion edition to check our values. Alright now we can repeat the same process for the right square, but don't forget to move it to the right side instead of the left! Step 5: Test 3D Box Rotation So once we finish all rotating and positioning, we should be left with a picture frame looking set of rectangles. So lets jump out of the movie clip and goto scene 1. Now lets select our 3D rotation tool and watch as I rotate the box on its Y axis. Pretty sweet huh? Step 6: Add Drop Shadow Lets select our bottom layer, and lets goto the filters section in the properties panel and licks pick drop shadow. Lets change the blur X and Y values to something big like 100 pixels, change the quality to high, and distance to 0. Step 7: Animate 3D Box Rotating So now lets jump out to our main timeline and lets add a few move frames. Now Ill be using the motion editor to animate the 3D Box and have spin on it Y axis. So lets convert it the frames into a motion tween by right clicking on the frame bar and selecting convert to motion tween. Now we can scrub over to the last frame and then goto the motion editor. So if we want to just rotate the box spinning from left to right, we can simply change the Rotation Y value to 360 degrees.Test out the animation by pressing cmd+renturn (cntrl+return on PC). Downloads,,Flash,,Tutorials Pixil.info clean No http://pixil.info/downloads/3d-in-photoshop-cs4/ http://pixil.info/downloads/3d-in-photoshop-cs4/#comments Tue, 30 Dec 2008 01:18:17 +0000 PixilStaff http://pixil.info/?p=108

Episode 13

Today we're going to take a look at Photoshop's new 3D features.

]]> http://pixil.info/downloads/3d-in-photoshop-cs4/feed/ 1 http://pixil.info/downloads/3d-photoshop/ http://pixil.info/downloads/3d-photoshop/#comments Sat, 15 Dec 2007 02:14:15 +0000 PixilStaff http://pixil.info/?p=1

Episode 1

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.

]]> http://pixil.info/downloads/3d-photoshop/feed/ 4 00:01:01 Episode 1 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files PhotoshopPedro's Tutorial Coming up on today's epsiode: Using 3d objects inside Photoshop and Illustrator. When developing graphics for product, using 3D ... Episode 1 Watch Video Play NowStreaming Video YouTubeiPhone Video Tutorial Files PhotoshopPedro's Tutorial 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. Downloads,,Illustrator,,Maya,,Photoshop,,Reviews,,Tutorials Pixil.info clean No