Previous Thread
Next Thread
Print Thread
Rate Thread
#286361 02/17/2002 3:07 PM
Joined: Aug 2000
Posts: 3,590
Moderator
Moderator
Offline
Joined: Aug 2000
Posts: 3,590
Color Scheme Tips and Tricks
By: Bookie

As you may know, colors are most definitely one of the main attributes to your UBB, and if you can effectively create an attractive color scheme, you will be well on your way to running a successful site. Right now, I'm gonna to give you a few tips on creating attractive color schemes that will draw in members, rather than scare them away.

Before we start, there are some rules that you should probably follow when selecting colors.

1. Do not make durastic color changes in one template. (IE: Blue and red for alternate column colors)

2. Black, white, and grey colors match with almost anything.

3. Any color with the word flourescent infront of it is NOT going to make your forums look good.

4. Try to avoid using too many dark colors, some people have bad monitors tipsy

5. Don't just go out and copy someone's color scheme, that is wrong in so many ways.

That should be enough to get us started. Now I have got a few trick to creating a color scheme. This first way is quite tricky, and will need a quality graphics program. (Sorry, I don't think Paint will work) frown

First we need to create a very basic color scheme using the color blue. Blue is very commonly used, but you'll see what I'm getting to here. smile Once we have this blue scheme done, we are going to take a screenshot of it. If you don't feel like creating a new scheme, I've dont the work for you and got the screenshot HERE. But, by all means if you want to create it do the following: (We are just making this scheme to get a screenshot and will *NOT* be using it.) Open up your contol panel, go to style templates, and create a new template. Dont wory about any of the images, we are just looking for colors here. Enter the following:

Page Background color : #336699
Text/Link/Active Link/Visited Link Colors : #000000
Table border color : #000000
Table Header Strip Text Color : #ffffff
Table Header Strip Background color : #114477
Time color : #000000
1st Alternating Table Column Color : #5588bb
2nd Alternating Table Column Color : #6699cc
Category Strip Background color : #225588
Category Strip Text Color : #ffffff
Copyright Text Color : #000000
Message Board Title Color : #000000
Horizontal Rule color : #003366

When you have those entered, push hit the Update button. This will give you a nice blue color scheme, but it is not quite unique, and very over used. Notice how when creating that scheme everything was kept in porportion? (The numbers for all the blue colors were all spaced 3 characters apart in the hex.) Alright, set that template to show in forum summary, and check out your main forum page... wow! It's blue! Great, now push Print Screen on your keyboard, and open up a graphics program that will alow you to crerate color changes. I will be using fireworks for this.

Create a new document, the size of the resolution your on and push OK. Then push Ctrl + V, or paste. This will give you a screenshot of your template. If you are using the screenshot I provided you with, then simply just open that in the graphics program.

FIREWORKS:
Now select the image, and open the effects docker (windows > effects), click the dropdown and go to the adjust color flyout. This gives you alot of room for emperiment. I like selecting hue and saturation, then clicking the colorize option, then slide the hue around and you get some pretty neat colors. If they appear too dark or to light, you can simply go to brightness and contrast in the same dropdown and adjust that Another option is color fill, in this option you can set the dropdown to hue or color for best results. Lastly you can use the curves option under color fill, adjusting the curve in the line will change your colors. Once you've got the colors the way you want, skip past the photoshop section and get readin'!

PHOTOSHOP:
Alrighty, now that you've got it open, select the layer which the screenshot is on. Now go to Image > Adjust, and select Hue/Sturation, click the colorize option and slide the hue slider around to get different effects. If it is to dark you can go to Image > Adjust and the to Brightness/Contrast, then adjust the brightness. Another method is using the curves option to adjust colors.

So now we have an image of what we WANT, but how do we get that onto our UBB? Well that is the simple part, with a little tool called the eye dropper we can do this.

[Linked Image]

Simply select the eye dropper tool, and then the color for the corresponding part of the UBB. Ill get you started with the first alternate column color. Select the eydropper tool, then click the color of your first column. When you have that, then click on the fill color, or foregound color in the tools docker, this will display the hex #. There is also a very cool tool called eyedropper that you can get. This will allow you to get the hex code for any color on your desktop, which will work for those with older versions of Photoshop which do not show hex colors. Get this tool HERE You then insert that into the Control Panel under First Alternate Table Column Color, do the same for the rest of the colors, and you got yourself a beauty of a color scheme.

Once you have got all the info for the color scheme in, it is best to maybe make small adjustments to the colors, such as link colors and text colors. This will give it that extra edge. Don't forget to use graphics that match the theme too!

This method is mainly based on the shades of colors you begin with on your initial screenshot, you can mess around with the shades of these colors, and then take a screenshot for different results. You can also adjust colors in so many ways that almost any scheme can be made.

Sponsored Links

Link Copied to Clipboard
Donate Today!
Donate via PayPal

Donate to UBBDev today to help aid in Operational, Server and Script Maintenance, and Development costs.

Please also see our parent organization VNC Web Services if you're in the need of a new UBB.threads Install or Upgrade, Site/Server Migrations, or Security and Coding Services.
Recommended Hosts
We have personally worked with and recommend the following Web Hosts:
Stable Host
bluehost
InterServer
Visit us on Facebook
Member Spotlight
isaac
isaac
California
Posts: 1,157
Joined: July 2001
Forum Statistics
Forums63
Topics37,573
Posts293,925
Members13,849
Most Online5,166
Sep 15th, 2019
Today's Statistics
Currently Online
Topics Created
Posts Made
Users Online
Birthdays
Top Posters
AllenAyres 21,079
JoshPet 10,369
LK 7,394
Lord Dexter 6,708
Gizmo 5,833
Greg Hard 4,625
Top Posters(30 Days)
Top Likes Received
isaac 82
Gizmo 20
Brett 7
WebGuy 2
Top Likes Received (30 Days)
None yet
The UBB.Developers Network (UBB.Dev/Threads.Dev) is ©2000-2024 VNC Web Services

 
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20221218)