User Tools

Site Tools


hpl2:third_party_tools:2d:photoshop

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
hpl2:third_party_tools:2d:photoshop [2014/12/09 14:02]
mudbill Moved note :3
hpl2:third_party_tools:2d:photoshop [2017/09/17 23:29]
mudbill [Creating icons] Changed 32-bits/pixel to 24. Was probably a slip.
Line 6: Line 6:
  
 <​note>​This is a Work in Progress page and might be updated.</​note>​ <​note>​This is a Work in Progress page and might be updated.</​note>​
- +==== Introduction ​====
- +
-=== Introduction ===+
  
 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. 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.
  
-  +==== About files ====
- +
-=== About files ===+
  
 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. 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.
  
-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 **ppi** (pixels per inch). Examples of common resolutions for files are **256x256**, **512x512**, **1024x1024** and maybe even **2048x2048** 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.+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 **ppi** (pixels per inch). Examples of common resolutions for files are **256×256**, **512×512**, **1024×1024** and maybe even **2048×2048** 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.
  
 If your file requires transparency,​ you should use an **alpha channel** 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. If your file requires transparency,​ you should use an **alpha channel** 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.
Line 25: Line 21:
  
 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 **DDS** file (DirectDraw Surface). If it is to be used as a GUI or icon, export it as **TGA** (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. 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 **DDS** file (DirectDraw Surface). If it is to be used as a GUI or icon, export it as **TGA** (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.
- 
  
 Note: In order for Photoshop to export images as DDS, you will need the Nvidia DDS export plugin ([[https://​developer.nvidia.com/​nvidia-texture-tools-adobe-photoshop|link]]). Note: In order for Photoshop to export images as DDS, you will need the Nvidia DDS export plugin ([[https://​developer.nvidia.com/​nvidia-texture-tools-adobe-photoshop|link]]).
  
 +==== Creating icons ====
  
- +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.
-===Creating icons=== +
- +
-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 64x64, however HPL2 uses a variety of different resolutions. Some files go as low as 2x2 pixels («default» window GUI graphics). The icon for an inventory item uses a non-pow2 resolution of 55 pixels horizontally and 60 pixels vertically.+
  
 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 **Polygonal Selection** tool, then resize the image to match the icon size. 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 **Polygonal Selection** tool, then resize the image to match the icon size.
Line 39: Line 32:
 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 **Channels** panel (next to layers by default). If the 4th channel named Alpha does not exist, select **New channel** 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 **Alt+Backspace** 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). 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 **Channels** panel (next to layers by default). If the 4th channel named Alpha does not exist, select **New channel** 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 **Alt+Backspace** 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).
  
-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.+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 24-bits/​pixel. Make sure Alpha Channels is ticked in the save dialog. Now you should have a working icon with an alpha channel.
  
-  +==== Creating seamless textures ​====
- +
-===Creating seamless textures===+
  
 This section is written as a quick run-down from [[http://​www.obsidiandawn.com/​creating-seamless-textures-in-photoshop-tutorial|this tutorial]]. If you want a more in-depth one, check the original out. It has a lot of pictures as well. This section is written as a quick run-down from [[http://​www.obsidiandawn.com/​creating-seamless-textures-in-photoshop-tutorial|this tutorial]]. If you want a more in-depth one, check the original out. It has a lot of pictures as well.
- 
-  
  
 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. 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.
Line 57: Line 46:
 Use the clone tool by holding down **Alt** 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. Use the clone tool by holding down **Alt** 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.
  
-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 2x2 fashion.+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.
  
-  
hpl2/third_party_tools/2d/photoshop.txt · Last modified: 2017/09/17 23:29 by mudbill