Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now we that have our HTML and CSS files created and our external file links to the CSS file, I'm going to minimize this. And now what we want to do is create some of the assets that we're going to need from Photoshop, some of the graphics, to recreate our layout. So one of the first things I recommend doing in any interactive project and web site project is coming up with a sketch. You can draw this out in a notebook or use something like Illustrator or InDesign, and just come up with some of the measurements of the different pieces we're going to need, so that we can create individual slices inside of Photoshop and then recreate CSS in order to recreate some of those objects.
So in this sketch here, what we're going to be creating for our photo gallery are a series of thumbnails that are going to be 75 x 75 pixels. Our preview areas is going to be 375 pixels wide. We're going to have the container that's going to be 500 pixels wide that's going to hold all of the thumbnails. And then we're going to have our overall gallery area be 960 pixels wide, and that's going to consist of the top area, a center tile area which is going to tile vertically-- we'll set up with CSS-- and a page bottom area.
So letting this sketch sort of inform some of the numbers we're going to create, let's come out to the exercise files and let's open up page_template.PSD. Now inside of this file--I'm just going to zoom up here-- we basically have just the artwork that we need to cut up and create our layout from. So in the left-hand area here, we have this sort of rounded-corner box with a gradient at the top and the bottom. And on the far right, if I scroll over, I can see little icons for the envelope and the magnifying glass, which we're going to use to create email links and the magnification, which is actually going to trigger the light box we looked at in the introduction video.
So I'm going to scroll all way over to the left. Over here under the Cropping tool, we're going to come down and select the Slice tool. What the Slice tool allows us to do is draw artwork on top of our canvas, and when we use the Save for Web & Devices feature inside of Photoshop, any artwork inside of the slice areas can be saved out as an individual graphic file. So to use this, I'm going to come up here to the upper left-hand corner. I'm going to click and drag. That's going to create a slice area. Any slice that I draw will be highlighted in blue inside of Photoshop, and any slice that Photoshop creates to fill out the entire canvas will show up here in gray.
When I move my cursor inside of here, I get the Slice Selection tool. I'm going to double-click and bring up the Slice Options panel. This is going to be the page top, so let's come in here and rename this page_top. The Width is going to be 960. It's going to be 20 pixels tall. I'm going to click OK. Now, that's going to create a slice. If I scroll out here, I can see that that will actually fit exactly the rounded- corner box, which I've drawn to be exactly 960 pixels wide. Scroll back to the left.
Let's draw out another slice. This is going to be called page_tile. This is going to be 960. I'm going to set this to be 10 pixels tall. Now, this graphic here is going to be a tile, so it's going to repeat vertically. Now some people recommend making your graphic that's going to tile vertically only be one pixel tall, or a graphic that's going to repeat horizontally to be one pixel wide. I recommend against this because that means that the device or browser you are looking at has to paint that graphic that number of times.
So if you have a 1024-wide site, the browser is going to have to paint that one graphic 1,024 times. So I recommend setting the graphic to at least 10 pixels, or even 20 pixels. The amount of file size difference is really tiny, but it drastically reduces the number of times the browser has to redraw those graphics. So I'll set this 960 x 10. Then lastly, last come down here, draw out another slice. This is going to be page_bottom. 960 x 20. We'll click OK.
With this one selected, I'll use my arrow keys and I will just arrow this up. Let me zoom up here. I want to make sure that slice is right at the bottom of this area here, so that rule at the bottom of the rounded-corner box is right at the bottom of the slice area. Use my Zoom tool and zoom out here. Let's scroll all the way out to the right. I want to zoom up over here onto the envelope and Zoom tool. Slice tool is selected. I'm going to create two graphics here, 23 pixels x 15.
This is going to be called link_email. Draw another one around the zoom. This one we'll called link_zoom. Then click OK. Use my arrow keys and move that down. So if I zoom up here, I want to make sure the magnifying glass fits perfectly inside of the slice area. And scroll up to the envelope, make sure that fits in there as well. I'm going to hit Command+Option+0 or Ctrl+Alt+0 on Windows to come out to full-screen view.
I'm going to come over to the background and turn that off. I want these to be transparent. So these slices over here are going to be transparent against the background. These over here are going to be JPEGs without transparency. Let's choose File > Save for Web & Devices. I'm going to zoom up here. I'm going to scroll over to the right-hand side, so I can see most of my slices here. So I'll select the very first slice, hold Shift, select middle, and bottom.
We're going to set these to JPEG, about 75% Quality. I'm going to select on the Envelope tool here. This is going to be a PNG file, 24. Select the Zoom Magnification tool. This is going to be PNG-24 as well. Let's click Save. I am going to choose the Desktop > myGallery > images, and we're going to choose template.
Under Slices, I'm going to choose All User Slices. So even though Photoshop set up slices for all of the different canvas areas, we only want to save out the ones that we drew. Under Settings for Other, I want to come in here and make sure that Photoshop is going to save out each one of these as the slice name. We'll click OK. Then we'll hit Save. Let's go back out to the operating system. We'll close up photos, open up templates, and inside template, we'll have link_email.png, link_zoom.png, and then top, tile, and bottom JPEG files.
Let's come back to Photoshop. Let's close and save our changes. So now that we have all of our graphics in place, let's go back over to Dreamweaver and create our CSS rules in order to recreate this layout in HTML and CSS.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99426 Viewers
56 Video lessons · 112660 Viewers
71 Video lessons · 81488 Viewers
131 Video lessons · 39119 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.