« Posts tagged Photoshop

[Game] Digital Painting

I don’t do digital painting that often, but I’ve been drawing more and I thought it would be fun to take a sketch from my pad and see it through digitally.

Photoshop CS4 was terribly slow through about half the process. I couldn’t even paint in real time on my tablet. I installed CS5 and the problem went away. No more slow down. At the MIGS convention last year one of the artist from Volt had a great suggestion. He mentioned that you can have two copies of the same document in Photoshop open at the same time. This helps you always have a one to one version up on a separate monitor. I loved doing this. It was really helpful to be zoomed in working on one screen and then be able to see how my changes were effecting the 1:1 scaled document on the other. This option is under the “Window” > “Arrange” menu.

I’ll be back soon with another project. I’m just testing out how I can create some really great looking moss using polygons. That’s part of why I painted some into this scene.

I also wanted to say “Thank you” to everyone who have been sending in questions. I’ve been getting a lot more than I usually do and they’re always fun to answer.

Digital Cliff Painting (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2014/01/cliffpainting2 NULL.jpg)

 

[R&D] Grey Packing

Grey Packing Method

Whaa, hugh? What the heck is it? Well grey packing refers to creating textures in photoshop that in and of themselves are not particularly useful, but each channel of colour, and possibly even an extra alpha channel contain useful grey-scale textures.

Think of the complete texture as a container or vehicle for getting as many materials as you can into your game or application as efficiently as possible.

A lot of materials use grey-scale textures for values. If you create a 32 bit image (targa for UDK) you can stack 4 grey-scale images into your file and that’s decreasing your memory usage by 300%! and using one quarter of the draw calls for those materials.

Grey Packing Method (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/04/graypacking2 NULL.jpg)

To do this just go into your channel tab (next to layer) in Photoshop and you’ll see your four channels and their composite channel at the top. This is where you are going to copy and paste your grey images into. If you want another channel just create one with the new layer button. By default this channel is called “Alpha”.

Don’t forget to export as 32bit otherwise you’ll lose that extra alpha channel.

Cheers

Maya opticalFX Sprite Textures

Sprite Texture Thumb Image
Introduction
Prerequisites

Appreciation for all things shiny.

Magic effects in video games are sweet, but do you know what’s even sweeter? Knowing how they work so you can make your own. That’s what we’re going to do here. We are going to learn how to make awesome looking sprites in Maya so we can bring them into the Unreal Development Kit for our own special effects. First we’ll take a look at what sprites are, followed by how to render optical effects using a spot light in Maya. Next Photoshop will be used to touch up and save out our images for import into the Unreal Development Kit. Follow me and we’ll “get our learn on”.

Sprites are single polygon planes who’s surfaces are mapped with an image. For visual effects these sprites are usually programmed so they always face the active camera. This means however you look at a sprite in 3D space it will Sprite Based Tree (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_tree NULL.jpg)always be facing directly towards you no matter where it’s positioned. Sprites give an accurate enough representation for a variety of visual effects. Things like snow, muzzle flashes, and small pieces of flying debris look the same no matter what angle you view them from. Even visual effects such as lightning are so quick that you wouldn’t even notice that the effect isn’t truly “3D”. If this is the case then why would we bother giving these effects any extra dimensionality?

Sprites are also simple to render. If all your sprites are single polygon planes you can afford to have a lot of them on-screen at the same time. Throw enough of them together and you can get some pretty realistic looking effects for a lot cheaper then pre-rendered graphics. The picture to our left shows a tree who’s leaves are made of a few larger sprites. No matter which way the camera looks at the tree the leaves appear to be full of volume.

Maya

Point Light Optical Effects

The optical sprite we are creating will be based off a point light. Once created the point light will be manipulated via the “Optical Effects” node to give our light different properties. To do this access the “Create” menu at the top of the screen. Navigate to Lights>Point Light and select it. You should now have a point light at the origin of your axis. The optical effect we are after is not visible by default on our point light. We have to turn it on in the Attribute Editor (ctrl+a). Select the point light and access the Attribute Editor. Under the “pointLightShape1” tab we are going to expand the “Light Effects” section. In this section the last option is “Light Glow”. Turn this on by clicking the checker board button on the right of the text field. If you’ve done this correctly you will see a circle around your light and the Attribute Editor will have jumped to the properties for the “opticalFX1” node you just created. Our point light is now set up to cast some great looking optical effects.

Render Camera Setup

opticalFX Render Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_scene NULL.jpg)Go back to the “Create” menu and navigate to Cameras>Camera and select it. You should now have a new camera also sitting the axis origin. Select your new camera and Move (“w” key) it away from the origin. Now that we’ve finished placing our new camera we will go ahead and look through it. Select the new camera and in your view port menu navigate to Panels>Look Through Selected Camera. You should now be looking straight at the point light we created. The last thing we want to do to our camera is make the “Resolution Gate” viewable. This will let us see the bounds of our render. To do this we will use our view port menu and select View>Camera Settings>Resolution Gate.

By default your resolution is probably not square. We need to make it square so we can use the images we create in the Unreal Development Kit. To change this let’s go ahead and navigate to the “Render Settings” through Window>Rendering Editors>Render Settings. Change your settings to match these options (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_renderSettings NULL.png). With that setup we are now ready to start rendering out some optical effects.

Rendering Optical Effects

The optical effects we are using render out very fast. This will enable us to view near real-time previews while changing the visual settings. To view our render we are going to open up the “Render View”. This can be accessed through the main Maya menu: Window>Rendering Editors>Render View. In the Render View menu select IPR>IPR Render>camera1. This will setup interactive rendering on the camera we created earlier. The last step to setting up IPR is to marquee drag over the entire renderable area. When you do this the edges will become red. Any changes you make to the opticalFX node will now be instantly seen.

Important Note: Maya’s opticalFx are only viewable in “Maya Software” render mode.  Make sure this is selected as your render mode in the Render View window

opticalFx Node Properties

If at anytime you loose focus of the opticalFX node you can access it by clicking on your point light, bringing up the Attribute Editor, and navigating the tabs at the top to find “opticalFX”. Right now you want to have your Render View open as well as your Attribute Editor with the opticalFX node tab viewable. The following section is a visual comparison of the basic opticalFX  properties we will be dealing with in this lesson. There is a lot more you can do with this node than the sections listed below, but this is a beginner lesson so I want to keep things simple for now. Try experimenting on your own after to see what some of the other settings can do.

Optical FX Attributes

opticalFX Radial Frequency Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_Radial NULL.jpg)

opticalFX Star Points Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_StarRadius NULL.jpg)

Glow Attributes

opticalFX Glow Intensity Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX Glow Spread Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX GlowNoise Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowNoise NULL.jpg)
opticalFX Glow Radial Noise Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX Glow Star Level Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)

To save a render in the Render View you need to use the File>Save Image option. don’t get caught up colouring your optical effect as we will be stripping the colour from within Photoshop. When you are making your effects don’t forget that we can’t have parts of the star breaking the edge of our render. The images are going to be put on flat square sheets in the Unreal Development Kit. If the sprite images extend past the edge of the render they will give away our effect showing its 2D nature. When you have saved three renders that you are happy with move on it the next section.

Photoshop

Saving Sprites For The  Unreal Development Kit

First let’s go ahead and create a New File (ctrl+n) if you haven’t already. Make sure it’s a square 512px file just like the images we rendered out of Maya. We want these to match up as we’ll be exporting this file for use in the Unreal Development Kit. Open (ctrl+o) all three of the sprite files you rendered out and change each of them to grey scale. We can do this by dropping the saturation of each file down to zero. While the layer in each file is selected access Hue/Saturation (ctrl+u). Now drag the “Saturation” slider all the way down to the left and this should drain the colour from your image. Before we jump into the next step I want to take a moment to explain what “Channels” are and how we can use them to our advantage.

Channels

Channels Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_channels NULL.jpg)Each digital image is made of 3 different colours. You probably know what they are if you think hard… red, green, and blue. Photoshop stores this information in “Channel” layers. You can access these through the Channel tab in your layers window or through the “Window” menu. Each of these channels stores 8 bits of information. That means the value for each pixel in a channel is stored as a number from 0-255. As the value gets higher the pixel’s channel value becomes stronger.

In the “Layers” tab all these values are added up for each pixel and you get the full colour view you see as the image. A pixel with a value of 255 in each category would be represented as a compiled colour of pure white. A pixel with channels values of R(255) G(0) B(255) would compile as purple. So what does this have to do with what we’re doing? We’re just saving out pictures for sprites, right? Yes, that’s correct, but we’re saving black and white versions of our sprites, as we will be manipulating the colour from within the Unreal Development Kit in our next lesson. This means that the actual compiled colour of our texture doesn’t matter. This is going to let us store 4 different sprites in one file! Yes that’s right I said “four”. We can add an “alpha” channel to our Photoshop file and get one extra channel.

