Create process indicator in Photoshop

Using the process indicator in your application is a good way to interact with your users. In this lesson we will look at how you can achieve a simple solution if you have plans to create an indicator of a process that can later be used for a website, software, or an application.

Creating such an indicator from scratch is really easy. The good news is that in the future you can change the color and design according to your needs.

Final result:

Step 1

Launch Photoshop and create a new document with wide (width) 450 pixels and tall (height) 300 pixels. Name this layer “index”, fill it with color # 565a59. Next, go to Filter – Noise – Add Noise (Filter> Noise> Add Noise) and set the value for it to 1%.

Step 2

Activate the tool Rounded Rectangle (Rounded Rectangle Tool (M)), set a radius of rounding 50 pixels, and draw a simple shape similar to the one in the screenshot below. Name this layer “body”. Fill this shape with # 454847.

Step 3

Right-click on the “body” layer, select in the pop-up menu Overlay options (Blending options), and in the dialog that opens, select the option Shadow (Drop Shadow). Set the following characteristics for this parameter:

  • Blend mode (Blend mode): are normald (Normal)
  • Colour (Color): # B7B4B4
  • Opacity (Opacity): 42%
  • Angle (Angle): 90
  • Check the checkbox Global coverage (Use Global Light)
  • Distance (Distance): 1
  • Swipe (Spread): 0
  • The size (Size): 1

Step 4

Now apply the parameter Inner shadow (Inner shadow)

  • Blend mode (Blend mode): Multiplication (Multiply)
  • Colour (Color): # 454847
  • Opacity (Opacity): 75%
  • Angle (Angle): 90
  • Check the checkbox Global coverage (Use Global Light)
  • Distance (Distance): 1
  • Tightening (Choke): 0
  • The size (Size): 1

You should get the same as in the screenshot below. Next we draw directly the indicator scale itself.

Step 5

Set as color foreground (Foreground Color) # 030303, and using the tool Area (horizontal line) (Single Marquee Tool (M)), draw a line and fill it with the previously named color.

Step 6

Repeat the procedure from the previous step, just change the fill color to # 8c8e8d, and make sure that the dark line is above the light line (see screenshot below)

Step 7

Create a new layer and name it “progress bar”. Take the tool Pen (Pen tool), and draw a line (about half of the dark line). Next, right-click and select Outline the contour (fill stroke), set the size to 2 pixels and use the color # b3d754 (see screenshot below).

Step 8

Right-click on this layer, select from the pop-up menu Overlay options (Blending options) and in the dialog that opens, select the option Inner shadow (Inner shadow). Set the following characteristics for this parameter:

  • Blend mode (Blend mode): normal (normal)
  • Colour (Color): #ffffff
  • Opacity (Opacity): 18%
  • Angle (Angle): 90
  • Check the checkbox Global coverage (Use Global Light)
  • Distance (Distance): 1
  • Tightening (Choke): 0
  • The size (Size): 1

Step 9

Now apply Gradient overlay (Gradient overlay) with parameters as in the screenshot below. Gradient from # 83d754 to # 7d9e25.

  • Blend mode (Blend mode): Normal (Normal)
  • Opacity (Opacity): 100%
  • Style (Style): Linear (Linear)
  • Angle (Angle): 90

Step 10

Now we need to draw a cell where the number of percentages will be reflected. To do this, we need to repeat the same actions that we performed in steps 2 through 4. Make sure that the height of this cell corresponds to the height on the “body” layer, and its width is about the same as you see in the screenshot below. Or I can show you a cool trick. Just pick a tool. Rounded Rectangle (Rounded Rectangle Tool (M)) and draw a shape as in the screenshot below, then select the “body” layer, right-click on it and select Copy layer style (copy layer style), then go to the layer with the cell for Amounts of percent (number percentage), right-click and select Paste style layer (paste layer style).

Step 11

Next we need to create a text. To do this, set as foreground colors (Foreground Color) # b3d754, Arial font, size 8 points.

I leave the part with the creation of the glowing tip of the process indicator for your independent work, I am sure you will cope with this! All you need is to add it. glow (“Glow”) and the depth (“Depth”).

So you did it! Minimalistic indicator of the process that you can use in your projects, you can change the colors and the original layout, or make your own. The main thing is that this lesson reflects the main idea when creating such indicators. I hope you liked the lesson, and you learned a few new tricks.

PSD lesson

Like this post? Please share to your friends: