Welcome to Moonlit Night Tutorial

To Complete this Tutorial You Will Require:

PSP 8, 9, or 10

Filters:
Ulead Particles Filter
Filters Unlimited 2.0
The following Zip File
Here
The zip contains a gradient, place in your gradients folder of your psp 8,9 or 10.
The tree tubes can be found Here I used wisteria 3 and 12. She also has one owl Here
You will require an owl tube
and a sitting lady tube

This tutorial Shows how to create a web page template or a letter (Stationery) Background....plus a tag.

This tutorial has been created in both psp 8 and 9 and 10. Thus directions are not given to locate your tools. You will need to be familiar as to where your tools are located within your own program. You will also be required to have advanced knowledge of psp and some of html. If you need additional help with html a great place and easy to read is Lissa Explains. Her pages were written for children. Not that I am saying anyone is a child, but to learn html it is a great starter. I use it!

Now, do I really need to explain anything regarding rights of use of this tutorial? I think by now we all know copy write rules, if not read a few other tuts they explain it very well. I say..All rights reserved meaning you have no right to copy this tutorial in part or whole to use for another tutorial or for any other purpose. You do have the rights to do as you please with what you create. I give all groups the rights to create from this tutorial without permission.

Lets Begin:

Open a new image 500 w x 220 h. transparent.

Set your foreground materials to gradient and locate the gradient provided called moonlit_artc. Choose sunburst, repeats 2, horizontal 51, vertical 40. Flood fill your image. Selections tool, circle. Feather 4, antialias checked. Locate the very center of your gradient and pull out to just beyond the first yellow ring. Gaussian blur 10. Invert. Below is what you should have so far.

Plugins, Filters Unlimited, Distortion Filters, Smelter 1. Set intensity to 65. Apply. Gaussian blur 21. Brightness and contrast, Brightness (negative) -21, contrast 20. Select none.

You should now see your moon.

Plugins, Ulead Effects, Particles. At the bottom of the filter you will see the word load, click it. Scroll down to cloud 4. Click ok. Then near the bottom click wireframe. Now using your mouse move the light white cloud under the cloud infront of the moon. Follow below.

If your not sure wether you selected the right squares deselet wireframe, you should be able to view your clouds before you apply them. Once your satisfied, click ok. Here is what you should have.

Looks pretty cool eh?

Open your tree tubes. Resize them to a size that looks realistic 50% is what I used. Copy them and paste them as a new layer. Duplicate the thin branch wisteria 03. Take one branch and mirror it. Take the other copy, rotate freehand 90degrees to the right if you require a branch for the owl to sit on. Place as follows keeping in mind the image below has been cropped and that a mask will cover the end of the branch.

Now opening your layer palette, and on each brach layer adjust the brightness and contrast, same setting.

Open your owl tube and resize him to approximately the same size as shown above. Now I moved the sideways branch to place under his claws.

When your happy with your background merge visable.

Change your foreground materials to colour #8693A2 and background colour to black. Add a new raster layer and flood fill with your foreground colour. Plugins, Filters Unlimited 2.0, Render. Clouds Foreground-background color. Change the gamma to 157. Apply.

Load masks, find mask 155, Source luminance, fit to canvas, show all mask, invert transparency checked. Apply. On your layer palette locate group raster, merge group.

If creating the tag, paste a second owl or another tube and make it face the other owl. Place to the right. Merge visable. Texture, blinds, Change the settings to width 3, opacity 23, both horizontal and light checked, colour black and apply.

If your creating the tag, apply text and watermarks, add a border of 2 pixels black if desired.

Now you can create the tag, save, but do not close if you want to create the web page template or stationery. Just hit your undo button until you are back just before where you pasted the second owl.

Now that your back to just the single owl, merge visable. Then apply the blinds effect and minimize this image for now.

Create a new image the width of the screen you desire, either 1024 or 800, and height of if your creating the template 400 or 800 if your wanting to create a static scrolling stationery, meaning no movement of background.

Flood fill with colour #F4F5F6 or the colour you would like your main writing area to be. I like my writing to be seen so I often use a light colour. You can texturize your background if desired. Filters Unlimited 2.0 has some great paper textures to apply.

Open your owl image you created, copy it and paste it as a new layer. Move it to the top of your image but not touching the top, reason you will be applying a bar up there. Change your foreground back to colour black and background to #8693A2. Take your preset shapes tool, rectangle, settings create as vector, line style diamond, width 2. Click on your bottom layer, the one you flood filled. Now draw a rectangle the entire width of your new image either 1024 or 800. The height the size of your owl image.

Take your magic wand, select the center. Plugins, Filters Unlimited 2.0, render same cloud effect as previous. You may need to readjust your gamma again. Apply. Select none.

Apply the same blinds texture. Now if your new clouds does not align perfectly with your owl image dont fret. We are going to add a bar. But to make this we need to create it seperately.

Minimize your image again, Create a new image width either 1224 or 1000 depending on the width of what you are creating and height 20 pixels. Flood fill this layer with colour #8693A2. Apply an inner bevel of your choice. Copy this image then delete. Paste this as a new layer as the top layer, then position it under the owl image. When your happy duplicate this and move the second bar to the top, above your owl image.

Copy and paste your owl tube, resize, mirror and apply facing the first owl but position him to the right and standing on the bottom bar. Turn off your background layer. Click on a layer above this one and merge visable. Your bottom layer should not be merged, yet all above now should be.

Take your selection tool, rectangle and select your owl image and the cloud image. Plugins, Ulead Effects, particle. Load, stars 2, just as you did before, click ok. Then on the main panel, Reduce the size, the top slider to 20, then click wireframe and move one stat to the right panel way behind the first owl, and another to the left behind the second owl, then make certain none of the stars are positioned ontop of either owl and apply.

We are getting there. Almost done.

Turn on your background layer, change your background colour to #325D5D and take your preset shapes tool and draw a rectangle the width of the left panel beside your original owl image. That is approximatel 150 pixels. Convert to raster. Apply the blinds texture. Now if your creating a stationery you may add a tube to the side border if desired. You are done. If your creating a template, continue.

Turn off your owl image, the top, windows duplicate. Take your crop tool and select an area the width of your entire image and an area where the side border shows no higher than approximately 100 pixels. Move the side bars out as far as you can to make certain you have the entire width selected. Crop. Turn back on the top where the owl image is, and delete.

On the original image turn back on the top and merge flatten. Take your crop tool and select just below the tail of your second owl , plus approximately 50 pixels down to add text, and the width of your entire image. Crop. Now you have two images. The one without the top is your actual background, and your top image. Now in this top template image I am not cropping any further. To learn how to create web pages takes time. So lets take it a step at a time. But we will dice the background just in one place.

Lets first add text to the topper. Then add any watermarks. Merge flatten and save. You can now delete this image.

For the next steps, follow image above. Now take your background and according to psp 8,9 file, export, image slicer. First hit the button with this # on it, then click on your image, a file will open with row, and column written on it, enter 1 as row and 2 as column. Apply. Then click on the button with the arrow on it. You will see a box surrounding your image plus a vertical line, hold your mouse over this vertical line until you see a double arrow then slide this line over to the left where you placed the side border. You can actually name each slice if you like as side border and main bkg. Where to do this would be under alt text or you can leave blank. You can also enter the name of your webpage if you have your web page set up. Now you can change image save as. You can change it from a gif to jpg. This is entirely up to you. But to know where to do this, according to the image above, it is area 4. To save click save as, enter a name, remember where you save this to. Then click save. Now to create this into an actual web page, just open the html the image slicer created and follow the html coding below:

(TD ROWSPAN="1" COLSPAN="1" WIDTH="650" HEIGHT="93" background="moonlitbkg_plain_1x2.gif" WIDTH="650" HEIGHT="93" BORDER="0")

Where there are ( replace with < and >.

Do this for both the side border and the main writing area. This is only applied to the bottom two slices.

Your done!

More Designs from this tutorial:

 

Tutorial and graphics © 2005 ArtC
All rights reserved.