Member Avatar for Drew

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:

[img][/img]

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 .

[img][/img]

[img][/img]

[img][/img]

Now you should have something like this:

[img][/img]

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 .

Finished Button:

[img][/img]

  • 2 Contributors
  • 1 Reply
  • 342 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by coolvision

Dani AI

Generated

Nice, compact walkthrough from — a great quick path to a glossy "aqua" button. As says, it works well. For readers returning to this thread years later, these non-destructive refinements and troubleshooting tips make the effect easier to edit, scale, and ship.

Convert the shape to a Smart Object before doing heavy styling so the vector stays editable and effects survive resizing. After you get the look you want, use Layer Styles → Create Layers to split gradient, inner shadow and stroke into actual layers; that makes it trivial to mask the highlight, tweak blending, or animate the pieces. Work at 2x (or 3x) the final size for small UI buttons, and align shapes to the pixel grid to avoid blurry edges when downscaled.

If the result looks different in the browser or on device, check your color profile (use sRGB for web) and export as PNG‑24 for proper transparency. For pressed/hover states, duplicate the group and slightly darken the gradient and move the inner shadow down a pixel — it creates a believable press. Keep contrast and legibility top of mind: glossy highlights are decorative but must not reduce text/icon readability.

If you want a web-native alternative (no images), use CSS gradients, border-radius and box-shadow so the button scales cleanly. Example:

.button {
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  background:linear-gradient(to bottom,#bfe9ff 0%,#0a88c6 100%);
  box-shadow:0 2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,0.2);
}

Caution: don’t overdo the gloss — subtlety keeps controls readable and accessible.

Member Avatar for coolvision

Nice Tutorial, I really appreciate it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.