[LEARN] BBCode Lessons & Tutorials [+tutorial videos!]

[roslinpl]

Hello everyone,

I decided to start a thread where I can share my knowledge about Forum's BBCode.
Follow my lessons and tutorials and increase your skills, learn how to design and create your own BBCode signature or create one for someone else.

If you think it's a cool idea please reply and let me know.

		........................................Links.to.lessons:........................................	..................Links.to.Tips.&.Tricks:..................
███████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ █████████████████░░░░░░░░█████████████████ ██████████████████████████████████████████ ███████████████████████████████████████	..............	Lesson 1:.Forum's signature styling rules Lesson 2:.BBCode signature max. height Lesson 3:.Senior/Hero/Legendary.Members.signature.table.template.(and.a.bit.about.tables...) Lesson 4:.BBCode Drawing Basics lvl.I Lesson 5:.BBCode Drawing Basics lvl.II Lesson 6:.Colors Lesson 7:.Colors - Gradients Lesson 8:.BBCode Drawing Basics lvl.III (video tutorial included) Lesson 9:."Inside of tables": Image size Lesson 10:."Advanced BBCode Drawing Techniques lvl.I" Lesson 11:.Coming soon	I II III IV

Lesson 1: Forum's signature styling rules

RANK	STYLING	BOLD LETTERS	ITALICIZED	UNDERLINED	TABLES	MAX. CHARS.
Newbies	no	no	yes	yes	no	50
Jr. Members	no	no	yes	yes	no	150
Members	no	no	yes	yes	no	4000
Full Members	font color, font face	yes	yes	yes	no	4000
Sr. Members	yes (without 'glow')	yes	yes	yes	yes	4000
Hero/Legendary.Members	yes	yes	yes	yes	yes	4000

Lesson 2: BBCode signature max. height

Signature max. height is same for all ranks.
Simple way to check what's the maximum possible height: Make a 'quote' with 3 lines, in each line write a letter 'p'.

p
p
p

Anything below 3rd line 'p' will be not visible on your signature space.




Lesson 3: Senior/Hero/Legendary Members signature table template (and a bit about tables...)

Tables are made from columns and rows.
To create a table you need to create a table frame and rows. Rows contains columns.

Simple explanation in an example:
Open a table -> open a row with ie. 4 columns -> close a row -> create another row with 4 columns -> close a row -> close a table

In a code same example looks like:

Code:

[table]
[tr]
[td]
Row_1_column_1
[/td]
[td]
Row_1_column_2
[/td]
[td]
Row_1_column_3
[/td]
[td]
Row_1_column_4
[/td]
[/tr]
[tr]
[td]
Row_2_column_1
[/td]
[td]
Row_2_column_2
[/td]
[td]
Row_2_column_3
[/td]
[td]
Row_2_column_4
[/td]
[/tr]
[/table]

Preview:

Row_1_column_1	Row_1_column_2	Row_1_column_3	Row_1_column_4
Row_2_column_1	Row_2_column_2	Row_2_column_3	Row_2_column_4

When you want to create a new signature design (For Senior/Hero/Legendary Members) you can start with a template which will save your time:

Code:

[quote][table]
[tr]
[td]
p
p
p - MAX. HEIGHT -
[/td]
[td]
CONTENT
[/td]
[/tr]
[/table][/quote]

After design is ready remove 'quote' tags and your BBCode signature code is ready








Do you want more lessons?

[1500395007]

1500395007

[1500395007]

1500395007

[1500395007]

1500395007

[1500395007]

1500395007

[1500395007]

1500395007

[izanagi narukami]

....

Do you want more lessons?

Ofcourse  

How do you do this ?
   
░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░██████████████████████

Is there any software or you just made it pixel by pixel ?
If that's so , for how long you made that image ?

Even if I found online BB image creator , the result can't be good as yours

[aubert]

I just figured out when making a signature that the real character limit is not 4000 but 3899. Whenever I make a signature and if it surpasses 3899 characters it will cut off and left 101 characters remaining.
Maybe there's an explanation about it?

[azguard]

This is very interesting i made several contest here but no luck much better design then mine still i started to learn this 6 month ago and still have some thing that i dont know but i will watch some of your tutorials in future. Maybe i will won once in future 10x to your tutorials.

[veleten]

a very interesting thread,please continue
it is always a pleasure to read some info that can be used to improve your skills
some people can even make money with contests or creating paid signatures for campaigns as a result
so yes,we are waiting for more lessons, BBCODE sensei 

[jamalaezaz]

Yes. I want more lessons. please continue that..

can't you make video tutorials for this?

[jaceefrost]

I wish there is some kind of a tutorial on how to convert an image to bbcode or maybe which service or an app to use to make it possible. It will be helpful for some people who wants to experiments with signature designings.

[Jemzx00]

Wow, I will be gladly to learn how to make a customized signature design on my own. I'll be watching this thread to learn more. Please continue. It'll be better if there's a video but words are good too.

[ibuddy122505]

What a wonderful tutorial!Much appreciated your harvesting job among the forum users.Specially I'm so much attract this tutorial coz I've pretty much interest to make my own a nice BBCode.I must sure i can do this after seeing this full BBCode Lessons & Tutorials.  

Waiting next lessons though.

[roslinpl]

Hello everyone,

I had no time during X-mas to write another lesson, but today it's time to share some more knowledge with you.

Ofcourse  

How do you do this ?
   (...)

Is there any software or you just made it pixel by pixel ?
If that's so , for how long you made that image ?

Even if I found online BB image creator , the result can't be good as yours

Thanks for a question. I don't use any image converters etc. I always draw such things pixel by pixel. Controller image was pretty simple. It took perhaps 15-20min because it's one color and pretty straight lines. I'm going to explain in details and teach you how to do it during next lessons

I just figured out when making a signature that the real character limit is not 4000 but 3899. Whenever I make a signature and if it surpasses 3899 characters it will cut off and left 101 characters remaining.
Maybe there's an explanation about it?

Tips & Tricks (1): The Forum's signature characters limit is 4000 chars but Forum's software counts white spaces and line breaks.

If we write 4000 characters in a single line this forum software will allow us to use exactly 4000 characters.
A code box below contains 4000 chars, you can test signature char limit with it:

