{"id":30238,"date":"2017-05-16T03:01:44","date_gmt":"2017-05-15T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30238"},"modified":"2017-05-16T07:16:36","modified_gmt":"2017-05-15T21:16:36","slug":"nostalgia-game-gimp-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/nostalgia-game-gimp-tutorial\/","title":{"rendered":"Nostalgia Game Gimp Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Nostalgia Game Gimp Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia_gimp.jpg\" title=\"Nostalgia Game Gimp Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Nostalgia Game Gimp Tutorial<\/p><\/div>\n<p>Aesthetically, a web application has many and varied &#8220;inputs&#8221;, some of the main being for us &#8230;<\/p>\n<ul>\n<li>the media resources you add to it<\/li>\n<li>the stylesheet CSS &#8220;smarts&#8221; you add to it<\/li>\n<li>at a user experience (or UX) level, how user friendly the web application is, as a combination of HTML and Javascript client code<\/li>\n<li>the data available to the web application, managed by HTML and Javascript and perhaps server side code like PHP<\/li>\n<\/ul>\n<p> &#8230; because &#8220;aesthetics&#8221; is the look of something, but &#8220;look&#8221; is a lot like &#8220;feel&#8221; and, at least for us, we think &#8220;look&#8221; and &#8220;feel&#8221; (and &#8220;hear&#8221; for that matter) when we think software application &#8220;aesthetics&#8221;.<\/p>\n<p>Our emphasis at this &#8220;blog&#8221; on the theme of web applications tilts strongly towards the &#8220;how&#8221; of the workings of software code and so we tend to most neglect those first two &#8220;inputs&#8221; above.  Occasionally, though, it is good to get out of the comfort zone, and if the project is apt for it, we like to, regarding those first two &#8220;inputs&#8221; above &#8230;<\/p>\n<ul>\n<li>the media resources you add to it\n<ol>\n<li>capture the media<\/li>\n<li>use email to send the media to a place where applications can be used to modify the media, as required<\/li>\n<li>modify the media, as required, via applications<\/li>\n<li>send the media to the public website for &#8220;publication&#8221;<\/li>\n<\/ol>\n<\/li>\n<li>the stylesheet CSS &#8220;smarts&#8221; you add to it\n<ol>\n<li>style the webpage to place that media above<\/li>\n<li>attend to the effects of having that media, on other styling aspects of the webpage, and other Javascript logic aspects to the webpage, and design aspects to the webpage<\/li>\n<\/ol>\n<\/li>\n<p><!--li>at a user experience (or <a target=_blank title='User Experience information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/User_experience'>UX<\/a>) level, how user friendly the web application is, as a combination of HTML and Javascript client code<\/li>\n\n\n\n\n<li>the data available to the web application, managed by HTML and Javascript and perhaps server side code like PHP<\/li-->\n<\/ul>\n<p>Before we go on and show you our &#8220;aesthetic&#8221; changes, in a step by step replay of what we did to our web application, we started with <a title='Nostalgia Game Primer Tutorial' href='#ngpt'>Nostalgia Game Primer Tutorial<\/a> we need to talk a bit about how these first two &#8220;inputs&#8221; could fit into the work of a middle sized web agency &#8230;<\/p>\n<ul>\n<li>a <i>graphic designer<\/i> could create the &#8220;media resources&#8221; the web agency needs, and may never need to get involved with CSS, but they might, also<\/li>\n<li>a <i>frontend web developer<\/i> could take that media from the <i>graphic designer<\/i> and &#8220;aesthetically&#8221; make that media work and\/or follow a design system (to make it work), like <a target=_blank title='Website wireframe information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Website_wireframe'>wireframes<\/a> (a webpage schematic or screen blueprint)<\/li>\n<\/ul>\n<p> &#8230; a workflow that could keep worker skills separated, as required.  We say this, because the skills of a <i>graphic designer<\/i> would be great to have as a <i>frontend web developer<\/i> but in a busy middle sized web agency office, sounds like too distracting a scenario for any one employee, in our opinion.  Our opinion comes from a small sized web agency where I am no <i>graphic designer<\/i> (in the true sense of the job) but know what it takes to create image media, at least on this MacBook Pro, from a variety of desktop applications &#8230;<\/p>\n<ul>\n<li>Paintbrush &#8230; yes, Mac OS X version of Paintbrush &#8230; really good for File -&gt; New from Clipboard and moving Pasted clipboard data quickly, Resizing, Horizontal Flip, Vertical Flop, rudimentary Cropping, panning &#8220;bigger than&#8221; image data into a small rectangular position (which is size set aside for the image), Cut, Copy, Rectangular Selects, rudimentary Annotations via lines and circles, Jpeg density<\/li>\n<li>Grab (read about this &#8220;dynamic duo&#8221; (for us) at <a target=_blank title='Paintbrush and Grab Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/paintbrush-and-grab-primer-tutorial\/'>Paintbrush and Grab Primer Tutorial<\/a>) or Mac OS X command \u2013 control \u2013 shift 3 or 4 clipboard screen capture or command \u2013 shift 3 or 4 for desktop save of screen capture<\/li>\n<li>Preview &#8230; good for Copy, Paste, 90 degree rotations, Export as PDF<\/li>\n<li><a target=_blank title='Gimp image editor' href='http:\/\/gimp.org'>Gimp<\/a> &#8230; good for Layers, Opacity, Move tool, Rotation tool, Scale tool, Resizing, lots of Filters, Rectangular and Freeform Selections, lots of Export options<\/li>\n<\/ul>\n<p> &#8230; which brings us to the creation of the image media file &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.png' title='Nostalgia background image'><\/img><\/p>\n<ol>\n<li>took photos of Nostalgia realia (old football photo and some photograph albums) in a series of 6 photos (3 used) with an iPhone&#8217;s Camera (in Photo mode)<\/li>\n<li>used the iPhone&#8217;s Photos app to Select the six images and Share this to the Mail icon, sending in Small density mode, as the resolution for our job is not supercritical, and you will be able to fit 6 images as attachments in the one email if sent in Small density mode<\/li>\n<li>from now on, on MacBook Pro, open the Gmail web application and download all 6 image attachments to the Downloads folder<\/li>\n<li>in Finder, open the image of the football team, and via two finger gesture Open With&#8230; Preview<\/li>\n<li>open Paintbrush and File -&gt; Open a previous tutorial image that we Edit -&gt; Select All then Edit -&gt; Cut and File -&gt; Save As&#8230; nostalgia.png<\/li>\n<li>in Preview, rotate image to the left 90 degrees to make it straight, and Edit -&gt; Copy it to clipboard<\/li>\n<li>back at Paintbrush use File -&gt; New from Clipboard to create new image that we resize 300% width and 300% height and Edit -&gt; Select All and Edit -&gt; Copy<\/li>\n<li>in Paintbrush we File -&gt; Open &#8220;nostalgia.png&#8221; and Edit -&gt; Paste and File -&gt; Save &#8230; nostalgia.png<\/li>\n<li>open Gimp and File -&gt; Open nostalgia.png<\/li>\n<li>in Gimp at Layer window for the one Layer (so far) called &#8220;nostalgia.png&#8221; change Opacity from 100.0 to 53.0<\/li>\n<li>in Finder, open the second image of photo album of black and white photos, and via two finger gesture Open With&#8230; Preview<\/li>\n<li>in Preview, rotate image to the left 90 degrees to make it straight, and Edit -&gt; Copy it to clipboard<\/li>\n<li>back at Paintbrush use File -&gt; New from Clipboard to create new image that we resize 200% width and 200% height and Edit -&gt; Select All and Edit -&gt; Copy<\/li>\n<li>in Gimp use Edit-&gt; Paste As&#8230; New Layer and the clipboard fully opaque clipboard image falls into its own layer called &#8220;Clipboard&#8221;<\/li>\n<li>in Gimp use Move tool to move the fully opaque clipboard &#8220;Clipboard&#8221; image over to the right more<\/li>\n<li>in Gimp at Layer window in the Layer called &#8220;Clipboard&#8221; change Opacity from 100.0 to 47.0<\/li>\n<li>in Gimp use Rotate tool to rotate the Layer &#8220;Clipboard&#8221; appropriately<\/li>\n<li>in Finder, open the second image of photo album of colour photos, and via two finger gesture Open With&#8230; Preview<\/li>\n<li>in Preview, rotate image to the left 90 degrees to make it straight, and Edit -&gt; Copy it to clipboard<\/li>\n<li>back at Paintbrush use File -&gt; New from Clipboard to create new image that we resize 250% width and 250% height and Edit -&gt; Select All and Edit -&gt; Copy<\/li>\n<li>in Gimp use Edit-&gt; Paste As&#8230; New Layer and the clipboard fully opaque clipboard image falls into its own layer called &#8220;Clipboard #1&#8221;<\/li>\n<li>in Gimp use Move tool to move the fully opaque clipboard &#8220;Clipboard #1&#8221; image over to the right more<\/li>\n<li>in Gimp at Layer window in the Layer called &#8220;Clipboard #1&#8221; change Opacity from 100.0 to 55.0<\/li>\n<li>in Gimp use Rotate tool to rotate the Layer &#8220;Clipboard #1&#8221; appropriately<\/li>\n<li>in Gimp use File -&gt; Export As &#8220;nostalgia.png&#8221; to override its contents, and end up with image above and we &#8230;<\/li>\n<li>send &#8220;nostalgia.png&#8221; to RJM Programming website via FileZilla (s)ftp protocol file transfer to same folder as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.htm\" title=\"Click picture\">nostalgia.htm<\/a><\/li>\n<\/ol>\n<p> &#8230; and the use we make of the image media file &#8220;nostalgia.png&#8221; within the HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.html-GETME\" title=\"nostalgia.htm\">nostalgia.htm<\/a> via the <b>bold<\/b> CSS styling with the HTML as per &#8230;<\/p>\n<ol>\n<li>set &#8220;nostalgia.png&#8221; as the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.html-GETME\" title=\"nostalgia.htm\">nostalgia.htm<\/a> background image behind a background colour <i>transparent<\/i> default <i>document.body<\/i> styling scenario &#8230;<br \/>\n<code><br \/>\n&lt;body style=\"background-color:<b>transparent;background: url('nostalgia.png')<\/b>;\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>give &#8220;nostalgia.png&#8221; a change to <b>show a bit under<\/b> the YouTube video player HTML iframe element but not stop the YouTube video being <b>seen comfortably<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe id='myiframe' src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?emoji=on&nokaraoke=y&youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Putt%20Putt%20Golf%2c%20Ermington' style=\"display:block;width:100%;height:900px;<b>opacity:0.8;<\/b>\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; the changes of which can be seen with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.html-GETME\" title=\"nostalgia.htm\">this report<\/a> (for this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.htm\" title=\"Click picture\">live run<\/a>).<\/p>\n<hr>\n<p id='ngpt'>Previous relevant <a target=_blank title='Nostalgia Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/nostalgia-game-primer-tutorial\/'>Nostalgia Game 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\/HTMLCSS\/nostalgia.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Nostalgia Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.jpg\" title=\"Nostalgia Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Nostalgia Game Primer Tutorial<\/p><\/div>\n<p>Was sad to hear of the closing of Ermington Putt Putt Golf the other day.  Maybe Putt Putt Golf is on the cheesy side, but it is sad to see innocent entertainments like this go in the community, especially regarding great places for children&#8217;s birthday parties, as was the case for us the time we got 10 over par (if we fudge the scorecard just a little bit).  So <a target=_blank title='Last day' href='http:\/\/www.dailytelegraph.com.au\/newslocal\/northern-district-times\/after-47-years-the-iconic-putt-putt-at-ermington-will-officially-close-its-doors-on-april-30\/news-story\/262b52b661a5a67bed50960e2601c96f'>30th April<\/a> is its last day, sadly.  Remember, as kids, my brother and I climbing the &#8220;mountain&#8221; (=200 mole hills) at Mermaid Beach Putt Putt, rather than paying for the chairlift, to get up to the Putt Putt Golf there.<\/p>\n<p>Then yesterday&#8217;s <a target=_blank title='Those were the days!' href='http:\/\/nostalgiacentral.com\/television\/tv-by-decade\/tv-shows-1970s\/variety-italian-style\/'>Variety Italian Style<\/a> got me to thinking &#8220;Nostalgia&#8221; big time &#8230; Mario Milano, Bugs Bunny, school holidays <strike>etcetera etcetera<\/strike><a target=_blank title='Yada Yada' href='https:\/\/www.youtube.com\/watch?v=O6kRqnfsBEc'>yada yada<\/a>, so decided to write a web application channelling &#8230;<\/p>\n<ul>\n<li><a target=_blank title='YouTube videos' href='https:\/\/www.youtube.com'>YouTube<\/a> video via its <a target=_blank title='Useful API' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>Embedded Iframe API<\/a> &#8230; and\/or &#8230;<\/li>\n<li><a target=_blank title='Google search engine search' href='https:\/\/www.google.com'>Google<\/a> search<\/li>\n<\/ul>\n<p> &#8230; to offer users of our HTML and Javascript web application <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.html'>live run<\/a>&#8216;s underlying <a target=_blank title='nostalgia.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nostalgia.html_GETME'>nostalgia.html<\/a> source code, for your perusal.<\/p>\n<p>Naturally, you&#8217;re likely to go &#8230; whaaaaatttt &#8230; at a lot of the nostalgia reminiscence suggestions that sprung to my mind &#8230; a lot by free association &#8230; but there is an option there for you to enter in your own &#8220;Nostalgia Search Topic&#8221; should you want it to be looked up on the huge world wide web resources that YouTube and Google are &#8230; thanks.<\/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='#d29917' onclick='var dv=document.getElementById(\"d29917\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29917' 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='#d30238' onclick='var dv=document.getElementById(\"d30238\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30238' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aesthetically, a web application has many and varied &#8220;inputs&#8221;, some of the main being for us &#8230; the media resources you add to it the stylesheet CSS &#8220;smarts&#8221; you add to it at a user experience (or UX) level, how &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/nostalgia-game-gimp-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":[12,15,16,30,37],"tags":[127,183,281,476,477,491,513,576,587,590,2206,652,725,760,2187,876,894,896,929,931,2207,983,997,1111,1319,1350,1356,1369,1493,2017],"class_list":["post-30238","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-gimp","category-photography","category-tutorials","tag-background-image","tag-camera","tag-css","tag-game","tag-games-2","tag-gimp","tag-google","tag-html","tag-iframe","tag-image","tag-iphoen","tag-javascript","tag-mac-os-x","tag-media","tag-nostalgia","tag-opacity","tag-overlay","tag-paintbrush","tag-photograph","tag-photography","tag-photos-app","tag-preview","tag-programming","tag-search-engine","tag-tutorial","tag-user-experience","tag-ux","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30238"}],"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=30238"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30238\/revisions"}],"predecessor-version":[{"id":30277,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/30238\/revisions\/30277"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=30238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=30238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=30238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}