Patternhead » Tutorials

8 Inspiring Video Tutorials About Repeat Patterns

Patternhead — Fri, 27 Mar 2009 10:20:32 +0000

Video tutorials and screencasts are great. I’m a fan. I plan to release a couple myself in the not too distant future. In the meantime, here’s 8 video tutorials all with pattern releated themes.

Using Repeat Patterns in Adobe Photoshop

Patternhead — Fri, 23 Jan 2009 14:16:15 +0000

This tutorial is going to show you how easy it is to fill custom shapes with repeating patterns in Adobe Photoshop. I’m using CS3 for this tutorial but it should work in any recent version.

You can have some real creative fun with Photoshop and repeat patterns. As with most things, there’s lots of different ways to use patterns in your own designs. For this tutorial, I’m going to show you how to take a repeat pattern, add it to the Photoshop pattern library and then use it to fill selections.

1. OPEN YOUR PATTERN FILE

For this tutorial I’m using one of the 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.
Select 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 future design that you create. How cool is that?

3. CREATE A SELECTION

Click the File menu and choose New
Choose a file size (I’m using 500px by 300px but you can choose any size.)
Use the elliptical marquee tool to drag a circular selection

4. FILL YOUR SELECTION WITH A 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. You’ll probably have to scroll to the bottom of the list

When you’re done, the option window should look like this…

Click the Ok button to fill your pattern. It should look something like this…

CONCLUSION

This tutorial has only just scratched the surface. You can do so many things with patterns in Photoshop. For example, use the pen tool to create custom shapes then use layers, masks and blend modes to get impressive effects. You can also fill vector shapes and adjust the scale and transparency of the patterns. I guess we can cover some more complext stuff in future tutorials. Have fun.

Using Repeat Patterns in CSS – How to

Patternhead — Fri, 23 Jan 2009 12:34:05 +0000

Seamless patterns and CSS….easy when you know how.

This tutorial is aimed at CSS newbies and it’s going to show you how easy it is to add repeat patterns to your CSS based web designs. You don’t really need to know anything about HTML and CSS. I’ve included a zip file with a full example that you can take a look at. Also, here’s a live demo if you want to see what we’re aiming for.

HTML Code Sample

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>
<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>

CSS Code Sample

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:

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.png

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.