{"id":2052,"date":"2024-04-09T18:27:51","date_gmt":"2024-04-09T17:27:51","guid":{"rendered":"https:\/\/www.katsbits.com\/site\/?p=2052"},"modified":"2024-04-09T18:27:51","modified_gmt":"2024-04-09T17:27:51","slug":"making-normal-maps-from-photographs","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/","title":{"rendered":"Make Normal Maps From Photographs"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Photographic_Tips_for_Normal_Mapping\" >Photographic Tips for Normal Mapping<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Flat_Light_%E2%80%93_overcast_daylight\" >Flat Light &#8211; overcast daylight<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Flat_Light_%E2%80%93_shaded_daylight\" >Flat Light &#8211; shaded daylight<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Harsh_light_%E2%80%93_flash_photography\" >Harsh light &#8211; flash photography<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Long_exposure_times_tripods\" >Long exposure times (&amp; tripods)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Base_Image_Composition\" >Base Image Composition<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Active_Texture_Area\" >Active Texture Area<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Desaturation_Image_Editing\" >Desaturation &amp; Image Editing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Normal_Map_Creation\" >Normal Map Creation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-photographs\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>This tutorial will run through some of the things you need to be thinking about when making normal maps directly from photographs; that is, using photographs as a direct source for creating a &#8216;source&#8217; image to pass through various normal mapping tools.  <\/p>\n<p>This is especially useful in instances where recreating a heightTemplate may be impractical or not possible as per the <a href=\"https:\/\/www.katsbits.com\/site\/making-normal-maps-from-images\/\" title=\"Making normal maps from images\" target=\"_self\" rel=\"noopener\">previous tutorial of making normal maps from photographs here<\/a> and the use of a photograph as a basis more convenient.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Photographic_Tips_for_Normal_Mapping\"><\/span>Photographic Tips for Normal Mapping<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>One of the big problems you&#8217;ll find with the way people generally take photographs is that they do so without any regard to their eventual use as textures. What this means is that shots are taken without any regards to the prerequisite that would-be textures generally need to have; mainly to do with limiting the amount of work a texture artist needs to do with the artwork in order to effectively convert it into a usable asset. This is one of the reasons why it&#8217;s not a good idea to use images found on the Internet as they&#8217;ve not been taken correctly.<\/p>\n<p>Some general tips to think about when taking your photographs;<\/p>\n<blockquote class=\"clear_styling\">\n<h4><span class=\"ez-toc-section\" id=\"Flat_Light_%E2%80%93_overcast_daylight\"><\/span>Flat Light &#8211; overcast daylight<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Generally speaking if you&#8217;re able to take your own photographs for texture use you need to be looking to take them in such a way as to have the <b>subject lit<\/b> with a relatively <b>flat light<\/b> &#8211; nearly every image you see on photo resource sites don&#8217;t do this and it&#8217;s tedious and time consuming to correct. What this means is that you actually want to be <b>taking photographs on overcast days<\/b> (no rain unless you need the &#8216;wet&#8217; look), either overcast because it&#8217;s going to rain or overcast due to low cloud; any condition in which you effectively get a flat ambient light (the sun&#8217;s strong directional lighting in minimised whilst you still get enough light coverage to see what you&#8217;re looking at).<\/p>\n<p>Doing this (whenever possible) means the subject your photographing will be lit by a none-directional light, as much as possible (outside of a studio setting); this flattens highlights and reduces the depth of dark areas and the often harsh directional dark shadows cast by strong sunlight.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Flat_Light_%E2%80%93_shaded_daylight\"><\/span>Flat Light &#8211; shaded daylight<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>If it&#8217;s hard to take photos in overcast conditions (you live in LA where the sun always shines!) then look to <b>take photos in the shade<\/b>; whilst not nearly as good as overcast conditions the resulting photographs more often than not won&#8217;t have any of the problems associated with taking photos in direct sunlight &#8211; strong shadows\/lights. You can create your own shade by standing in front of the subject.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Harsh_light_%E2%80%93_flash_photography\"><\/span>Harsh light &#8211; flash photography<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><b>Avoid using flash photography where ever possible<\/b> as the methods that can be employed to reduce the glare caused by the use of a flash will often destroy the detail in an image &#8211; using the high-pass filter to reduce &#8216;contrast&#8217; in an image doesn&#8217;t work too well with photos taken with a flash because the contrasts between the flash &#8216;spot&#8217; and the darker parts of a photo are to high to get optimal results.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Long_exposure_times_tripods\"><\/span>Long exposure times (&amp; tripods)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You can get around the need to use a flash by setting up a tripod &#8211; whenever you can &#8211; and using a long exposure timing on the camera.<\/p>\n<\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"Base_Image_Composition\"><\/span>Base Image Composition<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When taking your photographs it&#8217;s best to <b>take a number of shots from different angles<\/b> &#8211; the reason being that no matter how hard you try, if you only have one photo source you will get pattern repeats that are difficult to avoid or disguise; taking several shots from slightly differing angles means being able to use a larger sample source when cloning to create a more complete image for use as a texture base.<\/p>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage1.jpg\" width=\"428\" height=\"571\" alt=\"Stage 1 : Adding the base photograph from which the normal map will be generated\" title=\"Stage 1 : Adding the base photograph from which the normal map will be generated\" \/><\/p>\n<p>Stage 1 : The base photograph from which the normal map will be generated<\/p>\n<\/p><\/div>\n<p>The image above is the original photograph that will be used to create both the diffuse layer and the heightTemplate from which the normal map will eventually be generated. The flat light in which the photograph was taken helps prevent too many obtrusive dark shadows being present where they wouldn&#8217;t represent &#8216;depth&#8217; (as the normal map tools will see it).<\/p>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage2.jpg\" width=\"428\" height=\"761\" alt=\"Stage 2 : adding further layers of photographs\" title=\"Stage 2 : adding further layers of photographs\" \/><\/p>\n<p>Stage 2 : adding further layers of photographs<\/p>\n<\/p><\/div>\n<p>Cloning or copy\/pasting sections from some of the other photographs into the working texture file allows greater coverage of the image space with more unique features, even using the clone tool now would give better results than trying to over use the original photographs features. All this work forms a base source image from which the actual texture will be &#8216;cut&#8217;.<\/p>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage3.jpg\" width=\"428\" height=\"761\" alt=\"Stage 3 : Final photo layers and image clone usage\" title=\"Stage 3 : Final photo layers and image clone usage\" \/><\/p>\n<p>Stage 3 : Final photo layers and image clone usage<\/p>\n<\/p><\/div>\n<p>Once done you should end up with something that doesn&#8217;t have any overly noticeable tiling or pattern repeat; depending on the final textures placement and use, it may need more tweaking to hide any obvious feature repeats (slight tonal changes are not noticeable on their own, but tile a texture across a large surface and the difference and pattern repeat become all to noticeable &#8211; which can be difficult to hide when in use.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Active_Texture_Area\"><\/span>Active Texture Area<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once a base source is create a section of it will then be used to create the actual texture space, a 512 x 512 pixel image in this case. Some further work will be needed to ensure the image tiles correctly without any &#8216;edges&#8217; showing. Additional tonal or colour work can also be done at this point the result of which should be a &#8216;made ready&#8217; (diffuse layer) image.<\/p>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage4.jpg\" width=\"428\" height=\"428\" alt=\"The tiling texture space\" title=\"The tiling texture space\" \/><\/p>\n<p>The tiling texture space<\/p>\n<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Desaturation_Image_Editing\"><\/span>Desaturation &amp; Image Editing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Because the lighting conditions under which the original photographs were taken it means that when the next step is done in this process it produces a greater degree of fidelity relative to the actual structure of the object (in this case tree bark) due to the absence of heavy(ier) directional shadows cast due to the presence of strong sunlight; this basically means dark areas actually represent depth instead of &#8216;shadow&#8217; which normal map tools can&#8217;t process in the way we understand them.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: Always keep in mind that normal mapping tools can&#8217;t assess depth the same our eyes\/brains do; we <i><b>know<\/b><\/i> something can protrude a surface and still be in dark shadow, it&#8217;s impossible for the various normal mapping tools to do that same &#8211; <b>black is depth<\/b>, <b>white is height<\/b>.<\/p>\n<\/blockquote>\n<p>Desaturating or removing all the colour tones to produce an image similar to below should be done before passing images through normal map tools so as to avoid colour being mistaken for depth tone; the image need to be tonally correct relative to what is expected so dark colours may need adjusting so that they represent the surface structure correctly &#8211; painting the protrusions of an object with black would result in the tools thinking those surfaces are recessed.<\/p>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage5.jpg\" width=\"428\" height=\"428\" alt=\"Image desaturation to arrive at a usable greyscale image for normal mapping\" title=\"Image desaturation to arrive at a usable greyscale image for normal mapping\" \/><\/p>\n<p>Image desaturation to arrive at a usable grayscale image for normal mapping<\/p>\n<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Normal_Map_Creation\"><\/span>Normal Map Creation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you have the gray scale template image it&#8217;s time to pass it through the normal mapper. Depending on which one you use &#8211; <a href=\"http:\/\/www.crazybump.com\/\" target=\"_blank\" rel=\"noopener\">CrazyBump<\/a>, <a href=\"http:\/\/developer.nvidia.com\/object\/photoshop_dds_plugins.html\" target=\"_blank\" rel=\"nofollow noopener\">nVidia<\/a>, <a href=\"http:\/\/developer.amd.com\/tools-and-sdks\/archive\/legacy-cpu-gpu-tools\/the-compressonator\/\" target=\"_blank\" rel=\"nofollow noopener\">AMD (formerly ATI)<\/a>, <a href=\"http:\/\/code.google.com\/p\/gimp-normalmap\/\" target=\"_blank\" rel=\"nofollow noopener\">GIMP<\/a> (now natively supported) or some other 3rd party tool &#8211; the results of passing the template through will vary, in some cases quite dramatically.<\/p>\n<p>Whichever normal map tool is used, and whatever the results, because of the attention given when taking the original photographs of the source tree bark as well as subsequent image editing, the end result will be a normal map texture that is more correctly interpreting the template and more closely corresponds to what is expect to be seen relative to height and depth; the fidelity is better because of the time taken to &#8216;get it right&#8217; from the beginning.<\/p>\n<blockquote>\n<p><b>Design note<\/b>: If you&#8217;re not happy with the results of passing the template through the tools you can always layer up normal maps in your photo editing software to get better results. Create a few different versions of the template and pass those through the generators, once a few normal maps have been created they can be layered and edited to combine or remove features as required.<\/p>\n<\/blockquote>\n<div class=\"content_images\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/normal_maps_photos\/stage7.jpg\" width=\"428\" height=\"428\" alt=\"Normal map created from a photograph of tree bark after being passed through a normal map generator\" title=\"Normal map created from a photograph of tree bark after being passed through a normal map generator\" \/><\/p>\n<p>The resulting normal map created from a photograph of tree bark after being passed through a normal map generator<\/p>\n<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A good deal of problems that occur when making normal maps from photos stem from the use of low quality original images, usually sourced from the internet. Aside from issues over copyright, images sourced in such a way are, almost without exception, the worst type of material that can be used due to issues related to compression and format &#8211; normal mapping tools will pick up and emphasise compression artefacts that aren&#8217;t always removed during the process of texture making, often resulting in lines and blocks appearing on the final images. To avoid all the inherent problems associated with using poor quality, low resolution images it&#8217;s always best to source the directly by taking the photographs yourself, or by using large (full size) originals where-ever possible.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[508,521,295,339,261,520,506],"class_list":["post-2052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-compressonator","tag-gimp","tag-image-editor","tag-lighting","tag-normal-maps","tag-photographs","tag-texturing"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/comments?post=2052"}],"version-history":[{"count":2,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2052\/revisions"}],"predecessor-version":[{"id":2057,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/posts\/2052\/revisions\/2057"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media\/2053"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/media?parent=2052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/categories?post=2052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/site\/wp-json\/wp\/v2\/tags?post=2052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}