Join Chris Converse for an in-depth discussion in this video Slicing and exporting web graphics, part of Creating a Responsive Sortable Photo Gallery with jQuery.
Now the first graphic we're going to create is going to be for the background, so let's come over to the exercise files inside of art templates, open up background.psd. I'll zoom in here to 100%. And since this is a very large background graphic, what we're going to be doing is fixing this to the lower right-hand corner of the screen. And when we scroll our thumbnails as we looked at in the introduction video, we're going to fix this graphic so that the thumbnails will scroll over the top of this graphic. So with this open let's come up to the file menu. Let's choose Save for web.
And this will be in the background and it's a little blurry so we don't have to save it with the highest quality setting. So let's come up here and select about sixty percent. In the lower left hand corner, we can see the corresponding file size. This will be about 30kb. Let's choose Save. From the desktop let's go into My Gallery. Choose Images, then hit save. We can see that show up in the background. Let's close that file. Let's open up checkboxes.psd. And these are going to be custom check boxes that we're going to create instead of using form elements. So I'm going to zoom up here.
So what we're going to do here is use the slicing tool to slice these as individual graphics. So under the cropping tool, Click and Hold. And you'll come down and select the slice tool here. With the slice tool selected, let's click and drag around the first check box. Once we've drawn the Slice, let's Double Click, let's name this check normal. Should be 12 pixels by 12 pixels. Click OK. Draw a Slice around the second checkbox. Double Click. We'll name this check underscore selected. Then Click OK.
Now, with our slices created. Let's choose File Save. Slices are saved with your Photoshop file. Then let's choose a File Save for web. Command space bar. Zoom up here. Let's select the first slice. Hold the shift key, select a second slice. With both selected, let's come up and make sure we're in the GIF file format. Let's turn on transparency. Let's come down and chose save. Go into my gallery, images. Down under slices, chose all user slices, which means any slice that we've drawn will be saved, all the rest will be ignored. Then hit Save.
Then hit Command or Control+W to close the file. So now back in the operating system we have our background jpeg and our check normal and check selected gifs. And now with those created, next we'll work on creating the multiple sizes of our title graphic.
This course was created and produced by Chris Converse. We are honored to host this training in our library.
- Creating and exporting web graphics
- Setting up the HTML containers
- Styling the layout with CSS
- Tagging your gallery with data
- Adding a dropdown menu
- Preparing your photos and thumbnails
- Adding jQuery to your project
- Adding a lightbox preview for your photos
- Making the layout responsive
Skill Level Intermediate
Q: The files for this exercise are not complete. For example the index.html file is empty. Would you please provide the complete files?
A: These are the starter files. They ensure you're working with properly set-up HTML and CSS files. This is explained in the "About the exercise files" movie. The author then shows you how to build the entire gallery with these setup files.