Build Out A Dev Site From Mockup

After the dev site has been set up and once the final mockup is completed, the dev site is ready to start building.  The dev site should be built to resemble the final mockup.  Once the dev site is built the customers will revise it and request any changes they want to see before the site goes live.

  1. Open the final PSD located in Basecamp
  2. Go to File > export as HTML
    Note: Some images may not be exported correctly
  3. For images that did not export correctly such as background images that have overlaying text.
    Highlight the text.  Go to the transparency tab and slide the bar to the left to make the text completely transparent.  Then save file as a new PDF file.
  4. Another way to remove text or other objects from laying over an image is to remove the visibility of certain layers.  Locate the Layers tab.  Here lists out all of the layers in the image.  Every layer has a visibility switch that is located to the left of the listed layer.  To change the visibility of any layer click the icon that looks like an eye.  Change the visibility of any layer until the desired image is present.  Then save the file as a new PDF file.
  5. Upload the PDF file into Photoshop.
    Crop out the desired images and save the revised image.
  6. Upload the correct images to WordPress by going to Media > Add New
  7. Drag and Drop the corrected images or browse for the images on your computer
  8. Then FTP to Q4 Host thourgh a Unix shell and Select public HTML > open the file for the dev site you will be working on > wp content > themes > Q4w-themes > styles
  9. Open the style sheet and then build the dev site to resemble the mockup
  10. Once the dev site is complete, post in Basecamp informing the CEM that the dev site is complete.  Also include the URL to the dev site in your comments.

Leave a Reply