untitled
viviti


Tutorial #8 : Simple gingham backgrounds

It's usual to have two or three different tiled backgrounds for a pixel iFrame site; one of the most popular background tiles is a gingham (checkered) effect. Once you have made your backgrounds you can learn how to build your site from tutorial #6 on this site.

Step 1 : Decide on your general colour scheme. When I made the set for this site I decided to use blue and white; my White Rose Fairy Pixels site uses green and cream. (Neither set is built in iFrames but the background tiles could be used on an iFrames site.) You can use absolutely any colour combination you like, it is entirely up to you if you want to use black, orange and purple, but for the purposes of this tutorial I am going to use a set of three toning colours.


Step 2 :Open a new image 30 pixels x 30 pixels and zoom in so you can see to work on it : depending on your screen size and resolution, this could be as much as 1000% or even more. Set your paintbrush tool to shape square, size 15 pixels, step , hardness, density, thickness and opacity all 100 and rotation 0 on the Tool Options palette (click F4 if it isn't visible.) Place 4 "dots" with your 15 pixel square brush - one in each corner of the square, with the darkest colour top left, lightest bottom right and mid colour in the other two corners (screen grab #1.) Save this image as a plain gingham tile.

Step 3 : If you would like the gingham squares tobe decorated, with the effect of simple embroidery, set your paintbrush size to 1 pixel (leave all other settings unchanged) and draw simple designs (hearts, flowers, stars etc.) in the contrasting colours on each square, pixel by pixel (screen grab #2) You can decorate one corner, diagonally opposite corners, or all four. When you are happy with your design, save this tile too, under a different file name.

Screen grab #3 shows some more ideas for simple designs suitable for a 15 pixel square.

            
Screen grab #1                    Screen grab #2                                 Screen grab #3                 

These tiles will form a complete gingham background or border when used on a web page.



* * * BACK * * * HOME * * *

 

copyright © 2007 Dianne G. Davies, all rights reserved.


 


Web Hosting · Blog · Guestbooks · Message Forums · Mailing Lists
Easiest Website Builder ever! · Build your own toolbar · Free Talking Character · Email Marketing
powered by a free webtools company bravenet.com