So now that we know all about what channels are and how we can use them let’s start putting our sprites in our new file’s channels. Go ahead and Copy (ctrl +c) one of the desaturated sprite images from your open files. Navigate (ctrl+tab) to your “new document” and access the channels information. In your new document all the channel information should be blank as you haven’t pasted anything in the layers section. Paste (ctrl+v) the sprite you just copied in a channel. The process is the same for all your other channels. Go ahead and copy the other two sprites you saved into the remaining red, green or blue channels. Remember: our final texture image isn’t important here.

Circular Gradient (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_gradient NULL.jpg)The alpha channel in our texture will not have a sprite. We are instead going to insert a circular gradient that will help us control the look of our sprites from within the Material Editor. Select your Gradient Tool (“g” key) and make sure your foreground colour is black and your background colour is white. Also be sure that the “radial gradient” option is selected atop Photoshop. Navigate to your channels tab and press the “Create new channel” button. This will give you an alpha channel to drag out our gradient in. Select this channel and from the middle drag out to the edge and let go to create your circular gradient. When you have finished save your Photoshop document as a Targa file under the “Save As” section of the “File” menu. When presented with your options for the Targa format select “32 bit”. This will save the file with the extra alpha channel. Remember that each channel is 8 bits so a 24 bit Targa holds 3 channels and a 32 bit will hold 4.

Conclusion

Don’t those sprites we made look awesome? Maya’s optical effects node can get you a lot of different looks so have fun an experiment to see what you can come up with. Try mixing multiple sprite images together within Photoshop and using their combined values in a single channel. Now that we know how to make magic sprite shapes and have saved them out in an efficient format we can take them into the Unreal Development Kit. In our next lesson we’ll use our sprite texture as a base for controlling the look of our sprites through a material network.

Here are the three sprites I will be using in the next lesson about our material controller. Just for fun I thought I would add some colour to them in Maya :)

My Sprite Textures (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_mine NULL.jpg)
.

Further Reading

Sprite Material Controller
Make a Particle Explosion Effect by Mike McClelland
Sprite Rendering Fundamentals The Gnomon Workshop
Pixie Dust Using Sprites The Gnomon Workshop

Program Shortcuts Used

Maya
Move (“w” key)
Attribute Editor (ctrl+a)
Photoshop
New File (ctrl+n)
Open File (ctrl+o)
Hue/Saturation (ctrl+u)
Navigate Documents (ctrl+tab)
Paste (ctrl+v)
Copy (ctrl+c)

Seamless Textures in Photoshop

Diagram of How To Copy Seam Edges
Introduction
Prerequisites

None.

Creating seamless textures is an important skill if you want to make your textures cover a large area and tile. Luckily for you the process is actually quite simple. From within Photoshop we’ll look at the Offset function and how to create custom brushes that are unique to the texture we’re working on. Well also be using the tried and true method of clone stamp to get rid of the seams the Offset filter creates.

Photoshop

Document Setup

When creating any texture you want to make sure you’re keeping it square. The dimensions should be the resultant of 2 to any power. That is: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048 or 4096.
You also want to make sure your file’s DPI setting is set to 72. The only time you ever want to change the DPI is when you are producing something for print, in which case it would be set to 300. Everything else can be left alone.

Original Texture vs. Adjusted Texture (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_split NULL.jpg)Prepping Texture For Tiling

When creating any texture that will be tiled you want to make sure that there are no obvious patterns. Take a look at your texture and see if there are any spots that really stand out above the rest. These will give away the pattern as you will be able to spot their repetition. Our entire texture should have a uniform level of detail and colour. That’s not to say the whole texture has to be bland, just make sure that no one part grabs your eye’s attention more than another. Something else you need to watch out for are highlights and shadows. If there are any shadows that are to dark you can lighten them up with the Dodge tool (alt+shift+d). Alternatively you can darken highlights with the Burn tool (alt+shift+b). The texture I wanted was also a fair bit darker so I went ahead and adjusted the over all brightness of the texture as well. Once you’ve removed all outstanding detail from your texture we’ll look at how to create some custom brushes that will let us add less obvious repetitive detail.

Marquee Selection For Brush Preset (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_selection NULL.jpg)Custom Brush Creation

We are creating custom brushes because we want our cloning process to look as natural as possible. These brushes will be made from features in our texture and will help to hide seams that offsetting the texture will create. Our first step is to grab our Magic Wand tool and use it to select a part of our texture. The selection chosen will be the base for our brush. The selection size is up to you as is what you select. Try to keep the selection smaller so that if used a few times over the detail it creates won’t pattern too much. If you find your selection is too large or too small you can change the “Tolerance” in the tool settings atop Photoshop. The higher the tolerance the more the tool will select. Make a selection you are happy with and choose your Selection Tool (“v” key) from the tool menu. Now navigate to Edit > “Define Brush Preset”, select it, and give your brush a name. There you go, you can now make your own brushes. Feel free to make a few different custom brushes for your texture. The more you have the less obvious the tiling will be :)

Newly Offset Texture With Settings (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_offset NULL.jpg)Offset

We want to use the Offset filter to align the border edges of our texture. The only downside to using offset is that it leaves 2 major seams that cross our texture at the center. You can see this in the picture to the left. The Offset filter can be found under the Filter>Other menu. When you use the Offset filter you’ll want to change two options. The Vertical and horizontal sliders let you choose their respective pixel distances. We want to set both of these to half the pixel width of our texture. For a square 512px texture that means setting them both to 256. Go ahead and apply the Offset filter to our texture layer. We’re almost done now, but what can we do about these seams?

Clone Stamped Texture With No Seams (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_stamped NULL.jpg)Clone Stamp

Your texture is Offset now, but we have to get rid of those seams. Let’s start by selecting the Clone Stamp (“s” key) and then picking the custom brush we created from the Brush Menu(“F5” key). Hover over a section of your texture holding down the alt key and then click to set that area as your cloning source. Now you will be able to click anywhere on the canvas and stamp down a section of that image in the shape of your custom brush. Do this to cover all the seams in your texture. Try to do this just as much as you need and don’t stamp over the image edges except where the seams cross the edge. You should also be choosing different clone sources as you go along so you don’t clone the same area over and over.

Diagram of How To Copy Seam Edges (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_marquee NULL.jpg)Our last step in removing seams is to copy the pixels from the four points where the seams crossed the edges of our document. We want these points to be mirror copies of each other. To do this we’re going to make a semi circular selection at the top, Copy (ctrl+c) the pixels, Paste (ctrl+v) them on a New Layer (ctrl+shift+n), flip them vertically (Edit > Transform > “Flip Vertical”) and move them down to the bottom edge. The same will be done mirroring the left edge’s pixels to the right, but we will flip the pixels horizontally. Once this is done use the Eraser (“e” key) with your custom brush shape to blend the edge of the pasted layers into your base texture. When that is done make sure your layer with the brush pattern is hidden and Merge Visible Layers (ctrl+e) to get a single layer. If you’re a little foggy on the process check out the diagram to our left. We are simply copying pixels from the darker hues, flipping them, and putting them in the place of thier respective lighter hues.

Final Seamless Texture (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2010/12/m_101_seamless_final NULL.jpg)Defining a Pattern

To Test out our texture. We will turn it into a pattern and then fill a new larger file with our custom pattern. To create our pattern we will Select All (ctrl+a), make sure our Select Tool (“v” key) is active, and go the the Edit menu and select “Define Pattern”. Give your pattern a name and create a new document that is at least twice the size of your current canvas. In your new file create a New Layer (ctrl+shift+n) and go to the Edit menu again and hit “Fill”. In the dialogue box that appears under the “Use” rollout select “Pattern”, choose your pattern, and then click “OK”. Your document should be tiled with your custom texture like our example above.  Take a moment to view this and make sure you can’t spot any seams. If you spot any go back and fix them; look close. If there are none you’re done and have added a new skill to your toolset :D

Conclusion

If you’re new to creating seamless textures this tutorial might have been a lot to take in, but that’s OK. Go over it again, send me questions, post a query. I don’t mind lending a hand if you need some help. You will get good at this; trust me.

Further Reading

Hourences – Texture Tricks (http://www NULL.hourences NULL.com/tutorials-texture-tricks)

Program Shortcuts Used

Photoshop
Marquee Selection Tool (“m” key)
Burn Tool (alt+shift+b)
Dodge Tool (alt+shift+d)
Deselect (ctrl+shift+d)
Clone Stamp (“s” key)
Paste (ctrl+v)
Copy(ctrl+c)
Select Tool (“v” key)
Select All (ctrl+a)
New Layer (ctrl+shift+n)
Merge Visible Layers (ctrl+e)
Contextual Menu (“F5” key)