Mar 22nd

Creating Seamless Textures from Photos in Photoshop

Creating Seamless Textures from Photos in Photoshop

In this quick, but very useful tutorial I will teach you how to create a seamless texture from any stock photo or image. This can be very useful when creating repeatable backgrounds for your websites background, or for your 3D modeling projects.

Lets get started

1. The first thing we want to do is open up our stock photo that we want to turn into a seamless repeatable image. The image that we will be using is one that I took from our Brick Texture Pack and have prepared it for this tutorial: Brick Texture.

2. My image is 800×515. We are going to want to know what half of each of these numbers is for the next step of this tutorial. In my case, I need the numbers 400 and 257. Once you know these numbers, go to Filter>Other>Offset.

3. Once you insert those items into their appropriate fields, your image will look something like the following:

4. Now you will notice there is a ugly crease that we need to get rid of. To do this we need to use our Clone Stamp Tool (S). Set the opacity to 100%, and then clone that crease out by sampling areas around the crease to make it blend together. These are my results after a few minutes of cloning:

5. Depending on the image your using, we could stop there and be finished. But for the image we are using, we need to fix a couple more things that will stand out once our image starts to repeat. The two items in question are the Red brick, and gray brick below.

6. Once it starts to repeat, these two bricks will stand out and distract your eye and we don’t want that. So lets go ahead and begin with the red brick at the top. The easiest thing to do is to use our Sponge Tool (O) to desaturate our red brick a little to make it as faded as the others. Set your Flow to about 30%, and then brush over your brick until you get something that looks like the following:

7. For your gray brick, we want to give it a “yellower” color. To do so use your Clone Stamp Tool (S) with its opacity set to 50%. We want to sample (option+Click) from the following brick to get the desired effect:

8. When you are complete your texture will look like the following:

9. All that is left to do is to set it as a pattern. To do so go to Edit>Define Pattern, and insert the desired name that you want. That’s it! Your done! This will work for any stock photo you find on the web. So if you find a texture you like, but don’t like the fact that it’s not repeatable, now you can do it yourself. Here is an example of the pattern being repeated:

The testking offers best quality mcp tutorials and cissp video demos to help you lean different techniques used in photoshop.

Related Articles

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts9 Comments

  • Roei CPO March 23rd, 2010 at 5:34 am

    WOW, very nice tutorial.

    really thank you :)

  • Mark March 24th, 2010 at 2:32 pm

    Great tutorial.

    Can’t wait to try it out.

  • Sean Pollock April 9th, 2010 at 12:40 am

    Technique that everyone should know :) Good tutorial

  • zsk April 11th, 2010 at 12:51 am

    wo wo wo wo , good. i don’t what say .

  • Wordpress Themes July 25th, 2010 at 12:16 am

    Good post and this enter helped me alot in my college assignement. Thanks you for your information.

  • IFG design September 27th, 2010 at 5:37 pm

    Very easy and well shown, nice and usefull tutorial :) thanks!

  • test August 1st, 2011 at 4:04 pm

    Appears to be it’s finally gonna warm up again … It genuinely was a wild winter this current year everywhere over the county. Is seems as though spring time won’t come soon enough. Looking towards our summer months ahead ..

  • DesignToads January 3rd, 2012 at 4:12 pm

    Thank you so much for this post! I’ve been trying to find a simple way to make my own patterns and this is exactly what I was looking for! Kudos to you!

    • LyLa September 22nd, 2014 at 12:41 am

      Great blog post. First and foremost, we have to chgnae OUR behavior before we try to chgnae our bird. Our bird is just being a bird. Usually, we are missing the subtle signals they send us: a pinned eye, raised nape feathers, a slight bow. They are autonomous creatures and deserve to be treated as such. I certainly don’t want someone standing too close to me, insisting that I eat something or get up every time they command. Our birds feel the same way. When trying to establish a trusting bond with your bird, never use any kind of force that even means stepping away and coming back later when the bird refuses to step up, being respectful of a bird that doesn’t want to be pet (as a side note, petting is not natural for a bird. If they like being pet score!)Respect, patience, acceptance. By shifting the focus to our own behavior we not only become better parrot owners, but better people.

Leave Your Response