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
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.
|Dealsatoxyz_Logo.xd||Login 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.
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.
|Dealsatoxyz_Splash_Screen.xd||Login to Download|
In our next article we are going to learn about How to create a Login Page for our app using Adobe XD?
Please login to post your valuable comments.