This was a more complex assignment brief where we were asked to produce an interactive document about The City of the Future. The last document did not have a specific page requirement, however, this assignment did and we were asked to make it in 7 scenes with a landing screen. This was also based on a hypothetical scenario where the BBC “are commissioning creatives to come up with prototype pieces of interactive digital media” to go on their website.
Firstly I had to plan by going into Animate and sketched up a timeline with sections I needed and I then added labels to the sections, I also added the necessary layers such as images, texts and animations etc. Next I was required to design a Mood board. I looked at several examples of cities in fiction and collected several images for each one. I then added the names of the property they were from eg title of media it came from. I separated them into the different sections by drawing lines around each of the city examples, which I made more interesting by making the lines glow in different colours depending on the individual cities.
Next I began sketching the front page and one other page I already had in mind. It was during this sketching process that I realised how difficult this was going to be to draw. My main concern was being able to draw the perspective correctly, this is particularly important to get right when drawing a city. Although I had the sketches, I had an idea of using 3D software to plan out my images, this immediately solved the problem regarding correct perspectives. Through using this software, I could render a rough plan of the scene using basic shapes and geometry, along with the appropriate perspective. I could then draw over them in an external software i.e Photoshop.
I first tested this method out using my second sketch. Part-way through the process, I realised I could use this method for the lighting of the scene. I added a couple of lights to the scene and then rendered my result. I was happy with the way this process turned out. From that point I immediately went into the process of drawing the details on the walls of the scene. I started with drawing the objects I wanted in solid colours, and in varying shades of grey. I then started shading each block of colour individually using clipping masks to keep the shading within the bounds of particular objects. My main additions were in the form of pipes lining the walls. There were a couple of basic pipes I had roughly made in the software, but the rest were drawn by myself. The pipes, due to their unorthodox shape, were the hardest to create because they bent in different directions and although I had already achieved the perspective I had planned out, I still had to get the pipe shading correct; this proved to be the most difficult task of all.
Although I was happy with what I had made, the journey it took to get there was very time consuming, which made me realise that I needed to adapt my strategy slightly.
My initial idea was to use the 3D renders as a form of sketch, however, I realised I would have to make them far more part of the final scene than I originally intended. My revised plan was to only draw over the parts that I could not model and keep the 3D renders still largely visible. The only real changes I made to the original renders was to adapt the lighting to account for the new elements I wanted to insert. This meant I had to do some more complex modelling, however, I still wanted to make sure I didn’t make it overcomplicated, and tried to only include the details I definitely needed.
From this point I went through each page one by one, deciding what I would make each page about, then going into 3D, using it to map out the scene, arrange the lighting, and set the camera angle I wanted to view the scene from. I did this for every page apart from the landing page, as I had already got far enough into the process to continue drawing it.
Making the front page was a slightly different process to the renders. I had the initial sketch with very rough details, just bare necessities, then later a more accurate sketch with a smaller brush size. Starting with drawing the buildings which were in solid colours to define the shape, I began with the buildings in the foreground i.e. closest first and because they required less detail the further back they went, the buildings that were furthest away were drawn last. I separated them in layers, with each layer containing a couple of buildings. When they went into the background, I started adding more buildings in the layers until it became entire rows.
Following this, I began shading the buildings and went back to the first layers. I didn’t add much
shading to the buildings in the very back of the composition. Despite being shaded, the buildings were still solid blocks of colour. Next process was to add the windows which was achieved by drawing rows in a thick pen and then cutting out the windows in different patterns which involved a lot of copying and pasting. The difficulty with this was making the windows adhere to the perspective of the building and the shading, which involved making many adjustments to get right. I then drew a very simple sky with a few wisps of clouds and very little else.
Windows were a big part of what I had to add to my blended pieces as well, therefore, many of the issues I had with the landing page carried over. Aside from this, I also used the opportunity to add silhouettes of people to certain scenes to add more life to some of the scenes. I also used this opportunity to add other details such as greenery and details to what I had intended to be billboards. I also made other small tweaks such as adjusting brightness and filters to the piece.
Firstly, I had to put the edited renders and my landing page drawing into Animate and arrange them into the order of viewing, with the landing page drawing being placed in the first section. Next I had to add the ability to cycle between scenes. When I initially made the document, I constructed a toolbar that I wished to use but I did this a while ago and couldn’t remember exactly what I wanted to do with it. I just decided to put a start button in the centre. I then copied this toolbar to every page in the same place, instead of having a start button in the middle, I left the centre blank while putting in a previous and next button on either side.
Part way through the process, I decided that I wanted a selection page, where users could choose where they wanted to go. I made a variation of my existing buttons by changing the line colour to a silver gradient rather than the golden gradient around my other buttons. Using this base, I made completely separate buttons that would link to each page. I then went back to the other slides and added a button in the middle that would allow for a user to go straight back to the main menu.
After reviewing the brief, to ensure that I was on the right track, I noticed it mentioned animated elements, so this was something I had not previously considered. Initially, I was confused as to how I could make my existing pieces moveable. The initial plan was to make the pictures move slightly in different ways, e.g. slow zoom or side scrolling, but I did not like how this looked, so instead I brainstormed what other animated elements I could include. This is what I decided to add to each piece:
Piece 1: Birds flying overhead
Piece 2: Moving figures
Piece 3: Moving Billboards
Piece 4: Combination of 2 previous slides.
Piece 5: A figure sitting on the sidewalk while another figure spray paints a wall.
Piece 6: Animated steam effects
Many of these were animated in different programs, The birds in a new Photoshop document, The moving figures and billboards on their respective documents and the steam effects were found copyright free online and edited to become a loop. Because some of these elements were part of the document, I had to separate the two when exporting. I also had to re-export some of my pieces with the moving elements removed so that I could add these in separately.
The next process was to add some kind of information and a way to show or hide the text boxes via buttons. I researched on how to make pop ups online and found some good examples which served as inspiration. I decided to add information buttons, which consisted of a round button with the “I” symbol on it. Then to close it, I added an “X” symbol in the corner of my textbox. In order to code this feature, I received invaluable help and advice from my tutor. Once working, I then had to think what text to add to each box; this came in the form of a brief explanation of a certain element of the scene. The information button was placed in the areas I wanted to explain.
Following this, I just needed to do some tweaking of the document to check its presentation. In the end I was happy with the way I had followed the brief.
Comments
Post a Comment