Vector Character Illustration

For my character illustration, I decided to do Street Fighter’s Chun Li. Majority are male superheros, so I wanted to showcase some girl power and focus on a very powerful woman. I contacted an artist on deviantart and Matiassoto was so gracious enough to give me permission to work on his original Chun Li sketch. Check out his site to see the rest of his amazing artwork.

After many hours of doing this project and just having learned the Mesh Tool (never used it before I took this course), here I will post my progress and go over some of the major difficulties I experienced as I completed my final assignment for DMA101.

Hilao_Julia_ChunLi_Screenshot01
Phase 1: Tracing Lines
Tracing the lines were fairly simple but meticulous. There are a lot of curves and fine tip marks and shading involved. I used a combination of 0.25pt to 2pt for my strokes.

Hilao_Julia_ChunLi_Screenshot01.5
Phase 2: Tracing Shapes
Getting started, I thought of tracing the head and face first but I had trouble with the eyes. The image was a lower resolution, so I really had to Zoom In to see where the line would fall into place. I used to always make a new layer for each shape made, but that took too long. I decided to change it up and put everything in one layer instead with the mixture of lines and shapes.

Hilao_Julia_ChunLi_Screenshot02
Phase 3: Selecting a Colour Palette
The original Chun Li character is depicted in a bright, royal blue colour, with golden trim. There are different versions of her with the brown tights and and without, showing her bare skin. I decided to change it up and give her a colour swap. There are a very limited amount of vector illustrations with Chun Li in red, so I stuck with the traditional Chinese red and gold colours instead of using pink (I over use pink way too much). I used these photos as my reference.

Hilao_Julia_ChunLi_Screenshot07
Phase 5: Shading
This was probably the most difficult task for me. I am not used to shading a lot and dealing with this sketch, it was very intimidating in comparison to other vector illustrations of her that I found online. I wanted to stay true to the artist’s work and not make it look too 3D. The reference photos did help a lot, just so I had an idea where the shadows can be placed. Without any shading, there is no movement in the character and it looks very 2D. Since the original sketch was done in pencil, I wanted to integrate the cross hatching techniques and shading. When I added the Strokes, it looked too random so I decided to add some shapes behind it. It then looked too obvious, so I played around with the Opacity and Blur. In my screenshot above, you can see I selected all the dark areas and I used a dark brown colour instead of black.

Hilao_Julia_ChunLi_Screenshot06
Phase 6: Highlights
I thought highlighting would be easy but to make it blend nicely, I had to add more than just make a shape and make it a lighter colour. I changed the shade of yellow to make it creme and almost white to show highlights. I copied the original shape and repeated it and added a Gaussian Blur.

Hilao_Julia_ChunLi_Screenshot10
Phase 7: Meshing
I tried to mesh around her thighs to add some curves to the character.ย  I didn’t want to use too much meshing for her as it would then look too realistic instead ofย  a cartoon. I tried to do some for her legs and thighs, but there was mostly cross hatching. I also played around with the Mesh tool for her metal spiky bracelet instead of using the Gradient tool. I still have a long way to go as I wasn’t too happy with my meshing. I added different styles of the Brush Strokes to add some shadow and changed the Opacity. I placed it on the very top of her thighs where I wasn’t able to get a good mesh effect on. I would need to spend more time doing this and using a mixture of more than two colours to get it just right.

Hilao_Julia_ChunLi_Screenshot05
I did try to make a realistic eye but I was having a lot of trouble. The tutorial I saw online didn’t work when I used the Distort and Transform > Roughen tool to make the iris of the eye. I fiddled with it for some time until I had to move on. I tried to make a mask but failed! Instead it came out as a pattern and it got saved to my Swatches. In the end, I just made a normal eye but there isn’t much depth to it and looks very plain.

Phase 8: Cleaning Up and Organization
I reorganized my layers and properly named everything. At first, I had only a few layers, but once it got into more intricate shapes, shading and highlights, I didn’t want to redraw everything so I basically just layered everything so it can be hidden. There was some layers that I had to make separate as they were missing closed shapes or shadows that I missed from before.

And this is my final…
julia_hilao_dma101_chunli_character_illustration.jpg

Advertisements

For the love of Monkey!

jhilao_vectormonkey_screenshot02
Ink by TrickyTrick.

jhilao_vectormonkey_screenshot03
Here is my monkey with all the colours and no shading.

jhilao_vectormonkey_screenshot07
I decided to give him some cool army pants and give him some personality. To do this, I used the Sponge effect with Green first. I repeated that same shape and made one in Brown as well and changed the Opacity. I then layered the two in order to get the final effect.

jhilao_vectormonkey_screenshot06
I gave him some hair, a beauty mole and a golden tooth! My monkey is bad ass! My inspiration? I’d have to say Ramboo and the army guys/gangster flicks.

Here is my final…
jhilao_vectormonkey_finalv2

Sports Logo

For my sports logo assignment, I chose the Hamilton Bulldogs for the American Hockey League. I wanted to do a Canadian team and I liked the design on their logo since it didn’t have any text. It has been a while since I have done some vectoring so there was some challenges getting back into it.

Julia_Hilao_Screenshot01_Sports_Logo

I first started by tracing the outline of the most prominent colours and shapes. I traced the outline of the dog bones and the different layers of the red, brown and white. On the Pathfinder tool, I created outlines so I don’t have to retrace each section and I joined the positive and negative space by using Unite. One of the main challenges were tracing the curves and slightly curved lines. The triangles and circles were not a big issue as they were very easy to make using the Rectangle Tool and the Ellipse Tool.

Julia_Hilao_Screenshot02_Sports_Logo

I tried not to use too much points, but on the bones area, there was no way I could get the curves right with one stroke. At first it seemed that I wasn’t tracing properly because the image was already too pixellated. I guessed where the implied line would be and tried to make it as correct as possible. If some shapes were overlapping, a quick quick fix I did was adjust the Stroke size. Tracing is always at 0.25pt and most of my lines were either 0.75pt or 1pt. If it was just a small layer underneath another shape, I used 0.25pt stroke.

Julia_Hilao_Screenshot03_Sports_Logo

As I progressed, more shapes were being added. I fiddled with a lot of shapes to get them in order so that the shading of the bulldog would be in front of the light brown shade and the main blue colour for the outline. I made a new layer for each shape first, then condensed it so that all the similar objects are in one section (the face, the outline masks, the bones and the shading).

Julia_Hilao_Screenshot04_Sports_Logo

I was going to trace the middle red part, instead I cheated and just made a circle and layered it behind the outline of the bulldog and in front of the blue outline. The final piece looked like it’s coming together but lots of revisions were involved  to make the points and curves flow without showing any white gaps.

Julia_Hilao_Screenshot05_Sports_Logo

The detailing with the bones shadows was harder to do here than the larger one. I decided not to use the Pathfinder tool and just trace the actual brown shade and place it on top of the white bone. Also, as you can see here, I just duplicated the bulldog’s face outline to make the brown and blue colour. Instead of tracing just the top part of the left ear, I layered it on top of each other and played around with the nodes to get it right.

Julia_Hilao_Sports_Logo_Final

It took me several hours to complete the final. I spread it over the week to give my hands a rest as it did get frustrating at times to get the lines just right. When I changed the opacity to see how accurate my lines were, there was a lot that I was unhappy with. It seemed to shift or maybe I shifted the original image or the shapes by accident. I moved it around again once more. Only when I removed the actual reference photo, it looked like a real vectored logo.

Audi R8 Redesign

Screenshot #1

Screenshot #1

In the beginning stages, here I am just getting a feel of the space and trying to separate my main sections into three parts. I used three pictures at the top to show that it is a Flash animation and that you can scroll through them. I initially wanted the highlighted image in the middle to be prominent, so I changed the Opacity of the other two images beside it to show it is selected. (Later I add a mouse pointer so that it pops out).

Screenshot #2

Screenshot #2

In this stage, I added more guides and start to use more layer effects. I don’t like how it looks very flat, so I played around with the Bevel and Emboss tools to see which effect shows more. Since the background is black, the Drop Shadow effect wasn’t doing me any justice so I just removed it. Also, I wanted to add a quote to get the reader’s attention to the middle of the screen by adding a review quote in the centre. I think it gives the Audi R8 product more of a personal touch if a person is speaking about it from their first hand experience after they test drive it, so others will be able to relate and understand.

Screenshot #3 Final

Screenshot #3 Final

I didn’t want the content and text to overflow as I wanted this web design to be more visual with lots of power images. I just tweaked it a bit and added more headings to the top. A particular one that I really like is the mini Search engine on the top right hand corner that will allow the user to be more specific and find things faster. I removed the three white boxes as I thought it didn’t have a flow. Instead I replaced it with a dark image of a close up of the V10 symbol on the Audi R8 and changed the opacity. I kept debating whether I wanted more text, but as I looked at other car websites, I found that a lot of them omitted the text. There were mostly Flash animations, images and Learn more buttons that lets you go to another page. I tried to stay away from the magazine and newspaper look and kept it very boxy. For the colour scheme, I kept it like the original logo (black, red and gray colour) so it is legible and easy for the reader to identify with the Audi brand.

For the links, I kept it very simple by adding all the Accessibility, Terms, etc. just in plain text with no layer effects. I used the social media logo buttons instead of the actual text to add a nice pop. Also, I added a Youtube video player on the bottom right corner so there is more interactivity between the user and the web page. Instead of just reading about how great the Audi R8 is, they can see it for themselves.