Designing the App - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 102

The room link and the close button both use the standard form elements we've already designed, but the answer
button needs a bit of new design:

1. Using the rounded rectangle tool, draw a shape 72px square using the dark color, #1F1B0C.

Next, command + click on the shape in the Layers panel, which will draw a marquee
selection around the shape.

2. Choose the Rectangular Marquee tool and hold Alt; then click and drag on the left side

of the marquee, overlapping it from top to bottom by 12px. When you release the click,
the marquee should now be 60px wide by 72px tall, leaving the left side of the rectangle
unselected.

3. With the marquee still on the shape, make sure the shape layer is selected in the Layers

panel; then click the Add layer mask button at the bottom of the Layers panel (it is next to
the Layer Styles button) to create a mask. This gives the shape the appearance of having
the upper- and lower-right corners rounded, but the left side squared (see Figure 6-20 ).

Figure 6-20. From left-to-right, the rounded rectangle, a marquee selection around the rectangle,
12px deselected from the left-hand side, and the final masked shape

4. Apply the same drop shadow to this shape as to the submit buttons; then use the Custom

Shape tool with the check box selected to draw a check box in the light color, #FBF7E7,
centered on the dark shape. This gives you an answer button.

5. Position the room link and end this session buttons in the right-hand column, and the

presenter view is good to go (see Figure 6-21 ).