How To Create A Mobile Sign Up Screen In Adobe Photoshop

of 05

How To Create A Mobile Sign Up Screen In Adobe Photoshop

image shows the completed project.
Photoshop is increasingly becoming a protyping tool for mobile projects.

More and more graphic designers are finding themselves being asked to create screens for mobile applications. Though the process may appear to be rather complex, it isn’t. If you have Photoshop, Illustrator and a browser you have all the tools needed to complete this project. The only thing you will need to supply is an image.

In this “How To” I am going to create a sign up screen for a tour of Beijing, China. The assets needed aren’t complicated:

In this first part of the series, we are going to prepare the screen in Photoshop and add a background image.

Let’s get started.

of 05

How To Create A Mobile Document in Photoshop

image shows the placement of the guides and the New Document dialog box .
The process starts with a new document and the placement of guides on the page.

Though Adobe offers a lot of options in Filer>New>Document Type>Mobile App Design they are all aimed at High Resolution screens. The plan here is to simply create a screen that is normal resolution. That means the width and height of the screen will use these settings when the New Document dialog box opens:

  • Name: Sign Up
  • Width: 360 pixels
  • Height: 640 pixels
  • Resolution: 72 Pxels/Inch.

The reason the presets are so wide is because they accommodate the the width of the devices based on the number pixels along the width of the device’s viewport. I have decided to go with a low resolution Android device.

Next , select the Zoom tool and zoom out to full magnification. Select View>Rulers to turn on the Rulers We will need to place vertical guides for the placement of the content. Add guides at 16, 32, 72, 328 and 344. When finished turn off the rulers and double click the Magnifying Glass to zoom out to 100 percent view.

These guides will allow us to accurately place the content on the screen.

of 05

How To Prepare The Background Image In Adobe Photoshop

The Camera Raw Filter dialog box is open and shows the setting resulting from clicking the Auto button.
Camera Raw isn't just for RAW images. It can be used to adjust .jpg images as well.

The image I decide to use is a detail from an urn found in the Forbidden City. The first thing I did was to convert it to a Smart Object and to select Filter>Lens Correction to remove the distortion introduced by the camera lens.

With that done, I selected Filter> Camera Raw Filter to do some color correction. When the Camera Raw dialog box opened I clicked the Auto button. This is a great first step because it starts the process by bringing the image back to a somewhat neutral state. Seeing as how I am eventually going to be applying a colored gradient, I wasn’t too concerned with accuracy. The major change was to increase the Clarity to bring up the detail.

Next I clicked the Filters button and increased the value of the Dehaze slider to bring up a bit more detail. I clicked OK to accept the changes and close the Camera Raw Dialog Box.

of 05

How To Add And Manipulate The Background Image In The Sign In Screen

The Gradient Overlay has been created and the properties, Colour Picker and Gradient panels are open.
You can "tone doewn" a strong image by placing a gradient over the image.

With the image corrected, I selected the Move Tool and dragged the image to the SignUp file created earlier. Obviously the image is massive. To fix that I zoomed out, selected Edit>Transform and scaled the image to fit the canvas.

The image is a bit strong and is more for “decorative purposes than anything else. I decided it needed to to function as more of a base for the text on the screen which meant I needed to tone it down. I decided to cover it with a coloured gradient that allowed the image to show through but no overpower the text.

The first thing I did was to create a black shape the size of the image and to convert that shape to a Clipping Mask. By doing this I could create a larger gradient and move it around over the image while keeping the gradient within the boundaries of the canvas.

To create the gradient I selected the Rectangle Tool and drew a rectangle over the canvas.  With the rectangle selected I opened the Properties Panel and clicked the Gradient chip. To change the colours in the gradient, I clicked the ramp which opened the Gradient Editor.

I changed the Black crayon colour to #514A9D (Purple) and the White crayon colour to #24C6DC (Aquamarine).

I accepted the changes by clicking OK and returned to the Properties Panel. The final step was to change the Gradient angle to 117 degrees. With the gradient created, I next selected the layer and reduced its Opacity to 80% in the Layers panel.

of 05

How To Add The Logo To The Sign In Screen

The logo from Illustrator has been added and the Paste Dialog box shows the Smart Object selection.
Copying and pasting Illustrator Objects into Photoshop is easy and your choice is always Smart Object.

I decided to use the Chinese characters for the word “Beijing” as the logo. The first step was to do a Google Search for the characters, identify the the one that appealed to me and to download it to my computer. From there I opened the image in Illustrator and traced the characters. When finished, I selected the characters and copied them to my clipboard.

I then returned to Photoshop, selected the Ellipse Tool and drew out a circle that was 150 x 150 pixels in diameter. Using the Properties Panel I then filled the shape with white. I moved the circle to its final position on the canvas and, in the Layers Panel, reduced its Opacity to 25%. The next step was to paste the logo on the clipboard into the screen. When I selected Paste (Cmd/Control-V) Photoshop recognizes this is Illustrator content and opens the Paste dialog box.  

Your choice needs to be Smart Object. By selecting this option, you retain the link back to Illustrator and , if needed, you can edit the graphic in Illustrator, save it and those changes will be instantly reflected in Photoshop.

At this stage of the process it would be a good idea to group the layers and to save the .psd.

In the next part of this series, we’ll finish up the project. See you there.

mla apa chicago
Your Citation
Green, Tom. "How To Create A Mobile Sign Up Screen In Adobe Photoshop." ThoughtCo, Jan. 21, 2016, Green, Tom. (2016, January 21). How To Create A Mobile Sign Up Screen In Adobe Photoshop. Retrieved from Green, Tom. "How To Create A Mobile Sign Up Screen In Adobe Photoshop." ThoughtCo. (accessed December 15, 2017).