<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pillage and Plunder &#187; web design</title>
	<atom:link href="http://pillageandplunder.net/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://pillageandplunder.net</link>
	<description>Viking's programming blog</description>
	<lastBuildDate>Tue, 25 Aug 2009 00:21:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Dokuwiki Desert Template</title>
		<link>http://pillageandplunder.net/2009/03/dokuwiki-desert-template/</link>
		<comments>http://pillageandplunder.net/2009/03/dokuwiki-desert-template/#comments</comments>
		<pubDate>Tue, 24 Mar 2009 20:35:35 +0000</pubDate>
		<dc:creator>viking</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[dokuwiki]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://pillageandplunder.net/?p=45</guid>
		<description><![CDATA[The default Dokuwiki template was frying my eyes, so I made a new one.  I simply took the default template and substituted some colors.

Download &#187;
For instructions on installation, see Dokuwiki&#8217;s template page.
UPDATE (2009-04-09): Fixed code blocks showing as white.
]]></description>
			<content:encoded><![CDATA[<p>The default <a href="http://dokuwiki.org">Dokuwiki</a> template was frying my eyes, so I made a new one.  I simply took the default template and substituted some colors.</p>
<p><a href="http://pillageandplunder.net/wp-content/uploads/2009/03/desert.png"><img src="http://pillageandplunder.net/wp-content/uploads/2009/03/desert-150x150.png" alt="desert" title="desert" width="150" height="150" class="alignnone size-thumbnail wp-image-51" /></a></p>
<p><a href='http://pillageandplunder.net/wp-content/uploads/2009/03/desert.zip'>Download &raquo;</a></p>
<p>For instructions on installation, see <a href="http://www.dokuwiki.org/template">Dokuwiki&#8217;s template page</a>.</p>
<p><strong>UPDATE (2009-04-09)</strong>: Fixed code blocks showing as white.</p>
]]></content:encoded>
			<wfw:commentRss>http://pillageandplunder.net/2009/03/dokuwiki-desert-template/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>GIMP animated progress bar background image</title>
		<link>http://pillageandplunder.net/2009/03/gimp-animated-progress-bar-background-image/</link>
		<comments>http://pillageandplunder.net/2009/03/gimp-animated-progress-bar-background-image/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 16:21:41 +0000</pubDate>
		<dc:creator>viking</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[gimp]]></category>
		<category><![CDATA[progress bar]]></category>

		<guid isPermaLink="false">http://pillageandplunder.net/?p=26</guid>
		<description><![CDATA[Yesterday I scoured the web for an animated progress bar background.  Not an animated progress bar, a background.  I wanted the ability to control my progress bar length with CSS and Javascript.  I found some stripey backgrounds and what not, but none of them were animated.  Maybe my Google skills failed [...]]]></description>
			<content:encoded><![CDATA[<p>Yesterday I scoured the web for an animated progress bar background.  Not an animated progress bar, a <em>background</em>.  I wanted the ability to control my progress bar length with CSS and Javascript.  I found some stripey backgrounds and what not, but none of them were animated.  Maybe my Google skills failed me, but I couldn&#8217;t find one for the life of me.  So I decided to make my own in GIMP.</p>
<p><img class="alignnone size-medium wp-image-27" title="Progress bar" src="http://pillageandplunder.net/wp-content/uploads/2009/03/progress.gif" alt="Progress bar" width="300" height="25" /></p>
<p>Once I figured out the steps, it was quite simple.</p>
<ol>
<li>Start with a long solid color bar (I used 1000&#215;25, which is probably overkill)</li>
<li>Add a transparent layer and fill it with the <em>Warning</em> pattern (yellow and black stripes)</li>
<li>Remove the yellow stripes via select by color, then change the opacity to something low (like 15%)</li>
<li>Add a third layer for a white gradient in the top half to make it shiny</li>
<li>Change the canvas size to 300&#215;25 and align the layer to the right</li>
<li>Merge the three layers together</li>
<li>Copy the layer, move it 1 pixel to the right</li>
<li>Repeat until you have 20 layers, each 1 pixel further right than the previous one</li>
<li>Run the animation optimization filter, then save as animated GIF using 50ms delay</li>
<li>Drink a beer!</li>
</ol>
<p>Here&#8217;s the <a href="http://pillageandplunder.net/wp-content/uploads/2009/03/long-bar.xcf">GIMP file</a> before merging layers, and <a href="http://pillageandplunder.net/wp-content/uploads/2009/03/progress.xcf">here&#8217;s the one</a> just before optimization.  Please take them (or the image above) and do whatever the hell you want with them.</p>
<p>Here&#8217;s a <a href="http://pillageandplunder.net/wp-content/uploads/2009/03/germany.gif">German flag version</a> for good measure.</p>
]]></content:encoded>
			<wfw:commentRss>http://pillageandplunder.net/2009/03/gimp-animated-progress-bar-background-image/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
