Adobe XD CC Tutorial

Splash Screen

In our last article, we learned about How to create a Logo using Adobe XD? In this article, we are going to create Splash Screen for our APP. Following is the final image of what we are going to create in this article.

In our Splash Screen, we have following items

  • Background Image
  • Logo in the Center
  • Message: Slogan or Special Message
  • Skip Button: It will redirect the user to Home Screen.
  • Sign Up Button: It will redirect the user to Sing Up Screen.
  • Sign In Button: It will redirect the user to Login Screen.

Now let's start with Logo first. We created the logo in the last article. We are going to use the last article Adobe XD document for this article. Following is the download URL for the last Adobe XD document.

FileTypeSizeDownload
Dealsatoxyz_Logo.xdNA269321Login to Download

Download the above document and open it in Adobe XD. In our document, we only have one Artboard. Let's create a new document for this press "A" from your keyboard. It will change the mouse cursor. Select the position where you want to create a new Artboard.

Now it's time to rename the Artboard name. For this double click on Artboard name and then type "Splash Screen".

Now copy the Logo from the first Artboard. Now we need to place Logo in the center of the Artboard. For this place, your logo anywhere on the Artboard then from the Property panel select Align Middle and Align Center. If you want to resize your logo feal free to resize it.

Now we have other options. Following image shows all the options.

  1. Align Top: If a single element is selected then align selected element on the top edge of the artboard. In case of multiple selected element align all the element on the top edge of the selection.
  2. Align Middle: If a single element is selected then align selected element on the vertical center of the artboard. In case of multiple selected element align all the element on vertical center of the selection.
  3. Align Bottom: If a single element is selected then align selected element on the bottom edge of the artboard. In case of multiple selected element align all the element on the bottom edge of the selection.
  4. Align Left: If a single element is selected then align selected element on the left edge of the artboard. In case of multiple selected element align all the element on the left edge of the selection.
  5. Align Center: If a single element is selected then align selected element on the horizontally center of the artboard. In case of multiple selected element align all the element on horizontally center of the selection.
  6. Align Right: If a single element is selected then align selected element on the right edge of the artboard. In case of multiple selected element align all the element on the right edge of the selection.
  7. Distribute Vertically: Distribute multiple elements Vertically with equal space.
  8. Distribute Horizontally: Distribute multiple elements Horizontally with equal space.

Ok, this all about Alignment and distribution of elements on the Artboard.

Now we need to create a "Skip" Button. For this select rectangle tool. Press "R" from the keyboard. Draw a rectangle equals the width of the artboard. Similarly, create two more rectangles for Sign Up and Sign In. Define color and border for your buttons as per your requirement. Arrange it as per the following image. You can select a different arrangement also.

Now we need to add text for each button. For this select text tools and text at the center for each button. If you are not happy with the arrangement of text and button then select the button and text and align it using  Align Middle and Align Center option. Ensure you selected both button and text. Following image shows the final arrangement for Buttons and text.

Now we need to add a background image. For this, we are using a free image from FreePik.com. Download 
Shopping bag mockup with stylish woman Free Psd from freepik.com
. It is a PSD file. Extract the image and edit it as per your requirement. Drag and drop the image on the artboard and arrange it. Following image shows the final version of our Splash Screen. Ensure your background image at the back for this you can right click on the image and select send to back option (Command + Shift + [). For this image, you may need to resize your logo so it can visible on the shopping bag.

If you want to use blur for your image then you can select object blur from the property panel. Refer the following image.

But for this image, it looks good without blur. Because our main intention is to display our app logo on the shopping bag. So we are not going to use blur on this image. Our splash screen is ready this How you can create a simple splash screen using Adobe XD. Following is the download link for Adobe XD document for this article.

FileTypeSizeDownload
Dealsatoxyz_Splash_Screen.xdNA886951Login to Download

In our next article we are going to learn about How to create a Login Page for our app using Adobe XD?

...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add