•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Graphics and Multimedia section within the Web Development category of DaniWeb, a massive community of 456,455 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,651 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Graphics and Multimedia advertiser: Internet Marketing Services
Views: 25587 | Replies: 1
![]() |
•
•
Join Date: Apr 2004
Location: Springfield, Oregon
Posts: 121
Reputation:
Rep Power: 5
Solved Threads: 6
Intro
In this tutorial I'm going to show you how to make a simple "aqua button" effect. You need to know how to apply effects to the layer and you need to know how to load a new gradient. This tutorial was made in Photoshop v6 and should work with newest versions just fine.
Getting started
First make an new image of any size (this tutorial is 150x100 pixels). Add a shape of whatever you want, for this tutorial i choose a rounded square and named the new shape layer "button".
You should have something like this:
http://www.invisionportal.com/images...tton/step1.gif
Now we need to apply some settigs to the "button" layer.
Double click on the "button" layer until you get the "Layer Style" window.
Now enter the settings shown in the images below.
For the "Gradient Overlay" you need to apply a new Gradient, download the gradient here.
http://www.invisionportal.com/images...tton/step2.gif
http://www.invisionportal.com/images...tton/step3.gif
http://www.invisionportal.com/images...tton/step4.gif
Now you should have something like this:
http://www.invisionportal.com/images...tton/step5.gif
This is a fairly simply tutorial. Its not a 100% perfect aqua looking button, but it is a simple effect that works and looks very close to the real thing.
But if you got lost somewhere or didn't do it right, you can download the file here.
Finished Button:
http://www.invisionportal.com/images...tton/step6.gif
In this tutorial I'm going to show you how to make a simple "aqua button" effect. You need to know how to apply effects to the layer and you need to know how to load a new gradient. This tutorial was made in Photoshop v6 and should work with newest versions just fine.
Getting started
First make an new image of any size (this tutorial is 150x100 pixels). Add a shape of whatever you want, for this tutorial i choose a rounded square and named the new shape layer "button".
You should have something like this:
http://www.invisionportal.com/images...tton/step1.gif
Now we need to apply some settigs to the "button" layer.
Double click on the "button" layer until you get the "Layer Style" window.
Now enter the settings shown in the images below.
For the "Gradient Overlay" you need to apply a new Gradient, download the gradient here.
http://www.invisionportal.com/images...tton/step2.gif
http://www.invisionportal.com/images...tton/step3.gif
http://www.invisionportal.com/images...tton/step4.gif
Now you should have something like this:
http://www.invisionportal.com/images...tton/step5.gif
This is a fairly simply tutorial. Its not a 100% perfect aqua looking button, but it is a simple effect that works and looks very close to the real thing.
But if you got lost somewhere or didn't do it right, you can download the file here.
Finished Button:
http://www.invisionportal.com/images...tton/step6.gif
Last edited by happygeek : Oct 28th, 2006 at 9:35 am. Reason: Formatting
•
•
Join Date: Jan 2007
Posts: 28
Reputation:
Rep Power: 0
Solved Threads: 0
Nice Tutorial, I really appreciate it.
![]() |
•
•
•
•
•
•
•
•
DaniWeb Graphics and Multimedia Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
adobe animations beta creative design development explorer flash gradient graphics hardware howto ie7 illustrator intel interactivity. internet linux microsoft multimedia news nvidia open-source opengl peripherals photoshop preview print scripting streaming toread tutorials video web web development
- Photoshop: create a transparent navigation bar (Web Design Tutorials)
- Go to a certain page when button is pressed and do it securely (ASP.NET)
- Please help me, Photoshop wont run anymore (Viruses, Spyware and other Nasties)
- Photoshop Will Not Initialize (OS X)
- custom banners and logos and web design (Post your Resume)
- Photoshop Freezes Comp (Graphics and Multimedia)
Other Threads in the Graphics and Multimedia Forum
- Previous Thread: Flash background
- Next Thread: Creating nice borders the same way they have on vbulletin


Linear Mode