3
Posted on 11th Dec, 2009. Posted in:
Photoshop
This 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"> </div>
<div id="out2"> </div>
<div id="out3"> </div>
<div id="out4"> </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