Create a stylish ribbon icon in Photoshop.

In this lesson, step by step, you will learn how to create high-quality icons for social networks or just web icons for your needs. In the process, the blending modes, the tool Deformation (Warp tool), as well as you learn to create realistic shadows.

The final image.

Materials for the lesson:


PSD file

Step 1

Create a new document with a size of 256 x256 pixels.

Choose a tool Rectangle(Rectangle tool) and draw a rectangle whose color does not matter. You should get a shape, like in the screenshot.

Now activate the tool Polygon(Polygon tool). In the top toolbar settings, put 3 Parties (Sides) and turn on the icon Add to the shape area (Add to Shape area).

Now create a triangle, as shown below.

Press the key combination CTRL + T, A transformation frame appears around the triangle. Move it to the base of the first figure and transform it.

You should have a shape like in the screenshot.

Step 2

Now let’s change the color of the ribbon. Double-click on the ribbon layer thumbnail and enter a color in the new window that appears. # 7fd861 . Or any other way you wish.

Download pattern and install it in photoshop. Double click on the ribbon layer to open the layer style window. Choose style Pattern overlay (Pattern Overlay) and put the pattern that you just uploaded. Decrease Opacity (Opacity) up to 54% ?? and change the blending mode to Linear dimmer (Linear Burn).

Now turn on the style Gloss (Satin). Set the blending mode Replacing Dark (Darken), color is black, Opacity (Opacity) 27%, Angle (Angle) about 90 – 95, Bias (Distance) 47 The size (Size) 58 and Circuit (Сontour), as in the picture below.

Adjust the layer style Stroke (Stroke), size 1 pixel position Outside (Outside) overlay mode Normal (Normal), Opacity (Opacity) 100%, stroke type Colour (Color) # 42802a. In the event that you choose a different color for your ribbon, just make the stroke color darker than the main one.

You should get something like this.

Step 3

In this step we will create a shadow. Duplicate the ribbon layer by dragging it to the corresponding icon at the bottom of the layers palette. Right-click on the copy and clear the layer styles. Now double-click on the layer thumbnail and select black for the copy.

Go to the menu Filter – Blur – Gaussian Blur (Filter-Blur-Gaussian blur).

Put in the blur settings a radius of 7 pixels and click Ok.

Place the shadow layer below the ribbon layer in the layers palette. You should have this:

Now standing on a layer with a shadow go to the menu Editing – Transform – Warp (Edit-Transform-Warp). The tool frame will appear.

Using this feature, edit the shadow as follows:

Decrease Opacity (Opacity) shadows up to 60% and it will look like this:

Step 4

Download file from patterned and install it in photoshop. Unlock the background layer by removing the lock and double-click on the layer to open the layer style window. Select and apply the pattern loaded in this step to the background.

Step 5

So, create a new layer above all other layers. With the CTRL key held down, click on the ribbon to load the selection.

Set the base color to white. Tool Gradient (Gradient tool) from white to transparent, hold on the newly created layer from top to bottom about 1 cm. You should get something like this.

Decrease Opacity (Opacity) highlight up to 40%. Create a new layer again and reduce it. Opacity (Opacity) up to 30%. Make sure the base color is now black. Select Mirror Gradient (Reflective) and at the bottom of the ribbon, swipe it to create a shadow, as shown in the screenshot.

At this stage you should have this result.

Step 6

Let’s draw the lines. Choose a tool Line (Line tool) and swipe down from the edge of the ribbon. Line color must be black.

Now select the tool Rectangle selection(Rectangle Marquee tool) and make a selection at the top, as shown in the screenshot below.

Right-click on the layer with the line and rasterize the layer. Now using the key Delete You can delete the selected area. Move the selection again and delete a few more parts on the line.

Duplicate the layer with the finished line, in the layer styles for the copy, apply the style Color overlay (Color Overlay). Color set to white and reduce Opacity layer (opacity) up to 50%.

Make the same lines on the opposite side of the ribbon.

Now for the bottom of the tape.

Step 7

Choose a tool Line(Line tool) and draw a line in black, as shown in the screenshot.

Now draw another line just above, this time make it white.

Decrease Opacity (Opacity) layer with a white line up to 50%. Now select both lines, merge into one layer, right-click and select Merge layers (Merge layers).
Add a layer mask using the button at the bottom of the layers palette. Reset the default colors (black and white). Standing on the mask, select the tool Gradient White to Black (Gradient tool), method Mirror(Reflective) and drag him from the center of the document, to the side to the end of the document. The edges under the mask will disappear on both sides of the lines.

Step 8

Create a new layer and set the foreground color to white. Choose a tool Gradient (Gradient tool) from white to transparent, radial method. Draw a small circle as in the screenshot.

Now with the help Free transformation (Free Transform) Ctrl +T shorten the circle as in the screenshot.

Create a rectangular selection and remove part of the circle, leaving the bottom edge clear.

Decrease Opacity (Opacity) layer with a circle of up to 50% and you should get something like this result.

Step 9

Create a new layer and tool Arbitrary shape (Custom Shape Tool) draw the shape you would like. The author chose the resource logo DeviantArt. Open the layer style window and turn on the style. Inner shadow (Inner Shadow). Adjust blending mode Multiplication (Multiply), color black, Angle (Angle) 90, Bias (Distance) 0, Tightening (Choke) 0, The size (Size) 4.

Double-click the shape layer icon and change the desired color. Since the author has a light green ribbon, he chose a dark green color for the logo. 4d5f53.

Now add the inscription in white with the tool Text (Text tool). The author used the font Oswald, but you can use whatever you like.

Duplicate the text layer and place a copy under the original text layer. Set the text color on the copy to black and slide it down a little using the arrow on the keyboard. This will create a shadow effect for the text.

Final step

Create a shadow effect at the top of the ribbon. Create a new layer at the very top of the layers palette. Load ribbon selection by clicking on the thumbnail of its layer with the key held down Ctrl. Set the base color to black, select the tool Gradient (Gradient tool) from black to transparent, linear method. Now draw a gradient from top to bottom within the selection, about half a centimeter. Decrease Opacity (Opacity) layer with shadow up to 70%.

The final result with different sizes of ribbons.

Author: derby-web-design-agency

Like this post? Please share to your friends: