Mastering “Bevel and Emboss” - From Beginner to Pro!

[K4rMa]

 

Those of you that’s been following my tutorials here on Minervity.com know that I like to make things look real when using Photoshop to create visuals for either user interfaces, web graphics or just plain design or icons. I have received a ton of questions regarding my technique to make things shine with that extra realism to the design. The secret can’t be described in just a sentence or a tool but rather a link of design processes that will give your design that little extra edge to it.

 

In this micro tutorial I will teach you how to get the very best out of the “Bevel and Emboss” tool that Photoshop has to offer to make your designs look ultra realistic. Before we get going there are some pointers that need to be expressed. A design can be ultra correct and still not have that realistic look to it. This is usually due to three different factors.

 

    1. Detail - Everything we see around us is not flawless. Everything has its scratches, dirt and distortions. It’s the small bits of imperfect details that makes it real to us.

 

    2. Time - It’s important to spend a lot of time on your realistic designs. Time is what will teach you what will look real and what will not. Just slabbing something together to be time efficient will always set you back when it comes to realism.

 

    3. Creativity - It’s an obvious one but oh so important. Nothing makes up the quality of your designs as much as creativity. Try thinking out of the box. Try using the tools in a non conventional way and you’ll see you will take a huge leap forward raising the quality bar quite a lot.

 

 

Alright, let’s get to business. Time to take a look at how we can raise the realism in our designs with a few short tips and tricks. So, in Photoshop we have the option of adding some beveling to any created object in Photoshop. We can do so by right clicking the layer in which the object is located that we want to create a bevel to. Right click the layer and choose “Blending Options…”

 

A whole bunch of different choices come up in a new window. In the list you can find “Bevel and Emboss“. Click it and you will be taken to it’s settings which we will be playing with.

 

The trick is really just to try and capture the realism and true angle of things when adding the bevel. It’s really important to study and do some research on how things truly are and how they look. Just adding a bevel to an edge won’t make it look raised or lowered just like that. It is equally important to look at the shadowing of the bevel itself and the angle the light is projected at the bevel.

 

The object in itself always has a source of light being pointed at it from a direction. It’s important to remember to make the light source come from the same direction consistently. However, not using the exact same settings as light also illuminates itself off of other things around it. This making it even more complex. But, we’ll be talking a little about it in a short bit.

 

First, let’s take a look at the usual way a novice would add “Bevel” to an object and how we, with just a few carefully set settings, can add much more realism to the object. In this case we’ve just created a rectangle measuring Width: 150 and Height: 150.

 

 

Novice Settings and Beveling

 

 

 

As you can see we are here using the very basic settings to create a bevel. This is usually the  way a beginner setup their beveling. However, ultimately incorrect if we are trying recreate some kind of realism in the design itself. A cleaner and much more efficient way to put the tool to its ultimate use is to first try and create a realistic surface to the object and then add beveling and shadowing to is. This will enable the viewer to look at the object in a whole different way.

 

Let us setup the “pro” way of beveling and surfacing the object. As you will see there is a few more steps to the process. However, not too many and not to complicated.

 

 

Pro Settings and Beveling

 

 

 

Now we have created the surface for our object and it now incorporates a clear light source from the top left corner. Time to add some beveling to it before we add some shadowing to it.

 

We need to “Fixate” the layer to be able to add new layer blending on the layer. Create a new layer underneath the object layer and (still having the object layer selected) choose “Layer” -> “Merge Down“. We have now fixated out layer and the surface effects.

 

 

 

 

We have now created the beveling itself and we only have two more step to make it look quite realistically believable. We need to add some shadowing to the object to give it more “time and room“.  Realism is all about capturing the imperfect noise around any real objects. With shadowing we can achieve a lot of this noise in a simple yet effective way.

 

 

 

 

As you can see the shadowing adds quite a lot of realism to the object and it makes it easier to create details that match the reality. Lastly we will add some noise to the object to incorporate the imperfect surface that creates the realism in the object itself.

 

To add noise to it choose “Filter” -> “Noise” -> “Add Noise…” and add the following settings.

 

 

 

 

There! The object now visions a more realistic illusion and is more likely to catch the viewers attention in a more positive way. Playing around with the settings will quickly make you a pro at incorporating the realistic light sources and noise. This process you can add to just about any surface or object you want in order to make it look more realistic. Just be creative and play around with it.

 

 

 

That’s how you add beveling to an object. But, there is a few other things you can create with the “Bevel and Emboss” tool. One of those are to create perfect orbs that looks stunningly real and you can create great icons with these.

 

I will take you through the simple steps of how to create an orb and during the process also show you some great tricks to create realistic reflection and gloss.

 

I just created a new work document and made it Width:250 and Height: 250. Also added a circle with the measures: Width: 120 and Height: 120 in the middle of the work area.

 

 

Novice Orb Settings and Beveling

 

 

 

As you can see it is not quite there and this is the mistake that beginners usually do when trying to create an orb using the “Bevel and Emboss” tool in Photoshop. There is a more efficient way to create an orb and far more realistic then the novice way of doing it. Again, it will require a bit more steps. However, the result will be a stunningly effective orb that will catch just about any viewers attention.

 

Pro Orb Settings and Beveling

 

 

 

As you can see we’ve found a way more believable way to create an orb. However we are not done yet. The simple orb is there but there are still a couple of things we can do to create that ultra realistic look and feel.

 

Add a new layer above the orb layer. Create a elliptical orb just at the top of the orb using the “Elliptical Marquee Tool“. We’re going to use the “Gradient Tool” to make a little gloss on the orb. Make sure its set to “Foreground to Transparent“, “Linear Gradient” (you set it at the top of the screen) and use white color (#FFFFFF).

 

 

 

 

So we just made our orb look a little more realistic. Now, as usual, we should add some shadowing to the orb in order for it to really come across as being right there in 3D in front of us.

 

Create a new layer underneath the orb layer and create a circle measuring Width: 90 and Height: 90. We are going to use the “Gradient Tool” again but this time use the “Radial Gradient” and use Black as the color “#000000“.

 

 

Now we need to do some modifications to the shadow so go ahead and choose “Edit” -> “Transform…” -> “Distort” and then distort the shadow like I’ve done underneath.

 

 

We need to make the shadow layer a bit more transparent to make it more realistic so go ahead and change its “Opacity” to “25%“. This should make it just a bit more smooth and believable.

 

 

There! Our orb is done and looking quite realistic. You have again the option of adding noise to the orb but that depends on if you want it to have a more rough surface or a more glossy shiny surface.

 

 

    Round Up

 

  There are millions of ways you can use the “Bevel and Emboss” tool to make things look realistic and believable. It is all up to you what you can come up with. Your creativity is the limit.

 

    I hope you have enjoyed this micro tutorial on how to master “Bevel and Emboss” and that it has taught you a few bits and pieces of how to create more realistic designs. Practising this over and over in different ways is the best progression to becoming a really unique and professional designer in Photoshop.

 

    On to the next tutorial.

 

    Thanks!

 

 

Credits goes to ~~~> 

http://www.minervity.com

 

 

[HellDaggeri]

hmmm nice i didnt knew some "tricks"

thanks usefull :)

[Morian]

Likes 3D ball. Thank you a lot k4rma!