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]

THE ULTIMATE CODE INDEX W/ LINKS TO OTHER RESOURCES

All the codes of the front page in one easy to reference place. Play around with them in the Test Forums. Select, Drag, Copy, Paste into message box and Submit

See HERE for RP thread coding

BASIC CODE (IMG RIGHT)

[imgright]Insert an image link here. No spaces.[/imgright][align=right][color=charactercolor][size=15][b]NAME[/b][/size][/color]
[size=11]
Descriptive text, descriptive text, descriptive text. [color=charactercolor][b]"Character dialogue in colored bold."[/b][/color] Some sort of text going on here. [color=charactercolor][i]Thoughts in colored italics.[/i][/color] Descriptive text, descriptive text, descriptive text.
[/size]
[size=9]WWWHW: Who, what, where, how, why?
OOC: Blank.
[/size]

LISTING CODES (PASTE AFTER IMG CODE)

[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list]

(STUFFING CODE GETS PASTED HERE)

(FOOTER CODES GOES HERE)

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

HIT SPOILER BUTTON FOR PREVIEW STUFFING AND FOOTER CODES (THEY'RE IN SETS OF THREE OR FIVE. PICK A SET TO

STUFFING JUNK (ADD TEXT COLORS THYSELF).

[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]

FOOTNOTE JUNK (ADD COLORS OR MAKE SLIGHT CHANGES THYSELF)

[size=9]↳ OOC [[color=color1] ... [/color]] ↳ WHERE [[color=color2] ... [/color]] ↳ WITH [[color=color3] ... [/color]][/size]

[size=9]↘ OOC [[color=color1] .. .[/color]] ↘ LOCALE [[color=color2] ... [/color]] ↘ COMPANY [[color=color3] ... [/color]][/size]

[size=18]✈[/size][size=9] WHERE [x][/size]
[size=18]☻[/size][size=9] WITH WHO[x][/size]
[size=18]☎[/size][size=9] OOC [x][/size]

[size=18]☀[/size][size=9] WWWW&H [x][/size]
[size=18]☁[/size][size=9] MOOD[x][/size]
[size=18]☂[/size][size=9] OOC [x][/size]

[size=18]★[/size][size=9] WHERE WHO [x][/size]
[size=18]☆[/size][size=9] WHAT NOW[x][/size]
[size=18]★[/size][size=9] OOC [x][/size]

[size=18]♠[/size][size=9] WHERE WHO [x][/size]
[size=18]♣[/size][size=9] WHAT NOW[x][/size]
[size=18]♦[/size][size=9] OOC [x][/size]

[size=18]♪[/size][size=9] LOCATION [x][/size]
[size=18]♫[/size][size=9] COMPANY [x][/size]
[size=18]♩[/size][size=9] OOC [x][/size]

[size=18]☺[/size][size=9] WHERE WHO [x][/size]
[size=18]☻[/size][size=9] WHAT NOW [x][/size]
[size=18]☺[/size][size=9] OOC NOTES [x][/size]

♔ [size=9]LOCATION → [/size]
♕ [size=9]COMPANY → [/size]
♖ [size=9]SONG → [/size]
♘ [size=9]OUTFIT → [/size]
♙ [size=9]OOC → [/size]

♚ [size=9]LOCATION → [/size]
♛ [size=9]COMPANY → [/size]
♜ [size=9]SONG → [/size]
♞ [size=9]OUTFIT → [/size]
♟ [size=9]OOC → [/size]

STREAMLINED POST LAYOUT (IMG LEFT)

[imgleft]http://i43.tinypic.com/dz1n8.jpg[/imgleft]
[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list]
[b]THIS IS AN EXAMPLE[/b]
[size=11]
Text. [color=blue][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=red][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] LOCATION [The listing doesn't show up in previews. ][/size]
[size=18]♫[/size][size=9] COMPANY [The list brackets have to be in equal number or it won't work.][/size]
[size=18]♪[/size][size=9] OOC [Below is what the code for this looks like.][/size]
[/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]

STREAMLINED POST LAYOUT 2 (IMG CENTER ABOVE TEXT)

[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][align=center][img]http://i43.tinypic.com/dz1n8.jpg[/img][/align]
[align=center][size=18][color=purple][b]IT WORKS FOR CENTERED IMAGES TOO[/b][/color][/size][/align]
[size=11]
Text. [color=darkblue][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=blue][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.

No. Listing margins don't work for putting in a wide right margin. There are tricks, but they involve using a white image as a spacer. I like to keep it simple. Let's just do that
[/size]
[size=13][color=blue]☆[/color][/size][size=9] WHERE WHO [color=indigo][x][/color][/size]
[size=13][color=darkblue]☆[/color][/size][size=9] WHAT NOW [color=blue][x][/color][/size]
[size=13][color=blue]☆[/color][/size][size=9] OOC [color=indigo][This is how.][/color][/size][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]

L-SHAPE. For this, referral to the tutorial post will probably help.

[align=left][img]http://imageshack.us/a/img707/7505/6l80.jpg[/img][/align][imgleft]http://imageshack.us/a/img600/1710/rarp.jpg[/imgleft]
[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list]
END PRODUCT involves top aligned left and bottom half in imgleft. All your text stuffing must go after the list codes. Unless you want to experiment with layering code. This is all basic streamlined stuff

[size=18]☺[/size][size=9] WHERE WHO [x][/size]
[size=18]☻[/size][size=9] WHAT NOW [x][/size]
[size=18]☺[/size][size=9] OOC NOTES [Footnote junk goes above list end codes][/size]
[/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]

FANCY TEXT

[color=color1][strike][color=color2][u][color=color3]COMBINED LOOKS LIKE THIS[/color][/u][/color][/strike][/color]

Also refer to this post for gradients and colors

BOOK ENDED GRAPHICS POST LAYOUT (works for all Images with Widths smaller than 300px, any height)

[imgleft]http://[/imgleft][imgright]http://[/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=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]

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

USEFUL RESOURCES FOR PICTURES

FOR EDITING, CROPPING, and RESIZING. (In order of usefulness). ALWAYS BORDER POSTING PICTURE WITH THIN WHITE BORDER IF YOU DON'T LIST
PicMonkey In browser. It also has a Google Chrome app.
pixlr.com There is a mobile app version of pixlr you can find and utilize if you are working from a mobile gadget.
pixlr Express In browser. Very fast. Nice frames.
EZIMBA Quick fast easy image editor and converter
Canva
PsykoPaint
Thumba
PhotoCat. It's OK.
BeFunky has great frames. Mess with Blend Modes is a must.
PiZap is slow, interface is ugly, but collage capabilities are acceptable and fancy.

PIXENATE also has ugly interface. Fun Effects are mildly useful. Would not use. CITRIFY is so basic that it's crap. Phixr and LUNAPIC good for memes. Maybe. Nothing else.

GIMP For those with your own computer but no programs.
Tricks with layering? Multiply, overlay, addition, and screen. GIMP is trustworthy
There is also a quick fixer available on photoshop.com (in their Online Tools menu drop) and the free Aviary app. If I haven't listed something here. It's because I don't trust it... I tried iPiccy and Ribbet. I didn't like them.

FREE MUSIC FOR YOUR MADE UP RADIO STATIONS AND NEIGHBORHOOD COMMUNES

https://bandcamp.com/tag/free-download Music you've never heard before. Name your price $0 and it's free but it's free to listen and you're welcome to tip some of the artists if you want.

FOR DRAWING
If you don't have photoshop and hate GIMP. These are the other free options
firealpaca
krita
Artweaver Scroll down to find free version.

FOR FINDING EVER WONDER WHERE THOSE COOL PICS IN BARTON TOWN COME FROM? LOOK NO FURTHER THAN HERE
lookbook.nu Regular people who want to be... looked at.
Chictopia Like lookbook but differently formatted
NEXT MANAGEMENT Modeling agency. A big one. Just pick a city. Select models. Select gender to browse
PhotoGenics Modeling Agency Professionals. Click on models to view men or women. You can always google "modeling agency" and find more of these portfolio sites.*
pixiv.com For Japanese anime. Customize the picture for use though. (Customize everything. Even real pictures).
morguefile.com Free stock photos. For miscellaneous purposes.
Getty Images Royalty free stock images for building graphics. Collages. Things for your RP thread

*Another way to get pictures and various images from the same model is to simply pick a fashion line like Gucci or Burberry. And type into the search engine "Gucci collection" or "Gucci ad campaign". You can literally type in "Burberry model" and find a face. Too many people use actors and actresses

STORAGE DO YOU REALLY NEED HELP FINDING THESE? I'LL LIST THEM ANYWAY
Photobucket
Photobucket Mobile
Imgshack
Imgshack Mobile
tinypic.com Good site
flickr, Picasa, and imgur are your other alternatives.
I don't recommend Snapfish.
If you use anything other than photobucket, to view them requires selecting "show all images" in account preferences' image display settings.

FOR SHORTENING AN EXCESSIVELY LONG PIC URL NECESSARY FOR SIGNATURES SOMETIMES
tinyurl
bit.ly

USEFUL FOR TEXT AND SYMBOL DESIGN CREATION
Fuzzimo's Label Maker If you're tired of plain font this place makes label stickers
TEXT GEN EDITOR Fancy lettering made by symbols you can copy paste

FOR COLORS AND THINGS
colourlovers for premade palettes. This one is excellent. Perfectly good for all sorts of graphic making.
bighugelabs for making your own palette from a picture.
UTCCG is a thread of just about every shade for every color you could possibly want.
Adobe Kuler
Colourcode
Collor
Colors Palette Generator
Pictaculous
Web Color Data

FOR NAME GRAPHICS
FontMeme.com Try it. It's easy. No download required. In browser.

BannerFans.com is a pretty useful label, title, and... banner maker.

See this tutorial for text header (name, lyrics, quotes, poetry) advice

FOR FLIPPING PLAIN TEXT ONLY
Reverse Text Generator Makes things backwards.

FOR MAKING IT UPSIDE DOWN PLAIN TEXT ONLY
Upside down word generator Enter and copy paste.

FOR SHORT TEXT GRADIENT (RAINBOW GEN) PLAIN TEXT ONLY
http://www.tektek.org/color/

http://www.wordcounter.net/ Best word counter. To check length.

QUICK TIP FOR POSTING FROM MOBILE DEVICES If you have little to no access to a computer, make your first post via a computer.
Then when you are on your mobile device, hit the quote button (beware of hitting edit on accident).
Delete the quotes (and the spoiler if applicable, if the GM stores your post layout somewhere in the thread itself) brackets and you'll be ready to go in style.

[In Desolation]

L-SHAPE CORNER POST LAYOUT GRAPHIC TUTORIAL

The L- shape post layout starts with a whole image



which is cut and cropped into pieces



in either picmonkey or GIMP this is easiest



Say for example if your complete image is 500px in height and you crop the top from the original at 200px. Save as. Hit undo to return to original image. Crop the lower half from bottom up as 300px in height.

For Cropping Perfectly In GIMP

Go to View > Show Grid and select Snap to Grid
Image > Configure Grid to 0.5 in or 0.25 in

I crop by using the Selection Tool, Image > Crop to Selection following the grid lines.
With Snap to Grid, no seams.

And

Don't crop up and down so there is a left half and a right half.


I crop a top. Then a bottom. The top is half side. Half ledge.
Bottom becomes a corner piece to complete.
_
|

┏━━━━┓
┗━━━━┛
[]

OK?

[In Desolation]

END PRODUCT involves top aligned left and bottom half in imgleft. All your text stuffing must go after the list codes. Unless you want to experiment with layering code. This is all basic streamlined stuff


[align=left][img]http://imageshack.us/a/img707/7505/6l80.jpg[/img][/align][imgleft]http://imageshack.us/a/img600/1710/rarp.jpg[/imgleft]
[list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list][list]
END PRODUCT involves top aligned left and bottom half in imgleft. All your text stuffing must go after the list codes. Unless you want to experiment with layering code. This is all basic streamlined stuff

[size=18]☺[/size][size=9] WHERE WHO [x][/size]
[size=18]☻[/size][size=9] WHAT NOW [x][/size]
[size=18]☺[/size][size=9] OOC NOTES [Footnote junk goes above list end codes][/size]
[/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list][/list]


☺ WHERE WHO [x]
☻ WHAT NOW [x]
☺ OOC NOTES [Footnote junk goes above list end codes]

[In Desolation]

The following is a fancy Pic Monkey Tutorial. Now I'll show you how to use something. Textures. For this you'll need two images. One image to go inside the shape. And a second image that will become the shape. The darker the second image then the better (all black patterns or silhouettes or black vectors are the best). In the example I'm using an "eagle PNG" I found using Google Images.

First. Open up your Image in PicMonkey. Go to Textures. It's a tab located under Frames in that panel to the left



Then choose "Your Own" and pull up that second image. Notice that it may need moving around to fit the image you started with. The more zoomed in you are then the better you can Move it around. Slide the Fade from the default 20% to 0% for best effect.





Change the Blend Mode to any of the following: Add, Hardlight, Lighten, Overlay, or Screen. In the example, I found that Lighten works best on what I have.



After the texture is Applied then I go to mess around with it with other Effects. In the example I use Frost to soften the edges a little



I make it Black & White just because I can. Meh



The image I started with was 800px by 800px and I Resize it to 600px by 600px. Always Keep Proportions



Now to Crop. I crop the top out. I stop it under the wing at a number easily remembered and subtracted from 600px (the height). My top becomes 600px in width by 270px in height.







600px - 270px is 330px. The height of my bottom after saving the top and undo-ing first crop is 330px. Width is whatever it needs to be

[In Desolation]

Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. Using the knowledge made available from posts on the first page will result in this. If it confused you instead of helping you I'm sorry. That's the best I can do to explain it. Go to Google Images and pull up things to experiment with

[In Desolation]

QUICK LINE BY LINE GRADIENT TUTORIAL

HERE is Part II of this w/ Codes

1.To make a ten line gradient go to http://www.tektek.org/color/
2. Make ten individual characters. Use letters so you don't lose track
3. Pick your two colors
4. Generate
5. Copy & Paste



Codes will look something like this

[color=#0015FF]A[/color][color=#0027E5]B[/color][color=#0039CC]C[/color][color=#004BB2]D[/color][color=#005E99]E[/color][color=#00707F]F[/color][color=#008265]G[/color][color=#00954C]H[/color][color=#00A733]I[/color][color=#00B919]J[/color]

6. Hit enter when you edit so each character has its own line

[color=#0015FF]A[/color]
[color=#0027E5]B[/color]
[color=#0039CC]C[/color]
[color=#004BB2]D[/color]
[color=#005E99]E[/color]
[color=#00707F]F[/color]
[color=#008265]G[/color]
[color=#00954C]H[/color]
[color=#00A733]I[/color]
[color=#00B919]J[/color]

7. Customize. Do whatever you want. Write into each character. It'll end up something like

[color=#0015FF]I saw the best minds of my generation destroyed by madness, starving hysterical naked,[/color]
[color=#0027E5]dragging themselves through the negro streets at dawn looking for an angry fix,[/color]
[color=#0039CC]angelheaded hipsters burning for the ancient heavenly connection to the starry dynamo in the machinery of night,[/color]
[color=#004BB2]who poverty and tatters and hollow-eyed and high sat up smoking in the supernatural darkness of cold-water flats floating across the tops of cities contemplating jazz...[/color]
[color=#005E99]...who talked continuously seventy hours from park to pad to bar to Bellevue to museum to the Brooklyn Bridge,[/color]
[color=#00707F]a lost battalion of platonic conversationalists jumping down the stoops off fire escapes off windowsills off Empire State out of the moon,[/color]
[color=#008265]yacketayakking screaming vomiting whispering facts and memories and anecdotes and eyeball kicks and shocks of hospitals and jails and wars,[/color]
[color=#00954C]whole intellects disgorged in total recall for seven days and nights with brilliant eyes, meat for the Synagogue cast on the pavement,[/color]
[color=#00A733]who vanished into nowhere Zen New Jersey leaving a trail of ambiguous picture postcards of Atlantic City Hall,[/color]
[color=#00B919]suffering Eastern sweats and Tangerian bone-grindings and migraines of China under junk-withdrawal in Newark’s bleak furnished room...[/color]

I saw the best minds of my generation destroyed by madness, starving hysterical naked,
dragging themselves through the negro streets at dawn looking for an angry fix,
angelheaded hipsters burning for the ancient heavenly connection to the starry dynamo in the machinery of night,
who poverty and tatters and hollow-eyed and high sat up smoking in the supernatural darkness of cold-water flats floating across the tops of cities contemplating jazz...
...who talked continuously seventy hours from park to pad to bar to Bellevue to museum to the Brooklyn Bridge,
a lost battalion of platonic conversationalists jumping down the stoops off fire escapes off windowsills off Empire State out of the moon,
yacketayakking screaming vomiting whispering facts and memories and anecdotes and eyeball kicks and shocks of hospitals and jails and wars,
whole intellects disgorged in total recall for seven days and nights with brilliant eyes, meat for the Synagogue cast on the pavement,
who vanished into nowhere Zen New Jersey leaving a trail of ambiguous picture postcards of Atlantic City Hall,
suffering Eastern sweats and Tangerian bone-grindings and migraines of China under junk-withdrawal in Newark’s bleak furnished room...


Why should you do this? Because if you don't the gradient generator will put each letter of every word in color code brackets. Then when you try to submit. Gaia will tell you that your post is too long. Over 50,000 characters is too many. It will be hard to edit anything in that sea of codes and separated letters

[In Desolation]

3 WAYS TO GET RID OF WHITE IN GIMP, TO PREP OBJECTS FOR LAYERING

The following is most useful for Intermediate users who already know how to use Layers, Levels, and Brightness/Contrast.

There are three ways to prep the image object. The first is to use the Magic Wand and fiddle with the Threshold. That leaves an unattractive pixelly outline



The second way is to use layer Multiply or some other mode like Screen and Overlay but it makes the image darken over whatever its underneath (you can go in and Erase but...)



The third way is to use Color To Alpha. In the menu, go to Colors > Color To Alpha. From: [WHITE] to alpha. It makes the transparency real. Always save work in progress as GIMP's native file format .xcf and final save is .PNG



It's more useful than layer Multiply.



I make a new layer with white and drag it underneath so I can see again. I remove this bottom white layer after I'm done though. When an image like this is submitted to a post the white from underneath comes from the forum thread itself

[In Desolation]

HOW TO ADD FRAMES IN PICMONKEY Doing this in GIMP means putting the frame.png in a layer over the image. It's more complex without photoshop or GIMP but possible

1. I pulled up one image from googling lookbook. Saved it to desktop. Then I googled "frame.png" and saved that too
2. I uploaded the image to picmonkey. All the while. Paying attention to sizes. I resize height proportional to frame height. Then cropped the image to something proportional to the all the frame's dimensions
3. Here's the cheat. You go to Frames and add a Drop Shadow. Get the unimportant stuff zeros. Check Transparent. Give it an ample amount of space (using Size) all around



4. Crop it proportionally to the frame size. No fancy math skills needed. I just keep the 00, 97 at the end of the height and width here.



5. Go to Textures. Pull up the frame. Change the Blend Mode to Normal and Fade to zero. Don't apply yet



6. Still in Textures step. Click Move and change size to 100% because Picmonkey default is 110%. Check or uncheck Keep Proportions if it makes anything better



7. After applying the above. Zoom in to 100% if needed. Check quality. If it's not the best. Maybe you need to Resize.



With Keep Proportions checked it does most of the math for you. I don't really care and I think it looks OK so I'm not really going to shrink it as much as I need to.



After it's good then save



8. Done

[In Desolation]

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.

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.

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.

✈ WHERE [x]
☻ WITH WHO[x]
☎ OOC [x]

[In Desolation]

HOW TO CODE HEADER TEXT

You know what I think is inefficient?
You know what I think is inefficient?
You know what I think is inefficient?

And prone to bugs?
And prone to bugs?
And prone to bugs?

This kind of header text.
This kind of header text.
This kind of header text.

I DON'T know WHY ↗↗you THINK it's COOL↘↘


But this is how it's done with minimal error. With the Size codes [] on the outside. Front and end. This way you don't have to size code each chunk separately. The best codes are short. The longest codes suck OK

[size=9][align=left][color=gainsboro]You know what I think is inefficient?[/color]
[color=gray][i]You know what I think is inefficient?[/i][/color]
[color=black]You know what I think is inefficient?[/color]
[/align]
[align=center][color=gainsboro]And prone to bugs?[/color]
[color=gray][i]And prone to bugs?[/i][/color]
[color=black]And prone to bugs?[/color][/align]

[align=right][color=gainsboro]This kind of header text.[/color]
[color=gray][i]This kind of header text.[/i][/color]
[color=black]This kind of header text.[/color][/align]

I DON'T [b]know[/b] [i]WHY[/i] ↗↗you THINK it's [strike]COOL[/strike]↘↘
[/size]

See additional header text tutorial here.

After finishing the codes. Take a screenshot. On a regular PC (Windows) keyboard it's on the upper right. Above the Backspace and Insert keys. Then you Paste it into an open image file like Microsoft Paint. A bitmap

On a Mac (Apple) it's Command Shift 3 to capture whole screen or Command Shift 4 to click and drag the area space you want. It'll show up as a .PNG file on your Desktop

Upload the screenshot to your choice of image storage place. Photobucket or Tinypic. USE THE PROVIDED IMG CODE FOR YOUR HEADER INSTEAD OF THE ANALOG CODE

[IMG]http://i62.tinypic.com/71pis2.jpg[/IMG]

Good day

[In Desolation]

INVISIBLE SPACER A WAY TO "LIST" TEXT FROM THE RIGHT

UPDATE 01/08/15
RIGHT COLUMN UPDATE

Stanford Condition

I noticed you had the tacky way of adding a blank right column, so I thought I might throw a better solution your way.

Instead of having a massive white image that won't necessarily be large enough for all screens or too large for others, have a transparent image of [x] pixels wide and 1 pixel high. The picture goes on

[imgright]

then follow it by

[align=right][align=left]

. The alignment will now enforce that the width specified of that image is as far right as the text can go.

For an example of it at work, take a look here. As you can see, it works at any width and I only have

[list]

s on the left.

Now. You probably aren't aware of this always. But people have different sized screen resolutions and browsers. Some of them have the same one as you. Others? Nope. The L-Shape with ImgLeft cornerstone and List codes coming from the left is your best bet to having a post layout that looks good on all screens besides yours

With the "listing" (it's not actual listing with codes, but I don't know what else to call it) coming from the right it gets tricky. Like with other aligned Img chunks you want it thin. The length is something you have to estimate. It depends on the average word length of your posts

IF the text always goes past the cornerstone (the ImgLeft chunk) of the L-Shape graphic
IF the top Image is taller than 400px such as 500px, etc (I hope not)

Top heavy image designs typically require a lengthy ImgRight spacer. Shorter graphic stubs need a more moderate length. Will you remember? OK Good

Easiest way to do an ImgRight spacer is to Create a New Document with a blank white background. In GIMP, you can figure out how to make a Blank Document that begins with a transparent canvas. Size it. Save it as .PNG

Here is how to make one in PicMonkey. My ImgLeft is 200 x 700px so I make an ImgRight that is 50 x 700px

1. Go to Picmonkey.com and select Design



2. Then select Custom and size it appropriately



3. For success, check the box for Transparent
4. Save as .png



If all you have is an ImgLeft graphic with no top (not an L-Shape) then make this New Document a quarter (1/4th) of the width of the ImgLeft and the same exact Length. Pop those codes in. You're done (see below).

[In Desolation]

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.

✈ WHERE [x]
☻ WITH WHO[x]
☎ OOC [Go ahead and try to select this post or click and drag its elements. Highlight so you can see what I've done]