Difference between revisions of "NMLTutorial/Graphic files"
From TTWiki
Jump to navigationJump to search (working with Photoshop) |
m (wr style) |
||
| (3 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
{{NMLTutorial}} |
{{NMLTutorial}} |
||
| − | You can use any graphics file format as long as it |
+ | You can use any graphics file format as long as it is supported by the [http://www.pythonware.com/products/pil/ Python Image Library] and as long the graphics file has one of the TTD palettes applied. |
| + | |||
== What image files should I use? == |
== What image files should I use? == |
||
| − | If you |
+ | If you are unsure about what file format to use, take PNG as a safe bet. It can work with palettes and has the added advantage that it can be viewed by browsers and as such, you can just upload your sprite files to the forums if you want to show them. PNG files are also widely supported by graphics editors. |
| − | |||
| − | <!-- content below should eventually be moved to a separate tutorial about drawing sprites --> |
||
| − | |||
| ⚫ | |||
| ⚫ | Graphics for TTD can only use a limited set of colours (OpenTTD 32bpp graphics are an exception to this; while NML can handle these for you, it is not covered in this tutorial). Check the NewGRF Specs for [http://newgrf-specs.tt-wiki.net/wiki/PalettesAndCoordinates#Palettes what these palettes are] and which colours are available to use. The DOS palette has a few more colours, so if you |
||
| − | |||
| ⚫ | In theory you can draw in |
||
| − | |||
| ⚫ | |||
| − | |||
| − | == Using palettes == |
||
| − | This section covers how to apply a palette to a graphics file in several graphics editor. If you're editor is not listed here and you know how to work with palettes using it, please add it here. |
||
| − | |||
| − | === Adobe Photoshop === |
||
| − | In this subsection it is explained how to create a palette file and how to apply it using Adobe Photoshop (CS5 is used here, but identical or similar procedures apply in other versions of Photoshop). It is assumed that you have a clue about working with Photoshop. |
||
| − | ==== Retreiving a palette file ==== |
||
| − | You can use an existing graphics file that has the correct palette applied to retrieve the palette and save it to a separate file. This palette can then be applied to graphics files that don't have a palette. You can skip this part if you have downloaded a premade palette file. |
||
| ⚫ | |||
| − | # Open a graphics file of which you know it has the correct palette in Photoshop. Decoded NewGRFs (using GRFCodec) surely will have the correct palette applied. |
||
| ⚫ | Graphics for TTD can only use a limited set of colours (OpenTTD 32bpp graphics are an exception to this; while NML can handle these for you, it is not covered in this tutorial). Check the NewGRF Specs for [http://newgrf-specs.tt-wiki.net/wiki/PalettesAndCoordinates#Palettes what these palettes are] and which colours are available to use. The DOS palette has a few more colours, so if you are still in the position to choose, go for that. |
||
| − | # Go to Image > Mode > Color Table... The window from Fig. 1 will appear. [[Image:Photoshop palette window with windows ttd palette.png|thumb|50%|Fig. 1: Photoshop palette window showing in this case the Windows palette]] |
||
| − | # Click Save... and store the palette file (*.act) somewhere on your computer. |
||
| ⚫ | In theory, you can draw in true colour (24 or 32 bpp) and then convert your result to the TTD palette, but that usually does not work out too well. It is best to only use the colours from the palette in the first place. Each sprite should get a blue background, for which you use the blue from index 0 (indicated as "Transparent" on the page of the link above, or hex colour #0000FF). |
||
| − | ==== Applying a palette from file ==== |
||
| − | The Windows or DOS TTD palette must be applied to your graphics file for them to work in GRFCodec and NML. For the next steps we assume that you have a palette file (*.act) with the palette of your choice stored somewhere on your computer. |
||
| ⚫ | |||
| − | # Open a graphics file in Photoshop. |
||
| − | # Go to Image > Mode and check if RGB Color is checked. Select it if that is not the case, which will convert your graphics file to full-colour, maintaining the colours as they appear. |
||
| − | # Go to Image > Mode > Indexed Color... The window from Fig. 2 will appear. [[Image:Photoshop indexed color window.png|thumb|50%|Fig. 2: Photoshop indexed color window]] |
||
| − | # From the Palette drop-down, select Custom... The palette window (see Fig. 1) appears. |
||
| − | # Click Load... and browse the palette file. Click OK to close the palette window. |
||
| − | # In the indexed color window, you may select your choise of Dither. The dither will convert all colours that are in the graphics file but not in the palette to the palette colours. Either use the Diffusion dither (with preserving exact colors) or the Noise dither. Play around with the settings using the Preview to see the result and pick whatever looks best. If the sprites in the image file were drawn properly (using only palette colours), you should see no difference. |
||
| − | # Click OK to apply the palette file (and dither) to this image file. Note that this will flatten all layers (if any) in your graphics file. |
||
| − | # Save the file as (preferrably) a PNG image. |
||
| + | See [[Save paletted image files]] for how to create image files with the correct pallete applied. |
||
| − | ==== Important note on PCX files in Photoshop ==== |
||
| − | Photoshop has a quirk in which palettes from PCX files are read and written backwards. This is no problem is you stay with pcx, but it is if you convert from pcx to png (and the other way round). Any such conversion will have the palette stored backwards in the target file, making it unusable by GRFCodec or NML. Note: |
||
| − | * You cannot use the palette file saved from a PCX file for a PNG file; |
||
| − | * You cannot use the palette file saved from a PNG file for a PCX file; |
||
| − | * When converting PCX <-> PNG, you must convert to RGB Color first and then back to Indexed Color, applying the palette file of your target file format (e.g. when converting to PNG, apply the palette retrieved from a PNG file). |
||
| + | == How do I draw sprites? == |
||
| − | === GIMP === |
||
| + | This tutorial is not about drawing, but about coding once you have drawn. If you want to learn how to draw sprites, check the [[GraphicsTutorial]]. |
||
| − | To be added. |
||
{{NMLTutorialNavbar|Installation|Language files}} |
{{NMLTutorialNavbar|Installation|Language files}} |
||
Latest revision as of 17:34, 13 October 2012
You can use any graphics file format as long as it is supported by the Python Image Library and as long the graphics file has one of the TTD palettes applied.
What image files should I use?
If you are unsure about what file format to use, take PNG as a safe bet. It can work with palettes and has the added advantage that it can be viewed by browsers and as such, you can just upload your sprite files to the forums if you want to show them. PNG files are also widely supported by graphics editors.
What is this palette business?
Graphics for TTD can only use a limited set of colours (OpenTTD 32bpp graphics are an exception to this; while NML can handle these for you, it is not covered in this tutorial). Check the NewGRF Specs for what these palettes are and which colours are available to use. The DOS palette has a few more colours, so if you are still in the position to choose, go for that.
In theory, you can draw in true colour (24 or 32 bpp) and then convert your result to the TTD palette, but that usually does not work out too well. It is best to only use the colours from the palette in the first place. Each sprite should get a blue background, for which you use the blue from index 0 (indicated as "Transparent" on the page of the link above, or hex colour #0000FF).
Make sure to actually save the graphics files with a palette applied, or NML will complain that you do not have one. If you do not have this palette, you can extract it from any decoded GRF file or download a premade palette file.
See Save paletted image files for how to create image files with the correct pallete applied.
How do I draw sprites?
This tutorial is not about drawing, but about coding once you have drawn. If you want to learn how to draw sprites, check the GraphicsTutorial.
NML Tutorial: Graphic files
