Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Save For Web & Devices in Photoshop

From: Create an Interactive Photo Gallery with jQuery and Dreamweaver

Video: Save For Web & Devices in Photoshop

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.

Save For Web & Devices in Photoshop

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.

Show transcript

This video is part of

Expand all | Collapse all
  1. 7m 51s
    1. Previewing the project across browsers and devices
      5m 32s
    2. About the exercise files
      2m 19s
  2. 9m 49s
    1. Renaming a series of files in Adobe Bridge
      3m 7s
    2. Using GREP for more intricate file renaming
      6m 42s
  3. 29m 5s
    1. Creating and linking HTML and CSS files
      1m 32s
    2. Save For Web & Devices in Photoshop
      7m 2s
    3. Creating empty CSS rules
      3m 55s
    4. Create, nest, and class DIV tags
      6m 0s
    5. Adding CSS properties for main container
      4m 0s
    6. Adding CSS properties for content area
      4m 28s
    7. Adding CSS properties for headings
      2m 8s
  4. 15m 55s
    1. Adding and linking the thumbnail images
      2m 32s
    2. Styling the thumbnail links with CSS
      5m 15s
    3. Downloading and adding jQuery to your project
      2m 42s
    4. Overriding the browser's default link behavior
      5m 26s
  5. 11m 10s
    1. Creating preview images from anchor links
      1m 52s
    2. Changing the preview when clicking thumbnails
      5m 59s
    3. Changing the caption when clicking thumbnails
      3m 19s
  6. 12m 0s
    1. Adding an image preload plug-in for jQuery
      2m 22s
    2. Setting a dissolve transition between previews
      4m 31s
    3. Implementing the preload functionality
      5m 7s
  7. 15m 20s
    1. Adding a lightbox plug-in for jQuery
      2m 2s
    2. Creating a custom function for lightbox properties
      7m 38s
    3. Setting links to activate the lightbox feature
      5m 40s
  8. 3m 40s
    1. Initializing the gallery on page load
      3m 40s
  9. 5m 11s
    1. Adding icons and styles to the zoom and contact links
      5m 11s
  10. 2m 41s
    1. Activating a gallery automatically in IE9 and IE10
      2m 41s
  11. 2m 43s
    1. Some ideas for further enhancements
      2m 43s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Interactive Photo Gallery with jQuery and Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.