You may have seen a few members sporting some customized public user profiles. You may say to yourself, "Self, I wish I knew how to make something like that." Fear not, dear member! I will show you how it is done and provide a few tips to make your profile stand out


Getting to Know Your Profile
To view your profile, hit the top link on the left in your User Control Panel, right under the heading "Your Control Panel." Here's my profile as it would appear by default.



In the top left is your profile picture, if you've uploaded one, with your user name, title, and online indicator. In the top right you'll see your reputation bar and a Mini Statistics panel with your avatar, if any, join date, and total number of forum posts. Beneath that is a “Friends” panel, “Photo Album” preview panel, social “Group Memberships”, and “Recent Visitors” to your profile. The center left section is the main part of your profile, divided into tabbed sections about you. “Visitor Messages” is like your profile's discussion thread. Here visitors can leave messages for you and you can respond back. The “About Me” and “Contact Info” is just a summary of what you've entered in the Details section of you your user CP. The “Statistics” tab gives a rundown of your forum activity, how many posts you have, current thread you're viewing, etc. The “Friends” tab lists the members in your Friends List. Finally you have a “Feedback Score” tab from iTrader, a feature on the forum that allows parties in Buy/Sell/Trade activities to rate each other. Much of the content on these tabs can be disabled or restricted to only friends or contacts in the Profile Privacy and Options sections of your User CP.


Basic Design
Now that you've explored your profile, take some time to get an idea of you’d like it to look. What kind of font do you want? Do you want any particular color scheme or pictures to be used? Before deciding, here are a few tips to consider. Your main concern ought to be readability. This means using heavily contrasting colors for text and background. Using light colors on light backgrounds, or vice versa, makes it nearly impossible to read what's there. Also, two colors that are far apart on the spectrum will not contrast well if their values are similar. Value refers to how naturally bright or dark a color is between white and black. For example, even though red and grey are very different colors, they have similar values and so won't work well together for text and background, though you might use them elsewhere. In general, using a dark or light color the background makes things very simple because it's easy to use a contrasting color for text and other things. You can use middling colors for the background, but setting up the rest might be tricky. Finally, be careful using any color in its brightest, most saturated form. Even with proper contrast, the monitor projecting it out will make it seem glaring to the reader, like this or this. Using strong colors is great for backgrounds, just try to either lower the saturation, making it paler, or darken it. White and black can of course be used just fine as backgrounds.


Color Scheme
With basic design principles covered, it’s time to talk color schemes. This means picking a few colors that work well together and then using variants of them. One color, usually the background, will be the main color on your palette. One or two others will be secondary colors, used to accent and contrast the main color. These would be used on menu bars, headers, etc. Finally you can add in a color, usually really light or really dark, to be used for borders, margins, etc. For example, on our forum here, it's mainly whites or off-whites used for backgrounds and empty spaces. The principle accent color is the metallic blue used in the main title bar with a middle grey used for other panel headers. Finally a very light grey is used for window borders, margins, etc. I’ll go more into color scheme in my step-by-step section below.


Changing Profile Settings
Once you have a basic plan, access your profile customization section, it's the second link down on the left under the "Your Profile" section in your control panel. There's also a link to it when you're viewing your own profile if you look toward the upper right, by your Mini Statistics panel. Here you will see many box groups with values for the various color and graphical elements.

The Main box handles global values that for the whole profile. Changes made here will be used for the same value type in each sub-section unless you define a different value in that sub-section. Example, if you set the Main font to Arial, all text in the profile will be Arial unless one of the other sections, like Primary Content, is set differently. Of note is the Hyperlink Color value. Hyperlinks will show up in many places on your profile and changing the Main value will make ALL hyperlinks to be that color. Leaving it blank allows links on your profile to take on the color for normal text in that section. Padding is the amount of space between the outer border and where the content inside starts. Other settings will be common to everyone.




The next section down controls the Blocks, or tabs, as viewed on your profile. The Major Block is the currently active tab while the Minor Blocks are the rest, including the small panels like your “Photo Album” preview.



The Primary and Secondary Content deal with the stuff inside the currently active tab of the main profile section. Secondary Content is usually a small nested box inside the tab or acts as an internal border for things in the Primary section.




Finally the Controls box will set any text, colors, etc for control buttons, drop menus, etc, that are on your profile.




The following pictures should help explain which values change which items.










