Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the previous movie we saw how layer styles were crucial in creating the reflections that make the case of the iPhone look metallic. In this tutorial we're going to look at how layer styles were instrumental in making all the icons on the iPhone look realistic. I am going to zoom in on the main core of icons right here and we'll look at individual ones, just as they come in to view here. So right there, right off the bat we see the sun. The sun's got some nice little tones to it. Let's go look at it. I am going to click on the sun itself and you see that the sun has two layer Styles.
It has an Outer Glow and has a Bevel and Emboss. Without it it's just a circle that was given a radial gradient going from a light yellow to a darker yellow. But the Outer Glow and the Bevel and Emboss made it look like the icons that we see on the phone. So if we go in there and turn these back on, you see there are the effects. If we look at the Bevel and Emboss, we see that I made some changes to it. The Screen and Highlight is still set to white, but the Shadow mode was set to a lighter yellow, lighter than the one that's in the background itself.
So I set the mode to Normal rather than Multiply, which is the shadow's mode, and by doing that we get that nice little extra yellow halo along that bottom. The Outer Glow is just set to a stronger yellow than the default. The Opacity is brought up a little bit and it was made a little larger, which gave me that glow around it. Something like the YouTube symbol right here. We'll click on that and we see that we have a few layers that make up the YouTube. We have the frame, the screen, the knobs, and the label. Every one of them has some kind of a layer style with the exception of the label.
The label is just this little piece right there. So if we look at the frame, it has a Drop Shadow, which is right in here, you could just see it in here, and it has Bevel and Emboss to make the frame look three-dimensional. I'll turn those off. There is the Drop Shadow and there's the Bevel and Emboss. And you could see that it's just a little frame without any highlights and so on. Turning those back on, you see that it starts to give it a little dimension. The same thing with the screen. It has a stroke. Turn that off and you can see that that edge around the screen is just a stroke.
The knobs also have a little Drop Shadow. Turning that off and you could see that it's just a little hint of Drop Shadow. And again, this was based on looking at an actual iPhone to see what these icons look like. Same thing like the lens right here. The lens has an Outer Glow. That's what was creating this little halo around the side there. It's just this little Outer Glow right there, which created that little edge. That little edge made the difference to make this look dimensional. Something as simple as the pin. Let's zoom in on that pin. You can see that the pin has some tones to it.
Well, that pin has a Bevel and Emboss. Without it it's just a little gray rectangle, but with the effect it becomes this three-dimensional pin that's sticking right into the map. Right here we see the Calculator. Click on that and we see that the Calculator has quite a few things. There are symbols. The symbols are those little symbols inside. They have no effect; they're just little shapes. But the Calculator itself has a Bevel and Emboss. Without it they're just rounded cornered little squares, that's it, with no other tone.
But adding that little effect makes them look like buttons that are raised from the surface. So, all these things have these tiny little layer styles, which make these buttons come to life. Every one of them has something in there that makes it come to life and these layer styles, no matter how simple they are, they will add dimension to your image.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42119 Viewers
119 Video lessons · 53614 Viewers
65 Video lessons · 14036 Viewers
113 Video lessons · 82707 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.