Viewers: in countries Watching now:
Download a copy of the finished web site here.
Now in the exercise files let's open the preview_sizes.psd. Now, what I've decided to do here is to take each photograph one by one and custom crop each one of these photographs so that I get the optimal preview image. If I open up the refraction_fullsize. jepg, this is the size of the large file we're going to load into the lightbox. And instead of using automated tools like tools found in Photoshop or Bridge or Lightroom that will automatically resize a series of images, I want to spend the time and custom crop to get exactly the look that I want from taking this horizontal picture into a square picture we're going to use for our preview.
So I've created these two Photoshop files with all of the layers labeled exactly the same file names as the full-size images that we just moved over from the full-size graphics in the exercise files. So what I want to do here is export from this Photoshop file out to a series of files. So what I'm going to do first, on the desktop, I'm going to click right here and create a new folder just called temp. Let me open that up, and I just want to place that I can save all of these files.
Let's come back to Photoshop. Let's go to the File menu. Let's come down to Scripts > Export Layers to Files. In this dialog box here, I'm going to choose Browse > Desktop > temp folder. Let's choose Open. We'll keep JPEG, 8 Quality, and I want to make sure prefix here set to blank, and I'm going to choose Run. As Photoshop is running through all the layers and saving them out, I can see in the background all the files getting generated. Now, one of the things that I can't control is Photoshop is going to name every one of the files with an underscore plus a number in addition to the name of the layer.
So we're going to use Bridge to get rid of all of this as well using the batch- rename process again. So on the desktop, I'm going to grab temp. Let's drag it into Bridge. In the Content area, I'll select the first photo, choose Edit > Select All. In Tools, we'll choose Batch Rename. Now this is going to be a little bit trickier because down here in the Preview I can see that every one of those files has additional content.
So in addition to adding an extension of _preview before the .jpg, I also want to remove these numbers. But each one of these numbers are unique. So what we're going to do is use some grep search and replace inside of here as well. So to start, let's come up here to Filename. Let's come down and choose Current Filename, set this to Name. I'm going to get rid of two of these parameters for the moment. Under Date and Time, let's come down and choose String Substitution.
I am going to come in here and choose Intermediate Filename, which means it's going to not append this to the additional file name, but concatenate the two together. And again, I can see a live preview down here of how my equation up here is actually going to rename the file. So under Find text, I'm going to put two square brackets and inside of here, I'm going to type 0-9, and this is going to be a grep expression, a regular expression. So I'm going to click on the Regular Expression check box, and notice that now all of the numbers went away.
If I turn on Replace All, it will only replace one. Turn on Replace All gets rid of all of him. And up here after the 9, I'm going to put a comma and an underscore. So basically what this is saying is through grep, Bridge is going to find every instance of a number between 0-9 and any instance of an underscore, and it's going to replace it with blank text. It's going to do that for every piece of data that it finds and matches this in the file name with Replace All selected, and the check box Use Regular Expression will go through.
So now I can see that my file name is now just the word refraction.jpg. Let's add one more parameter under Text. And at the end, we're going to add preview. Let's choose Preview at the top to make sure that all my file names will be renamed correctly. So _000_refraction becomes refraction_preview.jpg. Let's click OK. Now let's come up here and hit Rename. Bridge is going to run this rename.
Let's come out here, and we can see that all of the files have now been renamed with 'preview' in there. Let's bring up our myGallery project. Let's grab all of these files from the temp directory and we'll drag and drop them right into the photos directory. So now we have all of our full-size and preview images. I'll leave this temp directory here. Let's close this window in Bridge. Let's close our preview_sizes.psd in Photoshop.
And let's open thumbnail_sizes in Photoshop. Same process, I've named all of these layers exactly the same names. Let's choose File > Scripts > Layers to Files. Browse > temp directory. Click OK. Hit Run. Let's choose OK. There is our temp directory. Let's grab the temp directory.
Let's drag this into Bridge, select the first one in Content, Select All, Tools > Batch Rename. Bridge is going to remember the last settings we had. And instead of _preview, this will be _thumbnail. Click Rename. Go back to Bridge. These have all been renamed. Let's close Bridge.
Let's select all of these. Let's drag these into our myGallery project in the photos directory. Let's close temp. Throw that in the trash. Let me double-click on the photos directory just to see that by itself, and I see there's 60 items in here: 20 pictures for our gallery, including three different states of each one. Let's close the photos. Let's come back to Photoshop. Let's close thumbnail_sizes. Now at this point, we're done preparing all of our photography, so let's move into HTML and CSS.
Find answers to the most frequently asked questions about Create an Interactive Photo Gallery with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
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.