Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Drawing Ribbon

Drawing Ribbon


This tutorial will show you how to create a realistic, textured effect on a ribbon shape using the Satin blending option.

Ribbon Tutorial: Final Result

Step 1

image 2

Start first by making a rectangle with the rounded rectangle shape. I used a radius of 5 px.

Step 2

image 3

Use the pen tool to add an anchor point near the bottom.

Step 3

image 4

Drag the anchor point down, and the other two points in line, to make a shape similar to this one.

Step 4

image 5

image 6

Start out by choosing the shape's color, and then giving it a gradient for the shading. Use a black to transparent gradient.

Step 5

image 7

image 8

The shading will be more realistic if you set it to a diagonal angle. Scale it to 150% and lighten the opacity.

Step 6

image 9

image 10

Add a pattern for texture. If you don't know how to create a pattern like this one, its simple. Create a new 5 x 5 px file and delete the background. Use the pencil to add 5 pixels in a diagonal direction with black or gray. Then go to edit > define pattern.

Step 7

image 11

image 12

Here's the fun part. The trick with satin is to play around with the settings until you get a nice texture. I like the contour preset in the screenshot, but you can choose a different one. The distance and size usually have to be close to max, but vary. Also play around with opacity and angle. Again, a diagonal angle looks good here, along with around 40-50% opacity. Also, increase the brightness and contrast if you can't distinguish the features well enough. (Image > adjustments > brightness/contrast || OR || Layer > New adjustment layer > brightness/contrast)

Completed

You can use it for a lot of things, like I did with my website :) It adds a nice flair.Feel free to try out different shapes too.

Ribbon Tutorial: Final Result



Author's URL: Tutorial Monkey
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Drawing Ribbon"

Only registered users can write comment

No comments yet...