[< All Assignments](../../index.html) # A1: Simple Mockups ## Assignment Description Practice using Photoshop to mockup a demo website. The demo site will contain 5 pages and will be updated in future assignments. Follow the given designs, replacing my name and photos with yours. This assignment is intended to give you practice working in Photoshop and to get your coding environment set up to turn in your work. ## Instructions 1. Find the reference design specifications (specs) in the [specs](specs/) folder 1. Recreate the designs in Photoshop - Copy the mockup designs adding layers of backgrounds and text. - If you need more vertical space, select your artboard and drag down the artboard resize handles - On the home page, add the 3 card images. (You can find them in the [images](images/) folder) - on the about page, add a photo of yourself. - Do the same for each of the 5 pages. 1. Save out each mockup as a flat PNG - right click on your artboard, select `Quick Export as PNG` - name your files: `home.png, about.png, coffee.png, search.png, assignments.png` 1. Upload and turn in you mockups - Log into cloud 9 - Upload your mockups to the `assignment-1/images` folder - Once uploaded, you should be able to view all your mockups by opening your `assignment-1/index.html` file. - If there's broken images, check the image's filename. Remember, capitalization matters. - Turn in - open the terminal from the menu, `Window > new terminal` - type `./turnin` and hit `enter` to submit your command. 1. Extra Credit: Take and link screenshots of 2 other example blogs. ## Requirement Checklist: - Can you access the assignment mockups online? `https://{username}.github.io/web1/assignment-1` - Are the images saved as .png not .psd files? - Are there 5 mockups? home, about, coffee, search, and assignments? - Does the content on each mockup generally match the [example images](specs/)? - Spot check the home page: - Is the name on the title your own? - Are all 3 card images present? - Spot check the coffee page: - is there a gray box around the content? - Are the descriptions indented? - Spot check the assignments page: - Are the assignment titles yellow and bold? - Is the list of assignments center aligned - Discuss: What was hard/easy about creating the mockups?