Feel free to subscribe to my main tutorial thread here.
THE BASIC POST LAYOUT FORMAT It gets the job done cleanly and well. Easy to customize from here. Text by default goes left. Use the ImgRight instead of regular Img or Imgleft and it will place your image out of the way of your text. Try it out now in a test thread!
(Best used with images that have a thin white border added around them which you can do in picmonkey with the "Frames" options)
[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]
Scroll all the way down in this thread for more premade code sets AND A SMALL TUTORIAL
USEFUL RESOURCES FOR PICTURESALWAYS ASK SOMEONE WHO CAN HELP YOU IF YOU NEED ANY HELP WHATSOEVER DON'T BE ANTISOCIAL YOU!
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. PhotoCat. It's OK. Can be useful. BeFunky has good 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. It was made by nerds. Nerds like me... 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.
FOR FINDINGEVER 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. 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.
STORAGEDO YOU REALLY NEED HELP FINDING THESE? I'LL LIST THEM ANYWAY Photobucket Photobucket Mobile Imgshack Imgshack Mobile tinypic.com Good site for slow computers. 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 URLNECESSARY FOR SIGNATURES SOMETIMES tinyurl bit.ly
NOTE: If Gaia is centered, the maximum width for images without page distortion is about 600 pixels. It can go as wide as 700 pixels but it might break the post border.
USEFUL FOR TEXT AND SYMBOL DESIGN CREATION
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.
FOR NAME GRAPHICS FontMeme.com Try it. It's easy. No download required. In browser.
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.
Posted: Wed Oct 16, 2013 8:02 pm
Might I suggest colourlovers for premade palettes bighugelabs for making your own palette from a picture and UTCCG is a thread of just about every shade for every color you could possibly want
Cadenza of the Heart
Inquisitor
Offline
In Desolation
Invisible Exhibitionist
Offline
Posted: Wed Oct 16, 2013 8:06 pm
THIS IS THE AVERAGE AMOUNT OF LISTS YOU NEED TO MARGIN THE TEXT BODY WHICH GOES HERE WHERE THIS INSTRUCTION IS. DEPENDING ON HOW WIDE YOUR IMG IS YOU MAY NEED MORE OR LESS BUT MAKE SURE TOP NUMBER OF [ list] CODES ARE EQUAL TO BOTTOM NUMBER OF [ / list] CODES.
[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] THIS IS THE AVERAGE AMOUNT OF LISTS YOU NEED TO MARGIN THE TEXT BODY WHICH GOES HERE WHERE THIS INSTRUCTION IS. [/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]
Posted: Thu Oct 17, 2013 4:38 pm
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.
♪ LOCATION [The listing doesn't show up in previews. ] ♫ COMPANY [The list brackets have to be in equal number or it won't work.] ♪ OOC [Below is what the code for this looks like.]
[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.
This was constructed using the building blocks from above. [/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]
In Desolation
Invisible Exhibitionist
Offline
In Desolation
Invisible Exhibitionist
Offline
Posted: Thu Oct 17, 2013 4:55 pm
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.
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.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap. With listing, this is where all your text ends up going. All the way down. No text to picture wrap.
♪ LOCATION [The listing doesn't show up in previews. ] ♫ COMPANY [The list brackets have to be in equal number or it won't work.] ♪ OOC [Below is what the code for this looks like.]
Posted: Thu Oct 17, 2013 5:01 pm
IT WORKS FOR CENTERED IMAGES TOO
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.
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
* WHERE WHO [x] * WHAT NOW [x] * OOC [This is how.]
[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=violet][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=purple][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=purple]☆[/color][/size][size=9] WHERE WHO [color=purple][x][/color][/size] [size=13][color=purple]*[/color][/size][size=9] WHAT NOW [color=purple][x][/color][/size] [size=13][color=purple]☆[/color][/size][size=9] OOC [color=purple][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]
In Desolation
Invisible Exhibitionist
Offline
In Desolation
Invisible Exhibitionist
Offline
Posted: Thu Oct 17, 2013 5:54 pm
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)
✈ WHERE [x] ☻ WITH WHO[x] ☎ OOC [x]
☀ WWWW&H [x] ☁ MOOD[x] ☂ OOC [x]
★ WHERE WHO [x] ☆ WHAT NOW[x] ★ OOC [x]
♠ WHERE WHO [x] ♣ WHAT NOW[x] ♦ OOC [x]
♪ LOCATION [x] ♫ COMPANY [x] ♩ OOC [x]
☺ WHERE WHO [x] ☻ WHAT NOW [x] ☺ OOC NOTES [x]
♔ LOCATION → ♕ COMPANY → ♖ SONG → ♘ OUTFIT → ♙ OOC →
♚ LOCATION → ♛ COMPANY → ♜ SONG → ♞ OUTFIT → ♟ OOC →
[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]
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.
In Desolation
Invisible Exhibitionist
Offline
In Desolation
Invisible Exhibitionist
Offline
Posted: Sun Nov 17, 2013 5:48 pm
Quick L-Shape Post Layout Graphic Tutorial Continued
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
I don't recommend treating the sidebar like a side cropped up and down so there is a left half and a right half.
I crop a top. Bottom. The top is half side. Half ledge. Bottom becomes a corner piece to complete. _ |
┏━━━━┓ ┗━━━━┛ []
Posted: Sun Nov 17, 2013 5:50 pm
END PRODUCT involves top aligned left and bottom half in imgleft.
[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. [/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]
