Difference between revisions of "Create Art"
From The Battle for Wesnoth Wiki
(→Sprite Art: - Added the fire animation guide) |
Pentarctagon (talk | contribs) |
||
| (36 intermediate revisions by 11 users not shown) | |||
| Line 3: | Line 3: | ||
|} | |} | ||
| − | == | + | Graphic artists working on artwork intended for mainline Wesnoth usually meet on the [http://forums.wesnoth.org/viewforum.php?f=9 Art Contributions forum] or on the [http://forums.wesnoth.org/viewforum.php?f=18 restricted Art Development forum] ("restricted" meaning that only those users with special permissions - such as art contributors and developers - can post there). The former is a great place to post and discuss new and current mainline Wesnoth art and graphics, and the latter to see what the art development team is working on. Artists working on graphics for [[Glossary|UMC]] add-ons meet in the [http://forums.wesnoth.org/viewforum.php?f=23 Art Workshop forum]. |
| − | + | Unit and terrain art is stored in the lossless ''Portable Network Graphics'' (PNG) format. Each frame of a unit animation, and each variation of a terrain is stored as a separate .png file in ''data/core/images'' under the [[EditingWesnoth#Where_is_my_game_data_directory.3F|main data directory]] of the game, and generally these files will be 72 x 72 pixels (the size of Wesnoth's basic hexagonal tile) with an alpha channel (a part of the file that indicates how transparent each pixel is). When creating your own images, you can test them without overwriting any game data by putting them in your [[EditingWesnoth#Where_is_my_user_data_directory.3F|user data directory]]. The game also supports JPEG images, although these are better suited for story art. | |
| − | + | To edit these graphics, you'll need some program capable of creating PNG's - some of the programs in the following list are free, open-source software, and will do the job nicely: [[Art Programs]] | |
| − | + | [[Give Your Hero A Personality|Give Your Hero A Personality]] | |
| − | + | == Art Tutorials == | |
| − | + | These are a work-in-progress, and describe both how to make art fit into Wesnoth's style, as well as giving some considerable tips on drawing in general. Especially useful is the [[External Tutorials]] page which lists a large number of art tutorials available on the web. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=== General Art and Computer Graphics === | === General Art and Computer Graphics === | ||
| − | * [[Using the Levels Adjustment]] - | + | Note: articles that mention making art in physical formats in this section are outdated; artists are encouraged to make their art in digital-native formats these days. |
| + | * [[Using the Levels Adjustment]] - How to make scanned pencil drawings ''not'' look washed out. | ||
* [[Extending dynamic range]] - The Grooviest (so far) tutorial about extending the dynamic range of images and how this technique can be used to make better scans of pencil drawings. | * [[Extending dynamic range]] - The Grooviest (so far) tutorial about extending the dynamic range of images and how this technique can be used to make better scans of pencil drawings. | ||
* [[Scanning with camera]] - How to transfer real-life art to computer using a digital camera instead of a scanner. | * [[Scanning with camera]] - How to transfer real-life art to computer using a digital camera instead of a scanner. | ||
| − | + | * [[Art Supplies]] - What physical items you need to do larger cell-shaded art like that of Jetrel/Jormungadr/et al. | |
| − | * [[Art Supplies]] - What physical items you need to do larger cell-shaded art like that of | + | * [[Inking With Pencils|Computer Inking a Sketch]] - Info from Jason Lutes on his portrait workflow. |
| − | * [[Inking With Pencils|Computer Inking a Sketch]] - Info from Jason Lutes on his portrait workflow | + | * [[Scaling Digital Images]] - How to properly resize an image on a computer. |
| − | * [[Scaling Digital Images]] - | + | * [[How to Shade]] - An attempt at tackling a very complicated topic. |
| − | * [[How to Shade]] - | + | * [[Designing weapons and armour]] - Advice from zookeeper on designing realistic weapons for your characters. |
| − | + | * [[Portrait Tutorial]] - A guide on how to draw unit/character portraits by Kitty. | |
| − | * [[Designing weapons and armour]] - Advice from zookeeper on designing realistic weapons for your characters | + | * [[Armour Tutorial]] A tutorial on how to shade metallic armour by LordBob. |
| − | * [[Portrait Tutorial]] - | + | ====Vector Art==== |
| − | * Sgt. Groovy's vector workshop - | + | Sgt. Groovy's vector workshop - Tips and tricks for drawing with Inkscape. |
| − | + | :* [[Z-order tricks]] - A few methods for faking overlapping shapes. | |
| − | + | :* [[Variable-width strokes]] - How to make the strokes vary in width, like being drawn with a flat-tipped pen — no tablet needed! | |
| − | + | :* [[Shaped gradients with Gaussian blur]] - How to make gradients in other shapes than linear or radial. | |
| − | + | :* [[Smooth shading in vector]] - The basic vector techniques for smooth shading, employing Gaussian blur and clipping/masking. | |
| − | + | :* [[Vector Inking]] - Vector techniques, including mouse-only, for inking your sketches. | |
| − | + | :* [[Making portrait art in vector]] - A complete tutorial for making Wesnoth unit portraits in vector graphics. | |
=== [[Terrain|Terrain Graphics]] === | === [[Terrain|Terrain Graphics]] === | ||
| Line 48: | Line 41: | ||
The following is information specific to drawing terrain for Wesnoth. Read Frame's "Tiles Tutorial" for a good overview of how terrain graphics work. | The following is information specific to drawing terrain for Wesnoth. Read Frame's "Tiles Tutorial" for a good overview of how terrain graphics work. | ||
| − | * [[Tiles Tutorial]] - Frame's tutorial describing the process of making terrain tiles in | + | * [[Mesilliac's Essay on Terrain Perspective]] - The geometry behind the perspective used for terrain tiles in Wesnoth. |
| − | + | * [[Tiles Tutorial]] - Frame's tutorial describing the process of making terrain tiles in Wesnoth, and how they interact with adjacent tiles. | |
| − | |||
* [[Turning Square Tiles into Hex]] - Nifty tricks for transforming square (or any rectangle) shaped seamless tiles into hexagon seamless tiles. | * [[Turning Square Tiles into Hex]] - Nifty tricks for transforming square (or any rectangle) shaped seamless tiles into hexagon seamless tiles. | ||
| − | * [[CastleTutorial|Castle Tutorial]] - A description of how Wesnoth's castle tiles work (needs updating, but useful nonetheless) | + | * [[CastleTutorial|Castle Tutorial]] - A description of how Wesnoth's castle tiles work (needs updating, but useful nonetheless). |
* [[MultiHexTutorial|Multi-Hex Tiling Tutorial]] - A description of how multi-hex tiles work. | * [[MultiHexTutorial|Multi-Hex Tiling Tutorial]] - A description of how multi-hex tiles work. | ||
* [[Editing Castles]] - Instructions for how to make/edit castles (and other corner-based terrains) using yobbo's GIMP script. | * [[Editing Castles]] - Instructions for how to make/edit castles (and other corner-based terrains) using yobbo's GIMP script. | ||
| Line 62: | Line 54: | ||
=== Sprite Art === | === Sprite Art === | ||
| − | The following are different tutorials about sprite work compiled by various | + | The following are different tutorials about sprite work compiled by various Wesnoth sprite artists. These will give you the most specific-to-Wesnoth information about making sprites, and are well worth a read. |
| − | * [[Creating Unit Art]] - | + | * [[Creating Unit Art]] - A list of specifications you will need to match. |
| − | * [[Give Your Hero A Personality]] - | + | * [[Give Your Hero A Personality]] - Tricks for editing existing images, including some clip art. |
| − | + | * [[Team Color Shifting]] - How to create art that uses our new team color system. | |
| − | * [[Team Color Shifting]] - | + | * [[TeamColoring]] - How to automatically team-color sprites to see what they look like in various colors. |
| − | * [[TeamColoring]] - | + | * [[Creating Shadows Under Units]] - How we create the shadows for the units in-game. |
| − | * [[Creating Shadows Under Units]] - | + | * [[How to Anti-Alias Sprite Art]] - A means of removing the jagged edges on pixel lines, for those that wish to do so. |
| − | * [[ | + | * [http://forums.wesnoth.org/download/file.php?id=56284 Zerovirus's Spriting Workflow] - Wesnoth artist Zerovirus explains step-by-step his methodology for creating Wesnoth sprites from scratch (.png file). |
| − | * [ | + | * [[Creating a scratch built sprite]] - An attempt to show some ways creating a sprite from scratch. |
| − | * [[Creating a scratch built sprite]] - | + | * [[FrankenPacks]] - A quick and dirty way to create sprites for [[Glossary|UMC]]. |
| − | * [[How to create motion blurs]] - | + | * [[Choosing your palette]] - Make shadows look interesting. |
| − | * [[ | + | |
| − | * [[Fire Animation]] - | + | ====Animation==== |
| + | :* [[Basic Animation Tutorial]] - Or "How to Animate Sprites for Dummies," covering the basic theory, and all of the mistakes to avoid. | ||
| + | :* [[From Base Frame To Full Animation]] - A solid method of moving baseframes forward towards full animation. | ||
| + | :* [[How to create motion blurs]] - A simple explanation on how to create attack animation weapon blurs. | ||
| + | :* [[Making Bow Animations]] - The current standard for how we want bow animations to work. | ||
| + | :* [[Fire Animation]] - A great guide to creating fire FX by rhyging5. | ||
=== External Tutorials === | === External Tutorials === | ||
| − | The following page contains dozens of links to tutorials covering all manner of artwork, including sprite art. These were not made by | + | The following page contains dozens of links to tutorials covering all manner of artwork, including sprite art. These were not made by Wesnoth artists, but should prove very useful for general instruction. |
* [[External Tutorials]] | * [[External Tutorials]] | ||
| Line 85: | Line 82: | ||
* [[Create]] | * [[Create]] | ||
* [[EditingWesnoth]] | * [[EditingWesnoth]] | ||
| − | |||
* [[Project]] | * [[Project]] | ||
| − | |||
[[Category:Art Tutorials]] | [[Category:Art Tutorials]] | ||
Latest revision as of 23:09, 2 September 2021
Graphic artists working on artwork intended for mainline Wesnoth usually meet on the Art Contributions forum or on the restricted Art Development forum ("restricted" meaning that only those users with special permissions - such as art contributors and developers - can post there). The former is a great place to post and discuss new and current mainline Wesnoth art and graphics, and the latter to see what the art development team is working on. Artists working on graphics for UMC add-ons meet in the Art Workshop forum.
Unit and terrain art is stored in the lossless Portable Network Graphics (PNG) format. Each frame of a unit animation, and each variation of a terrain is stored as a separate .png file in data/core/images under the main data directory of the game, and generally these files will be 72 x 72 pixels (the size of Wesnoth's basic hexagonal tile) with an alpha channel (a part of the file that indicates how transparent each pixel is). When creating your own images, you can test them without overwriting any game data by putting them in your user data directory. The game also supports JPEG images, although these are better suited for story art.
To edit these graphics, you'll need some program capable of creating PNG's - some of the programs in the following list are free, open-source software, and will do the job nicely: Art Programs
Art Tutorials
These are a work-in-progress, and describe both how to make art fit into Wesnoth's style, as well as giving some considerable tips on drawing in general. Especially useful is the External Tutorials page which lists a large number of art tutorials available on the web.
General Art and Computer Graphics
Note: articles that mention making art in physical formats in this section are outdated; artists are encouraged to make their art in digital-native formats these days.
- Using the Levels Adjustment - How to make scanned pencil drawings not look washed out.
- Extending dynamic range - The Grooviest (so far) tutorial about extending the dynamic range of images and how this technique can be used to make better scans of pencil drawings.
- Scanning with camera - How to transfer real-life art to computer using a digital camera instead of a scanner.
- Art Supplies - What physical items you need to do larger cell-shaded art like that of Jetrel/Jormungadr/et al.
- Computer Inking a Sketch - Info from Jason Lutes on his portrait workflow.
- Scaling Digital Images - How to properly resize an image on a computer.
- How to Shade - An attempt at tackling a very complicated topic.
- Designing weapons and armour - Advice from zookeeper on designing realistic weapons for your characters.
- Portrait Tutorial - A guide on how to draw unit/character portraits by Kitty.
- Armour Tutorial A tutorial on how to shade metallic armour by LordBob.
Vector Art
Sgt. Groovy's vector workshop - Tips and tricks for drawing with Inkscape.
- Z-order tricks - A few methods for faking overlapping shapes.
- Variable-width strokes - How to make the strokes vary in width, like being drawn with a flat-tipped pen — no tablet needed!
- Shaped gradients with Gaussian blur - How to make gradients in other shapes than linear or radial.
- Smooth shading in vector - The basic vector techniques for smooth shading, employing Gaussian blur and clipping/masking.
- Vector Inking - Vector techniques, including mouse-only, for inking your sketches.
- Making portrait art in vector - A complete tutorial for making Wesnoth unit portraits in vector graphics.
Terrain Graphics
The following is information specific to drawing terrain for Wesnoth. Read Frame's "Tiles Tutorial" for a good overview of how terrain graphics work.
- Mesilliac's Essay on Terrain Perspective - The geometry behind the perspective used for terrain tiles in Wesnoth.
- Tiles Tutorial - Frame's tutorial describing the process of making terrain tiles in Wesnoth, and how they interact with adjacent tiles.
- Turning Square Tiles into Hex - Nifty tricks for transforming square (or any rectangle) shaped seamless tiles into hexagon seamless tiles.
- Castle Tutorial - A description of how Wesnoth's castle tiles work (needs updating, but useful nonetheless).
- Multi-Hex Tiling Tutorial - A description of how multi-hex tiles work.
- Editing Castles - Instructions for how to make/edit castles (and other corner-based terrains) using yobbo's GIMP script.
These describe the system used to specify how terrains behave in game:
- TerrainCodesWML - A list of the letters used to represent terrain types.
- TerrainGraphicsWML - If you really need to get technical, start here.
- Ayin's Terrain Graphics document - If you really, really need to get technical, this describes the terrain graphics WML system in depth.
Sprite Art
The following are different tutorials about sprite work compiled by various Wesnoth sprite artists. These will give you the most specific-to-Wesnoth information about making sprites, and are well worth a read.
- Creating Unit Art - A list of specifications you will need to match.
- Give Your Hero A Personality - Tricks for editing existing images, including some clip art.
- Team Color Shifting - How to create art that uses our new team color system.
- TeamColoring - How to automatically team-color sprites to see what they look like in various colors.
- Creating Shadows Under Units - How we create the shadows for the units in-game.
- How to Anti-Alias Sprite Art - A means of removing the jagged edges on pixel lines, for those that wish to do so.
- Zerovirus's Spriting Workflow - Wesnoth artist Zerovirus explains step-by-step his methodology for creating Wesnoth sprites from scratch (.png file).
- Creating a scratch built sprite - An attempt to show some ways creating a sprite from scratch.
- FrankenPacks - A quick and dirty way to create sprites for UMC.
- Choosing your palette - Make shadows look interesting.
Animation
- Basic Animation Tutorial - Or "How to Animate Sprites for Dummies," covering the basic theory, and all of the mistakes to avoid.
- From Base Frame To Full Animation - A solid method of moving baseframes forward towards full animation.
- How to create motion blurs - A simple explanation on how to create attack animation weapon blurs.
- Making Bow Animations - The current standard for how we want bow animations to work.
- Fire Animation - A great guide to creating fire FX by rhyging5.
External Tutorials
The following page contains dozens of links to tutorials covering all manner of artwork, including sprite art. These were not made by Wesnoth artists, but should prove very useful for general instruction.
See Also
This page was last edited on 2 September 2021, at 23:09.