Want to make your own pixel art? Cory Martin will share everything you need to know to get started! Learn what differentiates pixel art from other art-forms; get familiar with the various techniques used by pixel artists; and discover the most common mistakes people make when starting out, and how to avoid them. --- This was for a talk I gave for the Nashville Game Developers group on March 26th, 2018.

1. Pixel Art
and how to make it

2. Outline
• What is pixel art?
• Programs and tools
• Pixel art Techniques
• Avoiding beginner mistakes
• General advice on improving

3. About Me

4. Cory Martin
Twitter: @CoryAlexMartin
Website: CoryMartin.net

13. Started playing games some time in the mid
90s

21. Started making games in 2005

23. Started making pixel art in 2009

24. You have to start somewhere

31. Nauris Amatnieks (@namatnieks)

32. Nauris Amatnieks (@namatnieks)

33. What is Pixel Art?

34. What is a pixel?

36. –Thomas Jefferson
“Pixel art is a form of digital art in which the artist exerts direct control
over the individual pixels that make up a piece.”

37. –Thomas Jefferson
“If the pixel art loses the sense of the importance of the pixels which
construct it, then I don't think it can be called pixel art. It is when the
pixels hold importance to the nature of the work which defines it as pixel
art.”

38. Examples of Pixel Art:

39. Donkey Kong (1981) - Nintendo

40. Super Mario Bros. 3 (1990) - Nintendo

41. Chrono Trigger (1995) - Square

42. Mother 3 (2006) - Brownie Brown / Hal Laboratory

43. VVVVVV (2010) - Terry Cavanagh

44. Iconoclasts (2018) - Konjak

45. Celeste (2018) - Matt Makes Games

46. Colossal Katamari - Simon Andersen (@snakepixel)

47. Burning Sunrise - Sergey Kostik (pixelartist.ru)

48. Captain Exocet at Flaber Cove - Bugpixel (bugpixel.com)

49. Curiosity - Fool (fool.deviantart.com)

50. He Who Must Not Be Named - Helm (locust.leaves@gmail.com)

51. SeaCave - Josiah (mrturneh.tumblr.com)

52. Examples of Not Pixel Art:

54. Braid (2008) - Jonathan Blow

55. woode

56. Super Meat Boy (2010) - Team Meat

58. Art History
• 62,000 BC: Cavemen painted on walls
• 1970s: Pixel Art
not pixel art

59. Programs and Tools

60. Programs to Use:
• Aseprite - $15 (Trial version available)
• PyxelEdit - $9 (Old version available for free)
• GraphicsGale - Free (Windows only)
• Pro Motion - Free/$40 (Windows only)
• Adobe Photoshop - $20/$30 monthly
• Paint.NET - Free (Windows only)
• Lospec.com/pixel-editor - Free (web-browser based)

61. You may need to change some settings!

62. Tools

63. Recolors a pixel or cluster of pixels
at the point you click, using the chosen color.
Pencil

64. Removes a pixel or cluster of pixels
at the point you click, leaving only the background behind it.
Eraser

65. Recolors a cluster of adjacent pixels of the same color.
Can also be used to recolor all instances of a color in a piece
if the "contiguous" toggle is disabled.
Flood Fill

66. Changes the current selected color to the color of the
pixel on the canvas you click.
Eyedropper

67. Selects pixels which can then be moved or copied,
creates bounds to restrict the area you can draw or fill, or
designates the area where copied pixels should be pasted.
Various Selection Tools

68. File Formats

69. Slug - Blob (???)
png

70. Slug - Blob (???)
jpeg

71. Slug - Blob (???)
png

72. Slug - Blob (???)
jpeg

73. gif

74. Scaling

75. Scaling Algorithms

78. When upscaling, multiply by whole numbers

79. Link - Nintendo
Upscaled properly

80. Link - Nintendo
Upscaled multiplying by non-whole multiplier

81. Correct: 1x, 2x, 3x, 4x...
Incorrect: 1.7x, 2.5x, 3.92x, 4.1x...
Correct: 100%, 200%, 300%, 400%...
Incorrect: 170%, 250%, 392%, 410%...

82. To Downscale Pixel Art
1. Measure the width or height of a single pixel to determine the piece's pixel
size.
2. Open your image editor's image size tool.
3. Divide the current width and height of the whole image by the pixel size.
4. Use Nearest Neighbor scale for downsizing, too!

83. Stuff to Know
techniques and useful knowledge

84. The Importance of a Pixel

85. Mother 3 (2006) - Brownie Brown / Hal Laboratory

90. Color

91. !!! WARN !!!
COLOR THEORY IS WEIRD

92. Color Ramps
lor Ramp is a ramp representing every shade of a base color, ordered from brightest to dar
Above are examples of blue, orange, green and brown color ramps.

93. Share colors!
Color ramps can share colors with other ramps in the palette.
This reduces the number of colors and creates cohesion.

94. Limit Your Color Count

95. 11 Colors
Mega Man 6 (1993) - Capcom

96. 33 Colors
SeaCave - Josiah (mrturneh.tumblr.com)

97. Curiosity - Fool (fool.deviantart.com)
22 Colors

98. Chrono Trigger (1995) - Square
211 Colors

99. Iconoclasts (2018) - Konjak
158 Colors

100. Reasons to Limit Your Color Count
• Creates cohesion across your art
• Makes it easier to recolor things
• Gives you a greater understanding of color interactions

104. Try using your existing colors first, and if you can't make it work, or feel like it
would look considerably nicer with more colors, then add colors.

105. The 3 Values That Determine Color
• Hue
• Saturation
• Lightness (aka Brightness or Value)

106. Hue
Determines which "color of the rainbow" is used.

107. Saturation
Determines how prominent the hue is.

