There are hundreds upon hundreds of online maps; hell, Google Maps has online maps for the whole world. Every street is at your fingertips. For my Interactive Map project, I’m going to need to create my own map of Kingston, so it is a good idea to look at some examples of maps for inspiration and to see what I’m getting myself into. Here are but a few of the thousands of maps online.
Here is a screenshot I took of the Kingston Google Maps. These winding roads and streets are what I’m going to be drawing, so I’d better get used to staring at these lines.
Google Maps use blue for rivers, green for parks, grey for buildings, white for roads and streets, and yellow for motorways.
But there are other kinds of online maps. Multi-story shopping centres also use maps. They can be commonly found on kiosks in real life so that shoppers know where they are going and how to get to each shop. They also typically have a list of all of the shops that the shopping centre contains. Here is a screenshot I took of the first-floor map of the Kingston Bental Shopping Centre.
The designers have obviously gone for a different, more slick colour scheme here. Everything is either white or different shades of grey. The design is also very minimalist and simplistic. They seemed to want to make the shoppers feel like they’re in a very fancy, modern posh building, to appeal to mature shoppers.
Real-life versions of shopping centre maps are normally displayed on a touch screen, interactive kiosk so that shoppers can browse through the different shops on different floors, which is better than just having a plain, printed out map because they can’t have as much detail. Here is what they typically look like in real life.
But not all maps have this target audience who like different shades of grey in mind when they design their maps. Here’s the map of Lego Land.
They have used lots of bright, flashy colours to appeal to a young audience who like lots of colours and graphics that almost jump out of the page and has lots of details so that everything looks like an adventure.
Here theme park maps are typically displayed on a large board in real life.
The only other form of the map you’d typically find out there in the big wide world would be paper leaflets so that people can walk around and follow the map.
Here is a retro leaflet from the 1990s of Thorpe Park.
Probably the most famous map in the world is the London tube maps designed in the 1930s by Harry Beck.
You can also find this tube map in leaflet form. This is the front of the real-life leaflet.
And of course, you can find big printed out versions on any London train station.
So that’s a basic overview of the different types of maps you can find online and in real-life.
Susan Kare is one of the notable contemporary American graphic designers. During the 1980s, she developed many of the interface elements for the Apple Macintosh. She worked as a creative director for the business NeXT that Steve Jobs founded after leaving Apple.
Kare’s most famous creations from her time with Apple is the Chicago typeface. It was the most prominent typeface for the user interface, applied not only in Classic Mac OS but also the first four generations of Apple iPod interface. Another one of her recognizable creations were the original monospace Monaco typeface and Geneva typeface. Besides, her long list of original creations includes the symbol on the Command key on Apple keyboards, the welcome screen icon the Happy Mac that greeted the users when the machine is turned on and Clarus the Dogcow.
According to Susan Kare, good icons should be more efficient like road signs rather than mere illustrations. They should be easily comprehended and keep the users from getting confused by extraneous details. She is of the view that out of million colours all the colours don’t need to be incorporated in the icons and that once a well-crafted and meaningful icon is designed it doesn’t need to be resigned frequently.
A GUI or Graphical User Interface is basically just what you see on a computer screen, and it grants users the ability to be able to interact with components on the screen using the mouse, like clicking on a website link or scrolling down a page. Some examples of Graphical User Interfaces are;
Here’s a screenshot I took of my Windows 10 Start menu.
Here’s a screenshot I took of my college mac’s dock.
I want to make a zombie apocalypse map of Kingston, so it will have the exact same layout as a normal map, only it will be focused on places where there is a high concentration of zombies, and what type of zombies populate each area. For example, a coffee shop would have hipster zombies, a pub would have drunken zombies etc.
I found that there was actually a map of the dead, which converted the whole of google maps into a zombie survival map, telling people where there were different kinds of shops, and whatnot. But unfortunately, it was shut down due to it costing a lot of money to maintain.
I want to do my own version of this, but like I mentioned above, I will only concentrate on areas of high zombie population, instead of going into detail about every kind of shop and space.
Here’s the Kingston map from Google Maps that I’m going to draw a simplified version of.
When drawing this map, I wasn’t paying attention, so accidentally drew it on the back of the scamp sheet, so I drew some map lines in the map to replicate the scamp sheet on the other side. I think I drew too much detail though.
I then scanned it and imported it into Adobe Illustrator, and used the pen tool to trace the roads. I then converted the paths into objects and gave them a murky green colour. I then made the smaller roads a darker green, to distinguish them from the bigger ones. Then I made the rivers bluey-green. I also made the background black, and added a dark green border. This is what it looked like. There are red lines all over it because it’s in Adobe Indesign, and is ready for printing.
I then added street and river names using the text on a path tool. I also added waves in the River Thames.
Then I designed some zombies. Although I used no reference pictures for them, I was pretty happy with them at the time.
So then I populated the apocalyptic land of Kingston with these half-arsed beings. To make the map a bit more interesting, I put some floating face down in the Thames.
I then went out into Kingston and did some quick sketches of some of the locations that my map would focus on.
I then created some little icons for the places that I was going to be concentrating on. I made icons for the graveyard, the Bental Centre, one for the Rotunda, and one for Pryzm nightclub. Here’s a neat little slideshow.
This slideshow requires JavaScript.
This is the map with all the icons. The map below is pretty different from the map above, because I’m writing this after I’ve created the map, and in order to find a version with these icons on it, I had to go back quite a bit. The colours are brighter here because when I moved the map into InDesign, it changed the colours from RGB to CMYK, which muted the colour of the neon green roads.
Next, I copied one of the male zombies and yanked out the poor fella’s eye and made his intestines hang out his belly, cracked open his head and pulled out all his teeth but one. I stuck him on the front cover of the leaflet. I gave it a title, added the same dark green border from the map, and wrote the backstory to this scenario on the remaining two sides.
Then I made a key to tell the reader what each icon means.
I printed my leaflet out and this is what it looked like.
At this point, I wasn’t really happy with the leaflet, the zombies all looked cute but really half-arsed as if I hadn’t really put much effort into them, which, admittedly, I hadn’t. And after getting some feedback realised that there was too much text. The map itself wasn’t very interesting to look at, and the purpose of it wasn’t clear. So I scrapped the idea of focusing on areas with a high concentration of zombies that the map readers should avoid, and instead went for the concept of showing potential survivers where to get medical supplies, food and weapons. I used these reference photos when designing the weapons icon.
This is the result.
For the medical supplies, I just made a simple red plus with a white background.
For the food icon, I remembered that I’d designed my own variation of Andy Warhol’s Campbell’s soup can for my previous art magazine project. So I imported that
and modified it so that instead of it being a closed can, its lid was open and tomato soup could be seen within.
As I was placing these around Kingston, I realised that Wilko sold food, medical supplies and weapons, so I decided to make an icon combining everything.
So then this is the map with the new icons and locations.
My teacher Doug saw my leaflet and said that the zombie on the front didn’t look very good, so I went and drew a realistic zombie. This is the reference photo I used.
And this is my drawing.
I really liked this drawing, but it didn’t fit with the green and black theme, or with the cartoon zombies, so I decided to completely change the aesthetic, and go for a simplistic, monochromatic colour scheme. I changed the writing from green to white, made the borders on the front white, and the borders on the map black, I made the background white, the roads black, the smaller roads dark grey, and I changed the icons to black and white. I covered the whole of the right-hand side of the map with a black box and put the key on it. I then spent hours tracing over a screenshot of Kingston and adding in the details of all of the buildings. I did this to make the map more interesting to look at and make it look more like an actual map. This is how it looks now.
I much prefer this map.
I found this picture of a zombie on google images.
I went into Adobe Photoshop and traced it. I went for a more stylised design, rather than realistic, but just colouring in the darker areas with large black lines.
I wanted to put this handsome fella on the back of my leaflet, but the background is black, and so is this guy, so I made a mask in photoshop and inverted the colours so that the black turned white.
I then brought it into Adobe Illustrator and slapped him on the back of the leaflet. I lowered the opacity to make him look kind of ghostly.
So this is what it looks like now.
So next up on the todo list is make an online, interactive browser version of my map. So I went out into Kingston (and google maps) and took pictures and screenshots of the shops that I featured in my map. I then went into photoshop and edited them to look dingy and black and white, so that they would fit in with my map’s aesthetic. Here are the edited photos in a neat little slideshow.
This slideshow requires JavaScript.
I then made them into little information bubbles that will pop up when someone clicks on the corresponding icons. I also made little ‘x’s in the top left corners of each info bubble, which when clicked on, make the info bubble close.
I also made it so that when you click on the name of the shops in each info bubble, it takes you to the shop’s website. I am a bit annoyed that by doing this, I break the atmosphere and idea that this version of Kingston is after society has fallen and zombies have taken over, by suddenly being presented with brightly coloured shopping websites, but it was required by the assignment, so oh well.
I wanted to make a looping animation that would play in the browser. So, because this is a zombie-themed map, I found this video, then imported into Adobe Animate, and rotoscoped it, then exported it as a GIF.
And this is my animation. I filled in each frame with a small selection of black, white, and two shades of grey because I wanted to keep with the map’s limited black and white colour palette. I coloured the back leg to add more depth to the walking. Thanks Danish for suggesting it :).
I also wanted to have an animated loading screen for my online interactive map, and my friend Zipi suggested the iconic zombie dance from Micheal Jackson’s Thriller music video, so that’s what I did. I was originally going to rotoscope Micheal with the original music video, but it was too dark and the quality was too low to be able to trace it decently, so instead, I found this video and rotoscoped a couple seconds of the woman on the right.
I decided that seeing as this was only going to be on screen for a second or two because it’s just a loading screen, I didn’t want to put too much time and effort into it, so I only rotoscoped the top half of her. I also wanted to keep with the very limited white, black and grey colour palette, so I made the background black, and the lines white. I didn’t fill in any of the areas with different shades of grey because I rather liked the look of it as it is.
So the next task in this assignment was to create an app designed in Adobe XD, focusing on our maps.
The tutorial that our teacher made for us to follow instructed us to design the app for iPhones, but because I have an Android phone and so, therefore, I’m more used to it, I decided to make an Android-based app instead.
I wanted the app to keep with the dark, gloomy apocalyptic aesthetic of the rest of the map project, so I took the zombie drawing I did for the front cover of the leaflet, and played around in Illustrator with it, using effects.
I then messed around with effects again to design a background for the homepage of the app.
I downloaded the Android Nougat Material Design kit and found this. I put this at the top of all the pages I made.
I couldn’t find the constant menu at the bottom of the screen on Android phones, so I went on Google Images and found this.
I put this at the bottom of all the pages I made after this one.
Because I made this app on my Windows computer at home, and I’ve used a Mac for making the rest of the project, I didn’t have access to the font I’ve used throughout the project, so I went with a slightly different one, but I think that’s okay, it’s not as if someone is going to be looking at the leaflet and the app at the same time, which would then make it obvious that the fonts weren’t the same.
The design guidelines for Apple IOS are a bunch of different rules and concepts to give the interface of Apple products that distinctive polished apple feel. They’re also very useful for app designers who are looking to make apps for Apple devices. Here are the main concepts behind the guidelines.
For example, here are some guidelines for the iPhone X on how to layout an app. If an app didn’t comply with these rules, like if it had a video in the Status Bar, instead of the Layout Margin, then it probably wouldn’t be allowed on the Apple App Store because it would be hard to use, and just wouldn’t look right.
There are also very specific design rules for the visual layout on different apple devices. All of these ideas blend together to create a seamless experience for users.
Looking at the Mac that I’m currently using, I can clearly see the different aspects of the guidelines that have been used, for example, the options bar at the top of the screen, that I can also see in the guidelines example above. Here’s a screenshot that I just took. The design is clean and simple, and easy to look at and navigate. Well, it would be if it was its proper size because at the moment it is tiny and very hard to see.
The only problem with making apps for Apple devices is that they are extremely strict with what they allow on their App Store; if an app somehow doesn’t meet the very high design expectations, then they will deny it. They are so strict about this because they want users to have a polished experience, and to feel like they have the best of the best right at their fingertips. Apple feels like this would be completely ruined by apps that went against their many, many design guidelines.
Material Design is a series of design concepts and rules for web and app design for web designers and artists to gain inspiration from. It was developed by Google in 2014 and is currently used by Android.
The very basic concept of Material Design is to make web and app pages that mimic real-world materials and movements, which convey specific meanings. For example, having shadows under different parts of the screen creates depth to the flat screen graphics, and could tell the user what they can and can’t interact with.
Another concept of Material Design is to make the design and layout of a page as simple and least confusing as possible. This includes simple icons which convey a lot of meaning as to what they are used for. Here are some examples of good, simple icons.
Here’s a good example of the difference between a good, simple icon and a bad, overcomplicated icon.
Here’s a screenshot I just took of an option bar in Mozilla Firefox which has obviously used the principles of Material Design; the icons are bold and simplistic and clearly tell the user what option they are respectfully assigned to.
I took a screenshot on my phone of the google apps, which are another example of good Material Design. Each app has a very specific colour palette, and good, simplistic logos; this allows users to quickly identify, and eventually recognise what the app does. The apps look strange and star-like because I have a weird theme on my phone.
Terms of service, also known as “terms and conditions”, or just “T&C”, are a set of legally binding rules that the website and or app requires its users to abide by. Users are often required to agree to these terms and conditions before they can use a service. Almost everyone who uses the internet regularly will be familiar with the terms and conditions dialogue box that pops up when you’re trying to install something or use a website for the first time.
I can guarantee that hardly anyone has bothered to read all of the terms and conditions that they’ve accepted, as it would roughly take the average adult about 75 days to read all of the terms and conditions they that agree to each year.
Here’s the contents page for Spotify’s terms and conditions, because I’m not about to show all of a company’s terms and conditions, as it would just be boring and pointless.
Privacy Policy
If a website or app stores personal information about its’ users, that could be used to identify them, like name, email address, mailing address, birth date, IP address, etc, then the website or app needs to have a Privacy Policy.
Different countries and states and unions have their respective laws on Privacy Policies, but this is the basic requirements of a Privacy Policy.
A Privacy Policy is a piece of writing that is easily accessible to the website/app’s users, and is required by law to say what personal information will be collected, what the purpose of collecting this information is, how this information is used by businesses and/or third parties, and details of how the user can look at and change their information.
This is the basics of the Data Protection Policy in the UK.
I went onto the online messaging app Discord and this is how they collect users’ data.
Cookies
Cookies are basically data that websites collect on you when you use them. Cookies can record what language you set the website too, what you clicked on, what items you put inside your basket and pretty much everything you do. It’s pretty much up to the website what types of data they collect on you.
Then I created a cylinder, rotated it 90 degrees and extended it out, by selecting the vertices of one of the ends, and using the move tool to extend it out.
I then used the scale tool to shrink the selected vertices so that it looked like this.
Next, I combined the two objects into one, by clicking on this option box.
Then clicking “Apply and Close”.
This is what the two grouped objects look like in the outliner.
Then I selected the group and pressed CMD + D to duplicate the objects.
Then I played around with the second group, trying to make it look more like a forearm, then I made another sphere and a rectangle for the wrist and hand. I stretched out the forearm quite a bit because I wanted to make the arm kind of spindly, cartoony and stylised.
This is what the outliner looks like at this point.
The thingies with the red arrows on them are my object transformation history, so they are not useful and just clutter up the outliner, so I’m going to remove them by doing this.
This is the outliner now. Ain’t that better.
Then I renamed the groups so that it is easier to navigate the outliner.
Then I selected the arm and created a new layer.
This is what the layer looks like.
I then double-clicked on the layer, and the edit box came up. I changed the colour so that it is more visible in the menu, and renamed it so that it is easier to understand which layers correspond to which objects.
This is what the layer looks like now.
Next, I switched from the modelling to the rigging menu.
Then with the arm selected, I created a joint by doing this.
I then clicked on each sphere which will act as a joint, to make the arm rig. I also switched to wireframe mode to make it easier to see the rig.
I then renamed the joints to reflect their corresponding parts of the arm. They’re in a parent-child hierarchy, which means that when I move and rotate, for example, the upper arm joint, both the forearm and hand joints with move along with it, because they’re the children of the upper arm.
I then selected the hand object group, and the hand joint. When doing this, you should always select the object first.
Then I clicked parent to combine them into the parent-child hierarchy of the joints.
Then I did the same with the forearm and upper arm, and this is what it looked like in the outliner.
And now, whenever I rotate the upper parts of the arm, the rest moves with it! Yay!
So now I just need to animate it. I want to make it slap someone, so I’m going to download a model of a guy off of TurboSquid. https://www.turbosquid.com/
I then created lambert materials and assigned them to different parts of the body to make it look better than everything just being a plain grey colour.
Next, I animated the arm swinging and tried to add secondary animation to it, in an attempt to make it look more realistic.
I then made the man fall down when he’s slapped, but I made a mistake and the inner bits of his face stayed suspended in the air.
But I thought that it makes it more interesting, so I decided to keep it like that. After a small amount of time, I animated the face parts falling down out of shot. I wanted to make it similar to this.
I changed the colour of the eyes to white, then also made some pupils so that I could make something similar to the gif above, and this is it finished!
Questions!
Name one thing that non-manifold geometry cannot do? – non-manifold polygons cannot be unfolded into a continuous flat piece.
Describe 3 things that you can change when grouping objects together? – You can group the selected objects together, ungroup the selected group and you can select a group.
Give an example of how or when you might use a parent-child hierarchy – When you transform a parent, its children are transformed with it. This lets you, for example, model a leg by making the thigh the child of the hip, the knee the child of the thigh, the shin the child of the knee, the foot the child of the shin, and so on. Rotating one join rotates the rest of the leg under that joint.
Name 3 different combine options within May and how might you use the selected options in your workflow? –Pivot Position, you would use this to decide where you want the pivot point of the combined object will be. Combine Skinning, this binds skins, by using the previous weights.Merge UV Sets, this allows you to choose an option to set how your UV Sets should behave upon merging.
Describe two things that you should be aware off when combining geometry in Maya – Make sure you’re aware of where the pivot of your newly combined mesh is located, as it will affect future transforms you apply to it.
Combining meshes can result in non-manifold geometry, where the normals of adjacent faces are pointing in opposite directions.
Interactive media authoring is basically combining a whole range of different types of media, like video, text, sound or animations into one package, like a CD/DVD to be sold in retail shops, or something downloadable on the internet, like a game.
In the modern-day, there are so many devices and products that incorporate interactive media, because pretty much everything that we digitally interact with comes under this massive, all-encompassing umbrella. Here are just a few of the different kinds of interactive media out there in the big wide world.
App design / Websites
Apps are most commonly accessed by using a mobile phone, but can also be used by interactive TVs. Hell, social media has even been known to be used from a smart fridge, somehow…
They can be used for a very wide range of different purposes, including but not exclusive to; entertainment (Angry Birds, YouTube), social media (Instagram, Discord), search engines (Google, DuckDuckGo), news outlets (BBC News, Polygon), online shops (Amazon, eBay). I think you get the picture.
The skills and products that someone would need to make an effective app would be on the lines of; graphic design, coding, market research, programming and interactive media authoring software.
As a real-life example of these, here is a screenshot that I took of Instagram on my phone.
Cash machines
Cash Machines are used for taking money out of your bank account and checking of your bank balance. People interact with their interfaces by pressing buttons. to make a cash machine, you would need skills and products like; typography, coding, programming and graphic design etc.
Games
Video games can be used by a myriad of different devices, such as consoles, phones, computers, handheld consoles, interactive TVs etc. The majority of them are consumed for entertainment purposes (Portal 2, Life is Strange), but they can also be educational (Human Resource Machine).
The skills and products that someone could potentially need to make a game are; game design software, coding, programming, 3D modelling software, sound engineering, musical skills, artistic skills, digital drawing software, tablets, computers, voice acting, typography, colour know-how, body-tracking equipment and software and actors etc.
Here’s a screenshot I took of me playing the classic browser game Agar.io.
Virtual Reality
People can experience virtual reality by either putting on some virtual reality goggles either self-contained, or connected to a computer, or they can put some goggles on with their phone inside, to replicate the authentic the virtual reality experience. Virtual reality experiences are normally used for entertainment (Superhot VR, Beat Saber), but can also be used for educational purposes, (Google Earth VR), and can even be used as a creative medium (Tilt Brush).
Some of the many skills and products someone might need to create a virtual reality experience could include; coding, programming, colour theory knowledge, artistic skills, typography, specialist cameras, cameras, tripods and game design software etc.
Augmented Reality
Augmented reality is where someone typically looks through their phone at the world around them, with the addition of virtual objects and or creatures milling about around them. It is interesting, as it allows you to somewhat blur the borders between fiction and reality.
Augmented reality experiences could be used for entertainment, educational, and interior design purposes.
some of the many skills and products someone would need to make an augmented reality experience could be; coding, programming, 3D modelling and animation software, art skills, graphic design, interactive media authoring software and typography etc.
Interactive maps
Here’s a screenshot I took of Google Earth because an interactive map can’t get much bigger than literally having the entire planet at your fingertips.
Some of the skills and products that someone would need to make an interactive map would include; Graphic design, typography, artistic skills, a good understanding of colour theory, digital drawing software and interactive media authoring software etc.
Kiosks
I found this at a bus stop the other day in Kingston. It was a touchscreen, interactive device that allows users to see live bus times, a map of Kingston, promotional photos, and train timetables.
Some of the skills and products someone would need to make one of these interactive kiosks would be typography, coding, programming, graphic design etc.
I watched a bunch of videos related to animated objects.
After watching this horror 3D short film, I got thinking about making a horror animation. But then I also had the idea to do a noir black and white kind of thing, because I’m making a noir film in another class. I could model and rig a cigar, and make it all dramatic.
Or if I go down the rabbit hole further, I could do a torture scene with inanimate objects. It would be cool to have some voice acting from either me or my friends. A group of thuggish objects could be questioning a sly object about the whereabouts of an object related to them.
I watched this video essay on Film Noir and it really helped me to think of ideas and get a sense of the genre. It also gave me a list of films that I want to go and watch for more inspiration, like Chinatown.
I’m thinking that I want it to start with a voiceover of the protagonist, and either a black screen or an establishing shot of the room. I want the protagonist to be restrained in some way, the antagonist to be looming over him, and the femme fatal somewhere close by who is betraying the protagonist, who is going to be killed at the end of this scene. The antagonist could either be one of those fancy metal lighters or a cigar, and the protagonist could be a normal cigarette. The femme fatal could be a stick of lipstick, and there could be some thugs that could be shot glasses or just bottles of bourbon.
The antagonist and femme fatal are trying to get the whereabouts of some money or something valuable out of the protagonist, and once he gives it to them, he will be killed.
I also love the idea of having one colour that sticks out. In premier pro, I’m going to make the whole video black and white, and then I can play around with the colours so that one type of colour is bright and vibrant, like red. I think red would look cool, especially if I use red lipstick because that then signals out to the audience that she’s important. Or I could make the thing that he gives them a bright colour. Ooooo! the femme fatal lipstick could kiss the protagonist on what would be his cheek and it would leave a bright red mark on it.
I found this 3D noir detective office that someone made. I think that it would be awesome to have the scene take place on a noir desk, perhaps with a man slumped over it asleep. So I guess the first thing to do is start making my own room.
MAKING STUFF
I used my friend Dia’s real-life cigarette for reference and modelled this.
I used this reference image to make my own 3D lipstick model.
This is the result.
I then used this photo for reference in making a 3D lighter.
This is the result.
I then used this photo for a reference.
And this is the result.
I forgot to save the reference photos for the next objects I made.
So this is how everything looks when it’s put together.
SCRIPT
LIGHTER “Now, I’m only going to say this once more, and you are going to use your pitiful voice to tell me the truth, or I’m going to burn your lovely missus here, and you’ll have to watch as she slowly, painfully melts into a red goop and you’ll be responsible. How you’re gonna live with what you’ve done, I don’t know”
CIGARETTE “STOP! Just… stop, I’ll tell you, but once I do, don’t you dare lay a single flame on her. …The diamonds are in the jewellery box on the shelf…”
LIPSTICK “Christ, I thought he’d never talk. Being stuck here for half the day hasn’t done any favours for my immaculate complexion.”
CIGARETTE “Y…You were working with him all along?! How could you do this to me?! I trusted you! I fucking love you!”
LIPSTICK “Tough, love is overrated sweetie.”
CIGARETTE “This is the man who will burn me alive. This is the woman who will betray me. And this is me, the fool who fell in love with the wrong cosmetic product. Now let’s roll back in time to see the beginning of the end of my wretched life.”
STORYBOARDS
ANIMATING
I then rigged the lipstick and cigarette and used the constrain option to bind the circles to the skeleton.
So now I have everything I need in order to actually start animating!
…or so I thought. It turns out that because I scaled up the cigarette and lipstick models I couldn’t figure out a way to scale them back down to the correct size, so I deleted the rigs, scaled the models down, and re-rigged them. I then realised that I needed to rig the lighter, so I did that.
And NOW I have everything I need to start animating!
I got my dad to be the voice actor of the lighter, my friend Alex to voice act the cigarette, and Kat to be the lipstick.
Unfortunately, because I recorded them on my phone, for some reason they were saved in the file format m4a, which Maya can’t use, so I used a browser-based file conversion website called Zamzar.
I imported the voice lines into the timeline and animated the cigarette and lipstick to switch to each sound the voices made, to make it look like they were talking. I tried my best to lipsynch the lighter’s lid moving up and down with the voice lines. This all took a LOT of keyframes. Here are all of the ones just for the lighter.
RENDERING
After I animated it, I used the camera sequencer to organise what cameras would be used at what points in the timeline, and for how long. Some of my shots only needed one or two frames rendering, so I didn’t include them in the camera sequencer. Here’s what it looked like.
Once that was done, I spent way too many hours trying to figure out a way to batch render the whole lot in one go, instead of manually setting each camera to render. But I’m so pleased I didn’t because 400 frames in, I realised that I hadn’t set the lights up properly and everything was way too dark. Although I was going for a noir type of atmosphere, this was just too damn dark.
So I set up the lights again and started the very long ordeal of rendering it. The batch render took 1 minute per frame, and I had 1480 frames. I did some maths with google and calculated that it was going to take me 23h 30m to render. I rendered the shots over the span of 4 days and made a separate folder for each of the cameras so that I could stay organised and not have to look at almost 1500 jpegs every time I opened my Onedrive project folder. The “LIGHT” and “DARK” at the end of each folder specify the frames that were rendered before and after I fixed the cameras.
By the end of the 4 days, my desk was littered with sheets of pages with messy scribbles strewn all over them trying to document which shots I had rendered, in case I somehow forgot. In hindsight, I could have just looked at the rendered frames’ numbers for reference but I guess I had developed a sort of tunnel vision.
EDITING
So now that I had all 1480 frames rendered out, I had to make them into a watchable video. I used Premiere Pro’s image sequence import option to make each lot of jpegs into a video and started editing it all together with the voice lines. I used a bunch of foley sounds and some atmospheric rain audio from https://freesound.org/
I used this for the jazzy background music to set the mood.
I used this for the rain in the establishing shots.
I positioned it over the shots I wanted there to be rain and I changed the blend mode from “Normal” to Screen”, and it erased the black background.
I used an adjustment layer to animate the colour changing from coloured to black and white at the end of the video.
This is what the whole video looked like in the timeline.
Then I exported it and uploaded it to Youtube.
My god, I’m so happy to finally finish this project! I’m free!!!!!
Ciaran :3 