custom avatars and signatures

[larryb123456]

I have a friend who is heavily into internet bittorrent sharing (i.e., peer-to-peer file trading of software, music, movies, TV, games, digital books, photos, etc.) and he wanted me to make an animated userbar for him for a website he's a member of, http://www.mydlms.com . He wanted the text on the bar to read "MyDLmS User" and he wanted this resource logo image, http://i.imgur.com/rJNpc.png , to be scrolled up and down. I absolutely loved the turquoise color, so I made the text and scanlines in that color, and came up with this animation, http://i1196.photobucket.com/albums/aa403/larryb123456/zzz_TURQUOISE_4nn4.gif

This is a frame-by-frame animation: 40 frames, 0.11 sec display time per frame, 255 colors, 350x20px, 122 KB. "My Download Maniacs" is scrolled vertically at the rate of 1px per frame. The resource logo image, 2000px in width, is pretty, but a little "grungy-looking". I had to reduce the width of this image to 250px for it to fit in the userbar, a reduction to 13% of the original size. This large reduction made the image look a little more grungy-looking, but I like it. I think it's pretty (in an ugly sort of way -- lol). I fought the temptation to have pulsating letters and moving scanlines on the right side of the userbar, to maintain simplicity.

So, I looked online for another "My Download Maniacs" logo and found one at http://www.trackers.gr/trackersg.php , down the page a bit in the left column of listed websites. I "downloaded" this logo image by a print-screen capture. I changed the text on the userbar to read "www.mydlms.com user" and came up with this version in which I keyed the colors to brown, beige, and black, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMSUB010sec54uniqueframes255colors350x19pxOOED193KB.gif

This is a frame-by-frame animation: 54 frames, 0.10 sec display time per frame, 255 colors, 350x19px, 193 KB. "My Download Maniacs" is scrolled vertically at the rate of 1px per frame. The background on the right side of the userbar is a 2-frame animated GIF.

"My Download Maniacs" is not to be confused with "

", but I'm sure you can download "10,000 Maniacs" at "My Download Maniacs" !!!

But, I don't think you can download "My Download Maniacs" at "10,000 Maniacs".

Edited December 18, 2012 by larryb123456

[larryb123456]

I saw a TV ad that I liked (because of the graphics) for World of Warcraft: Mists of Pandaria, a multiplayer online role-playing game that was released about 3 months ago. I finally got around to making an animated GIF userbar for it, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMS010sec90uniqueframes255colors350x19pxOOED232KB.gif

This is a frame-by-frame animation: 90 unique frames, 0.10 sec display time per frame, 255 colors, 350x19px, 232 KB. The image is scrolled vertically at the rate of 3px per frame. The background with the moving scanlines is a 2-frame animated GIF. I keyed the colors on the left and right sides of the userbar to the colors on the logo, specifically gold letters outlined with dark brown on a greenish-teal background with brown scanlines. I think this "keying" works very well with the scrolled image and it's pretty all by itself, IMO.

I made the scrolled image by combining cropped and re-sized versions of: 1) a larger promotional JPEG and 2) a logo on a black background.

[larryb123456]

I'm really not a fan of fractal geometric pattern "art", since it just looks a little weird to me. Plus, I don't care for the concept of having equations and computers create the art, since it makes the result seem impersonal, IMO. I'd rather have the "real" human touch involved, with the associated flaws and all.

But I saw a fractal art pattern that I liked -- [because of: 1) the striking pink and green colors on a stark black background and 2) the strong diagonal of the fractal image] -- so I made an animated GIF userbar from it, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMS011sec72frames65unique255colors350x20pxOOED201KB.gif

This is a frame-by-frame animation: 72 frames (65 unique), 0.11 sec display time per frame, 255 colors, 350x20px, 201 KB. The fractal image is scrolled vertically at the rate of 3px per frame. The word rotation on the right side of the userbar is a 12-frame animated GIF, where each of the 4 unique component color combinations stays in place for 3 frames before the next color combination appears. Thus, each color combination has an effective display time of 3x(0.11 sec) = 0.33 sec per frame. To elaborate on this a little, let X/Y represent "fractal", in color X, and "fanatic", in color Y. So, I ordered the 12 frame GIF as pink/pink, pink/pink, pink/pink, green/pink, green/pink, green/pink, green/green, green/green, green/green, pink/green, pink/green, and pink/green. In a nutshell, this approach slows down the rate at which the words change color as compared to a strict display time per frame of 0.11 sec, which is way too small, IMO, as shown below, http://i1196.photobucket.com/albums/aa403/larryb123456/4-frameGIF011sec.gif

[Kelsenellenelvian]

Hey larry?

I have never asked for one but will you make me a double height non animated userbar for me base on my current sig?

[larryb123456]

@ Kelsenellenelvian:

I'm really not sure what you want.

A "standard" userbar height is 19 or 20 pixels, so a double-height one would be 38 or 40 pixels tall

The signature you show is 260x80px, so if you just reduce it proportionately by 50%, won't that give you a signature of the height you want (i.e., 40px)? Then the length would be 130px.

[larryb123456]

LeBron James, nicknamed "King James", is an American professional basketball player -- (a 6 ft 8 in small forward) -- for the Miami Heat of the National Basketball Association (NBA). He has achieved numerous awards and honors. Probably number one on his list is the NBA championship his team won last year. He was named the Finals MVP (i.e., Most Valuable Player).

The userbar presented in this Post is similar to that presented in Post # 477 for NBA player Kobe Bryant, with both bars having the waving team flag scrolled on the left side, the player JPEG scrolled on the right side, a background with moving scanlines, and "pulsating" text, http://i1196.photobucket.com/albums/aa403/larryb123456/AniMSUB009sec80uniqueframes255colors350x19pxOOED157KB.gif

This is a frame-by-frame animation: 80 unique frames, 0.09 sec display time per frame, 255 colors, 350x19px, 157 KB. The Miami Heat waving flag (a 4-frame animated GIF) and the LeBron James JPEG are each scrolled vertically at the rate of 2px per frame. The background with the moving scanlines is a 2-frame animated GIF.

---------------------------------------------------------------------------------------------------------

Some LeBron James quotes:

"I like criticism. It makes you strong."

"The first time I stepped on an NBA court I became a businessman."

"I don't read books much."

"I never get too high on my stardom or what I can do."

"You have to be able to accept failure to get better."

---------------------------------------------------------------------------------------------------------

[larryb123456]

@ Kelsenellenelvian:

I'm sorry for the delay in getting back to you. I got tied up in Christmas-related activities, but now I'll have more time to devote to your request. BTW, I have long admired the beauty of your signature and I wondered to myself if I had the ability to make something that pretty. But now, it seems that we'll find out........GULP........(lol).

Is the person who originally made the signature no longer available to do the work? I ask this because he would probably have all the "goodies" needed for a new version on different Photoshop layers, and it would be easy for him to modify each aspect. Do you know what the font is called? I just have what's available with Windows XP and what's online. (I use dafont.com to get general categories of fonts. They really don't have specific ones, but I could check there and other free-font sites to come up with something similar.)

When you say double-height userbar, do you want the "standard" ellipse layer at the top, which gives the polished look? Also, do you want the scanlines, usually diagonal? I ask this because that is what userbars have.

What I'm going to do now is re-size your current signature to 350x40 pixels. 350px is the width of a standard userbar and 40px is double-height. I'm going to do this "quick and dirty" just so you can see how your signature would look undergoing the userbar "transformation".

[Kelsenellenelvian]

I have the base WPI logo.

Yes I would like to have rounded corners.

Monotype Corsiva Monotype Corsiva.TTF

I mainly would like your artists rendition.

No the original artist disappeared quite some years ago.

I know I am going to sound completely off my rocker now but:

I would like the main color to be black and a splash of lime and fuchsia if you can mix them in please sir?

Edited December 26, 2012 by Kelsenellenelvian

[larryb123456]

@ Kelsenellenelvian:

As I was going to post this message below between the 2 dashed lines, I saw that you had posted a new one. I'm going to go ahead and post it as written anyway, mainly so you can see what the image would look like at 350x40px. If this image is too distorted (i.e., elongated) for your tastes, let me know and we can try a different length.

I see you have the font and the WPI logo. That is GREAT !!!

We can't use a black background because the WPI screen and the bottom part of the keyboard would "disappear" into it, unless that's what you want.

Can you think of another color you like and won't cause disappearing problems?

I don't like the idea of "splashing" lime and fuchsia (or other colors), since it would interfere with the reading of the text, IMO. But the idea of using both colors in an orderly, subtle scanline pattern should work great.

So, please let me know if the 350px length is OK. When we decide on a length, I'll start work in earnest. I'll go ahead and make a number of samples ("quick and dirty" as shown below) of different lengths to help you decide.

I'll post those next.

Also, do you want the gray/white/gray border that is in your signature? Normally, such borders are not included in userbars and to me they would take away from the "precious" space? But if you want a border I can make a 2px one, white on the inside, gray on the outside.

Rounded corners -- OK, will do.

So, this is what I had written to Post, before I saw yours:

---------------------------------------------------------------------------------------------------------

This is how all the "components" of your signature would look at 350x40px. (I put the re-sized image on a gray background so that the gray/white border would show up.)

http://i1196.photobucket.com/albums/aa403/larryb123456/Step1_reduceoriginalto350x40px.jpg

I sharpened the image to get the letters as clear as I could. As you can see, the letters are more blurry than in your present signature. If I had the font, I *might* be able to make the letters more clear. Obviously, everything is stretched out horizontally to a great degree. Of course, the WPI logo would have to be made in the correct proportions (i.e., same height, but not as wide) which would require that "Kelsenellenelvian" be stretched out even more. A better option, IMO, would be to make the WPI logo in the correct proportions and filling up the left side of the bar, and making "Windows Post-Install Wizard" not as long and centered over "Kelsenellenelvian".

All this is just to give you a preliminary look at the double-height-userbar transformation of your signature. IMO, the success of this project would depend on using the original font or being given the flexibility of using another font that is something similar. There is just too much blurriness introduced to the letters by Photoshop re-sizing. This is why I asked if the person who made the original for you was still available to make the changes you want.

---------------------------------------------------------------------------------------------------------

[larryb123456]

It has been so long since I've made a non-animated userbar, where I don't have to be afraid of using gradients, which are not rendered well in animated GIFs, that I forgot about the fact that I can make a horizontal linear gradient background, going from lime or fuchsia on the left of the bar -- (so that the WPI logo black portion can be seen, as being lit from behind) -- quickly heading to black on the right. It will kind of look like a "splash". I can also use the lime and fuchsia scanlines as well in this scenario. I'll just have to experiment a little.

As promised, here are some different "quick and dirty" looks for different widths for a 40px tall userbar. Tell me what looks best to you, and that's what I'll try to do. I did them in width increments of 25px.

BTW, it's not always a guarantee that a given anti-aliased font, such as yours, will show up well at small pixel heights. But a pixel font (aliased edges) definitely will. That's just a little FYI.

350x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/Step1_reduceoriginalto350x40px.jpg

325x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/325x40px.jpg

300x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/300x40px.jpg

275x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/275x40px.jpg

250x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/250x40px.jpg

225x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/225x40px.jpg

200x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/200x40px.jpg

175x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/175x40px.jpg

150x40px, http://i1196.photobucket.com/albums/aa403/larryb123456/150x40px.jpg

Edited December 27, 2012 by larryb123456

[Kelsenellenelvian]

350x40px

[larryb123456]

OK, 350x40px

Did you want a 2px wide border (1px white on the inside + 1px gray on the outside)?

Know that this will reduce the "real image size" to 346x36px. You really lose a lot of image height with the border.

I'm going to have the WPI logo on the left, filling up most of the height, and the rest of the text centered to the right of the logo.

[larryb123456]

My concern about losing 4px in height with the 2px-wide border was because the letter height would also be reduced by 10%, a great amount for such small letters.

But the border is a feature that makes your signature unique, so, for starters, I'm going to try to incorporate it, and see what happens.

Give me a few days to fiddle with this project.

[larryb123456]

These are true sizes of the WPI logo in your new userbar, http://i1196.photobucket.com/albums/aa403/larryb123456/Options.jpg

1: This is how the logo reduced down from the size you provided. Everything but the WPI "sharpened up" great. The WPI is unreadable at the small height, and it can't be improved. I tried to make a WPI from scratch in Photoshop at that size with the same unreadable result.

Remember how I said bitmap/pixel letters were very readable at that size? Here's proof.

2: These are *true* 5px tall letters.

3: I made 4px tall letters from 2. The W and the I are great, with the P a little quirky, but still readable as a P.

Probably 2 is best, because you want the WPI to stand out well. But 3 is more in balance with your original, 1. IMO, we shouldn't worry about using pixel letters here, since we are transforming your signature anyway.

Let me know which you want me to use: 1, 2, or 3.

[Kelsenellenelvian]

I like 3 please sir