There is many way to make your website look a beautiful and very
good. one of the common way is create a grdient color in your
bakcground web. In this tutorial I will show you how to create it using
Photoshop and Dreamweaver software. Why should we use the both
software? Well, It’s the simple answer : because its very easy. Here
are step-by-step how to create a grdient color in your bakcground web :
# Step 1 : Work in photoshop
- open your Photoshop program and create new document with 800X600 pixels and resolution is 72 pixels/inch.
- Select dark red color ( RGB # 9d0a0e ) for foreground color and black color ( RGB #000000 ) for background color.
- Activate the gradient tool and create the gradient color such us shown on the figur 1.
- The next, slice part of the bakground image using the slice tool. You can see the figur 2.
- After you slice the image, its time to export the image you just slice for your document web. Click File>Save for web.
- In the save for web dialog box, select the slice image using the slice select tool ( Figur 3 ). And then select JPEG high in the preset dropdown menu ( Figur 4 ).
- In the save for web dialog box, select the slice image using the slice select tool ( Figur 3 ). And then select JPEG high in the preset dropdown menu ( Figur 4 ).
- Save your image in your directory web ( click save button ).
# Step 2 : Work in Dreamweaver
- Open your Dreamweaver program and create new HTML document
- Click New CSS Rule icon in the lower-right corner of the CSS Styles panel and then Create a new CSS rule for body tag.
- Go to background category. in the background image, fill the gradient image you just created in photoshop and then click apply. Select repeat x in the repeat dropdown menu and then clik apply. Select the bakground color and then click the bottom of image to fill background image.
# Step 2 : Work in Dreamweaver
- Open your Dreamweaver program and create new HTML document
- Click New CSS Rule icon in the lower-right corner of the CSS Styles panel and then Create a new CSS rule for body tag.
- Go to background category. in the background image, fill the gradient image you just created in photoshop and then click apply. Select repeat x in the repeat dropdown menu and then clik apply. Select the bakground color and then click the bottom of image to fill background image.
If you have finished, Save your document ( CTRL+S ) and then open your HTML document with your browser.
If you have finished. The next, save your document ( CTRL+S ) and then open your HTML document with your browser. If you doing it correctly, your web page will appear such us shown below :
If you have finished. The next, save your document ( CTRL+S ) and then open your HTML document with your browser. If you doing it correctly, your web page will appear such us shown below :
