Join Chris Converse for an in-depth discussion in this video Saving web graphics from Photoshop, part of Create an Interactive Animated Timeline with jQuery.
To begin our project, let's create a folder on the desktop called my timeline. I'll open this up, I'm going to move this over to the side here so you can see the progress as it's built. Inside of the my timeline folder, let's create a new folder called images. Next let's go to the exercise files, let's go into the starter files inside of folder one. Select the index.html file and the includes folder. And drag a copy of these into the mytimeline folder as well. So as I mentioned before, inside of the Includes folder, we have a timeline.js and a timeline.css and an index.html file out on the root.
File menu, choose Save For Web. From the Save For Web dialog box, if we select these slices you'll see that they're all set to PNG 24. Let's come down and choose Save. From this dialogue box under Slices, let's come down and choose All User Slices. For the file destination, let's choose my timeline. Let's click on the images directory we created and then hit Save. Now if we come back to the desktop, open up the images directory. We'll see all different artwork that we created slices out of inside of Photoshop are now individual PNG files. Let's come back to Photoshop, let's close, we'll save our changes. Back in the exercise files, let's open up PSD.
Now the idea behind this background graphic is on the left hand side, we have this blue or colder color. On the right hand side we have a warmer color. We have a circuit artwork on the left hand side and on the right hand side we have these icons. On the left hand side we're using the circuitry and a colder color to represent the more scientific or technical community that used the internet. And on the right hand side we have these icons in a warmer color showing the more cultural or human significance to the internet's had on people. So that's the idea on the background graphic.
To save this out, let's come up to the File menu. Let's choose Save For Web. We're going to save this out as a JPEG. Let's hit Save. We're going to save this to the my timeline images directory. Then hit Save. I'm going to close and save. And then back in the exercise files, let's open up background small. This is the background we're going to use for small screen devices. Let's choose File > Save For Web, we'll also save this site as a JPEG. We'll hit Save.
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features