My first attempt at web bottuns

**webspace** · 12-17-2004, 06:21 AM

I started learning photoshop about a month ago.

This is my first attempt at photoshop web bottuns.

http://www.donkeypunchrodeo.com

I found the tutorial at http://www.tutorialcollection.com

Comments.

**b0wser** · 12-19-2004, 03:57 PM

Not bad for a first attempt.

Keep practising and you'll be producing some really nice stuff before you know it.

**Mooofasa** · 12-20-2004, 02:42 AM

I don't have Photoshop, but this site has great tutorials:

Click here

**webspace** · 12-20-2004, 03:40 AM

Quote:

Originally Posted by b0wser

Not bad for a first attempt.

Keep practising and you'll be producing some really nice stuff before you know it.

I'm working on a new theme for my photo gallery website. I will post a link when it is finnished.

Mik

Quote:

I don't have Photoshop, but this site has great tutorials:

You can download a trial here.

You can also find earlier versions on sale.

**Mooofasa** · 12-20-2004, 04:04 AM

I know how and where to get it, but i don't fancy taking on a top-heavy program just yet. Remember to use my 'sticky' rules. They might just help!

Any more questions, just PM me.

mik

**fredy** · 12-30-2004, 03:56 AM

keep practicing webspace!
just another tutorial and tips , checkout

http://user.fundy.net/morris/redirec...toshop27.shtml

**webspace** · 06:32 PM

That's a good informational page, worthy of a bookmark.

**TaylorAtCTS** · 01-06-2005, 11:37 AM

the image quality is questionable..

i think you should low the opacity of the satin.. also consider using gradients to add lighting effects and shy away from bevel and eboss.. it can make some things look gret but it can really take alot away from a good design if you use to much. For a gradient example visit my site and look at my banner at the top. (http://www.customtailoredsolutions.com) That has no bevling at all, its a gradient.

I dont use fancy buttons on my website because for 56kers it can be tough to load that + my rolloevers. Most people also dont know how to use CSS t make a rollover, they would have to use javascript which adds to the problems. You can use CSS to have rollovers and its MUCH faster loading and it performs well.

Hope this helps

gl

**webspace** · 01-06-2005, 06:53 PM

More like this?

They don't look quite so "fake" that when you leave out the bevel and emboss.

Also might have to look for a css tutorial. I am one of those people who doesn't know how to use it.

The 3D effect is only implied by the color shift. I see what you are saying.

**TaylorAtCTS** · 01-07-2005, 11:17 AM

I like that alot better. Im not sure about the actual text though..

I dont love thecolor either but i think thats better than the red ones

GJ keep it up

**cheeky_annie** · 01-20-2005, 01:19 PM

Red is my favourite colour so I liked that part however I found the text on them hard to read, might be worth trying a different font.

**webspace** · 01:59 PM

Quote:

Originally Posted by cheeky_annie

Red is my favourite colour so I liked that part however I found the text on them hard to read, might be worth trying a different font.

I cut the bottum off of this one but what do you think.

Is the stencil font too overt?

If you are just viewing this graphic for the first time the file has been overwritten and will not show the original item in question.

**eJM** · 01-21-2005, 02:46 AM

Quote:

Originally Posted by webspace

Is the stencil font too overt?

I'm certainly no expert, but I would think that button, with that font at the size it should be for a button, would be almost unreadable. You might want to try a font style that is less weighty or broad faced.

Grump

**webspace** · 01-21-2005, 01:52 PM

I changed the font to a Tahoma and changed up some of the vairables.

Here are two versions of the same button I one is opimized the for file space the other is not.

5.825 kilobytes JPEG

1.609 kilobytes GIF

Either should load in under two seconds on a 56 kbps modem.

**eJM** · 01-21-2005, 06:30 PM

Is that the size button you will be using? Considering all the content you will want on your page, using as small a file size as possible should be a goal. One and a half seconds times how many buttons, plus all the other graphics and files and other content adds up real quick.

I played around with your button using Macromedia Fireworks MX and came up with this:

1.413 KB GIF

I don't think the casual user of your site will ever see a difference in quality. I suggest you do what you can to reduce the file size of all your graphics. I think you could come up with an even smaller file with PhotoShop. Physical size is another matter. With a finer font style, you could make a button with a considerably smaller foot print. Visit a lot of sites and look at the most commonly used size buttons (a lot of sites don't even use buttons).

Grump

**webspace** · 01-21-2005, 08:07 PM

16 colors 935 bytes.

I dropped the number of colors down 64 to 16 because it is mostly just red and black and reduced the dither.

I think that is about as small as I can get it without loosing image quality.

What do you think?

I can reduce the image size on the forum navigation and make them about 403 bytes without loosing much quality.

Also I noticed there is about 3 or 4 pixels on each side that don't come off when I trim. If I could remove them I could reduce the file size even more. Is there a way to do this with photoshop? I have fireworks as well. Can I do it with fireworks?

**Homesrfan** · 01-21-2005, 11:36 PM

It looks...okay...

Maybe you shoud read some more tutorials. :P
There was a really good tut. website... I think at like good-tutorials.com or something.

**webspace** · 07:56 AM

Good-tutorials seems like a good site, But the site serves ads from Castle Media.

My Ad-Aware scan always finds stuff from media companies like this. My scan is about half finished yet and it has found 1311 proccess modules and 3 new critical ojects.

There are plenty of sites out there without adware/spyware/malware to infect my computer.

**davemies** · 01-22-2005, 07:59 AM

i think it's over optimised - for half a kb more it could look better (say 64 colours) i don't see saving .5kb per buttoni makes it worth (ok if you have several button states and say 10 buttons it makes some difference but then the buttons look poor anyway)

try the attched fireworks png (i didn't have your font)

**webspace** · 01-22-2005, 09:44 AM

The 64 color GIF is better than the 16 color.

I don't really know fireworks but I will get it figured out.