Support Center

Photoshop Tips: Homescreens

Last Updated: Aug 30, 2017 04:34PM PDT
Making home screens is a breeze in Photoshop! The home screen is the first thing users will see after the application is opened, so it's very important so make sure it's high quality and professional.

1. First in Photoshop create a new image.

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're 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 would like.

For example, below I want to take their logo and one of their images as well to incorporate within their homescreen.

3. Using screen capture on Mac (command+shift+4) or PC (CTRL+ALT+PRNTSCRN) I took the two images I want to use for my Home Screen.

4. Now drag the image or images you want used 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'll 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. After you're happy with the way your Home Screen 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!

Contact Us
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found