This feed is now redundant…

I decided to move the blog posts from Shopify to Wordpress. Please subscribe to the new feed here:

Subscribe to the new Patternhead RSS Feed

Wordpress gives me much more flexibility to build the freebie/resource side of Patternhead. You can see the new site here www.patternhead.com

You can still download royalty free vector patterns from the store… shop.patternhead.com

This is going to be the last post in this feed so thanks for subscribing and don’t forget to subscribe to the new feed.

We had a couple of requests for a different version of the first free pattern so here it is. It’s a bit bigger (cos big is beautiful) and the colors are just black and white. As always, we’d like your feedback on the free patterns we’re providing. Do you like em? How are you using them? What kind of free patterns would you like to see?

This is a seamless vector pattern that you can download for free. It’s fully editable so you can tweak it to fit with your designs. The download contains an EPS file that you can load into Adobe Illustrator or Photoshop (or whatever you use for editing vectors). We’ve also included a png in the download so you can just go ahead and use that if vectors are too scary :)

Here's a sample of the repeat pattern:

Cool, how can I use it?

• You can use the pattern for personal or commercial projects
• A link back here would be cool but isn't required
• You may not sell or redistribute this vector pattern in any way, shape, or form
• You may not create derivatives of this pattern for resale or distribution

Thanks and look out for some new free patterns coming soon.

If you like it be sure to leave a comment.

This is a free seamless vector pattern that you can download for nothing. It’s fully editable so you can tweak it to fit with your designs. The download contains an EPS file that you can load into Adobe Illustrator or Photoshop (or whatever you use for editing vectors).

Here's a sample of the repeat pattern:

Cool, how can I use it?

• You can use the pattern for personal or commercial projects
• A link back here would be cool but isn't required
• You may not sell or redistribute this vector pattern in any way, shape, or form
• You may not create derivatives of this pattern for resale or distribution

It’s a free high quality vector repeat pattern that you can download for nada. It’s seamless so it’ll tile on all sides. You can easily change the color scheme to fit your design. The download contains an EPS file that you can load into Adobe Illustrator or Photoshop (or whatever).

Here's a Pattern Sample:

Cool, how can I use it?

• You can use the pattern for personal or commercial projects
• A link back here would be cool but isn't required
• You may not sell or redistribute this vector pattern in any way, shape, or form

All items are delivered digitally. When you purchase an item, you’ll receive an email with a download link. Click the link, enter the supplied user name and password and you’ll have instant access to the item. There are no delivery charges and you don’t have to wait for items. You can download them instantly.

There’s only a small selection of patterns available at the moment but we’ll be adding lots more over the next few weeks so please come back soon and take a look.

This tutorial is going to show you how easy it is to fill custom shapes with repeating patterns in Adobe Photoshop CS2.

1. OPEN YOUR PATTERN FILE

For this tutorial I’m using one of these free patterns but you can use any pattern as long as it repeats on all sides.

In Photoshop, Click the File menu and choose Open.

Find the pattern file you want to use and open it.

2. DEFINE A CUSTOM PATTERN

Click the Edit menu and choose Define Pattern

Give your pattern a name and click ok

You’ve now defined a pattern that you can open and use in any image you create. How cool is that?

3. CREATE A SHAPE TO FILL

Click the File menu and choose New

Choose a file size (I’m using 400px by 200px but you can choose any size.)

Use the elliptical marquee tool to drag a circular selection like this…

4. FILL THE SHAPE WITH THE PATTERN

Click the Edit menu and choose Fill

In the first dropdown box choose Pattern

In the second dropdown box select the pattern you want to use. It will probably be right at the bottom of the list. When you’re done, the option window should look like this…

Click the Ok button and your shape will fill with the pattern. I repeated the selection a couple of times and here’s mine…

CONCLUSION

This tutorial has only just scratched the surface. You can do so many things with patterns in Photoshop. For maximum effect I use the pen tool to create custom shapes then use layers, masks and blend modes to get impressive effects. Have fun.

This article is going to show you how easy it is to add repeat patterns to your CSS based web designs.

Ok, the first thing we need is some HTML.

Copy this code, paste it into your favorite text editor and save it as index.html :

HTML

<html>
<head>
<title>Fun and games with wallpaper</title>

<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
</head>
<body>

    <div id="container">         
    <p>Dontcha just love those seamless patterns :)</p>
    </div>
</body>
</html> 

Then we need a bit of CSS.

Copy this code, paste it into your favorite text editor and save it as stylesheet.css. Make sure you save it to the same folder as the HTML file you saved above:

CSS

body {
font: small Verdana, Arial, sans-serif;
background: url(wallpaper1.jpg);
color:#333;
text-align:center;
}

#container {
background:#fff;
width:700px;
margin:0 auto;
padding:5em 0;
}

Now, right click the image below and save it to the same folder as index.html and stylesheet.css. Make sure you save the file as wallpaper1.jpg

Now just open index.html in your browser and you should be able to see that the seamless pattern has filled the whole of the background. That’s all there is to it!

For those that don’t like to cut and paste, here’s a zip file that you can download. It contains all the files in this tutorial. Just unzip it to a folder on your hard drive and open index.html in your browser.