O'Reilly logo

Inkscape 0.48 Illustrator's Cookbook by Mihaela Jurković, Rigel Di Scala

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a web page mockup

In this recipe we will create a simple a web page mockup using the 960 Grid System with the help of the template we created in the previous recipe and the button design from the CSS sliding doors recipe.

How to do it...

The following steps will demonstrate a web page mockup:

  1. Open the 960GridTemplate.svg accompanying this chapter and save it under a different name (Shift + Ctrl + S). Grids and guides should already be enabled.
  2. Select the Rectangle tool (F4 or R) and create a 960x5 px rectangle at the top of the page. Zoom in on the right edge so it's easier to snap to the invisible grid, check the H: box on the toolbar to make sure you have the correct height. Set its fill to #8b5c3d and remove stroke.
  3. Create another rectangle ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required