Photoshop Mockup to Dreamweaver Layout

Introduction:

This is it. This is your first website from conception to completion. It's going to be long, detailed, and fulfilling. The end product will be the same as ANY webpage you might make for a real company or business. The process of creation is exactly the same as any professional web designer.

The directions are almost entirely in video format. You will need to watch the videos and perform the task AS THE INSTRUCTOR performs them. You will start with nothing and slowly create a mockup of your website in Photoshop and then the final webpage in Dreamweaver. WARNING: The videos will ask you to open starter files or change your DreamWeaver site BUT, if you save your work and complete all your tasks, your work will carry over from video to video and you will not need the specified files.

Good luck and have fun. Remember, skip NOTHING. Do everything.

Part A- Planning Your Site

  1. Setting Up the H: drive & resource folder (video)
  2. Setting Up Photoshop (video)
    • Note: Open Photoshop before starting. Save the file you create in this lesson into your H: drive. You will use it in B1.
  3. Researching the Competition (video)
  4. Defining Site Goals (video)
  5. Gathering Content (video)

Part B- Creating a Photoshop Mockup

  1. Creating the Layout and navigation (video)
    • Note: Use the 960 × 690 PSD file you created in A1 for this lesson
  2. Working with Fonts and Colors (video)
    • Note: You can find the three color swatches in a file called Color_Swatches.psd. Right-click on the layer>Diplicate Group> Change "Destination" to your mockup (which should be open)
  3. Styling the Header Content (video)
  4. Styling the Main Content and Sidebar (video)
  5. Styling the Footer (video)