Designing a mobile application in Photoshop

What you create

Thanks to the material design – a visual language developed by Google, it has become much easier to create an Android application interface. After spending a few minutes reading its specification, which is updated from time to time, you can start developing Android applications that conform to traditional styles for the newest Android versions, including Marshmallow and Nougat. Moreover, to help you save time and effort, Google has released special stickers for applications in the style of material design.

Stickers

Source materials:

  • A set of stickers
  • Roboto font
  • Icons
  • The color palette of material design

Why use stickers?

User interfaces that conform to the material design specifications are for the most part composed of simple shapes, pure colors, and a small amount of shadows. Consequently, unlike the squamorphic user interfaces (translator’s note: squamomorphism – imitation in the digital space of the appearance of real objects), they are not much different from each other. In fact, besides their colors, sizes and heights, user interface widgets look the same in almost all applications in the material design style. Stickers contain images of these widgets and, using them, you can effectively practice the drag and drop method in the user interface design.

Drag and drop in interface design

Although in this tutorial we will use Adobe Photoshop, it is worth noting that stickers are available for Sketch, Adobe Illustrator and After Effects.

To complete the lesson you will need:

  • Adobe Photoshop CC
  • Latest version of material design stickers for Photoshop

1. Open the stickers

Launch Photoshop and click File> Open … (File> Open …), to open the file you downloaded with stickers. If the Roboto font is not already installed on your computer, Photoshop will offer you to either synchronize it with Adobe Typekit, or download it from another source (for example, Google Fonts).

If you are using Typekit, click Allow (Resolve Fonts) to continue. Of course, you must sign in to your Creative Cloud account for the synchronization to complete.

As soon as the file of stickers is opened, you will see that this is a very large document (its dimensions are 5688 × 6790 pixels) with many layers and groups of layers. I suggest you spend a few minutes studying the document.

2. Create global (common) elements

The status bar, navigation bar and application bar are often called global elements. Creating them first, we define the area in which the rest of the user interface widgets will be placed.

In the file of stickers, all global elements are present inside a group of layers called global elements (Global elements). It also contains global elements for mobile phones, tablets and desktops. But for now let’s focus only on the group MOBILE. While holding ALT, click on the eye icon next to the Mobile group name.

As you can see, the group of layers contains all the necessary elements, as well as several auxiliary elements that will help us correctly position the widgets of the user interface. Go to Layer> Duplicate group … (Layer> Duplicate Group …) to create a copy of it in the new MyMaterialApp document.

In this tutorial, we create a user interface for an Android application that calculates calories consumed. Therefore, in the new document, expand the App Bar layer group and use the tool “Horizontal text” (Horizontal Type Tool) (T) to change the name of the application to “Calories”.

In addition, our design will have a diagram in the application bar area. To make room for it, select the “key shadow” and “ambient shadow” layers, click Ctrl + T (Free transform) and make them 250 pixels high. Remember to save your changes by pressing Enter.

3. Add a list

Return to the document tab with stickers and find the LISTS layer group. It has eight different types of lists. We will, however, use only the seventh type. Therefore, select the layer group named List7 and go to Layer> Duplicate group … (Layer> Duplicate Group …) to copy it into a MyMaterialApp document.

On the MyMaterialApp tab, make sure that the List7 layer is located directly below the App bar. If so, you will see that the guides and the contents of the list are perfectly aligned.

It is always better to give your groups of layers meaningful names. Therefore, rename the List7 group to “Product List”.

4. Change the list item names.

Let’s now change the list so that it displays the names of the dishes along with their portion sizes. This is done simply. Select the desired layers and use the tool “Horizontal text” (Horizontal Type Tool) (T) to change their contents. I suggest you also change the font weight for the names of the dishes on “Fatty” (Bold).

An app for calorie counting would not be so helpful if it did not display calories. However, there is no more room for text on our list. Therefore, remove the “square” layers from the list_01, list_02, and list_03 layer groups.

Now you can use the tool “Horizontal text” (Horizontal Type Tool) (T) to add layers that display calories. Set the font size of the layers to 24 px, Roboto Regular font and color # 333333.

5. Add icons in the style of material design

We can make our user interface more attractive by adding icons in the style of material design. So let’s load three icons for the three list items of our interface.

Open the Material Icons page and select the first icon called local pizza (The easiest way is to type in the name in the search bar). A blue line will appear at the bottom of the page, you need to change the size to 36 dp and click the JPGS button to download the zip-archive with the icon.

Unpack the archive and in the android / drawable-mdpi folder, find the desired image. Drag it to the MyMaterialApp tab in the Photoshop window.

Repeat the same steps for the local cafe and local dining icons.

Now we can replace the “circle” layers in the list items with icons. Let’s start with the pizza icon. Select its layer and the circle layer, which is inside the list_01 layer group. Go to menu “Layer> Align> Vertical Centers” (Layer> Align> Vertical Centers) to align them vertically. Similarly go to menu “Layer> Align> Horizontal Centers” (Layer> Align> Horizontal Centers) to align their centers horizontally.

