Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Exporting image slices from Photoshop


From:

Create an HTML5 Video Gallery with jQuery and Dreamweaver

with Chris Converse

Video: Exporting image slices from Photoshop

To start our project, let's create a new folder on the desktop called myVideoGallery. Let's open that up and then inside let's create two additional folders, one called images, one called includes. Now, with those in place, let's come back to the exercise files, let's go into Art Templates and let's open up template_items.psd. Now this Photoshop file has some slices already in place.
please wait ...
Watch the Online Video Course Create an HTML5 Video Gallery with jQuery and Dreamweaver
1h 10m Intermediate Jul 28, 2011

Viewers: in countries Watching now:

In this course, author Chris Converse develops an interactive video gallery for the web, working in a Dreamweaver environment using a combination of HTML5 with a Flash fallback, CSS, and the open-source JavaScript library jQuery. The course shows how to design the site layout and construct the code for a player that works on multiple web browsers, platforms, and mobile devices. Techniques to enable HTML5 video on Android and ensure that Internet Explorer defaults to Flash instead of HTML5 are also demonstrated.

Topics include:
  • Preparing the graphics
  • Adding and linking thumbnail buttons
  • Designing the layout
  • Adding jQuery and JavaScript
  • Including video information in the thumbnail links
  • Styling the thumbnails with CSS rules
  • Creating a DIV container to hold the video player code
  • Setting up click events for the thumbnails
  • Incorporating the FancyBox lightbox plug-in
Subjects:
Developer Web
Software:
Dreamweaver HTML jQuery
Author:
Chris Converse

Exporting image slices from Photoshop

To start our project, let's create a new folder on the desktop called myVideoGallery. Let's open that up and then inside let's create two additional folders, one called images, one called includes. Now, with those in place, let's come back to the exercise files, let's go into Art Templates and let's open up template_items.psd. Now this Photoshop file has some slices already in place. I am going to use my magnification tool here and just zoom up a little bit.

So we have three graphics we are going to export from here. Click on the Slice selection tool here. I can double-click on the first slice. This is going to be the play icon. The one over here in the center is going to be the ie_caption_transparency. Since IE 7 and 8 don't support the RGBA color specification from CSS3, we are going to have an alternate CSS file that's going to bring in this semi-transparent PNG file. So we can get a semi-transparent caption, as we saw in the introduction video, working in IE7 and 8. And then lastly we have this filmstrip graphic over here, this particular tile.

We have made sure to make sure that the masking in the top area here matches the masking at the very bottom. So as this graphic tiles, depending on the height of the overall player, we are going to get a seamless transition between the images tiling up and down and this is going to be called filmstrip_tile. Let's choose OK. At this point, let's choose File > Save for Web & Devices. In the upper left-hand corner here we see the Slice tool. I am going to select the first slice, hold the Shift key, select the other two slices. In the upper right-hand corner let's make sure we have PNG-24 as the Web graphic format and then lastly let's come down and choose File > Save.

Now on the desktop let's go into myVideoGallery/images. We will choose All User Slices down here in the Slices setting, then choose Save. We can see in the background the three different slices up now have been saved out: filmstrip_tile, ie_caption _transparency and play_icon. Let's come back to Photoshop. Let's close our file. So now let's close up our templates. We won't need to be going back into Photoshop for the rest of the course. And now that we have all of our graphics in place, in the next movie we are going to start by creating a brand-new HTML and CSS file and start building a layout based on these particular graphics.

There are currently no FAQs about Create an HTML5 Video Gallery with jQuery and Dreamweaver.

 
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

* Estimated file size

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 HTML5 Video Gallery with jQuery and Dreamweaver.

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


OK

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.