Editing your profile page - Guide by Methos

Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#1  Edited By Methos

No Caption Provided

Ok, a lot of you probably don't know me, but i'm Methos from over at ComicVine

I wrote a full guide up on how to edit the background page and what sort of things to use, and a couple of people asked me to come over here and post it for people here to use as well. So i thought what the hell, came over here, signed up, and here we go...

Hope you find it as useful as the folks on CV did.

How to edit your profile background



Ok, i've had a lot of people ask me this... how do i edit my profile background to make it look cool with (Insert random character name here) as my character.

So i figured, instead of replying to each PM in turn, i thought i'd go ahead and create this guide for everyone to see, that way you can all have a go and create some kick ass backgrounds for your profile pages here.

Ok, first things first... this requires a good amount of time and a good amount of effort to make it look good... also, you could probably do this in Paint or GIMP, but for this tutorial i will be using Photoshop CS3, as i know a few of you on the site are using this software for your own images.

Ok, first you want a rough idea as to what you want the profile to look like... what characters do you want on it? What color scheme are you aiming for? While mine is perfectly green, you might want blue, pink, red or patriotic colors... it's all up to you and the feel you want your page to have.

Next up you need a template... fortunately, here's one made by some of the guys that created this site... say thank you lol

Click HERE to download the template in .PSD format


Ok, now you've got the template downloaded, you want to open it in the application of your choice... i highly reccomend Photoshop for this job as it's easy to use and has tons of advanced features for you to play with. Once you've opened it, you'll be greeted with a screen that looks something like this.



So this is your basic template where you're going to work.... a couple of hints and tips on this first...

Anything above the horizontal blue line isn't going to show... this is where the Comic Vine menu goes at the top... so there's no point adding anything there as it will be covered up very quickly...

Now, the black square on the left by the first vertical line... that's where your profile Avatar goes... along with your profile name to the right of it... it's important to keep this in mind when editing so you know what parts of the image will be covered up and which are free to edit...



Got it?

Right, now on to the complecated bits... now you have your template and have a good idea of what you want your profile to look at... now you can start designing...

I'm going to use Gambler's page for this guide... hope he doesn't mind lol

So this is what his page looks like currently...



So now you can see where the avatar is, and where the text goes... this gives you a pretty good idea of what sort of images and other bits and pieces you can add to the page to give it the desired effect.

you can also see the transparency layer added by the profile for the updates and other bits... again, this just gives you an idea of where you can add the images so they aren't covered up by the text or anything.

Ok, now we come to the fun stuff... creating the image... first of all you want to find a good selection of images for your profile page... well, i know Gambler uses Gambit all the time, and his current profile is heavy on the Gambit images, Rogue images and Pink / Purple coloring... so those are the themes that i will use to design his new page...

Now bare in mind that you can use any images you want for this, but you do want to keep it pretty easy to read and view, so don't clutter it up too much, and bare in mind that other people may use different screen resolutions to the one you are currently using...

So, having decided on a theme for the page, i can start adding pictures, text and everything else i need....

this is the fun part, play around, move around images and text... change it until you get the desired effect... this can take some time, so it's worth digging through the CV galleries to find some perfect images of the character you want...

for Gambler's page, i've chosen these images from the Gambit gallery...




So, once you've got the images you want, it's just a bit of copy and pasting, dragging to rearrange and cropping them to fit the design you have...

again, take your time over this... it's not worth rushing the job, do it right and you'll have a kick ass picture at the end for everyone to see....

now, once you've finished you can add a few finishing touches... quotes, text, anything you want, then save the image....

important bit here...

ALWAYS SAVE THE IMAGE AS A JPG... AROUND 70% COMPRESSION WILL ALLOW THE IMAGE TO STILL LOOK GOOD WHILE BEING SMALL ENOUGH NOT TO SLOW DOWN PEOPLE VISITING YOUR PAGE.

Now, once that's done you can sit back and look at the end product...



Note i added some glow around where i knew the avatar and name would be, just to give the page that flash of color that i know Gambler likes... you can also see where i cropped the images to make them look cool and arranged them to fit so that the image isn't over crowded or too 'flashy'.

