--- /dev/null
+[Pixel Art Tutorial](tutorials.md) >> Mark's Pixel Art Tutorial
+
+This page was originally hosted [here](http://www.natomic.com/hosted/marks/mpat/) but has since gone down. I've archived it on my site. Thank you Mark for writing the tutorial, and thanks to the [Wayback Machine][] for keeping it around for me to copy.
+
+Hello! Welcome to Mark's Pixel Art Tutorial. I hope you will find some useful information here.
+This guide is intended for those new to working with pixels - if you already know what you're doing, you shouldn't be here!
+I make no claims to be an authority on pixel art. Everyone has their own preferred style - for alternative tutorials and work from other artists, check out the [links](mark_links.md) section.
+
+##MAKING A START
+
+- [Approach to work][mark_approach.md]
+- [Tools you need, tools you don't][mark_tools.md]
+
+##GENERAL SKILLS
+
+- [Lineart][mark_lineart.md]
+- [Colours and RGB Values][mark_colours.md]
+- [Shading][mark_shading.md]
+- [Softening outlines][mark_softening.md]
+- [Anti-Aliasing][mark_aa.md]
+
+##EXAMPLES
+
+- Coming Some Time
+
+##EXTRAS
+
+- [Displaying Pixel Art][mark_displaying.md]
+- [Links][mark_links.md]
+
+
+Tell me what you think of this tutorial on the [Natomic Forums](http://web.archive.org/web/20131114195509/http://www.natomic.com/forums.asp) (dead link).
+
+[wayback machine]: https://archive.org/ "Internet Archive: The Wayback Machine"
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Anti-Aliasing
+
+Anti-aliasing is the process of 'smoothing out' the colours of an image - in its simplest form, taking two pixels and moving the RGB values of each closer to the other.
+The 'Blur' tool of many more comprehensive art programs performs this function, although it is a very blunt instrument.
+A more refined approach is required with pixel art, where the aim is to reduce the 'jaggedness' of the lines where two shades meet.
+
+NOTE - Anti-aliasing is not a holy grail of pixel art. You may not even need it. There are many situations however, where smoothing out jagged edges with a pixel gradient improves the appearance of a sprite.
+
+---
+
+#METHOD 1
+
+![][aa1] ![][aa2a] <img src="/pixelart/images/mark_aa1.gif" width="280" height="280"><img src="/pixelart/images/mark_aa2a.gif" width="280" height="280">
+
+This method first lightens the colour of the line, then shade away from each 'step' in shades, getting gradually closer to the background colour.
+This method is most useful for shading towards the outlines of sprites, though it need not use as many shades as this example.
+
+NOTE - Do not anti-alias outside the outline of a sprite (ie - in the transparent bit) unless you anticipate placing it against an unvaried background.
+
+---
+
+#METHOD 2
+
+![][aa1] ![][aa2b] <img src="/pixelart/images/mark_aa1.gif" width="280" height="280"><img src="/pixelart/images/mark_aa2b.gif" width="280" height="280">
+
+This is an alternate, slightly different method. The RGB value of the line remains unchanged, but smoothing of tone is focused more at the 'joints' or 'steps' of the edge.
+I prefer this for drawing lines on a surface - tattoos or paint lines for example.
+
+[aa1]: /pixelart/images/mark_aa1.gif
+[aa2a]: /pixelart/images/mark_aa2a.gif
+[aa2b]: /pixelart/images/mark_aa2b.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Approach to Work
+
+There are some thing you should consider when working with pixels. I'm starting off rather gloomy, but don't worry! It's all uphill from here.
+
+#Investment of Time and Effort
+
+Working on pixel art is a time-consuming and often difficult process. The more time you spend working on, and then refining a piece, the better it will look. This can often take hours, though the rewards are well worth it.
+If you are not prepared to invest the time on your work, then it will look shit, regardless of how many tutorials you read.
+
+---
+
+#Basic Art Skills
+
+Basic art skills - knowledge of colour, texture, perspective, form and anatomy, as well as a fair bit of experience of looking at things, transfer just as well into this digital medium as they do into others.
+Any inability to produce a sprite you are happy with may be due to a defiency in this area. If you can't draw a person on paper - or at least tell good art apart from bad, you may well struggle with pixels.
+If this is the case, then brushing up on your basic art skills is a must.
+
+---
+
+#Nothing Ever Works First Time
+
+The first few iterations of your lineart or shaded image may often look terrible. Don't be disheartened - even the most seemingly hideous mistakes can be edited into something decent.
+I quite often find myself working by the process of refinement. Once the latest version of your piece is complete, sit back and take a good look at it before fixing it. This 'tweaking' usually breaks down into a simple, 3 step cycle :
+
+*1 - What is wrong with it?*
+*2 - How can I fix it?* (Often defined by 1)
+*3 - Fixing it.*
+
+Check out this painful progression. What was I thinking when I started it? Nethertheless, I think I saved it.
+
+![][1]
+
+---
+
+#The Use of References
+
+Often, you can make up for a lack of knowledge of your subject by working from relevant photos or other images. These can be found from a variety of sources, the most immediate being via a search engine on the internet.
+You can also find new and interesting colours from photographs and other people's pixel art. Remember that direct plagiarism, including the editing of other people's work, is distinctly uncool.
+
+[1]: /pixelart/images/mark_awfprog.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Colours and RGB Vals
+
+Once you are happy with your lineart, you need to decide how best to colour it.
+Good selection of colours not only takes your art closer to looking like a real object, but can add personality and mood to it.
+Conversely inappropriate use of or mixing of colour is instantly noticeable and most distracting.
+
+---
+
+# RGB VALUES
+Computers use a combination of three different colours to create a single pixel : Red, Green and Blue (RGB)
+Inside a computer, each of these three colours is given a value from 0 to 255, where 0 means 'none' and 255 means 'a lot of'
+These colours can be mixed in varying amounts to generate different single colours on a pixel, like paint. However some of the colours generated are not what you would expect from mixing paints.
+
+*255 , 0 , 0* gives a very bright red.
+*1 , 1 , 1* gives black.
+*255 , 255 , 255* gives pure white.
+*140 , 140 , 140* gives a medium grey.
+NOTE - 0 , 0 , 0 is often reserved for a special case - *transparency*
+
+Preset palettes may come with some nice colours, but an understanding of how to create new colours, and find new shades of existing ones with RGB values is helpful.
+
+Many modern art packages have windows like that shown below on the left, allowing you to pick colours from a vertiable rainbow.
+*Graphics Gale* which I recommended earlier also lets you load your own custom palettes, but creating new ones requires double clicking on a colour before selecting from this range, or manual use of the *RGB sliders*.
+The sliders may initially seem cumbersome and confusing, but you quickly get used to them and as they reside in the same window, they actually end up faster to use. Use of them can give you a good understanding of colour via RGB values.
+
+![][jpgpal] ![][rgbslide]
+
+
+For art in general, I find it preferrable to use 'softer', pastel colours and avoid strong, neon colours (ones with a very high value in one or two RGB values, and a very low value in the others ) They have their place, but they are very garish and I would advise against using them often.
+
+Here are a few examples of colours that I personally think work well, and colours I don't :
+
+![][palette]
+
+>>> As mentioned at the top, use of colour can be very important in creating mood. Light, pastel tones - close to grey (almost equal RGB values) create a soft, carefree atmosphere. Dark colours, with low RGB values create an oppressive, brooding atmosphere.
+>>> Using a restricted palette with variations on a single colour can produce some interesting results. A Grey palette is often used for flashback scenes. Brown palettes look like parchment or old photos. A blue palette can be used to evoke everything from an ocean vibe to deep sadness.
+
+Finding the right colour(s) for your piece isn't always easy. Some experimentation may be required, so don't be afraid to use those RGB sliders.
+It took a few false starts to find a suitably vibrant, non-clashing set of colours for this superhero:
+
+![][columns]
+
+The initial colours I chose for this column failed to fit with the mood of the scene they were to be inserted into. The top is too dark and gloomy, the blue on the bottom too obtrusive. Some edits used a lighter yellowy-grey for the top (all RGB values increased), and a cooler glacial blue for the bottom (all RGB values increased. Red value then raised even higher, closer to the Blue value)
+
+Photographs and other people's pixel art can be a great source of colour inspiration if you find yourself stuck for ideas.
+
+
+[jpgpal]: /pixelart/images/mark_jpgpal.jpg
+[rgbslide]: /pixelart/images/mark_rgbslide.gif
+[palette]: /pixelart/images/mark_palette.gif
+[columns]: /pixelart/images/mark_columns.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Displaying Pixel Art
+
+At some point in time you may want to save your art into an external file for distribution or display on a web-page.
+Some file formats are suitable, others are not.
+
+---
+
+#What not to use :
+
+*.BMP* - 16 million possible colours for each pixel. Extremely inefficient for pixel-art storage.
+*.JPG* - Lossy compression will smudge your nice crisp art in a variety of horrible ways.
+
+---
+
+#What you should use :
+
+*.GIF* - Saves images with up to 256 different colours. Small filesize allows fast loading. Loss of image quality only occurs when you excede 256 colours, though it is unlikely you will reach this point unless you are saving a composite of many sprites.
+*.PNG* - Similiar to gif, except that it will allow you to save images with more than 256 colours without image loss. Technically better, but not well supported by Internet Explorer (boo, hiss).
+
+---
+
+By far the most commonly used format for pixel art is *.GIF*. As well as having been well established, it also supports transparency (usually RGB value 0,0,0) and animation. This makes it excedingly useful for displaying game sprites.
+
+---
+
+#Programs which can save .GIF files :
+
+Unfortunately it can be difficult to find a free program which saves .gif format files well. Until recently the format was patented and distributors would have to pay a fee to support it. I recommend [Painter 23][], a small, freeware art program. Images can be pasted in and saved via Image -> Quick -> Quick GIF on the menu. It offers a series of colour options, and transparency (set by the bottom-left pixel)
+
+![][painter23eg]
+
+You might also want to check out [PaintShop Pro 3][] (dead link). This is just an old demo but - hey, it's not my fault that the time limit isn't enforced!
+
+#Programs which can save animated .GIF files :
+
+Coming Some Time! (Google till then ;) )
+
+[PaintShop Pro 3]: http://www.natomic.com/hosted/marks/mpat/psp312-32.zip
+[Painter 23]: http://www.natomic.com/hosted/marks/mpat/painter23.zip
+[painter23eg]: /pixelart/images/mark_painter23eg.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Lineart
+
+Once you have a firm concept of what you want to draw in your mind, the formation of a piece of pixel art invariably begins with its outline.
+
+>>> BLACK is the colour traditionally used for lineart. You might like to try experimenting with other colours.
+
+For smaller game sprites, this lineart is often most easily produced using the single-pixel-width, free draw tool (with help from line and other shape tools), often placing down a single pixel at a time.
+For larger backgrounds, sprites or set-pieces, you may find it easier to scan hand-drawn art, or use a tablet.
+In the case of backgrounds, it is often easier to build them up piece by piece, layer than layer, rather than as one combined piece. Breaking down the problem simplifies things, and editing object position is much simpler.
+
+![][lineart]
+
+At first glance these outlines appear harsh and jagged, due to the square nature of pixels and their dark colour. Don't worry about this - things will get better later.
+
+For game sprites, I find it preferrable to build them bulky, firmly packed and purposeful. Don't do any pose by halves - exagerate movements and don't let characters stand around limply. Keep your sprites interesting and energetic.
+
+>>> Remember, it will rarely look right first time round! Figure out where your lineart is flawed, and fix it until you are happy with it.
+>>> Take your time to get it right at this stage - mistakes will be harder to correct once you have started shading.
+
+It is strongly advised that you edit every line down to a single pixel thickness, like so :
+
+![][cleanup]
+
+This is a boring chore at times, but it does improve the appearance of your sprite. Failure to put in this effort shows in the reduced quality of the final piece.
+
+[lineart]: /pixelart/images/mark_lineart.gif
+[cleanup]: /pixelart/images/mark_cleanup.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Links
+
+#OTHER TUTORIALS
+
+- [The Pixel Bible][] (dead) - Blackeye Software's Derek Yu tells you how its done.
+- [So you want to be a Pixel Artist?][] (dead) - A series of specific game related tutorials. Lots of examples.
+
+
+#GENERAL PIXEL ART WEBSITES
+
+- [Pixelation][] (dead) - A great forum visited by pixel artists of all skill levels.
+- [Pixel-Zone Downloads][] (dead) - Some fun toys for pixel artists.
+
+
+#RECOMMENDED PIXEL ARTISTS
+
+- [Mark's MMF Bunker][] (dead, [cached](mark.md)) - The layout may look familiar. This is my site :D
+- [Chris Tessmer's Recent Sprites][] (dead) - Miscellaneous good stuff.
+- [RhysD's Pixel House][] - RhysD's isometric lovin' site.
+- [Final Redemption][] (dead) - Kon's site. Some serious muscle!
+- [Chiashia Ly's Portfolio][] (dead) - Some beautiful Japanese-style sprites.
+
+If you have any links you would like me to add here, please drop me a post on the [Natomic Forums][] (dead link)
+
+ BACK
+
+[Natomic Forums]: http://www.natomic.com/forums.asp "Dead Link"
+[The Pixel Bible]: http://www.classicgaming.com/blackeyesoftware/pix.html "Dead Link"
+[So you want to be a Pixel Artist?]: http://tsugumo.swoo.net/tutorial/ "Dead Link"
+[Pixelation]: http://pixelation.swoo.net/ "Dead Link"
+[Pixel-Zone Downloads]: http://www.indie-rpg.net/pixel-zone/shtml/downloads.shtml "Dead Link"
+[Mark's MMF Bunker]: http://www.natomic.com/hosted/marks "Dead Link"
+[Chris Tessmer's Recent Sprites]: http://magicianx.phpwebhosting.com/sprites/bin/sprites.html "Dead Link"
+[RhysD's Pixel House]: http://www.rhysd.com/ "Rhys Davies"
+[Final Redemption]: http://www.finalredemption.com/art.htm#pixelated "Dead Link"
+[Chiashia Ly's Portfolio]: http://www.kaffeinated.net/~rrealm//portfolio/sprite.html "Dead Link"
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Shading
+
+All objects have prescense in three dimensions. Their form becomes powerfully defined under a light source. Planes facing towards the source are illuminated. Planes facing away are starved of light and remain dim. On a two-dimensional computer screen, it is the job of this shading to convey a sense of form and depth.
+
+Now that we have shape from our lineart, and the foundations of colour, we can variate that colour to really bring our piece to life.
+
+---
+
+#Establishing Light Sources
+
+In order to begin shading an object, it is important to first establish where light falling upon it is coming from.
+For outdoor settings, or indoor areas with consistent overhead lighting, it helps to pick a constant direction for light to fall from. Some people like their light to fall from the upper left corner of their image - I prefer the upper right and will use this for the rest of this tutorial.
+This common kind of light all strikes your object at the same angle.
+
+![][lightsource]
+
+Areas with one or more lightsources illuminating shapes all around them are a special case and requires a little more work and attention. Good use of alternate light sources helps create mood and atmosphere in a scene. It is a rather obvious point, but important to note that in these cases, light noticeably decreases in intensity the further from the source you are.
+
+![][egypt]
+
+---
+
+#The Shading
+
+With our light source firmly established, we can finally shade our object, starting with the simple example of a sphere.
+But first, an example of what not to do :
+
+![][pillow]
+
+This called 'pillow shading', a great evil spoken of by pixel artists in hushed tones. It is the work of the devil, and appears to assume a single point light source hanging directly between us and our object.
+Do not, under any circumstances, shade a shape this - it looks rubbish. This sort of radial tone gradient is suitable only for a surface lit by a very close light source - like the burning torches above.
+
+
+As stated above, however, our light falls uniformly from the top-right corner of our image. Bearing this in mind, I like to start shading an area with two new tones - one darker than the base tone (lower RGB values) and one brighter (higher RGB values)
+The *lighter* tone should be applied to surfaces *facing towards the light source*
+The *darker* tone should be applied to surfaces *facing away from the light source*
+
+![][shading1]
+
+Our sphere immediately gains form and depth. We can enhance this effect by adding even more tones, above and below our two new ones.
+
+![][shading2]
+
+A this point you may find your object appears to light or too dark and need to correct the tones you are using. This is not uncommon.
+
+These principles apply even more simply to a flat-sided shape.
+
+![][cuboid]
+
+---
+
+A sphere is a rather boring and sterile object though. The same principles can be applying to a more interesting, less uniform object like this fat little creature :
+
+![][fatfella]
+
+Note how planes facing towards the light source are brightened, and those facing away dimmed. A good understanding of the three dimensional form of your piece is vital for shading, so that you can identify the amount of light these surfaces receive and shade appropriately.
+In this example I have used a darker base colour and worked more toward the lighter end of the spectrum. The darker shadows are still there, but the overall effect is the lightening of the flesh to a tone I felt was more appropriate.
+
+>>> In some cases (faces, smooth machinery) detailed, careful shading is necessary. In others - don't worry about it too much. I find that messy shading often improves the texture of a surface.
+
+---
+
+As the flat-sided shape above showed, the distance between different shades is by no means constant.
+For more cuboid shapes, the top and bottom surfaces are best implied by a narrow area of shading. Observe the example of this slab of rock.
+
+![][rocky]
+
+Note again that on natural surfaces like this, rough shading can help.
+Varying the colour as well as the brightness of new shades can also produce some interesting results ( increasing or decreasing one or more of the RGB values more than the others ). You will need to do this for non-white lighting as well.
+
+[lightsource]: /pixelart/images/mark_lightsou.gif
+[egypt]: /pixelart/images/mark_egypt.gif
+[pillow]: /pixelart/images/mark_pillow.gif
+[shading1]: /pixelart/images/mark_shading1.gif
+[shading2]: /pixelart/images/mark_shading2.gif
+[cuboid]: /pixelart/images/mark_cuboid.gif
+[fatfella]: /pixelart/images/mark_fatfella.gif
+[rocky]: /pixelart/images/mark_rocky.gif
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Softening Outlines
+
+Now that your sprite is almost looking like the finished product, one problem may remain - those dark, monotone outlines that we started with.
+
+In some parts they are fine, but in others, especially areas where colours are primarily pale, they appear harsh and innapropriate. The obvious solution is to lighten them up a bit.
+I'll split this down into three sections:
+
+---
+
+#SOFTENING OUTLINES
+
+In most cases the most appropriate action is to replace the black outline with a colour somewhat closer to its surrounding shades.
+Light is an important consideration here. Lines under direct light should be lightened more. Lines in shadow should be lightened less, if at all.
+Take the extreme case of this mummy - before and after its outlines have been lightened.
+
+![][mumi]
+
+If you want to do this really seriously, you might also want to gradiate lightened lines, using even more shades between their lightest tone and the original black. This ball example shows the basic principle.:
+
+![][ball] <img src="/pixelart/images/mark_ball.gif" width="128" height="128">
+
+---
+
+#BRIGHTENING OUTLINES
+
+Sometimes the shade you want to replace the lineart with is lighter than line 'and' its surrounding shades. I find this useful along the non-outline edges of a shape where edges meet.
+This simple box example says it better :
+
+![][boxed]
+
+---
+
+#REMOVING OUTLINES
+
+In some cases the sprite will look better if certain outlines are removed entirely, and replaced by an adjacent colour. This includes instances such as edges between flesh and clothes, and colours painted on a surface.
+Take this example of a shirt sleeve hanging on an arm - before and after.
+
+![][sleeve]
+<img src="/pixelart/images/mark_sleeve.gif" width="365" height="234">
+
+[mumi]: /pixelart/images/mark_mumi.gif
+[ball]: /pixelart/images/mark_ball.gif
+[boxed]: /pixelart/images/mark_boxed.gif
+[sleeve]: /pixelart/images/mark_sleeve.gif
+
--- /dev/null
+[Pixel Art Tutorials](tutorials.md) >> [Mark's Pixel Art Tutorial](mark.md) >> Tools
+
+For the purposes of these tutorials I am going to recommend one sprite editor : Graphics Gale, a fantastic free art package tailored towards pixel art which you can download [here](https://graphicsgale.com/us/).
+
+![][1]
+
+At first glance it may seem a little overwhelming, but it has every feature that I find useful: right-click pipette, easily accessable RGB sliders, an easily customisable palette, customisable hotkeys, layers, an animation viewer - the list goes on and on.
+It really is a fantastic package, clearly designed with pixel artists in mind and it's hard to believe that it's free! It is receiving frequent version updates too.
+
+---
+
+Previously I had been using the Picture Editor in [Clickteam's](http://www.clickteam.com/) The Games Factory.
+I found that the Frame Area and easily manipulatable object system make TGF most useful for storing and displaying pixel art, as well as drawing it.
+Plus you can make 2D sprite games with them! They are well worth a look - they're not free but the prices are reasonable and they're a nice, simple way to get into games creation.
+( MMF is their newest package, but it's pixel-pushing features are an annoyance to anyone looking to sprite in it. )
+
+---
+
+Tools you do not need :
+
+1) Overpowered, expensive programs like Photoshop are not required, nor would I recommend using them if you had them. Use of features like blurring, filters, paintbrush tools and various other special effects will most often only damage your work and distort your style and I would strongly advise you not to spoil your art with them.
+
+2) Microsoft Paint. It's rubbish - it has to be or MS would probably be facing lawsuits from various art-package companies for anti-competitive behaviour. Graphics Gale does everything Paint does and much, much more.
+
+[1]: /pixelart/images/mark_picedeg.gif
--- /dev/null
+Pixel Art Tutorials
+===
+- Tutorials
+ - The Pixel Art Tutorial by [cure][logan tanner] [Original][cure's tutorial]
+ - Pixel This by [Russell Tate][] [Original][pixel this] ([Cache](pixelthis.md))
+ - Mark's Pixel Art Tutorial [Cache][mark.md] ([Wayback][mark's tutorial])
+- Time-lapse art progress
+ - Scene #38, "Boat House" by [Octavi Navarro][] [Original][scene 38] ([Cache](scene39.md))
+- a [big list](http://www.pixelprospector.com/the-big-list-of-pixel-art-tutorials/) of tutorials
+
+[russell tate]: http://www.istockphoto.com/RUSSELLTATEdotCOM "Russell Tate"
+[logan tanner]: http://www.logantannerart.com/ "Logan Tanner"
+[octavi navarro]: http://pixelshuh.com "Pixels Huh"
+
+[pixel this]: http://ihaveanidea.org/articles/2011/10/07/pixel-this-how-to-draw-with-pixels/
+ "Pixel This: How to Draw with Pixels"
+[scene 38]: http://pixelshuh.tumblr.com/post/158506179429/scene-38-the-boathouse-pixel-art-illustrations
+ "Scene #38, 'Boat House'"
+[cure's tutorial]: http://pixeljoint.com/forum/forum_posts.asp?TID=11299
+ "The Pixel Art Tutorial"
+[mark's tutorial]: http://web.archive.org/web/20131114195509/http://www.natomic.com/hosted/marks/mpat/
+ "Wayback Machine: Mark's Pixel Art Tutorial
projects / za3k.git / commitdiff
