Start a conversation

Photoshop Tips: Homescreens

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. 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.

      Screen_Shot_2019-08-15_at_4.44.27_PM.png

    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!

Tip:  If the file size appears too big, above 300kb, then try dropping the dpi whilst retaining the dimensions.  Go to the main menu> image > image size and amend both dpi and image to get both the best-optimised file size, whilst retaining the same dimensions. 

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Support

  2. Posted
  3. Updated

Comments