ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create Awesome Glossy Button with Burlap Texture in Photoshop

Updated on February 27, 2016

Would you like to learn how to create cool glowing button in only sixteen steps? In this tutorial I am going to show the whole process of creating it in detail.

All you need is any Photoshop version, incl. Photoshop Elements and a little bit of patience while playing with the Blending Options.

The awesome texture of the button is achieved by applying Gradient Overlay and default Burlap Pattern. I myself don't like that much flat and even surfaced buttons that's why I created this textured one.

Now let's get down to work. This is what you are going to create:

Prepare Your Document and Colorize the Background

In the first two steps you should open a new Photoshop file, then colorize the Background layer with dark grey using Paint Bucket tool.

STEP 1

Let us firstly prepare our .psd document. Open your Adobe Photoshop and go to File, New. In New dialog box insert Shiny Button for Name. Set the Width of the document to 1000 pixels and Height to 600 pixels. Choose Resolution of 72 or 96 Pixels/Inch as the buttons are for online use, not for printing.

Select RGB for Color Mode and choose Transparent for Background contents. Thus Transparent Layer 1 will appear in your Layers panel. Double click on its name to change it and insert Background in the white space.

STEP 2

Go to the Tools bar and click once on Set Foreground Color swatch. Set the Foreground color to #545351 then take Paint Bucket tool and drag with it on your canvas to colorize it. You can achieve the same by going to Edit, Fill, Foreground Color.

Create the Golden Frame of the Button

In Steps 3-5 you have to create the golden frame in which to put your textured Button. You need to draw Rounded Rectangle of Fixed Size and Radius then reduce its Fill Option and add golden shaded thick Stroke Layer Style.

You should duplicate the already stroked Rounded Rectangle and apply a new Stroke of smaller Size.

STEP 3

Now we'll start to create the Button.

Change Foreground color to #cc3e81. Grab Rounded Rectangle Tool, in the Options bar set its Mode to Shape, click on the gear icon and select Fixed Size. Insert 800px for Width and 300px for Height. Set the Radius to 50px. After you have adjusted the settings of the instrument, draw the Rounded rectangle in the middle of your canvas. Use Smart Guides (View, Show, Smart Guides) to be more precize. You can also activate the Rulers (View, Rulers) then drag one Horizontal guide at 300px and one Vertical Guide at 500px which intersect in the middle.

Call your Shape layer Rounded Rectangle. While this Rounded Rectangle layer is highlighted, press Ctrl+G to put it in a Group and rename the new Group 1 to Button.

STEP 4

Firstly reduce Fill Opacity of Rounded Rectangle layer to 0% then double click on its layer's thumbnail to open Layer Style dialog box (Layer, Layer Style, Blending Options). Select Stroke in order to add awesome golden border to our button and apply these settings:

Size: 30px

Position: Outside

Blend Mode: Normal

Opacity: 100%

Fill Type: Gradient

Click to Edit the Gradient:

First Color Stop (Location 0%): #000000

Second Color Stop (Location 100%): #fff771

Reverse: checked

Style: Radial

Align with Layer: ticked

Angle: 0 degrees

Dither: not checked

Scale: 150%.

Press OK button to close the Layer Style box.

STEP 5

While Rounded Rectangle layer is highlighted, press Ctrl+J (Layer, Duplicate Layer) to copy it. Keep the Fill Opacity to 0%.

Right click on Rounded Rectangle copy layer (which is on top of Button Group) and check Clear Layer Style in order to remove the previously applied 30px golden shaded Stroke. Now double click on Rounded Rectangle copy layer's thumbnail to call Layer Style box and check Stroke again but this time insert the following setings:

Size: 10px

Position: Outside

Blend Mode: Normal

Opacity: 100%

Fill Type: Gradient

Click to Edit the Gradient:

First Color Stop (Location 0%): #000000

Second Color Stop (Location 100%): #aca64c

Reverse: not checked

Style: Radial

Align with Layer: checked

Angle: 0 degrees

Dither: not checked

Scale: 150%.

Press OK button in order to close Layer Style dialog box.

This is how the golden frame of your Button will look so far:

Create the Inner Part of the Button with Gradient and Burlap Texture

In Steps 6-9 you have to duplicate Rounded Rectangle copy layer and restore the Fill Opacity of the copied layer to 100%. To give your Button unique look, you should apply default Burlap Pattern Overlay, pinky shaded Gradient and Inner Shadow with increased Size.

STEP 6

