How To Add Google Icons To The Sign In Form In Adobe Photoshop

01
of 04

How To Add Google Icons To The Sign In Form

The icon sheet from Google is shown.
If you need an icon Google has a rather large selection for you to download.

In the previous installment, we created the base for the Sign In screen. With that out of the way we can now turn our attention to creating the form. It will be fairly simple. The user will be asked:

  • To enter his or her username
  • To enter his or her password
  • To click the “Sign In” Call To Action button

Also we need to be aware of a couple of user issues. For instance, we should have some sort of link to accommodate any users who may have forgotten their password. As well, new users should be able to create an account.

We are also going to need an icon for the user and another for the password. Let’s grab them.

Google has a rather nifty icon collection that you can use. In this case we are going to need a User Icon and a Lock icon. When you locate the icon, click on it it to select it. At the bottom of the page you will see a number of buttons. They are:

  • Size Pop Down: Select 36 dp. The ‘dp” means device pixels. In this case it means the icon will be 36 x 36 pixels in size regardless of the device.
  • Black/White icon colour: Essentially the icon’s fill colour is changed to one of these two. I selected white.
  • Format: You can choose between SVG, PNG or as an Icon Font. Seeing as how this is a page design, I selected SVG which means I can easily scale the icon if I need to.

When you choose your format the download will begin. To add the icon to your canvas, select File> Place Embedded. Navigate to where your icon is located, select it and click the Place button.

Locate a lock icon and repeat this process.

Finally move the icons to line up their left edges with the first guide on the left

02
of 04

How To Enter The Sign Up Screen Text

The text is shown on the canvas and the Character Panel is open.
The Roboto font is used in Material Design for Android devices and,best of all, it is free.

Seeing as how this screen is destined for an Android device lets follow the Material Design Specification for typography. The font to use is Roboto which is available here.

Select the Text Tool and enter the word “Username”. Use these settings:

  • Font: Roboto
  • Weight: Regular
  • Size; 16 pts.

Line the text up against the guide at the 72-pixel mark and align it with the User icon.

Switch to the Line Tool and draw a 1-pixel white line under the text and between the 72-pixel guide and the first guide on the right. Group this layer, name it UserName and, in the Layers panel duplicate this layer. When the dialog box opens change the Layer name to Password and align it with the Lock icon. Select the text and change it to Password.

Still in the password group, select the Text tool and enter Forgot password? Use these format settings:

  • Font: Roboto
  • Weight: Regular
  • Size: 12 pt

Move this text to align with end of the underline.

03
of 04

How To Create The Call To Action Button

The Sign In button is shown and the Properties Panel is showing the rectangle properties/
A Call To Action button should be noticeable, flat and simple.

The Call to Action button is rather simple. Once the user has entered his or her Username and Password, they tap this button to proceed.

To start select the Rounded Rectangle tool and draw out a shape. Open the Properties Panel and use these settings:

  • Width: 100px
  • Height: 36px
  • Fill Colour: #673AB7
  • Stroke: None
  • Corner Radius: 2px.

Select the Text tool and enter: Sign In. Use these format settings:

  • Font: Roboto Light
  • Size: 18 pts
  • Color: White

Center align the text and the shape, group them and name the group: SignIn. Select the group with the Move Tool and align them with the center of the canvas.

04
of 04

How To Create The Sign Up Button

The Sign Up button is shown and the Properties Panel shows the rectangle's properties.
The final part of the project is creating the Sign Up button.

The final part of the project lets new users create an account. All we will need is a rectangle and some text.

Select the Rectangle Tool and draw out a rectangle the width of the canvas. Open the Properties Panel and use these settings:

  • Width: 360 px.
  • Height: 60 px
  • Fil Colour: #D1C4E9
  • Stroke: None.

Move the rectangle to the bottom of the canvas and select the Text Tool. Enter the following text: Don’t have an account? Sign Up!

Select the first sentence of the phrase and use these settings:

  • Font: Roboto Regular
  • Weight: Regular
  • Size: 16 pt
  • Colour: Black

Select the second sentence and use these settings:

  • Font: Roboto Medium
  • Weight: Medium
  • Size: 16 pt
  • Colour: Black

Move the text over the rectangle and Align it to the rectangle’s Horizontal and Vertical Centers.

At this point the project is complete and you can save the .psd.