Ｄｉｇｉｔａｌｌｙ Ｄｉｓｔｉｎｃｔ: BBCoding Tutorial/Help Thread

[Erwin Smith]

hi there!! is there any way to get the image inside the pink bars, like in the corner?? thanks again!

Code: Select all

[left][img]http://flont.veer.com/flontpng.aspx?text=SOMETIMES&size=45&maxWidth=540&fontId=25992&lineheight=54&backcolor=01FFFFFF&color=FFef6ea8&wrap=false&tracking=0[/img]
[size=150][color=#F6CEE3]███████████████████████████
██
██
██
██
██
██
██
██[/color][/size][/left]
[left][right][img]http://imagehost4.online-image-editor.com/oie_upload/images/513535Oq37rX4P8K/51345w9OkK2iq.jpg[/img][/right][/left]

I redid the code so the box was based off the box template at the front of the thread like this:

╔═════════════╗

║
║
║
║
║
║
║

INSERT TEXT HERE

║
║
║
║
║
║
║
╚═════════════╝

Code: Select all

[left][size=200]╔═════════════╗[/size]
[right][size=200]║
║
║
║
║
║
║[/size][/right][right]INSERT TEXT HERE[/right][size=200]║
║
║
║
║
║
║[/size]
[size=200]╚═════════════╝[/size][/left]

What it turned out like was the following. If you want the image to be more centered, there are transparent x's that are holding it to the side. I hope this helps!

Code: Select all

[left][img]http://flont.veer.com/flontpng.aspx?text=SOMETIMES&size=45&maxWidth=540&fontId=25992&lineheight=54&backcolor=01FFFFFF&color=FFef6ea8&wrap=false&tracking=0[/img]
[size=150][color=#F6CEE3]████████████████████████[/color][/size]
[right][size=150][color=transparent]██
██
██
██
██
██
██
██[/color][/size][/right][right][color=transparent]xxxxxxxxxxxxxxxxx[/color][/right][right][img]http://imagehost4.online-image-editor.com/oie_upload/images/513535Oq37rX4P8K/51345w9OkK2iq.jpg[/img][/right][size=150][color=#F6CEE3]██
██
██
██
██
██
██
██[/color][/size][/left]

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

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

xxxxxxxxxxxxxxxxx

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

[Erwin Smith]

Announcement:

The Layout templates are up and going. They are located here.
Thank you to everyone who will contribute to this list in the future!

Edit:
I have also tidied up the hex colour list here

[KlMLlP]

ty

[gods]

Adding Silhouettes - GIMP

this tutorial is to show you how to add silhouettes to images with the program GIMP. you do need to download it, but the program is free and for both mac & windows. if you still have questions about the process by the end of the tutorial, let me know! this tutorial is for png images only!
1. Select your image.

for this tutorial, i am using this image i edited in the transparency tutorial. images can be of any side, but for this to work they must be transparent.

2. Open in GIMP & duplicate layer.

to open your image, just go to "file" then "open". once you've got it open, right click the layer in the layer panel. it brings up a menu like the one pictured below.



click on "duplicate layer", then hide the top layer. the little eyes to the left of the layer titles are the hide/display buttons. to hide a layer, click the eye. it will disappear. right now you wont notice a difference, but its important for the next step.


3. Colorize the bottom layer.

for this step, make sure you have the bottom layer selected. for coloring to work, your image needs to be in RGB mode. to check/switch the mode, go to "image" then "mode". the one its currently set on is checked. as you can see, mine is set to RGB already.



colorize is a function in GIMP that shades the layer with your selected color. i use it to turn the whole layer one color (its more efficient than selecting & filling areas). to use it, go to the "colors" menu, then "colorize". it brings up a popup. for mine, i always turn the whole layer white or black. for white, i just turn the lightness all the way up to 100.



now you could leave the layer as just white if you want your silhouette to be white, but i want mine different colors. go back to colorize and fiddle with the hue, saturation, and lightness settings until you find your desired color. if youre working on an all-white layer you need to bright the lightness down below 0 for this part.
4. Move the layers.

now you've colored your silhouette! display the top layer again and use the move tool (the four arrows shaped like a +) to place the silhouette however you want behind your original image. if you want multiple silhouettes, just duplicate the colorized layer and change the color. i am using two in my own.


5. Merge & crop image.

the next step is merging all the layers into one. make sure you've positioned everything correctly, since once you merge them you cant move layers individually. to merge, right click the top to bring up the menu like before. click "merge down" until you have one layer left.

after the layers are merged, you will have to crop the image. depending on how you moved the the silhouette layers, some might go off the edge. to fix this, go to "image" and then "autocrop image". this will crop off empty space, but will also extend the image boundaries to display the cut off parts.

once you do that, you can export & save your image! you can name it whatever you want, but make sure it has .png at the end to keep the transparency. below are my settings for .png images.



and here is what my image looks like finished!

keywords: silhouette, image manipulation, png, gimp tutorial, tutorial, image editing

[lopez arguello]

hey im back
i'm probably really annoying bc i dont know code

but could someone help me get the 'was gonna' below the 'this'? i've been trying everything and it didn't work.

Code: Select all

[left][img]http://49.media.tumblr.com/06863e585d1bf588cbfede032793df68/tumblr_nxxnqezYqG1um01l5o3_250.gif[/img]
┏ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┓[size=85]
[color=transparent]xx[/color]hey, i'm castiel!! i like dan howell and phil lester,
[color=transparent]xx[/color]twenty one pilots, halsey, fall out boy, and super
[color=transparent]xx[/color]natural!! i'm a piece of trash but i'll see ya around![/size]
┗ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┛
[img]http://i.imgur.com/1QUd0Bu.png[/img][/left][left][img]http://flont.veer.com/flontpng.aspx?text=I%20NEVER%20SAID&size=48&maxWidth=540&fontId=25992&lineheight=58&backcolor=01FFFFFF&color=FF8293ca&wrap=false&tracking=0[/img]
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈[i]ＴＨＩＳ！ ＴＨＩＳ！[/i]┈┈┈┈

┏ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┓[size=85]
[color=transparent]xxxx[/color]seeing panic! at the disco 07/09/16
[color=transparent]xxxx[/color]getting my first choker hopefully it fits
[color=transparent]xxxx[/color]i really like halsey its not even funny[/size]
┗ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┛

[img]http://i.imgur.com/FfOnpjD.gif[/img][/left]
[left][img]http://flont.veer.com/flontpng.aspx?text=WAS%20GONNA&size=12&maxWidth=540&fontId=25992&lineheight=46&backcolor=01FFFFFF&color=FF8293ca&wrap=false&tracking=0[/img][/left]

[gods]

hey im back
i'm probably really annoying bc i dont know code

but could someone help me get the 'was gonna' below the 'this'? i've been trying everything and it didn't work.
-snip-

not annoying at all! i think what i did below is what youre looking for? i just copied the "was gonna" and put it underneath.



Code: Select all

[left][img]http://49.media.tumblr.com/06863e585d1bf588cbfede032793df68/tumblr_nxxnqezYqG1um01l5o3_250.gif[/img]
┏ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┓[size=85]
[color=transparent]xx[/color]hey, i'm castiel!! i like dan howell and phil lester,
[color=transparent]xx[/color]twenty one pilots, halsey, fall out boy, and super
[color=transparent]xx[/color]natural!! i'm a piece of trash but i'll see ya around![/size]
┗ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┛
[img]http://i.imgur.com/1QUd0Bu.png[/img][/left][left][img]http://flont.veer.com/flontpng.aspx?text=I%20NEVER%20SAID&size=48&maxWidth=540&fontId=25992&lineheight=58&backcolor=01FFFFFF&color=FF8293ca&wrap=false&tracking=0[/img]
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈[i]ＴＨＩＳ！ ＴＨＩＳ！[/i]┈┈┈┈
[img]http://flont.veer.com/flontpng.aspx?text=WAS%20GONNA&size=12&maxWidth=540&fontId=25992&lineheight=46&backcolor=01FFFFFF&color=FF8293ca&wrap=false&tracking=0[/img]
┏ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┓[size=85]
[color=transparent]xxxx[/color]seeing panic! at the disco 07/09/16
[color=transparent]xxxx[/color]getting my first choker hopefully it fits
[color=transparent]xxxx[/color]i really like halsey its not even funny[/size]
┗ [color=transparent]xxxxxxxxxxxxxxxxxxxxxxxxxxxx[/color]┛

[img]http://i.imgur.com/FfOnpjD.gif[/img][/left]

[apprentice_]

speaking of color codes and stuff, I personally use this site to find the color(s) I'm looking for. Don't really know if that helps but I didn't see it linked anywhere in the tutorial so, you know... thought I'd mention it.

Anyway,

Yo, I want to try and use this rotate site thing but when I do the image just comes out broken? I don't really know how to use the site tbh so for all I know I'm making a really dumb mistake but yeah

Anyone know how to fix this?

image does this

Not to be bothersome, but this is still an issue. I've tried multiple things and taken advice from other users, but apparently I'm still doing something wrong? I seriously have no idea

*****EDIT: Problem solved. Conclusion: the site I was trying to use is super lame. I finally just tried another site and it worked the first time I tried.

[LaurelLeaf]

Hi, does anyone knows how to put an avatar next to our names and stats (time joined, view my pets and all that)?
(like in this post on the right there is no picture, but the person above me has a picure of an anime face)

[LuminousCrown]

Hi, does anyone knows how to put an avatar next to our names and stats (time joined, view my pets and all that)?
(like in this post on the right there is no picture, but the person above me has a picure of an anime face)

Go to "My account" on the right side and there should be a thing that says "profile" c: You get to chose for CS pictures or your own saved. If it is your own make sure it is 100x100 If it is not use a image resize website.

[LaurelLeaf]

Hi, does anyone knows how to put an avatar next to our names and stats (time joined, view my pets and all that)?
(like in this post on the right there is no picture, but the person above me has a picure of an anime face)

Go to "My account" on the right side and there should be a thing that says "profile" c: You get to chose for CS pictures or your own saved. If it is your own make sure it is 100x100 If it is not use a image resize website.

Thanks