Graphics: Smooth Graphics for Web Pages

started by Nickjt on Jun 16, 2004 — RSS Feed

Nickjt Nickjt
Posts: 2

I'm having troubles making web buttons that look smooth.

I use Photoshop, build the button, convert to gif and export, but when I place it in the site, all the edges are jagged.  I tried using lower resolutions, higher resolutions, but nothing.

Flash is no help either, since I find it to be very difficult to learn.  I download a tutorial and tried to follow the steps but true to form things are always different and the flash movie file does not work not to mention the actions have totaly been revamped (MX).

So I could use some decent advice or help making clean professional looking buttons.

Please...

Anyone...

help!

Baxter Baxter
Posts: 157

matte it to your background color.

Joe Gillespie Joe Gillespie
Posts: 528

Have you read the tutorial on transparency this month? Jagged edges are almost always due to the fact that you are removing vital anti-aliasing colours.

http://www.wpdfd.com/editorial/wpd0604news.htm#feature2

Nickjt Nickjt
Posts: 2

I'll try the matte thing, but I'm not keen on the procedures.  Guess I'll have to re-read the manuals on this.

I read this months transparancy topic.  Did not think it could be applied to shapes and stuff seeing that you were using text only.

Joe Gillespie Joe Gillespie
Posts: 528

Text (when made into a graphic) is just a collection of shapes. The anti-aliased edge of an "O" and a graphic circle are exactly the same. A button is just a graphic shape (with or without rounded corners).

Baxter Baxter
Posts: 157

Nick, when you save for web from photoshop, you'll see the matte button in the various save options bar (you know, where you set the image quality for jpg or the number of colors for gif)... click it and set it to a color that will allow the image to fade into the background. Usually that's the background color itself, sometimes not. If the image is overlaying another image, this can get tricky..

Joe and I are basically saying the same thing in two different ways... your image isn't managing to blend to it's background, so it looks jaggedy.


Ahh, if only png support was here.

Nobody Empty Nobody Empty
Posts: 7

NickJT said:
I'm having troubles making web buttons that look smooth.

I use Photoshop, build the button, convert to gif and export, but when I place it in the site, all the edges are jagged.  I tried using lower resolutions, higher resolutions, but nothing.

Flash is no help either, since I find it to be very difficult to learn.  I download a tutorial and tried to follow the steps but true to form things are always different and the flash movie file does not work not to mention the actions have totaly been revamped (MX).

So I could use some decent advice or help making clean professional looking buttons.

Please...

Anyone...

help!



Firstly, I think it is important to realize that no web design firm I have ever worked at has created elements of the site (buttons etc) seperately like you are attempting to do. Those that do will end up with bad design anyhow, it's just not intuitive.

Enter the Photoshop Slices tool.....

First design a depiction of your site within photoshop:

Design it exactly how you want, and don't worry about how it will be implimented in html later (as that will just smother your creativity).

Be conserned about design, but leave room for content. You can put the text you want in the content spaces now with the text tool.

Spend about two days on that, then cut it up using the slices tool...

click on each slice and right click the slice and edit its options/properties to give it a meaningful image name... and if its going to be an image or a text table space.

Export it using the "save for web function" and click on and optimize each slice....Export it with html
(default).

Make additional finalizations with dreamweaver...then use notepad to manually go in and optimize it and add style sheet, etc.

-Tony

Baxter Baxter
Posts: 157

I've built hundreds of buttons without using the slice tool... Nick's having a matting/aliasing issues, and until he gets pas that, he'll have this problem.

Motive Minds Solutions Motive Minds Solutions
Posts: 0


The prices as usuall are very low, we wrap an ecommerce site for as low as $550 and a database driven real estate website for $450 and content management system comes only for $500 and in case you opt for wordpress CMS then we do the job with a customized design for just $250. With $250 you are a owner of a website, which has a customized design and which allows you to change/add any content you please, I am offering you the wordpress Content management system here.
arrow For a simple website containing 4-5 pages the cost is as low as $150
arrow For a much larger site containing 10-15 pages the cost is $250
arrow And if you need a flash header then Please add another $75 to the above costs.
In case you want to hire our PHP programmers on hourly basis then you can hire them for $10 per hour BUT on maintenance projects where our programmers or designers grey cells are not taxed! we charge only $7 per hour! Don't you love that? If so then what are you waiting for drop me a mail or get in touch with me immediately and let us discuss the benefit you will gain if you hire us. My guys work round the clock so time and distance won't matter for us, if you are having any second thoughts on thoose grounds then don't even think about it!

www.motiveminds.com
raj@motiveminds.com
00-91-9849070402


Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply