Here is the Simple Example, Learn How to Creating the web App Graphics In Photoshop
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.
Creating the web application graphics
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.
Comments
Post a Comment