If you have any questions or comments about this tutorial, please post them here.
This is a tutorial on how to make Adobe Photoshop Patterns. I will be showing you two uses for these patterns. One as a solid background for your website and two to save the pattern to use with Paint Bucket and flood fill in your images. I will be using Adobe Photoshop 7.
Open up Adobe PS and go to File/New and make a new image of 8 X 8 pixels. Now Zoom in till you can work with your image, I zoomed mine in at 1200% Then select the Paint Bucket (HINT - If you left click you have the option of using the Gradient Tool, and vice versa) :
After you have selected the Paint Bucket, flood fill in your image with any color that you please, in this tutorial I used #194865 Now go and select your Pencil Tool in the menu (HINT- Left click and you have the option of using your Brush Tool, and vice versa):
After you select your Pencil Tool, change your color to something different, I chose #28546F and I changed my size to 1px. Now click on your image and make your image look like mine, by adding your square in the bottom left hand corner:
There are different patterns to be made just by moving these blocks around. To get an idea refer to the bottom section of this page to see. If you happen to use layers remember to go to Layer/Flatten Images to merge your layers when you are done. Then you can save that pattern either as jpg or gif, whichever you prefer. Just go in and play around to get your own desired effects!
Use Your Pattern On Your Website
You can use your pattern now to make a background on your website. This is great if you are using tables on your site and the background is a pattern. Here is what the pattern we made looks like as a background: click Here to see!! And the code for that is below:
<HTML>
<HEAD>
<TITLE></TITLE>
</head>
<BODY BACKGROUND="/images/pattern1.jpg" BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Use Your Pattern In Adobe PS
Or you can save your pattern to us in Adobe PS. Make sure you flattern all images. Then go to Edit/Define Pattern and then a box will popup and you can name your pattern, click ok and now you have your pattern saved! Now when you go to apply your pattern, you can click on the Paint Bucket tool, and in the menu at the top you can change the fill to pattern, and beside the pattern drop down, scroll and find your pattern.
As an example, I used three different patterns on an image I had made previously:
Some other great patterns that you may want to have are shown below. You can imitate the image and save them in Photoshop as your pattern! Remember you can also change the colors to make your own effects! *Please note that since this tutorial is on a solid black background that the black did not show up so I had to add a white border so that the black would show up. When you make this in photoshop, you do not add the white border around the image.*
Diagonal Scanlines - This pattern does not work well using as a background on a website
Make a black image 3 X 3 pixels. And make your image look like mine:
looks like >>>
Vertical Scanlines
Make a transparent image 2 X 1 pixels. And make your image look like mine:
looks like >>> 
Horizontal Scanlines
Make a transparent image 1 X 2 pixels. And make your image look like mine:
looks like >>> 
Small Gridlines
Make a white image 5 X 5 pixels. And make your image look like mine:
looks like >>> 
Digital Blocks
Make an image 6 X 6 pixels. I used layers on each pencil box and lowered the opacity to 30 percent using the color white. Make sure to flatten layers! And make your image look like mine:
looks like >>> 
Some Patterns May Look Different On the Website
Make an image 2 X 2 pixels. And make your image look like mine:
The Possibilites are endless!!!
No comments:
Post a Comment