Guide: Channel Customization

[DevilTrigger]

Hey everyone, Trig here. Now that the sites first theme is done, and the layout for all themes will be 1000x px width, I thought I'd post this lovely guide made, not by me, but the lovely Kayarine on how to tweak your channel and make it pretty. COPY PASTE POWERS, ACTIVATE.


Hey there, bored Kaya here. As you might know, the new forum layout sports a new, very fun feature: Profile Customization! You can start customizing by pressing this button while viewing your profile.

http://i56.tinypic.com/2dchdur.jpg

However! When customizing your profile, you should be careful to not make the text too hard to read (unless you're like a certain troll around here :3), and you should make it generally pleasant to look at (unless you want to burn the eyes of the poor souls that happen to stumble upon your profile). This guide is to help you with these things.


BACKGROUND
You can choose to have a plain, solid color background or have an image in it. If you wish to use a large image and want to make sure it fits the profile, keep in mind that the width of the forum is 1000px. So you want to make your picture 1000px wide if you don't want to have it tile horizontally but still want it to show in its entirety.

It was found out that very long pictures get resized. It seems the limit without getting the picture resized is 1500px of height, but someone reported that their picture was getting resized down to 1000px... I'm not sure why that happens.

I know how to edit images to tile smoothly, so I can attempt to write a guide on how to do it if people are interested in learning how.


TABLES
This is an important part if you want to keep the text readable, as they are where the text is located. But they'll block your background if you're using an image! What do?
Simple, there's a way of making the tables semi-transparent. You'll need an image editing software that supports transparency, though.

How to make tables semi-transparent:
Make a new, transparent file in your image editor. Fill the layer with any color you want for the background of your tables, then lower the opacity of the layer (I find that 60% works the best, as it's the lowest I could get it at without making the text hard to read). Resize the image to 1x1px (so it loads fast) and save it as a .png. Upload it and get the Direct Link. Then edit your profile, set the background of your tables to None and set the Repeat to Both, and replace transparent with url(IMAGE_LINK)


COLORS
This is what decides if the profile burns people's eyes or not, and a good, consistent color scheme can make things much better.

Picking a color scheme:
Unless you intend to fill your profile with rainbows, don't pick random, different colors for everything. I suggest that you pick up to 4 different colors and assign them to general elements of the page (regular text, links, table backgrounds, table borders). Also, picking matching colors really does wonders. If you're using an image background, I highly recommend picking colors from the image to make your profile theme consistent.

Picking color shades:
This is very, very important to prevent eye burning and unreadable text. The color/shade of the text and links should contrast with the color of the background in order to not make it hard to read. So if you're using a dark background, pick light shades for the text and links (and vice versa).
Right. But there's something more. For the love of Cosmos, don't pick pure colors! And by that, I mean sliding the color picker to the top-right most. They don't look natural to the eye and are often too vivid. Here, let me show a chart illustrating what I just said.
http://i56.tinypic.com/2qa8dbl.jpg


And that's all, I think... If you have any questions related to profile customizing or suggestions of things I should explain and other stuff, feel free to post. :3

Yes I know that's a horribly lazy copy paste, but meh, so hopefully this helps you all tweak your pages so it looks pretty and readable =)

[Kayarine]

TILED BACKGROUNDS
Finally someone has asked me about tiled backgrounds! So here's my guide to get a simple tiled image. I'll try to make it fairly detailed so even beginners at Photoshop can do it! (However, I'll assume you know the basic of the basics like creating new files, cropping and layers.)

(As a side note, I'll be using Adobe Photoshop CS3 for this guide. Options required for these steps may vary if you're using other image editing software.)

I'll be using this image (click here) (http://kurisu.imouto.org/sample/8ada1fe65847b62614f730e838fd9762/moe%20197476%20sample.jpg) for this guide.

Step 1. Make a new file. If you're doing this for a forum profile background, set the width to 1000px and height to whatever will accomodate the image. Crop/resize the image as you see fit, move it around so the characters in the background is located exactly where you want, etc etc etc. Here's how I cropped and moved my image: (I resized all images used to illustrate this guide for the sake of your connection.)

http://i42.tinypic.com/qq8mtz.jpg

Step 2. Duplicate the image (right-click on the layer in the Layer Palette and select "Duplicate Layer") and drag it to the bottom. Make sure to have some of this layer covering a reasonable amount of the layer under it. Don't be too stingy with the amount you cover, the more space you cover, the smoother the transition between the edges of the image will be.

http://i41.tinypic.com/2m6pxc2.jpg http://i43.tinypic.com/2ijhm6r.jpg

Step 3. Add a Layer Mask to this layer. (Click on the button the red arrow is pointing to while the top layer is selected.)

http://i42.tinypic.com/eiqohe.jpg http://i44.tinypic.com/24o9dfc.jpg

Step 4. Grab the Gradient Tool (right-click on the Paint Bucket Tool if you don't see it in your toolbar.)

http://i41.tinypic.com/mlkyg4.jpg

Make sure your gradient is set to black to white and the pattern is linear (as shown below.)

http://i44.tinypic.com/23wqwrk.jpg

Now, double check to see if the layer mask is selected (it should have a little frame around it in the Layer Palette.) Here's a basic explanation of how layer masks work: All white parts on the layer mask will make the picture visible. Likewise, all black parts on the mask will become invisible.

Use the Gradient Tool by clicking where the top edge of the duplicate layer is and dragging it all the way to the bottom of the image:

http://i41.tinypic.com/dr6m9t.jpg

If you do it correctly, the result should be this:

http://i40.tinypic.com/2ag41hc.jpg http://i44.tinypic.com/i1wqaa.jpg

Step 5. Create a new layer (click on the button the arrow is pointing to) on top of everything, then go to Image > Apply Image to put everything currently visible in a single layer. (It's like merging the layers themselves, but this way you get to keep the original layers in case you have to tweak something later.)

http://i40.tinypic.com/2lml6v7.jpg http://i41.tinypic.com/34eb5za.jpg

Step 6. Now that you have your newly applied image, duplicate this layer and move it to the top this time. You must align the bottom of this duplicate with the image underneath it so it tiles correctly. Be especially careful to not leave it misaligned! Lower the opacity (then increase it back once you're done) and zoom in if you're having trouble with putting it in the right place. If you do it right, you should have something like this:

http://i42.tinypic.com/20h0yva.jpg http://i41.tinypic.com/2009vux.jpg

Step 7. Make a new layer and apply the image again. Duplicate this new layer and move it to the bottom. The procedure is the same as the previous step, make sure to align it correctly and all that. You Layer Palette should be looking like this by now: (Remember to hide the unnecessary layers by clicking on the eye icon on the left side.)

http://i42.tinypic.com/1zpte0x.jpg

Step 8. Once you've positioned everything nicely, left-click on the top layer's thumbnail while holding the Ctrl key. This should give you a dashed line around it.

http://i42.tinypic.com/5x7nsi.jpg

Now click on the layer below it (the one which has the full image) and press Backspace or the Delete key (for me it's backspace, but I think it's delete for some people.) This will get rid of the selected area. You can either hide or delete the top-most layer to make this newly created hole visible.

http://i44.tinypic.com/2a5lys9.jpg

Step 9. Left-click while holding Ctrl on the thumbnail of the current layer to select it. Now go to Image > Crop to get rid of that empty space at the bottom.

http://i44.tinypic.com/i5oqjr.jpg http://i44.tinypic.com/rbhdnb.jpg

You can stop here if you're content with how the image looks like. But at this point you can also move the layer around if you're unhappy with the gradient bit at the top of the image. Just move it, duplicate the layer and move it so it covers the newly empty space. I did this to get the following result:

http://i40.tinypic.com/1o9107.jpg

You can now merge all layers and save your picture. If you did everything correctly, the image should tile smoothly when you use it as a tiled background: Click for example (http://i40.tinypic.com/a26tmq.jpg)

If you know how to really use your image editor and add different colors to images, you can apply them now to make the image softer to use as a background, to keep it from being too contrasting and making text difficult to read. Click for example (http://i44.tinypic.com/w9i254.jpg)