Welcome back to the series boys and girls. In this video, we'll take a look on how to design the ticket screen. As we mentioned before, the ticket screen is a place where the user can see his purchase tickets. Think of it as a special kind of what does exist on your phone. Now, let's talk the design of the actual ticket. We're going to make sure that we are authentic.

So we're going to design the virtual ticket to resemble a real time one, we're going to use the same data from our party. The ticket has been purchased for such as the name of the DJ, the venue, the ticket price, and when we would start Finally, we're going to use a barcode for ticket. The barcode is required in order for people at the door using special kind of barcode readers to authenticate the ticket. We're going to use an online tool to generate the barcode simply google up free barcode generator and click The first or the second without query. There, you can generate the barcode image, and you can download it as a PNG file. Furthermore, I will provide a barcode image in the assets panel.

Now, as usual, enough talking and let's get down to business. Firstly, do usual drill, create a background using our rectangle tool and our favorite color. Select the rectangle tool, make a full width and full height rectangle, rename it BG for background, move it down our layer stack, change its color to 07123. Now, since the ticket screen is an inner screen in our application, we need to provide the user a way to navigate back. Now, if you recall from our previous lesson regarding the single party screen, we've added a back button to our header component. Go to the Hello component systems and click off the eyeballs of everything Except the Back button and the title, change the title to my tickets or my wallet if you prefer it that way.

Okay, let's design the actual ticket now. Grab the rectangle tool again and click once. change the background color to white. Change the width to 345 pixels and the height to 465 pixels. center this up and change the corner of these four pixels. Now, in our assets panel, we have the same image we've been using for our background in the single party screen.

Select it and move it over to our canvas. Make sure it's the same width as the rectangle. And for the height, we're going to use half the height of the rectangle. To do it, select it and type in 465 pixels. divided by two in our input field over here, we can create a mathematical equations to automatically calculate the height of the image. Okay, now let's add corner radius to this image as well.

Click here to add in the pendant corners and typing for pixels in the first two inputs. This will add four pixels corner radius to the top left and to the top right corner, respectively. Now comes the fun part. Select the Ellipse Tool and click once with this chain link to constrain the proportions of the circle and type in 35 pixels for the width. Select the circle and place it to the edge of our ticket. You will see the red lines snap Okay, select the circle and copy it by holding ALT and dragging to the right.

Make sure that the copy snaps as well. Great. Now select both ellipses and group them together. Make sure you make a copy of them by pressing Ctrl C on your keyboard. Now, select both the rectangle and the circles by holding Shift and punching subtract selection. You see, this makes a ticket like rectangle, move the subtract below here and make sure that you base the previously copied circles.

Hit Ctrl V on your keyboard. Now, place this group above the image and select both the image and the circles and hit subtract selection again. Group everything together and rename this to get big. We know Have a real time to get over here. Now, let's place the data copied information from our single party screen and paste it onto our canvas. Make sure it's center aligned and moving 30 pixels from the top.

Now, everything is the same except this, the name of the DJ and the name of the venue are center aligned. The final thing to do to our ticket is to add the barcode more to our SS panel, select the barcode which I provided and place it onto our canvas. You can also as I've mentioned before, make your own barcode by going online and search for free barcode converters. Okay, final thing to do is to group everything together and call this ticket we can also make a component of To the ticket, so click Create components and move this out copy by holding ALT and dragging back to our canvas. Now, if you purchase more than one ticket, let's make a copy of it to be authentic. And that's it for today's lesson guys.

I will see you in the next video.