Pee Bar Effect in After Effects

As you know from one of my previous blogs, I created a project over the holidays (Summer Holiday Project ) and included a scene where a Pee Bar is shown which is inspired by Scott Pilgrim vs The World…Well in todays blog, I’m going to be going over how I managed to achieve creating this effect.

To begin with, I first studied the scene from Scott Pilgrim where the Pee Bar is used and tried to figure out myself how I could replicate it. The scene in question is shown below…

I then went to browse tutorials on the internet of how I could achieve this effect and how others went about replicating this effect. And as luck would have it, our old tutor Matty had created a tutorial himself on how to go about creating this effect…

So I studied his video and tried creating my own. First of all I created a new scene in Photoshop and created 4 different layers, those layers being the back of the pee bar, the light pee, dark pee and the “pee bar” text below he actual bar. The light pee and the dark pee layers were used to give the effect that the pee bar was glowing, but I’ll go into more detail later. Anyway once the file was complete, I placed the psd file into after effects and started creating the animations and so on for the actual pee bar.

To begin with, I started by creating the glow of the pee bar, this is where the light and dark pee comes in from earlier. On the light pee layer, I key framed it going from 100% to 0% every few seconds, so that the dark pee would show, giving the effect that it was getting lighter and darker every few seconds. The result is shown below…Once this was done, I then went over to animate the Pee slowly decreasing. To achieve this look, I grabbed the glow comp I recently did and drew a mask around it. I then key framed the mask so that it would come over the the pee bar, giving the impression that it was decreasing like so…Finally it was time to animate the text. With the text I simply did an animation where the “Pee Bar” text would emerge from underneath the actual pee bar itself. I also added a slight shine to the pee bar text. The finished pee bar all together in one comp is shown below…Fantastic! The pee bar itself was complete and now it was time to implement it into a scene. So I grabbed the best piece of footage that I managed to capture earlier which is shown below…And I selected the 3D layer option on each layer so that I could fit the pee bar into the scene accurately, I even added a shadow to the scene to make it look more accurate in the scene (the second pee bar comp being used for the shadow)…Once the pee bar was in place, It gave the outcome shown below…Success! The pee bar effect worked! Once I was happy with the piece, I exported it and took it into Premier Pro to give it a few more finishing touches and…

I couldn’t have been more pleased with the outcome of this piece! Overall, I really enjoyed creating this effect and it was really simple to do as well. Admittedly I do think that the design of my pee bar could’ve been better, but apart from that, I’m really proud of and really enjoyed producing this piece.

Halloween Game – HUD and UI

If you remember my last halloween game blog, you may recall me talking about early UI designs and the games mock up I created in after effects.

Well in this blog post I’m going to be going over the UI designs I developed in photoshop and HUD design I came up with also.

When developing the ideas further in photoshop, I took my previous designs into consideration as base designs but some designs felt cramped in some spaces, for example the menu screens initial design had the menu buttons in the middle of the screen, however I moved the buttons over to the side of the screen.

With that being said heres my first design for loading screen that I produced in photoshop…And heres the final menu screen design that I produced in photoshop…Overall I was really happy with how these turned out! Your probably wondering where the instruction screen is that I mentioned in the previous post, well in the scrum, Jacob had said that he had completed all of his sound tasks and so he decided to help me out by creating the instruction screen based of one of my initial designs.

I also designed the HUD for the game as well which is shown below…The basics of the HUD is that the top left corner holds the lives of the player which are resembled by tombstones which I had created previously…

and the pumpkin on the right corner of the screen acts as a sort of perk that the player can collect and throw at enemies like the ghost and etc. The Players score would be held between the lives box and the pumpkin box.

Overall I was really happy with this work that I had produced for the halloween game and I’m looking forward to see how these assets look in the final game and I’m also looking forward to doing more projects like this in the future.

Halloween Game – Mock Up & Designs

If you read my last blog post on the Halloween game, then you may recall me talking about our groups ideas and tasks that we had to make a start on and finish for the next session. Well in this blog post I’m going to be going over the halloween game mock up I produced for the game in after effects and some designs I came up with for HUD and UI that I intend to turn into actual assets for the final game in the next session.

So as I mentioned previously, over the weekend I managed to complete the mock up for the game so that the team and I knew what we were doing when it came to laying out the menu screens and so on. On the mock up I featured a loading screen, main menu, instructions screen and character customisation screen. I did this using techniques I already knew so that the mock up wasn’t too complex, such as masking and etc. For example the loading screen worked out the same as the Pee Bar effect I did as apart of my summer project, in terms of how to do it and what not…

Anyway, during the scrum we did, I presented the Mock up to my colleagues and they seemed to approve, however we decided to ditch the character customisation screen due to the amount of time we had left to work on the game. The mock up is shown below…

As well as presenting the mock up in the scrum, we had to state our task for the day and what we wanted to achieve by the end of that session and with that being said, my personal goal for that session was to get some UI designs done and have the designs partly completed for next session.

For the designs, I focused on creating 3 separate designs for each screen in the format of a thumbnail. One for the loading screen, one for the main menu and one for the instructions screen. The designs I drew are shown below and the designs that were approved for me to produce are highlighted with a black circle…Therefore with these designs being created and approved by the rest of the team, I have since started working on the menus in Photoshop and I aim to get them completed for next session, which is what I will talk about in my next blog.

Rocks and Brush Presets

In todays session, we did some more photoshop work with Tony. In the session, Tony went through a few designs that he liked in the game League of legends and how we could replicate them in photoshop.This later led us on to creating our own rocks. To begin with, I got the polygonal selection tool and created a shape with the selection and filled in the shape with a light grey colour, like so…I then went on to create a clipping mask and used the polygonal tool to select half of the rock with a darker grey, which would resemble shading on the rock, the clipping mask was added so that I was accurate when I came to apply the shading on the rock, making sure not to cross any edges…Next I went on to add scratches to the rock in a lighter grey colour where perhaps light would hit off the rock like so…So for the finishing touches on the rock, I used the liquify blend tool with the scratches on the rock and also used levels on the finished product giving me this result overall…I really liked my rock and the liquify blending made my rock look like it was under water in a way.

However, we didn’t stop there! Tony then taught us how to turn our rock into a brush preset. So I went on to turn my rock into a brush preset and I edited certain aspects in the brush presets menu to make the brush look nice when I was painting, such as jitter angles and etc. Anyway, next I got into creating a piece with my new brush. Firstly, I began to add individual black, grey and white rocks and overlapped them on top of each other…I then went on to add a new layer and add a bright red and purple background, again using the rock brush preset, particularly for the purple streaks in the background…Next I went on to add more white and grey rocks on top of each other and added a hint of orange/red to the mix, on a separate layer to the others I did previous of course…I later went on to creating a faint teal/bright blue streak across my piece with the brush preset once again…And last but not least, I created a faint purple streak across the piece leaving me with this result…Once I had my piece created, I decided to edit my product by adding a gradient map, a red one to be exact…And honestly just like the previous result, I was stunned at what I had created. The final version of my piece is shown below…In conclusion I really enjoyed playing about with Photoshop today and creating brush presets, and even creating unique pieces with these brush presets. I also think that knowing this technique (using custom presets) will be handy if I will need it at a later date.