Home
Scrapbook
Information / FAQ
Terms Of Use
Contact Me


:||: Petz :||:

:: Adopt ::
Trading Post
Submissions

:: Shows ::
Enter / Rules
Current Entries
Winners

:: Lists ::
Call Names
Show Names
Show Listings
Birthday

:: Graphics ::
Stamps
Quilt Racks
Quilt Squares
Templates
Textures
Guardians
Trinkets


:||: Tutorials :||:

:: For Petz ::
Creating Graphics
Making a Website

:: For Artists ::
Drawing Form
Perfecting Details
Computer Art


:||: Information :||:

:: For Petz ::
Adoptions
Breeding
Hexing
Show Posing
Showing System


:||: Miscellaneous :||:

Win-a-Site
Site Review
Requests


:||: My Other Sites :||:

Shepard's Journal
Willowbark Café
Carnival




~ How to Make a Picket Fence ~



~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Basics: Plain and Simple
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1. Create a brand new, transparent image. At this point in the process, size is not that much of an issue - and is really only limited by the height and legnth of the fence of which you intend to build. For the purpose of this tutorial, I'm going to make mine about 289px by 145px. It'll be cropped down later ;)

2. Now, go up to the color pallet and choose the color that shall be used for the main border. Lets do a brown fence. Pick the color #7b643f. It should show up in the first swatch.

3. Use the paint brush tool and draw the outline of ONE post. Below is a blown up version of what I've got so far:


The Pattern:

Step A - Place 1 pixel at the top
Step B - Put 1 pixel on either side, one row down
Step C - Repeat Step B for the next row
Step D - One row down, draw two vertical lines (38px)
Step E - At the base, connect the two lines (7px)


4. Next the fence needs to be filled in with a wood grain pattern. Though this can easily be done with a gradient or texture, it looks more natural just to make a filling from scratch. To save a little time, start by taking the magic wand and selecting the interior of the post outline. It's very important to make sure that until step 9, the ants are NOT deselected; otherwise it will be hard to get them back when you need them!

5. Click on the flood (fill) tool . At this time, it would also be wise to choose the color that the main body of the fence is going to be. For this model, I'm going to use #d5bb90. Flood the inside of the post :)

6. To give the "woody" effect to the fence, we need to "stain" it a bit. Choose the burn brush from the menu on the left and apply these settings: Opacity (100), Rotation (0), Thickness (100), Density (100), Step (25), Hardness (50), Size (2), and a circular shape.

7. In a way, using the burn tool is like adding shadow. The method I use is generally to start off by shading a rough half of the post, and then using short vertical strokes to add smaller darker pockets. Play around a bit; experiment and have a little fun :)

8. Sometimes the burn brush is all you need to make a believable effect. However, depending on your taste, a more pixelated version may work better. To do this, simply add noise ( Adjust > Add/Remove Noise > Add Noise... ) with the following settings: Monochrome (checked box), Gaussian (checked bubble), and Noise Percent (about 5-8%).


9. Deselect the magic wand (Selections > Select None). Congrats, the first post is finished!

10. To make the remainder of the fense, duplicate it (Ctrl + C) and paste as a new layer (Ctrl + L). Use the move tool to place it next to the original post, preferably with one pixel overlapping.

11. Repeat step 9 as many times as you wish... it all depends on the length you want. A word of caution: For long fences, be sure to name all the layers (post 1, post 2, etc.)! With so many parts and pieces, it can be confusing to find the right one to work with otherwise.

12. Because we arn't making a solid fence, a few of the extra posts need to be done away with. Delete the layers of every other one, so that there will be equal spacing. In the image below (which is to scale), the posts with the black X's on them should be removed.


13. Merge all visible layers, keeping the background transparent.

14. The back of the fence is fairly easy to do. First, make a new layer (call it something like "Back 1").

15. Next, using the paint brush (or the preset shape tool), construct the outline of a rectangle roughly 6 pixels in height. The length should be about that of the fence (or just slightly longer).


16. Fill in this rectangle in the same way the first post was done (steps 4-9). Don't forget the magic wand! When it is completed, move the layer to the very back.


17. Almost done :) Now, duplicate this layer and move it so that it matches up with the top board horizontally, but is placed near the bottom.

18. Last, but not least, merge all the layers together, do a little cropping, and save as a .gif ----> Fini!



Where to?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Adding Extras
Design Variations
Picket Fence Gates

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Back to Graphics Tutorials



PixiMystTM and all site content Copyright © 2004 - 2008 A.M.Wong
Best viewed in 1024 x 768 pixels