RP Post Layout Guide & Tutorial + Sources + Codes + Tips

Do you want a...

Pic Monkey Tricks Tutorial?	13.9%	[ 120 ]
GIMP Tricks tutorial?	23.0%	[ 199 ]
Additional links to model search?	4.4%	[ 38 ]
More codes!	25.9%	[ 224 ]
POLL GOLD! YES!	32.9%	[ 285 ]
Total Votes:			[ 866 ]

[In Desolation]

CONT'D FROM PAGE 2. INVISIBLE SPACER, THE WHITE or TRANSPARENT IMGRIGHT

Link to previous tutorial post

What the code looks like:

[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][IMGleft]http://i1070.photobucket.com/albums/u485/doublefrappuccino/sweater_zpsbf6abb57.jpg[/IMGleft][list][list][list][list][list][IMGright]http://i1070.photobucket.com/albums/u485/doublefrappuccino/imgright_zpsff677a48.png[/IMGright][size=10]
Text. [color=color1][b]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/b][/color] Vivamus sem sem, lobortis eget sollicitudin id, sollicitudin eu elit. Vestibulum in elit nunc, ultricies consequat felis. [color=color2][i]Vivamus eu dolor id tortor interdum pharetra et a libero. [/i][/color]In sit amet est nibh, quis molestie risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius augue mi. Mauris eu lectus et nibh facilisis mattis eget et leo. Ut pharetra tortor sit amet nulla egestas semper. Praesent ac enim urna, in consectetur libero. Praesent semper purus ut mi cursus euismod. Aliquam aliquam, magna sit amet feugiat bibendum, massa libero gravida est, non mollis massa quam nec ipsum. Nam sollicitudin pretium tincidunt. Suspendisse quis nibh velit, nec congue risus. Aliquam erat volutpat. Integer et lacus lectus.
[/size]
[size=18]✈[/size][size=9] WHERE [x][/size]
[size=18]☻[/size][size=9] WITH WHO[x][/size]
[size=18]☎[/size][size=9] OOC [Go ahead and try to select this post or click and drag its elements. Highlight so you can see what I've done][/size][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]

My ImgLeft was only 200px so I added List codes before it to push it some more. Reserved List codes to place after it. ImgRight goes before text body

Here's a little cheat sheet.

ImgLeft is 100px, ImgRight is 25px
ImgLeft is 200px, ImgRight is 50px
ImgLeft is 300px, ImgRight is 75px
ImgLeft is 350px, ImgRight is 87px
ImgLeft is 400px, ImgRight is 100px...

WHY you ask? Why is the spacer so tiny? Because if the ImgRight is too wide then it competes for space with the ImgLeft. If one is too wide then your text will end up underneath them

L-Shapes require a little more math. Add the total length (height, tallness) of the L-Shape graphic to the individual length of the Top ledge. In algebra, the total is

2(Length of Top) + (Length of Bottom) = Length of Invisible ImgRight

[In Desolation]

PICMONKEY "TEXTURE" REVIEW

For reference. Tutorial found here. Instructions there need to be followed. This is a review of some aspects

1. Base picture can be any picture you want. I'm using this because I'm an artist by profession. The pose makes an interesting shape of silhouette



2. Second picture MUST be a dark or black picture with an all white background. When I search for one on Google Images I use [Search Tools] and sort it for the Large. I know my screencap says "Transparent" but Transparent images are unnecessary for this particular trick. For other tricks, most of the time Transparent is preferred



You cannot use a cluttered image

3. I have the pictures saved to my computer to upload into Picmonkey

4. This is what my second image is



5. Fade zero.



6. I make adjustments as needed. See. I flipped it horizontally and took it down from the default 110%



7. Yes. Apply. Save

[In Desolation]

INTERMEDIATE COLLAGING IN GIMP

1. Create a new file. 700 x 700 pixels or whatever size you choose. Configure Grid to whatever size is comfortable. Snap to Grid. Snap to Canvas Edges. Don't worry the Grid is invisible and won't show up in final product







2. Select two images. Preferably Images that will fit together somehow. For the example I have these two

3. Drop them into GIMP and resize if needed (use the Scale Tool). Click on the broken paperclip next to the numbers to keep proportions



Make the body at least fit into Image Height. My second image was a little small. I eventually shrink the body image to fit the height of the rose shape image






2. OK.... shape image goes on top of body image. Change layer mode from Normal to Screen or Addition



3. Look at the menu. Go to Colors > Desaturate. Switch from Luminosity to Average. See which of the three options looks better



(You can see tabs open where I'm simultaneously working on the tutorial... lol )

4. Go to Image > Flatten Image

5. Select and delete or erase anything you need to. If all is good. You should have one layer now

[In Desolation]

THIS IS AN EXAMPLE

Text. "Lorem ipsum dolor sit amet, consectetur adipiscing elit." Vivamus sem sem, lobortis eget sollicitudin id, sollicitudin eu elit. Vestibulum in elit nunc, ultricies consequat felis. Vivamus eu dolor id tortor interdum pharetra et a libero. In sit amet est nibh, quis molestie risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius augue mi. Mauris eu lectus et nibh facilisis mattis eget et leo. Ut pharetra tortor sit amet nulla egestas semper. Praesent ac enim urna, in consectetur libero. Praesent semper purus ut mi cursus euismod. Aliquam aliquam, magna sit amet feugiat bibendum, massa libero gravida est, non mollis massa quam nec ipsum. Nam sollicitudin pretium tincidunt. Suspendisse quis nibh velit, nec congue risus. Aliquam erat volutpat. Integer et lacus lectus.

[In Desolation]

BOOKEND POST LAYOUT How ImgLeft and ImgRight work

Basically.... This is the order of the coding

ImgLeft. ImgRight
List codes.
Header (Optional)
Text Body.
Footer
End List codes

I don't put the ImgRight on the bottom or else it'll be at the bottom

[imgleft]http://i60.tinypic.com/33cns7d.jpg[/imgleft][imgright]http://i59.tinypic.com/25zp3d0.jpg[/imgright][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list]
[b]NAME GOES HERE[/b]
[size=9]↳ OOC [[color=color1] ... [/color]] ↳ WHERE [[color=color2] ... [/color]] ↳ WITH [[color=color3] ... [/color]][/size]
[size=10]
Text. [color=colo1][b]"Lorem ipsum dolor sit amet, consectetur adipiscing elit."[/b][/color] Vivamus sem sem, lobortis eget sollicitudin id, sollicitudin eu elit. Vestibulum in elit nunc, ultricies consequat felis. [color=color2][i]Vivamus eu dolor id tortor interdum pharetra et a libero. [/i][/color]In sit amet est nibh, quis molestie risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius augue mi. Mauris eu lectus et nibh facilisis mattis eget et leo. Ut pharetra tortor sit amet nulla egestas semper. Praesent ac enim urna, in consectetur libero. Praesent semper purus ut mi cursus euismod. Aliquam aliquam, magna sit amet feugiat bibendum, massa libero gravida est, non mollis massa quam nec ipsum. Nam sollicitudin pretium tincidunt. Suspendisse quis nibh velit, nec congue risus. Aliquam erat volutpat. Integer et lacus lectus.
[/size]

[/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]

More about this. Both Left and Right are of equal Lengths. The ImgRight actually has a white portion on the left side I placed in using GIMP. Image > Canvas Size, paper clip broken, Flatten Image. There's other ways to do it but I won't explain unless requested. In a pinch. White borders from PicMonkey

The example below is short in length but my recommendation is to make ImgLeft and Img Right widths thinner than 300px but the Lengths should be about 1000px if you write a lot consistently, 700px is you write a medium amount. Takes some experimenting with

My example has 250px by 442px Images and it comfortably fits one paragraph.

[In Desolation]

NAME GOES HERE
↳ OOC [ ... ] ↳ WHERE [ ... ] ↳ WITH [ ... ]

Text. "Lorem ipsum dolor sit amet, consectetur adipiscing elit." Vivamus sem sem, lobortis eget sollicitudin id, sollicitudin eu elit. Vestibulum in elit nunc, ultricies consequat felis. Vivamus eu dolor id tortor interdum pharetra et a libero. In sit amet est nibh, quis molestie risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius augue mi. Mauris eu lectus et nibh facilisis mattis eget et leo. Ut pharetra tortor sit amet nulla egestas semper. Praesent ac enim urna, in consectetur libero. Praesent semper purus ut mi cursus euismod. Aliquam aliquam, magna sit amet feugiat bibendum, massa libero gravida est, non mollis massa quam nec ipsum. Nam sollicitudin pretium tincidunt. Suspendisse quis nibh velit, nec congue risus. Aliquam erat volutpat. Integer et lacus lectus.

[In Desolation]

FOR THOSE OF YOU WHO HAVE PHOTOSHOP THERE IS A THING CALLED THE MAGIC ERASER.
This is another method to get rid of the backgrounds in images and attain transparency.

Now, my version of Photoshop is different from yours but all Photoshop versions (including Elements) have the Magic Eraser (to my knowledge)

1. Get your image. Mess with the Levels, Curves, or Brightness & Contrast to clearly define the form





2. Check the Tolerance. If the figure is too close in value and color to the background grey shirt on grey background) then lower the Tolerance. Use the Background Eraser Tool to isolate problem areas first.



3. Now for the Magic Eraser. You may need to change the Tolerance of the Magic Eraser Tool from 20 to something as low as 5. If your background is completely white you may be able to get rid of it with one click on the background at 0 or 1 Tolerance.





4. Use the normal Eraser to get rid of any stray pixels. I'm lazy so I didn't really do it in this example

5. Save as .png then you're done

[In Desolation]

ATTENTION CODERS SMALL REMINDER

Stop cropping left and right halves of the L-Shape. Stop coding your L-Shapes like this:

[imgleft]http://[/imgleft][img]http://[img]

The position of your left bar might be fixed but the right ledge actually moves up and down on smaller browsers (like phones, tablets, etc). If you don't believe me then resize your browser's width from the corner and see

Start coding these. Codes like this:

[align=left][img]http://[/img][/align][imgleft]http://[/imgleft]

don't move regardless of browser size. A narrower browser simply crops the extra width off. Or the post suddenly has a horizontal scroll bar

If you don't make your L-Shape yourself. Request the GFX art shop to crop your L as top and bottom. With a code like I've shown you

Coders. This might explain why some customers no matter what you do have problems viewing their post lay out that you made them. It's not that their browser is too old. Or too outdated. Difference in screen resolution. 800 x 600 versus 920 x 1,080. Your monitor might be larger than theirs. Especially if you have a newer wide screen all-in-one computer and they have an old desktop

All the more reason to check with customers how big their screen resolution is if they are computer savvy enough to know

And. Don't do this either for the L-Shapes:

[img]http://[/img][imgleft]http://[/imgleft]

The top half without the [ align = left ] code will be movable

AND! Don't do this either

[align=left][img]http://TOPLINKHERE[/img][imgleft]http://BOTTOMLINKHERE[/imgleft][/align]

it may look OK but it is actually a flawed code that will rearrange on another screen. the align code must only go around the top image

[In Desolation]

① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳

⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇

⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛

❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴ ⓵ ⓶ ⓷ ⓸ ⓹ ⓺ ⓻ ⓼ ⓽ ⓾

Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ

ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ

SIZE 18 FONT ^

WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.

[color=pink]1[/color]
[color=lightpink]2[/color]
[color=palevioletred]3[/color]
[color=hotpink]4[/color]
[color=deeppink]5[/color]
[color=red]6[/color]
[color=tomato]7[/color]
[color=crimson]8[/color]
[color=firebrick]9[/color]
[color=indianred]10[/color]

WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.

[color=deepskyblue]1[/color]
[color=darkturquoise]2[/color]
[color=mediumturquoise]3[/color]
[color=paleturquoise]4[/color]
[color=lightblue]5[/color]
[color=lightsteelblue]6[/color]
[color=powderblue]7[/color]

WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.
WRITE SOMETHING HERE.

[color=limegreen]1[/color]
[color=green]2[/color]
[color=forestgreen]3[/color]
[color=darkgreen]4[/color]
[color=seagreen]5[/color]
[color=mediumseagreen]6[/color]
[color=darkseagreen ]7[/color]
[color=olive]8[/color]
[color=olivedrab]9[/color]
[color=darkolivegreen]10[/color]

▅▅▅▅▅ << pink
▅▅▅▅▅ << lightpink
▅▅▅▅▅ << palevioletred
▅▅▅▅▅ << hotpink
▅▅▅▅▅ << deeepink
▅▅▅▅▅ << red
▅▅▅▅▅ << tomato
▅▅▅▅▅ << crimson
▅▅▅▅▅ << firebrick
▅▅▅▅▅ << indianred
▅▅▅▅▅ << darkred

[color=pink]▅▅▅▅▅ << pink[/color]
[color=lightpink]▅▅▅▅▅ << lightpink[/color]
[color=palevioletred]▅▅▅▅▅ << palevioletred [/color]
[color=hotpink]▅▅▅▅▅ << hotpink [/color]
[color=deeppink]▅▅▅▅▅ << deeepink [/color]
[color=red]▅▅▅▅▅ << red[/color]
[color=tomato]▅▅▅▅▅ << tomato[/color]
[color=crimson]▅▅▅▅▅ << crimson[/color]
[color=firebrick]▅▅▅▅▅ << firebrick[/color]
[color=indianred]▅▅▅▅▅ << indianred[/color]
[color=darkred]▅▅▅▅▅ << darkred[/color]

▅▅▅▅▅ << maroon
▅▅▅▅▅ << brown
▅▅▅▅▅ << sienna
▅▅▅▅▅ << saddlebrown
▅▅▅▅▅ << rosybrown
▅▅▅▅▅ << tan
▅▅▅▅▅ << darkhaki
▅▅▅▅▅ << burlywood
▅▅▅▅▅ << chocolate
▅▅▅▅▅ << peru
▅▅▅▅▅ << darkgoldenrod

[color=maroon]▅▅▅▅▅ << maroon[/color]
[color=brown]▅▅▅▅▅ << brown[/color]
[color=sienna]▅▅▅▅▅ << sienna[/color]
[color=saddlebrown]▅▅▅▅▅ << saddlebrown[/color]
[color=rosybrown]▅▅▅▅▅ << rosybrown[/color]
[color=tan]▅▅▅▅▅ << tan[/color]
[color=darkkhaki]▅▅▅▅▅ << darkhaki[/color]
[color=BurlyWood]▅▅▅▅▅ << burlywood[/color]
[color=chocolate]▅▅▅▅▅ << chocolate[/color]
[color=peru]▅▅▅▅▅ << peru[/color]
[color=darkgoldenrod]▅▅▅▅▅ << darkgoldenrod[/color]

▅▅▅▅▅ << lightcoral
▅▅▅▅▅ << coral
▅▅▅▅▅ << lightsalmon
▅▅▅▅▅ << salmon
▅▅▅▅▅ << darksalmon
▅▅▅▅▅ << orangered
▅▅▅▅▅ << darkorange
▅▅▅▅▅ << orange
▅▅▅▅▅ << sandybrown
▅▅▅▅▅ << goldenrod
▅▅▅▅▅ << khaki
▅▅▅▅▅ << gold
▅▅▅▅▅ << palegoldenrod
▅▅▅▅▅ << yellow

[color=lightcoral]▅▅▅▅▅ << lightcoral[/color]
[color=coral]▅▅▅▅▅ << coral[/color]
[color=lightsalmon]▅▅▅▅▅ << lightsalmon[/color]
[color=salmon]▅▅▅▅▅ << salmon[/color]
[color=darksalmon]▅▅▅▅▅ << darksalmon[/color]
[color=orangered]▅▅▅▅▅ << orangered[/color]
[color=darkorange]▅▅▅▅▅ << darkorange[/color]
[color=orange]▅▅▅▅▅ << orange[/color]
[color=sandybrown]▅▅▅▅▅ << sandybrown[/color]
[color=goldenrod]▅▅▅▅▅ << goldenrod[/color]
[color=khaki]▅▅▅▅▅ << khaki[/color]
[color=gold]▅▅▅▅▅ << gold[/color]
[color=palegoldenrod]▅▅▅▅▅ << palegoldenrod[/color]
[color=yellow]▅▅▅▅▅ << yellow[/color]

▅▅▅▅▅ << greenyellow
▅▅▅▅▅ << lightgreen
▅▅▅▅▅ << lawngreen
▅▅▅▅▅ << chartreuse
▅▅▅▅▅ << lime
▅▅▅▅▅ << springgreen
▅▅▅▅▅ << mediumspringgreen
▅▅▅▅▅ << limegreen
▅▅▅▅▅ << green
▅▅▅▅▅ << forestgreen
▅▅▅▅▅ << darkgreen
▅▅▅▅▅ << seagreen
▅▅▅▅▅ << mediumseagreen
▅▅▅▅▅ << darkseagreen
▅▅▅▅▅ << olive
▅▅▅▅▅ << olivedrab
▅▅▅▅▅ << darkolivegreen

[color=greenyellow]▅▅▅▅▅ << greenyellow[/color]
[color=lightgreen]▅▅▅▅▅ << lightgreen[/color]
[color=lawngreen]▅▅▅▅▅ << lawngreen[/color]
[color=chartreuse]▅▅▅▅▅ << chartreuse[/color]
[color=lime]▅▅▅▅▅ << lime[/color]
[color=springgreen]▅▅▅▅▅ << springgreen[/color]
[color=mediumspringgreen]▅▅▅▅▅ << mediumspringgreen[/color]
[color=limegreen]▅▅▅▅▅ << limegreen[/color]
[color=green]▅▅▅▅▅ << green[/color]
[color=forestgreen]▅▅▅▅▅ << forestgreen[/color]
[color=darkgreen]▅▅▅▅▅ << darkgreen[/color]
[color=seagreen]▅▅▅▅▅ << seagreen[/color]
[color=mediumseagreen]▅▅▅▅▅ << mediumseagreen[/color]
[color=darkseagreen]▅▅▅▅▅ << darkseagreen[/color]
[color=olive]▅▅▅▅▅ << olive[/color]
[color=olivedrab]▅▅▅▅▅ << olivedrab[/color]
[color=darkolivegreen]▅▅▅▅▅ << darkolivegreen[/color]

▅▅▅▅▅ << lightcyan
▅▅▅▅▅ << paleturquoise
▅▅▅▅▅ << lightblue
▅▅▅▅▅ << lightsteelblue
▅▅▅▅▅ << powderblue
▅▅▅▅▅ << cyan
▅▅▅▅▅ << aqua
▅▅▅▅▅ << aquamarine
▅▅▅▅▅ << turquoise
▅▅▅▅▅ << lightskyblue
▅▅▅▅▅ << skyblue
▅▅▅▅▅ << mediumaquamarine
▅▅▅▅▅ << mediumturquoise
▅▅▅▅▅ << darkturquoise
▅▅▅▅▅ << deepskyblue
▅▅▅▅▅ << cadetblue
▅▅▅▅▅ << cornflowerblue
▅▅▅▅▅ << steelblue
▅▅▅▅▅ << slateblue
▅▅▅▅▅ << mediumslateblue
▅▅▅▅▅ << royalblue
▅▅▅▅▅ << dodgerblue
▅▅▅▅▅ << lightseagreen
▅▅▅▅▅ << teal
▅▅▅▅▅ << darkcyan
▅▅▅▅▅ << blue
▅▅▅▅▅ << mediumblue
▅▅▅▅▅ << #3D59AB
▅▅▅▅▅ << darkslateblue
▅▅▅▅▅ << navy
▅▅▅▅▅ << darkblue
▅▅▅▅▅ << midnightblue

[color=lightcyan]▅▅▅▅▅ << lightcyan[/color]
[color=paleturquoise]▅▅▅▅▅ << paleturquoise[/color]
[color=lightblue]▅▅▅▅▅ << lightblue[/color]
[color=lightsteelblue]▅▅▅▅▅ << lightsteelblue[/color]
[color=powderblue]▅▅▅▅▅ << powderblue[/color]
[color=cyan]▅▅▅▅▅ << cyan[/color]
[color=aqua]▅▅▅▅▅ << aqua[/color]
[color=aquamarine]▅▅▅▅▅ << aquamarine[/color]
[color=turquoise]▅▅▅▅▅ << turquoise[/color]
[color=lightskyblue]▅▅▅▅▅ << lightskyblue[/color]
[color=skyblue]▅▅▅▅▅ << skyblue[/color]
[color=mediumaquamarine]▅▅▅▅▅ << mediumaquamarine[/color]
[color=mediumturquoise]▅▅▅▅▅ << mediumturquoise[/color]
[color=darkturquoise]▅▅▅▅▅ << darkturquoise[/color]
[color=deepskyblue]▅▅▅▅▅ << deepskyblue[/color]
[color=cadetblue]▅▅▅▅▅ << cadetblue[/color]
[color=cornflowerblue]▅▅▅▅▅ << cornflowerblue[/color]
[color=steelblue]▅▅▅▅▅ << steelblue[/color]
[color=slateblue]▅▅▅▅▅ << slateblue[/color]
[color=mediumslateblue]▅▅▅▅▅ << mediumslateblue[/color]
[color=royalblue]▅▅▅▅▅ << royalblue[/color]
[color=dodgerblue]▅▅▅▅▅ << dodgerblue[/color]
[color=lightseagreen]▅▅▅▅▅ << lightseagreen[/color]
[color=teal]▅▅▅▅▅ << teal[/color]
[color=darkcyan]▅▅▅▅▅ << darkcyan[/color]
[color=blue]▅▅▅▅▅ << blue[/color]
[color=mediumblue]▅▅▅▅▅ << mediumblue[/color]
[color=#3D59AB]▅▅▅▅▅ << #3D59AB[/color]
[color=darkslateblue]▅▅▅▅▅ << darkslateblue[/color]
[color=navy]▅▅▅▅▅ << navy[/color]
[color=darkblue]▅▅▅▅▅ << darkblue[/color]
[color=midnightblue]▅▅▅▅▅ << midnightblue[/color]

▅▅▅▅▅ << indigo
▅▅▅▅▅ << blueviolet
▅▅▅▅▅ << mediumpurple
▅▅▅▅▅ << mediumorchid
▅▅▅▅▅ << purple
▅▅▅▅▅ << darkmagenta
▅▅▅▅▅ << darkviolet
▅▅▅▅▅ << darkorchid
▅▅▅▅▅ << lavender
▅▅▅▅▅ << thistle
▅▅▅▅▅ << plum
▅▅▅▅▅ << violet
▅▅▅▅▅ << orchid
▅▅▅▅▅ << magenta
▅▅▅▅▅ << fuchsia
▅▅▅▅▅ << mediumvioletred

[color=indigo]▅▅▅▅▅ << indigo[/color]
[color=blueviolet]▅▅▅▅▅ << blueviolet[/color]
[color=mediumpurple]▅▅▅▅▅ << mediumpurple[/color]
[color=mediumorchid]▅▅▅▅▅ << mediumorchid[/color]
[color=purple]▅▅▅▅▅ << purple[/color]
[color=darkmagenta]▅▅▅▅▅ << darkmagenta[/color]
[color=darkviolet]▅▅▅▅▅ << darkviolet[/color]
[color=darkorchid]▅▅▅▅▅ << darkorchid[/color]
[color=lavender]▅▅▅▅▅ << lavender[/color]
[color=thistle]▅▅▅▅▅ << thistle[/color]
[color=plum]▅▅▅▅▅ << plum[/color]
[color=violet]▅▅▅▅▅ << violet[/color]
[color=orchid]▅▅▅▅▅ << orchid[/color]
[color=magenta]▅▅▅▅▅ << magenta[/color]
[color=fuchsia]▅▅▅▅▅ << fuchsia[/color]
[color=mediumvioletred]▅▅▅▅▅ << mediumvioletred[/color]

▅▅▅▅▅ << black
▅▅▅▅▅ << darkslategray
▅▅▅▅▅ << dimgray
▅▅▅▅▅ << gray
▅▅▅▅▅ << slategray
▅▅▅▅▅ << darkgray
▅▅▅▅▅ << silver

[color=black]▅▅▅▅▅ << black[/color]
[color=darkslategray]▅▅▅▅▅ << darkslategray[/color]
[color=dimgray]▅▅▅▅▅ << dimgray[/color]
[color=gray]▅▅▅▅▅ << gray[/color]
[color=slategray]▅▅▅▅▅ << slategray[/color]
[color=darkgray]▅▅▅▅▅ << darkgray[/color]
[color=silver]▅▅▅▅▅ << silver[/color]

[In Desolation]

BLANK FOR NOW

[In Desolation]

BLANK FOR NOW

[In Desolation]

BLANK FOR NOW

[In Desolation]

FUTURE TUTORIAL SPACE

[In Desolation]

BLANK FOR NOW

[In Desolation]