This chapter is from the book
This chapter is from the book
This chapter is from the book
Beginning the Layout
Now that you have a grid and the browser chrome in place, you can start putting together the design of the screen. In this chapter, you’ll begin by putting in the main structural divisions for the UI as well as the basic typography.
First, you’ll create the sidebar area. This will hold the logo, main navigation, and social features for the app:
- Draw a rectangle on the left side of the artboard. If the object has a stroke, remove it and set the fill to #2d2d2d.
- With the rectangle selected, use the width and height fields in the Control panel to make the rectangle 267 px wide and 674 px tall. Place it at the far left of the artboard and under the browser chrome (4.29).
4.29. First, draw the sidebar.
- Within the sidebar, draw a 49 px wide by 49 px tall square and give it a black fill and no stroke. This will act as the thumbnail image for a Suggested Friends feature.
- Draw another rectangle that starts under the chrome and just to the right of the sidebar. It should be 38 pixels tall and the width of the remaining area. Set the fill of this rectangle #000000 (4.30). This will be the section navigation bar.
4.30. Then draw the section navigation bar.
- Draw a rectangle that fills the remaining space in the artboard. Give it it a color of #e6e6e6 (4.31). This will be the main content area.
4.31. Finish up by drawing the content area background.
- Press
S/Ctrl+S to save your work.
)
)
)
Lining Up Strokes
Filled objects are easy to line up on the grid, but objects with strokes pose a problem. When using strokes on objects, Illustrator places the stroke across the line segment. This means that a one-pixel stroke will cover half a pixel on each side of the line segment. Using pixel alignment on the object will prevent the stroke from looking fuzzy in Pixel Preview mode, but the fact that the stroke is placed over the line segment isn’t accurate to how the object will render in a browser.
In HTML/CSS, the browser box model renders all borders on the outside of the object. To stay true to this rendering, you’ll want to have your strokes in Illustrator do the same thing so that you have accurate measurements for development. To demonstrate how to do this, you’ll create the picture frame for the car photos in the mockup.
- Draw a 142 px x 142 px rectangle in the content area of the mockup and give it a white fill and a 4 px black stroke.
If you zoom in, you’ll notice how the line segment sits smack dab in the middle of the stroke (4.32).
4.32. Strokes are centered over line segments by default.
- Select the rectangle and click the Stroke link in the Control panel (4.33).
4.33. Click the link in the Control panel to conveniently access the Stroke panel.
- Click Align Stroke to Outside (4.34).
){kind=link}
){kind=link}
){kind=link}
4.34. The Align Stroke to Outside button
Now the rectangle looks the way it’s supposed to, with the stroke outside the object (4.35).
){kind=link}
4.35. The stroke aligned to the outside of the segment
Things work a little differently with open objects and rules. Aligning a stroke to the inside or outside is not enabled for these objects. Because you have pixel alignment enabled, the stroke will automatically move tho the nearest pixel to keep from getting fuzzy-stroke syndrome:
- Select the Line Segment tool
(\) and draw a 223 pixel-wide horizontal rule in the sidebar. Remove the fill and give it a 1 px stroke, with the color set to #1d1d1d.
This stroke will be used as a dividing line between sections in the sidebar.
- Turn on Pixel Preview mode by selecting View Pixel Preview (
Y/Ctrl+Alt+Y). - Zoom in to view how the stroke automatically adjusts to stay on the pixel grid (4.36).
4.36. Pixel alignment automatically adjusts strokes to fit on the pixel grid. (The background color has been hidden so that you can more easily see what ‘s happening.)
- Press S/Ctrl+S to save your work.
){kind=link}