Professional Website Design Company UK
Support us Advertise Write for PM Design Submit Freebie Submit Your Website
Tutorials » Photoshop Tutorials » Create pattern backgrounds…

Create pattern backgrounds for you website in Photoshop

3
 
Posted on 11th Dec, 2009. Posted in:

create pattern backgroundThis tutorial shows how to create background for your website in Photoshop and how to crop the images and prepare them for your website. Next we will style our html file and display our headers in browser. We are going to create 4 different header elements using patterns and filters.

 

HTML structure

 
<div id="out1">&nbsp;</div>
<div id="out2">&nbsp;</div>
<div id="out3">&nbsp;</div>
<div id="out4">&nbsp;</div>
 

CSS applied to display our backgrounds

 
* {margin: 0px;padding: 0px;}
body {background-color: #222222;}
#out1,#out2,#out3,#out4 {margin: 20px 0px;height: 100px;}
#out1 {background: url(../images/bg1.png) repeat-x 0px 0px;}
#out2 {background: url(../images/bg2.png) repeat-x 0px 0px;}
#out3 {background: url(../images/bg3.png) repeat-x 0px 0px;}
#out4 {background: url(../images/bg4.png) repeat-x 0px 0px;}

As you can see, this is dead simple structure. The only trick is to crop the images properly in Photoshop.

Screencast – How to create pattern backgrounds

 

Get the Flash Player to see this player.

 

If you use different techniques, feel free to share them with us. Any comments welcome. PS. Sorry for my odd camera. (shift+cmd+c shortcut ;))

Enjoyed this entry? Share it around!

 

Share it with others. Make others aware about web design tips, techniques and news.

 
 

You may also like to read

 
 
 
  • http://www.jumpstreetwebdesign.com Mark J. Moyer

    The site is a wonderful for many. The tut’s are informative and absolutely enjoyable Pawel. Keep up the hard work. I think I speak for many when I say. Great work my friend!
    Now, fork over one of thise Google Waverunners!!!!

  • http://www.pawelmartuszewski.co.uk Pawel

    Haha ;)

    Mark, 8 Google Wave Invitation left… Follow the steps and you will get one for sure ;)

    Thanks for your comment.

  • http://maxiwebart.net Maxi

    Nice tut.dud Thanks

  •  
    •  
     
     
     
    Copyright © 2008 - 2012. All rights reserved.
    Pawel Martuszewski Design – Web Design Tutorials, operated by Direct Media Design