Convert Psd To A Webpage
We have a website that we need to add a new page to. This is a custom built php website that already has it’s own template design. This is not a CMS like Drupal or WordPress. You will need to use the existing header and footer design to layout a new page in the content area. This is a static page that will later be coded for dynamic content. We just need the static design elements cut from the psd and layed out on the page for now. Please see the attached jpg file for reference.
Instructions
1. You can re-use the same header and footer include files currently used on the website. However, make a separate copy of the files so they can be edited separately. There are some minor differences between the standard header and this new page’s header.
2. Use the provided psd to layout the page graphics below the top navigation and above the bottom navigation. Everything in the black bordered box.
3. The video image can be a static image which will later be replaced by banner code. Make the background behind the video player image black.
4. The box with the large girl to the right of the video with a title of “Shop the Episodes” should consist of two images. The title and the image of the girl below it.
5. The box to the right of the girl in #4 with the jacket, pants and shoes can be a single image.
6. The small images of the four girls needs to be set up as 6 separate images and a text title.
– 2 arrows (same size each)
– 4 girls (same size each)
– “ONE SKIRT TWO WAYS” in text
7. The box below the video player needs to have the following elements
– “ASK A STYLIST” title in text
– “AQUA + 80s Fashion” sub title in text
– Description text
– Image of “Brought to you by…”
– Share and Subscribe button
8. For the thumbnail icons of the videos, you can just set up 2 rows to save time. Just set up rows 1 and 3. Each box consist of a standard sized thumbnail image and the text below should be css formatted text. Make the red episode text a hyperlink to “#”. Load the icons in a scrollable iframe so that an unlimited number of icons can be set up.
9. Make the “more info” text link below each thumbnail episode icon generate a pop-up like the one in the psd. The pop-up should use text elements for the title, subtitle and description text. Watch should be a button, the close link should close the window. This should be a modular window that stops you from doing anything on the page until you click close or watch.
10. Set up the two 300×250 banners in the lower right corner as individual images.