Forum Signatures – Tutorial 1 – “A Basic Sig”

Spanky

Description

Forum Signatures – Tutorial 1 – “A Basic Sig” This is the first in hopefully a series of sig tutorials. This one will take you from starting a new blank sig to finishing it and using it in forums. This sig is going to be very simple and it’s going to use some basic graphics. It will still look good but will allow you the reader to begin to understand the power, and sheer elegance, of Nemon’s system for sig creation. Fundamentals – The sig system is complex and that is what makes it so damn good. You can pretty much make any sig you want. That is also the rub because it takes a while to learn the codes and the syntax of the SIGML (Sig Markup Language). We are first going to go over some fundamentals so that you are fully clear on what is actually going on. Tags – Each part of your sig’s code will have markup tags, and these tags may have attributes. Tags are always wrapped by angled brackets like this: The tag here is shown in red and the attributes in blue. I’ll go over the attributes that we will use when the time comes. The main thing is that you understand these parts of a tag. Notice the closing “/” at the end. This is a very important part of all markup languages. All tags MUST be closed. You can use that example for single line tags or this for tags that are nested (inside other tags):

Informations

• Publié par: Urre
• Nombre de lectures: 39
• Langue: English

Extrait

Forum Signatures – Tutorial 1 – “A Basic Sig”

This is the first in hopefully a series of sig tutorials.

This one will take you from starting a new blank sig to

finishing it and using it in forums.

This sig is going to be very simple and it’s going to use some basic

graphics.

It will still look good but will allow you the reader to begin to understand the power, and sheer

elegance, of Nemon’s system for sig creation.

Fundamentals –

The sig system is complex and that is what makes it so damn good.

You can pretty much make any sig you

want.

That is also the rub because it takes a while to learn the codes and the syntax of the SIGML (Sig

Markup Language).

We are first going to go over some fundamentals so that you are fully clear on what is

actually going on.

Tags

–

Each part of your sig’s code will have markup tags, and these tags may have attributes.

Tags are always

wrapped by angled brackets like this:

<text

string=”Hello World” x=”10” y=”10” font=”arial.ttf” size=”8” color=”00000000”

/>

The tag here is shown in red and the attributes in blue.

I’ll go over the attributes that we will use when the

time comes.

The main thing is that you understand these parts of a tag.

Notice the closing “/” at the end.

This is a very important part of all markup languages.

All tags MUST be closed.

You can use that

example for single line tags or this for tags that are nested (inside other tags):

<select>

<text

string=”Hello World” x=”10” y=”10” font=”arial.ttf” size=”8” color=”00000000”

/>

</select>

Here we are closing the tag by “Specific Reference”.

This is very common in forums as well, especially

BBCode based forums where bolding text requires a [B] and [/B] tags.

Attributes always have two parts, the attribute name and the value.

X=”10” shows X as the attribute name

and “10” as the value.

All values HAVE to been enclosed in double quotes.

This is strict syntax when

dealing with markup languages.

HTML is the exact same way.

One important tag is the Comment.

Although not really a tag, since it gets completely ignored by the sig

system, comments are important for you to use to help organize things.

By placing comments at the

beginning of new sections of the sig you’ll find it much easier to modify the markup as you progress into

more complex sig designs.

Comments start with “

<!—“,

and end with “

-->”.

Images and Computer Coordinates –

Computer graphic coordinates are not the same as Cartesian coordinates.

In Cartesian coordinates you start

from the center of your “grid” and can move left, right, up, and down.

In computer graphic coordinates you

start from the Top Left corner and can move right and down.

Like this:

This is very important to understanding the values given to the attributes in the tags.

This is also why it’s

important to understand the fundamentals.

Given the coordinate system used by computer graphics a value

of 10 for both the X and Y attributes would be telling the sig system that you want to place this tag’s output

(what the tag generates) starting 10 pixels right of the top left point and 10 pixels down.

Positioning –

There are two ways to position tags, relative and absolute.

Absolute is the easiest to use where relative

takes quite a bit more thinking.

I’m not even going to define relative here as it will likely just confuse you,

instead let us take a solid look at absolute.

Absolute positioning is adding in the exact number of pixels for

the X, Y on the coordinate system for the given tag.

In absolute you should never go beyond the size limits

of you sig.

So if you sig is 400 pixels wide you would never use a value for the X attribute that is greater

then 400 because it won’t show up.

Another aspect of positioning is the fact that the sig markup is

sequential.

You need to think about how it will be drawn by the sig system, background is always first and

then layer parts on top until you have it done.

Its like building a sandwich, you don’t have the meat and

cheese on the outside and the bread on the inside so think about how you will build up your sig.

Colours –

This can be very confusing to some people but it is really not that bad once you get used to using these

values.

Colours in HTML and the sig system follow what is called Hexidecimal notation.

Hex is base 16

math and allows us to represent large number values in smaller space in computer memory.

Hex uses

letters (A to F) as well as numbers (0 to 9).

Here is basically how Hex translates to Decimal:

Hex:

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

Dec:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

