TECHNICAL SUPPORT | Creating a Mockup

  1. Create a new document in Photoshop or Illustrator. Go to File > New

    • Set the following settings:

      Size: 800x600

      Resolution: 72 pixels/inch

      Mode: RGB

      Contents: Transparent

  2. Open your layers palette. Go to Window > Layers.
    • Make separate layers for different parts of your design grid:

      Background

      Logo/Site Title

      Page Headers

      Section Headers

      Link Headers

      Text

  3. Turn on your Rulers. Go to Window > Rulers
    • Use guides to define the sections of your design grid.

      Click on the Move Tool in the Tool palette and drag a horizontal and vertical guide from each ruler

  4. Use the Photoshop or Illustrator tools to create the mockup to show the client exactly how you imagine the final web page will look. Specify logo, color scheme, fonts and positioning.

  5. Once you have finalized the your mockup you are ready to optimize your images. Save the original in case you need to come back and make corrections.

  6. Save another copy called mydocument_slices.psd.

  7. If you are working from Illustrator make sure your layers are organized and choose File > Export to save as a Photoshop Document.

>> NEXT Slicing and Optimizing