Creating Main Menu UI Panel Part 2!

Objective: Finish the main menu panel.

In the previous tutorial we begin designing the main menu panel using the artboard as a reference. We created the logo and the background. We only have a few UI Elements let to create. We need a grey overlay and two buttons.

We set the icon to be 50% of the back ground meaning the gray overlay needs to take the other 50%

Create a new UI Image

Set the anchor to stretch. Set the rect transform to 0 except the top. The top needs to be half of 949.

Set your sprite as the source image.

We can now move on to the buttons. Create UI Button.

Use the provided sprite as the source image.

Set the anchor to stretch, zero out the rect transform, and select preserve aspect ratio.

position the button

Duplicate the button and position it lower.

Open the text object on the first button. Set the text “FIND CASE #”, set the adjust the font size and set the color to white.

The bottom button set the fond to “CREATE A CASE” and adjust the font size and color.

Now we finished our first panel. From here you save and create a new UI Panel and move on to the next one! I’ll see you in the next tutorial!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store