Play around with the fonts, colors, borders, and everything else to get a better feeling for how it all goes together. Hitting "Save" on any box will save all changes made on the profile, not just changes in that box. The "Preview" button brings up a small pop-up that gives a small display of how things are working. You can also just view the profile itself to get a better sense of how your changes are coming along. Use the “Your Profile” link on the top left of the page to switch between the profile and the editor.


Adding Images
While editing text colors and box borders, you may have noticed that many of the control boxes have something about images. Yes, you can have pictures on your profile too. However, the pictures have to be in one of your photo albums here, they can't be linked from external sites. As such, all images must be 600 x 600 pixels or less and can't exceed 98 kb each. You can upload larger pictures, but they will be scaled down to these limits.

To add an image to a control block, go to a picture in one of your photo albums and copy the URL out of your browser address bar, NOT the one provided under the picture. Paste this into the appropriate value in your profile control box and choose what kind of repeat tiling you want. Alternately, if you create an album and tag it as one specifically for profile use, you'll notice a small icon will appear by any control box for images. Clicking this icon will bring up a small window showing previews of all pictures in your profile album. Just click on one of these to instantly copy a shortcut into the control box.




Remeber that using images as backgrounds should follow the same guidelines as above. You need to keep a good contrast difference between the picture and whatever else is displayed over it, particularly text, or you won't be able to see anything properly. This is even more difficult with images because they have changing colors, light and dark zones, etc, so it’s difficult selecting one color that will display well over any part of the photo. If you want to use a picture as a background it's sometime helpful to fade it out by decreasing its opacity or increasing the brightness. This makes text easier to read over it and makes the picture blend into the background without making the profile look “too busy.”

__________________
You can't wipe a welt
-J

Jaron's Realm - Paintball Commentary

Below I'll take you through a step-by-step procedure showing how I customized my profile. I decided to make something based on my E-Mag's coloring.





Choosing Colors
First, I chose to use the Georgia font for everything because I like serif fonts and find them easier to read as well as looking a bit more refined. Then, using PhotoShop, I sampled the tan color of the marker body and used that as the base color for the scheme. Then I made a few different shades and tones, lighter and darker, for variety. I used these colors for backgrounds in all the sections and panels.

For accent colors, I used dark grey from the marker body and a brassy yellow-orange from the grip screws. I also matched some greys from my carbon fiber barrel to give a bit more variety.

Finally, I wanted a separate color used for the tabs and menu bars. Though not on my marker, I chose to use a deep red because I like the color and it complements the tan and brass well, all of which are warmer colors.

Values:
Main Font Family : Georgia
Main Text Color : 990000
Shaded Text : 2c2c2c
Main Border : 4A4242
Main Background : 8F7A65

Block Border : 4A4241
Block Background : 787575

Primary Content Background : E5DCCF
Secondary Content Background : CCB299
Main Shaded Text Color : 2C2C2C

Major Block Text : FFE066
Major Block Backgorund : 4C1F1F

Minor Block Text : FFF0B2
Minor Block Background : 990000

Block Footer Text : E5DCCF
Block Footer Background : 787575

Primary Content Text : 2C2C2C
Primary Content Background : E5DCCF

Secondary Content Text : 4A4242
Secondary Background : CCB299

Control Font : Georgia
Control Background : F5F5F5

These values will take it from this:



To this:



Creating Images
With the colors, I think it's looking pretty good. Tans and browns are the predominant colors, just like my E-Mag, and dark greys are the borders and trim. I also like the look of the red in the title bars. I chose to use the brighter, more vibrant red on the Minor Blocks because those show up more and I wanted it to be the "main" color while the darker red is used in the much less prevalent Major Blocks. Finally, the brassy yellow is used sparingly in the text which stands out from the red background and is easily read.

However, I kind of miss the "3D" effects in the title bars that the default profile had. Also, I'd like to get something a little more interesting for the background, something with some texture. If you have access to software like PhotoShop, it's not difficult to do but it may take some practice.

First, let's make some title bar graphics. I'm going to need a graphic that can be tiled, or placed side by side with itself, without showing abvious seems. If I make a one pixel vertical strip, it can be laid with itself and the result will be horizontal stripes. To do that I started with a 256 x 256 PhotoShop canvas. That's much bigger than I want my end result but the bigger picture lets me better see what I'm working with and I can just shrink it later. On the canvas I made a simple gradient fill that faded from a dark red at the bottom to a lighter one up top. Once I was happy with the effect, I used the "Save for Web" feature to resize it to 1 x 30 and export it as a jpeg image. Other software applications will have similar features for resizing and exporting images. The reason it's 30 pixels tall is because that's the tallest height of any title block in a profile. I then did the same process with a brighter gradient to be used for my Minor Block bars.

But now what about my profile background? I could do the same thing, make a narrow gradient strip to tile around, but instead of having long, narrow title bars, the background stretches in both directions. Since I can't use images larger than 600 x 600, one image can't cover the whole thing and the profile editor doesn't give the option to center images either. Whatever I use will have to be tiled in both directions to cover the whole thing. Personally I don't like tiling seams to be visible so whatever I use will have to blend both horizontally AND vertically. Since I'm a bit lazy, I'm going to use some pre-made textures in PhotoShop. This time I use a canvas the same size as the textures I'm using, these are usually 256 x 256 or 512 x 512. Since I don't want my background to be completely cookie-cutter, I can mix a few textures of the same size together using layer overlays. Each layer is a different shade of tan used above and has a different texture layer mask. The result is a nice, leathery, marble-like image that can tile in both ways without showing any seams.

When exporting the background image, make sure to check the file size. Since this is a bigger image, it's very possible that a high quality version will be over the 98 kb limit for the forum albums. If this is the case check the quality level of your jpeg export options. In PhotoShop this is in the "Save for Web" feature. You can set it numerically, 1 - 100, or use presets of low, medium, high, etc. When changing quality, you the resulting file size will be displayed at the bottom of the preview window. A value between 60 - 80 ought to keep it looking good without making the file too big. Going below 60 may result in the image losing color definition and make it look grainy.

A Note on Tiling
For an image to tile properly without obvious seams, it needs two things. First, pixels on opposing borders ( left and right, top and bottom, ) need to match up. That's not to say they need to be identical, only that patterns and colors need to flow well between the two borders. The easiest way to do this is with vertical or horizontal stripes, such as a 20 x 20 image that had alternating black and white stripes every pixel. Whichever way the stripes run, those borders are identical so the blending is perfect. When going the other way, the borders are completely opposite, but since the pattern is continued, the seam is hidden. This would NOT be the case with a 21 x 21 tile using the same pattern. Since there would be one more line of one color, two opposing borders would have the same strip. When tiled, those two stripes would be next to each other, making it look like one wide strip amid the rest. You can also work with diagonal stripes but it's more difficult because you have to match the slope of the stripes to the box size to make sure they match up on all sides. If you don't want hard line stripes, you can use gradient fades but you must be very careful in aligning them. If they don't match up just right, you end up with something like this:




You can also tile simple patterns like boxes and circles. This is no different than tile flooring or linoleum. In these cases you're not necessarily trying to hide the seams, you're usually using them as repeating borders. Say you put a logo or design in a square. The outer squares would all align when tiling resulting in an organized plaid-like pattern with the logo in the center of all the blocks. If you use a circle instead of a square border, you'd get something more like chainmail instead of plaid.


Upload & Apply
With the title bar and background images made, it's time to upload them to your profile's photo album. If you don't already have one, go to your profile and create a new photo album and hit the "Profile" radio button below the album description field. Next, upload the three images you made to the album, then go to the profile customization section of your control panel. In the "Main" section, click the insert picture icon next to the image field and click on your background image in the resulting pop-up. Do the same thing for your Major and Minor Blocks and the their respective images. Now that we have images for the title bars, let's get rid of those background colors so the border colors show up again. When you're all done, click "Save" and go view your profile page.




Congratulations, you've got a fully customized profile page that's sure to stand out!

__________________
You can't wipe a welt
-J

Jaron's Realm - Paintball Commentary

Reserved for future content II

__________________
You can't wipe a welt
-J

Jaron's Realm - Paintball Commentary

Reserved for future content III

__________________
You can't wipe a welt
-J

Jaron's Realm - Paintball Commentary

Nice writeup. I know that took some time and energy to do.

__________________

Jaron, thanks for the write up! My profile now looks much better

__________________

Ok, I updated the image section thanks to the fix Jeff made. I've also added a few more tips. I'll call that a first draft, there may still be some spelling or grammatical errors, but I think it's pretty much done. Please let me know if anything is confusing or doesn't make sense.

__________________
You can't wipe a welt
-J

Jaron's Realm - Paintball Commentary

I didn't really do it, I had to call in help because the issue was a coding conflict from the vBSEO plugin.

Anywho, thanks for taking the time on this Jaron.

__________________

Jaron I am too lazy, just do it for me, lol.

__________________

GrandTickTock.com LuckyCoaching.com