ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create Glossy Ancient Style Text with Soft Stripes Gradient

Updated on November 7, 2015

In this tutorial I am going to show you in detail the whole process of creating Glossy Metallic Ancient Text with Soft Stripes Gradient. The first steps are dedicated to creating awesome background with dark Radial Gradient and Stone Texture. Then we are going to type the Text itself using free font from 1001freefonts.com.

After the Text is ready, we are going to duplicate its layer a few times and apply different layer styles. The cool zebra stripes are added with the help of Soft Stripes Gradient.

You should not bother about stock images. The Stone Texture used to add unique look to the Background is my own photo and unrestricted stock.

You can create this Text Effect with any version of Adobe Photoshop.

This is the final result:

STEP 1

At first create a new Photoshop .psd file of 1300px Width and 700px Height. Set Resolution to 96 Pixels/Inch and select Transparent for Background Contents so that your first layer to become editable. I have called my file Cool Ancient Text. Set also the color Mode to RGB Color. If you would like to print your Text, set the Color Mode to CMYK Color and the Resolution to 300 Pixels/Inch.

Rename Layer 1 to Radial Gradient, then press Ctrl+G to place it in a Group. Call the Group Background.

Create Awesome Background with Dark Shaded Radial Gradient and Stone Texture

In Steps 2-5 you have to fill your first layer with dark red to black Radial Gradient, after that you have to add brownish Stone Texture and blend it with the Gradient to create cool relief Background.

STEP 2

Navigate to the Tools bar and firstly change the colors. Insert #530404 for Foreground Color and #000000 for Background Color. Press G to activate Gradient tool, then change its settings in the Options bar. Select Foreground to Background Gradient and click on Radial Gradient icon. While your first layer is highlighted, drag with Gradient tool from the middle to any of the four corners of the canvas.

STEP 3

Click on the Stone Texture photo below in order to open it in high res in a new window then right click and select Save Image As to save it in the respective folder on your computer.

STEP 4

Create a New Layer on top of Background group and rename it to Stone Texture. Keep this new layer highlighted.

Open in Adobe Photoshop the Stone Texture image which you downloaded in the previous step, press Ctrl+A to Load Selection then press Ctrl+C to Copy the photo. Go back to your Cool Ancient Text .psd file and press Ctrl+V to Paste the Texture in Stone Texture layer. As the texture is bigger than your canvas, go to Edit, Free Transform and drag the nodes vertically and horizontally in order to resize the texture to cover your canvas. Press Enter to apply the Transformation.

STEP 5

Change the Blend Mode of Stone Texture layer to Overlay.

Type the Text and Apply Blending Options to Give it Colors, Metallic Glow and 3D Look

In Steps 6-12 you have to type the Text with a Font of your choice. You can use one of the many Ancient and Medieval Style free fonts from the web.

After you are ready with the Text, you have to make three copies of its layer and reduce their Fill to 0%.

Your last task in this part of the tut will be to apply five layer styles on the original Text layer.

STEP 6

Now we'll start to create our Cool Ancient Text Effect. Except using some of the default Photoshop fonts, this time I decided to choose more interesting ancient style Font. You can use a Font of your choice or simply download the one that I have used. If you prefer to strictly follow my steps, you can download Made Font by Pennyzine from here:

http://www.1001freefonts.com/made.font.

Install the font then select Horizontal Type tool from the Tools bar (or press T). From the Font Family drop down menu choose the new Made Font. Set the Font Size to 160pt. Choose #abe8e9 for Text Color then type Awesome 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 like. I have inserted 1000.

Press Ctrl+G to place the Text layer in a Group. Call the newly created Group Text.

STEP 7

While Awesome Text layer is highlighted, press three times Ctrl+J to make three duplicates of it. Reduce the Fill Opacity value of all three duplicated layers to 0%. Leave only the Fill of the original Awesome Text layer to 100%.

STEP 8

Right click on the original Awesome Text layer and select Blending Options (Layer, Layer Style, Blending Options). The first Layer Style to applied is Drop Shadow so tick it in the dialog box then change four of its settings. Decrease Distance to 0px, then heighten the values of Spread to 50% and Size to 13px. Choose Rounded Steps Contour from the Contour Picker.

Don't close yet Layer Style dialog box because we have another four Blending Options to apply.

STEP 9

The second Layer Style you should add to Awesome Text layer is Gradient Overlay. Only change the Gradient Angle to 90 degrees and choose Sepia Highlights Gradient from the Gradient Picker. If this Gradient is not exclusive for your Photoshop version, you can prepare it yourselves. The Color Stops are as follows:

First Color Stop (Location 0%): #030303

Second Color Stop (Location 20%): #333333

Third Color Stop (Location 50%): #808080

Fourth Color Stop (Location 100%): #fac893.

STEP 10

Now apply Stroke Layer Style. Reduce the Size to only 1px and Opacity to 35%, choose Gradient from Fill Type drop down menu. Set also the Angle to 90 degrees. Edit the Color Stops of the Gradient like this:

First Color Stop (Location 0%): #85721b

Second Color Stop (Location 50%): #e6e66b

Third Color Stop (Location 100%): #bbb551.

STEP 11

