So the first graphics we're going to make for this project that is going to be for the
actual web app itself. Let's come over to Art templates folder and let's open up icon.psd.
So here we have a Photoshop file which is sized to 72 x 72 pixels. In the HTML in the
next movie, we'll actually at a precomposed flag, so that Apple won't add a reflection
over top of this graphic. But Apple will add the rounded corners when we have to set the
home screen. So all we have to do is worry about having a canvas size of 72 x 72. So
with that in place, let's come up to the File menu. Let's choose Save for web. In the upper
right-hand corner, let's choose 24-bit PNG. Let's come down and click Save. So from the
Desktop, we're going to choose mywebappassets. Let's come into the images directory and we
are going to save this into the template folder, then click Save. Let's close this file, and
let's come back to the exercise files. Let's open startup.psd. So in this file we have
two orientations for our startup screen. You'll notice that they are each set up in a portrait
view. To get to the Slicing tool, let's come under the Crop tool. Let's come down and click
Slice. Now I can hold the Command or Ctrl key, double-click on an individual slice to
see the settings. So notice that the portrait view here uses 768 x 1004. The actual iPad
screen is 1024 x 768, so on this height here we need to subtract 20 pixels for the status
bar across the top. If I come over here and select the right slice, this is the landscape.
Notice this is set to 748 instead of 768, again for the 20 pixels of the status bar
across the top, and 1024 for the height. However, as I mentioned before, both of these are sort
of in a portrait view. And this is the screen that's going to show up, as we looked at in
the introduction video, when we load the web app and the iPad is going and getting all
of the content from the web server. So to save out these individual slices, let's come
down to File > Save for Web and zoom out here in the main window. Each one of these slices,
as I select them, are set to say about as a JPEG file. Let's come down to the File menu.
Choose Save. Under Slices, let's choose All User Slices, make sure where the template
folder, and then hit Save. Then we can close our Photoshop file. Back in our project folder,
let's open up Images. Let's come into template, and we'll see the icon file and the two individual
startup items. Now that we have the graphics created for the web app, in the next movie
we'll add some HTML to make use of these graphics.