Now you can delete the “circle” layer in the list_01 group.

Repeat the same steps for the two remaining icons.

6. Add color

Let’s add colors now, since user interfaces in the style of material design are usually bright and colorful.

Select the layer named “ic_local_pizza_black_36dp”, right click on it and select “Overlay Settings” (Blending Options). In the dialog box that opens, go to “Overlay color” (Color Overlay) and set the color to # ffc107, which in the following will be called “Amber 500” (Amber 500) on the color palette of the material design.

Repeat the same actions for the layers with the names “ic_local_cafe_black_36dp” and “ic_local_dining_black_36dp”. Be sure to choose a different color each time.

Let’s now color the global elements. To change the background color, select the layer “Background” (Background), press “A” to select a rectangle inside it, and change the fill color to white.

To change the color of the status bar, open the layer group “Status bar” (Status bar), select the layer named “bar”, press “A” and change the fill color to red 900 (Red 900), the hexadecimal value of which is # b71c1c.

Similarly, to change the color of the application bar, open the layer group “Application Panel” (App bar) select the “key shadow” layer, press “A” and set the fill color to Red 500 or # f44336.

7. Add floating action buttons

The floating action button is one of the most important material design user interface widgets. To copy it into our design, duplicate the layer group. “Floating action button” (Floating Action Button) from a sticker document. If you find it difficult to search, find it in the “METRICS AND KEYLINES” layer group.

Place the “Floating Action Button” layer group above the “Product List” layer group.

Then using the tool “Moving” (Move Tool) (V), place the floating action button in the lower right corner of the user interface.

The floating action button should be an accent color (complementing the main ones). Therefore, select the “key shadow” layer within the current layer group, press “A” to select the circle inside it, and change the fill color to Red Accent 700 (Red Accent 700) or # d50000.

Similarly, change the color of the “ic_add” layer, which contains the plus symbol, to white. Also open it Overlay options (Blending Options) and change Opacity (Opacity) at 100%.

8. Crop document

You may have noticed that our document was very large, and the project takes only a small part in it. To resize a document so that it fits the design size, click “Image> Trimming” (Image> Trim). In the dialog box that appears, leave the default values ​​and click OK.

9. Add a chart

As I mentioned earlier, the application area in our user interface will have a diagram. Since there are no stickers for graphics in the Stickers file, we will have to create it manually.

Let’s start with the inclusion of the grid. To do this, go to the menu View> Show> Grid (View> Show> Grid).

Press Shift + Ctrl + N to create a new layer inside the “App bar” layer group, and use the tool “Pencil” (Pencil Tool) (B) to draw four horizontal lines, white and 1 pixel thick below the application name.

Using the tool “Horizontal text” (Horizontal Type Tool) (T), add three dates below the last horizontal line. Date font size is 13 pixels.

Now you can turn off the grid by clicking again View> Show> Grid (View> Show> Grid).

Select all the layers created in this step and press Ctrl + G to create a new group of layers for them. Name the group “Diagram“(Chart).

Then, inside the layer group “Chart”, create a new layer and name it “Data”. Draw a closed loop inside the layer with the tool “Pen” (Pen Tool) (P). The shape of the contour is not very important if it looks like a smooth curve.

To fill the outline with foreground color, go to the panel “Contours” (Paths), right click on “Work path” (Work Path) and select “Contour Fill …” (Fill path). In the dialog that opens, leave the default values ​​and click OK.

To prevent the diagram from looking so annoying, reduce the opacity of the layer group “Diagram” to 75%.

Finally use the tool “Horizontal text” (Horizontal Type Tool) (T) to display the total calories consumed below the graph. Let the font size of the digits be 24 px, and the font size of the words – 14px.

Our design is finished. Go ahead and hide the “Guides” layer group, we will not need it anymore.

10. Create a device cover

The design of the user interface in the cover of the device (smartphone or tablet) and with the addition of glare looks more professional and realistic. Although you can use Photoshop for this, it’s much easier to use the Google Device Art Generator.

First export your design to a jpg file by clicking on the menu “File> Save As” (File> Save As).

Now drag the JPG file onto any of the devices you see in the Device art generator. Notice that you need to scale the image to at least 1080? 1920 pixels to use the cover of the latest devices.

Once the image is generated, you can drag it to any folder on your computer to save.

Conclusion

In this tutorial, you learned how to use Google material design stickers and Photoshop to create an Android app design. Feel free to add more widgets to it, change their colors and experiment with the layout.

I would also like to remind you that the Material Design specification is just a set of recommendations. It is not necessary to strictly adhere to it, as long as the end result is logical and intuitive.

To learn more about the design of applications for Android, as well as find more design resources, you can visit the Google Design site.

Like this post? Please share to your friends: