How to Make a Layout

[Xylia]

As you all may know, you can now create layouts for the forums. This seems to have been a pretty popular subject lately, so I've decided to make a tutorial on how to do layouts. The first thing you will need is permission. If you are an e-board member, you already have permission. If not, you can ask to be played in the special "layouter" group.

The first thing you'll notice is that you now have a nice little "admin" button under the logo. Click it

Now you should see a menu. Where it says Skins/Forum Colors, please click it.

Now it should take you to a menu where it says Skins Home - Create Skin. Click on "Create Skin."

Tada! Now all you have to do is choose colors and a few more options.

Terminology:

I couldn't label some of the functions on the layout with my PSD file (see below) so I will discuss them here.

Font: What font you want the forum to show up in. There are two (default: verdana, arial) because in case the user does not have the first font, it will default to the second font. All you need to know is: if you have a downloaded font named "Elvish," and you type in "Elvish" in the "font" box, no one will be able to see it except you. For them, it will default to whatever the board has set as default, which I believe is Verdana. And barring that, whatever their browser has set.

Background Image Fixed: If your page content is longer than your background, one of two things could happen. One, the background will scroll with your content. Or two, the background will be fixed in place and the content (the forum) will scroll while the background image stays put. That's all it means.

Auto Gradients: I usually set this to "no." It will take two colors that you've chosen and gradient them (slowly change one to the other) for a few categories like "title" and "category title."

Gradient Height: This is only for if you choose "auto gradients." Basically it just tells proboards how big you want your gradient (soft or contrasted.)

Active/Visited Link Color: Active I believe is when you click down on a link, and visited is a link you've already clicked. There is no "hover." Sorry.

PLEASE SKIP THE REST OF THIS TUTORIAL IF YOU DO NOT OWN PHOTOSHOP

>>THE PSD FILE<<

I have created a PSD file (only works correctly with Photoshop! I believe it will work in 7.0+ but I haven't checked; I know it will work in CS2+.) You can download it here (or above; they are the same file). Precaution: DO NOT get rid of the locks on the layers, and do NOT move the layers around. The PSD is not a perfect representation of the webpage, so unfortunately, if you move the "background" layer behind the text, bad things will happen.

So what do you use the PSD for? Good question. If you take a paintbrush (NOT the fill can) and paint over the entire area under a certain layer (say for instance, you paint the entire "background" layer green) then it will change the entire background to green, but leave everything else untouched. This PSD file would be used to experiment with colors before they are entered into your layout, to minimize editing time. + you can see how the whole thing will look together before you plug in the values.

Question: How do I get an image as the background?
Answer: Open up the image you want to use as a background. Now go to edit-->define pattern. Press enter. Go back to the PSD file and double-click on the background layer (NOT the text part, or it will ask you to rename "background".) Click on "pattern overlay" on the left hand side. Select your pattern from the menu (it should be the very last one) and click enter. This is how your background image will look on the site!

IMPORTANT If you use fanart for any images and the artist asks for it to be taken down, it will be immediately removed and you will be notified. This is non-negotiable, so please don't try to put it back up. Please save your images, and try to make sure the images you use are yours or official!

Question: I have the colors I want. How do I plug them in?
Answer: The layout maker uses something called "hex code," which means a six-character string that tells it what color you want. In photoshop, use the color dropper and click on the part of the layout you want a hex code for (zoom in if you need one for text!) It should change your foreground swatch in your tool menu to the new color. Now, click on the foreground swatch. In the lower righthand corner, it should give you a six-character string with a # sign in front. Get rid of the # sign and you have your hex code! (You can copy/paste it into the correct section.)

[ShadownetZero]

Cool. This sounds awesome. I'm gonna download Photoshop so I can make some.

Unless there's an MS Paint layout (T_T)

Domo....

[Lady_Earlgray]

;A; Is everyone supposed to be able to make a new layout? Cause I still don't see the admin button QAQ

[Xylia]

Apr 26, 2010 18:36:45 GMT -5 Lady_Earlgray said:

;A; Is everyone supposed to be able to make a new layout? Cause I still don't see the admin button QAQ

No, you'll need to be put in the special usergroup.

[Lady_Earlgray]

xD Awww I see ; 3 ; Poo - I suppose it's just for all you spiffy eboard types then~

[Xylia]

Well you're listed as a full member now so you should be able to see it...

I did say if you don't have permission, you could ask

[Lady_Earlgray]

...

:3 May I ask now? xD

[Judge]

This is actually very very easily done. I use PS CS3 extended; I wouldn't say I'm a pro but I'v gotten pretty savvy with it. Use it to make fliers and all my sigs. Also, PS > MS Paint by far...but I would assume everyone knows that.

[Xylia]

zack what did you change the layout membergroup to? i can't find it to stick angeli in

[ShadownetZero]

General Member.

I put you in there already, Angeli. Check the admin profile on top.

[Lady_Earlgray]

:'3! Thanks Zack! <3

[ShadownetZero]

No prob.

Hey Lena, if we use the fill can, will it not work?

[Xylia]

It will only work for the contiguous portion that you have selected. IE if you do it on the background, it will work because the entire background is one contiguous color. It's the same with MS paint.

[ShadownetZero]

Yea ok that's good.

But you wouldn't be able to make patterns on the select surfaces I'm guessing (still haven't converted to the hex code).

[Xylia]

Apr 28, 2010 16:00:27 GMT -5 ShadownetZero said:

Yea ok that's good.

But you wouldn't be able to make patterns on the select surfaces I'm guessing (still haven't converted to the hex code).

You can't do that because there is nowhere to put "images."

The layout area only takes hex code; if you put in a url for an image, it won't go. It only carries 6 characters. It complains if you give it more or less (you know how sometimes people write 10 instead of 00000010? Yeah, you can do that in hex when using HTML-- #000 means #000000 and #fff means #ffffff, but if you try it with the layout input, it fails. It won't accept less or more than 6.)

Unless you want to do solid chunks of color for pattern; that you can do.

Another thing you can do is use "color overlay." It is close to where "pattern overlay" is. It will do essentially the same thing as pattern overlay. I didn't want to include it in the tutorial because paintbrush is more natural-feeling and I didn't want to confuse anyone into thinking you have to do both paintbrush + color overlay. Which would be silly anyway...