Faculty of Engineering and Technology Advanced Multimedia Applications End Exam C8-AMP-14 10-05-2022 Student ID: 1924192 Name: Obusitswe Jappie Question 1 Firstly as we were tasked to create an e-commerce banner, a banner as described by OMNICONVERT (May 11, 2019) is a rectangle or square online advertisement that incorporates graphic pictures and text, as well as connections to the advertiser's website or another page on the same website. Their primary goal is to bring attention to a certain product or service. We designed an e-commerce banner as seen below and got the inspiration from the OMNICONVERT explanation of the banner. For creating a design, firstly open Photoshop>create a new canvas of 1000 by 400 landscapes. We now then start by adding the product image of the tires by dragging and drop to the canvas and transforming them to desired size (Ctrl+t). Afterwards, we then add color fill to the background that suits our image, here I chose the purple color(Rgb) .We then use the pen tool to draw the shape found on the background, fill color the same as the background and we lower its opacity(55) to get this below look. Duplicate the layer and add a lighter purple color (layer musk),>select the layer fill and invert the layer. Inverting the layer allows us to refine layers and particular alterations while assisting in making selections. Now we are going to add effects (making the image seem there is a reflection of light towards it rather than being dull. We select the inverse layer and use the brush tool (size 290and harness of 100) for the effect> click where to apply the brush and play around for the desired look. the reason for inverse layer changes the unselected areas to selected areas while protecting the previously selected area. There is a reflection visible on the banner, to make select the image layer> duplicate and transform at the center to get the reflection and add a layer musk, afterwards our reflection layer on the flyer seem to have disappeared, to make it reappear, we use the brush tool and highlight the areas on the layer (the image itself on the canvas) to show the reflection. Lastly, we now add text and play around with its positioning and create an order button using rectangular tool> properties, and set rounded corners to 25px each. Question 2 To prepare product mockups, firstly we should consider having our artwork ready to add to the mockups; as such, we created the artwork separately in Photoshop to use for the mockups. Having said that having a product mockup helps to regularly use to present products in a realworld setting. In short, a product mockup is a representation of your finished product. We create 1920 by 1920 portrait canvas to get started and add two rectangular shapes of 85mm by 55mm which is the standard size for business card design. The reason for the two rectangular shapes is to have two-sided business cards (back and front respectively). Convert them into smart objects to manipulate them into mockups, we do this by right click>convert to smart object. It also helps us to edit mockups and add designs to them as well as to keep all transformations. Moreover, In Photoshop, a smart object is the ultimate nondestructive layer. Any changes you make to a smart object can be undone or redone; they're never permanently saved in the layer (Photographylife 2021). We then double-click each layer and will go to a new window where we add the artwork created (front and back) respectively and save. Go back to the original canvas and rotate the designs to add a little bit of motion. We then add some realistic features, the shadow. Select the layer on top>right click>blending options>color overlay of black and rasterize all of the layer styles and we drop that below the artwork layer and position it where the shadow should fall. Now we go to filter>blur>Gaussian blur and play around to find what we are happy with. Click the bottom layer (front) to mask off and lower the opacity a little bit on the shadow layer. Lastly to make the layers seem they are tumbling towards the surface rather than being on a surface, we use the eclipse tool to get the effect ( create a shadow that's a little away) filled with black> go to filter>blur>Gaussian blur. Question 3 We were also tasked to design a flyer, to do that first create a new canvas(letter portrait) this seems to be the standard design size for most flyers. Before that, we designed a flyer to assist establish a strong first impression, engaging with new prospects, and informing potential customers about the car manufacturing company. Firstly, we create some rectangular shapes on the canvas to make Now we are going to drag and drop the image file to the canvas>free transform to get the desired size and position accordingly. Right-click on the image layer >blending options> drop shadow and play around with the settings (here opacity of 70, size 35, and distance 10). Afterwards, we create a clipping mask by creating a circular shape (oval tool>hold shift>draw the shape and resize. We then Drag and drop the car interior image to the shape, click on the image layer above the shape> right click> clip masking. There is no a finished flyer without text, to do that, use the text tool to add some text to the flyer (headings and subheadings Lastly, we create another shape to make the flyer more appealing, which is drawing the 35% discount rectangle, use a rectangle tool>draw with no fill and stroke of 2pxand add text in between. Question 4 Designing website can become more of having problems when it comes to coding; we encountered the same when designing the website. Nevertheless, the website was designed with the help of online source codes to which we are grateful for as it really helped to navigate some hiccups we came across when we were designing the website using notepad as our primary tool for coding. To complete the website, firstly our considerations ware to design a static website which is responsive to mobile phones, tablets and desktops. The goal of responsive web design is to ensure that your website looks good and functions properly on any device. A responsive website automatically adjusts to the user's platform and screen size .Virginia Corona (July 2, 2021). We also kept an eye on the website operational components such as easy navigation on menus and some call to actions buttons which has been excellent but they have been used on the websites without any action when clicking them though they can be functional when the need arise. There is a lot of dummy text used on the website too. OMNICONVERT (May 11, 2022), what-is banner. https://www.omniconvert.com/ Virginia Corona (July 2, 2021) Responsive web design is important. https://scholarlyoa.com/ Spencer Cox (2021) Photoshop smart objects explained https://photographylife.com/ Phillip Thompson (2006) Website Essentials: A guide to planning, designing and managing your website, 23(4), 245-259. Jon Duckett (2011) Html and CSS: design and build websites. (18-285).
