Overview

Making Homescreens is a breeze in Photoshop! The home screen is the first thing users will see after the application is opened; it is very important so make sure it is of high quality and professional.

In this article, you will learn some tips for creating your Homesceens with Photoshop.

Process

1. 1. First, create a new image in Photoshop.
      • For traditional layouts
        • iPhone 4: 640 x 920
        • Phone: 640 x 1096
        • Tablet: 1536 x 2048
      • For modern layouts
        • iPhone 4: 640 x 960
        • Phone: 640 x 1136
        • Tablet: 1546 x 2048
   2. Now go to the website you are looking to create an app for, or the image you would like to be used and either Save, Copy, or Screen Capture the image you like.
      For example, below you want to take their logo and one of their images as well to incorporate within the homescreen.

      

   3. Using screen capture on Mac (command+shift+4) or PC (CTRL+ALT+PRNTSCRN), take the images you want to use for your Home Screen.
   4. Now drag the image or images you want to use onto the image you created in Photoshop. Play with the sizing until you get it where you like and then “Place” the image!
      Remember to leave some space near the bottom if you plan on including the Call, Directions or Tell-a-Friend buttons!
   5. Now, you will want to fill in the white space on the bottom. This can be done in two easy steps.
      1. Create a new layer
      2. Use the draw shape tool to create a black filled rectangle on the newly created layer.
   6. When you are happy with the way your Homescreen looks, go to File > Save for Web Devices > Save. This will ensure you save it as a .png file!

That’s it! Now just upload it into the Appearance step!