View Full Version : OK, I need help with making pictures..

05-04-2001, 07:44 PM
The ones that have put pictures under your names and pictures under what you say.......would a few of you take a few minutes to try to explain this to me? I have tried to no avail to put one on..:( Thinking my Blonde is showing?...;) Really, I would appreciate your input.

05-05-2001, 01:02 AM
<BIG><B>Adding an image to your post</B></BIG>

Since there are probably a lot of people who would like to know, I'll explain the way I did it.

First, the picture has to be located on the web somewhere. If you don't have any website space, and the picture isn't already somewhere on the web, you are SOL. If you have a picture on your hard drive, I can't even begin to explain how to get it onto your web page. A lot will depend on your ISP (or wherever you have the web space). There are too many variables to explain here, so I won't go any farther.

Second, once it's on the web, you have to determine the URL of the picture. This is really just a web address, the name of the file, and where the file is stored at that web address. I'll explain this in more detail in a subsequent post. Here's an example URL. It's the location of the Chief's Arrowhead logo that you see on the top left of the Planet's pages.


Finally, now that we've established where the image is and how to tell everybody's browsers how to find it, all we have to do is embed the image in our message. This is the easy part. All you do is type the following on the line you want to add the image.

"[i mg]", followed by the URL "http://www.chiefsplanet.com/images/logo4.gif", followed by "[/img]". Here's what the whole thing looks like.

[i mg]http://www.chiefsplanet.com/images/logo4.gif[/img]

So you could see all the text, I left a space in the "[i mg]" tag. In real life, you need to take that space out for the image to disaply. When I take the space out of the line above, it looks like this.


There are other ways of doing it. If you happen to know HTML, you could use a standard image tag, but I'm not going to get into that.

hope that helps someone

05-05-2001, 03:54 AM
<B><BIG>WARNING! Don't read this!</BIG></B>
until you've read savchief's MUCH easier way. I'll leave this here for any who are interested, but it's mostly worthless.

<B><BIG>Finding the URL of a picture that is already on the Web.</BIG></B>

This actually requires a bit of intelligence and a fair amount of computer literacy. If it makes no sense to you at this level, you'll have to go out and learn more about computers before I could help you through this forum. But, if you have specific questions, I'll try to answer them.

If you already put the image on your own web page, you should be able to figure out what the URL is. If not, I can't really help you, since I'm not familiar with your ISP and I've never even done it myself.

These instructions assume that the image is on somebody else's web page. Remember that the owner may not appreciate you linking to his image and/or webpage, but they probably won't even notice. Also keep in mind that whoever maintains the page could move or remove the image at any time. When that occurs, your post will no longer display the image. That's why it's probably best if you put the image on your own page, where you can maintain control of it.

I'll present this in steps.
1) The first thing to do is point your browser to the web page that has the image you wish to display. For this discussion I'll use this page as an example.

2) Using the IE menu, click 'View' and when the submenu pops up, click 'Source'. DON'T PANIC! :) A new window should pop up. It's probably Notepad, but your machine may be configured to open a different editor. You'll see what looks like a bunch of gibberish. I call it source code. You don't need to understand any of this gibberish, so just ignore it for now. <I>If you are using a different browser such as Netscape or NeoPlanet, you should still have the option to view the source for the page, but you'll have to figure it out or find somebody familiar with that software.</I>

3) Now that you can see the source code, you have to find the line that refers to your image. This can be somewhat difficult because most pages have several images and they usually aren't named very obviously. I usually search for ".gif" because it's the most common. Then I'll search for ".jpg" and sometimes ".png" and ".bmp". Most pictures on the web are in one of these formats and the format is included in their filename. There are other picture formats that could be used, but it's pretty unlikely.

For our example, go to the Notepad window that you opened earlier and search the source for ".gif". It's much easier to use the "Search"/"Find..." command than it is to scan the source with your naked eye. The first one you find will say "logo4.gif". (This is the one we need, but let's keep searching.) We also find "printer.gif", "sendtofriend.gif", "space.gif", "newthread.gif", and "reply.gif". If we search for ".jpg" and ".png", we don't find anything.

So, we found six pictures. Looking at the page in our browser, we see two pictures of the Chiefs Arrowhead and two tiny pictures in the upper right corner; an envelope and a printer. Given all of this information, it's pretty obvious that "logo4.gif" is probably the Arrowhead, "printer.gif" is probably the little printer, and "sendtofriend.gif" is probably the envelope. Astute observers may also deduce that the "Post New Topic" and "Post Reply" in the red bar are actually pictures named "newthread.gif" and "reply.gif". The last image "space.gif" is probably a transparent pixel.

