Photoshop Tutorial: Creating custom pattern

Advertisement

Most of the time, default Adobe Photoshop’s patterns just could not satisfied designers needs. Minutes later you will be creating your own custom pattern for buttons, interfaces, photo scan-lines, etc.

Custom pattern in Adobe Photoshop

Download this sample

1. Create a pattern image

Fire up a new canvas. It should be small (in terms of height x width). Image you are creating here will duplicate itself to form your pattern in the later stage. For this example, I’ll be using 8×8 pixel canvas, zoomed them up and create a small pattern like this.

new canvas

Pattern at 100% view

pattern at 100% view

Pattern at 1600% view

2. Define as pattern

Let’s define it as pattern so it can be used at anytime. Select Edit ->Define Pattern.

define pattern

Rename it to something you can remember (especially useful when you have a lot of custom patterns in future). I’ll call it Stripe5x because it will give me a stripe effect and 5px is how thick each stripes are. Click OK and you’ve just have your custom pattern defined.

rename pattern

3. Using custom pattern

Create a new canvas to try out the custom pattern. With your new canvas selected, Select Edit -> Fill.

fill imag

In the Fill dialog box, select Pattern from the dropdown, find the pattern you’ve just created in Custom Pattern and click OK.

select pattern

The canvas will now be filled with pattern you’ve just created. Tweak the colors and it should look fine.

final output

Download this tutorial.

Misc: Alternative way to call custom pattern

Another way to call up the custom pattern. (Right Click) layer name -> Blending Options

Check Pattern Overlay, select your pattern

Misc – Delete custom pattern

Anywhere in the pattern selection box, (Right Click), choose Delete.

Related Contents

Sponsors

Posted by hongkiat in Photoshop Tutorials , at 12.21.06

Comments

  1. JtuneD December 21st, 2006

    Thanks for the tutorial…haha!!

    Reply
  2. jerry farina January 4th, 2007

    thanks for the tips!

    Reply
  3. ET January 5th, 2007

    This tutorial does not teach any one how to “create” a custom pattern…
    using your custom pattern, is not creating a “custom” pattern..It’s telling us how to use and color YOUR custom pattern.
    Would you like to tell us how you made the pattern we have to download in your tutorial?

    Reply
  4. Aleks January 18th, 2007

    Uh, sure it does. make 8×8 canvas….color as shown….edit -> define pattern

    Reply
  5. Fabian January 20th, 2007

    i agree with ET
    im [uber] novice at PS CS2 ¬_¬

    - what i wanna know is how did you get the pattern on the 8×8 cause that is what i want but i can’t do it at all.

    Reply
  6. hongkiat January 20th, 2007

    The title could be a bit mis-leading, I’ll have a tutorial on “create custom pattern” in a short while. Thanks for the feedback.

    Reply
  7. techconet February 3rd, 2007

    Thanks a lot….

    Reply
  8. Marko February 9th, 2007

    Nice tutorials for beginners. You could explain in more details how to make striped pattern.

    Reply
  9. Romica March 3rd, 2007

    Nice tut. Please, give me PSD Files. TAnk`s

    Reply
  10. hongkiat March 4th, 2007

    Romica, both the PSD (Sampls and Tutorial) links are on this page. :)

    Reply
  11. sandy March 19th, 2007

    Ok….to explain to others HOW to save a defined pattern.

    Start a new projet at the size you want..like 8×8 or 4×4…whatever..

    Use the pencil tool and zoom in at 1600px.

    fillin each pixel with the color u want..

    when done, go up to the tabs up top and click on Edit/Define Pattern. Then save the pattern with whatever name you want to call it… then close out that project and don’t save it when closing it out.

    Now you will have the pattern u made saved in your patterns.

    Reply
  12. Buddy April 3rd, 2007

    Didn’t work out right for me someone help please!

    Reply
  13. hongkiat April 3rd, 2007

    Buddy: What seems to be the problem?

    Reply
  14. kyokokujo April 5th, 2007

    hope to more in fotoshop

    Reply
  15. 12monthsOFwinter August 24th, 2007

    I would appreciate you removing the links to my pattern- hot linking is not appreciated by the DA servers and I would rather people go to my page http://12monthsofwinter.deviantart.com/ than simply grabbing off your site.

    Reply
  16. ShahZ February 7th, 2008

    Hey there, what is the canvas size for the pattern (third from the left, third from the top) the one with gradients on both size..I bet that one gives a fiberglass effect doesnt it?

    Reply
  17. hongkiat February 13th, 2008

    Shaz: That’s 1×2 (width x height)

    Reply
  18. Raj July 11th, 2008

    This tutorial is really helpful. Thanx a lot m8 :)

    Reply
  19. kozeyar July 15th, 2008

    thanks man! i always wanted to know that
    :D

    Reply
  20. Angga Rifandi August 9th, 2008

    I really need this tutorial to building my site. Great job dude

    Reply
  21. Erdosam August 28th, 2008

    Thanks for the tutorials…

    Reply
  22. bynge October 22nd, 2008

    i can’t see the new pattern i create anywhere.

    i followed exact steps till saving it with a name.
    there isn’t any “custom pattern” option in the list of patterns .

    this is the first time i’m creating any custom patterns. so , is it required to have a folder or file by the name “custom pattern”
    before starting itself ??
    please help

    Reply
  23. silence October 25th, 2008

    Thanks awesome site and awesome tutorials.

    Silence

    Reply
  24. vespagap November 25th, 2008

    tks for tutorial. Great job

    Reply
  25. Energia Solar January 3rd, 2009

    este tutorial complementa al de los botones, de nueva cuenta gracias por el mismo, es de mucha ayuda.

    Reply
  26. Amature Photograper January 30th, 2009

    I am an amature and this was easy enough to follow. To get the image I wanted in the new canvas I just copied and pasted it in there and croped the canvas to fit then resized. It was a simple solution but it served the purpose I needed. Very helpful tutorial!!! Thanks a bunch!!!

    Reply
  27. Annie March 6th, 2009

    Very helpful, thanks a lot.

    Reply
  28. Jehzeel Laurente March 10th, 2009

    this is exactly what I am looking for. thank yewww :D i couldnt fine the define as pattern before, thanks for this post. It was just under Edit button, oh my I’m so dumb. haha! :D

    thank you once again :D

    Reply
  29. seeal March 12th, 2009

    thx for tutorial

    Reply
  30. Marcelo Pires March 19th, 2009

    thank you so much, I was looking for that.

    Reply
  31. Arun Verma May 27th, 2009

    Thanks that helped me alot

    Reply
  32. Cechas May 29th, 2009

    thx ;]

    Reply
  33. tinef June 9th, 2009

    Great thing. Thanks for this tip!

    Reply
  34. Anja June 19th, 2009

    Very easy to understand and useful, thank you!

    Reply
  35. rhay June 30th, 2009

    thanks for the info….
    thanks…..
    :)

    Reply
  36. Megan July 8th, 2009

    This didnt work :(

    Reply
  37. Sunny Frimley August 3rd, 2009

    Great little tutorial. Just what I was looking for. Can’t believe how rude and arrogant some of the comments are.

    People, if you can’t even work out how to draw a dot on the canvas then you shouldn’t be looking for tutorials on anything other than basic photoshop usage. Drawing a dot is about as basic as you can get.

    Reply
  38. Vishnu August 22nd, 2009

    thanks for the help ! nicely written :)

    Reply
  39. hemant joshi August 24th, 2009

    thanque very much for the help .

    i want to join u r comunity but how i dont know ?
    if u know about this, then pls mail me &

    onces agin thanks for the help

    Reply
  40. hemant joshi August 24th, 2009

    how to make the custom shepes? if u know about the custom sheps how to make this then pls tell me somthing

    Reply
  41. Dimaz August 25th, 2009

    very good and nice tutorial… thank you very much….

    Reply
  42. Aris September 22nd, 2009

    Print screen, paste in PS and crop the 100% view of the pattern in the tutorial. Worked for me.

    Reply
  43. andrii October 16th, 2009

    amazing easy steps… :) i like it!

    Reply
  44. Jean November 3rd, 2009

    Hi

    Im a beginner user to PS. Can I ask , how do you create a A-frame canvas size in PS?

    Thanks!

    Reply

Trackbacks

  1. 24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Create cool Glossy Button for web
  2. how to create web 2 buttons -another awesome tutorial at happy indian
  3. Free Photoshop brushes and patterns
  4. canvas prints
  5. Create Carbon Fibre Pattern in Photoshop
  6. Concept of Photoshop Custom Pattern
  7. Create Background Images Online
  8. Photoshop class resource » Surianee
  9. web tasarım ve uygulamaları » Blog Archive » Işıklı web2.0 buton yapımı
  10. Udesigs's Blog....Free CSS Templates, Open Source CSS Templates and CSS Templates, Web Tips, Totorials, Flash Source Templates
  11. Udesigs's Blog....Free CSS Templates, Open Source CSS Templates and CSS Templates, Web Tips, Totorials, Flash Source Templates
  12. Save The Pixel - The Art Of Simple Web Design. | 7Wins.eu
  13. 498 Photoshop Background Patterns, and so much more | AzAkers
  14. Stripe Generator « Mcloide’s resources library
  15. ADGA Intro to Web Design » Some Questions Answered
  16. Bookmarks for Enero 2nd from 06:27 to 08:07 | FACIL TUTORIALES
  17. The Ultimate Collection Of Free Photoshop Patterns
  18. Die große Sammlung kostenloser Photoshop Muster
  19. Novedosa colección de texturas para tu sitio web | CSSBlog ES
  20. Create full-color and bitmap patterns in CorelDRAW | Web-to-print Help
  21. PaylasTurka » Web2.0 buton yapımı
  22. 70 Excellent Photoshop Resources
  23. 70 Excellent Photoshop Resources | Blog YODspica Ltd
  24. 70 Excellent Photoshop Resources | Blog YODspica Ltd
  25. 70 Excellent Photoshop Resources | Programming Blog
  26. The Ultimate List of Sources for Free Background Patterns | Showcases | instantShift
  27. Design Glossy Web 2.0 Button In Photoshop « Photoshop.vn – Your Design Resource
  28. Design Glossy Web 2.0 Button in Photoshop – Learningism
  29. Photoshop Tutorial Collections « Webdesigner Resource
  30. 300+ Resources to Help You Become a Photoshop Expert - partytow for all
  31. 300 more Resources to Help You Become a Photoshop Expert - tutsmore
  32. 300+ Resources to Help You Become a Photoshop Expert | huibit05.com
  33. معرفی 300 مرجع کامل فتوشاپ | www.coreldesign.com

Leave a reply