//img.uscri.be/pth/0678fd346566791d76f63fa315cc42ad1d8174ea
La lecture en ligne est gratuite
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres
Télécharger Lire

Forum Signatures – Tutorial 1 – “A Basic Sig”

De
8 pages
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): précédent
suivant
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: