I really like the titlebar (with the gradient fill) on the DMXZone website. I have a client who likes these kind of graphics, too.

How does one create a graphic like this? Can I do it in Fireworks NX 2004, or do I need something like Photoshop to do it properly? I soend a lot of time in web code, but still got a lot to learn in the graphics creation area.

Can anyone point me in the right direction as to how one creates graphics like this and have it look really professional? Any tips would be appreciated. Many thanks in advance!

Bob

Ok, I may do that as an article on DMXzone/FWzone, but if you want the low-down dirty way of what & how, then here you go. FYI, it's a smalllll mix of CSS/(X)HTML, imagery trickery:

In Fireworks (or PS)...
<ul>
<li>Make a <b>new file about 100px wide</b>, and however tall you need it.</li>
<li>Draw a <b>rectangle the whole size of the Canvas</b> and <b>apply a linear/bar gradient</b>.</li>
<li>Choose the gradient colors, and <b>make sure the gradient is going up & down</b>.</li>
<li><b>Save your file</b>, then modify the <b><i>Image Size</i> to 1px wide</b>... yes, 1px wide.</li>
<li><b>Export a GIF (most likely)</b>, usually with <i>exact</i> colors in your optimize pallete. Then launch your DW.</li>
</ul>


<ul>
<li>In DW <b>make a DIV tag</b>, and DW should supply fake text for now - that's fine.</li>
<li>Now add a CSS id/class, make the height the same height as your graphic.</li>
<li>Choose your <b><i>backgroud-image</i></b>, and set <i>background-repeat</i> to <b>repeat-X</b> only.</li>
<li>I suggest changing the <i>background-color</i> to either end of the spectrum (gradient), I usually pick the bottom color in case things get too tall for something then it looks like it's still fading to that color. <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle></li>
<li><b>Apply that id/class to your DIV tag</b> waiting and you should be done.</li>
</ul>


Sorry, if I had to type more I would've held it soley as an article. <img src=../images/dmxzone/forum/icon_smile_tongue.gif border=0 align=middle> <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

~ ~ ~ ~ ~ ~ ~
Chris Charlton <i>- DMXzone Manager</i>
<font size=1>[ Studio MX/MX2004 | PHP/ASP | SQL | XHTML/CSS | XML | Actionscript | Web Accessibility | MX Extensibility ]</font id=size1>

Well, I for one, would really enjoy articles on things like this. I have Studio MX 2004, so I'll try it in Fireworks first. Then will try in PS. I downloaded the PCS2 tryout and if it's good, I'll spring for it. As a free-lancer, that's a lot of $$$$, but, hey, you gotta spend money to make money! I have some plans on what I want to do for my small business client, so I have to keep enticing them! Hopefully, I'll have a full-time position 2 weeks from now --- and it will involve web development, so I must add to my expertise.

I appreciate your time in replying and will let you know how it comes out. Once I get the hang of it, it'll be easy. Just want to get a good start!!

Thanks again! --------- Bob

Chris,

Finally got a little time to play with this. I'm starting a new job May 16, so have had a lot of things to do getting ready for it.

The CSS and HTML work fine! Making the image 1 px wide also works wonders. The only problem I have now is getting the graphic to look proper. I keep winding up with gradients nothing like what I intended. However, one variation I had didn't look too bad --- and my client thought it looked pretty good. But i'm still gonna keep at it until I can give him one he'll REALLY like. So I shall keep tinkering with it until I get it looking better. I'm still new at getting graphics to look professional, so I expect I still have some learning to do.

Thanks again for the tips --- I've learned quite a bit from it already!!

Bob

<img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

~ ~ ~ ~ ~ ~ ~
Chris Charlton <i>- DMXzone Manager</i>
<font size=1>[ Studio MX/MX2004 | PHP/ASP | SQL | XHTML/CSS | XML | Actionscript | Web Accessibility | MX Extensibility ]</font id=size1>