How To Use a Sig/Image Guide

harbinger297

Guest
If you don't know what an image host is, pixel dimensions, or the difference between .jpg and .png, then you probably need to read this thread, if you want to navigate the internet at all effectively.

The internet is largely made up of images and you will want to use them alot for various reason but alot of people don't quite understand how they work or how to use their forum signatures and avatars, or even how images work at all, and most end up accidentally lowering the quality of their sigs, or getting confused. Here is what I hope is a simple, easy to understand explanation to how images work in the forums.

The basics

Quality.

[SPOIL]We all love high quality images, especially as our signatures and avatars. This comes from two things mainly, the resolution of the image, and the file-type. There are many different image types, the most common you will find are: .jpg, .png, .gif.

.jpg - These are low quality images usually, .jpg files are smaller at the expense of quality. Avoid using when possible.
.png - This is the best file format for images, for higher quality images, this file-type also allows the use of transparent backgrounds.
.gif - Is used mostly for animation, saving still images as .gif files will drastically lower the quality, most of the time.

You can find out what an image is by right clicking on it and clicking "image properties" and looking for the "image type:" where it will tell you. You can also choose to save an image as a specific type by adding the extension on, so for example: MyImageName.png when you save it.[/SPOIL]

Sizes.

[SPOIL]Images vary in size, usually measure in "pixel by pixel" measurements. What is a pixel? A pixel is a tiny dot, that represents a colour. It's what your screen is made up of, many many coloured dots that show this very image. Each image consists of this, and you can check the size of an image by right clicking on it, and going to "image properties" (Or something similar, depending on your browser) and looking for the "image dimensions", which will be something like: 1000X1000 (as an example).

That is width by height, the width is always the first number. So a long thin forum sig like this one:

sathom.png


is 700X80 pixels. 700 being how wide it is, and 80 being how high it is, in pixels.

This image:

msbellasig.png


Is 470X180 pixels. So, a 200X200 image would be a small box, a 400X200 image would be a small rectangle shape, a 200X600 would be a tall vertical image, you get how it works, hopefully. This is important to understand when requesting a forum signature (or making one) as there are rules regarding size limitations.[/SPOIL]

Our Forum

I) Signatures

[SPOIL]So with those basics covered, let's move on. You've just requested and got a great new forum sig and you want to show it off. Here is the best way to do it.

First: Right click on the image and click "save image as...", enter a name you want to call it and put .png after it, for example: MySig.png and click save. This is to save the piece on your computer, just in case. BUT, this is not the image you will use.

The person who has made the signature for will have uploaded it with an image host. What this is, is a website that allows you to essentially "save" images there, and use a "link" to show the image directly on a page. Some common image host websites are: www.imageshack.us, www.photobucket.com, www.freeimagehosting.net and many more.

SO, what you do, is you right click on the image, and click "copy image address". This will copy the same link, that they used to show the image, then open notepad and press ctrl - v, which (using our earlier example) would be: http://img215.imageshack.us/img215/1848/sathom.png

To display this image, you "wrap" it in tags, which are codes to do specific things,
. So to display the earlier image, you put:

sigry.png


Which will show the image. This is the best way to do it, it's very quick and easy to do, a simply right click, and copy+paste into your sig-box, and it will be exactly the same image that you saw on the page when the designer showed you.

There are size rules to follow on this forum.

To show an image as a signature, it must be within the 700X80 size limit, or it will be removed and you infracted (this is to prevent web-pages being lagged by huge sigs) If it is more than this, you have to use what is called a "spoiler", which is this:

[SPOIL]
msbellasig.png
[/SPOIL]

The maximum size limit for an image within a spoiler is 700X300 pixels. To use a spoiler, you "wrap" this tag around the image:

[SPOIL ] [/ SPOIL] (Without the space)

So you do it all exactly the same way as above, you right click on the image, copy the image address, go to your user cp (top left of the page), edit signature and put in your IMG tags and image code, but put the spoiler tags around it too, so it will look like this:

sig2k.png


[/SPOIL]

II) Avatars

[SPOIL]An avatar is the small image under the players name, very small. Some people confuse this with a "CoA" (Coat of Arms) but they are completely different.

Avatars have a maximum size of 80X80 pixels, so that means a very small box, like this:

huffav.png


You can also have transparent backgrounds, like this:

image.php

(The entire image must still be within 80X80 pixels, not only the main thing, but the borders as-well. If you click and drag the image above, you will see how where the actual border of the image is.)

To use an avatar

When your avatar has been given to you, right click on the image and click "copy image address". Click on "user cp" in the top left-hand corner. In the left menu, click "edit avatar". Where it says: "Option 1 - Enter the URL to the Image on Another Website", press ctrl-v in that box (or right click and click "paste"). Then click "save changes", and you are done.

Note: If your avatar does not show up, make sure that in user cp -> edit avatar -> the box saying: "Do not use an avatar" is NOT checked, and the box saying: "Use Custom Avatar" IS checked.[/SPOIL]

III) In-Game CoA's (Coat of Arms)

[SPOIL]An in-game CoA, is the profile picture on a tribal wars players account, such as this:

[SPOIL]
exampleprofile.png
[/SPOIL]

Note: A premium account is required to use this on your account.

When your CoA has been made, right click on the image, and click: "save image as..." then, save it as a name.png, for example: MyCoA.png . Then, go your in-game settings, then to profile, then at this screen:

[SPOIL]
settingspagef.png
[/SPOIL]

Click choose, then select the image on your computer and click ok. Then, ok in-game, and... You're done.[/SPOIL]

Signature Rotators


[SPOIL]A Signature Rotator, is an image that randomly generates a different image from a list, each time you load a page. Many people have it as their signature, so each refresh of the page they appear to have a different sig. To do this, first you go to this website:

http://sig.grumpybumpers.com

Here, you make a username and password (you don't need to confirm it, or put in an email address, or any of that), then click submit. On the next page, where it has a list of "URLs", copy the links into that list for images that have been previously uploaded to an image host. So, as we did before, right click on the image you want to add to it, click "copy images address" and paste it into one of those URL box's.

IF your image hasn't been uploaded already, you will have to upload it yourself. To do this, go to: www.freeimagehosting.net (Or a different image hoster if you prefer), upload your image there, and copy the "direct link". This is important, it has to be the "direct link", or it won't work. So copy it, and paste it into the URL box at grumpybumpers. Repeat as needed, for however many you want to be rotated.[/SPOIL]

Graphics Forum Dictionary
(Under construction)

[SPOIL]Avatar: Small user profile image.

Adobe: Company providing many digital media tools and products, including photoshop.

Brush: A "Brush" tool in Photoshop or GIMP, which has a specific shape and adjustable size, which colours the canvas within that shape, with the selected colour.

BOTG: "Battle of the Graphics" - A competition in which people compete in a "knock-out" tournament with the only designer or artist left standing announced the winner.

Critique: Giving feedback regarding a designers piece, any flaws, ways to improve, or opinion of it in general.

Designer: Maker of a graphical piece.

Illustrator (Adobe): A product by Adobe, Illustrator is the companion product of Adobe Photoshop. Photoshop is primarily geared toward digital photo manipulation and photo-realistic styles of computer illustration, while Illustrator provides results in the typesetting and logo graphic areas of design.

GIMP: GNU Image Manipulation Program. Originally a linux based photoshop equivalent, it has now expanded to include windows. It's main appeal being that it is free, where-as photoshop is not.

Graphics: Images of art, advertising or design, created using computer tools or digital media.

Poll: A multi-option ballet, that you can vote on. There may be up to 10 options, sometimes your vote is hidden, and other times it is not. What type of poll it is will be specified underneath.

Request(ing): Posting in the request section of the forum, or in a "Sig Shop", asking for a customized graphics piece.

Rip(ping): Stealing another persons work and claiming it as your own. This is not only frowned upon, but illegal.

Showroom: A place where a graphics designer has his own thread, to display his works.

Signature (Sig): The image or text displayed below a persons forum post.

Sig Shop: A place where graphics designers either sell or give away customized graphics.

Sotw: "Sig of the week", A competition held on many graphics forums, where designers enter into a competition to decide who can make the best sig that week. Usually themed.

Smudge(ing): To use a "smudge" tool, to blend, spread, and manipulate colours in an image together for an eye-appealing effect to an image.

Sticky: Pinning a forum topic to the top of the list, so that it cannot be pushed down off the front page.

Tablet: A computer input device (usually via usb) that enables a user to hand-draw images and graphics, similar to the way a person draws images with a pencil and paper. It uses a soft-tip pen, that registers on the pads surface and interacts a similar way in which a mouse does, however gives greater control and sensitivity.

Vector: Vector is the use of geometrical primitives such as points, lines, curves, and shapes that are all based on mathematical equations, to represent images in computer graphics. These can be expanded infinitely without becoming "pixelated".

Vexel: The use of pixels to imitate Vector images. When zoomed in, the image becomes distorted and pixelated, where-as vector does not.

Wacom: Wacom is a company that manufactures varies graphic design and art products such as interactive pen displays, pen tablets and digital interface solutions. They are a popular brand, and many high-level artists and designers use their products, they are considered by many to be among the best to use.[/SPOIL]

I think that's the basics, if anyone thinks of anything else to add please let me know and I will include it, I would like to make this a general reference point to direct people to, so anything you have to add, let me know.
 
Last edited by a moderator:

tWillow

Guest
Very good read Harb :)