As you can see, F is smaller to write then 15.

Hex is used in colours to represent the Red, Green, and Blue

values.

In computer graphics, any colour is made up of a combination of 256 shades of red, 256 shades of

green, and 256 shades of blue.

In Hex 256 (255 when counting from 0) is FF.

Any colour with have a

range for its red, green, and blue values somewhere between 00 and FF.

These colours are commonly

called RGB as they are written by simply adding each Hex value onto the previous.

In HTML solid Purple

would be written FF00FF, meaning Red is full (255) and so Is Blue, Green is 00 since there is no green in

purple.

For the sig system Nemon added one more part to the colour code and it’s called Alpha, or the

amount the colour is transparent.

This type of colour is called RGBA, so you simply add the Alpha onto

the end of your normal RGB colour value.

This may seem confusing but we will play with it so don’t

worry, you’ll see what they do.

So hopefully you now have a grasp of the fundamentals and can start, if not it should become more clear as

you proceed.

New Sig –

Login to the UserCP and create a new sig, when asked choose the Blank template.

When done you should

have this:

Let’s describe what is there right now.

The preview shows us what the output is, obviously, but it will also

show us error codes should something go wrong.

This can help you find out what is wrong, and if needed,

aid in getting help in the forums by allow you to write out what the error is.

The code that is there is common to all sigs and HAS to be there.

Everything we will do will be between

the Canvas tags.

The attributes of the Canvas tag can be changed to allow you to make a sig the size you

want.

We will use these defaults.

First thing we are going to do is move the copyright around.

Change the attributes for X and Y in the

copyright tag (make sure to stay with the 400 by 100 size limits!) and hit update.

You’ll see how the

copyright moves around.

This is absolute position because you are saying I want it here in reference to the

top left corner.

Once you’ve seen what changing those values does lets set our copyright to the top right

corner.

I’m doing this first so that I can create my sig around the Copyright instead of trying to fit the

copyright into my sig at a later time.

Set your Copyright tag line to this:

<copyright x="305" y="4" size="12" font="arial.ttf" color="FFFFFF00"/>

Next we are going to add a background.

For this tutorial you can use my URL’s for the images, once you

start making your own sigs you will need to have space on an internet server so you can use a valid URL.

To add an image we use the, not surprising, image tag.

The tag has several attributes:

<image url=”Full URL to Image File” x=”0” y=”0” width=”400” height=”100”/>

X and Y specify where you want to place the Top Left pixel of the image on your canvas and the width and

height values are the width and height of the image.

So lets add an image and see what happens.

From

this point on we are going to put all our code between the Opening Canvas tag and the Copyright tag.

The

Copyright tag has to be the very last tag before closing the Canvas tag.

This is very important!

So let’s make this change:

<?sigml version='1.0'?>

<canvas width="400" height="100" fill="00000000">

<!-- Background Image -->

<image url="http://members.shaw.ca/bf2sigs/teak_background.jpg" x="0" y="0" width="400" height="100"/>

<!-- Have fun -->

<copyright x="305" y="4" size="12" font="arial.ttf" color="FFFFFF00"/>

<

/

c

a

n

v

a

s

>

So we have a comment saying that our next part is the background image.

Then we have the image tag on

the next line with all the attributes and values needed to show the following result in the sig preview:

It’s a good start!

Let’s add a background rectangle to our Copyright so it will stand out a little better.

This

is where we are going to play with the colours as previously mentioned.

We already know where our X and Y cords are for the copyright so lets use them and see what happens,

add this line just before the Copyright tag:

<rect x=”305” y=”4” width=”95” height=”16” fill=”FF00FF00”/>

Hit the update button and take a look.

As you can see we have a rather ugly full purple (as in described in

the colour section) that looks rather ugly.

I think more of a black will look better so let’s change the fill value to “00000000” and update to see.

Making the RGB all zero’s is solid black.

The last two 0’s are the alpha value, right now it is completely

opaque meaning no underlying colours are showing through:

Its easier to see the Copyright for sure but the black is too strong.

Now we are going to play with the

Alpha.

You’ll soon see just how COOL this is.

The alpha, like R, G, and B values, has a range of 0 to 255

in decimal or 00 to FF in Hex.

Lets go with exactly half transparency.

Open up the windows calculator

and set the View to Scientific.

You can convert decimal to hex easily here.

Make sure you are in Decimal

mode (radio button on the left).

Half of 256 is 128, but all computer numbers count from zero so we minus

1 giving us 127.

Type 127 into the calculator then choose Hex as the mode, you’ll see the number changes

to 7F.

Lets change or fill to make the Alpha 7F:

fill=”0000007F”.

Hit update and take a look.

Now we can see some of the background image showing through.

Now that you can easily convert Hex

and Decimal you can change the Red, Green, Blue, and Alpha values and see what happens.

Try several

now and see what they do.

Next we are going to add a darker blue semi-transparent rectangle for our title bar.

We will then add our

Rank and name into that bar.

We’ll need to indent a little on the X and Y so that it lines up with our

Copyright.

This is called registration in the design world and is VERY important to making the sig

appealing to the eye.

All kinds of randomly placed rectangles can look seriously ugly.

So here is the code I have for the title bar, add it in after the background image tag.

<!-- Title Bar -->

<rect x="4" y="4" width="295" height="16" fill="0000904F"/>

As always, since we are starting a new section, add a comment like I have.

So this is what we get:

Now we are going to add our first Text tag.

The text tag has more attributes then anything other tag but

they are straight forward.

Since this tutorial is only basic we are not going to worry about some of them.

The code for your rank is {feed:bf2:playerrank:to_rankname} and for your nickname is {feed:bf2:nick}.

So we add these into the string attribute of the text tag:

<text string="{feed:bf2:playerrank:to_rankname} - {feed:bf2:nick}" x="7" y="16"

font="arialbd.ttf" size="10" color="FFFF0000"/>

We are using Arial Bold as the font, you can look up the font names on the editor page. And we are setting

the size to 10 and the colour to Solid Opaque Yellow.

We get this result:

We are now going to do a neat trick to make a shadow.

Copy and paste the same line so we have two of

them.

On the first one (remember our layering) we are going to add 2 to both the X and Y values and we

are going to change the colour value to opaque black “00000000”.

Now when we update we should see a

shadow under our Rank and Name:

So now that we have successfully created rectangles and text tags all we need to do is add more along with

their codes to fill in all the other possible stats we could want.

For our basic example we will leave all the

additional text stats to you, it really is the best way to learn.

Keep adding text, move it around and try

different codes and transforms as shown in the forums Docs for codes and templates.

Next we will add a render tag (MySol) and the Badges, Ribbons, and Medals.

Then you should have

enough information and knowledge to start playing with the sig code.

The MySol render adds a posed image of the class you play the most.

We are going to place one on the

right side and then we will put our awards into the remaining space.

Let’s add these lines:

<!-- Soldier -->

<image render="bf2:mysol" x="300" y="30" width="85" height="70"/>

Here is the result:

When using the MySol render you may need to adjust your width and height to make the aspect look ok, so

its not all squished or squashed.

The Badges Medals and Ribbons are similar but allow for Rows and Columns for better layouts so we’ll

have a look at them next.

The Code for the render is this:

<image render="bf2:awards" all="true" x="2" y="30" rows="3" cols="7" width="185"

height="65" uniform="true" id="awards"/>

Gives:

The new attributes are Rows, Cols, All, and Uniform.

We have three rows and 7 columns for a total of 21

possible badges.

Rows and Cols are used by the Ribbons and Medals as well.

The All attribute will show

even the badges, ribbons, and medals you don’t have yet.

They will be black.

As you can see I’m missing

a couple.

The Uniform attribute will maintain the spacing between them.

If you make it false you get this:

As you can see there is a little more room between each badge.

We’ll change only the rows and cols and

see what happens, lets make 2 rows and 10 cols.

For our basic sig we are going to make it like it was, 3 rows and 7 cols an uniform spacing.

I’ve gone

ahead and added in the other two (ribbons and Medals) and here is the code so you can see whats going on:

<image render="bf2:ribbons" all="true" x="170" y="30" rows="6" cols="3" width="50"

height="68" uniform="false"/>

<image render="bf2:medals" all="true" x="230" y="30" rows="3" cols="6" width="70"

height="68" uniform="false"/>

Our final image looks like this:

And this is our Final code:

<?sigml version='1.0'?>

<canvas width="400" height="100" fill="00000000">

<!-- Background Image -->

<image url="http://members.shaw.ca/bf2sigs/teak_background.jpg" x="0" y="0"

width="400" height="100"/>

<!-- Title Bar -->

<rect x="4" y="4" width="295" height="16" fill="0000904F"/>

<text string="{feed:bf2:playerrank:to_rankname} - {feed:bf2:nick}" x="9" y="18"

font="arialbd.ttf" size="10" color="00000000"/>

<text string="{feed:bf2:playerrank:to_rankname} - {feed:bf2:nick}" x="7" y="16"

font="arialbd.ttf" size="10" color="FFFF0000"/>

<!-- Soldier -->

<image render="bf2:mysol" x="300" y="30" width="85" height="70"/>

<!-- The Awards/Medals/Ribbons -->

<image render="bf2:awards" all="true" x="2" y="30" rows="3" cols="7" width="185"

height="68" uniform="true" id="awards" />

<image render="bf2:ribbons" all="true" x="170" y="30" rows="6" cols="3"

width="50" height="68" uniform="false"/>

<image render="bf2:medals" all="true" x="230" y="30" rows="3" cols="6" width="70"

height="68" uniform="false"/>

<!-- Have fun -->

<rect x="305" y="4" width="95" height="16" fill="0000007F"/>

<copyright x="305" y="4" size="12" font="arial.ttf" color="FFFFFF00"/>

</canvas>

So that’s the first tutorial on making a sig.

This is very basic but shows what can be done.

With time and

practice you can make something like this: