Frictional Game Wiki

<h2>Adobe Photoshop</h2> <div class="level2"> <p> <a href="http://www.adobe.com/products/photoshop.html" class="urlextern" title="http://www.adobe.com/products/photoshop.html" rel="nofollow">Adobe Photoshop</a> is a professional image editing software. It can be used to manipulate real-life photographs, draw and design textures, setup background and artwork and much more. It is a very useful tool for working with game graphics. Photoshop is currently available for Windows and Mac OS X, with a Linux version in the works. Adobe offers a 30-day free trial of this premium software. </p> <p> Alternatives to Photoshop are for example <a href="http://www.gimp.org/" class="urlextern" title="http://www.gimp.org/" rel="nofollow">GIMP</a> (multiplatform) and <a href="http://www.getpaint.net/" class="urlextern" title="http://www.getpaint.net/" rel="nofollow">Paint.NET</a> (Windows only). </p> </div> <h4>Introduction</h4> <div class="level4"> <p> This page will explain a few tasks you can perform using Photoshop, mostly in relation to HPL2 and how to prepare files to work with it. It will not give you the absolute basics about Photoshop, however it will mention briefly how things are done. This guide is made for Photoshop CS6. Other versions might be slightly different, but many features remain unchanged between most versions. </p> </div> <h4>About files</h4> <div class="level4"> <p> When creating textured files for game graphics there are a few things you must take into account. What will this file be used for? Will it need to be see-through? Will this texture loop? These are some of the questions you should ask yourself. These will affect how your file is created. </p> <p> In most cases, you should always make your file have a pow2 resolution. That means the amount of pixels, both horizontally and vertically, is a value to the power of 2. This is because of technical implementations. Because computers operate with binary values, it is much easier for them to read and display an image that uses a resolution that matches their benchmark values. To make these resolutions accurate, make sure you have set it to 72 <b>ppi</b> (pixels per inch). Examples of common resolutions for files are <b>256×256</b>, <b>512×512</b>, <b>1024×1024</b> and maybe even <b>2048×2048</b> if you are in need of a high quality texture. Keep in mind that using higher resolution textures will require more computer power to run. Even if it runs fine for you, be aware that computers vary in power considerably. You want your players to be able to run your game creation as smooth as possible. </p> <p> If your file requires transparency, you should use an <b>alpha channel</b> to apply it. An alpha channel is a color channel for your texture file. It contains only black to white tones and determines which parts of the textured layers should remain opaque and which parts should contain transparency. 100% white will make the file completely opaque. 100% black will create transparency. Different levels of gray will be translucent at the strength of that gray value. </p> <p> If your texture will be used for a plane, like a floor, you will want your texture to be seamless. This means that you can place two copies of the texture next to itself in any direction and not notice where the texture cuts to the other copy. You can find many seamless textures online for download, but making one yourself can be tricky if you don’t know how. Photoshop makes this process much easier. </p> <p> Lastly, when it comes to file formats, it might be tempting to use a PNG file, because they are lossless and easy to create. However, PNG files can cause issues and aren’t optimized for game graphics. If your texture belongs on a 3D model or a 2D plane, export the file as a <b>DDS</b> file (DirectDraw Surface). If it is to be used as a GUI or icon, export it as <b>TGA</b> (Targa). JPG files are present in HPL2 a few times, but only use them when you know you can, for example the splash logo screen during startup. </p> <p> Note: In order for Photoshop to export images as DDS, you will need the Nvidia DDS export plugin (<a href="https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" class="urlextern" title="https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" rel="nofollow">link</a>). </p> </div> <h4>Creating icons</h4> <div class="level4"> <p> An icon is a small image file that acts as a symbol for either an object, action, interface or similar. A common icon file resolution is 64×64, however HPL2 uses a variety of different resolutions. Some files go as low as 2×2 pixels («default» window GUI graphics). The icon for an inventory item uses a non-pow2 resolution of 55 pixels horizontally and 60 pixels vertically. </p> <p> First choose the resolution you need. After that you may draw the icon you want. One method you can use to create inventory icons for models, is to take a screenshot of the model itself, cut out the background using the <b>Polygonal Selection</b> tool, then resize the image to match the icon size. </p> <p> Once you have your icon drawn, select the pixels in the layer (merge them all if you have several). You can do this by right clicking the icon of the layer. Once you have the selection, go to the <b>Channels</b> panel (next to layers by default). If the 4th channel named Alpha does not exist, select <b>New channel</b> and it will create an alpha channel for you. Make sure the alpha channel is black, and that the color you have picked is 100% white. Press <b>Alt+Backspace</b> on your keyboard to fill the selection you have and make it white, while the rest remains black. Notice how the edges will become gray (only if your icon fades into semi-transparency). </p> <p> You may tick the Alpha channel visiblity off now. While on, it shows up in your file where the boundaries are, but can be confusing and distorting when editing it. Add a new layer below your icon layer, and fill it with black. Save the icon as a Targa file with 32-bits/pixel. Make sure Alpha Channels is ticked in the save dialog. Now you should have a working icon with an alpha channel. </p> </div> <h4>Creating seamless textures</h4> <div class="level4"> <p> This section is written as a quick run-down from <a href="http://www.obsidiandawn.com/creating-seamless-textures-in-photoshop-tutorial" class="urlextern" title="http://www.obsidiandawn.com/creating-seamless-textures-in-photoshop-tutorial" rel="nofollow">this tutorial</a>. If you want a more in-depth one, check the original out. It has a lot of pictures as well. </p> <p> Photoshop has a wonderful tool for making textures seamless; it’s called Offset. What Offset does is push one side of the texture out of the frame and in on the opposite side. The result will contain rough transitions, but the file itself will already be tileable. All you must do is clean up those seams. </p> <p> First get a texture you wish to use, for example a picture of some dirt. Try to use one that looks somewhat similar in shading tones and color on the sides, or else it might look odd. Of course colors can be modified if you need to, but natural colors are often best. Crop the image to a pow2 resolution if it isn’t already. Use the Offset option from Filter > Other > Offset. Now set the "<b>Undefined Areas</b>" option to "<b>Wrap Around</b>" and the H and V amount to something appropriate for your file resolution, for example 64 if your file is 128. This will move your image and shift it out of the box, but repeat it at the opposite side. You’ll notice the seams of where it conflicts. </p> <p> To get rid of the seams, you can use the Clone Stamp Tool. Do not use a smooth brush with this tool however, as that will make the «patches» very blurry. Try a few different ones to see what works the best, but stay away from the round brushes. </p> <p> Use the clone tool by holding down <b>Alt</b> and clicking on the file somewhere the texture looks nice to create an anchor point there. The tool will use this point to draw with. Left-click over the seam and try to remove it, by drawing the texture over it. It takes some patience and careful drawing while changing the anchor point a lot to get it right. Be also very careful about editing the edges of the picture. If you mess up one side, it won’t be seamless anymore because it needs to match up with the other side. </p> <p> Once you got something you like, that’s it! Your texture should be seamless now, granted you didn’t distort the edges of the texture too much. You can test and see if it is by doing another offset or by duplicating the image and placing it next to itself, in a 2×2 fashion. </p> </div>