Versatile Creations

Welcome to Versatile Creations

2025-12-06T17:43:00.003-05:00

Hello and welcome to Versatile Creations. This site is dedicated to your web designing needs. Hope you find it useful and enjoy your stay!

Note: I have started adding some Myspace codes. All have been tested and I have used personally. They work if you install them correctly. Have any questions leave it in the comments section.

*The cool abstract image that I used in the banner is called Optical.Suicide by Michael Baberick.* I normally do my own abstracts but this one was the right color and design for my taste.

Big thanks to Lithosphere for the beautiful link banner! Thanks litho!

Updates

2025-07-15T14:17:00.002-04:00

Here you will find a list of updates added this month to the site:

August 31, 2009 - Added Editing Video Clips in Windows Movie Maker Section
August 8,2008 - Added No Border Around Your Extended Network in Myspace Codes
August 2, 2008 - Added section Myspace Tutorial with how to make your own Myspace layout
April 30, 2008 - Added Tutorial Help Forum
April 1, 2008 - Added Flip Profile Page & Resizing Comment Images and Text in Myspace Codes
March 31, 2008 - Added Hover Codes in Myspace Codes
September 12, 2007 - Added Custom Friends Space in Myspace Codes
September 12, 2007 - Added Hide View/Edit Comments in Myspace Codes
August 22, 2007 - Added Place image in Extended Network in Myspace Codes
August 22, 2007 - Added Scroll Friends and Comments in Myspace Codes
August 11, 2007 - Added Music Videos located in the main menu
August 09, 2007 - Added PS Tutorial - Website Made in PS Parts 1 2 3
August 06, 2007 - Added Picasa Web Album for Renders

Versatile Creations Archives

2025-06-13T16:23:00.000-04:00

This site will contain things from my older website that I had made years ago. I had sworn that I would not rebuild the site again because it took too much time out of my life. So as of now, I don't forsee any new tutorials being written, instead I will post the older ones that I have saved on my hard drive. I realize that programs have changed and upgraded, but if you find yourself with Photoshop 7 or Paint Shop Pro 7 and wanting some different tutorials or downloads, then this site may be for you. I will gradually add what I have on this site when I can. Enjoy!

Please note that if you have a question about a tutorial, go on that tutorial and scroll to the bottom and you can ask your question by clicking on comment.

Editing Video Clips

2009-08-31T20:09:00.054-04:00

Here is a tutorial showing how to edit a video clip. What you will need is:
1. Windows Movie Maker (I will be using version 5.1)
2. A video clip in the proper format. You can import files with the following file name extensions into Windows Movie Maker to use in your project. If you need to convert your video into one of the proper formats below, you can use a free online media converter located here: http://media-convert.com. This is nice because you don't have to download any software.

Audio files: .aif, .aifc, .aiff .asf, .au, .mp2, .mp3, .mpa, .snd, .wav, and .wma
Picture files: .bmp, .dib, .emf, .gif, .jfif, .jpe, .jpeg, .jpg, .png, .tif, .tiff, and .wmf
Video files: .asf, .avi, .m1v, .mp2, .mp2v, .mpe, .mpeg, .mpg, .mpv2, .wm, and .wmv

Let's Get Started!
I will be doing step by step instructions and I will use images to show each step, just click on each image and it will open a new window to see a larger image of that picture. Things highlighted in yellow is what you are looking for.

I am using a video clip in .wmv format. Open up the Movie Maker, and in the left hand menu under Movie Tasks, click on Import Video as shown highlighted in yellow in the image below.

*Note If for some reason that there is no Movie Tasks shown up on the left hand side as shown below, do this, go to View (located at the very top menu) and then select Task Pane and this will bring up the appropriate box.

Browse to find your video clip and it may take some time depending on the size of the video for the it to load up. Once it is loaded up, Movie Maker will break the video clip down into different parts. As shown below:

*Note if all you do not see thumbnails of your video and you just see filename, you can change it to view in thumbnails by going to View in the top of the menu and select Thumbnails.

For some reason, some videos may show actual thumbnails of your video and sometimes it won't. For instance if you look at the image shown above, I have it set to show in thumbnails but it is not giving me an image to view. It's fickle like that, I like when it does show, it's easier to work with. In either case, we can click on a thumbnail and it will show in the player on the right. You can watch this one video clip in the player. Now this is where things can get a little complicated to explain since you can do this different ways. I am going to explain two ways that I know how. So when you are done with the way you choose then skip down to the part where it shows how to edit your video.

WAY #1
This first way is more extensive and has many more steps to it.
Go through and find the video that you want to start with by viewing them in the player on the right.

Now click on it and drag it to the bottom of the screen in the section that says Video. It should look similar to what I have shown below:

Note that the length of your video clip may be shorter or longer than what I have shown. Also, if the bottom of your screen does not look like mine, you can change the view at the bottom above the clips where it says Show Timeline. This will change it to where you will be able to work with it better.

Chances are you are not done so repeat the steps with the other clips and you can put it right beside the one you just added at the bottom. Example shown below:

Now you are ready to edit your video.

WAY #2

Here is the other way I was talking about you could do, it is actually must faster.
Now you will see some thumbnails and you want to just merge them all together and work with instead of having to work with a bunch of small clips. Go to Edit at the top of the menu and then choose Select All. This will highlight all the clips, then go to Clip in the menu at the top of the screen, and then choose Combine. Now you only have one clip to work with. You can either drag the clip on the timeline or you can right click the clip and choose Add to Timeline. Now you are ready to edit your video.

EDITING YOUR VIDEO
Now you may be finished with your video and don't need to do any effects so if you are then skip ahead to saving your video section. Ok now, you have different options to choose from:

Remove an unwanted clip - Say by mistake you dragged a clip that you did not want and need to remove. Just left click on the clip and select delete to remove the clip.

Add video effects - First off, let's change our view in the bottom to Show Storyboard , located just above your clips you dragged at the bottom. Then check out the video effects in the left hand side and choose which one you would like. To preview what the effect will be, click on the transition and then click on the play button in the viewer to see. To apply to a clip or all clips, you will have to do this one by one, click and drag the video effect that you desire ontop of the clip for it to apply. If for some reason you want to remove the effect, just right click on the star located at the left hand bottom of the clip and select Delete Effects. You can preview this in the viewer on the right.
Look at the example below:

Add video transitions - First off, let's change our view in the bottom to Show Storyboard , if it's not already there. It's located just above your clips you dragged at the bottom. Then check out the video transitions in the left hand side and choose which one you would like. To preview what the transition will be, click on the transition and then click on the play button in the viewer to see. To apply to a clip or all clips you will have to do this one by one, click and drag the video effect that you desire in the box between each video clip. If for some reason you want to remove the transition, just right click on the star located at the left hand bottom of the clip and select Delete.
Look at the example below:

Trimming your clips - Say you wanted to edit one or more of the clips you have dragged. Now switch views to Show Timeline, if it is not already there. This is located just above your clips you dragged at the bottom. Now click on the clip you want to trim and then click on the play button and watch and listen for the place that you want to trim. You can use the slider in the player to move it forward or back, or use the blue slider that goes over the clips in the bottom to move it to your desired point to trim. Now let's locate the trim option, go at the top of your screen in the menu and locate Clip, then select either Set Start Trim Point or Set End Trim Point Now. Get ready to trim it, you can trim the video one of two ways, trim before a clip or trim after a clip.

I'm not going to go into the other thing you could do by Making Titles and Credits. Just get in there and play with the settings. It gives you the option to add a title at the beginning of the movie, add a title before the selected clip in the timeline, add a title on the selected clip in the timeline, add a title after the selected clip in the timeline or add credits at the end of the movie.

FINISH MOVIE
Now if you are done editing your movie, it would be wise to play it all back to see if it is how you wanted it. To do this click on the first clip in the timeline and click on Play Timelineto preview your new clip. If you are satisfied with your movie then you can save it to your computer. Do this by going to the left hand side and under Finish Movie and click on Save To My Computer. You need to name your movie and browse where you want to keep it. Now you have successfully edited a video clip to your liking!

If you have any questions or comments, feel free to leave them in the comments by clicking on the word comment below:

Keep for examples

2008-08-08T00:38:00.023-04:00

This is way cool.

Flip Vertically

Flip Horizontally

Pixellate

Blur

Hover Image Filter: Engrave

This is the filter for when hovering over an image, it engraves.

Image Effect Sample

HTML Code

Paste the following code into the "About Me" section of your profile.

No Border Around Your Extended Network

2008-08-08T00:23:00.004-04:00

No border around your extended network code.
Copy and paste in your About Me section.

<style>
table.extendednetwork,
td{border:0px;}
</style>

Myspace Scenic Layouts

2008-07-24T09:37:00.010-04:00

Below are some layouts I posted that I have made for Myspace. Not all of the backgrounds in these layouts are ones that I have made. Some of the backgrounds used was collected from various wallpaper sites and some I have made myself. So I do not take credit for all of them. Also, some of the images that I used in the layouts, for example the icons, where collected from several different websites on the web. If you have any questions how to use these layouts or if there is a problem with them, please post them here.

When you click on the thumbnails it will take you to a live preview. Look on the preview page for the code in the box. You need to copy the code and paste it in your About Me section.

The reason why you see double of the same layout is because there is one version that has comments and the other does not.

Resizing Comment Images and Text

2008-04-01T05:36:00.002-04:00

If you have any questions or comments about these myspace codes, please post them here.

Resizing Comment Images and Text
One thing you need to know about this is that Myspace has a feature that you can able or disable preventing large comments from stretching your page. To check to see what it is set on you can find it under Account Settings - Miscellaneous. Under Comments Stretching.

If you have the new feature enabled, you can use this new code to control the images sizing, but it will make all images in your comments the same size.

<style>
.a {resize comments images and videos}
.columnsWidening object {width:254px; height:213px;}
.columnsWidening img {width:300px;}
</style>

If you have the new feature DISABLED (enabled is the default setting) then you can go back to using the old code for resizing image comments:

<style>
.a {resize comments images and videos}
.a {must disable myspace code to use this}
.columnsWidening object {width:260px; height:213px;}
.columnsWidening img {max-width:260px; _width:260px;}
</style>

Flip Profile Page

2008-04-01T05:23:00.004-04:00

If you have any questions or comments about these myspace codes, please post them here.

To flip your left column over to the right, place this code in your About Me section. Please note that if you have wide things in your comment section you will lose the horizontal scrollbar at the bottom of your page, and half of your profile wont be able to be seen. So make sure to use the Resize Comment Images and Text below.

Flips Profile Left to Right
<style>
.a {flip the page}
.NavigationBar {position:relative; z-index:9;}
table table {direction:rtl;}
table table table {direction:ltr;}
</style>

Resizing Comment Images and Text
One thing you need to know about this is that Myspace has a feature that you can able or disable preventing large comments from stretching your page. To check to see what it is set on you can find it under Account Settings - Miscellaneous. Under Comments Stretching.

If you have the new feature enabled, you can use this new code to control the images sizing, but it will make all images in your comments the same size.

<style>
.a {resize comments images and videos}
.columnsWidening object {width:254px; height:213px;}
.columnsWidening img {width:300px;}
</style>

If you have the new feature DISABLED (enabled is the default setting) then you can go back to using the old code for resizing image comments:

<style>
.a {resize comments images and videos}
.a {must disable myspace code to use this}
.columnsWidening object {width:260px; height:213px;}
.columnsWidening img {max-width:260px; _width:260px;}
</style>

Myspace Hover Codes

2008-03-31T20:41:00.006-04:00

If you have any questions or comments about these myspace codes, please post them here.

To use this on ALL images (including images that are links), place this code in the "About Me" section of your profile.

Flip Vertically - This makes your images flip vertically when the mouse hovers over them.
<style type="text/css">img {none; } img:hover { filter: FlipV; } a:link img { filter: none; } a:hover img { filter: FlipV; }</style>

Flip Horizontally - This will flip your images horizontally when the mouse hovers on them.
<style type="text/css">img {filter: none;} img:hover { filter: FlipH; } a:link img { filter: none; } a:hover img { filter: FlipH; }</style>

Pixelatte - This will pixelatte your images when the mouse hovers on them.
<style type="text/css"> img { filter: none; } a:hover img { filter: progid:DXImageTransform.Microsoft.Pixelate (maxsquare=4); } </style>

Blur - This will make images on your profile blur when the mouse hovers on them.
<style type="text/css"> img { filter: none; } a:hover img {filter: blur(add=false, direction=135, strength=10);} </style>

Grayscale - This will make images on your profile turn to grayscale when the mouse hovers on them.
<style type="text/css">img {filter: none; } img:hover {filter:gray} a:hover img{filter:gray}</style>

Alpha Channel - This will give all of the images on your page a circular transparency when the mouse hovers over them.
<style type="text/css">img { filter: none; } img:hover {filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);} a:link img { filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0); } a:hover img { filter: none; }table td div div font {visibility:hidden;}</style>

Invert Colors - This will invert the colors of the images on your profile when the mouse hovers over them.
<style type="text/css">img {filter:none;} img:hover { filter: invert; } a:link img { filter: Invert; } a:hover img { filter: none; }</style>

X-Ray - This will give your images an X-Ray appearance when the mouse hovers over them.
<style type="text/css">img {filter:none;} img:hover{filter:xray;} a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray;} a:hover img { filter: xray;}</style>

Double Background

2008-03-27T21:06:00.016-04:00

Animated or Strobed Bg

2008-03-26T14:51:00.014-04:00

Myspace Skinny Layouts

2008-02-21T13:25:00.010-05:00

Myspace Polka Dots Layouts

2008-02-21T09:06:00.012-05:00

Below are some layouts I posted that I have made for Myspace. Not all of the backgrounds in these layouts are ones that I have made. Some of the backgrounds used was collected from various wallpaper sites and some I have made myself. So I do not take credit for all of them. Also, some of the images that I used in the layouts, for example the icons, where collected from several different websites on the web. If you have any questions how to use these layouts or if there is a problem with them, please post them here.

When you click on the thumbnails it will take you to a live preview. Look on the preview page for the code in the box. You need to copy the code and paste it in your About Me section.

These layouts below are not showing properly in the live preview. The interest's section isn't showing up the correct color but it does show up right when you use it in myspace. I have tested it. If it doesn't show up for you, please leave me a comment here. Thank You!

Myspace Stripes Layouts

2008-02-21T09:01:00.007-05:00

Myspace Abstract Layouts

2008-01-21T02:07:00.005-05:00

Below are some layouts I posted that I have made for Myspace. Not all of the backgrounds in these layouts are ones that I have made. Some of the backgrounds used was collected from various wallpaper sites and some I have made myself. So I do not take credit for all of them. Also, some of the images that I used in the layouts, for example the icons, where collected from several different websites on the web. If you have any questions how to use these layouts or if there is a problem with them, please post them here.

When you click on the thumbnails it will take you to a live preview. Look on the preview page for the code in the box. You need to copy the code and paste it in your About Me section.

A special thanks to my friend Liam, aka. Ls Dark for letting me use his abstracts in some of these designs.

Myspace Default Layouts

2008-01-14T23:12:00.041-05:00

Below are some layouts I posted that I have made for Myspace. Not all of the backgrounds in these layouts are ones that I have made. Some of the backgrounds used was collected from various wallpaper sites and some I have made myself. So I do not take credit for all of them. Also, some of the images that I used in the layouts, for example the icons, where collected from several different websites on the web. If you have any questions how to use these layouts or if there is a problem with them, please post them here.

When you click on the thumbnails it will take you to a live preview. Look on the preview page for the code in the box. You need to copy the code and paste it in your About Me section.

These layouts below are not showing properly in the live preview. The interest's section isn't showing up the correct color but it does show up right when you use it in myspace. I have tested it. If it doesn't show up for you, please leave me a comment here. Thank You!

Contact Me

2007-09-23T17:32:00.000-04:00

*If you have a popup blocker installed, please press either ctrl or shift while clicking on the submit button. You will need to type in a code in order to send your message. Thank You for your submission!

Link Us

2007-09-20T10:57:00.000-04:00

Feel free to use our banners below to link us. Please do not hotlink. Thank You!
Let us know if you link us & we will gladly return the favor! Click here to contact us.
http://versatilecreations.blogspot.com

Hide View/Edit All Comments Section

2007-09-11T22:55:00.001-04:00

If you have any questions or comments about these myspace codes, please post them here.

If you want to hide where it says Displaying XX of XX comments (View/Edit All Comments) section. Put this code in either the About Me or Who I'd Like to Meet Section.

<style>
td.text td.text table td b a {
display: none !important;
visibility: hidden !important;
}
td.text td.text table td b {
display: none !important;
visibility: hidden !important;
}

</style>

Custom Friends Space

2007-09-11T21:51:00.001-04:00

If you have any questions or comments about these myspace codes, please post them here.

Below is the code to make a custom's friends list, with a custom comment box and scrollable comments. This can be a bit complex so some html knowledge would be helpful. If you have any questions, you can leave it in the comment section at the end of this tutorial & I can try and help. Please note that I have not tried this out in any other browser except for IE and it works fine in it. I actually took this code from a generator that I used from Skem9.com and then added a code to fix a problem they had in IE that was showing the view/comments section. For some reason it kept getting cut off. And then I added a custom made comment box. So I took codes from here and there to make it work. I actually forgot where I got the comment box code from and I found the fix in a forum somewhere.

Put this code in your Who I'd Like to Meet Section.

Note: Remove any codes that center or hide the friends, comments, blogs, or codes that customize your details! If you don't, your old friend's list will remain intact after you use this code.

Note: This version does not show your friends online status.

Things that must be changed will be found in red in the code. Things that are optional to change can be found in green.

1. You will need to provide your own information where the code is needed. Below is a list if you do not know where to get this information:

URL (address) your friend's profile

Internet Explorer: Right-click your friend's link to their profile and click "Copy Shortcut." Then paste it (Ctrl-V) where it needs to go.

Firefox: Right-click your friend's link to their profile and click "Copy Link Location". Then paste it (Ctrl-V) where it needs to go.

URL (address) your friend's picture

Internet Explorer: Right-click the picture you want to use and then click "Properties." Copy the URL that is shown in the box that pops up and then paste it (Ctrl-V) where it needs to go.

Firefox: Right-click the picture you want to use and click "Copy Image Location," then paste it (Ctrl-V) where it needs to go.

2. You can change what it says when it calls for your name to whatever you like. Also you will need to add the number of friends you have. If you don't want it to say the number of friends, you can put whatever you want to say there or simply omit that part to say nothing. Be careful when omitting because it may omit something that was important to keep. So please get in a habit of making backup copies in notepad.

3. You can change the width and height sizes. Just search through the code to find where. You can also change the color of the form box from white to any color in the comment box.

4. This is a custom list for 8 top friends. You can increase this by making a new row. To do this, look where it starts with row 2 and I purposely added a space in between where you need to copy from. Start at what looks like this:

<tr align="center" class="row2">

and then highlight everything in between to where it stops here:

src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
</tr>

You now need to change the row number to 3. Obviously you would repeat this step if you wanted more rows. Then you would paste it below what you just copied.

<START CUSTOM FRIEND SPACE />
<style type="text/css">
td.text td.text table table table,
td.text td.text table br,
td.text td.text table .orangetext15,
td.text td.text .redlink, .rid br,
td.text td.text span.btext {display:none;}
table[id*="Friends"] {display:none;}
td.text td.text table td, td.text td.text table {height:0; padding:0; border:0;}
td.text td.text table {background-color:transparent!important;}
td.text td.text table td {font-size:0;}
td.text td.text {height:0;}
.r4wr table table table {width:auto!important}
l{note: change "8" to suit your needs if your comment text seems smaller or larger than usual}
td.text td.text table b, td.text td.text table table td {font-size:8pt;}
l{note: comment padding fix;}
td.text td.text table table td {padding:3px;}
td.text td.text table table br {display:inline;}
l{note: scrollable comments;}
.rid {display:block; width:440px; height:400px; overflow:auto;}
td.text td.text table td b a {
display: none !important;
visibility: hidden !important;
}
td.text td.text table td b {
display: none !important;
visibility: hidden !important;
}

</style>

<a href="http://www.msplinks.com/MDFodHRwOi9mcmllbmRzLnNrZW05LmNvbQ==" class="fs"></a></td></tr></table></td></tr></table><br><div class="r4wr">
<table border="0" bordercolor="000000" cellpadding="2" cellspacing="0" width="440"><tr><td>
<table width="440" cellpadding="0" cellspacing="0"><tr>
<td width="100%" height="20" bgcolor="ffcc99" align="left">
<span class="orangetext15" style="display:inline"> YOUR NAME HERE Friends</span>
</td></tr>
<tr><td colspan="4" width="100%" align="left"><span class="btext">I have <span class="redbtext">8</span> friends.</span></td></tr><tr>
<td>
<table align="center" border="0" cellpadding="5" cellspacing="0" width="100%"><tr align="center" class="row1">
<td align="center" valign="top" width="1" class="col1"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col2"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col3"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col4"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
</tr>

<tr align="center" class="row2">
<td align="center" valign="top" width="1" class="col1"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col2"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col3"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
<td align="center" valign="top" width="1" class="col4"><table align="center" border="0" cellspacing="0"><tr><td align="center" valign="top" width="107"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE">YOUR FRIENDS NAME HERE</a></td></tr><tr><td align="center" valign="top" width="25%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=YOUR_FRIENDS_NUMERICAL_ID_HERE"><img src="http://FRIENDS_PICTURE_URL_HERE.jpg"></a></td></tr></table></td>
</tr>

</table>
</td>
</tr><tr align="right" valign="center"><td>
<a href="http://www.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=YOUR_OWN_NUMERICAL_ID_HERE&userName=YOUR_USER_NAME_HERE" class="redlink">View All of My Friends</a></td></tr><tr align="right" valign="center">
<td bgcolor="ffffff"><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=YOUR_OWN_NUMERICAL_ID_HERE&userName=YOUR_USER_NAME_HERE">View/Edit All Comments</a>
</td></tr></table></td></tr></table></div><br><div class="rid"><table style="display:none"><tr><td><table><tr><td>
<END CUSTOM FRIEND SPACE />

</td>
</tr>
</table>
</td>
</tr>
</table>
<br>

<table bordercolor="ffcc99" cellspacing="0" cellpadding="0" width="435" bgcolor="ffcc99" border="0">
<tr>
<td class="text" valign="center" align="left" width="300" bgcolor="ffcc99" height="17" wrap="" style="word-wrap:break-word">
<span class="orangetext15">
Comments
</span>
</td>
</tr>
<tr>
<td>
<table bordercolor="ffcc99" cellspacing="3" cellpadding="3" width="435" align="center" bgcolor="383838" border="0">
<tr>
<td valign="top" align="left" width="435" bgcolor="383838" style="word-wrap:break-word">
<center>
<table>
<tr>
<td align="center">
<form method="post" action="index.cfm?fuseaction=user.ConfirmComment"style="display:inline;">
<input type="hidden" name="friendID"value="PUT IN YOUR FRIEND ID">
<textarea name="f_comments" cols="30" rows="4" style="background-color:ffffff; border-width:0px; border:0px; color:ffffff; font-family:verdana; width: 265px; height:84px;"></textarea><br>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Post Comment">
</form>

Scroll Friends & Comments

2007-08-22T18:42:00.001-04:00

If you have any questions or comments about these myspace codes, please post them here.

To put your friends and comments together into a scrollable box. Place the code below in any section. Note that you will need to adjust your width and height to suite your needs.

<style>
.friendsAndComments {overflow:auto; width:435px; height:500px;}
</style>
</td></tr></table>
</td></tr></table>
<div class="friendsAndComments">
<table style="display:none;"><tr><td>
<table><tr><td>
</style>

If you want to position the contents to somewhere else on your site. Place this code anywhere in your sections. Remember to adjust the Top and Margin-left only to move it around

.friendsAndComments {position: absolute; left:50%; top:1500px; margin-left:-400px;}

If you want to add color to your scollbar, use this generator at this website below to help you with color design:
Skem 9

Place image in Extended Network

2007-08-22T18:19:00.001-04:00

If you have any questions or comments about these myspace codes, please post them here.

If you want to put a picture in your extended network, use the code below. Place this code in any of your sections.
*Remember to put in your url image and enter the width and the size of the image as well.

<style>
.selected {extended network}
.extendedNetwork {visibility:visible !important; background-color:transparent; background-image:url(IMAGE URL GOES HERE); background-repeat:no-repeat; background-position:center center; width:435px; height:150px;}
.extendedNetwork span {display:none;}
</style>

Alternative Music Videos

2007-08-11T08:24:00.001-04:00

PlayList Space a place for media play lists

Website Designed in Photoshop - Part 3

2007-08-09T21:21:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

THIRD PART SECTION - Coding The Sliced Banner For Your Website

