{"id":12,"date":"2010-03-27T06:20:17","date_gmt":"2010-03-27T06:20:17","guid":{"rendered":"http:\/\/new.blackgolem.com\/blog\/?p=12"},"modified":"2013-11-29T09:03:26","modified_gmt":"2013-11-29T09:03:26","slug":"learning-pixel-art-2","status":"publish","type":"post","link":"http:\/\/www.blackgolem.com\/blog\/learning-pixel-art-2\/","title":{"rendered":"Learning Pixel Art 2"},"content":{"rendered":"<p>I was really busy since the\u00a0first post about learning pixel art. I investigated many screenshots of other shmups to learn from them (many thanks to the huge review archive at\u00a0<a title=\"www.shmups.com\" href=\"http:\/\/www.shmups.com\/\" target=\"_blank\">www.shmups.com<\/a>).<\/p>\n<p>First of all: Most of these shmups look just amazing! I wonder if I ever will come close to any of these artists.<\/p>\n<p>Second: No game used the hard edge style. So I tested how the red plane looks like without edges:<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2010\/03\/red_devil_edge_compare.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66\" alt=\"red_devil_edge_compare\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2010\/03\/red_devil_edge_compare.png\" width=\"440\" height=\"105\" \/><\/a><\/p>\n<p>In my opinion the the old version looks better. But it may integrate better in the game without edges.<\/p>\n<p>I played around with\u00a0<a title=\"GIMP Homepage\" href=\"http:\/\/www.gimp.org\/\" target=\"_blank\">GIMP<\/a>\u00a0for a nice camouflage texture and different colors:<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-31\" alt=\"camoflage devil collage\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/camoflage_devil_collage.png\" width=\"316\" height=\"230\" \/><\/p>\n<p>That was nice and did not take much time. Full of enthusiasm I set up a new blank canvas and drew the following&#8230; &#8220;thing&#8221;:<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/fish.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-33\" alt=\"fish machine pixel art\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/fish.png\" width=\"92\" height=\"112\" \/><\/a><\/p>\n<p>What the hell is that?<\/p>\n<p>I really don&#8217;t know but it looked better while I was drawing it at closeup \ud83d\ude42 It was a test for vehicles with organic shapes.<\/p>\n<p>This last creation was so disappointing that I turned off all the graphics tools and started searching for more pixel art tutorials. It took several hours and these are the most important:<\/p>\n<ul>\n<li><a title=\"Basics\" href=\"http:\/\/www.natomic.com\/hosted\/marks\/mpat\/\" target=\"_blank\">Basics<\/a><\/li>\n<li><a title=\"Coloring\" href=\"http:\/\/pixel-zone.rpgdx.net\/shtml\/tut-coloring.shtml\" target=\"_blank\">Coloring<\/a><\/li>\n<li><a href=\"http:\/\/www.vbgore.com\/Pixel_Art_Tutorials\">RPG stuff<\/a><\/li>\n<li><a title=\"Old School Logo\" href=\"http:\/\/www.exotica.org.uk\/mirrors\/gfxzone\/articles\/goblin_pixelling_tutorial-article.html\" target=\"_blank\">Old school logo<\/a><\/li>\n<li><a title=\"Tutorial Collection\" href=\"http:\/\/pixel-zone.rpgdx.net\/shtml\/tutorials.shtml\" target=\"_blank\">Tutorial collection 1 (some dead links)<\/a><\/li>\n<li><a title=\"Kick Ass Pixel Tutorials\" href=\"http:\/\/gas13.ru\/v3\/tutorials\/\" target=\"_blank\">Tutorial collection 2 (kick ass stuff!)<\/a><\/li>\n<\/ul>\n<p>Following these tutorials step by step I started another try. Most games use very small sprites for their player vehicles. So I shrinked the canvas to 40&#215;44 and created this one:<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/duck_preview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-35\" alt=\"duck preview\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/duck_preview.png\" width=\"280\" height=\"176\" \/><\/a><\/p>\n<p>That&#8217;s not so bad, is it?<\/p>\n<p>Finally I thought about vehicles that are a little more &#8220;steampunky&#8221;. To this point the sprites lacked the steam and brass flair. The usual Steampunk aviator has some kind of balloon ship. So I started a war Zeppelin. I&#8217;m going to show you how I made it, step by step.<\/p>\n<h2>The outline of the balloon:<\/h2>\n<p>First I used a clean black line for the balloon outline.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev0.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-38\" alt=\"zeppelin_dev0\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev0.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Inner edges:<\/h2>\n<p>Then I added the edges inside the balloon shape with a different color (dark grey). The lines are symmetrical. This symmetry will save a lot of work in further steps.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-40\" alt=\"zeppelin_dev1\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev1.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Basic color:<\/h2>\n<p>As a basic color I used an average grey tone (RGB = 128, 128, 128). This is useful for coloring the sprite later.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-41\" alt=\"zeppelin_dev2\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev2.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>First shades:<\/h2>\n<p>I declared the light to be centered above the balloon. Therefore I darkened the side segments. The more a segment is aside the darker it gets. I shaded just one side and mirrored it to the other side. This is only possible when the light source lies on the symmetry axis of the sprite.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-43\" alt=\"zeppelin_dev3\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev3.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>First shadow gradient:<\/h2>\n<p>Further the light source was declared north of the sprite. Therefore the south gets darker. The gradient supports the curved balloon shape. Here I just drew the gradient for the middle segment.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-44\" alt=\"zeppelin_dev4\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev4.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>First highlight gradient:<\/h2>\n<p>The opposite was done for the northern end of the balloon.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-46\" alt=\"zeppelin_dev5\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev5.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Shading the other segments:<\/h2>\n<p>Here I distributed the gradients of the middle segment to the other segments. The balloon gets darker on the side segments so the gradients have to get darker to. After drawing the gradients left I mirrored them to the right side.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev61.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48\" alt=\"zeppelin_dev6\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev61.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Dithering:<\/h2>\n<p>Dithering is a trick for giving a surface a smoother look. I just placed the dithering pixels randomly.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-49\" alt=\"zeppelin_dev7\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev7.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Shading the edges:<\/h2>\n<p>The surface between the edges got shaded. After this I applied the surface gradients to the\u00a0 black edges. They are still darker than the surface for keeping the edge character. The mirror trick is applicable but destroys the asymmetry of the dithering.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev7b.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-50\" alt=\"zeppelin_dev7b\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev7b.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Turbines:<\/h2>\n<p>Here I gave the Zeppelin its turbines. They were made the same way as the balloon: outline &#8211; vertical gradient &#8211; horizontal gradients &#8211; dithering &#8211; edge shading.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51\" alt=\"zeppelin_dev8\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev8.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Wings:<\/h2>\n<p>The Zeppelin needed wings to mount the turbines onto. So I drew a simple wing shape and mirrored it. I stretched the turbines for jutting out below the wings.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52\" alt=\"zeppelin_dev9\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev9.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Wing profile:<\/h2>\n<p>Here I set the base for shading the wing profiles by beveling them: a darker color south, a brighter color north.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-53\" alt=\"zeppelin_dev10\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev10.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Smoothing the wing profiles:<\/h2>\n<p>The southern wing edges got a fluent gradient for a roundish appearance. The northern edges were left flat but received additional joint shades.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-54\" alt=\"zeppelin_dev11\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev11.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Shading the wing edges:<\/h2>\n<p>The same procedure as used for the balloon.<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-55\" alt=\"zeppelin_dev12\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev12.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Make it a war machine:<\/h2>\n<p>What would a shmup sprite be without guns?<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev13.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-56\" alt=\"zeppelin_dev13\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_dev13.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<h2>Steampunk coloring:<\/h2>\n<p>Tools like\u00a0<a title=\"Photoshop Homepage\" href=\"http:\/\/www.adobe.com\/products\/photoshop\/compare\/\" target=\"_blank\">Photoshop<\/a>\u00a0or\u00a0<a title=\"GIMP Homepage\" href=\"http:\/\/www.gimp.org\/\" target=\"_blank\">GIMP<\/a>\u00a0(and even\u00a0<a title=\"Graphics Gale Homepage\" href=\"http:\/\/www.humanbalance.net\/gale\/us\/download.html\" target=\"_blank\">Graphics Gale<\/a>) make it easy to color greyscale graphics. Steampunk graphics often use grey and brown tones. So: here is the final result:<\/p>\n<p><a href=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_final.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-57\" alt=\"zeppelin_final\" src=\"http:\/\/www.blackgolem.com\/blog\/wp-content\/uploads\/2013\/08\/zeppelin_final.png\" width=\"400\" height=\"400\" \/><\/a><\/p>\n<p>I hope you enjoyed this &#8220;built-in&#8221; tutorial. If you know any hints, tricks or good tutorials for pixel art: Please let me know.<\/p>\n<p><strong>Cheers,<\/strong><br \/>\n<strong>Thomas<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was really busy since the\u00a0first post about learning pixel art. I investigated many screenshots of other shmups to learn from them (many thanks to the huge review archive at\u00a0www.shmups.com). First of all: Most of these shmups look just amazing! I wonder if I ever will come close to any of these artists. Second: No<span class=\"excerpt-ellipsis\">&hellip;<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-graphics","category-tutorial"],"_links":{"self":[{"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":4,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":28,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions\/28"}],"wp:attachment":[{"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.blackgolem.com\/blog\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}