Building a website firstly requires building the design which is actually an image of your future website made in Photoshop. There are many tutorials on the web, created especially for showing you how to do such a design and many of them are using patterns as backgrounds. But what is actually a Photoshop pattern? A pattern is an image that is repeated, or tiled, when you use it to fill a layer or selection. Photoshop comes with a variety of preset patterns.

You can create new patterns and save them in libraries for use with different tools and commands. Preset patterns are displayed in pop?up palettes in the options bar for the Paint Bucket, Pattern Stamp, Healing Brush, and Patch tools, as well as in the Layer Style dialog box. You can change how patterns are displayed in the pop?up palettes by choosing a display option from the pop?up palette menu. You can also manage pattern presets using the preset manager.

Photoshop also provides the Pattern Maker filter to create pattern presets, or fill a layer or selection with a custom pattern.

Let`s build a pattern! I`m going to show you how to create a simple grid pattern as the one from your summing books. Many websites are using for their backgrounds this type of pattern instead of a simple color…is cool and catchy.

Open Photoshop and create a new document of 21×21px. Why these dimensions? because we`ll create a grid with 2 columns and 2 lines each of 10×10px…at the middle of the box, there will be 1 pixel for a vertical line and another one for a horizontal line. Make sure to set the Background Contents to “Transparent” in order to make the pattern ready for external use. You`ll want to save the image as a transparent png.

Make sure to increase the zoom of the image as much as you need. I made it from 100% to 1600%. If you don`t know how to do it, just hit Ctrl++ or View->Zoom In.

Now grab the Line Tool(U) and with a weight of 1px, draw a vertical line between the pixel 10 and 11. At high zoom, you`ll notice what is called “feathering”, caused by Photoshop.

To fix this, grab the Convert Point Tool (is in the Pen Tool second menu), select the shape mask of your layer by clicking on the mask, Right-Click on the vertical line and hit “Free transform Path”. Transform the path until you`ll obtain a black line of 1px.

Now that you have a line, duplicate the layer and rotate it 90 degrees to obtain an horizontal line. Go to Edit->Transform->Rotate 90 degrees CW. you should have now a grid.

To define a pattern, go to Edit->Define Pattern, give a name to your pattern and hit OK.

To use a pattern, create a new project, paint the transparent layer with any color you want, using the Paint Bucket Tool(G) and to the layer, add the layer style called “Pattern Overlay”. Choose the new pattern from the Pattern Picker and the small image of 21×21px created earlier, will be applied to the entire canvas.Cool, huh?

In just a few steps, you`ve learned how to create and use your own patterns…Now, the sky is the limit…using this technique, you can create all types of patterns you want, oblique lines, horizontal and vertical lines, any type of pattern! I hope you`ve learned something today but if you have any questions, drop us a comment below!

Related posts:

1. How to Create a Paper Sticky Note in Photoshop
2. How to Create a Clean Navigation Menu in Photoshop
3. How to create an energy ball effect as Dragon ball Z with Photoshop

Here, we have gathered 65 Free and Useful Texture Packs that you can use in your next web designing project. Enjoy!

Rock & Bark Textures

Dirty Textures

Paper Textures 2010

Mega Textures Pack

Rust Textures

Cracks Texture Pack

Paper & Plastic Packaging Textures

Abstract Foam Swishes

Red Rocks Texture Pack

Fabric Texture Pack

Cardboard Textures

Corkboard Texture Pack

Hi-Res Texture Pack

Fractalized Grunge Texture Pack

Hardwood

Ground Textures

7 Grungy Texture Pack

Abstract Grunge Texture Pack

10 Red Rock Textures

Textiles Textures

Rock Textures

Wood Textures

Lines Textures

Tire Textures

Carpet Textures

Maps Textures

Underwater Textures

Nature Textures

Xray Textures

Grungy Paper Textures

Textures 6 Scrapbooking

Original Scrapbook Textures

Big Light Textures 02

Broken Glass Textures

9 Large Cloud Textures

5 Textures

Soft Glow Bokeh Pack

Texture set 12

Lava Rock Texture Pack

MAT TEXTURES

Aqueous Sun Texture Pack

Droplets Texture Pack

Grass Textures

Brick & Stone Texture Pack

Pack Textures

Fabric Textures Part 1

Graffiti Textures

Fabric Fold Textures

Spray Paint Pack

Sand and Seashell Textures

Metal Surface Textures

Paper & Canvas Textures

Misc Textures

Grungy Mauve Brown Seamless Textures

Heavy Coffee Stains

Seven Fabric Textures

Grungy Bokeh

Textures of cracked paint

Textures of wood

Mussel shell textures

New Pack light texture

Bubbles

Magical Leaf Textures

Hand-Picked Rust Textures

Grunge Textures

Related posts:

1. Massive List of 1009 Hi-Res Free Textures and Background Images
2. 10 + Free Grunge Style Rust Textures
3. Cardboard Textures : Free Downloads + Examples Websites + Tutorials for Designers

BGREPEAT is a high quality free seamless patterns web application. Where you can find fresh, cool, minimalist, awesome vector based backgrounds for blog, twitter and desktop. It keeps things simple; choose the pattern and clicked on “Thumbnail for Preview”. So that you can have a look in popup before applied the texture will look like on the actual location. Simply click on “Icon on the Top Right of Thumbnail”, in order to download the pattern on your computer.

Visit website for download

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

Related posts:

1. Beautiful Free Vector Downloads Roundup
2. Freebies Sticker icon Pack Download these icons for Free
3. How to Create Awesome Photoshop Patterns for Your Own Use