<?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>DesignBash &#187; Pattern</title>
	<atom:link href="http://www.designbash.com/tag/pattern/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designbash.com</link>
	<description>web magazine and more...</description>
	<lastBuildDate>Wed, 17 Mar 2010 20:57:26 +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>Photoshop Offset Filter &#8211; Making Seamless Textures</title>
		<link>http://www.designbash.com/photoshop/photoshop-offset-filter-making-seamless-textures/</link>
		<comments>http://www.designbash.com/photoshop/photoshop-offset-filter-making-seamless-textures/#comments</comments>
		<pubDate>Wed, 20 Jan 2010 17:40:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Pattern]]></category>
		<category><![CDATA[Seamless]]></category>
		<category><![CDATA[Texture]]></category>

		<guid isPermaLink="false">http://www.designbash.com/?p=250</guid>
		<description><![CDATA[Today we will be working with the offset filter in Photoshop to help create a seamless textured pattern. If you ever find yourself trying to make repeatable patterns for the web, then you'll definitely want to follow this quick tutorial.]]></description>
			<content:encoded><![CDATA[<p>Today we will be working with the offset filter in Photoshop to help create a seamless textured pattern. If you ever find yourself trying to make repeatable patterns for the web, then you&#8217;ll definitely want to follow this quick tutorial.<span id="more-250"></span> I&#8217;ll be using a random texture that I found somewhere on the internet, you can grab it here (click on the thumb for the full size):</p>
<div id="attachment_251" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.designbash.com/wp-content/uploads/2010/01/jute-texture.jpg"><img class="size-medium wp-image-251" title="jute-texture" src="http://www.designbash.com/wp-content/uploads/2010/01/jute-texture-300x212.jpg" alt="Jute Texture" width="300" height="212" /></a><p class="wp-caption-text">Download Jute Texture</p></div>
<h3>Step 1 &#8211; Setup Your Photoshop Document</h3>
<p>Go ahead and create a new photoshop document that is <strong>600px by 600px</strong>. Choosing a large tile size will make our background seem less tiled, but may require a little more work depending on the image your trying to make repeatable. Specifically, if your source image has a lot of color variation you might want to choose a smaller tile size to make things easier on yourself. The image we are using has a very consistent color scope, so our 600&#215;600 tile size should be easy enough to work with.</p>
<p><img class="aligncenter size-full wp-image-253" title="seamless-document" src="http://www.designbash.com/wp-content/uploads/2010/01/seamless-document-e1264003762422.png" alt="" width="500" height="282" /></p>
<h3>Step 2 &#8211; Paste in the Jute Texture</h3>
<p>Next you need to paste in the jute texture. I&#8217;ve oriented mine to the top left and scaled it down until it just fits the canvas. You&#8217;ll end up cutting off the right side of the image.</p>
<h3><img class="aligncenter size-full wp-image-254" title="scale-down-texture" src="http://www.designbash.com/wp-content/uploads/2010/01/scale-down-texture-e1264004340229.png" alt="" width="500" height="357" /></h3>
<h3>Step 3 &#8211; Using the Offset Filter</h3>
<p>Now comes the fun part! With your texture layer selected, goto the top menu and choose <strong>Filter &gt; Other &gt; Offset</strong>. We want to offset our image horizontally and vertically by <strong>300-pixels,</strong> allowing us to see where our pattern has its seams. After applying the filter you should see your texture now has 4 defined quadrants. In the next step we are going to clean those up and make our pattern seamless.</p>
<p><img class="aligncenter size-full wp-image-255" title="choose-offset" src="http://www.designbash.com/wp-content/uploads/2010/01/choose-offset-e1264005566588.png" alt="" width="498" height="215" /></p>
<p><img class="aligncenter size-full wp-image-256" title="offset-settings" src="http://www.designbash.com/wp-content/uploads/2010/01/offset-settings-e1264005600492.png" alt="" width="499" height="265" /></p>
<h3>Step 4 &#8211; Smooth the Divisions</h3>
<p>This is the hardest part of making seamless textures. We need to smooth out the dividing lines using photoshop&#8217;s many helpful tools. I&#8217;ve found two different ways to do this, but the method you use ultimately depends on the texture you&#8217;re working with. Some textures are really easy to turn into a pattern, other textures are almost impossible. This jute texture is relatively easy thanks to the consistent color, but there are a few tricks I used to get things just right.</p>
<p><strong>Method #1 &#8211; </strong><em>(I found this works better for this texture)</em></p>
<ol>
<li>Copy areas of the texture that have no seam and paste them (in a new layer) <strong>on top of the seams</strong>. Adding some feathering to your selection <em>(around 5px)</em> will make things a little smoother.</li>
<li>Use the eraser tool (using a soft &amp; small setting) and <strong>erase the edges of your new layer</strong>.</li>
<li>You&#8217;ll find that the edges of your new layer look a little blurred and don&#8217;t really fit in&#8230; to fix this use the <strong>sharpen tool along the edge</strong>.</li>
</ol>
<p><img class="aligncenter size-full wp-image-259" title="copy-and-paste" src="http://www.designbash.com/wp-content/uploads/2010/01/copy-and-paste.jpg" alt="" width="500" height="300" /></p>
<p><strong>Method #2</strong></p>
<ol>
<li>Use the clone tool to remove the seams</li>
<li>If you find things are blurry use the sharpen tool to make things fit properly.</li>
</ol>
<p><strong>TIP</strong>: <em>When you have a relativity seamless pattern you can use the </em><strong><em>burn</em></strong><em> and </em><strong><em>darken</em></strong><em> tools to make the lighting more standard&#8230;</em></p>
<p>It definitely takes a little time to get things perfect, but it&#8217;s worth it in the end. It took me around 20-minutes before I had a semi-perfect seamless texture. Below you&#8217;ll find the final image:</p>
<div id="attachment_267" class="wp-caption aligncenter" style="width: 310px"><a href="http://www.designbash.com/wp-content/uploads/2010/01/seamless-jute1.jpg"><img class="size-medium wp-image-267" title="seamless-jute" src="http://www.designbash.com/wp-content/uploads/2010/01/seamless-jute1-300x300.jpg" alt="Seamless Jute Texture" width="300" height="300" /></a><p class="wp-caption-text">Download Seamless Jute Texture</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.designbash.com/photoshop/photoshop-offset-filter-making-seamless-textures/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
