Hello again Ladies and gentlemen, welcome back to our series. In this video we'll design the video screen. Here, the user can see a short video sample representing a DJ or the selected party. If you remember from our previous video on how to design the single party screen, we've added a video thumbnail with a play button. When the user taps the thumbnail, he's redirected to the video screen. Now this screen acts as a full screen model.
Same as our calendar screen. The user can see the video and control the Video Timeline using a sidebar. As per usual, enough talking and let's get down to business. Open up your Rectangle tool and draw a rectangle that covers the entire screen. As usual, we need to BG for background and as usual, move it down our layer stack. Let's change the color of it to our favorite color which is 071923 As you can see, we have an instance of our header component that needs to change.
Click off the I have also the calendar icon, the ticket icon, the date, and the title, click on the eyeball of the close icon. When the user taps the close icon, the modal closes back to the single party screen. Now, move on to our assets panel, grab the image and move it over to our canvas. This is the same image that we've been using in our single party screen and it's going to represent our video. Make it full width and change its height to 265 pixels. Positioning to the center of the screen.
Excellent. The only thing left to design is the sidebar. Grab a rectangle tool, click once and make it 345 pixels in width and center it up. Make the height three pixels and change the color of it to 103448. This will represent the sidebars background duplicated by pressing Ctrl C and control V and change the color of it to white. This will be the sidebars to website.
Make it 75 pixels in width. Now, grab an ellipse tool and click once. Click the chain icon constrain the proportions of the circle and change the width to 25 pixels. This will automatically change the height to 25 pixels as well change the color of The circle wipe in place it to the edge of the elapsed time. This will be the seaports control, which the user can swipe, change the video Stein. Finally, open up your title and typing zero colon 16 slash one code 30.
Change the font to circular STD. The letter spacing to zero. The font size is 16 pixels, the font weight is meaning and the color is white places to the right edge somewhere below the sidebar. This number represents our elapsed time and the video length selected, select the ellipse and the rectangles and group them together. Rename this sheet bar to organize it better. And that's it.
Guys do not have our video screen design. I will see you in the next video.