FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.2 How to Slice a PSD

[SOUND] When we last left off, we had finished our markups. So now I'm gonna return to Photoshop, so that I can begin slicing out any necessary assets. And the point of this is, we need to take any images or icons, anything that cannot be recreated with HTML and CSS. And this is very simple, and I did this on purpose, so we're not focusing too much on Photoshop. The first step is, we do want that image. So I can do that by selecting the Cursor tool, and I'm going to come up here and choose Auto Select, and make sure Layer is selected. Now, when I click on the image, if you refer down to the bottom right-hand corner, you'll see that we select that layer, and if I turn that off, you'll see the image is gone. All right, so now, if I want select the image, because all I want is to capture that single image and save it, there's a couple different ways, but this is the way I prefer. I'm gonna hold down Alt or Cmd on the Mac, and click within this thumbnail right here. And now when I do this, you're gonna see that what we call marching ants will be selected around the entire layer. Now, the problem with this is, this image appears to be much larger, and I bet you can tell, because if we were to move it around, we can see different parts of the image. Now, we wanna keep it as it was before, but we only want to select this area. So I could do it manually, like so. Another way, would be to select the mask, and if you'll look right here, you can see this is where the designer masked the image, what he wanted to show. What is white will be what is displayed, and what's black is what's hidden. But if I, once again Alt or Cmd+click, that selects that one area. And then I'm gonna come back, click on the thumbnail and copy it, by pressing control Ctrl or Cmd+C. Now that's copied, I'm gonna create a new file, File> New. And now what you'll see right here is the width and the height have been set to the exact dimensions of what is stored in the clipboard. I'll click OK, and now Ctrl or Cmd+V to paste that in, and there we are, we have out background image. So, if you've used Photoshop before, you might be used to save as but, in our case, we wanna save it for the web. So I'm gonna come down to, and click this one right here. Next, we wanna specify the format, do we want it as a JPEG or a PNG? As a quick rule of thumb, anything that is a photo should be JPEG. Anything that is much more simple, maybe solid colors, no gradients, you would use a PNG. And anything that should have a transparent background, you would always use PNG-24. So I'm gonna stick with JPEG because this is a photo, and you can see here the ultimate file size, and you always wanna pay attention. Don't simply raise the quality as much as possible, because the file size is going to increase, and it's gonna take longer for your website to load. So instead what you wanna do, is reduce the file size, or the quality, as much as possible, until you see a noticeable decrease in quality, and right now, hopefully you can see this, it's beginning to look a little bit more pixellated. And of course it is, we're at 12. So, good rule of thumb is to keep it right around 60, that way it still looks rather nice, and our file size in 49k, a little large, but it should be doable. Next, I'm gonna click Save, and now we're gonna specify where this should be saved to. It's gonna go in our website, in the images folder, and I'm gonna call it, city-bg, but feel free to call yours whatever you like. Next we're going to hide this, and add it to our website. Now remember, we're not adding this to our markup, we're adding it to our style sheet. So, normally you would slice everything out of Photoshop first, but, for now, just to give you a quick glimpse of how it works, let's do it this way. And now we need to target banner, right here. So I will say banner, and give it a background of url, and we're going to link to the image that we saved. In this case, img/city-bg.jpg. But as we learned in a previous lesson, because we're within the CSS directory, We have to go up to the root, and then into the image. So, I will do period, period, forward slash. Next, I'll save it, and make sure this is called style.css. Finally, after background, if we want the background to repeat, which is the default. This is the default. We can specify, no-repeat, so we have a single background image. Now, let's see how this looks in the browser. If I reload the page, you're not seeing anything at all, and it should be placed right within here, so if you need to debug, right-click, Inspect Element. And let's come down and take a look. I'm gonna click on here, and notice it's not finding it at all. And if you're wondering why, well of course, it's because we've created a style sheet, but we have not linked to it. So we'll add or website name, My Website, or it should be called Black and White. And next, we will link to that style sheet, css/style.css. Reload, and now it's being displayed, but now you can see that the image is much larger than the content, so it's cut off. But what we really wanna do is make sure that the content is the exact width of this image. If I close it out, you can see the image takes up the entire area. So, that's the next step, is to figure out what the width is of our image. We can do that in a couple ways. One, you can right-click on the file, within finder or within Windows, and view the information, or you can open it from Photoshop, and we'll do that now. And now I can go up to Image and choose Image Size. And we can see right here, it's in pixels, if yours is set to percent, make sure you're viewing pixels, cuz that's what we're working with. It's 695 by 231. So that's good for the time being. And we're gonna set this to width of 695, height of 231 pixels. And now, let's reload, and now we have that full area. So good, you've sliced out your first asset. Now, let's see if there's anything else that we need for this. You might be wondering how we're gonna get this nice, transparent background, right here. We can do that all with CSS. We can create these buttons with CSS. Is there anything else we need? Not really, this is a fairly simple website. If we want, and just to learn, we're gonna slice out black and white, because that could be in a special font. And it's good to see how you would do it if you needed to. So once again, I'm gonna select the Cursor tool, and I'm going to click on the logo, and right here we're gonna copy it. So, once again I hold Cmd down, and it creates the marching ants. Next, I copy it by pressing Ctrl or Cmd+C, and this time, rather than pressing file, I'm gonna press Ctrl or Cmd+N to create the new file, at the exact dimensions we require. Next, Cmd or Ctrl+V and that pastes it in, but in this case, notice we still have the white background, and what we really want, is to specify the background with our HTML, and we don't wanna see this white background, if we want a red background. So we're gonna turn off right here, and now you can see the checkered background refers to transparency. Next step is to save this for the web. So we can go to File> Save for Web, or on the Mac, its Shift+Ctrl+Option+S. Next, I want you to notice that somehow that background showed up again. Well that's only because, we have specified JPEG. And remember earlier I noted, anything that is transparent, we should use PNG-24. Now when I do, that that will come back up, and we'll click Save. And now I'm gonna save it as logo, good. So now we're gonna add that one in as well. And once again, we're going to use image replacement, so I'm not gonna add an image here, though you could if you wanted. We're instead going to target it. Header, h1. Background is going to be url, img/logo.png. Let's see how that looks. Reload, and now, notice it's repeating over and over, and that's because the default of repeat is in effect here, because we have not overwritten it. So I'm gonna remove that. And now it's being displayed. But again, as we've learned, the regular text is displaying, as well. So we need to use text-indent, negative huge number. This is an arbitrarily large number, and that's gonna push it off the page. And also, to make sure that it is displaying, I am going to get the image size. So once again, I can go to Image> Image Size, or on my computer, I can press Option+Cmd+I. And here I'm gonna make sure that the dimensions of my h1, is set to this. 174 by 23. Reload, and now you can see, it's pushed up a little bit, because now we've specified the exact dimensions that we require. And now we're done with Photoshop for this page, and this is why I kept it simple; so we can get back into the HTML and CSS.

Back to the top