For now, we'll work with "logo4.gif", since we're pretty sure that's the right image. But keep in mind we could be wrong since we haven't seen the picture. Many times, the pictures aren't named so obviously. In those situations, you just have to try each one until you find the one you want.

Now that we have a picture, we need to build the URL. For our purpose, there are effectively two parts; the left side and the right side.

4) We'll build the right side of our URL first, because it determines exactly how we'll need to build the left side. Go to the source code and find the "logo4" entry. You should see "src=images/logo4.gif". Any image you see should always say "src=<I>something</I>". The right side of our URL will be everything to the right of "src=", up to and including the ".gif" or ".jpg". So for our example, the URL's right side is "images/logo4.gif".

5) Now we need to build the left side of our URL. You can find this information by first making sure the image is displayed in your browser and then looking at the address bar. We want everything on the left. Just how far right we go depends on what we found in step four.

If our results from step four start with a "." or ".." we go until the last '\' or '/'. See step 8 for an example of how to do this.

Otherwise we stop at the first '\' or '/' after the initial "http://". Another way to say it is to take everything from the left side up to the ".com", ".net", ".org", or whatever. For the Arrowhead example, our address bar says "http://www.chiefsplanet.com/BB/showthread.php?s=&threadid=16735". Taking everything up to the first '/', we get "http://www.chiefsplanet.com". That's the left side of our URL.

6) Now all you have to do is put the two parts together. If the part on the right doesn't start with a '/' or '\', you need to add one that matches what you already have. For our example, we get:

"http://www.chiefsplanet.com" + "/" + "images/logo4.gif"



There should be only one '//' or '\\'. It will always be right after "http:". If you have a double-slash somewhere else, just delete one of those slashes.

7) Finally, now that you have the URL, you should confirm that it works. Just go to your browser and type it into the address bar. Then click go or press enter. For this, just do what you always do when you type in a website address. <I>Don't include the quotes when you do this.</I>

You should see the image in your browser. If you do, congratulations. Just follow the instructions in my previous post to include it in your message. If you see an error message, then you didn't build the URL correctly. If you don't see anything, it's possible that it's a transparent bitmap or a very small one pixel bitmap. If that happens, or if you see an image other than what you expected, then you should try some of the other images listed in the source code. Just go back to the source code displayed in Notepad and look for a different image. Keep trying until you find the one you want.

8) Here's an example for the situation when the part from step 4 starts with a "." or "..".
Go the Latest News on the Chiefs' Website at http://www.kcchiefs.com/latest/mainnews.asp?cat=1
Here's the image we are targeting.


Once the page is displayed in your browser, click 'View' and 'Source' like before. Then search for ".gif". Keep going until you find "ad_store.gif".

Doing step 4, you see that the right part of our URL is "../images/ad_store.gif". Remember, in this case, for step 5, we include everything up to the last '\' or '/'. Since the address bar contains "http://www.kcchiefs.com/latest/mainnews.asp?cat=1", the left part of our URL is "http://www.kcchiefs.com/latest".

Executing step 6 we get

"http://www.kcchiefs.com/latest" + "/" + "../images/ad_store.gif"

To confirm that this works, I just cut and paste the line above (not including the quotes) into the address bar in my browser, and... voila!

<I>If you're experienced enough with computers to recognize a relative path, you will know that you can get rid of the "." or ".." to make the path more direct. Go for it. If you have no idea what I'm talking about, don't worry about it.</I>

That's all there is to it! ;)

what do YOU do for fun? :D

05-05-2001, 04:32 AM
<B><BIG>Easy techniques for making fancy text</BIG></B>

Keep in mind that many people view too much of this stuff as a bad thing. You can really irritate people by putting too many different fonts, colors, and so on. Still, sometimes this stuff is handy when you need to get a point across.

If you want to make bold, italics, or underlined text, it's really easy. Here are some examples. The top line is what you type. The bottom line is what you get. You can use the 'Preview Reply' button to confirm you have what you want before you post.

&ltB&gt Bold Text &lt/B&gt
<B> Bold Text </B>

&ltI&gt Italic Text &lt/I&gt
<I> Italic Text </I>

&ltU&gt Underlined Text &lt/U&gt
<U> Underlined Text </U>

&ltBIG&gt Big Text &lt/BIG&gt
<BIG> Big Text </BIG>