Go and upload all of the sliced images, I suggest you make a folder and name it images to put them in and then in an html editor open up your html document that Imageready made for you.
Once you are in there, you can change the urls and targets if need be. Also, I decided to use mine with Iframes and targeted some links to open in my Iframes. (HINT - When using Iframes not that not all browsers are going to be able to show the frames properly.) I also added my banner and my Iframe in one huge table, an example code of that is below:

<HTML>
<HEAD>
<TITLE>example09</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#C0C0C0 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div align="center">
<TABLE WIDTH=740 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td bgcolor="#8C94A4" style="border-top:1px #000000 solid;border-bottom:1px #000000 solid;border-right:1px #000000 solid;border-left:1px #000000 solid;">

<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=13>
<IMG SRC="b2limages/example09_01.gif" WIDTH=750 HEIGHT=137 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=137 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5>
<IMG SRC="b2limages/example09_02.gif" WIDTH=388 HEIGHT=13 ALT=""></TD>
<TD ROWSPAN=5>
<A HREF="http://buildtutorials.com/" TARGET="_self">
<IMG SRC="b2limages/example09_03.gif" WIDTH=41 HEIGHT=13 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=9>
<IMG SRC="b2limages/example09_04.gif" WIDTH=269 HEIGHT=1 ALT=""></TD>
<TD ROWSPAN=4>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_05.gif" WIDTH=47 HEIGHT=12 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=5>
<IMG SRC="b2limages/example09_06.gif" WIDTH=5 HEIGHT=13 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="b2limages/example09_07.gif" WIDTH=139 HEIGHT=1 ALT=""></TD>
<TD ROWSPAN=3>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_08.gif" WIDTH=54 HEIGHT=11 BORDER=0 ALT=""></A></TD>
<TD COLSPAN=3>
<IMG SRC="b2limages/example09_09.gif" WIDTH=76 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_10.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD>
<A HREF="http://buildtutorials.com/" TARGET="viewer">
<IMG SRC="b2limages/example09_11.gif" WIDTH=52 HEIGHT=9 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_12.gif" WIDTH=11 HEIGHT=11 ALT=""></TD>
<TD>
<A HREF="http://buildtutorials.com/" TARGET="_blank">
<IMG SRC="b2limages/example09_13.gif" WIDTH=52 HEIGHT=9 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_14.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_15.gif" WIDTH=14 HEIGHT=11 ALT=""></TD>
<TD ROWSPAN=2>
<A HREF="http://buildtolearn.com/?key=free+webhosting+hosting+webmaster+resource" TARGET="_blank">
<IMG SRC="b2limages/example09_16.gif" WIDTH=50 HEIGHT=10 BORDER=0 ALT=""></A></TD>
<TD ROWSPAN=3>
<IMG SRC="b2limages/example09_17.gif" WIDTH=12 HEIGHT=11 ALT=""></TD>
<TD>
</TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="b2limages/example09_18.gif" WIDTH=52 HEIGHT=2 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="b2limages/example09_19.gif" WIDTH=52 HEIGHT=2 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="b2limages/example09_20.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/example09_21.gif" WIDTH=50 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/example09_22.gif" WIDTH=47 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="b2limages/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>


</td>
</tr>

<tr>
<td VALIGN="top" ALIGN="center">
<iframe src="http://webpages.charter.net/versatilcreations/middlesection.html" scrolling="yes" style="border-top:1px #FAFAFA solid;border-bottom:1px #000000 solid;border-right:1px #000000 solid;border-left:1px #000000 solid;" class="text" bgcolor="#FAFAFA" frameborder="0" width="750" height="400" name="viewer"></iframe>
</td>
</tr>

</table>

</div>
</BODY>
</HTML>

There are changes within this code that needs to be changed, such as where it says < !-- ImageReady Slices (example09.jpg) -- > you will want to insert your Imageready Code in there and delete mine out. Then after < !-- End ImageReady Slices -- > There was the Iframe code, you need to edit the frameborder color and sizes and the frame address. I named the frame Viewer so any link that you want to target to open in the Iframe needs to be named Viewer. You can change this name if you prefer.

The end product looks like this: Click to see here! Remember, you do not have to add your sliced banner like this to your website, this is just one example that I have provided for you. Experiment and see what all you can come up with!

| Back To Step 2 |

Website Designed in Photoshop - Part 2

2007-08-09T20:43:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

SECOND PART SECTION - Slicing The Banner For Links
Make sure you Flatten all Layers, then click on the ImageReady icon in the menu, looks like this:

Make sure once you have ImageReady to go to View/Show and UNCHECK Autoslices and to CHECK Slices. Then go to Window in the top menu and make sure that Slices is checked.
Then select your Slice Tool in the menu, it will look like this:

Then go over to your menu and draw a box around each menu subject, mine for example is Home so I used my Slice Tool to draw a box around the word Home. Now you can Nudge your box to get the right position and if you look in the Slice Window you can see a preview where your slice ends and begins. Also in the Slice window you can see where you can type in your information about your Link. *If you can't read the image below, click on it and it will become clearer.* Example as follows:

In my example the things to change are the URL and I know it shows greyed out like you can't choose a target, but you can, just click on the arrow and choose where you would like the link to open.
Repeat these steps for the rest of the menu. Then when that is all done, you may preview your work by clicking on the Internet icon in the menu, looks like this:

After you have things the way you want them, go to File/Jump To/Notepad and you can browse where you would like to put the html document and the images that are sliced.

Now you are ready to go upload your images that are now placed in a folder. And get ready to place your code into your webpage!

| Back To Step 1 | Next To Step 3 |

Website Designed in Photoshop - Part 1

2007-08-09T19:58:00.003-04:00

If you have any questions or comments about this tutorial, please post them here.

FIRST PART SECTION - Banner

This is a lengthly tutorial and I will break it down in sections. Our first section we will be making our banner in Adobe Photoshop 7. Second section we will be slicing our banner in Adobe Photoshop ImageReady for our links. Third section we will add our banner to our website. Note that the wavy image that I am going to explain to you how to make, I had already learned that from another tutorial from Voidix.

LET'S GET STARTED!

Open up Photoshop, and go to File/New and make a new image 385 X 150 pixels. Choose the Paint Bucket to fill in your new image with the color black, #000000 (HINT - If you left click you have the option of using the Gradient Tool, and vice versa)

Now if you do not have your layer window open, you can open it up by going to Window and clicking on Layers. Now that you have your Layer window open click on the Create New Layer button, and create a new layer it will looks like this:

It's best if you name your layers so you know which layer is which, to do this, right click on the layer you just made which will be named Layer 1 and then click on Layer Properties and name your layer. I named mine Wavy Image. Now that you have your new layer made and named, go to you menu and select the Polygon Lasso Tool (HINT - If you right click you have the option of using the Lasso Tool, and the Magnetic Lasso Tool and vice versa), looks like this:

Now using your Polygon Tool, go over on your left hand side of your image and make a design similar to mine, use your Paint Bucket Tool and fill it in with a color of your choice, I used #2C837E:

Anytime that you have the squiggly lines and want to stop them, go to CTRL D once you have Deselected your image, then go back to your menu and choose the Airbrush Tool (HINT - If you right click you have the option of using the Pencil Tool, and vice versa) looks like this:

Using the Brush tool, you can set your size to any size you like but I used a bursh size of 5 px and mode set to normal and opacity set to 55% and flow 25%, also I set my color to black and brushed around the edges a bit and in the middle. Then I followed using the Dodge Tool (HINT - If you right click you have the option of using the in the Burn Tool and the Spnge Tool, and vice versa) from the menu that looks like this:

I also zoomed my image up to 200% to work with. Minelooked like this:

Then go to Filter/Distort/Wave. I have mine settings to look like below:

Now go to your layer window and right click on your wavy image and choose to Duplicate Layer, then go to Edit/Transform/Rotate and rotate your image around a bit (HINT - after you have it rotated to the way you want it then click on the Enter key on your keyboard) Then go to your Layers window and you can set your mode, to screen for a different effect.

Mine ended up looking like this:

Now go to Layer/Merge Down. What this done was combined both wavy images into one. After you have done that then go to Filter/Distort/Wave Then go to Edit/Fade Wave and set to 30% On each layer go to Edit/Free Transform to widen and move your images around.
Repeat the steps above a couple of times to get your own desired affect mine looked like this:

Then go to Layers/Flatten Image. Then go to Edit/Adjustments/Brightness-Contrasts and play around with the settings to get your desired effect. I set mine on brightness -17 and +21. Now save your wavy image but don't close it out, just minimize the wavy image screen and then you want to make a new image (FILE/NEW) this time make it size 750 X 150. Choose the Paint Bucket to fill in your new image with the color black, #000000 Now minimize that screen and bring up your wavy image, this time using your keyboard you want to hold down the Ctrl and A at the same time, this selects all of the wavy image, then hold down Ctrl and C, then minimze the wavy image and go back to the solid black image and then hold down the Ctrl and V. What we just done was first selected the wavy image then we copied it and pasted it over to the black image. Now as you can see the wavy

image is taking up quite of bit of space, so what we are going to do is go to Edit/Free Transform and make it smaller and move it over to the left a bit. To clean up the area around the wavy image, use the Eraser Tool and the Dodge Tool a bit around the edges. Here is what mine ended up looking like:

Using your Eyedropper Tool, (HINT - If you right click you have the option of using the The Color Sampler Tool and The Measure Tool, and vice versa) you want to choose a color from your wavy image, once you have selected a color go and make a new layer and get out your Pencil Tool and draw a line across the top of the banner, leaving a bit of space at the top. (HINT - When using the Pencil Tool, hold down the shift button while you draw your line for a straight line) I also added a white

line right above the color I chose. With that empty space at top, use your Rectangular Marquee Tool, (HINT - If you right click you have the option of using the Elliptical Marquee, Single Row Marquee and Single Column Tools and vice versa).

Once you have your Rectangular Marquee Tool Selected, then make a new layer. Draw a box above the lines that you had drawn and use your Paint Bucket to fill in a pattern of your choice. If you have any questions about patterns, please refer to the pattern tutorial, Pattern Tutorial

Now go over to your menu and select the Move Tool,

and click on your wavy image, then go back to your Rectangular Marquee Tool and make a box somewhere in the wavy image, the hold down the Ctrl C and then hold down the Ctrl D to deselect. Then hold down the Ctrl V to paste the little box, and with your Move Tool, move the box over to the far right a bit. Duplicate this layer a couple of times and arrange the boxes around to your own liking. (HINT - If you select the Move Tool in the menu and click on each box at a time, this will select that box and you can change the colors a bit by going to Image/Adjustments/Hue and Saturation or Brightness/Contrast) Also you can go to Edit/Stroke and set your width to 1px and changing the color to what you want, puts a border around your box. My images ended up look like this thus far:

Making your navigation menu:

Now choose your Rectangular Tool and draw a box at the bottom of the banner and then add a new layer. Use your Paint Bucket and fill it with a lighter greyish color, I used #D6D4D4 Then make a new layer and use your Pencil Tool using the color black and add a line near the top of the greyish box you made leaving a little space of grey at the top. Now over at the bottom right hand corner use your Rectangular Marquee Tool again and draw a decent size box covering about half of the banner, this is where you menu will sit. (Refer to my image as a demonstration to what I am talking about) Once

you have drawn your box then make a new layer then you will want to use the Paint Bucket and fill it in with the color black. Click on Ctrl D to deselect. Using your Polygon Lasso Tool (HINT- Keep your shift button held down when using the Polygon Tool to make straight lines), draw a triangle like I have shown below in the black box:

Then on your keyboard, hit the Delete button. Then Ctrl D to deselect. Then go to Edit/Stroke and set your size to 1px and

then your color to white. Add your text for your navigation in there, you can refer to what mine looks like below to get an

idea.

***Before I go any further, I feel like I need to give you a crash course on nudging. Nudging will help you out TREMDOUSLY when you are trying to position layers. Example of what I am talking about is you menu for instance. Say you have your menu all typed out and you are finding that it is a little too high or too low for where you would like it. Well with nudging, you can position the way you would like your text to be. Make sure that you have your Move Tool selected in the menu and then

click right click the layer you want to move in the layer palatte and choose Rasterlize Layer, then with your up, down, right side or left side keys on your keyboard, you can nudge your layer into position. If you find this doesn't work for you, make sure you have your Move Tool selected and the right layer selected.***

Once you have your text done, then you go back to your wavy image and click on it, then use your Rectangular Marquee Tool and make a box around the center and make it the lendth of the wavy image and copy and paste the new image right above the text in the menu, use your Polygon Lasso Tool to clean up the edges so that it will fit. Also you will change the Opacity a bit, I set mine to 85%. But play with your settings to get a desired effect. I also used my Pencil Tool and added a white line just

below the new image. To get a better understanding where I am at, refer to the image below:

Now you have this grey space over on the left hand side, I suggest adding more patterns or lines or text there. And of course you will need to add your website's title in the empty black area. When you are finished with your banner, make sure to go to Layer/Flatten Image before you save it. Just play around with it, mix and match your own ideas!with what you have learned here! Here was my finished product, the next step is to slice it up in Photoshop Image Ready to use on your website! Go to Step 2 below ...

Click here to see a full screenshot version of the final result!

Next To Step 2

Renders 2

2007-08-06T16:30:00.000-04:00

Renders

Links

2007-07-28T13:35:00.005-04:00

Here you will find a list of links ranging from family, friends & sites that I love most.

Michael Baberick Digital Portfolio - This site is the digital portfolio of Michael Baberick. He is the guy that made the cool abstract image that I used in the banner shown on this page. Thanks Michael for letting me use it! Check out his other designs in his portfolio, they are awesome!

Tutorialized - Where everything is a tutorial! One of the best tutorial sites for just about all the graphic programs. I Love this site! Many thanks to Tutorialized for posting my tutorials on their website. You guys rock!

Voidix - I love this site from way back. It has taught me alot in graphics. Awesome tutorial site!

Spoono - Great site with lots of tutorials and more!

Tutorials Expert - Photoshop tutorials and Flash tutorials directory. Great place!

Tutorial Sphere - This place has alot of good graphic and website tutorials!

Teach Tutorials - Great Photoshop tutorials!

Formlogix - FormLogix is an online form builder tool for creating web databases and web forms. Our forms may be embedded in your website, blog, or may be used internally.Forget all you know about databases and forms creation - our form builder is a WYSIWYG tool and it requires zero coding skills. It enables a user to easily create web forms and web databases such as:Contact us forms, Feedback forms, Events registration forms, Surveys, online Polls, Order forms, Invitations, CRM...

Corn On The Cob - Great photoshop tutorials and digital art source!

PS Goods - At this little website you can find a bunch of goods for your favorite graphic editor.

Tutorialpro.net - Loads of great tutorials. Check this out!

CG Diary - CGDiary is a networking community for people interested in Computer Graphics. This community is meant to bring everyone together on one platform so that everyone can interact with and learn from each other.

Good-Tutorials - An amazing tutorial site.

Blogger Buster - I am listing this site because it helped me with the 3 sided template on this website. Which I am most gratfeul for!

Dummies Guide to Google Blogger Beta - Wow! This site was very informative and helped me out alot with my layout of my site. Many thanks!

Katamari - Great myspace codes!

Skem9.com - Great myspace goodies!!!

Playlist.com - PlayList Space is a website designed to allow users to easily create their own flash media player. Playlists created with PlayList Space can be posted to any online profile (MySpace, Friendster, and many others), blog (BlogSpot, and many others), or personal site, as well as directly posting the playlist to the page you can also add a link to a page on PlayList Space which contains your playlist. I triple love this site!

RockYou.com - Great slideshows for your pictures!

Create Your Own Tubes from an Image

2007-07-20T14:13:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

HOW TO MAKE TUBES OUT OF AN IMAGE
In this tutorial, we are going to make a tube from an image, (a sphere) which we have provided below. Save the image where you will be able to find it easy and open it up in Psp and increase colors to 16 million (Colors/Increase Color Depth/16 Million Colors[24 Bit]).

Now, click on the Magic Wand tool, which looks like this:

Right click on the Magic Wand tool and change your Tool Options to this: Match Mode = RGB, Tolerance = 50, Feather = 0 Now, go back to the sphere image and place your cursor on the white background and click. You will now see the image and the background movement. Then go to Selections/Invert, now the only movement will be around your sphere image. Now go to Edit/Copy. Next you will go to File/New and make your box look like this:

Then go to Edit/Paste/As New Layer Now you will see the butterfly image on the transparent background! *hint Sometimes you may need to "cleanup" the image, such as erase around the edges or soften the edges some. Then go to the top of Psp and go to Layers and choose Merge then choose Merge visible. Then go to File, Export and choose Picture Tube. Then a box will come up looks like this:

Find the area where to type in a name for your tube and then click ok and then you are done! Keep in mind, when you go to use your tube, if you first add a new raster layer, you will be able to move your tube around and even colorize it!

Create Your Own Tubes

2007-07-20T14:06:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

HOW TO MAKE TUBES
In this tutorial, we are going to start out with a very simple basic image. We are going to turn a circle into a tube. And we are going to use a white background 102 X 116 (your tube can be any size). So first step would be go to File then New, set your settings to how I have mine:

Go the Preset Shapes in the menu, looks like this:

And select Ellipse, making sure that Retain Style is not checked, Antialias and Create As Vector are checked, the Line Width is set to 1 and the Line Style is set for a solid line. Looks like this:

Over on the color pallette on the right hand side of the screen set your Styles to black on top then null on the bottom (meaning the circle with the slash through it). If you wanted a solid circle, you would have changed the bottom to black instead of null. Here is what the settings would look like:

Draw a circle in the center of the white background. You are now able to manipulate the look of the circle or move it up and down since you are using vector mode. Play with the circle till you get what you are looking for. Then go to the top of Psp and go to Layers then choose Convert to Raster Layers. You can add more layers or do what you will with the circle, but for now, I am going to keep it simple and leave it at the one circle. Then go back up to Layers and choose Merge then choose Merge Visible. Then go to File/Export and choose Picture Tube. Then a box will come up looks like this:

Find the area where to type in a name for your tube and then click ok and then you are done! Keep in mind, when you go to use your brush, if you first add a new raster layer, you will be able to move your tube around and even colorize it!

Psp Tubes

2007-07-20T13:53:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

HOW TO USE TUBES IN PSP
Make a new image or bring up any image that you are going to use your tube on. Then look on the left hand side in the tool menu in psp to find your picture tube, the icon looks like this:

Then right click on picture tubes, this will bring up a list. Click on tool options in that list and then you will see your tubes.

HOW TO DOWNLOAD TUBES
Left click on the picture & save the tube. Then unzip it to any folder, I like to make a folder and name it tubes. Then open up your image you saved in psp, then go to file/export/picture tube. You may have to name your file.

Create Your Own Brushes

2007-07-20T13:35:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

BRUSH INTRO
In this tutorial I am going to show you how I make psp brushes. I had intended to make this tutorial along time ago. I think I had sort of dreaded doing it for the simple fact I was worried if could explain how to make psp brushes without confusing everybody?! lol! Don't get me wrong, once you know how to make them, they are a piece of cake to make. So if you have any questions about this tutorial, please us our contact form and we will be more than happy to help you out.

HOW TO MAKE BRUSHES
In this tutorial, we are going to start out with a very simple basic image. We are going to turn a circle into a brush. And we are going to use a white background 102 X 116 (keep in mind that it can be made from selections with a width and height of up to 255 by 255 pixels). So first step would be go to File then New, set your settings to how I have mine:

Go the preset shapes in the menu and select Ellipse, makin sure that Retain style is not checked, Antialias and Create as vector are checked, the Line width is set to 1 and the Line style is set for a solid line. Over on the color pallette on the right hand side of the screen set your Styles to black on top then null on the bottom (meaning the circle with the slash through it). If you wanted a solid circle, you would have changed the bottom to black instead of null. Draw a circle in the center of the white background. You are now able to manipulate the look of the circle or move it up and down since you are using vector mode. Play with the cirlce till you get what you are looking for. Then go to the top of Psp and go to Layers then choose Convert to Raster Layers. You can add more layers or do what you will with the circle, but for now, I am going to keep it simple and leave it at the one circle. Then go back up to Layers and choose Merge then choose Merge all layers. Now we need to go to the top of Psp and click on Selections and choose Select All. This will active the whole image. Now go over to the left hand side in psp in the menu and find the paint brush, when you place your cursor over it, it will say paint brush. Left click on the paint brush and then choose tool options. A box will pop up and click on the top right had side on the paint brush and choose custom, like so:

A box will come up, and then click on the create button. Like this:

Now you are finished creating your brush! But wait, you are not quite done yet! You now need to name your brush, if you don't then your brushes may overwrite themselves. Just minimize your psp screen and go into c drive/program files/jasc paintshop pro/brushes in there you will find an icon named, UBrush.jbr file. Simply right click on that icon and choose rename and rename the brush anything you want, I named mine vccircle Repeat this process each time you make a new brush. Now! You are done! Keep in mind, it needs to be done on a white background and make the image with a solid color like black. Color shouldn't really be an issue when making it, because once you get the brush made, you can change the color in your color palette to anything you like. Also another helpful hint, use a raster layer before you apply your brush for better effects, if that part confuses you, go read up on raster layers in a previous tutorial.

Psp Brushes

2007-07-20T13:27:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

ABOUT BRUSHES
Ok people, before I go on and on about brushes, let's make one thing clear, brushes are NOT tubes! I decided that I could make some brushes of my very own using the preset shapes and draw tool from psp7. If I could just make them from preset shapes/draw tool, why you are probably askin me, make them into a brush? Well I tell ya why! It cuts down on time painting, plus you can adjust the size and color and postioning of the brush if needed! Yeah and I will tell you how!

HOW TO USE BRUSHES
If you know anything about layers and use them religiously like I do, you need to make a layer before bringing up your brushes, also on your color palette you need to change the foreground color to whatever color you will want your brush to be. Second you can change the size up or down to what will fit your image. To get to all of these options you need to click on your paint brush, located on the left hand side of your tool menu in psp, looks like this:

then right click and then click on tool options, this will bring a box up, now I am using psp7 so where I am describing to you your brush types may be located somewhere other than I am tellin you if you are using a newer or older version of psp, so kind of look around for your brush types, ok now moving on...up in the top right hand corner there will be the paint brush and if you move your cursor overtop of it, it will say brush types, click on that brush and then a list will pop up and you want to click on custom. There will be your custom brushes. You will more and likely have a list of shapes there that has been there all along and you probably didn't know that they were! In psp7, there will be a shape inside of a box and around the box is an upside down arrow, left click on that arrow and your list of shapes that I was talkin about is there! If you download brushes from somewhere you will want to unzip your brushes to this location....c drive/program files/jasc paintshop pro/brushes And that's it! No worrying about exporting or anything! Nice huh?! Go ahead and try them out, they are great for making your own backgrounds too!

LEARN HOW TO MAKE YOUR OWN PSP BRUSHES
Tutorial on how to make your own Psp Brushes click here!

Create an Avatar

2007-07-20T10:45:00.002-04:00

If you have any questions or comments about this tutorial, please post them here.

In this tutorial, we will be making a basic Av, using Paint Shop Pro 7. Save the two images below somewhere on your computer to easy access:

Open up PSP, and go to File/Browse and find where you saved the image of the woman. Once you have brung that image up, and increase colors to 16 million (Colors/Increase Color Depth/16 Million Colors[24 Bit]). Then go to Edit/Copy. Now go back to File/Browse and find where you saved the background and increase the colors to 16 million as well. Then go to Edit/Paste/Paste As New Layer, this will automatically bring the girl image back overtop of the background. Now go to the eraser found in your paint menu, it will look like this:

Right click on the eraser and then go to tool options and change your settings to look like this:

Now go around the image of the woman and right click, tapping around the woman to reveal the background underneath. You may even erase a little into the woman, mine ended up looking like this:

Then go to Layers/Merge/Merge All(Flatten). Now basically you are done, aside from the fact of adding your text. But before we go on to add the text, I ask that if you do not know anything about Raster Layers and Vector Layers, to please go back and read up on each tutorial. This is not necessary to finish an av, but once you have learned about raster and vector layers, there are much more freedom to do different things to your av. Also, when we add the text to this av, we are going to work with raster layers.

Adding Text

Go to Layers/New Raster Layer, then click Ok. Then go over to the paint menu and click on the Text tool, it will look like this:

Left click on the image anywhere, and browse to find a font of your choice, I am using Arial and my settings looked like this:

Click here to see a full size screenshot version!

Then click Ok. Now your text is floating and you will be able to place your cursor on the text to move it around where you would like. ~Keep in mind that you can do alot to text when it is on a raster layer, you can go to Image/Rotate and move your text around like that. For now, I am going to leave my text stayed at a horizontal position, but I am going to add a black dropshadow to it. To do this go to Effects/3d Effects/Drop Shadow. You can play with your settings. My setting looked like this:

Then click on OK. Then go to Layers/Merge/Merge All(Flatten). My av ended up looking like this:

Using Psp Stock Filter
When we used the drop shadow, we were using psp stock filters. There are alot of stock filters to enhance your av's look. I suggest that you play with some of them and see what you like best. To show you what great things that these filters can do, I will show you different examples of this av.
1. Go to Effects/Enhance Photo/Automatic Color Balance Play with your settings, but mine looked like this:

2. Go to Effects/Enchance Photo/Automatic Contrast Enhancement Again, you can play with your settings but mine looked like this:

3. Another setting to play with, go to Colors/Adjust/Brightness-Contrast and play with the settings in there, mine looked like this:

All in all, don't be afraid to play around with different settings in your Psp 7, you may just stumble on something you like! Also, don't forget to play around with your preset shapes set on vector, and brushes and tubes are fun too!

Vector Layers

2007-07-20T10:36:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

ABOUT VECTOR LAYERS
In this brief tutorial, I am going to show you how to use vector layers to manipulate your images around, in the end you can turn them into raster layers. If you are confused about raster layers, go to the tutorial on raster layers on the main psp tips page and read over it. So for now I am assuming that you know about raster layers *By the way I am using PSP7 but all will apply for psp6, just the diagrams may look a little different when viewing for psp6.* So with this in mind let's get started on our paints!

USING VECTOR LAYERS ON PRESET SHAPESThe best way that I can demonstrate how to use vector layers is through using our preset shapes. Let's go ahead and make a new image by going to file/new and you can go ahead and use any size or color, but for this tutorial I am going to go with a white background and my sizes will be 102 width & 116 height. Now on your menu on the left side in psp, look for the preset shapes. You can place your cursor on each icon and they will tell you what each stands for, but this is what you are looking for highlighted in yellow:

After right clicking on the preset shapes icon, a box will come up, click on tool options. Now another box will come up and set your settings to this:

*Note that you can click on the box beside the shape and you can scroll through different kinds of shapes to use, same goes for the line style, plus change the color of your shape by using the color palette, but make sure that retain style is NOT checked.* Now with your vector checked, you want to place your cursor anywhere on your image and the shift button on your keyboard at the same time. You don't have to shift, but this will help control the movement of the shape. After you do this you will have what is similar to this:

See the box around your image? Well that my friend is the beauty of it all, you can place your cursor on the ends of each square box and move around the image. Go ahead and let's make this circle into an oval. Stretch out both left and right sides of the box to make it look like an oval, plus if the oval is not postioned where you want it to go, then place your cursor in the center of the box and left click and drag to where you want it to go. This is how my image turned out:

All good for now, but I know what you are saying now...how do I remove the annoying looking boxes from my image? Well now you need to go to layers at the top of your PSP menu, click on layers then a box will come up, you want to click on convert to raster layers. Now this changed your vector layer into raster layers. And when you are all done with your layering, don't forget to click on layers/merge all(flatten). And this is about what your finished product will look like:

OTHER OPTIONS TO USE IN VECTOR LAYERS
Please don't forget that vector layers can be used on other things too besides shapes. They are real handy with working with your draw tools, and text too. Just don't be afraid to play around with layers, because they can really make your image NICE!

Raster Layers

2007-07-19T16:49:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

ABOUT RASTER LAYERS
To me, when you paint an image, raster layers are a MUST! When you have a raster layer made, you will be able to change the opacity, or better known as ghosting, an object or an image, also will be able to move, colorize, cut out, or use a drop shadow on a particular area that you may not want on another part of your image. Seriously, there are a number of things that can be done when you make a raster layer. In this short tutorial you will see why I speak so fondly of them! Truly I do not know all there is to know what can be done with layers, but I decided to share to the ones that are new to psp a little about what I do know. With this in mind let's get started on our paints!

MAKING A NEW RASTER LAYER
We will start out with something simple. Let's try a text on a new raster layer. So open up your psp and go to file/new. You can set your size settings to anything you want, but I have set mine on 102 width & 116 height and white background color. Now look at the top of your psp menu screen and find layers. Looks like this if you are using psp7,

click on layers, then a box will come up, click on new raster layer. Another box will come up and you can name this layer if you want or just do what I do and just click ok. If you take the time to name your raster layers I will say it is easier to keep track of what layer you are dealing with but it is not necessary. Now this will not look like you have done anything, but wait and you will see you have done alot!

USING YOUR OPACITY SLIDER
Now on your image you want to add text. Use any font, any color, but for our tutorial I used the name Versatile done in black, font was verdana set on size 14.

Now this is how I always bring up my layer palette, I simply click on the L key on my keyboard. There is a slider in that box, located on the right, it will say 100, that you can move side to side. Just place your cursor on the double arrows and let's move our slider to 20 or whatever you want. It should look like this:

Now look at your image! Check out how you made the text fade into the background!

Now let's make a second layer and repeat the steps above, but this time add the text in the center. Looking like this:

MOVING YOUR SELECTED RASTER LAYER
Ok now you can move the position of your raster layer at anytime you want. Say that now you have decided to move your text around a bit. Working on the previous text image from the lesson above, let's move the text to the bottom to say creations versatile. As is right now you can't because you are still on layer 2, how do we get back to layer 1 to move to the bottom? Well here's how.... Click on L again to bring up your layer palette, if you named your layers then you are A...O.K. if not, then place your cursor on each layer that you see on left of your layer palette box and this will bring up a little box and show you what layers it is. Once you have found your layer that you are looking for right click once and this will highlight your box. It will look like this:

Now you know that you are only working on that one particular thing that you wanted to move and nothing else. So now use your mover tool located at the left in your psp menu and move the word versatile to the bottom.

MERGING LAYERS
When you are done with all of your layers you need to merge them together. How?! Click back on the layers up in the psp menu and you again will see your list. Look for where it says merge and click on merge. Then another small box will pop up and you want to click on merge all(flatten). What this will do, will bring all the layers that you have made into a whole. This is very important to remember to do, so that if you want to work on the image as a whole, you can't until you merge these layers together, if the layers are not merged then you will be working on the last layer made or highlighted only.

WHEN ALL IS SAID AND DONE
Let's not forget the other stuff that we can do to an image, such as colorize, drop shadow and cut-out and the list goes on and on and on.....it's your preference how you want to dress your image as a whole or if it is done on many different layers and where and how to add the last touches to your image.

Adobe Photoshop Patterns

2007-07-19T07:29:00.001-04:00

If you have any questions or comments about this tutorial, please post them here.

This is a tutorial on how to make Adobe Photoshop Patterns. I will be showing you two uses for these patterns. One as a solid background for your website and two to save the pattern to use with Paint Bucket and flood fill in your images. I will be using Adobe Photoshop 7.

Open up Adobe PS and go to File/New and make a new image of 8 X 8 pixels. Now Zoom in till you can work with your image, I zoomed mine in at 1200% Then select the Paint Bucket (HINT - If you left click you have the option of using the Gradient Tool, and vice versa) :

After you have selected the Paint Bucket, flood fill in your image with any color that you please, in this tutorial I used #194865 Now go and select your Pencil Tool in the menu (HINT- Left click and you have the option of using your Brush Tool, and vice versa):

After you select your Pencil Tool, change your color to something different, I chose #28546F and I changed my size to 1px. Now click on your image and make your image look like mine, by adding your square in the bottom left hand corner:

There are different patterns to be made just by moving these blocks around. To get an idea refer to the bottom section of this page to see. If you happen to use layers remember to go to Layer/Flatten Images to merge your layers when you are done. Then you can save that pattern either as jpg or gif, whichever you prefer. Just go in and play around to get your own desired effects!

Use Your Pattern On Your Website
You can use your pattern now to make a background on your website. This is great if you are using tables on your site and the background is a pattern. Here is what the pattern we made looks like as a background: click Here to see!! And the code for that is below:

<HTML>
<HEAD>
<TITLE></TITLE>
</head>
<BODY BACKGROUND="/images/pattern1.jpg" BGCOLOR="#FFFFFF">
</BODY>
</HTML>

Use Your Pattern In Adobe PS
Or you can save your pattern to us in Adobe PS. Make sure you flattern all images. Then go to Edit/Define Pattern and then a box will popup and you can name your pattern, click ok and now you have your pattern saved! Now when you go to apply your pattern, you can click on the Paint Bucket tool, and in the menu at the top you can change the fill to pattern, and beside the pattern drop down, scroll and find your pattern.

As an example, I used three different patterns on an image I had made previously:

Some other great patterns that you may want to have are shown below. You can imitate the image and save them in Photoshop as your pattern! Remember you can also change the colors to make your own effects! *Please note that since this tutorial is on a solid black background that the black did not show up so I had to add a white border so that the black would show up. When you make this in photoshop, you do not add the white border around the image.*

Diagonal Scanlines - This pattern does not work well using as a background on a website

Make a black image 3 X 3 pixels. And make your image look like mine:

looks like >>>

Vertical Scanlines

Make a transparent image 2 X 1 pixels. And make your image look like mine:

looks like >>>

Horizontal Scanlines

Make a transparent image 1 X 2 pixels. And make your image look like mine:

looks like >>>

Small Gridlines

Make a white image 5 X 5 pixels. And make your image look like mine:

looks like >>>

Digital Blocks

Make an image 6 X 6 pixels. I used layers on each pencil box and lowered the opacity to 30 percent using the color white. Make sure to flatten layers! And make your image look like mine:

looks like >>>

Some Patterns May Look Different On the Website

Make an image 2 X 2 pixels. And make your image look like mine:

looks like >>> looks like on the website like this >>> Here to see!!

The Possibilites are endless!!!

Renders

2007-07-17T13:21:00.001-04:00

Here you will find renders that I have made. Feel free to use them in your designs. Click on the thumbnail preview to open up the render. Click "save as" to save them onto your computer. Please do not link directly to the page.

Coming Soon

2007-07-14T10:27:00.001-04:00

Paint Shop Pro Tutorials Coming Soon!!!!!!!!!!

Abstract Banners

2007-07-13T16:26:00.004-04:00

If you have any questions or comments about this tutorial, please post them here.

Things you will need for this tutorial:
Fonts: FFF Galaxy and FFF Sailor Fonts can be found at Fonts For Flash

Go to this link: VC 3d Render Save the render on your computer.

Now go and open up Photoshop, and go to File/New and make a new image 635 X 150. Make sure the mode is set to RGB Color then you are all set. Now this brings up a white banner image. Now to bring up the render you saved. Go to File/Browse and find where you saved your render to bring it up. Once you have it up, then hold down the Ctrl + A to Select All, then hold down the Ctrl + C to Copy, then minimize that screen to get back to your blank banner image. Then hold down the Ctrl + V to Paste the render onto the banner. The render will take up the whole blank image, but what we are going to do is play with the Transform tool to get it to where we can work with it. Go to Edit/Free Transform. What I done with mine to get it to look like this was to scrunge it up a bit and moving it over using the Free Transform tool. Hint- You can achieve different versions by duplicating the render and using transform and playing with the eraser tool and blending tools as well.

To see the bigger image click here!

Now to make some techno lines and cuts. I made a new layer then used a font called FFF Galaxy set at 4 pt, just type in 4 in the box, and using the color white, make a few rows of jibber jabber. I just type all crazy like, example would be dksjfniruetrijfn then hit the enter and type in mcyxmcmweiofjien, etc. to get the look that I wanted. I done this because I thought that things were too shaded in one area so I chose that area to stick this on to break it up a bit. Make sure you rasterlize the layer. You can do this by left clicking the text in the layer palette and choosing rasterlize layer. Then I faded it in by using the opacity in the layer palatte to 26%. Using your Eyedropper Tool, (HINT - If you right click you have the option of using the The Color Sampler Tool and The Measure Tool, and vice versa) you want to choose a color from your render image, I chose #717171. Right below the text, I made two more lines, one white and the other grey (#717171) and then faded both lines to 53%. Using your selected color go and make a new layer. Now if you do not have your layer window open, you can open it up by going to Window and clicking on Layers. Now that you have your Layer window open click on the Create New Layer button, and create a new layer it will looks like this:

With that empty space at top, use your Rectangular Marquee Tool, (HINT - If you right click you have the option of using the Elliptical Marquee, Single Row Marquee and Single Column Tools and vice versa).

Once you have your Rectangular Marquee Tool Selected, then make a new layer. Draw a box at the top of the banner and use your Gradient Tool. Then fill in the box by placing so that you are filling up and down. Using your Polygon Lasso Tool (HINT- Keep your shift button held down when using the Polygon Tool to make straight lines), draw a design like I have shown below in the gradient box, then hit delete. Then go to Edit/Stroke and then with the grey color you used previously, make the width 2 and hit ok. Now go back and do the same thing but this time, change the width to 1 and the color white. After that you will have something to look like this:

To see the bigger image click here!

Let's clean things up a bit, in the left hand corner we want to delete out the lines where the deleted space is. I know that sounded confusing, but refer to the screenshot to see what I am trying to say. Use your Rectangular Marquee Tool over what you want deleted and then hit the delete button. Mine looked like this:

To see the bigger image click here!

Now hit Deselect or Ctrl + D. Then make another layer and add the same grey color to make a pencil line over on the right hand side and then under it make another layer to make a white line underneath it. Mine ended up looking like this:

To see the bigger image click here!

Awww details details, but they are all necessary to your design. Make a new layer. Using your Rectangular Marquee Tool go to the bottom of the banner, but leaving a little space at the bottom. Draw a box and use your Paint Bucket to fill in a pattern of your choice. If you have any questions about patterns, please refer to the pattern tutorial. Make another layer then right below it, fill in a solid color, I chose #320000. Make a new layer. Then using your Rectangular Marquee Tool again go to the middle of the banner. Draw a box and switch to your paint bucket and fill in a color of your choice, I chose #C1C1C1. Using your Polygon Lasso Tool (HINT- Keep your shift button held down when using the Polygon Tool to make straight lines), draw a triangle like I have shown below in the black box, then hit the delete button on your keyboard:

To see the bigger image click here!

Now hit Deselect or Ctrl + D. Then go to Edit/Stroke and then with a grey color (#717171) and make the width 2 and hit ok. Now go back and do the same thing but this time, change the width to 1 and the color white. Now go over to add your site name. I chose FFF Sailor at 8 pt. Color white. Make sure to rasterlize the layer. You can use the move tool to position it where you want it. Then go back and retype the text again as before but this time make it black lettering. Make sure to rasterlize that text too. Now you are going to position the black text over the white and you can do this easily by using the Move Tool. Select the move tool and then on your keyboard, use the arrows to move the text up or down or left or right as needed. Hint- Then to make things easier on you later, in case you need to move the text around some more, once you have your text as you want it then go to Layer/Merge Down, this now makes the white and black text as a one. Mine looked like this when I was done:

To see the bigger image click here!

Now we need something going on over in that grey area on the right hand side. Find the layer of the grey box, and this is where naming your layers comes in handy, but if you didn't name your layers then do this, on each layer hold down the Ctrl button and click on the layer. This will then show you what layer is what by showing the squiggly lines on that layer. Try it and see what I am trying to explain and probably not doing a very good job at. Once you have found that grey box layer then go over and use your Rectangular Marquee Tool again and draw all long rectangle then use the delete button and then go to Edit/Stroke and then with a white color and make the width 2 and hit ok. Now go back and do the same thing but this time, change the width to 1 and the grey color. Now I made some small gradient boxes at the bottom of that. To get them all the same size. Make your first box and then duplicate your first box and using the move tool, nudge them into place by using the right arrow key. I didn't like the plain grey box so I went back and found the grey box layer and then gradient filled it. This is the joy of making things up as you go! I also went back and done some cleaning up of the banner, such as the two lines in the beginning that we drew, it went overtop of the grey box with our text, I went and used the eraser tool on the left hand side and erased some of the two lines. Just to clean things up a bit. And then I merged down on the white and the grey line and duplicated it and moved it overtop of the dkfjdifjdksj text. I done this several times and placed them beside the text as well. Also, I added some more text underneath the site name, like a description of the site. I used FFF Galaxy set at 8pt. And typed in Graphic Resource Site. I also added two lines, color #320000, in the big grey box above and below the text. Also I added a thin black border around the banner. To do this, make sure you merge all layers then go to Select/All and then go to Edit/Stroke and I set my color to Black, and Width 1px. To get a better understanding what I done look at the screenshot:

To see the bigger image click here!

Well I hope that I didn't make things too complicated for ya! But once you get the hang of it, abstract banners are not so hard to make afterall!