Forum Template Photoshop Tutorial
Layout (Finding Colors)
The first thing you need to do is figure out, if you want a dark
template, or a light template. Light templates are usually bright,
use white as a main color, or silvers. Colors that usually go with
white/silver are blue, like this site, or a bright red. Other colors
may go with white/silver also, but I believe these are most used.
For a dark template, you usually use black, or a dark gray, as a
main color. Some secondary colors include: Dark Red, Purple, Green,
Blue, (pretty much all colors except light colors like: pink,
yellow, light blue,) Too much contrast in colors can hurt the eyes.
So for your help, click on this link
Color Remixers to put in a hex color, and it gives you colors.
Down in the preview box, you can see an example, and that is your
template colors.
I am not going to go into putting them in the right place. Mainly
just go to Edit Forum Colors in your admin bar, and put the hex
codes in, in the places you think they should go. You can always
modify this later.
Here's a mock version of a layout (only colors):
Click Here to view full size mock layout
Gradients - How to Make
Now let's make a gradient First thing to do is to find the length
of your board, or modify it (if your a coder), and make a gradient
(maybe a 700x30 high) and make a gradient across with a border. Just
put that at the top, and bottom of categories, using 2 colors from
the color remixers site. Put it in, and it fits. You can find other
tutorials (or use the polygonal lasso tool if you know how) to make
more tech borders. If you fill up entire area, save as PNG file, or
if you only use part of the space, with checkers in background, save
as a GIF format with transparent. That is basically it. Then, make
more gradients for menu gradients, and board gradients and such, and
find different codes in the code board for that.
Banner/Header
If you made the gradients, you should look at them, and the two
colors you used, should be in the banner, and should be the main
colors. Use brushing (brushes) that can be found at Deviant Art and
brush a nice banner. (sizes range from 700 x 100 to 700 x 120). It
is your choice to make it grungy, abstract, trendwhore, depending on
your gradients. Tech banners are also becoming more and more
increasingly popular.
You should have something like this, but bigger:
On/Off Icons
Ok, you made the banner and gradients and colors. Use 1 of the 2
colors you have been using from the past 2 things, and use 1 of them
for this. Choose an image, such as an orb or a tribal logo. Make a
big transparent background, 100x100 works well. Then follow the
tutorial. Resize it down to 50x50, then make background transparent,
while saving in GIF format. Then, go back to it, and color it using
2nd color. The more colorful one. (the not black, not white one) is
Your ON icon. Replace it in Custom Images with the folder with the
BLUE button. Replace the Black/White one with the folder with the
GRAY icon. You have on/off icons.
Here's a quick on icon:
Here's quick off icon:
Menu Buttons
Go into Photoshop, make an image size of about 50x20 (50 far, by
20 hi). Make some text, put a black border around it. save it, then
replace the word it represents with the image in CUSTOMIZE Images.
Menu Buttons.
Here's a quick menu button:
Smilies
Make a document, size 20 x 20 or 15 x 15. Make a Circle select
around the entire box using the Shift + Circle Select. Fill the
circle with a gradient using the non gray, non white, non black
color, and put it in a gradient with a lighter or darker color
depending on your color scheme. Add Eyes, a mouth, and whatever else
you want. See our step-by-step
illustrated tutorial on making smiley faces if you are making your
own.
Use the default smilies, or smilies from another site to spark
interest. Remember, you can also other shapes for smilies, but that
is more advanced.
Here's a quick smiley:
Info Center Icons
Ok, Here, you can just leave them the same on your site, or
follow this. Mainly, just make a rounded rectangle and a square
shape. Put the rectangle on top of the square and bam!! A computer.
Rasterize the layer, then add whatever you want, maybe a find edges
or whatever, then saturate it. ( CTRL + U ) and make it fit your
color scheme. This is the Info Center stuff. Then, make a circle,
and oval. Make sure that 1/2 the oval is below the circle, so it
looks like a half oval. Put circle on top of that, do same thing as
above, and this is the Users Icon.
Here's a quick info center icon:
|