12. Mar 25th-31st Final presentations & documentation#
I spent the final week (and some time after the final week…) documenting my project. As I’ve been documenting everything as I go along, in this project diary, that wasn’t as massive a task as it maybe was for others. But on the other hand, I decided to make a project that:
- Can be assembled and played in several different ways
- Has interesting electronics making it work
- Has many different modules that all needed to be documented
- Evolved a lot over the course of the 12 weeks, in terms of how exactly it works, and what it looks like, with some things coming together just at the end.
So documenting all of this has been quite a massive task (/◔ ◡ ◔)/
For this week’s documentation I wanted to describe exactly how I’ve been doing the photo / video documentation of my final project. Partly so that it might help someone else who also isn’t an expert in photography/videography and wants to get started in it, and partly to remind future me how I did all of it.
Final presentation#
This week we had our final presentations! This meant putting together a short presentation and a video explaining our project, and then skimming through our documentation. I was still working on my video and my presentation up to a couple of minutes before my presentation started, but that’s just how it goes (◑‿◐)
My final presentation is on the main page for this project, but here it is again:
I used Adobe Illustrator to make the presentation, with a different artboard for each slide. Then I exported each artboard as an image, and made the images into slides in a Google Slides presentation.
In Google Slides, you can go to File -> Publish to web, which creates a link that allows you to embed the presentation, like you can see above! Google Slides supports gifs, which is very nice. You can also embed YouTube videos inside Googles slides presentations, which is very nice too!
Photo documentation#
Throughout Fabricademy I’ve used both:
- My phone camera: a Samsung Galaxy S6 which is about three years old but still doing ok
- My DSLR: a Canon EOS 1200D, which don’t use to its full potential. At the moment I’m just using this with the standard kit lens it came with, because I’m not serious enough about photography for it to be worthwhile to invest in more lenses ◔ᴗ◔
Setup#
I don’t know a whole lot about lighting for photography, but luckily the light in TextileLab Amsterdam is pretty decent - reasonably sized windows that let in soft light - so my goal was to set up a white background near the windows, and shoot all my documentation of the final product there.
We had a large piece of white posterboard hanging around, so I washed the back of it using hot water, dish soap and the back of a sponge - this got rid of some stains that would have shown up in the background of my shots.
I shot some of my documentation with the posterboard on the ground, and some with it propped up on a small table (which was easier on my back, but slightly wobbly).
Editing in Lightroom#
My photo editing process is pretty basic:
- Import photos into Lightroom
- Often in the ‘Light’ settings I’ll just click ‘Auto’ to see what Lightroom thinks the photo should look like
- Then I move the parameters around a bit until it looks right. For me this usually means upping the exposure, because I like bright photos. And for photos taken later in the day in artificial light, I’ll often adjust the colour temperature to be slightly more blue, to cancel out the yellowness of artificial light.
- Crop the photo to get rid of any undesired background
Here’s a side-by-side showing the same photo as shot, then after editing in Lightroom (and after removing the background, which is explained in the next section). I am by no means a photography / editing expert (or even moderatley good), but following these steps does make a significant difference:
Getting rid of backgrounds in Photoshop#
For some photos, I wanted a properly white background. It’s probably possible to set up my camera so that this isn’t necessary, but I don’t know how to do that…yet {◕ ◡ ◕}
Using the Paint Bucket tool#
For photos where there’s a very clear difference in colour between the subject and the background, the quickest way to do this can be to use the paint bucket tool (the icon that literally looks like a bucket with paint dripping out of it). Like so:
Using the Quick Selection tool#
For images where the Paint Bucket tool ends up colouring in parts of your subject as well as the background, the Quick Selection tool can be helpful. What you do is
- Find the Quick Selection tool. It’s looks like a paintbrush next to a dotted oval shape
- Click on the subject of your photo, and keep clicking, or dragging the mouse, until the you have selected the whole object.
- Go to Select -> Inverse. You should end up with just the background selected now.
- Use the Paint Bucket tool to colour the background white.
Gifs#
I really like using gifs to show how something was done: it’s engaging and enables you to show things that still images can’t, but doesn’t require you to click on and load a video. I’ve used two main to make gifs during Fabricademy - one quick and low res, the other more time consuming, but with a higher quality result:
Uploading to Giphy#
Uploading gifs to Giphy - the gif search engine - is a quick and easy way to create / host gifs. Once uploaded, Giphy allows you to embed the gifs wherever you want (e.g. in your Fabricademy documentation). You can:
- Just upload a gif you’ve already created. I often use a programme called ‘Gif Screen Recorder’ to capture something that I’m doing - e.g. in the previous section, showing how I remove backgrounds from photos in Photoshop - and make a gif out of it. I then upload these to Giphy.
- Create a gif out of still images
- Create a gif out of a video. I often use ezgif.com to crop / rotate videos before turning them into gifs
And you can also do some minor editing, including * Changing the length of the gif / cutting out the start or end of it * Adding stickers / text to the gif
You can’t, unfortunately, crop the gif or adjust the frame rate, and unless your video / images are very high quality, the quality of the final gif will be pretty low. But sometimes that’s ok if you’re just showing a process step :)
The downside of using Giphy gifs in Fabricademy documentation is that if something happens to Giphy in the future, or your Giphy account gets deleted, then they’ll also disappear from the documentation. But it’s also a lot quicker than any other method I’ve tried, so… ¯_(ツ)_/¯
I do at least plan to download all the gifs I’ve uploaded to Giphy onto my laptop, so I have a backup in case anything happens to Giphy.
You can see all the gifs I’ve made with Giphy on my profile
Using Photoshop#
Making gifs with Photoshop allows more control over the quality, size, frame rate (and more) of the gif. But it is slower (ノ ◑‿◑)ノ
There are two ways to go about it, which Adobe has documented, but here’s my explanation.
Gif from video#
With Photoshop open:
- Go to File -> Import -> Video Frames to Layers
- Select the video file you want to use. This will bring up a dialog box which allows you to trim the video, drop some frames to make the file smaller, etc.
- Photoshop then makes a layer out of every frame, and you’ll see a timeline at the bottom of the screen with all the frames. You can adjust the amount of time that each frame will play for, and other things, but I generally just leave it at the default settings (I can’t be bothered changing so many frames)
- Go to File -> Export -> Save for Web (Legacy). This allows you to export the file in gif format, and you can adjust settings, including the size of the gif.
That’s it! The most frustrating part, for me, is waiting for my laptop to struggle through this process - if you have a faster laptop than my Lenovo Thinkpad E585, this process will likely be much easier for you.
Gif from images#
This is slightly different from starting with a video. What you need to do is:
- Go to File -> Scripts -> Load file into stack.
- Click Files -> Browse, and select the images you want to use to make your gif
- At the bottom of the screen, you should see a Timeline window, and there should be a button that says ‘Make Frame Animation’. Click that button!
- On the right hand side of the Timeline window, you should see a little menu icon (a stack of horizontal lines). Click on it, and select ‘Make frames from layers’
- Now you should see all your images appearing as frames in your gif. From here, you can edit how long each frame plays for, and export the same way as in the section above.
Video documentation#
My video documentation process
Planning#
Making a video isn’t something that you can just figure out as you go along - there are a lot of decisions you need to make before you even start setting up your shots. I’m by no means and expert, but some things you should consider include:
- Lighting: shooting in natural light is easiest, so I chose to film next to one of the large windows in the TextileLab, and to do all my filming in the morning, when there would be decent light
- Background: I chose a plain piece of white posterboard for my background, to create a simple backdrop for the visuals, that wouldn’t distract from or clash with Stitch Synth
- Sound: As I needed to record the sounds that Stitch Synth creates, I arrived at the TextileLab at 8am on the mornings when I was filming, in the hope that it would be nice and quiet (as described below, this didn’t quite go to plan). And I used an external microphone to record better quality audio.
- What kind of shots you need: To keep things simple, I wanted to just do top-down shots of Stitch Synth, with my hands appearing in the frame to play it. Unfortunately the only tripod I had on hand couldn’t quite manage that, so I settled for an angle that was as close to top-down as it could manage :)
Make sure to leave lots of time for setting up and adjusting each shot - it takes a lot longer to arrange the camera, background, and lighting than you might think if you’ve never made a video before!
Light / setup#
I used the same setup as for the photo documentation, described above.
My camera has a video recording setting, which is what I used to record all the video! As I was mostly doing this myself, I would hit the record button, record a test shot, and then go back and look at it to make sure everything was in frame / in focus.
Sound Recording#
As my project is a synthesizer, I really needed to record somewhat decent sound, i.e. better quality than what my camera’s microphone could provide. Luckily at TextileLab Amsterdam we had a decent quality usb mic,and it was easy to use - it’s plug and play pretty much! The only downside is that as it has to plug into a laptop, rather than my camera, I had to record video and audio separately and then sync them in my video editing software.
Audacity#
Audacity is an open source audio recording / editing software. All I was doing to record the sound was:
- Hit the red button to start recording, before starting the video recording
- Hit the stop button when finished recording
- If the background was particularly noisy, I used the ‘Noise Reduction’ tool in the ‘Effect’ menu to take a sample of the background noise, and use that to smooth out the recording. This was particularly useful when some loud maintenance work started right outside the window where I was set up
- Exported the file to .wav format, and saved the Audacity file in case I needed to edit and re-export.
Audacity can do a lot more, but I really didn’t have time to spend on learning more (ಠ‿ಠ)
Super professional audio recording setup (the iron is not plugged in)
Freesound#
For the intro titles of my video, and other parts where the synth wouldn’t actually be making sounds, I turned to Freesound and looked for sounds / short melodies that would be similar to the sounds made by my synth itself. I’m still in the process of figuring out how to mix those together with my video footage to create something that makes sense :)
Editing#
I used Lightworks to edit my video. Why? Because I tried it once to edit an earlier video, found it ok to use, and it’s free and not too difficult to use. It does require you to make an account on their website, which is mildly annoying but not enough to put me off completely :)
Video editing isn’t something I’ve done a lot of, so I’ve never really settled on / mastered any particular software, or needed to invest in a better (but not free) one. I don’t know an awful lot about Lightworks, and just used some basic tools to use my video. Basically I just:
- Imported the video footage
- Deleted the audio recorded with the video, and replaced it with the audio recorded in Audacity
- Trimmed out bits of footage I didn’t need / want
- Exported it to a format that I could upload to YouTube
I used this tutorial to get me started, and there are lots of others on YouTube to help you figure things out. I also did a lot of ‘let’s click this button and see what it does’ to understand how the software works :)
Audio and video sync problems#
At a certain point I realised that my audio and video were playing at different speeds, and over time they would go out of sync with each other. After much googling and trying to figure out what framerate each was playing at, I figured out that my video had been recorded at 25fps, and the audio at 24fps. A very slight difference but enough to create problems!
To fix this for future recordings, I changed the video settings in my camera to record at 24fps. And to fix the existing recordings, I went back into Audacity and used the ‘Change Tempo’ tool in the ‘Effect’ menu. This allows you to speed up / slow down the audio. So to get a 24fps audio recording to match a 25fps video, you just need to change the tempo by 25/24 = 1.04 (or 104%).
And here’s the short video I ended up with: