Web Banner

Introduction

Using Adobe Photoshop CC I have created a web banner that advertises my photography and has interactive images that take the user to set locations that I have assigned.

web-banner

Text

I have only used the name that I Use for my photography. I wanted a simple design that did not confuse or disinterest viewers. If I used a large amount of text it would be easy for the viewer to miss information, such as my company name and make it appear appealing cluttered.

The text took up most of the banner as this was the focus of attention and most important factor. I wanted viewers to immediately see the company name. This is why the text is large and has a simple font style. I find many banners that have used complicated font styles that are in my opinion not easy to read and do not attract my attention. Whereas I thought this font is bold and would appear dominant and bold against anything else situation around the banner on any sites.

I applied a gradient overlay to the text in order to make it appear eye-catching and more interesting to viewers. I wanted the banner to be simple but also appealing, therefore applied small effects.

Imagery

I only included one image to this banner. This is because I did not want to create a cluttered appearance that would not appear attractive to viewers. I took the picture of the lens myself using a black blind and table with desk lamps as the setup. I took the picture of my wide angle lens with the reflection noticeable at the bottom of the image.I then placed this on the banner, adjusting the size to make it fit on one side without being too close to the text.

The black background blended with the black background of the banner. I think this has worked successfully, but think the picture of the lens could have been sharper. The lens begins to blend with the background but I do not think is a problem, instead, adds to the effect. The reflection in the lens creates a more appealing effect upon the image.

I used a lens to symbolise photography and think that it gives a more professional approach. I could have used pictures examples of my work but thought a simple image that can be immediately identifiable to photography worked effectively.

I did not want the rest of the background to be plain lack. Therefore I added a lens flare effect by selecting the lens flare options in the filter option. I experimented with a variety of flares and placements but found that they were too bright and distracting. I decided to hide the main flare behind the lens which was a separate layer and only shows the small flares behind the text. The effect is not too bright so that it does not take attention away from the text but still noticeable to add a more dynamic overall appearance.

The icons were all made the same size and evenly spaced apart under the text. This gave an organised appearance and easy to read design. I wanted the icons to be noticeable but not taking attention away from the text, therefore I though placing them underneath the text was a suitable location.

Colour

I only used monochrome colours for the main design of the banner and the traditional colours of each social media icon. I used black, grey and whites tones as I think this gave a modern and professional appearance. The black and white contrast well making the banner bold and text clear against the black. If too many colours are used it can become chaotic to the viewer’s eye and appear uncoordinated. Using three different shades gave a bold but appealing effect upon the design.

The original colours of the social media icons were used because they are iconic to each social media site and immediately identifiable to the viewers what it represents. The icons are only small, ensuring that they do not take attention away from the other imagery.

Layout

The lens was placed on the left and the text on the right so that the viewers would start on the left with has been scientifically proven to be the most common side to start when reading and viewing imagery. The eye would then move across the banner to the text, which would be the last thing the viewer seeing and hopefully remembers.

The icons were placed under the text to indicate the level of importance. The text is largest and noticed first, indicating that it is the most important element on the banner. Whereas the icons are situation below, indicating they are the second important factor.

Interactivity

I create hyperlinks on each icon. I thought the icons were suitable as it is the most likely area to have a link and clearly indicates where the user will be taken to. I created the links on Photoshop CC by using the slice tool. This was dragged over the desired areas and then I inserted the link to my social media sites, with the name of the link. T20161105_171959.jpghis was then reported as an image and HTML file. Saving it as this file type enables a hyperlink to be created along with the visuals. When testing I found that the links worked successfully for each icon.

I used Photoshop CC because it had to tool implemented in the software, making the process fast and easy. Another alternative was to use Adobe Fireworks but as this has been discontinued it made it difficult to find a version to use. I was only able to find the software on University computers but found more time to create the banner at home on my own devices and found the same method on Photoshop that resulted in the same outcome.

Conclusion

To conclude I think the overall appearance of the banner is effective ad the link to the social media sites worked successfully. I did not use the software recommended but found an easier method with the same outcome. The banner is simple which may be a negative as it could be boring to some viewers, but I did not want to create a chaotic design that would most likely discourage more viewers from looking at the banner.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s