Jump to content
N-Europe

How To Make The Shiny New "Vista/Mac" Buttons Look?


ReZourceman

Recommended Posts

I wouldn't do the HOME-text in that way. Pick a different font: Myriad would be fine, but If you're using Windows, use System (as a font) or if you're using Windows Vista, use 'Serie' as the font. They'll look better. And if you're willing to become a designer, don't ever, ever, user Arial anymore. Nor Times New Roman. Nor Impact. Nor... Oh so many. If ou want a good, standard, readable and pretty font, pick Helvetica Neue.

Link to comment
Share on other sites

  • Replies 56
  • Created
  • Last Reply

Top Posters In This Topic

I wouldn't do the HOME-text in that way. Pick a different font: Myriad would be fine, but If you're using Windows, use System (as a font) or if you're using Windows Vista, use 'Serie' as the font. They'll look better. And if you're willing to become a designer, don't ever, ever, user Arial anymore. Nor Times New Roman. Nor Impact. Nor... Oh so many. If ou want a good, standard, readable and pretty font, pick Helvetica Neue.

 

Thanks for the tip. I will be looking into those fonts. Dont want to pay any money for a font though. And Arial is one of my favourite fonts. So I think I will be using it a bit more.

 

Im not thinking about becoming designer Im just playing about.

Link to comment
Share on other sites

Thanks for the tip. I will be looking into those fonts. Dont want to pay any money for a font though. And Arial is one of my favourite fonts. So I think I will be using it a bit more.

 

Im not thinking about becoming designer Im just playing about.

 

If you've got Apple, you've got Helvetica and Helvetica Neue on board - if you have windows, you'll have to pay. But PM me and I might be able to score you one, somewhere. And I'll include some nice fonts with it, too.

Link to comment
Share on other sites

