Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
In this movie, we're going to be exploring the Layers panel inside of Photoshop. If you aren't using layers in your designs then you're doing yourself and anyone working with you a big disservice. Layers are the window in your document that give you a bird's-eye view of everything that's happening inside your file. By properly using the layers, you ensure that your files are staying organized throughout the entire design process, and that is the essential, especially when you're working in a team environment. Let's take a look. I have opened a file here called explore_layers.psd. In this file there are several different types of layers, and they're all scattered throughout the Layers panel over here on the right.
I'll drag the Layers panel out so you'd get a better idea of what I'm talking about. Inside the Layers panel, there's a lot going on, and at first glance, it can be someone intimidating, so let's take a look at that before we get started. At the very top you'll see a filter and search bar. This is only available in Photoshop CS6, so if you're using Photoshop CS5 or earlier, you won't have this available to you. We'll cover this in its own movie a little bit later on. Directly underneath that, you're going to see a Blend mode and Opacity control. Blend modes allow you to blend layers together based on certain criteria: Brightness, Hue, Saturation, et cetera.
The opacity controls refer to how opaque an image is. So for instance, if I were to select one of these photograph layers and turn the opacity down, you'll see that the photo starts to fade in and out. Dragging it all the way up back to 100 makes it completely opaque. Fill opacity is a little bit different; fill opacity will also reduce the opacity of the pixels on that layer, but if there were any layer styles applied to it--like a drop shadow or stroke--the fill opacity does not affect those attributes. Directly to the left, we have the ability to lock certain aspects or all of our layers.
In the Lock section, we can lock transparent pixels, image pixels, lock layer position, and also lock everything. If I choose Lock everything, that means the layer is unable to be edited whatsoever. If I try to move this layer, Photoshop comes up and tells me that it cannot use the Move tool because the layer is locked. I simply hit OK and then if I want to unlock my layer, I click the lock icon again, and I'm able to move and edit that layer as I see fit. In the body of the Layers panel, you're going to see little eyeball icons to the left.
This controls visibility; it does not delete a layer. So if I click the eyeball, the layer is temporarily hidden. It's still there. All I have to is click the eyeball again to turn it back on. We'll also see a layer thumbnail. The layer thumbnail gives you short of a bird's-eye view of the layer itself. To the right, you'll see a layer name and if you want to know whether or not you have the current layer selected or not, you just look for the highlight. So anytime I click on a layer, see how it highlights? That means that that is the current layer that I have selected. So anytime you open up a file and you don't know which layer is selected, just look for the highlighted portion.
At the bottom of the Layers panel, we have several different icons, like Link layers, which will only be available if you have two or more layers selected. Add a layer style: this adds special effects to your layers, like drop shadows, glows, and bevels. Adding a layer mask which allows you to hide portions of your image nondestructively. Creating a new fill or adjustment layer, things like levels, curves, shadows and highlights, things like that. Create a new group; if you have several layers that are similar to one another, you can group them together. You can also create a new blank layer from this icon here and you can throw layers away by clicking the trashcan.
On the right-hand side, you'll see a scroll bar. So if you have a lot of layers in your document, you can scroll up and down to see all of the layers that are available to you. At the top right-hand corner, you'll see a small menu icon that opens up the Layers panel menu. From here you can do lots of the commands that are available as icons inside the panel, and you can also do things like change blending options, and open up the panel options to change the way the Layers panel behaves and appears. Clicking away from that will close the menu. Now I'm going to reset my workspace by coming up to the Jump menu and choosing Reset.
That snaps my Layers panel back to where it's supposed to go. And so there you have it: a brief tour of the Layers panel inside of Photoshop. Hopefully by now you have a better understanding of what all the little icons and buttons are and why you would choose to use them in your project.
There are currently no FAQs about Photoshop for Web Design.
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.