Give a Medieval Game Logo a Rough Stone Look

Give a Medieval Game Logo a Rough Stone Look

Tutorial Details
  • Program: Adobe Photoshop
  • Difficulty: Beginner
  • Estimated Completion Time: 1 Hour
Download Source Files

Final Product What You'll Be Creating

Designers are often asked to take a pre-existing one or two-color logo and give it dimension. In today’s tutorial we will take a black and white logo and give it a rough stone look in just a few short steps using textures and layer styles. Let’s get started!


Resources

The following resources were used during the production of this tutorial.


Step 1

Create a new document that is 1200×750 px and download the Caribbean font. Then, type out the title of the game as shown.

Once you are done, rasterize both layers and duplicate them. Take those two layers and merge them together. Finally, duplicate that layer, send it to the back and add a 24 px stroke to it using a layer style.


Step 2

Now merge the layer with the stroke with an empty layer to rasterize the stroke and get rid of the layer style. Then use the Paint Bucket to fill in the gaps between the letters.


Step 3

To add texture to the word “medieval.” place the Stained Concrete texture over the text. Then use the magic want tool to obtain a selection of the word "medieval." Now select the texture layer and select Cmd + J to create a new layer using the selection.


Step 4

Select the new texture Medieval layer and go to layer style then check "bevel and emboss" and enter the values like its shown below.


Step 5

To make the bevel effect more prominent, dodge and burn it as shown below. The red brushes are "dodge" and the yellow brushes are "burn".


Step 6

Use this Concrete Texture to add to the word “game.” Repeat Step 3 to achieve a similar result as below.


Step 7

Now select the new textured game layer and go to layer style, then check "bevel and emboss" and enter the values like its shown below.


Step 8

Choose the black stroke layer and go to "bevel and emboss" and enter the values as shown below.


Step 9

Now choose the black stroke layer and apply a gradient like the one shown below.


Step 10

Use this Concrete Texture as a background, after you add it, make a duplicate, go to filter > sharpen > sharpen and lower the opacity of the duplicated layer to about 60%. Now select the brush tool and chose a nice rounded brush around 200 pt, and select black color and set the opacity to about 60%, add a new layer above the texture and start drawing on the edges of the canvas, to get something like below.


Step 11

Now duplicate the layer with the black brush on the edges and set the first layer to "overlay" and the second to "normal."


Step 12

On top of all layers make a new layer to add some highlight/reflections. On the text choose a 1pt brush and set color to white, and the opacity to 70% and start drawing on the edges of the text, to make the edges more polished and shiny, this will make the logo look more detailed and realistic. See the image below for details.


Final Image

