How to create background pattern using photoshop

This pattern is used as background in webpages
how-to-create-a-pattren-in-photoshop-img-1

After Creating New document 5x5 pixels document,
Press ctrl+0 to fit on screen
how-to-create-a-pattren-in-photoshop-img-2

Make a selection using rectangular marquee with add selected in tool options
how-to-create-a-pattren-in-photoshop-img-3

Create a New layer (Ctrl+Shift+N)
Layer>create New layer
how-to-create-a-pattren-in-photoshop-img-4

After creating new layer fill foreground color (grey) alt+backspace
how-to-create-a-pattren-in-photoshop-img-5

Now goto select menu> deselect (Ctrl+D for deselection)
how-to-create-a-pattren-in-photoshop-img-6

Now fill color in background layer also
How to select color from color picker
click on background color to open color picker and select color by moving color picker
how-to-create-a-pattren-in-photoshop-img-7

Now fill background color (Ctrl+Backspace) in Background layer
how-to-create-a-pattren-in-photoshop-img-8

Now we will save this file in jpg or png or gif format to use as Background in web pages

CSS:
body {
    background-image: url("images/bg.jpg");
    background-repeat: repeat;
}

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment