Site hosted by Angelfire.com: Build your free website today!
Blog Tools
Edit your Blog
Build a Blog
View Profile
« November 2008 »
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Entries by Topic
All topics  «
Group One
Angelfire Home
Build Zone
My Account
Webshell
Group Two
Lycos Home
Find a Date
Check Stock Quotes
Lycos Search
Wired News
You are not logged in. Log in
Html Codings
Friday, 6 February 2004
Tutorial - Animating Images
Ever wonder how blinkies blink? It's because someone made a bunch of images slightly different from each other, then used a program to put them into one graphic, displaying one image at a time. There are many different styles of animated images, but this tutorial is only going to show you the basics.

You will need:
1) An image editting program such as paint, psp, or photoshop.
2) An animating program - if you don't have one, click here and download one. I suggest Unlead Gif Animator or Easy Gif Animator.

Directions:
Create an image in your image editing program. Make another one SLIGHTLY different (Eg: Different letter highlighted) Make sure they are the same size.

Now open your animator program. See programs you need. You need to find the button that opens the image wizard. Just click around until a window pops up that has the options Add image and remove image.

Click 'add image'.
Locate the images that you just made and add them both to the wizard by double clicking on them, or clicking them once so they're selected and then click 'ok' or 'add'.
Now click 'next'.

The program is going to ask you some more information. If it doesn't ask one or two of the following, it should still be fine. Keep clicking next after you do each step until you're finished.

Would you like to loop the animation? select yes

How long would you like each frame to be displayed?

Depending on what type of image you're making, the speed will be different. Blinkies are usually around 15/100 and buddy icons are 25/100 but everything is different. You will need to experiment with this to get it right.

Image position - top left corner or center of frame?
If all of the images you've added to the wizard are the same size, this option doesn't matter. However, if you made them different sizes, you're going to have problems.

Image dimensions
First, check one of the images you are trying to animate. You need to find out how long and wide it is. In paint, you go to image then attributes. In photoshop, go to Image and Image size. I don't know for PSP since I don't use it. Put the image's dimensions where the wizard says to.

Once the wizard tells you you're finished, find somewhere in the program that will let you preview the animation. You should see this:


Now go to File, and Save As. Make sure it's being saved as a gif and give it a name. Now you've made an animated image.

Posted by emo2/graphica at 9:35 PM CET
Post Comment | Permalink | Share This Post
Tutorial - Buddy Icons
If you have aol instant messenger, you know what a buddy icon is. People use them to display something about them or their personality. What some people don't know is that you can make your own very easily. Just follow these directions.

You will Need:
1) An image editting program
2) An animating program (if you want it animated)
3) AOL instant messenger
Directions:
1) Make an image that's 48 x 48 pixels.
2) Decorate it however you want.

-------------- If you don't want your buddy icon to blink, skip to 'How to use your new icon'. ----------------

3) Make another of the same size and decorate it if you want your buddy icon animated/blinking/flashing.
4) Keep making images until you've made all the ones you want.
Here are my three images as examples:


5) Now animate them. A good speed to use is 25/100.
Click here if you don't know how to animate images.
Now you have your icon. Here's mine:


How to use your new icon:
1) Open up aim
2) Go to Preference
3) Go to Buddy Icons
4) Click 'browse pc'
5) Locate your new icon and double click on it
6) Hit OK

You're using your new icon.

How to share your new icon: 1) Upload your icon
2) Use this code, and replace URL with the url of your icon. (To find this, right click on the uploaded icon and choose properties, then copy http://....gif and paste it where it says URL)

<a href="aim:BuddyIcon?Src=URL"><img src="URL" border="0"></a>

This is what you will have. If you click on it, it will ask you if you want to change your icon, if you do, click ok, if not, click cancel.



You can put it anywhere as long as the site you've uploaded it to allows you to use the images you've uploaded there on other sites.

Posted by emo2/graphica at 9:29 PM CET
Post Comment | Permalink | Share This Post
Tutorial - Making Layouts
Many people have asked me how to make layouts. I've told them it isn't something that I feel I could teach you how to do because there are so many versions of layouts, I wouldn't have the time or the energy. So, in an attempt to show you how I do them, I've created this entry.

How I Create Layouts
1) I find a picture I would like to use.
2) I create a layout template.
3) I add the image to the template.
4) I change the height and width of everything so it fits.
5) I use Photoshop to get matching colors that I will use.
6) I add the colors.

It really is very simple. Now, I'm going to post some of the layout templates that I use. These are all from my diary Intoxic Layouts and contrary to what some people believe, I did make them all myself from scratch. I've let people use them and edit them so they could learn how to make their own, and it's turned against me because they see them on other diaries and think THEY made them and that I didn't. It really upsets me that people do that because I'm the one who spent time putting the codes together.








Template 1



Template 1 Code

You must change everything in all caps. Most of it is pretty self-explanatory and if you don't know what something is, you need more experience with html before you try doing this.


Template 2





Template 2 Code

Type here
Template 3


Template 3 Code

Template 4


Template 4 Code

TYPE HERE
A note about this layout: there is the main image (image 1) and there is a background image (image 2) that you can't really see very well.
Template 5


Template 5 Code



Template 6




Template 6 Code


Template 7



Template 7 Code

Posted by emo2/graphica at 9:26 PM CET
Post Comment | Permalink | Share This Post
Tutorial - Downloading Programs
There are a few programs that I've mentioned in this diary that you will need in order to make the things I've made. If you know of any other good programs, let me know and I'll add them to this list.

If you've never downloaded a program before, the first one you will need is winzip, unless you have windows XP. In that case, if I say you need to extract something, right click on it and choose 'extract'.

Downloading Programs
1) Go to the page that the download is on. I've provided you with links, or you can try searching on kazaa.

2) Click the download link and save it somewhere that you'll remember.

3) When it's done downloading, find it on your computer and unzip/extract it.

4) Now you need to install it. In the files that appeared after you unzipped what you downloaded, you'll see some icons. Click on them until you find one that brings up "Install Shield" or at least something that says install, and just do the directions and keep clicking next until it's finished.

5) To open up the program, find one of the icons. They could be on your desktop, start menu, or bottom menu bar on your screen. It should open up, and if it's a trial version it should tell you how many days you have left that you can use it.

Programs


WinZip Self-Extractor Use it to: Extract files from zipped folders You need it to: Unzip fonts, brushes, and other programs that you've downloded.

Adobe Photoshop 7 (trial version) Use it to: Make and edit graphics You need it to: Make blends, apply text effects, etc. You can also get photoshop by downloading it from Kazaa, but I'm going to warn you that it's illegal, especially if it's the one titled Adobe Photoshop 7 with serial, because that's the one you need if you want to keep it, as in it isn't a trial version. But it's illegal, and I believe it's against the rules on bloop to endorse it.

PSP8 (trial version - start on this page, register, and continue) Use it to: Make and edit graphics You need it to: Make blends, apply text effects, etc. I'm sure there are other ways to get this product but I don't use it so I don't know.

Ulead GIF Animator 5.0 Use it to: Animate images You need it to: make blinkies and flashing images

Easy GIF Animator 2.0 Use it to: Animate images You need it to: make blinkies and flashing images

coffeecup free ftp Use it to: Upload files to your website You don't need it to do anything I've shown you in this diary, but if you have a website, check with whatever company it's with to see if they allow ftp. I know that Tripod does. This program will let you upload tons and tons of images one directly after the other, and it's much easier to see what's in each folder that you have on your site. Using it is pretty easy too, just make sure anything you want to upload is in a folder in the C drive.

Posted by emo2/graphica at 9:22 PM CET
Post Comment | Permalink | Share This Post
Tutorial - Changing Resolutions
Your resolution sets how you view things on your computer. The lower the resolution, the bigger things will be, but the less you can fit at one time. Layouts sometimes are made to be seen in one resolution. The following resolutions that I know of are:

640x480
800x600
1024x768
1152x864
1280x720
1280x960
1280x1024

I use 1280x1024 so I can see as much of a webpage as possible.

How to Change your Resolution:
I'm not sure if this is the same for all computers but I looked it up and it should work for For Windows 95, 98, 2000, Me, XP and NT 4.0 users.

1) Go to the start menu
2) Go to Settings
3) Go to Control Panel
4) Click on Display
5) Click on Settings at the top
6) Where it says screen area or screen resolution, drag it to the one you want. I suggest 1024x768 because that's what most layout makers on bloop seem to use, but it's up to you.

Another way: On your desktop, right click and choose properties, skip to set 5.

I remember on ME that there was a small icon in the bottom right of the screen that looked like a computer, and if you right click on that it just had the different resolutions you could choose. And of course, ME is screwey so you'd probably want to restart your computer afterwards, at least that's what I used to have to do until I got XP.

Posted by emo2/graphica at 9:20 PM CET
Post Comment | Permalink | Share This Post
Tutorial - Moving Your Entry Table On Your Frontpage
These are codes that you should only use on your diary's frontpage. Make it the very last code.

These are just a few examples of what you can do with your entry table to make a nice layout. There are many different combinations of these that you can use. Don't be afraid to play around with them, and even screw up. How else will you learn how to do this yourself?

First copy and paste the code into your diary. The codes are show in the "boxes" under the example or description of what it will look like.

Please remember that you have to coordinate the colors by editing your visualization.

I havn't shown you everything you can edit because you should either know this already or they are easy to figure out.



To have this entry table: