{"id":47129,"date":"2019-11-11T03:01:45","date_gmt":"2019-11-10T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47129"},"modified":"2019-12-15T22:02:10","modified_gmt":"2019-12-15T12:02:10","slug":"gimp-transparency-layer-colour-to-alpha-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-transparency-layer-colour-to-alpha-tutorial\/","title":{"rendered":"Gimp Transparency Layer Colour to Alpha Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mondrian_revisited.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Transparency Layer Colour to Alpha Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gimp_colour_to_alpha.jpg\" title=\"Gimp Transparency Layer Colour to Alpha Tutorial\" \/><\/a><p class=\"wp-caption-text\">Gimp Transparency Layer Colour to Alpha Tutorial<\/p><\/div>\n<p>There are quite a few important image editing concepts floating around today&#8217;s &#8220;Mondrian Fun&#8221; (of the blog posting thread off <a target=_blank title='Gimp Guillotine Follow Up Email Attachment Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-email-attachment-tutorial\/'>Gimp Guillotine Follow Up Email Attachment Tutorial<\/a>) &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-email-attachment-tutorial\/'>\n<p>With this in mind, we almost immediately thought of the great <a target=_blank title='Piet Mondrian' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> and his rectangle paintings in primary colours, wondering if by now you could get image downloads of his work, given he died some time ago now.  And yes, there at this Pixabay <a target=_blank title='Pixabay Mondrian image link, thanks' href='https:\/\/pixabay.com\/en\/mondrian-red-blue-yellow-1504681\/'>webpage<\/a>, thanks, we were able to do that and download an image version of &#8220;Composition with Red Yellow and Blue&#8221; to open with GIMP.<\/p>\n<\/blockquote>\n<p>Some of these ideas are &#8230;<\/p>\n<ul>\n<li>sophisticated image editors such as <a target=_blank title='Gimp' href='http:\/\/gimp.org'>Gimp<\/a> &#8230;<\/li>\n<li>capable of editing layers (as we noted with <a title='Gimp Layers Primer Tutorial' href='#glpt'>Gimp Layers Primer Tutorial<\/a>), especially regarding png images &#8230; and concerning &#8230;<\/li>\n<li>transparent alpha channel layer<\/li>\n<li>mask colours (or make particular one&#8217;s pixels become transparent)<\/li>\n<\/ul>\n<p> &#8230; and before we discuss limitations here, let&#8217;s just leave a minute to appreciate these great image editors like Gimp for these capabilities &#8230; amazing &#8230; however, we must mention the premise today, and the imperfections regarding Gimp image editing work here.   In broad brush terms (and thanks to <a target=_blank title='Useful link' href='\/\/alvinalexander.com\/design\/how-to-make-color-transparent-in-gimp-without-bleeding'>Gimp usage ideas<\/a> here) what we wanted to show regarding this &#8220;Colo<i>u<\/i>r to Alpha&#8221; ideas we &#8230;<\/p>\n<ul>\n<li>started with the Mondrian inspired original image (because of its straightforward &#8220;primary colours feel&#8221;) as per &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mondrian.jpg' title='Thanks to https:\/\/pixabay.com\/en\/mondrian-red-blue-yellow-1504681\/'><\/img>\n<\/li>\n<li>copied it off to 6 other png image files (three for just Red, Yellow, Blue and three for excluding Red, Yellow, Blue) &#8230; and for each &#8230;\n<ol>\n<li>opened in Gimp (chose to &#8220;Convert&#8221; if offered) &#8230;<\/li>\n<li>Layer -&gt; Transparency -&gt; Add Alpha Channel &#8230;<\/li>\n<li>Colors -&gt; Color to Alpha&#8230; (however many cycles of colour masking required, below)<\/li>\n<li>as required, change the default White ((#ffffff) colour button) and open chance to enter RGB (which we used  defining Red (#ff0000) and Yellow (#ffff00) and Blue (#0000ff)) and click OK[s] to change those colour pixels found to transparent ones &#8230; until satisfied, when &#8230;<\/li>\n<li>File -&gt; Export As&#8230; (png)<\/li>\n<li>Export button click<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; setting up image (media) we could use to show the original Mondrian online image and how close we could get with the 2 other sets of 3 images, piecing the colours back together again (with less tears than for Humpty Dumpty<font size=1> &#8230; and no eggs were harmed in the making of this blog post<\/font>).  See <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mondrian_revisited.html_GETME\" title=\"mondrian_revisited.html\">mondrian_revisited.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mondrian_revisited.html\" title=\"Click picture\">in animated (&#8220;Just&#8221; then &#8220;Original&#8221; then &#8220;Excluding&#8221;) action<\/a> below (and by the way, if nothing is animated below, to get a &#8220;rerun&#8221; of the animation, <a id=aanim onclick=\"var durlis=document.URL.split('#')[0].split('&#038;znumb=')[0]; if (durlis.indexOf('?') != -1) {  location.href=durlis + '&#038;znumb=' + Math.floor(Math.random() * 198756342) + '#aanim'; } else \n { location.href=durlis + '?xnumb=' + Math.floor(Math.random() * 198756342) + '#aanim'; }\" style=\"cursor:pointer;text-decoration:underline;\">click here<\/a>) &#8230;<\/p>\n<p><iframe style='width:100%;height:1000px;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mondrian_revisited.html?scale=0.3' title='Mondrian colour masking via Gimp Color to Alpha'><\/iframe> <\/p>\n<p> &#8230; where you can see a bit of imperfection, perhaps attributable to &#8230;<\/p>\n<ul>\n<li>colour bleeding with original painting through to being an image representation online<\/li>\n<li>image representation online (and original painting) colours are not all those mathematically pure Red, Yellow, Blue (as RGB defined above)<\/li>\n<li>colour bleeding within the Gimp work<\/li>\n<\/ul>\n<p>Nevertheless, it shows how image colour &#8220;masking&#8221; is very much a tool available to you as a media &#8220;overlay&#8221; thought to match the CSS &#8220;overlay&#8221; thoughts we often adopt here with web applications &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property &#8230; teamed with &#8230;<\/li>\n<li>top and left (px defined) properties<\/li>\n<\/ul>\n<p>Interesting, huh?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-transparency-layer-colour-to-alpha-tutorial\/'>Gimp Transparency Layer Colour to Alpha Tutorial<\/a>.<\/p-->\n<hr>\n<p id='glpt'>Previous relevant <a target=_blank title='Gimp Layers Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-layers-primer-tutorial\/'>Gimp Layers Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Layers\/GimpLayers.m4v\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Layers Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Layers\/GimpLayers.jpg\" title=\"Gimp Layers Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Gimp Layers Primer Tutorial<\/p><\/div>\n<p>Here is a tutorial that gives you an insight into the massive possibilities of using a sophisticated image editor and use layers with various amounts of transparency, especially suited to use with png image files.<\/p>\n<p>Transparency (or its obverse, opacity) can be used to have the one image achieve several &#8220;ends&#8221; (ie. purposes).  Although it is a bit of a clumsy example in the tutorial, you can see that the technique can be used for artistic purposes &#8230; often called &#8220;Photoshopping&#8221; (named after the more famous, and also brilliant, rival product, Photoshop).<\/p>\n<p>Lots of those classic &#8220;Photoshopping&#8221; techniques can be achieved in Gimp, and some other <a target=_blank title='Gimp tutorials here' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=4'>tutorials<\/a> at this blog touch on that.<\/p>\n<p>Am sure you can imagine what the concept of a layer is with regard to image manipulation.   Within Gimp, for beginners not used to this concept, you find yourself underestimating and underplaying what can be achieved with the various layers of a multi-layered image.   In simplistic terms each layer has the functionality in Gimp to be treated as a whole new image, and this is the best way to think of it when trying to achieve what you want to achieve with Gimp.<\/p>\n<p>Link to Gimp &#8220;spiritual home&#8221; &#8230; <a target=_blank href='http:\/\/www.gimp.org' title='Gimp'>here<\/a>.<br \/>\nLink to Gimp forum &#8230; <a target=_blank href='http:\/\/gimpforums.com\/' title='Google Geo Charts'>here<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d5366' onclick='var dv=document.getElementById(\"d5366\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5366' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47129' onclick='var dv=document.getElementById(\"d47129\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47129' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are quite a few important image editing concepts floating around today&#8217;s &#8220;Mondrian Fun&#8221; (of the blog posting thread off Gimp Guillotine Follow Up Email Attachment Tutorial) &#8230; With this in mind, we almost immediately thought of the great Piet &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-transparency-layer-colour-to-alpha-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,16,37],"tags":[3139,3140,84,3138,224,281,491,576,590,3137,686,751,894,1918,1988,997,1302,2996,1319],"class_list":["post-47129","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-gimp","category-tutorials","tag-alpha","tag-alpha-channel","tag-animation-2","tag-bleed","tag-colour","tag-css","tag-gimp","tag-html","tag-image","tag-image-editor","tag-layer","tag-mask","tag-overlay","tag-pixel","tag-position","tag-programming","tag-transparency","tag-transparent","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47129"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=47129"}],"version-history":[{"count":13,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47129\/revisions"}],"predecessor-version":[{"id":47430,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47129\/revisions\/47430"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}