So, now if you're happy with the design, you can upload it to your page and set it as the background picture... it'll take a few seconds to load up, but once it's done you can admire the results of your hard work...



So, guide finished... just a few last hints and tips...

  1. The image will tile. If you don't want it to tile, use a image that is very wide (1900 pixels).
  2. The image will be partially covered up by the header of the site. If you want something to show up perfectly aligned, make sure adjust your image to be lower then header.
  3. I've included an option fade for those that can't find high resolution artwork. Just place your art below the fade layer and it will give you a natural fade out when being viewed on high rez monitors.
  4. Remember that part of your background will be partially covered by navigation, don't think of this as a limitation, but as an opportunity to "hide" characters behind that nav.
  5. Don't forget to hide the header and icon layer on your PSD before you save. Use the "Save as Web" option if you have photoshop and use a 70% compression JPG to make sure you get a cool image that won't take too long to download.
Hope everyone found this useful and informative... these bits aren't neccesary to enjoy the site, but they are fun to work with and can add that little bit more of a personal touch to your page.

If you end up doing a good one, i'd love to see a screenshot of it in this thread, a chance for all you budding artists to show of your work to the rest of us.

well, good luck editing to you all,  If anyone does have any questions about this Guide, i can't promise that i will be on the site much... but you can all quite happily pop over to Comic Vine and find me there regularly.

Methos


Avatar image for mike
mike

18011

Forum Posts

23067

Wiki Points

0

Followers

Reviews: -1

User Lists: 6

#2  Edited By mike

This is such a good guide, I'm going to pin it to the Editing forum permanently and to all boards for a couple of days so more people see it.  Thanks dude.

Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#3  Edited By Methos

Anytime man...

if anyone has any questions or wants more help, just give me a shout over on CV... thats where i Mod, so hope i can be of some use here as well

m

Avatar image for mattyftm
MattyFTM

14914

Forum Posts

67415

Wiki Points

0

Followers

Reviews: 4

User Lists: 11

#4  Edited By MattyFTM  Moderator

Awesome duder!!!

Avatar image for hamz
Hamz

6900

Forum Posts

25432

Wiki Points

0

Followers

Reviews: 2

User Lists: 5

#5  Edited By Hamz

Thanks mate, very nice guide. Does this mean we're gonna have to come to ComicVine and write a guide now?....damn, thought I'd have a quiet weekend :P

Cheers again for providing this, very nicely done.

Avatar image for bog
BoG

5390

Forum Posts

42127

Wiki Points

0

Followers

Reviews: 3

User Lists: 5

#6  Edited By BoG
Hamz said:
"Thanks mate, very nice guide. Does this mean we're gonna have to come to ComicVine and write a guide now?....damn, thought I'd have a quiet weekend :PCheers again for providing this, very nicely done."
Hamz, I think it means we have to write more guides here. They're trying to take our jobs!
Great guide by the way, very detailed. Kudos.
Avatar image for deactivated-58efb53e06a03
deactivated-58efb53e06a03

1365

Forum Posts

3153

Wiki Points

0

Followers

Reviews: 2

User Lists: 1

Sweet guide, I'll have to use my gimp Photoshop knock-off "Photostudio" that I got free with my printer if I want to do anything worthwhile though.

Avatar image for snail
Snail

8908

Forum Posts

16390

Wiki Points

0

Followers

Reviews: 1

User Lists: 9

#8  Edited By Snail

That's really useful, thanks.

Avatar image for brukaoru
brukaoru

5135

Forum Posts

12346

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

#9  Edited By brukaoru

Great guide. I have a question though: Don't you lose quality in .jpg format? Whenever I save in .jpg, the color looks worse than saving it in .png format. Is there something you can do to prevent that?

Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

#10  Edited By LordAndrew
brukaoru said:
"Great guide. I have a question though: Don't you lose quality in .jpg format? Whenever I save in .jpg, the color looks worse than saving it in .png format. Is there something you can do to prevent that?"
Depends on the type of image and how much compression you use.
Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#11  Edited By Methos

In theory you could use a PNG file... that would save you loosing image quality during the save, but would up the file size quite considorabely...

it's a tradeoff, size for quality... your choice

M

Avatar image for jjor64
JJOR64

19700

Forum Posts

417

Wiki Points

0

Followers

Reviews: 3

User Lists: 5

#12  Edited By JJOR64

Awesome guide.  Maybe I will make one sometime in the future.

Avatar image for brukaoru
brukaoru

5135

Forum Posts

12346

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

#13  Edited By brukaoru
Methos said:
"In theory you could use a PNG file... that would save you loosing image quality during the save, but would up the file size quite considorabely...it's a tradeoff, size for quality... your choiceM"
That's pretty much what I've encountered. Thanks for answering. :)
Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#14  Edited By Methos

Ok, as requested by a few people...

here's the template used in JPG format...

not sure how much help it's going to be with placement and such, but at least here you'll be able to get the dimensions of the template correct.

Download HERE

M

Avatar image for lamegame621
lamegame621

1000

Forum Posts

664

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

#15  Edited By lamegame621

This is awesome.

Avatar image for rhcpfan24
RHCPfan24

8663

Forum Posts

22301

Wiki Points

0

Followers

Reviews: 16

User Lists: 8

#16  Edited By RHCPfan24

Wow I don't think I have any more questions. Great guide, dude.

Avatar image for giantbomber
GiantBomber

400

Forum Posts

17

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#17  Edited By GiantBomber

Nice guide mate.

Avatar image for suicrat
Suicrat

3829

Forum Posts

1057

Wiki Points

0

Followers

Reviews: 9

User Lists: 0

#18  Edited By Suicrat

Proof as to this guide's excellence: myseizuriffic profile.

No Caption Provided
Mine was made entirely in MS Paint. No need for any fancy programs. (No glossiness though, but fuck glossiness.)
Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#19  Edited By Methos

looking cool people... here's my current one...




I'm currently working on a way for the Profile Wallpaper to stretch all the way down, so it's not just covering the top 240 odd pixels...

it'll work one day, i just need to chat with the admin about editing one of the base site images and changing a bit of CSS to include transparency...

When it is working on a full screen layout, i'll get a new template done and posted for people to play with.

M

Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#20  Edited By Methos

Ideally, this is going to be the finished product..... hopefully anyway...



M

Avatar image for methos
Methos

23

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

#21  Edited By Methos

Now, i will be doing a few requests for people... and i'll be posting them here openly for everyone to use if they want...

click for fullsize image and save...


Clair Redfield by Methos



Snatcher By Methos



Sonic The Hedgehog By Methos



M
Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

#22  Edited By LordAndrew
SuperMooseman said:
"Methos said:
"looking cool people... here's my current one...

I'm currently working on a way for the Profile Wallpaper to stretch all the way down, so it's not just covering the top 240 odd pixels...it'll work one day, i just need to chat with the admin about editing one of the base site images and changing a bit of CSS to include transparency...When it is working on a full screen layout, i'll get a new template done and posted for people to play with.M"
I think you misunderstand the point of a banner."
Well, the text on the site does refer to it as a background.
Avatar image for giuseppe
Giuseppe

148

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

#23  Edited By Giuseppe

Wow, Methos is over her too. (Giuseppe Riccadonna from Comicvine)

Avatar image for suicrat
Suicrat

3829

Forum Posts

1057

Wiki Points

0

Followers

Reviews: 9

User Lists: 0

#24  Edited By Suicrat
Miniman said:
You need a new Firefox/WIndows theme."

 
I disagree. I don't like the way Vista looks, and I didn't really like the way XP looked, so I made a scheme that looked like Windows 98, the last decent operating system. (From Microsoft.)
Avatar image for biggerbomb
BiggerBomb

7011

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 0

User Lists: 4

#25  Edited By BiggerBomb

Is the PSD only for Photo Shop? Er...is that what the P and the S stand for? If so, what do I use for MSPaint?

Avatar image for mattyftm
MattyFTM

14914

Forum Posts

67415

Wiki Points

0

Followers

Reviews: 4

User Lists: 11

#26  Edited By MattyFTM  Moderator
BiggerBomb said:
"Is the PSD only for Photo Shop? Er...is that what the P and the S stand for? If so, what do I use for MSPaint?"
PSD stands for photo shop document I believe, so yes, you can only use it in photoshop.Just use the JPEG he linked to.
Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

#27  Edited By LordAndrew

Although the PSD format was orginally created for Photoshop, there are other applications capable of opening, manipulating, and saving PSD files. Microsoft Paint is not one of them though.

Avatar image for biggerbomb
BiggerBomb

7011

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 0

User Lists: 4

#28  Edited By BiggerBomb

Alright, wutevz. thanks for the help. I'll figure somethin' out! ;D

Avatar image for cl60
CL60

17117

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 0

User Lists: 5

#29  Edited By CL60

Complicated!

Avatar image for video_game_king
Video_Game_King

36563

Forum Posts

59080

Wiki Points

0

Followers

Reviews: 54

User Lists: 14

#30  Edited By Video_Game_King

Neat guide, but do you have the same file available for Paint.NET users? Or can you at least give me the resolutions so I can guess at it?

Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

#31  Edited By LordAndrew
Video_Game_King said:
"Neat guide, but do you have the same file available for Paint.NET users? Or can you at least give me the resolutions so I can guess at it?"
Try this plug-in to open PSD files in Paint.NET.
Avatar image for video_game_king
Video_Game_King

36563

Forum Posts

59080

Wiki Points

0

Followers

Reviews: 54

User Lists: 14

#32  Edited By Video_Game_King
LordAndrew said:
"Video_Game_King said:
"Neat guide, but do you have the same file available for Paint.NET users? Or can you at least give me the resolutions so I can guess at it?"
Try this plug-in to open PSD files in Paint.NET."
Are there any unfortunate side-effects to this, like how the new version of Paint.NET destroyed Feather?
Avatar image for lordandrew
LordAndrew

14609

Forum Posts

98305

Wiki Points

0

Followers

Reviews: 0

User Lists: 36

#33  Edited By LordAndrew

Hell, I don't know. I don't use Paint.NET. I found multiple sites linking to that plug-in though, and I didn't catch any negative posts about it.

Avatar image for fleppie
fleppie

239

Forum Posts

51

Wiki Points

0

Followers

Reviews: 0

User Lists: 11

#34  Edited By fleppie

Wow, thanks for the guide Methos. The psd template really made it easy to quickly edit my profile background. Gold!

Avatar image for leky1
leky1

953

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 8

User Lists: 2

#35  Edited By leky1

methos?you might remember me and a litlle group named justice league of comic vine? (im not into comics but RP-ing is fun :P)

Avatar image for boiglenoight
Boiglenoight

605

Forum Posts

154

Wiki Points

0

Followers

Reviews: 2

User Lists: 3

#36  Edited By Boiglenoight

What happened with the background for profiles?  Looks like they tile now, resulting in a profile that resembles the GeoCities personal pages of yore.

Avatar image for kamasamak
KamasamaK

2692

Forum Posts

38820

Wiki Points

0

Followers

Reviews: 0

User Lists: 12

#37  Edited By KamasamaK
@Methos: It looks like this guide could benefit from an update to reflect the new profile design. Especially since it is stickied.
Avatar image for flstyle
FLStyle

6883

Forum Posts

40152

Wiki Points

0

Followers

Reviews: 0

User Lists: 17

#38  Edited By FLStyle
@Kamasama said:
" @Methos: It looks like this guide could benefit from an update to reflect the new profile design. Especially since it is stickied. "
As well as I was reading the guide for two minutes before I realised it was for the previous site version :D
Avatar image for charlesalanratliff
CharlesAlanRatliff

5763

Forum Posts

13647

Wiki Points

0

Followers

Reviews: 0

User Lists: 34

Oh noooo he's responding to an eight month old post what will we dooooo 
 
 
Anyways, I was using this guide without realizing that it is no longer applicable, and was wondering if there are any people out there who know how to make cool backgrounds that work with the latest profiles. 
 
If not, then I hope people with paid memberships get more customization options or something.