Well, that’s it! The final image is below. I hope you’ve learned something and please let me know if you have any questions.

  • GorillaWma

    Really nice, I like it.

  • http://www.wiltabone.com Wiltabone

    Looks Great ! Keep up the good work !

  • http://www.moonboy.info/ MoonBoy

    Very Poor, Really for the beginners

    • Pinkles

      Basic

      -noun
      Often, basics. something that is fundamental or basic; an essential ingredient, principle, procedure, etc.

    • http://n nabeel

      i Agree, it is poor and great for beginners but you can pick a tip or two from this tut.

    • http://noir-badger.deviantart.com spiderm0nkey

      I’m sorry, but what part of the word ‘Basix’ did you not understand? It is clearly stated that this is part of the Basix series of tutorials, aimed for BEGINNERS.

  • Tom

    I agree this is one of the first things i every learned with photoshop but then again a nice tutorial for beginners

  • emiliano

    Nice one for beginners.

    PS: If you use an outer stroke, then you can convert it to a layer with a right click on the ‘Fx’ Icon on the layers palette and using the option ‘Create layers’ then, you can merge the text layer and the stroke one.
    There’s no need for that empty layer on step two. (Sorry for my bad english)

  • http://childesign.deviantart.com/ Childesign

    I love the texture. Thanks for share

  • flyingfox

    Tacky. And the stroke really kills it. Eye cancer alarm. That’s a typical case of the “Effect-Overdoing-Disease” of absolute Photoshop beginners.

    • http://aevion.net AEVION

      I love reading your comments, you’re hilarious (although a bit brutal), and your use of words is perfect!

      “Eye cancer alarm”… haha

      • flyingfox

        Talking ’bout brutal, aren’t you the “I-love-giant-background-images-so-get-yourself-a-decent-bandwith-or-get-off” guy?

        I like your blog and your work (most of it). Keep it up.

  • João

    I’ts really terrible looking even for begginers, I’m sorry. I’ts just visual pollution. A good technique (not that it was the case) should never be an excuse for a bad design.

  • André Silva

    It’s a cool effect, however it’s basic! I don’t want devalue your work, and like I said it’s a cool effect and the tutorial is very well explained, but I think this site is not very coherent selecting the tutorials. They rejects some great ideas and accepts others pretty basics…

  • 7oda

    thx for share , im sorry but i don’t like the result

  • Master Slash

    If you guys see the preview and dont like the result. Why the heck you come here and start complaining ? Water you dont drink, let it go.

    People can be more annoying than a tutorial.

    • http://www.kieru.com Rob

      I’ve commented on this sort of thing before; it boils down to this. These comment areas exist for a purpose; that purpose is to provide feedback on the work and tutorial listed. Feedback is not always nice, and unfortunately it is not always polite or constructive.

      However, without feedback you will never evolve as a designer. People who suggest that no negative comments should be made are effectively asking that we let a potentially brilliant designer stagnate because we’d rather be absurdly polite than point out areas of improvement with the hopes that this results in growth and development.

      Granted this doesn’t mean EVERY comment is made in such a regard; some people just like to be mean. But a vast majority of us treat these comment areas as though it were University and this were a group critique.

      • Rob

        Very true Rob. But there is a fine line between constructive criticism and a plain ol’ attack! Those that do attack other peoples work have a bad attitude!

        Every tutorial on here is a learning experience…sure, we may have a different way of approaching something, but it’s important to branch off and learn new techniques.

  • http://laira.pathseek.info/ Laira

    Awesome Tutorial Thanks for sharing with us………..

    • http://aevion.net AEVION

      Hey, you got it right this time haha

  • http://www.newsever.com news in pakistan

    thnx 4 sharing rhis

  • http://na Lilly

    If this is really “for beginners” then you should really explain what and where you can find the stroke!!! I understand what and where it is in Paint Shop Pro, but only because I’ve been using that program for years and would now like to learn Photoshop. I’ve been pretty good at locating where things are thus far but could someone please explain where the stroke button is! Thanks.

    • http://www.kieru.com Rob

      Hi Lilly. In Adobe Photoshop there is no stroke button. ‘Stroke’ is a layer effect found under Layers -> Layer Styles -> Stroke. Hope this helps! Oh yes; please note that if you are working on a flattened image these options will not be available. You have to work on a layer.

  • Martin

    Not bad.

  • http://www.psd-dude.com PsdDude

    Pretty easy and col text effect! Nice Tip!

  • trevorpen

    It does say that it is for beginners of which I am one. The vast majority of comments are very favourable and I am one of them. Many thanks for posting and keep up the good work. As for the adverse comments, I think ignorance is the best comment I can come up with in a public forum.

  • geir Benny Nystad

    This is so funny, i just don’t understand some people that don’t understand that this is for beginners. And then they complain about this being so simple!!

    Good tutorial.

  • http://greatdiane.deviantart.com Diana

    I´ve enjoyed the process and love the final result, not sure about the black border in the logo, maybe without that border it could look more realistic, it´s just my opinion, :)

  • http://www.kieru.com Rob

    I am very appreciative of the ‘Basix’ series on the Tuts+ network; even at 10 years working with web and graphic design I often find myself learning new or at least alternative ways of doing things. That being said though, some of you seem to confuse the idea of “Basic” with “Amateur”.

    Just because something is a Basix tutorial does not mean the end-result should be of a quality any less than professional. There is no sense in teaching someone a BAD way to do something, so arguing that this sort of result is ‘okay’ on the basis of the level of complexity… to me it doesn’t make sense.

    I see where the author was going with this- but I agree with other comments that the overall effect is too tacky for me. When I see this logo my first thought is “Eyecandy”. Remember that plug-in that was so often (over)used by designers not so many years ago? That’s how garish the bevel and emboss feature is on this.

    I do however, absolutely adore the lighting effects you’ve placed on the background. I think that some tweaking of the bevel, and perhaps some additional lighting effects (or at the least a BRIGHTENING effect as the logo is too damned dark) would really help the logo stand out more.

  • http://saltshaker911.deviantart.com Ali Rahmoun
    Author

    Hi,
    thanks alot for all the comments and sorry if some visitors didn’t liked the tutorial/final result.
    what i tried to do with the tutorial is to make a tutorial for someone starting new with photoshop to do an “okay” text effect in less than one hour and in 13 steps only..
    of course it wont look like professional finished work, but i just thought i could write some tips for beginners about making the bevel/emboss effect on the texts look a little better than just applying the standard effect.
    at the end im still learning photoshop “will continue to do :)” and thanks alot for all the comments..

  • MASTER

    poor result

    its not a basic tut that might be a poor result

  • Barnstormer

    Fab – as an absolute beginner this is the kind of thing that excited me in the first place about PS. Keep it up, not all of us are experts

  • Justin

    For a basix tutorial I concider it very good explained.
    Some things I would have done another way, with more shortcuts etc. but than where is the basixs left :)
    It’s a clever tutorial for who’s just starting out and a nice looking effect :)

  • Joya Anees

    hey it’s very nice effect….

  • kathy

    This is really nice!! Tryin it out. :)

  • http://www.circlezero.net madhartigan

    Thank you for the tutorial!!

    Only thing that I’ve noticed is that on a 1200x750px document that has a resolution of 72 px/in., your font size of 250pt or 180pt just don’t fit on that document.

    Unless I’m missing something.

    and i could be.

    I’m one of those beginners who actually benefits from this type of tutorial.

    • http://www.circlezero.net madhartigan

      nevermind.

      lowercase + letterspacing solved problem.

      Sorry for the confusion.

      Carry on.

  • Tyson

    HI,I have a question,at step 1 , i got a problem,after i apply the stroke ,my words become all black not like urs,black and white