login about faq


1
1

Im just practising my Photoshop skills and made these buttons. Are they good or bad? What could i do with them to make them better? alt text

asked Oct 11 '10 at 19:39

Vancar6's gravatar image

Vancar6
1.4k150160173


12next page »

They look pretty good to me, there is only so much you can do with a button. :)

answered Oct 11 '10 at 19:41

boba0420's gravatar image

boba0420
4.4k5170120

True. But is it too OTT? Im going into web design right now, so its importent i get it right! Thanks :)

(Oct 11 '10 at 19:43) Vancar6 Vancar6's gravatar image

I'm going to guess that OTT stands for over the top and say no. If when you highlight the button it spins and shoots a cool fire effect out, then yes it would be ott, but these look great.

(Oct 11 '10 at 19:45) boba0420 boba0420's gravatar image

Thanks for your opinion! :D

(Oct 11 '10 at 19:50) Vancar6 Vancar6's gravatar image

I wouldn't say OTT just unprofessional and unpolished, but that's OK because you're on the learning process, nobody gets everything right the first time (or the hundredth for me lol).

(Oct 12 '10 at 03:20) Alekz Alekz's gravatar image

If you can't handle criticism don't read my post.

These buttons are very old school in modern web development. Gradients, glows and shadows are all out now. For a good amount of web development, graphical buttons are out too. Sure you could still have a background applied to them, but the whole button SHOULD NOT be a graphic. Also, you're going to have to brush up on your Photoshop skills a bit and play around with the alignment tools. With your collection of buttons here you have ZERO consistency. Some buttons have rounded corners, some have sharp edges. Web 3.0 is emerging and the only way to see it emerge is if people take full advantage of it! Use CSS3.0, use jQuery, just don't stick to the reliant of Photoshop skills, they're not as impressive as they were 2-3 years ago.

answered Oct 11 '10 at 23:47

recck's gravatar image

recck
3.2k32252

1

Yeah but if you want your website to work on most browsers as of now, you have to "emulate" -moz-gradient and -moz-border-radius with graphics at least for the background. The text has to be HTML, that I give you, but still, sometimes when slicing up a website what you get from the designer is the PSD file, so it's OK to learn PS to do this stuff. :)

(Oct 12 '10 at 03:17) Alekz Alekz's gravatar image
1

There is a Javascript library called Cufon that can apply a gradient to specific elements within the DOM.

As for the border radius it's simply using the correct code. There are three ways to incorporate a border radius, one is using -webkit and -moz and the other is a new CSS3 property simply border-radius.

(Oct 12 '10 at 15:00) recck recck's gravatar image

Gradients and shadows are not completely out. You really just have to know your way around them and spend time tweaking everything. I have created some pretty great buttons that use a small gradient and a very opaque shadow. The effects are subtle and do not overpower what is trying to be accomplished.

(Oct 18 '10 at 13:58) Josh_M Josh_M's gravatar image

Suggestions:

  • Less stroke
  • No gradient on the stroke
  • More padding between text and border (or smaller font)
  • Different typography

Don't bloat with effects and colors unless it's really working out for the design.

But most important: buttons have to match your website (or interface) design, else they'll appear out of place and nobody will click them.

Check out buttons on professional sites or tools like twitter, jQueryUI, etc.

You're doing good though, keep it up! :)

answered Oct 12 '10 at 03:13

Alekz's gravatar image

Alekz
2.7k52149

I like them. Good job. May I ask what you are using them for?

answered Oct 11 '10 at 19:43

Madison%20Tries's gravatar image

Madison Tries
6.1k300346399

2

Nothing imparticular. Im just designing buttons to publish on a Icon sharing site. And also just to learn. A couple of years ago i thought Photoshop was JUST for images but until 3 months ago i found out i could design icons! So i did a few. Got kinda addicted to doing it, and then it grew in to me making these to post up on icon sites. Thanks for your opinion! :)

(Oct 11 '10 at 19:50) Vancar6 Vancar6's gravatar image

Nice photoshoping ^^, 10/10 they look nice. Only change them if you don' t like them, I think the artist opinion is the most important :p

answered Oct 11 '10 at 19:44

Patxi's gravatar image

Patxi
12.6k206272386

If your making a website I'd try and make them more uniform but other than that I think they look great.

Update: (If you are trying to make a website I'd make depressed buttons for when the user clicks the button).

answered Oct 11 '10 at 21:02

FilipinoPower's gravatar image

FilipinoPower
13.0k135219313

edited Oct 18 '10 at 12:49

Here is how I would improve them:

  • Make them more the same, they are currently all different shapes and sizes.
  • Try and make them less overpowering
  • Some of the words are not centered
  • Use a different font

answered Oct 12 '10 at 15:31

Feras's gravatar image

Feras
5.5k90122179

There pretty good, but you may want to keep keep the text out of the buttons and use HTML to add the text on the buttons instead. this allows for screen readers for visual impaired to use the options of the site and it also allows you to use the image file for multiple buttons if they all use the same style (saves bandwidth)and you can still make the text look decent, photoshopping the text in should be reserved for if you need a really fancy effect.

answered Oct 11 '10 at 23:32

Razor512's gravatar image

Razor512
15.6k3480242

They are alright but if I may add some suggestions. when making the gradient don't go to just white, go to a different shade of the color and your buttons look more animated than what people are looking for these days. So try not to use such bright colors.

answered Oct 12 '10 at 02:10

Craighton's gravatar image

Craighton ♦♦
16.6k115207329

They look abit 1980s in my most honest opinion, i think blue and green are hard colours to work, i use mainly black, or silver

answered Oct 18 '10 at 13:59

Tim%20Fontana's gravatar image

Tim Fontana
15.3k135199368

Thanks just what i was looking for!

(Oct 18 '10 at 18:50) Vancar6 Vancar6's gravatar image
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported


Join Us in the Chat Room

Tags:

×95
×11
×2

Asked: Oct 11 '10 at 19:39

Seen: 1,064 times

Last updated: Oct 18 '10 at 18:51