Department of Information Technology INTE / CMPS 2263 Intro Web Design and Development Midterm 2 – November 26 Please Note: - Create a folder entitled “Name-midterm2”. (Example: Chris-Zulinov-midterm2) - Complete all your work in and submit that folder - IMPORTANT: Before logging off your computer – Quietly come to the front of the class and confirm with the Professor that the folder has been uploaded. - Once confirmed, return to your seat, log off, and you are free to leave quietly. - You may use: W3schools, your notes, and class website. - Do not copy others work - Students must abide by MSVU Exam Guidelines; any student who fails to do so will be removed from the midterm and will receive no marks for the midterm. Complete all the ‘Items’ in separate folders (eg: item1, item2, item3, item4) Item 1 Photoshop (Suggested Time: Less than 15 minutes) Goal: Remove the item from the background and place it in a new smaller file. Step 1) Download the original image http://inte2263fall2020.webcoursespace.com/midterms/whale.jpg Remove the background until it matches the following: Step 2) Open the Image in Photoshop Step 3) Remove the background of the image until it looks like the example above (Hint: use the Wand, Quick Select, and eraser tools) Step 4) Select and copy the object Step 5) Create a new Photoshop document with these dimensions: Width: 330px and Height: 550px Step 6) Paste the object into the new document Step 7) Transform the object’s size until it fits inside the new document Step 8) Ensure the background of the new document is transparent Step 9) Save the new image as item1.png You do not need to submit the .psd. I am only looking for the .png Item 2 App Mockup (Suggested Time: Less than 20 minutes) Goal: Create a mockup of the app below. Please note: Use any serif font you want. Your primary color should be: #0082c8 Name at least 1 layer with a name of your choice Below are all the assets that are required http://inte2263fall2020.webcoursespace.com/midterms/iphone.jpg http://inte2263fall2020.webcoursespace.com/midterms/map.jpg http://inte2263fall2020.webcoursespace.com/midterms/logo.png http://inte2263fall2020.webcoursespace.com/midterms/bike.png http://inte2263fall2020.webcoursespace.com/midterms/arrow.jpg Step 2) Create New Photoshop document with the following dimensions: Width: 330px and Height: 660px Step 3) Import ‘iphone.jpg’. Remove the background color. Step 4) Set up your guides (any guides will do). Step 5) Import and resize logo.png. Dimensions of the logo should be set to about 100 x 50px Step 6) Add the text ‘Bike Routes’, use color #0082c8 Step 7) Add bike.png. Make it look like the example above Step 8) Place logo.png, ‘bike routes’, and bike.jpg in a group named header Step 9) Add and resize map.jpg Step 10) Create a green rounded rectangle. Add the text ‘Plan Your Route’. Give it a shadow. Step 11) Add the following text in a text box. Make it look like the example above One of the most convenient and affordable ways to get around town, and to experience our unforgettable scenery, is by bicycle. In addition to our extensive network of designated bike routes, you can ride your bike on almost all Vancouver streets. Step 12) Add any color gradient you want at the bottom of the phone Step 13) Add a grey rectangle (the thin grey line near the bottom) Step 14) Add a perfect white circle with a transparent middle Step 15) Add some white text Step 16) Add arrow.jpg –> Remove the background -> set the opacity of this layer to 50% Step 14) Save once as item2.psd Step 15) Save again as item2.jpg Item 3 Google Web Designer (Suggested Time: Less than 15 minutes) Goal: Create a 3 second animation with a button in Google Web Designer Example: http://inte2263fall2020.webcoursespace.com/midterms/q3/ Step 1) Create a new Folder called item3. Save all your work in that folder. Step 2) Create a new file in Google Web Designer. (300 x 250) Step 3) Import and resize the following images: http://inte2263fall2020.webcoursespace.com/midterms/van-bg.jpg http://inte2263fall2020.webcoursespace.com/midterms/logo.png Step 1) Create and 2 second animation. Slide the text ‘Tired of Winter?’ in over 0.5 seconds, hold it on the screen for 1 second, then slide it off the screen. Step 2) After that animation, add the text ‘Visit Today’. Add the background color #0082c8. Round the corners Step 3) Turn to text into a working button. Direct the link to http://vancouver.ca/ Step 4) From second 2 – 3, fade in the Vancouver logo in the bottom left Step 5) Save and ‘publish locally’. Upload your whole working folder. Name it ‘Item3’ Item 4 jQuery (Suggested Time: Less than 20 minutes) Goal: Create 2 different scripts that run on the same page. Before: After: 1) A ‘fadeIn’ script with a button - This will fade in the following image: - http://inte2263fall2020.webcoursespace.com/midterms/bike.png 2) A ‘animate’ script with another button - Animate the following image. It should move across the bottom of the screen and get smaller as it goes. Make the initial width 300px; - http://inte2263fall2020.webcoursespace.com/midterms/surf.png Save all your work and upload it via FTP. Good job you’re done.
欢迎咨询51作业君
