|
|
|
I often get the question how to make profiles. Are you ones of those that want to know more about the basics of creating your own profile?
Here Im gonna gather my most important tips and hints for everyone to read. So far Ive only worked with old school profiles so have that in mind when you read this little (?) guide.
This is not a css coding-guide - its a help to guide you through the whole process of profiledesigning- and creating.
Before you start reading remember that this is for you who are willing to put effort into making your own profile. It isnt for the lazy ones or for you who
think you can have an amazing profile over one night. It takes tough work, original ideas, creativiness and time to make a profile. But the feeling of
creating something by your own is the greatest. And the response you get from others are usually worth every minute spent. If you feel like you dont have
the time or energy for it you can always get a free one from tektek.org or hire a profile-designer in the Personalized graphics.
To put things short I guess you can say it like this. When making profiles you do first graphics and then the coding. The graphics you can make in lots of different
programs like Paint, Photoshop etc. When you have the graphics you need to add the coding. Its a clean sheet in the profile from start so you need to add all the
coding yourself.
» inspiration & ideas
Before you actually start creating anything its always good to have a certain idea of what you want with the profile you are gonna make. Ask yourself what
kind of a feeling or theme you are looking for. Anime, music, celebrity, art, sports, any movie...? Some people think this is the toughest part of the profile-making process.
Coming up with an uniquee idea to build your profile around isnt easy but if you find the right inspiration you cant start spinning on that. Try and figure out what
you find interesting or funny, something that you can show others as a reflection of what you are and whats close to your heart or feelings. A good advice
is to find one main thing to work from, having too many ideas pushed into one theme not only makes it look unpersonal but usually also cluttered and unorganised.
» making it personal
This is something important. As mentioned you do want the profile to reflect who you are and your interests. You need to focus on the things you like and want.
Looking at other peoples work may be inspirational but in the end you need to work out what suits you the best on your own. Getting advice from others can also be a
good thing, but dont let other peoples judgements run over what you decide to do in the end. Content as well as the graphical layout are both two ways of expressing
your real or Gaia personality.
» images
If you have a photo or an image you're fond of its a nice start to start working out of that. Perhaps you have some old avatar-art laying around? If you want you can
always try and find a nice artist to make you some art. The Requests and Commissions is a good place to find artists on Gaia. You can pretty much find images all
over the internet but remember to credit where you got the image from. And if you find art that someone made its always nice to ask for permission to use it
beforehand. In case you are making a profile for someone else you always need to ask the original artist for permission to use images etc. There are plenty
of stockimages-sites and most can be found through google. On googles image-search you can also find most you are looking for. Dont forget that Gaia
is full of images that you can use, from the Gaia graphical sitelayout, that doesnt mean other peoples images though...
» colors
So now you may have some ideas and/or images you want to use in the theme. But you also need a colorscheme to go with it. I usually say that 2-3 colors are
the limit of how many colors you should use. If you add more colors than that you may risk it ending up blurry and messy. If you still decide to use a lot of colors,
which may look great, it need to really fit with the overall idea you have. Like if its a rainbowy-theme or if you have art included that works with colorfulness. However
sometimes if you have a strong and expressive art to focus the profile around making the rest of the graphics a bit more subtle works for the better.
If you have art you can usually pick up some of the colors from there. Some people find it hard to see what colors goes well together and clashing colors can often
burn peoples eyes and make the whole profile look unflattering. This and this site is good for you who wants to visualize the colorscheme before you start
working on the graphics. Want to find the right hex-code? Try this site. (Hex-code is a code that the browser will understand as a certain color. Some colors are more
'websafe' than others, meaning they will show up more correctly than others. example of hex-code: #ffffff is white and #000000 is black)
» sections
You need to decide what sections you want included and not. Having to exclude or include a certain section can both be a pain for some people. Myself I feel most
comfortable to have less sections showing in the profile. But others feel that almost every section is important to them. try and think through what sections that are important to you.
profile (avatar) - in some profiles the avatar just dont suit the overall theme. Perhaps the profile is not as Gaia-related as others are, then the avatar seems unnecessary.
Some people however love to match their avatar with the profile-theme or may have avatar-art included that goes with their avatarlook.
details - in case you dont want to publically show your Gaia details (last login, joined date etc) I suggest you dont include this section. Personally I like to
include half of the details (only the stats and not the info-part).
wishlist - showing your wishlist can be a good thing, esp when christmas or your birthday is coming up. A lot of the times people have no idea what to give you so
displaying a few of the things you want is nice. I put emphasize on a few since flooding your profile with items on your wishlist not only will make you look greedy
but also the profile look tacky.
about - this is the section I think is the most evident to include. The profile is a place for you to write something about yourself and show other people things of interest.
Sometimes I see people that has very little about themselves and that may be ok, but in some cases it just makes the profile look empty and soulless.
friends - personally I think that when including all of this section it requires a lot from the layout. Minimalistic profiles usually dont go well with this section.
But if you are one of those that think the friends on Gaia are one of the most important things - sure add the friends-section.
journal - perhaps you update your journal every day and you know many friends keep in contact with you that way - including the journal-section then comes natural.
multimedia - in case you find an interesting, funny, suitable multimedia for the profile you have in mind I think you should include this section. But if you just want
to add a multimedia just because you can - then dont. Sure having a multimedia play is cool but please dont add something that ruins the impression for the viewer.
Again - think about what fits your theme.
comments - another of the more useful sections. Letting the viewers have their reflections shown is a good thing. It makes the profile interactive and open.
Also its fun for you to see who visits the profile.
signature - this section can be tough to add. Perhaps you change your signature from time to time and the size of it may not be the same. Knowing how to
make room for the signature can therefor be hard. On top of it you may have links, text, avatar-art etc in there that looks odd together with the rest of the theme.
custom-sections - this is a pretty nifty way of adding additional things that you dont want to add in the about-section. I dont think I could ever make a profile
without my precious quilts- and recipesections. I also want my links-sections there not only for myself to quickly get to places but also to direct visitors.
But again, dont add a new section only because you know how to, it has to make sense for it to be there.
Some other parts of the profile you have to decide to include or not are:
worn items, the speech-bubble, friends in common, avatars of the commenting people, status-buttons etc.
All in all you have to think if the sections you decide to include adds to the theme in a good way or if it just feels unnecessary. Dont add more than necessary, dont add
more than you are planning on using in one way or another.
» content
With content I pretty much mean what you add in the profiles about-section. The content is what your profile is about, perhaps you want to show some favourite art
you have or talk about your pets or favourite band. You spice up your profile with almost anything that the viewer can read and look at. Dont think that a spiffy layout
with complicated graphics is all that viewers see when they visit profiles. People wants to read, dig through, find links to other cool places, share things, experience,
get to know, learn... There are really no limits to what you can do to your profiles as long as you follow the general rules of course.
When you have come this far you have thought up the most basic stuff, perhaps written a few things down. Now you need to move on to making the actual graphics.
» pen and paper
Now to one of the most creative part of the process - making the graphics and layout of the profile. In case you have the theme as a clear image in your mind already
you can head straight for the graphic program you use and start creating. But I prefer to make a simple sketch with a pen and paper first. Simply cause I want
to know how to position everything. I rather do this than work on all the graphics and details only to find out in the end that some sections wont fit and have to redo the layout.
(In case you dont have any fancy graphics program on your computer there are plenty of free or trial ones on the internet - see more under Further resources a bit down in this guide.
If you look on your computer you may already have Paint installed. Its a regular graphics program, simple but the you can make most basic stuff in it.)
» backgrounds
Some prefer to make a main-header for the profile and subheaders for the different sections. Others make the whole background as one image and put as
background to the content. It really depends on how you planned yor profile to be set up like. There isnt any way thats better than the other and none of them are
more easy/difficult to work with either. You can add graphics/backgrounds to:
the content, header, body, site, all sections and their h2's (subheaders), behind avatars, as statusbuttons and their hover-overs etc etc.
You dont have to make graphics to style all of the mentioned though, of course it also works with adding colors in the coding for them too.
» size and quality
Back to the graphics program. Some basic things you need to consider before you start is the size of the layout, which is dependant on if your profile is gonna be
small, simple and neat or maybe big, complex and grand. Another things to consider size-wise is the size of the image-file when its finished. If its too heavy it
take longer to load for people with slow connection. If you instead resize, cut or save the file smartly you can make it less heavy which will make the profile as a whole load better.
It may lower the quality of the graphics to save in a different format but then Id rather suggest cutting the image or resizing the layout.
» think out of the box
There is really no limit of how to arrange the profile-layout. Its really only your coding-skills that may limit how you place and style things. You can position the
sections on top of each other like in the default gaia-profile (old school) with a sidebar and a mainsection. You can place the sections in boxes scattered around the
profile or positioned careful into some sort of a pattern or shape. You can decorate behind, around, above, inside, in the headers, with borders, patterns, glowing, subtle, elegant, flashy...
Only your imagination knows whats possible. Think colors, borders, brushes, patterns, rythm, flow, contrast - think out of the box. What you think you may lack in graphics-ability
and talent you may gain in smart coding. There are a lot of things you can do to spiff up your profile only using css. Be original, innovative, stick out from the crowd.
Try and find something no one else has made before. And very important take your time, dont rush through things. The graphics part is usually what takes the most time in my process.
I carefully design the layout, look into small details, add and subtract, remake and rethink. Back and forth - test this and that. But I usually know when I hit the spot.
Its a learning process and you get better over time. Experience shows in a carefully made webdesign. Dont expect to be able to create the most amazing layout on the first try.
Be realistic. But work it, work it...
Ive seen unprofessional and childish profile-designers both in the PD and the Personalized Graphics going to full blossom as graphical artists in the matter
of one year. So if you put in some time, effort and the classical blood sweat and tears I think most of you can get better and better.
» text and subtexts
Text somewhere in the profile always lures the viewers attention. Carefully chosen and positioned words can enchance the profiles attractiveness. Maybe you have a slogan
or some favourite words or a short poem you want to add at the top or somewhere in the layout. Adding some main words followed by a smooth subtext makes the
eyes flow nicely over the theme leading it to the rest of the content. Usually not any text at all makes me not know what to focus on. The introducing and welcoming
text really sets the mood of the rest of the impression. Try not adding too lengthy text-masses though. Save that for the bigger content.
» finding the right host
Now that you made the graphics, saved your document/image(s) in an easy to handle format you need somewhere to host them all. You need a host thats reliable
and that has no or a high limit of how much you can upload and generous monthly bandwidth. But perhaps most important - you want one thats free.
There are a lot out there to chose from which are all very good but the most common and easy to use ones are:
- http://photobucket.com
- http://www.imageshack.us
All you have to do is register and upload the images and grab the link that comes with it. You paste in each of the chosen image into the correct code in your css. More about that soon.
» patches
Most people with profiles also want a patch. (A patch is a small image, 50x50 pixel big, that represents your profile. Many patches makes up quilts in peoples profiles or journals in lack of space)
Preferable it has the same colors or feeling to it as your profile as a whole has. The patch, of course, you also upload to the host. You hand out the code to friends and
other people that are interested in sharing their patches with you. Patching is a nice way of reaching out to others, making your profile known. Many people are willing to
share patches easily, but most people dont like it when someone demands them to patch. Its actually sometimes considered rude, people prefer to choose who they
want to patch themselves and only cause you patched them doesnt mean they have to patch you.
In the case that you change your profile and you want the patch to change along with it there is an easy way to solve it so that you wont have to hand out a new
code to everyone who already patched you. Lets say you save your patch as patch.gif. You then upload it to your photobucket-account. Next time when you
made a new patch you yet again save it as patch.gif (in a new folder on your computer preferable...), you then first delete the old patch on your photobucket-account
and after that upload the new one. It has the same name as the old one and therefor has the same url-adress to it. It automatically updates with the new patch in other peoples quilts.
» theme override
Now that you have the graphics and the general idea of your profile its time to head to Gaia. You need to add the graphics and start the coding of css.
(Css is the coding-language that you use to personalize the profiles on Gaia - no html or any other language wont work. Oh except for the bb-code you use in the about-box of course.)
It really isnt any rule that you have to make the graphics first and then start with the coding. Sometimes I make a rough test of graphics just to see if it even
works to code. Unfortunately, as some of you know, profiles can mess up in the most weird ways without anyone understanding why. May it be images or sections
not aligning as it should, sections not showing up at all or simply glitches. There has been times when I had to remake a whole layout cause it didnt work with the coding at all.
Anyhow, simple guidance where to add your css-code:
Go to My gaia ---> Account ---> Theme ---> Theme Override
Before you start adding any code it is of course empty. Thats cause you create the code by yourself. (To find css-coding-guides check further down) The good thing
about it is that you yourself choose how complicated you want things. Not everyone can create complex coding but anyone can create some coding.
With css you can choose to style the font and the colors of the text and backgrounds or you can go full out and style almost the entire profile from positioning of sections and
hover-over effects on the status-buttons.
If you have your profile set on Old school you can change between four differents 'styles' of profiles; Classic, Blocks, Grunny and Custom. For the most
part I recomend using Custom. That is if you decide to customize most of the theme yourself. If you want to change from Old school to v2-profiles go back
to preferences and scroll down a bit until you see a scrollist where it says: Choose profile.
» coding and css
There is no doubt about it that coding is timeconsuming. Especially in the beginning when you are learning things. When you have gotten to understand most parts of
coding its pretty much just routine. Its good to be structured and to work logic when coding. To have control over the code makes you discover errors more easily and also
to find certain parts of it quicker. Place everything in order and work methodically downwards in the coding, finish one thing before going to the next and so on. This
will make the work smoother. I can recomend having some Gaia css-guides open in one browser so you can quickly switch and look if you bump into some problems.
Also some general guides about css you can find on the net may come in handy. If you have some old codes from previous profiles youve made its always good to
peek at those, if you know the code worked in that profile. Looking at other peoples codes can be useful if you get stuck and knows that someone has solved a
problem you have - but please remember that taking entire codes is not the answer to truly understanding what it is you are doing. And even if it isnt straight out not allowed
it is very much disliked among all profile-creators and others as well.
There are a lot of different coding-languages you can use on the net. However in the Gaia profiles only css will work. So if you have a html-code or perhaps a code
from a myspace-layout it will not work. But as most people know css is a common known language since you can use it when you build regular websites.
To define css I took some help from w3schools-definition.
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
If you know html or any other coding-language beforehand you have a good understanding and should be able to grasp css quicker. Most languages has the
same logic and basic build of how you do things.
Please have in mind that being correct when coding is important. Every bracket is important for the code to work properly. Either if its missing or there by mistake.
(With bracket I mean these things } but also ; is important.) Spelling mistakes can easily make the profile not show up properly or at all. Make sure to check and
doublecheck things like this before you go asking questions of whats wrong in the code. Css is built up in a certain and logic way. Example:
#about {background: none;}
This tells the browser that you dont want a certain part or element (in this case the about-section) to have a background. Every code is set up in that way basically.
It differs a bit from old and new version of profiles though. You can control a lot of things in that concerns the about-section if you add other codes between the
brackets ( these: { } ). Example:
#about {background: none; width: 100px; height: 200px; border: none;}
I think what I added to this code is pretty much obvious...
» browser compatibility
On the net and of course on Gaia people uses different browsers (Internet Explorer, Firefox, Netscape, Safari etc). Usually they display sites very much alike but sometimes
not and this is something you have to have in mind when coding profiles. I guess you can say that they all accept and reads css in different way. Usually there are
no problems when you make a fairly non-complicated layout but some of the problems you can run into are:
* filters (glow etc) and colored scrollbars (works in IE only)
* positioning of different sections and objects (dont align the same in IE and Firefox)
* rounded caption-corners (wont show up in IE)
To me its cruical that you design the profile for at least the three biggest browsers out there; Firefox, IE and Netscape. I dont see the point in putting all that effort into
a work and perhaps be missing out on a lot of users who cant view the profile properly. I know this is hard since usually when you design you do it on your computer
and for your computer, but then please take a step back and try and view it and think of it as an outsider.
Perhaps you are curious about how many users use what browser. Its hard to tell but I once made a poll in the PD and I got a surprisingly result that over 60% uses
Firefox. But you should then have in mind that us PDers may be a kind of our own with a lot of browser-awareness. Next after Firefox came IE with like 20% users and
then the rest of the not so commonly used browsers.
» resolution
Resolution is another things that people may disregard when making layouts. Basically its the size-setting of the screen someone has on their computer.
It can vary a lot simply because some uses newer better screens that allows you to view larger and highquality content. However some people still own pretty old and
bad screens which cant show a big resolution. Lets say you create a layout or a background thats 800px wide and 1000px in height. Those with lower resolution
than that wont be able to view the layout all at once but will have to scroll down. Then again the users who has higher resolution than the mentioned size will see it
all on the screen. You can easily see what resolution your screen are set to now by (in windows) going to your control panel --> display --> settings.
Id say the most common resolutions are 800 x 600 and 1024 x 768.
Usually different resolution shouldnt cause any problems in profiles but there are some occasions when this happens. Sometimes when positioning things the
resolution affects where things show up. Whats positioned right in one resolution may end up in a different and wrong place in another. As a general rule its the best
if you dont use layouts wider than 800pixels in profiles. That way you are assured most if not all can view the whole layout properly. Backgrounds are especially hard
to control considering the resolution can affect how it shows up. Having a busy patterned background in the body may end up not aligning up correct and the
pattern gets broken.
» borders and decorations
When I first started making profiles I made pretty much all my graphics in a graphics program first and then coded it all pretty simple. Nowadays however
I elaborated and evolved a lot. Ive come to understand how many things you can do with just coding. Styling the text and links with font and colors and such are
just the basics. But there are also borders, background-colors, small sections that can be adjusted. Simple things like how to display the wishlist-items or to change
how names are displayed in the comments. The details section are another part of profiles that are worth looking into if you want to make simple changes with only coding.
» tektek-profiles
When taking tektek-profile codes and modifying you may think its the easy and fast way around having to understand css and sure it can be a great way to learn.
However if you want to grow a deep understanding for css and profiles I strongly suggest that you learn and create the code by yourself from scratch. That way you
know how to continue with not only profile-creation but also have learnt something that you may find use for outside Gaia on the net. So I say read up on the
css-guides there is, they explain things in a very easy way. A lot of the times I see people in the PD who took a tektek-code or someone elses code who are asking
question or requesting the most basic css-codes that in my opinion you should grasp before you start fiddling with someone elses code. Its pretty frustrating when
people dont read the stickys and guides there are and whine when codes arent working cause they fail at the most basic stuff. Usually in the PD I answer questions
in a manner that in some way forces the person to at least try and understand and learn what it is they are doing instead of simply handing them finished codes.
» what not to do:
Everyone has their own taste in how to make things and there really arent any rules when it comes to profiles. Ive seen maaaany styles with great layouts and
not so great coding - or with average graphics and amazing coding. Ive seen people do the most common mistakes still pulling of their theme wonderfully.
And Ive seen people who followed every advice there is and still there seems to be something missing to make the profile IT.
There are some definate no-no's that I have to bring up that sometimes beginners seem to fall for. Im not saying you cant do it, but its just some small advice that
my experience from rating and hearing other peoples likes and dislikes have taught me.
too many images
Either in the layout-graphics as a whole or the About-section. This is a very common mistake especially since v2 came out and people easily could add
more and more images. Simplicity is the word! The viewer dont have the patience or the interest to scroll and scroll only to view one anime-image after the other.
They all get lost in each other and it doesnt add any charm to the profile at all. So spare us the cluttered about-sections, please.
scrolls
Wanting to use one or two scroll is understandable when the room in some sections arent enough. This especially goes for the comments-section which you cant control.
You just dont know how long comments people will make. However there is a difference in having one scroll and a total overload of them. Not only it is
uneccassary but also very unflattering to the profile as a whole. If you want a lot of content in the about dont squeeze it all into a scroll, resize the layout
instead or rethink if all that content is important. Again, dont think that coloring the scrolls will all of a sudden solve the problem since that only work in IE.
clashing colors
Using clashing colors in the layout can look funky and cool and Ive seen it done nicely some times. But you have to be careful when choosing the colors.
It shouldnt burn the eyes of the viewer and the theme should not look scattered
and unfinished.
unreadable fonts
This is very important. No one wants to stare at the screen trying to figure out what you have written. Chose a readable font-color and size
AND make sure the texts background arent messy or in a way that you cant read the text against it.
multimedia
A lot of people use autostarting multimedia in their profiles. Ive actually gotten so used to it that Ive lowered the volume on my speakers. But to me thats just wrong.
Other people shouldnt be able to control my "air-space" that easily. The music you chose for your profile may be awsome, but not everyone thinks so and may even
leave as soon as they hear the music. Instead add a play OR at least a stop-button so that you provide some control to the visitors.
images theft
No one wants to see this and believe me you dont want to be caught with it. Make sure you have the right to use images in your profile.
too long wishlist
Are you the bragging-kind then go ahead and add those 30 items to your wishlist. But how do you think you appear to other people? Isnt it better to add the 8-10
most previous things you really want instead and perhaps even get a change at getting them...
» getting stuck
This happens to everyone from time to time. Perhaps codes just wont work although you KNOW it should. Come to the beloved but sadly enough not that
active forum for the lovers of profiles - Profile Discussion. Before you post a new thread you should look around. Perhaps someone else asked your
question so all you have to do is read a bit in that thread? But if you start a thread please be patience - the forum is really slow so it may take some time before
someone comes and answers but someone usually do sooner or later though. In this forum you also find the most commonly used and best css-guides.
» inspiration
Inspiration can be tough. Its not always I can find the right mood to be able to create new interesting graphics all the time. But you really learn from experience.
Dont be afraid to play around with things. If its just blank try and take a step back and do something else for a while. Like listen to music, watch tv, a movie,
take a walk, browse the web. Dont be surprised if it can take some time to get back, we just arent on the top every day.. or week.
» copyright:
All of you who have created something you feel proud of know how upset you would feel if someone copied or stole your work. Unfortunately too often on Gaia I
see people who obviously cant be creative on their own and therefor steal other peoples work, may it be codes or images. They take the easy way out maybe
because they dont know how to/are lazy/arent clever enough to come up with own great ideas, but most of the times they end up looking like fools when people
reveal or see through their cheap tricks. Ive revealed many people that have taken both codes and layouts and luckily most of them have admitted and felt ashamed.
I like to put it this way: Dont you prefer to get praised of your own ideas and work instead of something someone else has done? Isnt the feeling of having done
something all by yourself better than taking from others?
However, coding-theft arent reportable since it isnt copyright protected in that sense that images are. But if you see someone using your images/graphics
dont hesitate to report them to an online mod. Make sure to backup your report with evidence if possible.
» graphics programs:
GIMP - Free
Inkscape - Free
Paint.NET - Free
Adobe Photoshop CS2 - 30 Day Free Trial
Corel Paint Shop Pro XI - 30 Day Free Trial
Macromedia Flash Basic 8 - 30 Day Free Trial
Macrodmedia Studio 8 - 30 Day Free Trial
» css-guides:
 - Kira's guide that explains most old school codes in a graphical and easy way.
- Eli's guide for css, with both old school and v2 codes.
- Chisa shows some basic css with explanations so that you understand the codes.
Fred's Delving Guide Into The Insane Coding Bitchfest Known As V2 - Eddafreds guide for v2.
» other resources:
 - a must-read for you that want to learn most things about profiles from scratch.
http://www.gaiaonline.com/forum/viewtopic.php?t=21555555 - a guide about browsers-compatibility
» for free profile-themes:
http://www.tektek.org/themes - the biggest database of gaia profiles so far
- Blue is one of the most amazing profile-designers there is.
http://www.freewebs.com/lollypoplovexxx - not many but quirky and cool
http://www.gaiaonline.com/journal/index.php?mode=view&p=5217281 - F!ZZBANG's famous profiles.
------------------- --------------------- ---------------------
Was this guide useful? Did I miss something? Should I add something? Found any errors?
Just post your comments below here and I will look into it.
Thanks for reading. =)
 plysch · Wed Feb 28, 2007 @ 10:41pm · 32 Comments |
|
|
|
|
|