In this step we are going to make our Text more prominent. Check Bevel and Emboss Layer Style to add subtle 3D Effect and change its Depth to 93%. Slightly decrease Size to 4px, set Angle to 0% and choose Rounded Steps from Gloss Contour drop down menu. Change Highlight Mode to Hard Light, Set Color for Highlight to #bab44d and increase its Opacity to 100%. Increse Color of Shadow Opacity to 100% too.

STEP 12

The last Layer Style we should apply on Awesome Text layer is Contour. Find Shallow Slope-Valleys Contour from Contour Picker and change the Range to 70%.

Now you can press OK button to apply the Blending Options and to close Layer Style dialog box.

This should be the outcome on your canvas after applying the Blending Options on the first Text layer:

Add Blending Options to the Three Duplicated Text Layers

In Steps 13-22 you have to apply layer styles on the three copies of the Text you prepared in Step 7 (the ones with 0% Fill Opacity). You are going to create metallic effect with Gradients, Inner Shadow and Glow and Bevel and Emboss. At last you need to add dark red stripes with the respective default Gradient.

STEP 13

Now right click on Awesome copy Text layer and select Blending Options from the fly-out menu. Firstly apply Gradient Overlay. Change its Blend Mode to Overlay and check if the Angle is automatically set to 90 degrees. Change the Color Stops like this:

First Color Stop (Location 0%): #ff6e02

Second Color Stop (Location 2%): #9d9d0c

Third Color Stop (Location 50%): #b8b861

Fourth Color Stop (Location 100%): #d3996d.

STEP 14

The next Layer Style we have to apply on Awesome copy layer is Bevel and Emboss. Heighten the value of its Depth to the maximum of 1000% and slightly increase Size to 6px. Choose Ring from Gloss Contour Picker. The Angle should be set to 0 degrees. Change the Highlight Mode to Hard Light, Set Color for Highlight to #d9ce1f and increase its Opacity to 100%. Set Color of Shadow to #3c370a and reduce its Opacity to 45%.

STEP 15

Apply also Contour Layer Style on Awesome copy Text layer. Set the Contour to Gaussian and Range to 70%.

You should get this result on your canvas so far after adding the three Layer Styles to Awesome copy layer:

STEP 16

Now highlight Awesome copy 2 layer and start with the Layer Styles again. Firstly tick Gradient Overlay in Layer Style box. Set the Blend Mode to Overlay, choose Reflected from Style drop down menu, check if the Gradient Angle is 90 degrees and set the Scale to 80%. Change the Gradient Color Stops as follows:

First Color Stop (Location 0%): #a68913

Second Color Stop (Location 50%): #ecec64

Third Color Stop (Location 100%): #dadc56.

STEP 17

Let us add vivid yellow glow to Awesome copy 2 layer. For the purpose tick Inner Glow Layer Style and modify the following five settings:

Color of Glow: #eeee15

Source: Center

Size: 40px

Contour: Rolling Slope-Descending

Range: 70%.

STEP 18

The third Layer Style we have to add to Awesome copy 2 layer is Inner Shadow. Change these five settings:

Color of Shadow: #beaa25

Opacity: 100%

(check if the Angle is 0 degrees)

Distance: 0px

Size: 13px

Contour: Ring-Triple.

STEP 19

The last but one Layer Style we have to apply on Awesome copy 2 layer is Bevel and Emboss. Increase the values of its Depth to 155% and Size to 7px. Choose Sawtooth 2 Contour from Gloss Contour Picker. The Angle should be set to 0 degrees. Change the Highlight Mode to Hard Light, Set Color for Highlight to #d9ce1f and increase its Opacity to 100%. Set Color of Shadow to #3c370a and reduce its Opacity to 45%.

STEP 20

Now check Contour Layer Style, select Steps from the Contour Picker and set its Range to 70%.

Below is shown the result of applying the Blending Options on Awesome copy 2 layer.

STEP 21

Highlight Awesome copy 3 layer now. We have to add only two Blending Options. Firstly tick Pattern Overlay. Change its Blend Mode to Overlay and choose Green with Fibers Pattern from the Pattern Picker. If you don't have the same pattern in your Photoshop version, just choose another one, not necessary to be green. Amazing results could be achieved with any Texture/Pattern. Don't be afraid to use your imagination. :)

STEP 22

Now we have to change our Foreground Color because the Gradient we are going to use in this step depends on the Color we have chosen in the Tools bar. So Set Foreground Color to #790906 then apply Gradient Overlay Layer Style on Awesome copy 3 layer. Change the Blend Mode to Overlay and select Soft Stripes Gradient from the Gradient Picker. You can see that the stripes have the same Color as our Foreground Color.

We have no more work to do on our Cool Ancient Style Text. You should have these two groups of layers in Layers panel:

  1. Background group which includes Radial Gradient and Stone Texture layer and

  2. Text group with the following four layers in it: Awesome, Awesome copy, Awesome copy 2 and Awesome copy 3.

STEP 23

Voila! This is my Ancient Style Text saved in .jpg format. You can apply Filter, Sharpen, Unsharp Mask or Filter, Other, High Pass to improve the sharpness of your image.

Thank you very much for reading this tut. If you have any questions, don't hesitate to leave a comment below.

Comments

    0 of 8192 characters used
    Post Comment

    • CorneliaMladenova profile imageAUTHOR

      Korneliya Yonkova 

      2 years ago from Cork, Ireland

      No message, just make things awesome :)

    • Michael-Milec profile image

      Michael-Milec 

      2 years ago

      and a message is...

    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)