108. Lightness
Determines how bright the color is.

109. Lightness
Saturation
Hue

110. When creating a color ramp, shift hue
saturation and lightness to create contrast
between each shade.

111. de gets darker, shift its shade towards a certain hue, and as it gets lighter, shift it towards a
TYPICALLY:
Dark colors = bluer (colder)
Light colors = yellower (warmer)
Hue Shifting

112. Model Tree

113. No Hue Shifting

115. Saturation Shiftingddle" shade is often the most saturated, while brighter shades and darker shades are less sa
We shift saturation because it prevents our colors from being too intense.

116. Model Tree

117. No Saturation Shifting

118. Lightness ShiftingDarker colors are darker and lighter colors are lighter.

119. Model Tree

120. No Lightness Shifting

121. Most beginners only shift brightness

122. Model Tree

123. Only Shifting Brightness

124. Nothing Shifted

125. THE MORAL OF THE STORY
e, Saturation, and Lightness are all important values to shift when creating a color ram

127. Dithering

128. Objects Out There - Brent Monroy (1986)
Dithering is the technique in which two colors are used in a pattern to create the
illusion of a third color.

133. Loom (1990) - Lucusfilm Games

134. Escape - Marat Khazarzhan

136. Escape - Marat Khazarzhan

138. Dither Tips
• The closer the two colors you're using are, the less harsh and more
effective the technique is.
• The smaller the scale of the image, the better it works.
• Try not to overuse it.

139. Anti-Aliasing

140. aliasing creates the illusion of art having a resolution greater than the canvas's actual resolu

146. My Anti-Aliasing Process
1. Find the jaggiest pixels and replace them with the the shade closest to the
background color.
2. Now, find the jaggiest pixels once again and replace them with a shade
closer to the foreground color.
3. Repeat Step 2 until you're satisfied or you run out of shades to use.

147. Try to avoid creating mini-gradients or else it'll wind up blurry

149. 50 100OPACITY:

150. 33.3 66.6 100OPACITY:

151. 25 50 75 100OPACITY:

152. 25 50 75 100OPACITY:

153. 25 50 75 100LIGHTNESS:

154. 49 48 78 100
n lightness in some anti-aliasing scenarios. Here, the perceived opacity is 25, 50, 75, 100, b
LIGHTNESS:

155. You can use opacity to find the "correct" colors
1. Paint the foreground color onto a new layer.
2. Set layer opacity to appropriate value (e.g. if you want a color half way
between the foreground and the background colors, set the opacity to 50%)
3. However, don't use transparency in your pixel art. Just use the color picker
to select the colors and add them to your palette.

156. However, the mathematically correct color doesn't matter that much. What
matters is how the viewer perceives the color in relation to other colors.

158. pink blue orange bluered 49 45 47 100LIGHTNESS:

161. 25% foreground color50% foreground color75% foreground color100% foreground color
The more of a pixel our "intended shape" occupies, the closer that pixel's
color should be to the foreground color.
Intended Shape

163. Your anti-aliasing won't work if your background changes.

164. You can use anti-aliasing inside outlines, but be more subtle about it.

165. Mort Mort (@mnrART)

166. Outlines

167. Effects of Outlines
• Can help the sprite stand out against a multitude of backgrounds
(depending on the outline color)
• Gives your sprites a "cartoony" style.
• Reduces crime rates.

168. There are many different styles of outlines!

169. Black outline

170. Non-black outline

171. Colored outline using the darkest shade of the thing it's outlining

172. Colored outline using a dark color based on the thing it's outlining

173. Selective outline based on the light source

174. Selective outline + non-black outline

175. Even more prominent selective outlining

176. Internal Outlines

179. any internal borders will make things look overly segmented and make your art look messy

181. Internal borders are often lighter than external borders.

186. Outlines Can Imply Shape

189. n outline pixel is placed diagonally from the inside of the sprite and touches two or more oth

197. Avoiding Beginner Mistakes

198. with the center of the object recieving the most light, with shades getting darker as they appr
Pillow Shading

199. Pillow Shading

200. Model Tree

201. Too Many Internal Outlines

203. Too Much Saturation

204. Model Tree

205. Unwarranted Doubles

207. When the length the of lines that make up a curve break numeric linear sequence.
Jaggies

208. 4 3 2 1 1 1 2 3 4

209. 4 3 1 2 1 1 2 2 5

210. 4 3 1 2 1 1 2 2 5

211. 4 3 2 1 1 1 2 3 4

212. Orphan Pixels
pixels not connected to a cluster. Good for adding strong detail but otherwise will just create
Anti-aliasing and dithering are exceptions.

213. Model Tree

214. Whenever you encounter an orphan pixel in your work, try to turn it into a
pixel cluster instead.

215. Mixels
When a piece of "pixel art" has inconsistent pixel sizes.

217. General Advice on
Improving

218. General Advice on Improving
• Closely study other pixel art and try to create art based on that.
• Do @Pixel_Dailies, a Twitter that posts a daily theme and retweets entries.
• Get feedback from other pixel artists.
• Follow tutorials.
• Learn general art stuff (perspective, anatomy, light, color theory)
• Practice when you have time!

219. Resources
• lospec.com: Huge collection of tutorials and palettes. Also has a free
online pixel art editor.
• PixelJoint.com: Longstanding and well respected website for finding and
posting pixel art.
• Twitter.com/Pixel_Dailies: Twitter that posts a daily theme and retweets
entries.
• Spriters-Resource.com: Huge database of graphics from 2D video games.

220. In Conclusion

222. make art

223. Challenge!
Find a game to use as reference and make an asset based on that game's style.
Aseprite, PyxelEdit, lospec.com/pixel-editor
Quick Tools
spriters-resource.com
Reference