Join Chris Converse for an in-depth discussion in this video Save For Web & Devices in Photoshop, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
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…
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links