PatternHead

Go Patternhead

2007-08-13T15:37:24Z

Welcome to Patternhead. Your one stop shop for royalty free, vector and raster, seamless repeat patterns. Now there’s a catchy tagline!

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.

Using Repeat Patterns in Photoshop

2007-08-13T15:26:02Z

Adobe Photoshop loves repeat patterns and repeat patterns love Adobe Photoshop. Love is a wonderful thing :)

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.

Using Wallpaper Patterns in CSS

2007-08-13T14:28:44Z

Seamless patterns and CSS. It’s a match made in heaven.

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.