O'Reilly logo

Creating Flat Design Websites by Antonio Pratas

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

Designing in Photoshop

Now that we have our sections defined and our global layout drawn out, we're ready to start creating our final pixels. So, open your Photoshop, and let's get down to business and execute the following steps:

  1. Create a new document that is 1200 px wide and 2000 px high and has a white background. This will be the canvas with our full-length website design.
  2. Let's start by creating our header. We'll need to use an avatar for our face, so while you can use your own avatar, I'll grab one from http://uifaces.com/, where you can find several avatars of real users to use in your design mockups.
  3. Let's create a shape that will serve as our header background with the rectangle tool. You can set the color of the shape to gray, as we will ...

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