3000+ Top Quality Design Resources for only $7

Creating an Interface Slider Graphic in Photoshop

Creating an Interface Slider Graphic in Photoshop

Slider graphics have become a widely used trend in web design. They come in all shapes and sizes, and are only limited by your imagination in how they look and perform. Creating these sliders in Photoshop is extremely easy to do. In this short tutorial I will run through my process for creating a slider graphic using layer styles.

Preview

Step 1

First create a new PS document that size appropriately so that it will contain your slider box plus room to add a shadow around the boarder. Use the Rectangular Marque Tool to draw a box, in a new layer, and fill it with a neutral gray.

Step 2

Double click the layer containing the box to open the Layer Styles window. Let’s start by adding a white stroke with a size of 3 pixels

Next, let’s add a Gradient Overlay using the settings below. I chose these two shades of blue: Light blue – #34f2f9, Dark blue – #0ba0d1

Now let’s set an Inner Glow with the setting below. I chose a darker blue for the effect. #1178ae

For our last layer effect, let’s create an Outer Glow to act as a slight shadow around the box. Use the settings below to create the shadow.

You slider box should now look something like this.

Step 3

Now let’s add a shadow below the slider box by creating a new layer below the layer containing the box. Command+Click the thumbnail for the box to select it, then make sure your new layer is selected and fill the selection with black. You won’t be able to see the new black box since it is behind our slider box.

Next choose Edit | Transform | Distort, and edit the black box to a shape similar to the one below. Press Enter to transform the box.

Now apply Filter | Blur | Gaussian Blur as I have in the image below.

Then set the layer opacity to 75%.

Step 4

Let’s add slider controls by creating a circle using the Elliptical Marque Tool, filling the circles with white and setting their layer opacity to 50%

I added arrows using <> in a font called Technical Forest.

Step 5

To finish up, I’m going to add some type to the slider. I chose a font called Ballpark Weiner. It’s a great vintage style font that you need, if you don’t have it all ready.

I applied the following effects to the font.

Color: #525353

Inner Shadow
Opacity: 75%
Angle: 90
Distance: 3
Choke: 0
Size: 7

Outer Glow
Blend Mode: Overlay
Opacity: 100%
Technique: Precise
Spread: 0
Size 2

Step 6

I guess this wouldn’t really be a WeGraphics tutorial if we didn’t go one more step, and apply a little grunge. I chose texture #1 from the Subtle Grunge Textures Vol. 2 pack. I scaled it down and placed it in a layer above my slider box layer. I set the Blend Mode to Overlay and the Opacity to 50% to achieve the final result.

Conclusion

This was a very simple tutorial to achieve a very nice and clean result. These techniques can be used to create a variety of web elements beyond just slider boxes. I hope you’ve learned something new and have chosen to use this new found knowledge for the powers of good! ;-)

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Nathan Brown

Nathan Brown is a graphic designer who loves working with various media. He combines traditional art styles with a little experimentation and digital flare. Nathan's works have contained everything from ink and paint to leaves and a box of dirt. Everything is fare game when it comes to his approach to art. Nathan lives in Austin, Texas where he has been working as a designer for 10 years.

16 Comments

(+add yours)
  1. can you recommend a tutorial that shows how to get that slider working?

  2. Yeah really lovely! Will hopefully be implementing one sooon! Thanks again :)

  3. carlitos

    Thank so much people like you are very important in the carrier of design
    Thank Again

  4. thanks ,the post is so helpful.best wishes

  5. Nice tutorial, If I’m correct, you are using Ballpark Font!

    • You are correct… That’s a great font!

  6. Thanks for an amazing tutorial, and thanks for the link you left for Sarah that helped make everything so much cooler. BTW I love the colors you used!

  7. Salah

    Thank for you it is nice tutorial, I like it

  8. syu

    nice tutorial ! thanks ~

  9. Kemal

    Thanks for tutorial, it’s very nice. And I tried to make the same design in Fireworks CS5, you can download at https://dl.dropbox.com/u/89772218/Slider_In_Fireworks.png

  10. aprovecho para darle las gracias a Nathan quien es un excelente diseñador y además comparte sus creaciones y una pizca de conocimiento que a todos nos es muy util.

  11. I don’t even understand how I finished up right here, however I assumed this put up
    used to be good. I do not recognize who you are however definitely you are going to
    a well-known blogger should you aren’t already. Cheers!

  12. ????? ?????? ???????
    ??????????? ??? ?? ????? , ?????????

  13. ragy atef

    you help me a lot ty^^

  14. Boxing was extremely popular sports practiced through ancient Greece and was among the
    list of former disciplines inside a Olympic Games.

    Nowadays, boxing appears in the records following
    your Duke of Alberman organized in England a fight between his
    butler and the butcher around 1681. Despite the fact
    that, this type of gambling preparations are nonetheless particularly well known.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team