Just some suggestions for future updates on this, you may need to include how to add an avatar on, how to add a personal COA in-game, and how to add a tribe COA in-game. That way every TW related question will be answered :)
 

Genetic Engineer

Guest
Good post harb :) Stickied this, just update it with avatars etc. :)

Maybe an easy to read section where it tells you the sizes for everything, sigs, avatars, coa's ig, tribal coa's etc. :)
 

harbinger297

Guest
I'll update it shortly with COA's and avatars (Unless someone wants to write a section on it, feel free :p)

I might include a "dictionary" of terms aswell commonly used in the graphics forum and in general related in images/graphics.

Edit: updated with avatar/coa information.
 
Last edited by a moderator:

Genetic Engineer

Guest
I'll update it shortly with COA's and avatars (Unless someone wants to write a section on it, feel free :p)

I might include a "dictionary" of terms aswell commonly used in the graphics forum and in general related in images/graphics.

Edit: updated with avatar/coa information.

You may also want to spoiler each section with a header above it,

making it much easier for people to target the specific section they would like to read :)
 

harbinger297

Guest
I r newbie luver <3

Not really I'm just tired of having to tell everyone how to do it every-time, so I can just say it once here and link to it :p
 

I have to say NO

Guest
I r newbie luver <3

Not really I'm just tired of having to tell everyone how to do it every-time, so I can just say it once here and link to it :p

I sensed you were getting tired/annoyed in your shop thread :lol: thats why I decided to explain it for him :icon_razz:
 

harbinger297

Guest
Added a section on sig rotators. Please let me know if you think of anything else useful to add, so we don't have to repeat ourselves anymore :O

Started on the graphics dictionary. If anyone has anything they can add to it, please post it, it would make it alot easier and quicker :p
 
Last edited by a moderator:

harbinger297

Guest

Are you rolling your eyes at the fact I made a version for our .net forums...? :icon_confused:

I don't know how many viewers here have browsed the .us forums lately. I actually didn't know that other servers had the same thing, as I don't browse other tw forums, as most are in other languages.

Given the amount of people coming through here that don't know a thing about images and how to use them, I would say it was needed here.
 
Top