Duplicate Rounded Rectangle copy layer. The new Rounded Rectangle copy 2 layer should be on top of Button Group. Restore its Fill Opacity to 100%. In the next steps we are going to accomplish the main part of this tut- adding volume, 3D effect and texture.

STEP 7

Now double click on Rounded Rectangle copy 2 layer and when Layer Style box appears on your screen, firstly check Pattern Overlay and add the following Pattern:

Blend Mode: Overlay

Opacity: 40%

Pattern: Burlap (90 by 90 pixels, RGB mode)

Scale: 101%

Link with Layer: checked.

Keep Layer Style box opened. We have to add two more Blending Options.

STEP 8

Tick Gradient Overlay to add sweet colored shades and apply these settings:

Blend Mode: Multiply

Dither: unchecked

Opacity: 100%

Click to Edit the Gradient like this:

First Color Stop (Location 0%): #6d233c

Second Color Stop (Location 100%): #ff889c

Reverse: checked

Style: Reflected

Align with Layer: checked

Angle: 90 degrees

Scale: 100%.

STEP 9

Check Inner Shadow Layer Style and change its settings as follows:

Blend Mode: Multiply

Color of Shadow: #000000 (black by default)

Opacity: 75%

Angle: 120 degrees

Use Global Light: ticked

Distance: 0px

Choke: 8%

Size: 50px

Contour: Linear

Anti-aliased: unchecked

Noise: 0%.

Press OK button to check Layer Style dialog box.

Our Glowing Button is ready. You can finish the tutorial with this step.

In the next five steps we are going to add Text. It is not necessary to add the same Text like mine. You can type your own using the Blending Options described in Steps 10-14.

The Button body is ready. Your result should resemble my outcome shown on the following screenshot:

Add Text to Your Glossy Button

You will finish this short tut with adding Text of your choice to the Button. You can use the same default Font I have decided to use. The layer styles you have to apply are Drop Shadow, golden shaded Gradient, dark Color Overlay with transparent Blend Mode and default 3D Effect with slightly reduced Size option.

STEP 10

While Rounded Rectangle copy 2 layer is highlighted, press T key to activate Horizontal Type Tool or grab it from the Tools bar. Select Impact default Font from Font Family drop down menu. Set 72pt for Font Size and select #f5d379 for Text Color. In the Options bar select also Center Text option. Now type Photoshop Tutorials in Capital Letters as you see on the screenshot below.

After you have typed the Text, you can select it then click on Toggle the Character and Paragraph Panels icon in the Options bar and Set the Tracking for the Selected Characters to a value you prefer. As you can see, I have inserted 70.

STEP 11

Right click on Photoshop Tutorial Text layer and select Blending Options from the fly-out menu to activate Layer Style dialog box.

The first Layer Style to be applied on our button text is Drop Shadow. Insert the following settings:

Blend Mode: Multiply

Color of Shadow: #000000 (black by default)

Opacity: 75%

Angle: 120 degrees

Use Global Light: checked

Distance: 0px

Spread 15%

Size: 9px

Contour: Linear

Anti-aliased: unchecked

Noise: 0%.

Layer Knocks Out Drop Shadow: checked

Don't close Layer Style box as we have more Blending Options to add.

STEP 12

In this step we are going to colorize our Photoshop Tutorial Text in awesome golden shades.

Check Gradient Overlay Layer Style and change its settings like this:

Blend Mode: Normal

Dither: unchecked

Opacity: 100%

Click to Edit the Gradient like this:

First Color Stop (Location 0%): #796530

Second Color Stop (Location 25%): #b39a34

Third Color Stop (Location 75%): #ffdb4a

Fourth Color Stop (Location 100%): #796530

Reverse: unchecked

Style: Reflected

Align with Layer: checked

Angle: 90 degrees

Scale: 100%.

STEP 13

The third Layer Style to be applied on Photoshop Tutorial Text layer is Color Overlay. Check it in Layer Style box and insert these settings:

Blend Mode: Overlay

Color of Overlay: #344855

Opacity: 100%.

STEP 14

Now check Bevel and Emboss Layer Style and leave all its settings by default instead the Size: reduce it to 2px.

Now you can press OK button to close Layer Style dialog box.

STEP 15

Voila! Our cool glamorous and textured button is ready. Those of you who have followed all my steps in detail should have in Layers Panel:

  1. One separate Background layer and
  2. Button Group which contains four layers: Rounded Rectangle, Rounded Rectangle copy, Rounded Rectangle copy 2 and Photoshop Tutorials Text layer.

STEP 16

This is the final result saved in .jpg format. Hope you liked and enjoyed this tutorial. Thanks a lot for reading.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)