Designing Your Profile Page: A Tutorial

[G-man]

Part Eleven: Customize Profile

Advanced Options: Designing Images


Creating images for use on your profile page.

So now that we're rather familiar with what edit's what, we are going to discuss creating images using your image editor software of choice. For me, it's Adobe Illustrator, but I'll keep this tutorial relevant to all image editors.

Major Block Header: I created the below image in Photoshop using the gradient tool and using a lighter and darker tone of green. The image size is set to cover the greatest height without leaving a space uncovered. The height of this image I created is 35 pixels high to show the greatest amount of contrast between the lighter top edge and the darker bottom edge. The width in this particular repeating image is irrelevant considering that this is a repeating image with no changes between the first pixel width. If you wish, you can layer a pattern above this image, just be certain that it matches up on the left and right, seamlessly.


(Major Block Header)



Minor Block Header: The image below is set for 22 pixels high to cover the greatest height of the minor block header. Remember when designing these images that they are going to be juxtaposed next to each other in the container that is floated to the left in your profile.


(Minor Block Header)



Seamless Tile Gradients:
If you wish to tile a background image, I recommend that you create or use an image that is seamless. By seamless, I refer to an image that doesn't show a seam when it's repeated (ie. it matches up precisely on the opposite edge).

With repeating images, you have the option of tiling it (ie. repeating horizontally and vertically), or repeating a "stripe" horizontally or vertically.

You can also use animated gif images for any of the above.

* Tip #2: When naming the images, I don't recommend that you leave empty spaces in the image name, as some browsers may have an issue reading empty spaces. If you wish to separate multiple words, use the underscore _ character.

[G-man]

That pretty much concludes the tutorial.
Any questions?

[RedGlitter]

Originally Posted by G-man

That pretty much concludes the tutorial.
Any questions?

I have no Qs as of yet but i would like to say I found this info very helpful and I think you did a fine job of putting it together for us. Thank you.

[G-man]

The rating it was given doesn't reflect this, but... (four people rated it a "5", one member rated it a "4", and two members rated it a "1" for "terrible" ). How can a thread such as this, (and yes, this is rhetorical) ever be rated anything less than a four, based on the amount of effort that went into creating a unique thread that doesn't exist anywhere else online, and that unselfishly provides a service, and promotes ForumGarden? Seriously, I'd like to see how the two members that gave this thread a one star rating can improve this. There's no reason to be childish or cowardly and it doesn't in the least bit, take away the need for such a tutorial, step up and explain why this is so terrible, if that's honestly how you feel, so that we can improve upon it. I attempted to explain it in the simplest manner possible so that everyone could comprehend it and have access to advanced skills that a few others have. All constructive suggestions and contributions are welcome.


I hope that this tutorial helps answer a lot of questions and that we see some really incredible and creative profiles out there.