How to Create Slider Tooltip in Photoshop

On 5 Feb, 2012 By With 3 Comments

Sliders are being used on website as part of UI’s, they send the message to the user telling them to wait or their program is already running. To make it more entertaining some designers creates colorful slider bar, while others make it more interactive to the user.

Today we will create a slider that has a tooltip, so whenever a user hovers on the slider bar they can see how much longer they have before the program ends. The concept of a slider is pretty much the same with progress bar, but please don’t be confuse between the two.

Tooltip is also a fancy UI that designers uses, so we will combine the two to have a cool result. This is actually a continuation of our Web Mini UI post, but for this tutorial we will focused on the slider tooltip.

You can download the PSD at the bottom of this tutorial!

Progress Bar with Tooltip

Slider tooltip How to Create Slider Tooltip in Photoshop

Let’s Begin

1 canvas1 How to Create Slider Tooltip in Photoshop

Open your Canvas and set the size to 450px by 300.

2 slider main How to Create Slider Tooltip in Photoshop

Grab your Rounded Rectangle Tool (U) and set the radius to 50px, create the same shape as above and name this layer as background-slider.

3 slider main dropshadow How to Create Slider Tooltip in Photoshop

Now go to Blending Options > Drop Shadow and set your Blend Mode to Normal, color to #ffffff, angle to 120, and distance / size to 1px.

4 slider main innershadow How to Create Slider Tooltip in Photoshop

Next is Inner Shadow, set your color to #646464 and distance to 1px.

5 slider small How to Create Slider Tooltip in Photoshop

Select your Rounded Rectangle Tool (U) with same radius settings and use the color #7d8791.

6 slider small dropshadow How to Create Slider Tooltip in Photoshop

Blending Options > Drop Shadow, Blend Mode is set to normal, angle is 120, distance and size is set to 1px. Pretty much the same as the first one.

7 slider small innershadow How to Create Slider Tooltip in Photoshop

Inner Shadow’s settings, color is #646464 distance and size is 1px.

8 slider complete How to Create Slider Tooltip in Photoshop

This is what we have so far, moving on.

9 slider ticker How to Create Slider Tooltip in Photoshop

Now we will create more like a ticker (not sure if that’s what it’s called) Select your Ellipse Tool (U) and set the radius to 100px, draw a circle at the end of the slider. Hold alt when dragging to have a perfect circle.

10 slider ticker dropshadow How to Create Slider Tooltip in Photoshop

Blending Options > Drop Shadow, blend mode set to normal and color is #989b9d, angle is set to 90 and distance to 1px, size 3px.

11 slider ticker innershadow How to Create Slider Tooltip in Photoshop

Inner Shadow, set the color #8dd1fc and angle to 90, distance and size 1px.

12 slider ticker gradientcolors How to Create Slider Tooltip in Photoshop

In Gradient Color, follow these colors and hit OK.

13 slider ticker gradientsettings How to Create Slider Tooltip in Photoshop

Follow the Gradient Settings, notice the angle is set to 12.

14 slider ticker strokecolors How to Create Slider Tooltip in Photoshop

In stroke, we will use Gradient too. So set this colors in and move on.

15 slider ticker strokesettigns How to Create Slider Tooltip in Photoshop

On Stroke, set the size to 1px and angle to 90, and Opacity to 100%.

Slider tooltip main How to Create Slider Tooltip in Photoshop

Now grab Rounded Rectangle Tool (U) and set the radius to 3px, draw the same shape as above.

16 slider tooltip arrow How to Create Slider Tooltip in Photoshop

Now select Custom Shape Tool (you have to right click where rounded rectangle is on the palette) and in the upper menu select the shape named Arrow 6.

17 slider arrow tooltip How to Create Slider Tooltip in Photoshop

Draw the arrow near the rectangle shape that we did earlier, now we have two shapes on the canvas.

18 slider tooltip arrow align How to Create Slider Tooltip in Photoshop

Now drag the arrow shape and rotate it so it is facing the bottom. Make sure that it is properly align with the rectangle shape.

19 slider tooltip dropshadow How to Create Slider Tooltip in Photoshop

Now hold CTRL and click on the arrow layer, rectangle layer and press CTRL + E. We just merge the two layer so we can start styling it.

20 slider tooltip innershadow How to Create Slider Tooltip in Photoshop

Inner Shadow, set the Blend Mode to normal and color #8dd1fc, distance is set to1px and size to 0.

21 slider tooltip gradientcolors How to Create Slider Tooltip in Photoshop

On Gradient Color Settings, follow the colors above.

22 slider tooltip gradientsettings How to Create Slider Tooltip in Photoshop

Here is the Gradient Settings, set the angle to 90 and reverse.

24 slider tooltip stroke How to Create Slider Tooltip in Photoshop

In stroke we used the Gradient Fill type, set the size to 1px and Opacity to 100%.

23 slider tooltip strokecolors How to Create Slider Tooltip in Photoshop

Follow the color settings for Stroke Gradient.

25 slider tooltip text How to Create Slider Tooltip in Photoshop

Yours should end up like this, I also added a text and I use Arial bold #0d6da9 15pt.

26 slider tooltip text How to Create Slider Tooltip in Photoshop

In text Drop Shadow, set the Blend Mode to normal and color #ffffff, distance and size is set to 1px.

27 slider tooltip text innershadow How to Create Slider Tooltip in Photoshop

Inner Shadow select the color #0a629a and set the size to 1px.

Final Result

Slider tooltip How to Create Slider Tooltip in Photoshop

We are done! As you can see adding a couple of things will make your UI fancy, also making it easier for our user to understand is the best way to go.

Now, if there’s anyone whose interested to show me how to convert this into a working CSS? Anyone? πŸ™‚

3 Responses to “How to Create Slider Tooltip in Photoshop”