Energy and Sats bars help

[canibalstew]

is there any tutorials for energy bar design?

How can I change these to use other images and how do they work?

 

Is there any other bars out there now?

 

If anyone can help I would appreciate it as I am working on a new layout.

[Zero-Affect]

well basic MC bars are pretty basic but im sure if you did something like...

 

1. Open photoshop
2. Make New image 100px - 10px
3. Choose a foreground and background color IE( Foreground: d62727 Background: 9b1c1c )
4. Drop a color into the image
5. Goto 'Layer' on the toolbar then down to 'Layer Style' and on the menu select 'Gradient Overlay'
6. Select normal blend, opacity 80%, Select the top left gradient and click 'Ok'
7. Goto 'Image' on the toolbar then down to 'Image Size...' and change the 'Pixel Dimensions' to 1px - 10px

Note: If during image change you cannot edit the height without automatically editing the width then Dis-select the 'Constrain Proportions' Check box near the bottom of the 'Image Size' Prompt.

Result:

Seconary Result:

You could also do a simple background by doing a 1px inner glow on a basic 000000 background image of same standards.

 

This may or may not be helpful my apologizes if it is not detailed enough

[canibalstew]

Well i can make normal ones like that, but my issue is when I use real images like an equalizer image with a background that spans red to green. Although I have to reverse the way its done normally as the first image is the max percentage and the background is the current percentage.

Now this way does not work as it does not overlay right.

 

Do I have to span or expand the images to get them to overlay such as you described as a smaller image that expands to the width and height.

 

I am trying to understand this as I want a better and more graphical bars that still raises and lowers with the current stats.

[Zero-Affect]

I don't use conventional MC bars anymore but i believe it was worked out by width 1px width obviously is just so it can be stretched without any issue.

for example the experience bar works out like so

 

$experc = (int) ( $ir['exp'] / $ir['exp_needed'] * 100 );
$exopp = 100 - $experc;

[b]Energy:[/b] {$enperc}%

[img=greenbar.png][img=redbar.png]

 

basically it's two images the first is the existing experience divided by the experience needed then multiplied by 100.

[canibalstew]

That is correct, but I am trying to switch it around to have the second image to be spanning and the first to be the max exp ubt it will not work as it wont go under the front image. for example using your example it would need to be like this;

 

$experc = (int) ( $ir['exp'] / $ir['exp_needed'] * 100 );
$exopp = 100 - $experc;

[b]Energy:[/b] {$enperc}%

[img=frontbar.gif][img=backbar.png]

 

but it comes our as two images side by side with the background image having the correct width.

My issue is that it will not overlay.

I am willing to change the whole thing to do this, but I cannot find the correct tutorials that will help me learn this type of image overlay.

[Zero-Affect]

It makes it believe one is below the other but infact they both just coincide.

[CrazyT]

Why use images? - Use CSS :)

[Zero-Affect]

Why use images? - Use CSS :)

and the CSS would be?

[a_bertrand]

Sorry but with plain CSS you cannot make gradients. You need still an image as background for that... until they implement gradients in the future version of CSS (which is planned but like you know it may take yet a long time until all browsers support it)

[canibalstew]

I just hope I can figure this out as there has to be something to do other than these old plain bars as I know I have seen others but cannot remember where.

 

can anyone please direct me in the right direction.

tutorial sites for this and maybe someone will be kind enough to provide me with a few pointers on layout designing as I cannot get a new layout created for the life of me and I need 2 new layouts asap.