How to replicate Dot effect bar seen on CNET News...

[irock]

Could any graphics experts take a look at this bar?
[i.i.com.com...]
I would like to replicate this on my site with the same font. Is this a simple mission? I have the skills (following a tutorial) to replicate an aqua pill... so I think I know where the tools are.

Any help would be greatly appreciated.

[limbo]

You can do this a number of ways - but you will need a decent image editor. Photoshop, Fireworks and paintshop pro would all do it.

I would choose fireworks (personal preference)

Do you have one of these availabel?

If so: create the effect seen here:

: use a brush tool or gradient tool with a white stroke enhanced with a grid texture on the top layer on the right of the image.

: create the white text over the red background layer

: merge the layers and export the image.

this creates the faded and texturized effect from red to white.

Hope this helps

<added> the font looks like Arial Condensed? or haettenshweiler light or there abouts </added>

[irock]

I only have Photoshop 7.

Can this be done in PS 7? If so, could you provide instructions?

Thanks!

[limbo]

All these things can be done in Photoshop - It's the Industry standard tool for image manipulation. So a definate yes there - Only I do not have access to PS7. Maybe someone with access to it could give you a few pointers. there are tons of PS users here.

Sorry mate

Liam

[benihana]

i think youll have to use imageready for this:

1) start in imageready with a suitably sized canvas
2) select the rounded rectangle tool (i guess with the corner rounding value set at about 5 - 6 pixels) and draw out a selection approx the size of the red area.
3)fill this selection with your base colour (red in the eg)
4)switch to the square corner rectangle selection tool, select the bottom half of your filled rectangle and hit delete to square off those bottom corners.
5) using the eraser set to a big soft edge airbrush, delete the end of the filled shape to give the graduation to white effect (you could use a mask in photoshop but just erasing should be fine here)
6)create a new layer and zoom in to about 800%
7) using the pencil tool with the foreground set to white draw a 2x2 pixel square
8) use the rectangular selection tool to select this square with a gap of 1 pixel around each edge of the square, hide all layers except the one with the square in, and goto edit > define pattern
9)delete the original square, and select the entire layer (ctrl+a)
10)goto edit > fill and choose the pattern you just created to fill the layer with lots of little squares, with a slight gap between them. you might want to take the opacity of this layer down to 80-90%.
11)again use the eraser with a soft edged airbrush to erase some of the squares and create the gradient blend towards the red.
12) use the type tool to put the text (looks like arial with the height increased in the text pallette, could be anything really - just experiment)
13) save optimized as a gif format

i havent tried this but it should be a reasonable approximation of the example

[TGecho]

So I guess it would be bad to just copy the image and paste your own text over it?

[limbo]

TGecho

This is very bad practice - for many reasons - not least copyright. Perhaps on this occasion with the image being less identifiable you could get away with it. But to pinch graphic work is very risky.

Also alot of the fun and feeling of accomplishment is lost if you did not design the graphics yourslef - IMO.

Ta

Liam

[TGecho]

I know (sorry, needed a ;)

For unique stuff, it's a no-brainer (i.e. copyright). If it's not unique, chances are it's simple (i.e. a beveled button), so you can make it yourself.

Oh, and that feeling of accomplishment? That's the biggest thing :)