Monthly Archives: March 2014

Blender: Another lighthouse

Blender: Another lighthouse

Made another low-poly lighthouse scene in Blender because I like lighthouse. This one has a similar style of lighting to my last attempt but I made it brighter to look like its day time. The shape of the lighthouse has been greatly improved, and could be improved even more if I wanted to spend the time on it. I was experimenting with using depth in the composition, with the closer things in the foreground having more detail and faces, and in the distance it having less. The effect this gave ended up looking pretty good.

Tagged ,

Portfolio Website

Being as indecisive as I am, I’ve made yet another portfolio website but this time, I’m sticking with it (Hopefully). Just like my second attempt, i’ve gone with picture backgrounds as they’re more visually interesting than a block colour. I’ve tried to keep the pages clean, simple and not too cluttered.

Here is the ‘home’ screen which is what you first see when you go on my website. The image is split into three layers; the background, the railing, and me. Separating the layers meant I could use a parallax effect, as they move in relation to the position of the mouse. Image

The website works on a ‘one page scroll’ basis, which means when you scroll down a little bit, it scrolls all the way to show the whole of the next page (Trying my best to explain it). The next page is my portfolio page. I used the same style of blocks from my second website attempt (if anyone saw the blog post). On hover, the background colour goes solid, and the box enlarges showing a title name of the portfolio piece. When it comes to adding more pieces of work, I just need to add another page with more work on it. At the moment the current set up only allows 4 pieces to comfortably fit on my 13inch screen (which coincidentally works perfectly for my current situation). On my bigger 24inch screen there is a larger empty space, which could be fixed in the future.

Image

 

The third page is my About Me page. I wanted to keep it short and sweet, as to not clutter the page with too much text. As for the image there was a bit of a dilemma with deciding for the right picture to use. In the end I made on based on me (as it’s about me…) but also hopefully reflects my personality  and my digital nature.  Once again I included a disabled link to an unwritten CV which swear I will get around to doing at some point.

 

 

 

 

 

Screen Shot 2014-03-24 at 14.29.08

 

The portfolio pages have a thumbnail image gallery which keeps the page small, and upon clicking the images they expand so you can see more detail in them. My first attempt at this is shown below (and my final result shown below that). I felt putting the background behind the pictures too bought the whole page together and unified it as one, opposed to the separated blocks. The second picture also shows the navigation I chose, allowing users to easily flick forward and back through the portfolio or to go back to the portfolio page itself. Adding the forward and back options made navigation smoother and easier, as it didn’t involve constantly flicking backwards and forwards. Despite the portfolio pages looking rather different to my homepage, I felt having the navigation with a similar appearance helped keep a link between the two.

Screen Shot 2014-03-20 at 17.20.38 Screen Shot 2014-03-20 at 18.14.44

 

In this website, I decided against creating a contact page with a dedicated contact form and went for a simple link to emailing me. This reinforces my idea of reducing clutter and unnecessary content, and removed what I believe to be an outdated web element. Modern websites don’t often use contact forms anymore (from my experience) so I wanted to do the same with mine.

While creating the website I kept linking my progress to my friends, in order to get guidance on design and layout etc. As none of them have studied web design it was a real test of how easily they can navigate my site. From my experience there were not problems with realising having to scroll down from the first page to see the others, despite there not being any instruction to, which is ideal.

Screen Shot 2014-03-23 at 20.54.36

 

Above is a testimonial from my friend, Charlotte,  after linking her my website to review. Something tells me that this is the type of response I want to my website, as everyone seems to love the parallax effect on the homepage.

Tagged ,

Blender: Mysterious Name

clothname

Here’s yet another creation in Blender, this time of a blue cloth draped delicately over some text. Before I say any more, yes, I am aware that the quality is rather low, and it annoys me to no end. As my laptop lacks a graphics card, I have to render using the CPU/integrated graphics (thanks Apple) which means it takes a long time. And frankly, I don’t have time for that. This one is at a quality of 100 passes, but preferably i’d like to do it at 2000 to get a decent quality result.

Anyway, back to topic. The cloth is made by using the soft-body physics in Blender, which does pretty much what you would expect by the name. Instead of being rigid (like my text for example), it’s soft… and falls as the timeline plays as shown in the screenshots below. The cloth starts as a flat plane, but as the timeline plays, the simulated gravity pulls it down.

Screen Shot 2014-03-21 at 12.01.23Screen Shot 2014-03-21 at 11.59.23

The plane on the left, is emitting a bright white light, which is the main source of illumination for the scene, and the one on the right is emitting a dimmer purple light. I used the second plane to balance out the lighting a bit more so it wasn’t washed out by the white, and gave it a bit more depth. Looking at the result, I should’ve used a slightly different colour for the background compared to the floor, as it looks a bit like the name and cloth is randomly floating around in space or something.

The idea of covering my name with a cloth was based around the idea of a ‘grand reveal’ of it. I had the idea of creating a small video clip of my name fully covered by the cloth, then it being whipped off, revealing the text in all its glory. At the moment, the cloth doesn’t really show the curves of the letter forms very well, so the only letter you can be certain is there is the ‘K’ as thats not covered. Perhaps it may be possible to reduce the rigidity of the cloth so it shows the shape of the tops of the letters a bit more, or add more points where the cloth could bend but this in turn will require even more computing power and make my laptop even slower.  The video idea will have to wait though, until there is a better way to render it out than on my laptop (Praying that Rob comes through with the render farm).

Tagged , , ,

Kinetic Typography: third video

For some crazy reason I decided to do yet another kinetic typography video, This time of a clip from a cutscene in FarCry 3. I chose this one as it had varied speech patterns (if thats the way to word it); in the clip, Vaas (the character in the clip) speaks fast, slow, and is emotive at the same time. I felt this would make it perfect for a kinetic typography video, better than the one for my second attempt. This one was a bit more ambitions, being ~3 times longer than the other two I’ve done, but as my After Effects skills improved, my workflow sped up and it didn’t take much longer to complete than my first attempt.

For the font, I used the font from the game itself (for pretty obvious reasons), it creates a clear link between the two which was evident from showing people after I made the video. The first reaction from a couple of people was “is that the font from FarCry?”, making it pretty clear they saw the connection.  As for colours, the white text on a black/dark background makes it stand out more, and the text is more obvious than if it were inverted. I used a dark red to emphasise certain words, this colour connotes passion and, in a sense, insanity (which is the word in red…). This just makes it stand out a bit more, which is what I wanted. Overall I think this is my best attempt yet (and so it should be), the timing is ‘spot on’ (as i’ve been told by my friends) and different sizes and speeds of the texts conveys the emotion of the clip quite well.

Tagged , , , , , , , ,

Blender: Low Poly Scene

Blender: Low Poly Scene

I tried my hand at making a low poly(gon) scene, having looked at a tutorial. I found it incredibly frustrating to make due to my lack of mouse which makes using Blender a lot easier, this led me to not spent too long working on it. However one good thing about working at low poly is that it runs a lot better on my laptop as it doesn’t have to render as many shapes. Its a great way to mock up an initial idea before creating a higher quality version, or just to create stylised artwork.

I like the idea for the scene, but it could’ve been better executed, and this is something I will do when my mouse comes (today hopefully!). Something here that definitely needs improving is the lighting. I think the problem here is that the global lighting (general lighting over the whole scene) is too high and is dulling the effect of having a sun in position. It’s also weird how I don’t even know whether its day or night… and i’m the one who made it.

Tagged , , , , , ,

Blender: Baby Steps

This is my first attempt at making something in Blender. The two random looking flat panels are lights to illuminate my text so that it could be seen. The ”cycles” renderer in Blender uses objects emitting light rather than dedicate lights to illuminate scenes.  I changed the text texture to glass to make it a see-through as it looks cool. I didn’t do the lighting very well and the text still looks pretty dark. This was really my first experimentation with blender, just getting an idea of using different colours, textures and lighting styles.

1

With this one I kept the same ones as before but this time had a ‘light’ the same shape as the text but directly behind it, this made it look like the glass itself was glowing which looks far better than before. I probably could’ve gotten the rendered image from a better angle but it took so long to render (A solid 5 minutes, i’m rather impatient) that I decided it wasn’t really worth it as I could easily create something 10 times better in a few days.

2 3

Next we learned how to do texture mapping using an image, instead of changing the material it’s made of. To do this we had to use UV-mapping on the shape in order to be able to apply the 2D texture onto a 3D shape. This feature is probably going to be very useful in the future as things get more complicated as its a way of creating realistic looking things using real life images.

4 5

Tagged , ,

Blender

In today’s workshop, we were shown the basics of Blender. Blender is a free, open-source 3D modelling program. Blender can be used for basic tasks such as creating and illuminating 3D text, but has even been used to make movies (such as Sintel).
I have past experience with a program like this having used Google SketchUp in my A-Level coursework, but this is far more capable and powerful than SketchUp.
We are going to start by learning the basics; making shapes and text, doing lighting etc. and then hopefully move onto more complex and interesting ventures.

Tagged , ,

Kinetic Typography: Second Result

Here is the final video for my Gladiator video, I’m happy with the outcome, and the animations I did, but It lacks the emotion that was in my first attempt. This is probably due to my choice of clip, which wasn’t overly emotive to start with. However what is good about this one, is the text and audio synchronisation. In a way, the text leads the audio which means it doesn’t look like its playing catch up, this is an improvement on my first attempt.

If I dared to start a third attempt, I would need a more emotive clip than this, in order to better portray it through typography, and stick with the better synchronisation to hopefully get an even better result.

Tagged , , , , ,