Lessons: 21Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.8 Slicing the Images

Welcome back. Now that I finished the design, the next step is to start writing the HTML. But just to be done with the PSD's, I first need to cut out the images and export them as image files. As JPEG's or PNG's or whatever. So the first thing on home page is this large banner and just to isolate it, you can do two things. You can select the overlay and background image, a right click, select duplicate layers and duplicate them in. A new document. Or you can simply hide the logo, the menu and the better contents and then just select the entire thing. And hit Cmd+Shift C and that we'll copy through all of the layers. Cmd +N to create a new file. Hit okay. And Cmd+V to paste that image. You need to go to file. Save for Web, and I'm gonna save this as a JPG with 90 quality. Hit Save. Create a new folder in my Exercise Folder called Images. And I'm gonna call it header-homepage.jpg. Okay, close that. Let's see let's show these again. I'm gonna do the same for the logo. I'm gonna duplicate it in a new document. I'm gonna go to Image Trim. Make sure Transparent Pixels is selected. Hit okay. And that will get rid of all of the, the excess space. And then do the same. File Save for Web. This one I'm gonna save as a PNG with transparency Logo. [BLANK_AUDIO] Okay, what else? I'm gonna need this image right here. And and easier way to make a selection, is to Hold Cmd and then, left click on the thumbnail of a layer. And that'll make a selection from that layer. So, do the same, Command shift C, Command N, Command V, and then save for web, and save this as a jpg 90. And I'm gonna call this, HP for homepage. Portfolio-1.jpg. And what else? These two icons right here. Twitter and Facebook. Duplicate this in a new document. Image, trim. And then save for web as a PNG. Icon twitter. And. Icon Facebook. Okay, and that's pretty much it for the homepage. Let's see. About page, we need this banner image. So, hide the logo menu and the contents, and do the same process that I've been doing. JPEG 90, header about. [BLANK_AUDIO] And same for the portfolio. [BLANK_AUDIO] Okay. And in portfolio, these are still these images. So I'm just gonna render one of them. [BLANK_AUDIO] Portfolio-1 for example. Okay, and that's it basically, that's how you get images from Photoshop. Now I was going to start the HTML in this lesson, but I think it's best if I do it in, in a separate lesson. Since there's lots of content. So in the next lesson, I'll start with the HTML for the homepage. I'll see you there.

Back to the top