&ltSMALL&gt Small Text &lt/SMALL&gt
<SMALL> Small Text </SMALL>

&ltBIG&gt&ltB&gt&ltI&gt&ltU&gt Big, bold, italic, underlined text!&lt/U&gt&lt/I&gt&lt/B&gt&lt/BIG&gt
<BIG><B><I><U>Big, bold, italic, underlined text!</U></I></B></BIG>

Wondering how I made that horizontal line? Here it is!

A few words of advice. You can't always combine things. For example, &ltBIG&gt&ltSMALL&gt doesn't make much sense, but it will probably just display normally. When combining, you have to work inside out. For example, &ltBIG&gt&ltB&gt &lt/BIG&gt&lt/B&gt won't work. If &ltBIG&gt is on the far left, &lt/BIG&gt has to be on the far right. It's like a sandwich.

Now you know some basic HTML and didn't even realize it!

What a showoff!

05-05-2001, 04:36 AM
To get the URL of any picture on the web: Right click directly over the image, click "Properties", cut and paste the URL that's there in the little gray box that comes up.

05-05-2001, 05:12 AM
Thanks savchief! I knew somebody would have a quicker way.

who now recognizes that teaching is learning
<SMALL><I>grumble grumble grrrrr....</I></SMALL>

Bob Dole
05-05-2001, 06:47 AM
As for putting a small picture (avatar) under your name to the left of your post:

Click <i>Profile</i> at the top of the page. Select <i>Edit Options</i>. Scroll down to the bottom of the page and you'll see <I>Avatar</i>. You'll see a button next to the field that says <i>Change Avatar</i>. Click it.

The resulting page will allow you to either enter a URL for an avatar located somewhere on the web, or upload one from your computer. As the screen will tell you: Note: the maximum size of your custom image is 50 by 50 pixels or 50000 bytes (whichever is smaller).

So you'll probably want to have that in mind before you start.

The easiest way to get a 50 by 50 pixel image (assuming you're running some version of Windoze) is to steal an image off the web (right click the image and select <i>Save Picture As...</i>) and use Paint (Start->Programs->Accessories->Paint) to change the image attributes.

Note: You're probably not going to have a lot of luck shrinking a 400 by 400 pixel image to 50 by 50 pixels without a lot of editing. If this is your first try, find something that's small to begin with.

If you want to use an image that you've grabbed and resized, the process is pretty straighforward. Click the <i>Browse</i> button next to the <I>You can upload an avatar from your computer:</I> line and you'll be greeted with the familiar Windoze file selection dialogue.

05-05-2001, 06:49 AM
<BIG><B>More Bell's n' Whistles</B></BIG>
(Sorry TCB) ;)

This stuff isn't as easy to do, but it's not hard. Again, remember that it's easy to get carried away with too many colors and fonts, which in turn can interfere with your message and even drive away your readers.

Also, when using &lt and &gt, it's pretty easy to put a word in there that the browser doesn't understand. For example, if you type &ltSTEVE&gt, it doesn't show up at all. Nobody will even know it's there unless they view the source code. Kind of like invisible ink! <Ohh... you found this! Aren't you the clever one?>Anyway, always check your work using 'Preview Reply' or your message may not say what you think it does.

I forgot Strikethrough on the last post. Teletype could also be useful.

&ltSTRIKE&gt Strikethrough text. &lt/STRIKE&gt
<STRIKE> Strikethrough text. </STRIKE>
&ltTT&gt Teletype text &lt/TT&gt
<TT> Teletype text </TT>
For different colored text see below. There are 16 different colors that you can use. There are other colors, but they aren't guaranteed to be supported by all browsers. It's also possible to mathematically specify a color, but that's a bit difficult to explain. Some of these colors are a bit difficult to read on Planet's white background, so choose wisely.

&ltFONT color=BLUE&gt Blue text &lt/FONT&gt
<FONT color=AQUA> AQUA text </FONT>
<FONT color=BLACK> BLACK text </FONT>
<FONT color=BLUE> BLUE text </FONT>
<FONT color=GRAY> GRAY text </FONT>
<FONT color=GREEN> GREEN text </FONT>
<FONT color=LIME> LIME text </FONT>
<FONT color=NAVY> NAVY text </FONT>
<FONT color=OLIVE> OLIVE text </FONT>
<FONT color=RED> RED text </FONT>
<FONT color=TEAL> TEAL text </FONT>
<FONT color=WHITE> WHITE text </FONT> There's actually some White text on this line, but you can't see it.
To indent a subsection of text as if you were quoting a passage from a book, use the following:

&ltBLOCKQUOTE&gt Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. &lt/BLOCKQUOTE&gt
<BLOCKQUOTE> Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. Indented text. </BLOCKQUOTE>
&ltCENTER&gt Centered text &lt/CENTER&gt
<CENTER> Centered text </CENTER>
For funky stuff, you could do this.

&ltMARQUEE&gt Left scrolling text &lt/MARQUEE&gt
<MARQUEE> Left scrolling text </MARQUEE>
&ltMARQUEE DIRECTION=RIGHT&gt Right scrolling text &lt/MARQUEE&gt
&ltMARQUEE LOOP=1&gt Scrolling text - one time only&lt/MARQUEE&gt
Hit 'Refresh' to see this one again.
<MARQUEE LOOP=1> Scrolling text - one time only</MARQUEE>

For different horizontal lines
&ltHR SIZE=5&gt
&ltHR SIZE=15&gt
<HR SIZE=15>
&ltHR WIDTH=20%&gt
<HR WIDTH=20%>
&ltHR WIDTH=60%&gt
<HR WIDTH=60%>


don't say I never gave ya nothin'

05-05-2001, 07:04 AM
Senator Dole-


My Avatar is actually an animated GIF that is 75x75. Do you have any software recommendations that will let me easily convert it to 50x50 and remove the grey background?


Bob Dole
05-05-2001, 07:17 AM
What little Bob Dole played with animated GIFs was done with <a href="http://download.cnet.com/downloads/0-10072-100-5422267.html?tag=st.dl.10001-103-1.lst-7-1.5422267" target="newwindow">ULead</a>.

Honestly have not done much graphic work at all...

05-05-2001, 09:01 AM
Thanks Mr. Dole.

I found a shareware copy of ULead GIF Animator and use it to grab the images from the GIF I had. Then I used Photoshop to add the transparency and to reduce the image size. Then I used GIF Animator to build a new GIF.

I thought you had to have 100 posts to use the Avatar feature. I guess that's for when you want to change your status from 'Regular'.

old dog learning new tricks

05-05-2001, 09:24 AM
Thank you to all that took the time....:D I must be talking to a lot of cumputer wizzards here! Whoa, I could be lost for the next few days. If Tommykat doesn't appear for a while someone come calling for kitty..tee hee.
Thanks again~

05-05-2001, 10:47 AM
How do you add a saying under the picture?

05-05-2001, 10:51 AM
I'm not sure what you mean. Do you have an example?

05-05-2001, 11:10 AM
well first off, I'm trying to get the darn picture down to 50x50 pixel. Then the little fuzzy guy you have on yours, you can add a saying under it. Just wondering how to do that>>>if I ever figure out how to put the picture on too!

05-05-2001, 11:34 AM

If you want to email your image to me, I'll try to size it down to 50x50. It shouldn't be too hard unless it's an animation with a lot of frames or if it's just a big picture.

I've seen somebody putting text under their avatar, but couldn't find any examples. I suspect they are using the "You can enter an URL of your avatar:" and pointing to a simple web page instead of using the "You can upload an avatar from your computer:" option. I won't know for sure until I find an example or somebody else pops up with the answer.


05-05-2001, 12:08 PM
I would but deleted your email address..LOL. So how do I find you to send the picture?

05-05-2001, 12:30 PM
Check your email.

05-05-2001, 03:48 PM
just testing on here..Ignore me. Trying to get my cat to work..

Zebedee DuBois
05-05-2001, 03:51 PM
Your cat looks to be working just fine!

05-05-2001, 03:53 PM

Kick ***!

05-05-2001, 03:55 PM
Yeah LapDog.....thanks to you I am kicking butt....LOL
Thank you all for lessons. Just have to learn this stuff~

05-05-2001, 09:13 PM
How do you change the words below your name to the left?

i.e. under tommykat it says:

"#88 I Need Help"

How do you change this line? From "Regular" to hatever you want.


05-05-2001, 09:21 PM
I think it's only available when you have more than 100 posts. The setting is in your user profile somewhere. I've seen somebody else post how to do it. If you do a search, you might find that post.

05-05-2001, 09:34 PM
Go to Profile..edit and erase regular and type in what you want. Only 25 words(letters tho). See if that works.

05-06-2001, 07:04 AM
Thanks Tommycat and LapDog for the info :)