Showreel Graphics

Along with the mockup website pages, the other deliverable for this module is an example showreel. The purpose of this is to give an idea of the showreel which each of us would create as part of our portfolio after leaving university. This showreel doesn't need to feature shots of finished work, it just needs to show how you would roughly want it to look. This includes the graphics used, the way information is displayed and any editing techniques used to make it more interesting.

The first thing I did was create the graphics which I would use of my showreel. I decided that the best thing to do in terms of the style was to create graphics which match the design I used for my mockup website. I used to the same carbon fibre texture for the background of each graphic, along with a light grey outer glow and light grey text.

The two simplest graphics are the Opening and End screens. These are essential for any showreel to make it look professional. I've kept the Opening screen simple, featuring just my name, email and a description of what the showreel is mainly focusing on. The End Slate includes this same information, but also has addition contact details shown. At the very bottom I also decided to add the logos of the programs which I used to create the work on show. Hopefully this would allow potential employers to see which programs I am currently capable of using as part of my workflow.

In order to make my showreel even more interesting, I took inspiration from a couple of the showreels I reviewed earlier in the module. The first additional graphic is a bar which will be shown along the bottom throughout the showreel. This bar has my email address on it which ensures that any potential employers will be able to contact me at any point, which will be useful if they're viewing multiple showreels and don't have time to watch them all through to the end. 

The next graphics as information boxes. I saw these being used on another showreel and feel that they really add something, by giving out information about each bit of work being shown. The information I've chosen to include is the client, the project overview and where required my personal role with the project. I've made individual information boxes for each environment, which include the logos I created earlier for the mockup website.

Reviewing Showreels

For this task, we had to find a selection of showreels online and review them to determine what makes each one either good or bad. This would mean that when it comes to creating our own showreels, we would have a better idea of what things work and what things need to be avoided.

The first showreel, found here https://www.youtube.com/watch?v=ZEWD7oYyhK8, is split between character modelling and environment modelling. The way the modelling work is shown off in this showreel is one of the best examples I’ve found. Mostly, it is done by showing a clip of the model in situ in a film clip, before showing a 360° of the untextured model. For a couple of the models this 360° also shows the wireframe. However, there are also a couple of examples of a slightly more interesting editing technique. For one of the character models and a couple of the environments, the movie clips fade directly into the models themselves. This perfectly shows how each of the models actually fits into the finished scene. Aside from the modelling shown, the rest of the showreel is very simple, with no real graphics other than the opening and closing screens. The biggest issues with this showreel are the limited contact details shown at the end and the overall running time. At 4:49 this showreel does drag on towards the end and would likely be much easier to watch all the way through if it was cut down.

The next good showreel example, found here https://www.youtube.com/watch?v=zeoKBjJuvhk, also uses the editing technique whereby a clip from a film or cinematic fades into the untextured model or vice versa. This showreel is also the first one to use captions to describe the work which is being shown. However, these captions don’t give any real information, other than saying modelling, texturing etc. There are a couple of ways where this showreel is noticeably better then the first one I looked at. The end slate includes an extensive set of contact details, as well as showing the logos of the programs which were used to create the work being shown. Having logos for the programs used on the end screen is something which I will likely use on my own showreel. Another improvement over the first showreel is that this one is 2:11 in length, which makes it much easier to watch all the way through.

I also viewed a couple of other good showreels with certain elements worth mentioning, as I will likely try and include these in my own showreel. The first, found here https://www.youtube.com/watch?v=2bhEdB-352U, is a showreel for animation and visual effects. Overall the showreel is good, but the main feature which I will look to use is the information boxes. These pop up for each of the clips and give out basic information amount the client and the details of the project itself. Having these information boxes gives the viewers a better idea of what exactly they’re being shown. One other good feature which I will use for my personal showreel is demonstrated here, https://www.youtube.com/watch?v=-jOkEPdLULs. This is one of the only showreels I found which uses a bar at the bottom, which displays an email address throughout. Having an email address visible the whole way through the showreel is in my opinion a good way of ensuring that any potential employer viewing the showreel has access to contact details at any time.

While reviewing these showreels, I found some a number of errors in the poor quality examples of showreels. One thing which immediately makes a showreel seem less professional is poor quality graphics. This can be seen in this example, https://www.youtube.com/watch?v=fM7OX9PPkrQ, where all of the graphics feature nothing more than a basic font. Poor quality graphics give a clear sign to anybody viewing the showreel there hasn’t been enough time spent creating it. Another error is having a showreel where the opening or ending screens last too long. When these screens are shown onscreen for too long, it takes up time which could be better used showing off more examples of work. A final major issue which I found are showreels which are far too short. This example, https://vimeo.com/142782045, is only 29 seconds in length. With a showreel this long, it doesn’t matter how good the work on show is, there would be nearly enough time to show off enough pieces of work and certainly wouldn’t be enough time to give out contact details at the end.

After reviewing the various showreels, I have chosen some of the most important points which I will need to pay attention to or include in my own showreel to make it as good as possible. The most fundamental point is to do with timing. After viewing a number of showreels, which ranged anywhere from 4 minutes 40 to 29 seconds in length, I’ve worked out that the optimal length for a showreel is between one and half and two and half minutes long. Most of the good examples of showreels fitted into this length bracket. If the showreel is any longer than two and half minutes long it quickly begins to drag on, which may make some people lose interest. This could be an issue if the viewer is a potential employer because it may cause them to stop watching before the end which is most likely where your contact details will be shown. If the showreel is any shorter than a minute and a half then there either isn’t adequate time to show off enough work or the work is shown in a rushed way which doesn’t give the time required to view it properly. By making sure the length of the showreel is within this bracket, you are able to get a balance between showing off plenty of work and keeping it interesting throughout. For my showreel I will also be using some of the examples of graphics which I found. These include the bar which displays the email address throughout at the bottom of the screen, and the information boxes for each project shown. I will also make sure to put plenty of time and effort into creating all of the graphics I use as having high quality graphics as part of my showreel is a good way of setting it apart from any other showreels with similar quality work shown in them. 

Mockup Website Part 2 - Finished Website Pages

As one of the three main deliverables for this project, I have created a mockup of a website. These website pages have been created to give a basic idea of the style and layout which I would like to use when creating my actual online portfolio. I have taken many of the design cues from some of the high quality portfolios that I found for the portfolio review task, while making sure to avoid some of the common mistakes which appeared in the bad portfolio examples.

During the research into existing portfolios I found that one of the most effective ways to make the website look tidy and professional was to use a style which featured either very little or no colour outside of the white to black gradient. Websites featuring either a white or a black background, with all of the text in shades of grey helped to keep them from looking overly cluttered or amateurish. For my website I chose to use a dark background, with a lighter shade of grey being used for any text or borders. After initially trying a plain dark grey background I decided to change this to a simple carbon fibre texture, just to make it look a little less bland and to separate it from the numerous other portfolios out there with similar designs. Another reason for having a simple, dark house style is that it means the eye is always drawn towards the work itself rather than getting distracted by any other area of the page.

Along with the background, every page on the website will also feature the navigation bar shown on the left. There is a heading at the top of the bar with my name, along with a subheading stating what sort of work is featured on the website. Below this are the links to the three main sections of the portfolio, the homepage, the about page and the contact page. At the bottom of the navigation bar, I have chosen to add my email address. Whilst this email address is also available on the contact page, having it shown on every page just makes it much easier to find for anybody interested in contacting me. For the actual website, I would want this navigation bar to stay in the same position while the rest of the page scrolls (demonstrated on the Mad Max page shown later) as this makes the entire website much easier to navigate.

The Homepage is the first page of the website that anybody will see, so I’ve made sure that the work is immediately accessible from this page. I have used the small versions of the custom banners I created earlier to create a list of each project. These banners are clearly visible on the Homepage, which I believe instantly separates this from many other portfolios out there by showing an extra level of attention to detail. The page can easily be added to, only requiring a new banner to be created for each new project I want to include.

Home Page

Clicking any of the banners will take you to the individual page of each project. Each of these pages includes the larger version of the custom banner at the top, with a number of renders of each project below. At the bottom of each page I will include a paragraph of text about the project. In this I will give details about the project brief that was originally given for it, an overview of the reasoning behind the theme and a summary of my personal responsibilities for any projects which were done as part of a group.

For the Mad Max page, I have shown an example of how the navigation bar on the left hand side will stay in position whilst the rest of the page scrolls.

Circus Environment Page

Le Mans Environment Page

When reviewing other portfolios, I found that one area which was commonly not up to standard on the bad examples was the About page. Many of the worst portfolio examples had About pages with featured nothing more than a name and possibly a location, whilst the best portfolio examples had extensive About pages which included the persons interests, past work experience and education history. For my portfolio I’ve made sure to include plenty of information about myself on the About page, although what I’ve put on the mockup is only a sample of what I would like to include.

About Page

Another common error I found with poor quality portfolios was a lack or even complete absence of any contact details. Regardless of whether or not your work is good, if it’s not possible for an employer to easily get in contact with you then there’s no chance of them offering you work. Along with the email address displayed on every page, I’ve also created a Contact page. This page is easy to access, with a link to it on the navigation bar, and includes numerous ways to contact me which I have made up examples of for the purpose of the mockup.

Contact Page

Overall I think the house style I have created for my website works well, looking highly professional whilst also ensuring the website doesn’t look cluttered and without drawing attention away from any of the actual modelling work on show. I have addressed a couple of the major issues that I found while reviewing bad portfolios, a lack of content on the About and Contact pages, as well as including a few design ideas inspired by some high quality portfolio examples, custom banners and navigation bar, to create a professional portfolio which I feel would give me the best possible chance of attracting the attention of possible employers.