Code:

1234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891234567891230

(...) can't you make video tutorials for this?

(...) It'll be better if there's a video but words are good too.

In the future it's possible, but unfortunately the creation of videos takes much more time. In the future for sure I will try to make such videos, but for the moment I will focus on the text version.

Best regards.

[darklus123]

II really wanted to learn BBcodes to have a side line in this forum, Thank you so much i hope that you could update the tutorials above and if  you can create some video tutorials that would be great. Just want to ask something were can we possibly test those codes? Especially if we do not have hero/sr ranks accounts for testing


cheers,

[roslinpl]

II really wanted to learn BBcodes to have a side line in this forum, Thank you so much i hope that you could update the tutorials above and if  you can create some video tutorials that would be great. Just want to ask something were can we possibly test those codes? Especially if we do not have hero/sr ranks accounts for testing


cheers,

Hey,

in my opinion the best environment for testing is Google Chrome web browser and a 'post preview' and if we do everything right the signature should work just fine.

1) When you're working on a signature put your signature code inside 'quote' tags. 'Quoted text box' has similar style as 'signature space'.
2) Remember about signatures styling rules.
3) If everything looks good you can remove 'quote' tags and copy your signature code into your profile settings.

[roslinpl]

Lesson 4: BBCode Drawing Basics lvl.I

When we want to reproduce the image in the BBCode we have to remember a few very important Forum's BBCode principles:

Personally I've tested many different methods and I'm sure that the best method is to manually draw an image pixel by pixel. BBCode image converters/generators doesn't meet my expectations, I don't recommend any and I don't use any of them.

After almost 3 years of experience with BBCode signatures designs, I'm sure that if we want our signature to be highly compatible with different operating systems and web browsers we should use a characters in size 2pt while creating a BBCode image for a signature.

The best ASCII characters which I recommend to use for your BBCode images are: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
But mostly I use " █ " and always in a size 2pt. Which is most compatible for different web browsers and different operating systems.


Why I don't use 2px or 1pt or 1px?
If everyone will use Google Chrome, then it's pretty cool to use 2px, 1px or something smaller than 2pt. You can possibly get more details in your BBCode images.

Unfortunately the characters smaller than 2pt used in the BBCode signatures will looks stretchy or will shrink too much on different web browsers and operating systems which means that in reality the signature looks good for a smaller part of the visitors.

Signature BBCode design isn't as flexible as HTML + CSS designs, which also might looks different on different web browsers.




Experiment: Draw a square in BBCode. Use same ASCII character " █ " in different sizes: 2pt, 2px, 1pt, 1px.

Preview that BBCode square under different browsers like Chrome/Mozilla/Opera/Edge/Safari/etc.

2pt→

███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████ ███████████████████

2px→

████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████ ████████████████████████████████████████

1pt→

██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████

1px→

██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████ ██████████████████████████████████████████

Please note that square drawn with a character in a size 2pt on most browsers look the same. It's most compatible. Other squares drawn with the same ASCII character in different character sizes looks stretchy / shrunken on other web browsers. 2pt ASCII characters are not 100% compatible but after years of experiments I'm sure that it's highly compatible.

[roslinpl]

Lesson 5: BBCode Drawing Basics lvl.II


O.K. So, no we know that it's a good choice to use 2pt █ ASCII character for our BBCode images. But how to draw a nice one with it?

The patience and a bit of artistic sense will lead us to our goal

You need to practice and experiment with it to feel it.



Exercise: Selected ASCII characters for our BBCode image: ░ and █

Step 1) Draw a rectangle with █ ASCII chars. Remember about max. height. (Lesson 2).

█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████

Step 2) Draw Pad arrows with ░ ASCII chars.

█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Step 3) Draw Pad buttons with ░ ASCII char.

█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████

Step 4) Round the Pad border with ░ ASCII char.

░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░

Exercise code:

Code:

[b]Step 1)[/b] Draw a rectangle with █ ASCII chars. Remember about max. height. ([url=https://bitcointalk.org/index.php?topic=1727100.msg17283187#msg17283187]Lesson 2[/url]).
[quote][size=2pt]█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 2) [/b]Draw Pad arrows with ░ ASCII chars.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░███████████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
██░░░░░░█████░░░░░░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 3) [/b]Draw Pad buttons with ░ ASCII char.
[quote][size=2pt]█████████████████████████████████████
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
█████████████████████████████████████[/size][/quote]

[b]Step 4)[/b] Round the Pad border with ░ ASCII char.
[quote][size=2pt]░███████████████████████████████████░
███████░░░░░░░██████████░░░████░░░███
███████░█████░█████████░███░██░███░██
███████░█████░█████████░███░██░███░██
██░░░░░░█████░░░░░░█████░░░████░░░███
██░███████████████░██████████████████
██░███████████████░██████████████████
██░███████████████░██████████████████
██░░░░░░█████░░░░░░██████████████████
███████░█████░███████████████████████
███████░█████░███████████████████████
███████░░░░░░░███████████████████████
░███████████████████████████████████░[/size][/quote]

[azguard]

Lesson 4: BBCode Drawing Basics lvl.I:

After almost 3 years of experience with BBCode signatures designs, I'm sure that if we want our signature to be highly compatible with different operating systems and web browsers we should use a characters in size 2pt while creating a BBCode image for a signature.

The best ASCII characters which I recommend to use for your BBCode images are: " ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ▂ ▃ ▅ ▆ "
But mostly I use " █ " and always in a size 2pt. Which is most compatible for different web browsers and different operating systems.

Why I don't use 2px or 1pt or 1px?
If everyone will use Google Chrome, then it's pretty cool to use 2px, 1px or something smaller than 2pt. You can possibly get more details in your BBCode images.

Unfortunately the characters smaller than 2pt used in the BBCode signatures will looks stretchy or will shrink too much on different web browsers and operating systems which means that in reality the signature looks good for a smaller part of the visitors.

This is what was problem with my workout i was trying to create with 3, 4, or even with 5px, i have one question instead on px size you mostly use pt size, maybe this was error in my end i try many different sizes and always ended with not lining up and that was problem from this lesson.

I will implement this into my test signatures for future development and this was very good help.

[roslinpl]

Lesson 6: Colors

To change the color of BBCode signature design elements simply add a color attribute.

Code:

[color=#value][/color]

Color attribute value accept verbal color names like "Black, White, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, Lime Green"
but also accept colors hexadecimal forms and shorthand hexadecimal forms which will save few characters. (signature char. limits are not so big, save as much characters as you can )

Shorthand hexadecimal form examples:

Hexadecimal.form	........Shorthand.hexadecimal.form........
#000000	#000
#ffffff	#fff
#77CC33	#7C3
#33CC99	#3C9

There is also a 'transparent' BBCode color attribute value which is very useful for BBCode images.

This text is visible BUT THIS ONE ISN'T This text is visible

Code:

This text is visible [color=transparent]BUT THIS ONE ISN'T[/color] This text is visible

Tips & Tricks (2): How to avoid table bug/glitch

THIS TEXT SHOULD BE IN THE SAME LINE

THIS TEXT SHOULD BE IN THE SAME LINE

THIS TEXT SHOULD BE IN THE SAME LINE

THIS TEXT SHOULD BE IN THE SAME LINE

Table bug/glitch occurs only in posts it doesn't occur after copy&pasting the code into profile's signature.

But sometimes we need to make a nice table in a post. How to avoid table glitch/bug?
Remove white spaces and replace them with a 'dot' character and make that 'dot' transparent (or in background 'glow' color if present).

THIS.TEXT.SHOULD.BE.IN.THE.SAME.LINE

THIS.TEXT.SHOULD.BE.IN.THE.SAME.LINE

THIS.TEXT.SHOULD.BE.IN.THE.SAME.LINE

THIS.TEXT.SHOULD.BE.IN.THE.SAME.LINE

Code:

[table]
[tr]
[td]
THIS[color=transparent].[/color]TEXT[color=transparent].[/color]SHOULD[color=transparent].[/color]BE[color=transparent].[/color]IN[color=transparent].[/color]THE[color=transparent].[/color]SAME[color=transparent].[/color]LINE
[/td]
[td]
THIS[color=transparent].[/color]TEXT[color=transparent].[/color]SHOULD[color=transparent].[/color]BE[color=transparent].[/color]IN[color=transparent].[/color]THE[color=transparent].[/color]SAME[color=transparent].[/color]LINE
[/td]
[/tr]
[/table]

[table]
[tr]
[td]
[glow=#000,1][color=#fff]THIS[color=#000].[/color]TEXT[color=#000].[/color]SHOULD[color=#000].[/color]BE[color=#000].[/color]IN[color=#000].[/color]THE[color=#000].[/color]SAME[color=#000].[/color]LINE
[/td]
[td]
[glow=#000,1][color=#fff]THIS[color=#000].[/color]TEXT[color=#000].[/color]SHOULD[color=#000].[/color]BE[color=#000].[/color]IN[color=#000].[/color]THE[color=#000].[/color]SAME[color=#000].[/color]LINE
[/td]
[/tr]
[/table]

[blockman]

I will not just read and follow for now this thread but I will comment and wanted to say thanks for this roslinpl what a very helpful tutorial, gonna follow this thread until you will teach us what you know (I hope so.)
Very generous person, since I was a failed programmer in C,C#,C++ and java. I will now focus more with BB coding and I already have a hope for now with BBCode. Kudos roslinpl! I will stay tune for more tutorials, happy holidays!

[veleten]

@OP
but if I have no option to draw the code pixel by pixel,or have no talent in drawing things (everything I draw looks like a piece of sh...)
I know that you do not use online image to BBCODE convertors
still is there any that you could recommend? any decent at all?

[roslinpl]

Lesson 7: Colors - Gradients

To create a gradient for your texts or BBCode images it's possible to save a lot of time with the 'Text Color Fader' - gradient generator

When I was less experienced with BBCodes I was doing gradients manually. With graphic editors I was drawing squares with gradient backgrounds and then manually and after placing guide lines all in same distance from each other I was able to pick up needed colors with a color picker. But then I found a very good gradient generator

http://patorjk.com/text-color-fader/

This is my favorite tool to make good gradients and you can set the "Output Code" to "Standard Forum Code".


http://patorjk.com/text-color-fader user interface is very simple. Write a message, choose number of colors and set the output code to 'Standard Forum Code'. Press 'generate color faded text' and it's done (almost).

Example:

Lesson 7: something about gradients xD

Code:

[color=#9600ff]L[/color][color=#9c07f2]e[/color][color=#a10de4]s[/color][color=#a714d7]s[/color][color=#ac1bc9]o[/color][color=#b221bc]n[/color] [color=#bd2fa1]7[/color][color=#c23594]:[/color] [color=#cd4379]s[/color][color=#d34a6b]o[/color][color=#d8505e]m[/color][color=#de5751]e[/color][color=#e35e43]t[/color][color=#e96436]h[/color][color=#ee6b28]i[/color][color=#f4721b]n[/color][color=#f9780d]g[/color] [color=#f9780e]a[/color][color=#f3711c]b[/color][color=#ed6a2b]o[/color][color=#e86339]u[/color][color=#e25c47]t[/color] [color=#d64e63]g[/color][color=#d04771]r[/color][color=#ca3f80]a[/color][color=#c5388e]d[/color][color=#bf319c]i[/color][color=#b92aaa]e[/color][color=#b323b8]n[/color][color=#ad1cc6]t[/color][color=#a715d4]s[/color] [color=#9c07f1]x[/color][color=#9600ff]D[/color]

Alright, now we know how to quickly generate a text with a gradient color but how to use same generator to generate gradients for BBCode images?
Well, it's a bit more complicated because it depends from our needs. Different design = different needs.

Let start from a simple example.

Exercise:

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

Code:

[table]
[tr]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[td]
[size=2pt]
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████
████████


████████
████████
████████
████████
[/td]
[/tr]
[/table]

We have two dark exclamation marks and we want to paint them gradient color.
In our example each exclamation mark contains 17 lines of █ ASCII chars in a size of 2pt.

To generate hexadecimal values for our gradient open http://patorjk.com/text-color-fader/

as a "message" write:

12345678901234567

You can write something else just mind that the message length must be 17 chars. Because we need 17 colors for 17 lines.

Choose your colors (I set 2 colors, #0040ff and #bd0021) and press 'generate color faded text'. Add a color tag to each line of your BBCode drawing and copy generated colors into BBCode image as new color values.
Try to paint second exclamation mark 'backwards'.

Exercise results:

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████ ████████

Code:

[table]
[tr]
[td]
[size=2pt]
[color=#0040ff]████████
[color=#0c3cf1]████████
[color=#1838e3]████████
[color=#2334d5]████████
[color=#2f30c8]████████
[color=#3b2cba]████████
[color=#4728ac]████████
[color=#53249e]████████
[color=#5f2090]████████
[color=#6a1c82]████████
[color=#761874]████████
[color=#821466]████████
[color=#8e1059]████████


[color=#9a0c4b]████████
[color=#a5083d]████████
[color=#b1042f]████████
[color=#bd0021]████████
[/td]
[td]
[size=2pt]
[color=#bd0021]████████
[color=#b1042f]████████
[color=#a5083d]████████
[color=#9a0c4b]████████
[color=#8e1059]████████
[color=#821466]████████
[color=#761874]████████
[color=#6a1c82]████████
[color=#5f2090]████████
[color=#53249e]████████
[color=#4728ac]████████
[color=#3b2cba]████████
[color=#2f30c8]████████


[color=#2334d5]████████
[color=#1838e3]████████
[color=#0c3cf1]████████
[color=#0040ff]████████
[/td]
[/tr]
[/table]

Tips & Tricks (3): saving characters (I)

While working on a BBCode signature we don't need to close a color tag before we add another color tag. This can save a lot of characters.
We don't need to close a lot of tags, like [ /b ], [ /size ], [ /font ] and some others. More tips coming soon

I will not just read and follow for now this thread but I will comment and wanted to say thanks for this roslinpl what a very helpful tutorial, gonna follow this thread until you will teach us what you know (I hope so.)
Very generous person, since I was a failed programmer in C,C#,C++ and java. I will now focus more with BB coding and I already have a hope for now with BBCode. Kudos roslinpl! I will stay tune for more tutorials, happy holidays!

Thanks!

I hope you will learn something from my lessons

@OP
but if I have no option to draw the code pixel by pixel,or have no talent in drawing things (everything I draw looks like a piece of sh...)
I know that you do not use online image to BBCODE convertors
still is there any that you could recommend? any decent at all?

Sorry, but truly I don't know any good image2bbcode converters which can be used for BBCode signatures. If you'll find one let me know


Best regards.

[Dmitry.Vastov]

I want to master this. Since signatures are in demand here. I will be good sideline to make some extra income.
Thank you for tutorials roslinpl and more tutorials to come. Its a bit hard because im not good at codes. But still im willing to do this anyway.

[roslinpl]

I want to master this. Since signatures are in demand here. I will be good sideline to make some extra income.
Thank you for tutorials roslinpl and more tutorials to come. Its a bit hard because im not good at codes. But still im willing to do this anyway.

Hello,

Step by step my friend. I'm sure you can be the BBCode master.

Try to follow my lessons and try to recreate images from lesson's exercises. Try to experiment with it.
All you need is patience and time.


Best wishes.

[roslinpl]

Lesson 8: BBCode Drawing Basics lvl.III

We alreadu know the most important things about BBCode signatures. It's time to create a simple signature for Serior/Hero/Legendary Members.
Let say that we want to create a signature which will looks like:

░░░░░░░▄▄▄▄▄▄ ░░░░▄██████████▄ ░░░██████████████ ░░██████░▐▌░██████ ░█████░░░░░░░▀█████ ██████▄▄░░▄▄░░██████ ████████░░▀▀░▄██████ ████████░░▄▄▄░░█████ ██████▀▀░░▀▀▀░░█████ ░█████░░░░░░░░█████ ░░██████░▐▌░██████ ░░░██████████████ ░░░░▀██████████▀ ░░░░░░░▀▀▀▀▀▀ ░░░▀▀▀████████▀▀▀

We ♥ Bitcoin

I won't write a step by step tutorial but instead of that I uploaded a video for you where I captured a process of creation. I doubled the clip speed, in reality it took me 18.5min. Video length is 9min12sec.

Lesson 8 video tutorial: https://youtu.be/McKHrx1tBK0

When we want to replicate an image/logo with BBCode it's good to prepare and upload an image file so we can check our results on the run with an original image.

Lesson 8 Bitcoin logo image: http://i.imgur.com/gPmC4Xi.png

It's simplified Bitcoin logo - I adjusted pitch angle to make it looks better in BBCode. 2pt ASCII chars are not perfect for BBCode drawings but at least 2pt is most compatible as we already know from the lesson 4.


Lesson 8 BBCode signature code:

Code:

[center][table]
[tr]
[td]
[size=2pt][color=#f90][color=transparent]░░░░░░░[/color]▄▄▄▄▄▄
[color=transparent]░░░░[/color]▄██████████▄
[color=transparent]░░░[/color]██████████████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░[/color]▀█████
██████▄▄[color=transparent]░░[/color]▄▄[color=transparent]░░[/color]██████
████████[color=transparent]░░[/color]▀▀[color=transparent]░[/color]▄██████
████████[color=transparent]░░[/color]▄▄▄[color=transparent]░░[/color]█████
██████▀▀[color=transparent]░░[/color]▀▀▀[color=transparent]░░[/color]█████
[color=transparent]░[/color]█████[color=transparent]░░░░░░░░[/color]█████
[color=transparent]░░[/color]██████[color=transparent]░[/color]▐▌[color=transparent]░[/color]██████
[color=transparent]░░░[/color]██████████████
[color=transparent]░░░░[/color]▀██████████▀
[color=transparent]░░░░░░░[/color]▀▀▀▀▀▀
[color=transparent]░░░[/color][color=#e1e1e1]▀[color=#d3d3d2]▀[color=#c6c4c3]▀[color=#b8b6b4]█[color=#aaa8a5]█[color=#9c9a96]█[color=#8f8b87]█[color=#817d78]█[color=#918e8a]█[color=#a19e9b]█[color=#b1afad]█[color=#c1c0be]▀[color=#d1d0d0]▀[color=#e1e1e1]▀
[/td]
[td]
[size=25pt][b][i][color=#f90]We [color=red]♥[/color] Bitcoin[/b][/size]
[/td]
[/tr]
[/table][/center]

[LoyceV]

My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.

A screenshot from the OP:
On the left: Chromium. On the right: Firefox.


It's been like this for as long as I can remember. My own signature doesn't show correctly either.
Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem?

[roslinpl]

My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.

(...)

It's been like this for as long as I can remember. My own signature doesn't show correctly either.
Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem?

Hey,

You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 for more info.



Best regards.

[poptok1]

My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.
-snip-

It is also a matter of default fonts. Fonts processors in Linux systems are known to be chimeric (if there is such a word) Try to install some third party "clear font/win. alike" font renderer, it may help.
I have had this problem with my puppy OS, manual setting up default fonts for firefox helped a bit but on the other hand, other sites where displayed incorrectly. Its a hassle

@roslinpl 2bad you didn't make this thread self-moderated...
Peoples (valuable) opinions disrupt the reading (including mine)
THX 4 sharing this roslin, knowledge is commodity, 1 knowledge = 1BTC and there are markets for it

[darklus123]

II really wanted to learn BBcodes to have a side line in this forum, Thank you so much i hope that you could update the tutorials above and if  you can create some video tutorials that would be great. Just want to ask something were can we possibly test those codes? Especially if we do not have hero/sr ranks accounts for testing


cheers,

Hey,

in my opinion the best environment for testing is Google Chrome web browser and a 'post preview' and if we do everything right the signature should work just fine.

1) When you're working on a signature put your signature code inside 'quote' tags. 'Quoted text box' has similar style as 'signature space'.
2) Remember about signatures styling rules.
3) If everything looks good you can remove 'quote' tags and copy your signature code into your profile settings.

Thank you so much, I have been working on this slowly haha atleast I am learning. Good job to you do i haven't tested it yet but i will as soon as i am ready for my first signature design


regards,


Edit: i just tested it on the lesson 3 and i  think that it just work fine

[youdacapt]

I think there was some kind of premium tool to generating code automatically without manual work. But I didn't find it.

By the way. Is it possible to make a BBcodes could move like Gif format?

[Vikingr]

I think there was some kind of premium tool to generating code automatically without manual work. But I didn't find it.

By the way. Is it possible to make a BBcodes could move like Gif format?

I have searched for it on google but not found any tool to generate the code directly for the signature of bitcointalk.

and it is not possible to make animated things in bbcode signatures

[banjir]

omg finally i found this thread about how to creat some signature BBcode.
thankyou very much for tutoriasl i was bookmark your link now and ready for learn everyday '' wish me luck ''

[veleten]

My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.

(...)

It's been like this for as long as I can remember. My own signature doesn't show correctly either.
Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem?

Hey,

You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 for more info.



Best regards.

there is a tool to test compatibility with over 1000+ desktop browsers
and any combination of 0S, device and browser
it is not cheap if you buy a subscription,BUT there is a free trial that one can use to make sure your code looks ok
https://www.browserstack.com/

[roslinpl]

My Firefox 50.1.0 (running on Linux Mint) has a problem displaying several signatures.

(...)

It's been like this for as long as I can remember. My own signature doesn't show correctly either.
Adjusting zoom-settings doesn't matter. I prefer using Firefox though. Am I the only one with this problem?

Hey,

You're not the only one. This is the main problem with BBCode designs. Different OS, different browser might cause a BBCode design will glitch. There is no possibility to create a design which will be 100% compatible with all OS and browsers. Read lesson 4 for more info.



Best regards.

there is a tool to test compatibility with over 1000+ desktop browsers
and any combination of 0S, device and browser
it is not cheap if you buy a subscription,BUT there is a free trial that one can use to make sure your code looks ok
https://www.browserstack.com/

Hey,

thanks a lot for sharing it with us.
Seems like a cool tool!


Thanks everyone for your participation in the lessons.
I'm glad that someone find them useful


More lessons coming soon


Stay tuned.

Best wishes.

[apoorvlathey]

Nice tutorials rosinpl ! Keep them coming 

I also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo.

Hope you like it !

Check is out here :

[Joel_Jantsen]

Nice tutorials rosinpl ! Keep them coming 

I also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo.

Awesome.Never knew that,it simplifies process so much! I have been a idiot all my life wasting hours aligning the pixels and still couldn't get a perfect picture.I should start looking out for signature design contests now.

[Diced90]

Hope you like it !

I like it and thanks for the share, though it seems people have not yet got into signature making looking at the number of views and likes

Waiting for lesson 5 now sensei Rosinpl

[cluit]

I would like to appreciate roslinple and all other who sharing experience and tutorials, I will read and watch all tutorials and try to participate in signature designing contests too.

Thank You so much.

[V1saya]

Cool. This is very helpful. I studied some basic coding more than a decade ago but i'll try to read this when needed. I leave a message so I can easily track this. Thanks for the share. Much appreciated.

[ice18]

Thank you for this thread, very useful tutorials maybe I can use it for future reference.

[roslinpl]

Nice tutorials rosinpl ! Keep them coming  

I also made a video displaying how to make pixel art using photoshop ! With this trick it is easier to make complex designs faster and it is better than pixel by pixel imo.

Hope you like it !

Check is out here :

Hello,

Thanks for sharing! It's pretty impressive!

The only thing I would mind about is using 'white-space' inside of a BBCode pixel image design placed in a table rows( [ td ] ).
Because when you put 'white-space' at front of a row the space might be invisible.

For example:

ONE_WHITE_SPACE_BEFORE_THIS_LINE   TWO_WHITE_SPACES_BEFORE_THIS_LINE

Example code:

Code:

[quote]
[table]
[tr]
[td]
 ONE_WHITE_SPACE_BEFORE_THIS_LINE
  TWO_WHITE_SPACES_BEFORE_THIS_LINE
[/td]
[/tr]
[/table][/quote]

When you're working on a design it's important to know about it.
I'm using transparent characters instead of white-spaces because of that. It waste more characters but it's more accurate technique IMO while drawing with BBcode.

But no matter what, you have good skills and I would just suggest to think about replacing 'white-spaces' with transparent characters.
Thanks again for your tutorial video. It's very interesting when we combine knowledge.

Hope you like it !

I like it and thanks for the share, though it seems people have not yet got into signature making looking at the number of views and likes

Waiting for lesson 5 now sensei Rosinpl

Actually you can find 8 lessons here
Lesson 9 coming soon. A short one but useful



Thanks everyone for kind words!

Lesson 9 coming up (Edited: done ).


Best wishes.

[stardustin]

Thank you very much man, this was a great tutorial, I am new here but from the begining I was interested about how to create bbcode signature. Don't forget that there are some people, which will like your work.

[zzTAz]

thank you for this awesome work

[roslinpl]

Lesson 9: "Inside of tables": Image size

This is a quick lesson or perhaps just a quick tip.
Lesson 9 is not related with signatures but it's related with BBCode and it's good to know about it when you think about thread design improvements etc.

If you want to create a table and put some images inside of table rows your image will be visually resized (to smaller).
Adding width attribute to our image will not solve the problem.

Example:

150px x 150px Bitcoin logo But it's not 150x150...

150px x 150px Bitcoin logo Width=150 added. Still it's not 150x150..

Example code:

Code:

[quote][table]
[tr]
[td]
[img]http://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
But it's not 150x150...
[/td]
[/tr]
[/table][/quote]

[quote][table]
[tr]
[td]
[img width=150]http://i.imgur.com/OaJobp5.png[/img]
[/td]
[td]
150px x 150px Bitcoin logo
Width=150 added. Still it's not 150x150..
[/td]
[/tr]
[/table][/quote]

How to solve the problem?
In a same row where the image is we need to type a random line of text which will be longer than image width.
And make it transparent. ( color=transparent ).

fffffffffffffffffffffffffffffff

150px x 150px Bitcoin logo Now without any width attribute it's displayed as 150px x 150px

Code:

Code:

[quote][table]
[tr]
[td]
[img]http://i.imgur.com/OaJobp5.png[/img]
[color=transparent]fffffffffffffffffffffffffffffff[/color]
[/td]
[td]
150px x 150px Bitcoin logo
Now without any width attribute it's displayed as 150px x 150px
[/td]
[/tr]
[/table][/quote]

Thank you very much man, this was a great tutorial, I am new here but from the begining I was interested about how to create bbcode signature. Don't forget that there are some people, which will like your work.

thank you for this awesome work

Hello,

You're welcome

Best wishes.

[roslinpl]

Hello,


I noticed that using 'monospace' font family for BBCode designs makes a design more compatible on different systems even Mac OSX.

Code:

[font=Monospace][size=2pt]██████[/size][/font]

But there is one problem, it doesn't look so well under Linux / Windows / Android.
But it looks "same" under ie. Windows Chrome & OSX Safari..

In some cases it may be better to draw BBCode designs with Monospace font. Especially for single color / black designs.

I will draw some examples to compare later on.


Have a great day and best wishes.

[monsanto]

Thanks for creating these lessons  

[Russlenat]

Thank you also for these thread. It help me a lot. now I know how to make beautiful threads...

[fitraok09]

Lesson 10 still coming soon 
I still learn from you... 

[Renji Abarai]

Impressive! Very informative and glad you have made this tutorial. I am searching this tutorial for a long time. It is timely that I have more free time now for an early vacation, now I can focus on this. Continue to make this informative tutorial, really help us to especially those aspiring campaign signature designer.

[roslinpl]

Thank you everyone!

Your opinions are like the honey to my heart

It's my pleasure to continue with tutorials, I just need time to write another proper lesson/tutorial which will take your skills to the another level

Keep an eye on this thread and soon it will bring the lesson 10 to all of you


Best wishes.

[roslinpl]

Hello,

Just a quick drop

If you need to draw a logo or an element which shape is a circle you can start from this template:

░░░░░░▄▄▄████████▄▄▄ ░░░░▄████████████████▄ ░░▄████████████████████▄ ░████████████████████████ ▐████████████████████████▌ ██████████████████████████ ██████████████████████████ ██████████████████████████ ▐████████████████████████▌ ░████████████████████████ ░░▀████████████████████▀ ░░░░▀████████████████▀ ░░░░░░▀▀▀████████▀▀▀

Code:

[table]
[tr]
[td]
[font=monospace][size=2pt][color=#000]
[color=transparent]░░░░░░[/color]▄▄▄████████▄▄▄
[color=transparent]░░░░[/color]▄████████████████▄
[color=transparent]░░[/color]▄████████████████████▄
[color=transparent]░[/color]████████████████████████
[color=transparent][/color]▐████████████████████████▌
[color=transparent][/color]██████████████████████████
[color=transparent][/color]██████████████████████████
[color=transparent][/color]██████████████████████████
[color=transparent][/color]▐████████████████████████▌
[color=transparent]░[/color]████████████████████████
[color=transparent]░░[/color]▀████████████████████▀
[color=transparent]░░░░[/color]▀████████████████▀
[color=transparent]░░░░░░[/color]▀▀▀████████▀▀▀
[/td]
[/tr]
[/table]

It's made with 'Monospace' font so it should looks the same on Linux, Android, Windows, iOS and OSX.



Lesson 10 will come I'm just really super busy with all the projects, orders and stuff
Lesson 10 is dedicated to 'Monospace' font, so let say the post above is a teaser



Best wishes.

[sir.humus]

Lesson 10 will come I'm just really super busy with all the projects, orders and stuff
Lesson 10 is dedicated to 'Monospace' font, so let say the post above is a teaser

Best wishes.

Can't wait for your next lesson...
I already tries to play with some of your examples and it's really cool.
I have a business idea, and when the day will come I hope to make a signature campaign, and design my own signature based on your lessons.

Thanks for your effort, we need more people like you in this forum.

[CHRISBIN702]

Great tutorial. Wish I'd known about this a month ago.
Wondering if you'd mind answering a question. I have made my signature that you can see below. I've just recently created a cool little character that I want to add either on the side/sides of the signature or right in the middle of the top line. (In between #1 and Bitcoin) How would I go about that? I'm self-taught and really racking my brain over this.

Here is the signature code for the one I'm using now.

Code:

[center][url=http://www.tinyurl.com/runcpaog][font=Arial Black][size=16pt]【[btc]〖[btc]【[btc]〖RunCPA #1 Bitcoin Affiliate Network〗[btc]】[btc]〗[btc]】[/size][/font][/url]
[color=#3333ff][size=2][font=Comic Sans MS]Tired of clicking faucets? Do you know how to use the internet? If you answered yes then you should be earning to your full potential with RunCPA[/font][/size][/color]

Which translates to:

【BTC〖BTC【BTC〖RunCPA #1 Bitcoin Affiliate Network〗BTC】BTC〗BTC】
Tired of clicking faucets? Do you know how to use the internet? If you answered yes then you should be earning to your full potential with RunCPA

Please, any advice would be greatly appreciated.

[roslinpl]

Great tutorial. Wish I'd known about this a month ago.
Wondering if you'd mind answering a question. I have made my signature that you can see below. I've just recently created a cool little character that I want to add either on the side/sides of the signature or right in the middle of the top line. (In between #1 and Bitcoin) How would I go about that? I'm self-taught and really racking my brain over this.

(...)

Please, any advice would be greatly appreciated.

Hello,

you won't be able to add a BBCode drawing in the middle of the top line because it will in same time split your bottom line.
Well it's kinda possible to do it but you will need to make it all in one [ td ]. All lines in one [ td ]. Kinda tricky but possible.


I'm here guys just for a second now to tell you that latest Chrome Browser update is pretty bad for BBCode artists xD ...

I sent report to Chrome Help Center ...
Look what they have done ! ██████████████████████████████████████████████████

If you are under Chrome  59.0.3071.86 you will notice: can you see the thin lines between each of █, all those lines are in different color since latest Chrome update xD eh ...

PS. Hmm..  it's pretty strange, I tried to downgrade Chrome but I still see those lines ... perhaps I would need to better clear up Chrome files. Eh.
PS2. Version 60.0.3112.50 (Official Build) beta (64-bit) doesn't fix the issue.

I hope they will fix that soon!

Best wishes.

[Batwingoz]

BB code is used to make signatures on this forum ?
I am interested in your content very much.

[yefi]

Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts.

[CHRISBIN702]

Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts.

This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices?

[roslinpl]

Lesson 10: "Advanced BBCode Drawing Techniques lvl.I"

I promised to say something more about drawing with 'Monospace' font.

The 'Monospace' seems to be the only font which will keep 'the same' character width, gap between two characters - so it basically will looks the 'same' under various operating systems.
(But surely not under all of them).

So even Mac users with older versions of Safari will see 'the same' drawing as let say latest Chrome Version. I added 'let say' because latest Chrome messed up a bit our designs
I posted about it few days ago.

Alright, so where's the catch?

So the only problem is that 'Monospace' drawings doesn't looks so solid as same drawing made with a default font.
But it has some important advantages.

It's not only that it will looks 'the same' under different browsers. But also! You can draw your designs with 1px, 1pt, 2px, 2pt and still it will looks the same under various browsers.
But! The same image created in different 'Monospace' font sizes will have different color saturation depending on the font size.

Example:

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=2pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=2px

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=1pt

░░░░░░███ ░░░░█████ ░░░█████████ ░░░███████ ░░██████████ ░░███████████ ░███████████ ░░█████████ ░░░░██████ ░░░█████░░░░█ ░████████░░███ ██████████████ █████████████ ░██████████ ░░████████ ░░█████████░█ ░░███████████ ████████████ ██████░░░░█ ██ ░██ Size=1px

Code:

Code:

[table]
[tr]
[td]
[font=Monospace][size=2pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=2px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=2px[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1pt][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1pt[/b][/size][/center]
[/td]
[td]
[font=Monospace][size=1px][color=#fe2f18][color=transparent]░░░░░░[/color]███
[color=transparent]░░░░[/color]█████
[color=transparent]░░░[/color]█████████
[color=transparent]░░░[/color][color=#ac5501]████[/color][color=#fd9359]█[/color][color=#ac5501]█[/color][color=#fd9359]█[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░░[/color][color=#ac5501]█[/color][color=#fd9359]██[/color][color=#ac5501]██[/color][color=#fd9359]██[/color][color=#ac5501]█[/color][color=#fd9359]███[/color]
[color=transparent]░[/color][color=#ac5501]██[/color][color=#fd9359]█████[/color][color=#ac5501]████[/color]
[color=transparent]░░[/color][color=#ac5501]██[/color][color=#fd9359]███████[/color]
[color=transparent]░░░░[/color][color=#fd9359]██████[/color]
[color=transparent]░░░[/color]█[color=#ac5501]████[/color][color=transparent]░░░░[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]█[color=#ac5501]█████[/color][color=transparent]░░[/color][color=#fd9359]███[/color]
[color=#fd9359]█[/color][color=#ac5501]██[/color]██[color=#ac5501]██████[/color][color=#fd9359]███[/color]
[color=#fd9359]██[/color][color=#ac5501]██[/color]█[color=#ac5501]███████[/color][color=#fd9359]█[/color]
[color=transparent]░[/color][color=#fd9359]█[/color]████[color=#ac5501]█████[/color]
[color=transparent]░░[/color]█████[color=#ac5501]██[/color]█
[color=transparent]░░[/color]█████████[color=transparent]░[/color][color=#ac5501]█[/color]
[color=transparent]░░[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]█[/color]█████████[color=#ac5501]██[/color]
[color=#ac5501]██[/color]████[color=transparent]░░░░[/color][color=#ac5501]█[/color]
[color=#ac5501]██[/color]
[color=transparent]░[/color][color=#ac5501]██[/color]
[center][size=10pt][b]Size=1px[/b][/size][/center]
[/td]
[/tr]
[/table]

You can test it on your own, just open this page under different browsers to compare results.
Still - it's not 100% compatible with all browsers on different operating systems. But it's much better than default font compatibility.


Best regards.

Great tuts man. Had no idea you could use transparent colour for fixing the table glitch. I'd been using non-breaking ASCII space (alt+255 or %A0), but that wasn't retained when editing posts.

Thanks! And thanks for sharing another way of fixing the 'table glitch'.
It didn't occur to me until you told about it.

This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices?

it might be. Perhaps it is related to that table glitch.
Can you post that fragment of a code which seems to be glitched?
I will have a look at it if you want me to.

BB code is used to make signatures on this forum ?
I am interested in your content very much.

Yes, signatures here are made with BBCode.
Glad you like the content.

As always thanks to everyone who enjoy those tuts and learn from it.
It's truly my pleasure to continue with more tutorials.

Best wishes.

[CHRISBIN702]

This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices?

it might be. Perhaps it is related to that table glitch.
Can you post that fragment of a code which seems to be glitched?
I will have a look at it if you want me to.

That is the same one in my current Sig.

Code:

[table][tr][td][size=2pt][color=#0008ff]           ██                                    ██[/color]
[color=#0051ff]          ███                                ███[/color]
[color=#009aff]         ████▇▆▅▄▄▄▅▅▆▇▇███[/color]
[color=#00cdff]     ██████▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄██[/color]
[color=#1de71e]    ████░░░░░░░░░░░░░░░░░░██           [/color]
[color=#00ff9a]  ████░░░░ [color=black]█[/color]░░░░░░░[color=black]█[/color]░░░░██[/color]
[color=#00ff35]  ████  ░░░░░░░░░░░░░░░░░██[/color]
[color=#1de71c] ████░░░░[color=blue]▇▆▆▅▄▃▂▁◢[/color]░  ██[/color]
[color=#39ce03] ████░░░░░░░░░[color=blue]▌   ▌[/color]░░░░░ ██   [/color]
[color=#1de71e] ███████▅▅▅▅▅▆▆▆▇▇███[/color]
[color=#00ff39]████████████████████████[/color]
[color=#00ad7b]████████████████████████[/color]
[color=#005abd]████████████████████████[/color]
[color=#0008ff]████████████████████████[/color]
[color=#0051ff] ████████████████████████[/color]
[color=#009aff]  ███████████████████████[/color]
[color=#00cdff]    ██████████████████████[/color]
[color=#00ffff]        ██                         ██[/color]
[color=#00ff9a]        ██                           ██[/color]
[color=#00ff35]        ██                              ██[/color]
[color=#1de71b]     ██                                   ██[/color]
[color=#39ce00] ███                                   ██[/color]
[color=#1de71c] █                                     ██[/color]
[color=#00ff38] █                                       ▀▀▀▀ [/color][/size][/td]

 This next one I will post below is the one I really like though. I haven't done any formatting yet. It's just drawn. I really like shape. It's accurate to the little guy.

Code:

[size=2pt]         ▄                                 ▄          
          ██▄                        ▄██            
          ████▆▅▄▂▁▂▂▄████        
        ███▀▀▀▀▀▀▀▀▀▀▀▀▀███          
       ███                              ▀█          
      ███         ⏺               ⏺    █        
     ███                                 █            
    ███        █▆▅▂▁▂▄█     █                
   ████                 ▌ ▌          █                      
  █████▇▆▅▄▂▁▁▂▄▅▆██                      
  █████████████████████              
  █████████████████████                
  ▀███████████████████                
  ▀███████████████████                  
   ▀██████████████████                
             ██                  ██                
           ██                      ██              
     ███                       ███              
     █                         ██              
     █                         ▀▀▀▀▀  [/size]
[/quote]

WOW! That is not at all what it looks like between my code tags. It looks exactly like the 2pt size one below. I really need to start using te transparent letter trick right?

        ▄                                 ▄          
          ██▄                        ▄██            
          ████▆▅▄▂▁▂▂▄████        
        ███▀▀▀▀▀▀▀▀▀▀▀▀▀███          
       ███                              ▀█          
      ███         ⏺               ⏺    █        
     ███                                 █            
    ███        █▆▅▂▁▂▄█     █                
   ████                 ▌ ▌          █                      
  █████▇▆▅▄▂▁▁▂▄▅▆██                      
  █████████████████████              
  █████████████████████                
  ▀███████████████████                
  ▀███████████████████                  
   ▀██████████████████                
             ██                  ██                
           ██                      ██              
     ███                       ███              
     █                         ██              
     █                         ▀▀▀▀▀  
[/quote]

I forgot to thank you for taking the time to help me and for posting these tutorials too. I really appreciate it. I learned most of my BBcode by reverse engineering signature campaigns manager pages. Then I found your posts and my skill has been improving ever since.

[roslinpl]

This "table glitch"... Is it the reason that the face of my character is spaced out on some browsers and devices?

it might be. Perhaps it is related to that table glitch.
Can you post that fragment of a code which seems to be glitched?
I will have a look at it if you want me to.

That is the same one in my current Sig.

(...)

I forgot to thank you for taking the time to help me and for posting these tutorials too. I really appreciate it. I learned most of my BBcode by reverse engineering signature campaigns manager pages. Then I found your posts and my skill has been improving ever since.

Hey,

Yes, I'm pretty sure it has to be related with a table glitch.

Using transparent characters inside of the image instead of just a whitespace is much more compatible and can get better results.
The only problem is that it takes more characters to make it.


Best wishes.

[CryptoWorld87]

I want to learn also this kind of job i want extra money i hope i can learn this in the future i dont go to college because we dont have enough money to sustain the tuition fee its hard for me to understand how to do this but maybe if i try hope i can do this so i can earn extra money thank you so much for this oppurtunity so i can learn this a lot in computer editing

[CHRISBIN702]

I want to learn also this kind of job i want extra money i hope i can learn this in the future i dont go to college because we dont have enough money to sustain the tuition fee its hard for me to understand how to do this but maybe if i try hope i can do this so i can earn extra money thank you so much for this oppurtunity so i can learn this a lot in computer editing

You can do this. Start this tutorial at pg.1 Try to do all roslinpl's examples and you'll get the hang of it. Then check out the different available signatures in the signature campaigns thread. Don't give up and don't be afraid to fail. If you're not failing at things then your not trying.