<?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>Free Icons &#187; Tutorials</title>
	<atom:link href="http://www.webdesign-guru.co.uk/icon/category/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webdesign-guru.co.uk/icon</link>
	<description>web design &#38; development stuff</description>
	<lastBuildDate>Mon, 26 Jul 2010 09:43:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Stapler Icon &#8211; The making of</title>
		<link>http://www.webdesign-guru.co.uk/icon/stapler-icon-the-making-of/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/stapler-icon-the-making-of/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 22:40:32 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=956</guid>
		<description><![CDATA[
The Stapler Icon above was created using a photo of a stapler.

I then cut out the shape in Photoshop.
I then used th smart blur filter on it a few times in order to smooth the look.
Then using new layers,&#160;I created gradients from 50% transparent white to 100% transparent white to highlight the edges.

]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/128.png"><img class="alignnone size-full wp-image-957" title="128" border="0" width="128" height="128" alt="" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/128.png" /></a></p>
<p>The <a href="http://freeicons.eu/u/icon/clipart/stapler-free-icon">Stapler Icon</a> above was created using a photo of a stapler.</p>
<ol>
<li>I then cut out the shape in Photoshop.</li>
<li>I then used th smart blur filter on it a few times in order to smooth the look.</li>
<li>Then using new layers,&nbsp;I created gradients from 50% transparent white to 100% transparent white to highlight the edges.</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/stapler-icon-the-making-of/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sell your Pictures on The Web!</title>
		<link>http://www.webdesign-guru.co.uk/icon/sell-your-pictures-on-the-web/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/sell-your-pictures-on-the-web/#comments</comments>
		<pubDate>Fri, 19 Mar 2010 09:35:41 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Other]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=943</guid>
		<description><![CDATA[&#160;With a lot of work, and a lot of time, I have made thousands of dollars selling little icons and clip art on the web.
I know that was an awful sales pitch but the truth is that making money on the web takes just as much effort as making money in the real world. If [...]]]></description>
			<content:encoded><![CDATA[<p>&nbsp;With a lot of work, and a lot of time, I have made thousands of dollars selling little icons and clip art on the web.</p>
<div style="margin: 0cm 0cm 10pt">I know that was an awful sales pitch but the truth is that making money on the web takes just as much effort as making money in the real world. If anyone tells you otherwise, they are after your money.</div>
<div style="margin: 0cm 0cm 10pt">Having said that, here is how I did it:</div>
<div style="margin: 0cm 0cm 10pt">Gather together, or create anew lots of images you think others need. I am talking about images that belong to you, not just anybody&rsquo;s.</div>
<div style="margin: 0cm 0cm 10pt">It is important that these images are photos, icons, illustration, vector files, that people are going to want to use for something. Artistic works are great for a wall, but perhaps not so good for a Power Point presentation. They need to be symbolic in some way. They need to highlight a fact. They need to be useful.</div>
<div style="margin: 0cm 0cm 10pt">A simple example is arrows. Images of arrows and graphs. All very useful.</div>
<div style="margin: 0cm 0cm 10pt">Once you have your collection, head over to <a href="http://www.shutterstock.com/?rid=72982">http://www.shutterstock.com/?rid=72982</a>.</div>
<div style="margin: 0cm 0cm 10pt">This is an affiliate link. It means that I get a little commission from Shutterstock if you use them. I have such affiliate links to many of these kinds of site, but I link to <a href="http://www.shutterstock.com/?rid=72982">http://www.shutterstock.com/?rid=72982</a> because I have found them to be the easiest to get started with, and they sell&nbsp;a lot! You lose nothing.</div>
<div style="margin: 0cm 0cm 10pt">If you put 10 good and useful images on there, they will start making money very quickly, and do so forever more. It is not a lot, but it just keeps rolling in. I started a few years ago and a simple icon that took no longer than 10 minutes to make has earned hundreds of dollars. This is an extreme example, but if you have images lying around put them on and get them to work!</div>
<div style="margin: 0cm 0cm 10pt">If you put 100 images on there. You will have a nice little extra income each month. I have around 250 images on it, and every month, I can buy something nice for myself.</div>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/sell-your-pictures-on-the-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make your own web 2.0 icons for FREE!</title>
		<link>http://www.webdesign-guru.co.uk/icon/make-your-own-web-2-0-icons-for-free/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/make-your-own-web-2-0-icons-for-free/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 22:07:52 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=896</guid>
		<description><![CDATA[
This is not a tutorial, but a quick guide and tip on making easy web 2.0 icons and buttons using Photoshop for free. If you don&#8217;t have Photoshop, I would recommend downloading GIMP which is nearly as god and free.
There is no clear cut style or design for web 2.0 but the term kind means [...]]]></description>
			<content:encoded><![CDATA[<div style="margin: 0cm 0cm 10pt"><img class="alignnone size-full wp-image-897" title="make-web-buttons" alt="" width="555" height="200" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/make-web-buttons.jpg" /></div>
<div style="margin: 0cm 0cm 10pt">This is not a tutorial, but a quick guide and tip on making easy web 2.0 icons and buttons using Photoshop for free. If you don&rsquo;t have Photoshop, I would recommend downloading GIMP which is nearly as god and free.</div>
<div style="margin: 0cm 0cm 10pt">There is no clear cut style or design for web 2.0 but the term kind means something that look fresh, clean and new.</div>
<div style="margin: 0cm 0cm 10pt">It can be glassy, textured, even flat, but most of all clean.</div>
<div style="margin: 0cm 0cm 10pt">To get an icon clean it needs space and proportions.</div>
<div style="margin: 0cm 0cm 10pt">The icons I am talking about here are based around an image representation on top of a coloured field that can be of any shape but most often rectangular or circular.</div>
<div style="margin: 0cm 0cm 10pt">So what you are going to need are the basic image shapes and a background to place it on.<span id="more-896"></span></div>
<div style="margin: 0cm 0cm 10pt">Here I have uploaded <a href="http://freeicons.eu/u/buttons/blank-buttons">blank buttons</a>. Use these to get started although you should note the terms of use on the site. They are free but need a link back if you use the graphics.</div>
<div style="margin: 0cm 0cm 10pt">If you do not have any shapes, you can get symbolic shapes from Photoshop&rsquo;s customer shape tool. See what is on offer there or google free custom shapes to download new ones.</div>
<div style="margin: 0cm 0cm 10pt">Download one of the blank buttons and open it up. Make sure you download the largest version and work with that.</div>
<div style="margin: 0cm 0cm 10pt">Then place the custom shape over it. Already you will have an icon or button! Before you finish though, try blending the shape with the button using the Layer Style &#8211; Blending Mode. You will see that the shape can work in many ways with the colours of the blank button. When you are happing, just save it as a png, gif or jpg file.</div>
<div style="margin: 0cm 0cm 10pt">It is very easy. With the basic blank buttons, all you need to do is work out what shape to put in it and how to blend them.</div>
<div style="margin: 0cm 0cm 10pt">Another tip is to use Photoshop&rsquo;s&nbsp;Image &gt;&gt; Adjustments &gt;&gt; Hue/Saturation feature to mess about with the colour of the button.</div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/make-your-own-web-2-0-icons-for-free/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Plastic wrap enlarged bitmaps</title>
		<link>http://www.webdesign-guru.co.uk/icon/plastic-wrap-enlarged-bitmaps/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/plastic-wrap-enlarged-bitmaps/#comments</comments>
		<pubDate>Tue, 19 May 2009 23:37:17 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Free Graphics]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Wallpaper]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=525</guid>
		<description><![CDATA[
Enlarging bitmaps is not a good idea, but there are ways to quickly fix them and one of those ways is to use the Photoshop filter, Plastic Wrap. It evens out those jagged edjes very well, and can create a nice effect. Here are some examples of bitmaps enlarged by up to 10 times then [...]]]></description>
			<content:encoded><![CDATA[<p><img height="200" width="500" class="alignnone size-full wp-image-526" title="plasticwrap" alt="plasticwrap" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plasticwrap.jpg" /></p>
<p>Enlarging bitmaps is not a good idea, but there are ways to quickly fix them and one of those ways is to use the Photoshop filter, Plastic Wrap. It evens out those jagged edjes very well, and can create a nice effect. Here are some examples of bitmaps enlarged by up to 10 times then given a plastic wrap.<span id="more-525"></span></p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-1.jpg"><img height="224" width="300" class="alignnone size-medium wp-image-527" title="texture-1" alt="texture-1" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-1-300x224.jpg" /></a> Plastic copper texture</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-2.jpg"><img height="225" width="300" class="alignnone size-medium wp-image-528" title="texture-2" alt="texture-2" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-2-300x225.jpg" /></a> Plastic goo</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-3.jpg"><img height="225" width="300" class="alignnone size-medium wp-image-529" title="texture-3" alt="texture-3" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-3-300x225.jpg" /></a> </p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-4.jpg"><img height="225" width="300" class="alignnone size-medium wp-image-530" title="texture-4" alt="texture-4" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/texture-4-300x225.jpg" /></a>Shrink wrapped artwork</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/plastic-wrap-enlarged-bitmaps/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Vector shapes in Photoshop</title>
		<link>http://www.webdesign-guru.co.uk/icon/vector-shapes-in-photoshop/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/vector-shapes-in-photoshop/#comments</comments>
		<pubDate>Wed, 13 May 2009 11:16:31 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Free Graphics]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Add new tag]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[shapes]]></category>
		<category><![CDATA[vector]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=512</guid>
		<description><![CDATA[
A quick few samples showing how shapes created in a vector package can be used creatively in Photoshop. This is not a proper tutorial, but samples just for inspiration.
Basic design created in Flash but any old vector package will do. (tip: Flash is good at this kind of thing)

Filled it in with some basic shades.

Made [...]]]></description>
			<content:encoded><![CDATA[<img height="200" width="500" class="size-full wp-image-513" title="messing-with-shapes" alt="vectore shapes in photoshop" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/messing-with-shapes.jpg" />
<p>A quick few samples showing how shapes created in a vector package can be used creatively in Photoshop. This is not a proper tutorial, but samples just for inspiration.<span id="more-512"></span><img height="500" width="500" class="alignnone size-full wp-image-514" title="c-a" alt="c-a" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/c-a.jpg" /></p>
<p>Basic design created in Flash but any old vector package will do. (tip: Flash is good at this kind of thing)</p>
<p><img height="500" width="500" class="alignnone size-full wp-image-515" title="c-b" alt="c-b" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/c-b.jpg" /></p>
<p>Filled it in with some basic shades.</p>
<p><img height="500" border="0" width="500" class="alignnone size-full wp-image-516" title="c-c" alt="c-c" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/c-c.jpg" /></p>
<p>Made the lines white for a white background.</p>
<p><img height="500" width="500" class="alignnone size-full wp-image-517" title="cubo" alt="cubo" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/cubo.jpg" /></p>
<p>Now in Photoshop, I have cut the various shapes out, and layered them, giving some drop shadows, inner shadows and texture for interest.</p>
<p><img height="504" width="500" class="alignnone size-full wp-image-518" title="cubo-1" alt="cubo-1" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/cubo-1.jpg" /></p>
<p>Tried a warp. This just makes anything look trendy.</p>
<p><img height="500" width="500" class="alignnone size-full wp-image-519" title="cubo-texture" alt="cubo-texture" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/cubo-texture.jpg" /></p>
<p>Some texture. Not sure about this but it can be used with further messin&#8217; about.</p>
<p><img height="500" width="500" class="alignnone size-full wp-image-520" title="cubo-2" alt="cubo-2" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/cubo-2.jpg" /></p>
<p>Added a background gradient.</p>
<p><img height="500" width="500" class="alignnone size-full wp-image-521" title="cubo-3" alt="cubo-3" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/cubo-3.jpg" /></p>
<p>More colour! I can now see that some of the cut-out edges need refining, but you get the idea.</p>
<p>Try it yourself. Mess about with some basic shapes and see what you can come up with. They can then become elements in later designs.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/vector-shapes-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash Plastic Text Effect Tutorial</title>
		<link>http://www.webdesign-guru.co.uk/icon/flash-plastic-text-effect-tutorial/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/flash-plastic-text-effect-tutorial/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 15:01:51 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=442</guid>
		<description><![CDATA[
In this tutorial we are going to look at how to cerate a plastic, glossy, glassy look for your text in Flash. I am using Flash CS3 and also using some of the Flash filter effects.
1.
Write what ever text you want to make plastic. In this tutorial we are using the word, plastic.

2.
Break up the [...]]]></description>
			<content:encoded><![CDATA[<p><img width="500" height="108" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-text.jpg" alt="plastic-text" title="plastic-text" class="alignnone size-full wp-image-438" /></p>
<p>In this tutorial we are going to look at how to cerate a plastic, glossy, glassy look for your text in Flash. I am using Flash CS3 and also using some of the Flash filter effects.<span id="more-442"></span></p>
<h2>1.</h2>
<p>Write what ever text you want to make plastic. In this tutorial we are using the word, plastic.</p>
<p><img width="500" height="92" class="alignnone size-full wp-image-431" title="plastic-1" alt="plastic-1" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-1.jpg" /></p>
<h2>2.</h2>
<p>Break up the word by pressing CTRL+B a couple of times. The give the text a white border line using the Ink Bottle Tool (S).</p>
<p>Make the border quite thick. In this example it is 3 pixels.</p>
<h2>3.</h2>
<p>Draw a transparent oval, a little wider than the text, and place it a little down from the top of the text.</p>
<p><img width="500" height="116" class="alignnone size-full wp-image-432" title="plastic-2" alt="plastic-2" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-2.jpg" /></p>
<h2>4.</h2>
<p>Using the oval as a guide, fill the bottom half of the text with a linear gradient fill, darker at the top. Do the same for the top half but use a slightly lighter gradient fill.</p>
<p><img width="500" height="91" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-3.jpg" alt="plastic-3" title="plastic-3" class="alignnone size-full wp-image-434" /></p>
<h2>5.</h2>
<p>Create a background for your text. The one used here is a rectangle with a four stage, radial gradient fill. Mess about with it until you are happy.</p>
<p>Place the text over it. We need the background for the plastic effect to truly shine.</p>
<p><img width="500" height="113" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-4.jpg" alt="plastic-4" title="plastic-4" class="alignnone size-full wp-image-435" /></p>
<h2>6.</h2>
<p>Select the text and press F8. This will open a dialogue box. Here select Movie Clip and give it a name.</p>
<p>In Filters, next to the Properties tab at the bottom, press the Add Filter &ldquo;+&rdquo; button and select Gradient Bevel. Here you will need to mess around a bit until you are happy but in this example, I used Blur 3, Angle 45, Strength 100%, Distance 3 and Type Full.</p>
<p><img width="500" height="113" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-5.jpg" alt="plastic-5" title="plastic-5" class="alignnone size-full wp-image-436" /></p>
<h2>7.</h2>
<p>Now add the Adjust Color filter. Again you will have to mess around. I changed the Hue, then increased the Saturation to 93 and the Brightness to 37.</p>
<p><img width="500" height="113" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-6.jpg" alt="plastic-6" title="plastic-6" class="alignnone size-full wp-image-437" /></p>
<h2>8.</h2>
<p>For the cherry on the cake, create a little circle with a radial fill of 100% white to 0% white. Remove any border, and place it on the top left of the first character.</p>
<p><img width="500" height="108" src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/plastic-text.jpg" alt="plastic-text" title="plastic-text" class="alignnone size-full wp-image-438" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/flash-plastic-text-effect-tutorial/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flash Curling Paper Tutorial</title>
		<link>http://www.webdesign-guru.co.uk/icon/flash-curling-paper-tutorial/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/flash-curling-paper-tutorial/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 12:10:53 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=413</guid>
		<description><![CDATA[
In this tutorial we will be looking at how to create a paper curl in Flash. We will also be adding some texture to the paper using a bitmap.




1.
            Draw a rectangle the size you want the paper to be. Make a copy of [...]]]></description>
			<content:encoded><![CDATA[<p align="center"><img width="250" height="361" class="alignright size-full wp-image-205" title="flash-paper18" alt="flash-paper18" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper18.jpg" /></p>
<p>In this tutorial we will be looking at how to create a paper curl in Flash. We will also be adding some texture to the paper using a bitmap.<span id="more-413"></span></p>
<table width="100%" cellspacing="4" cellpadding="4" border="0">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>1.</h2>
<p>            Draw a rectangle the size you want the paper to be. Make a copy of it and put that aside for use later.</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper11.jpg" alt="flash-paper11" title="flash-paper11" class="alignright size-full wp-image-187" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>2.</h2>
<p>Create two large circles within the rectangle that block off the corner to be curled.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-189" title="flash-paper2" alt="flash-paper2" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper2.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>3.</h2>
<p>Remove the corner up to the circles, then draw a straight line from the most south-easterly point of one circle to the most south-easterly point of the other. This should create a diagonal line.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-190" title="flash-paper3" alt="flash-paper3" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper3.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>4.</h2>
<p>Remove the circles but leave the triangular point where the circles met and are based at the diagonal line. This is the curl.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-191" title="flash-paper4" alt="flash-paper4" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper4.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>5.</h2>
<p>Create a gradient fill from light silver to white, and make it 50% transparent. Fill the main body of the paper with this, the silver at the bottom. Do the same for the curl but make it a darker gradient, still at 50% transparency.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-192" title="flash-paper5" alt="flash-paper5" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper5.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>6.</h2>
<p>Group this image (CTRL+G) and duplicated it (CTRL+D). Put a copy aside for now.     You need to find a photo of some paper.  Place this paper behind the semi-transparent image you have duplicated.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-193" title="flash-paper6" alt="flash-paper6" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper6.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>7.</h2>
<p>Double click the duplicated paper curl and remove the fill from the body and the curl.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-194" title="flash-paper7" alt="flash-paper7" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper7.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>8.</h2>
<p>Select the paper photo. Using CTRL+B, break it up, then select the paper curl, and break that up too using CTRL+B.     Then deselect all and select the paper photo outside the paper curl. Delete it. You should be left with a paper photo the same shape as the paper curl.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-195" title="flash-paper8" alt="flash-paper8" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper8.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>9.</h2>
<p>Delete the duplicated paper curl, and you should just have a paper photo shape left.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-196" title="flash-paper9" alt="flash-paper9" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper9.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>10.</h2>
<p>Back to the original paper curl you duplicated earlier.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-197" title="flash-paper10" alt="flash-paper10" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper10.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>11.</h2>
<p>Take the paper curl and place it on top of the paper photo shape of the paper curl.      You should now have a paper curl with some nice texture.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-198" title="flash-paper111" alt="flash-paper111" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper111.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>12.</h2>
<p>Lighten the lines of the shape and also remove the diagonal line under the curl.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-199" title="flash-paper12" alt="flash-paper12" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper12.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>13.</h2>
<p>We want to give the paper a drop shadow. To do this, take the copy of the original rectangle you created to start with, and fill it with black at 50% transparency. Remove the outline.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-200" title="flash-paper13" alt="flash-paper13" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper13.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>14.</h2>
<p>Mark on the shadow where the curl begins on the paper, then push the point where the curl is, inwards a little. This is where the shadow is warped by the curl.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-201" title="flash-paper14" alt="flash-paper14" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper14.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>15.</h2>
<p>Now make the two new diagonal line slightly rounded outwards.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-202" title="flash-paper15" alt="flash-paper15" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper15.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>16.</h2>
<p>Select the entire shadow.     Modify &gt; Shape &gt; Soften Fill Edges to create a slight blurring of the shadow. Use 10 distance and steps.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-203" title="flash-paper16" alt="flash-paper16" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper16.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>17.</h2>
<p>Place the paper curl on top of the shadow, and shift it north-west a bit.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="center"><img width="250" height="361" class="alignright size-full wp-image-204" title="flash-paper17" alt="flash-paper17" src="http://www.futtock.co.uk/wp-content/uploads/flash-paper17.jpg" /></td>
</tr>
</tbody>
</table>
<p>Thats it!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/flash-curling-paper-tutorial/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Flash Vector Illustration Tutorial</title>
		<link>http://www.webdesign-guru.co.uk/icon/flash-vector-illustration-tutorial/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/flash-vector-illustration-tutorial/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 12:05:52 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Illustrations]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/?p=406</guid>
		<description><![CDATA[
This is a tutorial on taking a sketch and creating a flash vector illustration with it. The subject in this case will be the American president, Barack Obama.
&#160;




1.
Create your illustration. As you can see I did a quick illustration basing the image on the following data should you be interested:
1.&#160;&#160;&#160; Thin body
    [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img width="184" height="377" class="alignright size-full wp-image-151" title="barack-obama" alt="barack-obama" src="http://www.futtock.co.uk/wp-content/uploads/barack-obama.jpg" /></p>
<p>This is a tutorial on taking a sketch and creating a flash vector illustration with it. The subject in this case will be the American president, Barack Obama.<span id="more-406"></span></p>
<p>&nbsp;</p>
<table width="100%" cellspacing="5" cellpadding="5" border="0">
<tbody>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>1.</h2>
<p>Create your illustration. As you can see I did a quick illustration basing the image on the following data should you be interested:</p>
<p>1.&nbsp;&nbsp;&nbsp; Thin body<br />
            2.&nbsp;&nbsp;&nbsp; Chunky eyebrows<br />
            3.&nbsp;&nbsp;&nbsp; Eyes close set<br />
            4.&nbsp;&nbsp;&nbsp; Long chin<br />
            5.&nbsp;&nbsp;&nbsp; Pronounced ears</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="200" height="390" class="size-full wp-image-153" title="scan" alt="barack obama scan" src="http://www.futtock.co.uk/wp-content/uploads/scan.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>2.</h2>
<p>Scan in the image. I photographed it, as my scanner is broken, but that works just as well. </p>
<p>Using Photoshop, or Gimp increase the contrast of the image so that you have well defined lines.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="200" height="194" src="http://www.futtock.co.uk/wp-content/uploads/contrast.jpg" alt="contrast" title="contrast" class="alignright size-full wp-image-158" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>3.</h2>
<p>Open up flash and import or paste the image to the stage. Resize it so that it fits nicely on the stage. Not too small though.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right">&nbsp;</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>4.</h2>
<p>Now right click on frame two of the scene and select Insert Blank Keyframe. </p>
<p>The stage should go blank as you are now on the second frame.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="317" height="215" class="alignright size-full wp-image-160" title="newframe" alt="newframe" src="http://www.futtock.co.uk/wp-content/uploads/newframe.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>5.</h2>
<p>Click on the Onion Skin button. This is on the bar just under the list of layers. You will see that the whole page becomes semi-transparent, and you can see the illustration from layer one. </p>
<p>You can see why the image needed a lot of contrast.</p>
<p>Using the onion skin system we can now trace the illustration using the Line Tool and Pencil Tool.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="258" height="195" class="alignright size-full wp-image-161" title="onionskin" alt="onionskin" src="http://www.futtock.co.uk/wp-content/uploads/onionskin.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>6.</h2>
<p>Using the line tool, create a straight line from one point of a round object to another, then pull the shape of the straight line so that it fits the rounded shape.</p>
<p>Keep doing this throughout the illustration until you have a complete version of the illustration as a vector line drawing. You can also use the Pencil Tool to doo some freehand tracing too.</p>
<p>&nbsp;</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right">
<p><img width="300" height="289" src="http://www.futtock.co.uk/wp-content/uploads/linetool.jpg" alt="linetool" title="linetool" class="alignright size-full wp-image-163" /></p>
<p><img width="200" height="309" src="http://www.futtock.co.uk/wp-content/uploads/linetool-3.jpg" alt="linetool-3" title="linetool-3" class="alignright size-full wp-image-165" /></p>
<p><img width="200" height="184" src="http://www.futtock.co.uk/wp-content/uploads/linetool-2.jpg" alt="linetool-2" title="linetool-2" class="alignright size-full wp-image-164" /></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>7.</h2>
<p>Once you have done all the line work you should end up with a simple vector illustration of Barack Obama, or at least one that looks more like him that mine does!</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="176" height="376" src="http://www.futtock.co.uk/wp-content/uploads/linedone.jpg" alt="linedone" title="linedone" class="alignright size-full wp-image-166" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>8.</h2>
<p>Turn off the Onion Skin. Now we have the outline for the colouring. Fill in the various sections with a basic flat colour such as a light brown for the skin, blue for the jacket etc. Just leave the eyes for now. We will get to them later.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="175" height="377" src="http://www.futtock.co.uk/wp-content/uploads/colourfill.jpg" alt="colourfill" title="colourfill" class="alignright size-full wp-image-167" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>9.</h2>
<p>To add depth to the image we need to do some highlighting and shading. </p>
<p>To do so, select the skin one and in the color panel make the tone just slightly darker. Then using the Lasso Tool imagine a light from the top left casting a shadow on the right side of his face. </p>
<p>Trace this area with the Lasso Tool. Deselect any areas that are not skin and not in shadow, then colour the selected area with the new darker skin tone.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right">
<p><img width="212" height="271" class="alignright size-full wp-image-176" title="shadowskin" alt="shadowskin" src="http://www.futtock.co.uk/wp-content/uploads/shadowskin.jpg" /></p>
<p><img width="253" height="414" src="http://www.futtock.co.uk/wp-content/uploads/lasso.jpg" alt="lasso" title="lasso" class="alignright size-full wp-image-168" /></p>
<p><img width="253" height="425" src="http://www.futtock.co.uk/wp-content/uploads/shadow.jpg" alt="shadow" title="shadow" class="alignright size-full wp-image-169" /></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>10.</h2>
<p>Now do the same for all the areas of colour, picking out shadows and colouring them with a darker shade.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="172" height="376" class="alignright size-full wp-image-171" title="shaded" alt="shaded" src="http://www.futtock.co.uk/wp-content/uploads/shaded.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left">
<h2>11.</h2>
<p>Now do the opposite and highlight the areas with the Lasso Tool that are facing the light and fill them with a lighter tone of what ever colour they are.</p>
</td>
<td valign="top" bgcolor="#ffffff" align="right"><img width="172" height="376" class="alignright size-full wp-image-172" title="highlight" alt="highlight" src="http://www.futtock.co.uk/wp-content/uploads/highlight.jpg" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left" colspan="2">
<h2>12.</h2>
<p>The following is how to make the eyes. Just make one then copy and paste another.</p>
<p>Select the entire character then press CTRL+G to group it. Do the same to each eye and place them behind the Obama character, resizing the eyes to fit.</p>
<p><img width="400" height="106" class="alignright size-full wp-image-173" title="eyes" alt="eyes" src="http://www.futtock.co.uk/wp-content/uploads/eyes.jpg" /></p>
<p>&nbsp;</p>
<p><img width="172" height="376" class="alignright size-full wp-image-174" title="eyes-done" alt="eyes-done" src="http://www.futtock.co.uk/wp-content/uploads/eyes-done.jpg" /></p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#ffffff" align="left" colspan="2">
<h2>13.</h2>
<p>Nearly done. The only choice now is how to finish it off. There are many ways but here are two:</p>
<p> 1.&nbsp;&nbsp;&nbsp; Remove all the lines, leaving a coloured vector graphic of Obama defined by shadows and highlights.<br />
  2.&nbsp;&nbsp;&nbsp; Give him a thick black outline and perhaps a drop shadow.</p>
<p>That&rsquo;s it!</p>
<p>&nbsp;</p>
<p>            <img width="376" height="377" class="alignright size-full wp-image-175" title="final" alt="final" src="http://www.futtock.co.uk/wp-content/uploads/final.jpg" /></td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/flash-vector-illustration-tutorial/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Affiliates for Artists</title>
		<link>http://www.webdesign-guru.co.uk/icon/affiliates-for-artists/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/affiliates-for-artists/#comments</comments>
		<pubDate>Fri, 08 Feb 2008 23:10:15 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/tutorial/affiliates-for-artists/</guid>
		<description><![CDATA[I have written before on how to make money with you graphical designs and illustrations, now I have been playing around with affiliates on a couple of my sites.
I sell pop art paintings that I do in my spare time and although the site generates a healthy number of sales, or at least enough to [...]]]></description>
			<content:encoded><![CDATA[<p>I have written before on how to make money with you graphical designs and illustrations, now I have been playing around with affiliates on a couple of my sites.</p>
<p>I sell <a href="http://www.artisu.com">pop art paintings</a> that I do in my spare time and although the site generates a healthy number of sales, or at least enough to keep my busy, I have found that putting ads and affiliate links on the site has not hurt my pop art sales and at the same time generates a little extra income.</p>
<p>I currently use <a href="http://affiliates.allposters.com/link/redirect.asp?AID=258041274&amp;PSTID=1&amp;LTID=14&amp;LID=12&amp;ParentAID=258041274&amp;lang=1">allposters.com</a> as they can provide for the UK, Europe and USA. Many people who are looking for artwork and designs will come across artist’s and designer’s websites even though they may have just been looking for something to put on the wall, or a gift for someone.</p>
<p>So far I am quite pleased with <a href="http://affiliates.allposters.com/link/redirect.asp?AID=258041274&amp;PSTID=1&amp;LTID=14&amp;LID=12&amp;ParentAID=258041274&amp;lang=1">allposters.com</a>, not due to the sales as it is too early to tell how good it is, but due to the easy of setting it up. Creating an account was simple. After that, you are given a whole host of options, from banners you can place on your site, to search boxes and even a mini store on your website.</p>
<p>I will get back to you on the sales point when I have given it more time.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/affiliates-for-artists/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Super Stripe Blending Tutorial</title>
		<link>http://www.webdesign-guru.co.uk/icon/super-stripe-blending-tutorial/</link>
		<comments>http://www.webdesign-guru.co.uk/icon/super-stripe-blending-tutorial/#comments</comments>
		<pubDate>Tue, 03 Jul 2007 22:50:47 +0000</pubDate>
		<dc:creator>artisu</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.webdesign-guru.co.uk/icon/tutorial/super-stripe-blending-tutorial/</guid>
		<description><![CDATA[
Blending two images using stripes can be a rather cool way of blending images. The achieve the above image follow the steps laid out below. This tutorial is for Photoshop.
1. Get two images. I have used Superman and Spiderman.
 
2. Create a new layer for image 1. In this case, Superman and create a gradient [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="attachment wp-att-256" href="http://www.webdesign-guru.co.uk/icon/?attachment_id=256" title="Superman Spiderman"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/superman-spiderman.jpg" alt="Superman Spiderman" /></a></p>
<p>Blending two images using stripes can be a rather cool way of blending images. The achieve the above image follow the steps laid out below. This tutorial is for Photoshop.</p>
<p>1. Get two images. I have used Superman and Spiderman.</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/stripes2.jpg" title="Super Stripes"></a><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/superman.jpg" title="Superman"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/superman.jpg" alt="Superman" /></a> <a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/spiderman.jpg" title="Spiderman"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/spiderman.jpg" alt="Spiderman" /></a></p>
<p>2. Create a new layer for image 1. In this case, Superman and create a gradient fill from top to bottom, from back to white using the Gradient tool set to Linear Gradient.</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/gradient.jpg" title="Gradient"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/gradient.jpg" alt="Gradient" /></a></p>
<p>3. Filter &gt; Distort &gt; Wave. Set Generators to 999. Wavelength Min and Max to 4. Scale 100%. Type: Square. Repeat Edge Pixels. You should get the following:</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/stripes.gif" title="Stripes"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/stripes.gif" alt="Stripes" /></a></p>
<p>4. Now set the Layer Style Blend Mode&#8230; Layer &gt; Layer Style &gt; Blending Options. Set Blend Mode to Multiply.</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/stripes2.jpg" title="Super Stripes"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/stripes2.jpg" alt="Super Stripes" /></a></p>
<p>5. Using the Magic Wand Tool with settings Tolerance 1, no Anti-aliased and no Contiguous, select one of the black stripes. This should select all the black stripes.</p>
<p>6. Now Shift+Ctrl+i to invert the selection and press Shift+Ctrl+c to copy the image. This should copy everything other than the black stripes.</p>
<p>7. Now paste it over the Spiderman image!</p>
<p><a href="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/superman-spiderman.jpg" title="Superman Spiderman"><img src="http://www.webdesign-guru.co.uk/icon/wp-content/uploads/superman-spiderman.jpg" alt="Superman Spiderman" /></a></p>
<p>Finished.</p>
<p>As a bonus feature, you might want to save the stripes mask as it is very useful to have around for other images.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdesign-guru.co.uk/icon/super-stripe-blending-tutorial/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