Helvetica does the job incredibly well. Expressway Free is great (http://www.larabiefonts.com), Micro is great for nice texts and the normal Times is a good choice too. The rest is all based on context in wich I'm using them. Just never, ever, use the standard Windows-fonts - like Comic Sans or Arial - they're so outdated. I've got a question: is there anyone who can get it's hands on Serie (the new Vista font)? PM me, please...

Link to comment
Share on other sites

  • 3 weeks later...

1 make a shape and get rid of the surrounding line

2 make the colours gradient with the darker on the bottom

3 copy the shape and reduce it in size so it takes up about a third of the first shpe

4 make it gradiant so the bottom is white and the top is a really light shade of grey

5 place it so it is touching the top of the first shape

6 play with the transparency until it looks "shiny"

 

note: if the original shape is a rectangle or rounded rectangle make sure the second shape streatches all the way across.

 

tip: make it in blue first and then play with the colour after

Link to comment
Share on other sites

Here's the simple, plastic ways of things:

 

1 - Make a shape with a gradient going from dark on the bottom to light on the top

2 - Make the same shape, only about three-quarters of the original size and put it higher on the last shape so that the distance between the two tops of the shapes is smaller than the distance of both bottoms.

3 - Make the Fill Opacity (see your layers palet) empty (0%) for the top shape and make a gradient from white on the top to transparant white on the bottom.

 

Wala, you got a simple, nifty looking, 'plastic'/shiny' styled button without the hard work. For those guys that love making some extras, get a border around it with a gradient black-white-black ('three' colors!) and put it on 45°. You got a true shine of the buttons.

 

Simplest way, I think, and it looks nice, too. And make the text on the button go from a very light color (light-white-blue) to white, and give it a detailed drop shadow (no more than 2 pixels depth!)

Link to comment
Share on other sites

Helvetica does the job incredibly well. Expressway Free is great, Micro is great for nice texts and the normal Times is a good choice too. The rest is all based on context in wich I'm using them. Just never, ever, use the standard Windows-fonts - like Comic Sans or Arial - they're so outdated. I've got a question: is there anyone who can get it's hands on Serie (the new Vista font)? PM me, please...

 

helveticafilm.com

 

like helvetica isn't overused

 

I study Graphic Design myself and i'm pulling it off to do all of my work this year in courier (and courier new) so far none of the teachers have made comments about it, it would be funny if i could keep it up

 

Just like in basicly everything, the quality of the materials isn't everything, it's what you do with them

Link to comment
Share on other sites

Helvetica may be overused, but it's still an unbeatable font. The old helvetica, though, is broing, but Helvetica Neue (try the lighter iteration) truly honor the great font of yore. I study Graphic Design in Belgium and have been doing it for the last eight years, so I - without trying to brag - have a good scent for fonts. My teacher, who is in graphic design for more than twenty years, uses Helvetica Neue standard - because it's just pretty. Just pretty.

 

Although everyone should check out Ray Laraby's fonts - he's a great font designer and as well Pakenham as Expressway are great experiences, and nice fonts. I'm not buying them, but the free iterations are perfect for titles and so on, it's just nice.

 

Don't insult Helvetica, or I see no more reason to hold back any accusations on your front.

 

But yes, it's what you do with it. That's what I've been trying to tell people who want to learn 'how to design' - you just got to feel it, you gotta have the feel. Sadly enough, there are many crap designers who are proud of their shit, even though it's butt-ugly. Just like Photoshop: it's easy to learn the program, but using the tools to accomplish something is something you need to learn to do. I know many people who know how to work photoshop, but are unable to give any results that are nice...

Link to comment
Share on other sites

Helvetica may be overused, but it's still an unbeatable font. The old helvetica, though, is broing, but Helvetica Neue (try the lighter iteration) truly honor the great font of yore. I study Graphic Design in Belgium and have been doing it for the last eight years, so I - without trying to brag - have a good scent for fonts. My teacher, who is in graphic design for more than twenty years, uses Helvetica Neue standard - because it's just pretty. Just pretty.

 

Although everyone should check out Ray Laraby's fonts - he's a great font designer and as well Pakenham as Expressway are great experiences, and nice fonts. I'm not buying them, but the free iterations are perfect for titles and so on, it's just nice.

 

Don't insult Helvetica, or I see no more reason to hold back any accusations on your front.

 

But yes, it's what you do with it. That's what I've been trying to tell people who want to learn 'how to design' - you just got to feel it, you gotta have the feel. Sadly enough, there are many crap designers who are proud of their shit, even though it's butt-ugly. Just like Photoshop: it's easy to learn the program, but using the tools to accomplish something is something you need to learn to do. I know many people who know how to work photoshop, but are unable to give any results that are nice...

 

8 years? What school do you go to?

Link to comment
Share on other sites

8 years? What school do you go to?

 

I said I was doing graphic design for eight years, not that I'm studying it for eight years :wink:.

 

Right now I'm still in high-school studying something I don't really know a translation for ('Graphic Shaping') on the Art School in Genk and I'll be studying graphic design next year, for four years. But I've had eight years of experience (I started when I was ten, so maybe the first four years don't really count, but it was the time that I learned to go with photoshop and how to design websites - but it's just four years of real graphic design, and four years of artschool.)

Link to comment
Share on other sites

I just cant seem to do this. Does anyone want to do this for me?

 

HOME.jpgHELP.jpgSEARCH.jpgMEMBERS.jpgCALANDER.jpgADMIN.jpgPROFILE.jpgLOGOUT.jpg

 

HOME.jpgHELP.jpgSEARCH.jpgLOGINX.jpgREGISTERX.jpg

 

With the Home, Help and Search buttons, being the same image for both sets.

 

I would greatly greatly appreciate if anyone has the time to do this.

 

And if anyone else wants to show their creative flare, you can make a stylish WHATEVER YOU WANT top banner for

 

GreenSythexXXX.jpg

 

The only request for that is same Font, and the Rule 3 logo (The square thing)

Link to comment
Share on other sites

I just cant seem to do this. Does anyone want to do this for me?

 

HOME.jpgHELP.jpgSEARCH.jpgMEMBERS.jpgCALANDER.jpgADMIN.jpgPROFILE.jpgLOGOUT.jpg

 

HOME.jpgHELP.jpgSEARCH.jpgLOGINX.jpgREGISTERX.jpg

 

With the Home, Help and Search buttons, being the same image for both sets.

 

I would greatly greatly appreciate if anyone has the time to do this.

 

And if anyone else wants to show their creative flare, you can make a stylish WHATEVER YOU WANT top banner for

 

GreenSythexXXX.jpg

 

The only request for that is same Font, and the Rule 3 logo (The square thing)

 

You're just using Bevel and Emboss, not? Here's a tip: don't. Just follow these simple steps:

1. Make a nice shape with a gradient from the darker color (say, bordeaux) on the bottom to the pure color (say red) on the top, don't ever mix your colors with white, they suck.

2. Make a smaller copy of the shape and put a gradient from white (on the top) to transparant (on the bottom) and make sure your fill is empty, so you can see the gradient below.

3. Put your text on. Simple as that.

(4. You could add a border to your big shape, like me, with a reflected black-to-white gradient on 45 degrees giving you that shiny addition)

 

Afbeelding%201.jpg

 

Or, Alternativly, you could create a gradient like this:

Afbeelding%203.jpg

giving you this result:

Afbeelding%202.jpg

Link to comment
Share on other sites


×
×
  • Create New...