Commits

Anonymous committed bf5281c

Added the HHFG background image.

  • Participants
  • Parent commits 63e6455

Comments (0)

Files changed (5)

                     'url' => "art/made-with-latemp/",
                     'title' => ""Made with Latemp" Button",
                 },
+                {
+                    'text' => "HHFG Background",
+                    'url' => "art/hhfg-background/",
+                    'title' => "Background Image for the "Human Hacking Field Guide" Story",
+                },
                 
             ],
         },

t2/art/hhfg-background/corner.png

Added
New image

t2/art/hhfg-background/final-image.png

Added
New image

t2/art/hhfg-background/gradient.png

Added
New image

t2/art/hhfg-background/index.html.wml

+#include '../template.wml'
+
+<latemp_subject "Shlomi Fish' Art - HHFG Background" />
+
+<p>
+<b>Written at</b>: 02-Jun-2006
+</p>
+
+<img src="corner.png" 
+alt="Corner of the HHFG Background Image"
+style="margin-bottom : 1.5em" />
+
+<p>
+After I finished writing my <a href="../../humour/human-hacking/">"The Human 
+Hacking Field Guide" Story</a> I was looking for a page layout to make it more
+interesting. A search on <a href="http://www.oswd.org/">Open Source Web
+Design</a> yielded the 
+<a href="http://www.oswd.org/viewdesign.phtml?id=1959&referer=%2Fsearch.php%3Fsearchstring%3Dtwin%2Btriangles%26tab%3Ddescription">Twin
+Triangles</a> theme which I liked. However, it included other elements to 
+the page that I did not need, and I wanted to have a simple rounded 
+rectangular frame, without all the other decorations above and below.
+</p>
+
+<p>
+After trying to create the missing elements on my own using 
+<a href="http://www.gimp.org/">The GIMP</a>, I decided to create my own 
+equivalent from scratch.
+</p>
+
+<p>
+What I did was the following:
+</p>
+
+<ol>
+<li>
+Create a 800*600 image in the GIMP.
+</li>
+<li>
+<p>Create a suitable gradient using the GIMP's gradient editor</p>
+<img src="gradient.png" 
+alt="The Gradient as edited by the GIMP Gradient Editor"
+style="margin-bottom: 1em;" />
+<p>
+The gradient was created based on colours picked from the original image using
+the GIMP colour picker.
+</p>
+</li>
+<li>
+Select a large rectangular frame in the middle.
+</li>
+<li>
+Invoke the GIMP round corners script. 
+("&lt;Image&gt; &rarr; Select &rarr; Round")
+</li>
+<li>
+Apply Gaussian Blur with a large radius (identical in X and in Y) to the 
+Image. This gives a nice rounded-rectangle black-to-white gradient.
+</li>
+<li>
+Invoke the GIMP Gradient Map 
+("&lt;Image&gt; &rarr; Filters &rarr; Colors &rarr; Map &rarr; Gradient Map").
+This gives <a href="final-image.png">the final image</a>.
+</li>
+<li>
+Afterwards, all that is left to do is to slice and dice the image 
+appropriately. A horizontal strip from the middle which was a few pixels high
+was ideal as a background for most of the page. Then, I took the upper and 
+lower parts (until the width stabilizes), and created separate images out of
+them.
+</li>
+</ol>
+
+<p>
+The final result is not identical to the original, but it looks very crisp
+and I'm quite happy with it. I thought that a blur may make it better, but
+it only seemed to have made it worse, so I discarded the idea.
+</p>
+