Devilishly Disabled: From 2D to 3D Graphics

Devilishly Disabled is a company by Matt Emo offering funny t-shirts and humour designed to shock and challenge society’s perception of those with disabilities by using edgy bold and thought provoking designs.

My task for this project involved producing a 2D devil character with humour being expressed. The character needs to be printed onto t-shirts, followed by a 3D model for a potential movie. The requirements for the character were as follows:

  • Maximum of 3 colours on each design – red black and white, as its too expensive to print otherwise.
  • The character needs to be sat in the chair with a bandaged left leg (like it is in a cast).
  • The chair needs to be facing forwards (like the little devil is looking out of a window.
  • It needs massive puppy dog eyes on the devil (big black pupils) and a big cheesy grin.

2D Graphics – Planning

Before going straight into Photoshot/Illustrator to design the character, It is highly recommended to sketch some characters first. I was hesitant to actually show this one as my sketch is pretty…well…basic lol. But, this is a process showcase ;)

As you can see below, variations of the character’s faces were roughly sketched and despite some of them not being chosen, they all played a part in identifying which features worked and which didn’t in relation to the final character’s design. One thing I often do is allow my sketches to be very loose and sketch anything that comes into your mind – quite often, the most random ideas are the best! After the drawing/planning stage,  I will make sure the proportions are correct once the character is in the vectorising stage.

Character-Skeches-Cornwall

Rough Character Drawings

When a good facial shape is established, I then move onto the next stage which is to work on the facial emotions. This is a very important aspect of any character design. The user needs to have some sort of connection with character which can be achieved in different ways. In this case, it was the devil’s eyes. Without this emotion,  the design would be flat.

When undertaking rough sketches, I try to outline or give thicker lines to features that I think need more attention from the viewers eyes. For example, like the nose, big black pupils and big cheesy grin all had a thicker outline to give them more depth.

The same process is applied for each section of the character – to draw anything that comes into your mind and then undertake a process of elimination to find out what doesn’t work.  I have f0und this process to work really well regardless of the project requirements.  This exact process was used when I was producing the Leopallooza game.

The following sketches show each aspect being taking into consideration.

Initial-Character-Sketches-Cornwall

Initial Sketches Drawn Up

2D Graphics – Vectors

This stage in the project involves producing the line art to bring the character to life. You’ll see here that I define the major parts of the devil character with stronger strokes, allowing the thinner strokes to act as details –the majority of which you probably don’t even notice. So, major elements therefore, like the nose, the big black pupils and big cheesy grin need to have thicker outer strokes. These help to not only create the character style, but to draw the viewer’s eye to the elements I want them to focus on. If everything shared the same stroke weight, the character would be unreadable. Varied stroke weights allow people to instinctively read a character.

Vector-Character-Design

Final Vector Version of the Devil Character

As you can see from above, the overall shape/structure and facial expressions of the devil character have been produced. The next stage in the project is to design the t-shirts.

2D Graphics – T-Shirt Designs

The requirements for the t-shirt design were as follows:

  • Forward facing shot
  • The casters (small front wheels) to be lifted into the air.
  • Massive black pupils, big cheesy grin but like the grin is coming out of the side of the devils mouth! (sort of mutely style, the dog from wacky races) out of the side of his grin.
  • Speech bubble containing the slogan “Hey Ladies I bet your man can’t do this while he’s walking”

The devil character has been produced in vector format, allowing the character to be scale up. The only additional features required were  some lines in the background giving the design/character an effect of motion. Using the path in Illustrator, this was easily achieved, as you can see below.

Character-T-Shirt-Design-Cornwall-Design

Character T-Shirt Design

3D Graphics – Particle System

As the character is a fury character, a particle system has to be added to achieve this effect. However, even before starting, I knew this was not going to be easy due to all the physics that need to be tested. Similar to water simulations (that I did for Gecko Head Gear) and as with anything being simulated in the real world, anything can happen. For example, if a wind force is applied to the particle system, you need to describe how the particles react to the force. Such as how springy, bouncy the particles become and indeed how many particles are effected. In this case, I had to define particular settings on how much the fur is to be bounced from the 3d Model and how springy the hair particles need to be.

Due to the complexity of the devil model, I decided to test the particle system on a standard uv-sphere shape. This will speed up the baking of the simulation as well as reducing the amount of samples I needed to render. The more vertices (details) you have in your scene the longer it will take to render and thus more samples needed. However, as this scene only has one shape it makes it very easy to render allowing me to see how the light is being bounced/effected on the tip and root of each strand of hair.

A quick render is shown.

3D-Hair-Particle-System-Cornwall

Test 3D Model with Particle Systems

When I was happy with how the particle system was behaving I decided to apply the particle system to the 3D devil model. This render took a lot longer given the complexity of the model and the amount of strands of hairs needed to cover the model.

See below of the final result.

3d-particle-system

Hair Particle System Produced

Court Farm Holidays Gets A Website Makeover

Court Farm Holidays is a family run business operating in Marhamchurch near Bude. And as the business has been in the family for generations, they have made the whole holiday experience a cornish home away from home. Their catering cottages are fully equipped with everything you need. On site faciltiies also include: an indoor heated swimming pool, tennis court, games room, morning animal feeding  to spa treatments.

Working alongside Rachel Barton Coates, I was tasked with developing the new makeover website and bringing it to life. This is perfect for me, as I like to develop as well as design websites from scratch. But for this particular website,  as its Rachel’s client,  she produced the designs and then passed them over to me for building and implementation. So, for this project, I didnt need to worry about the design stage. This allowed me to focus more on the development.

It is always a pleasure working with Rachel as her style of designs is completely different to my style/approach to websites. My style is to design/build something that hasn’t been seen or developed before, where as Rachel’s approach, is more clean/corporate and easy on the eyes. Both styles are very approachable.

court-farm-header

Before undertaking a website, I always look at the design and segment the design into structure building blocks – header, navigation, content and footer for building. Most ‘website designers’ on the other hand,  don’t even start with the design phase. Insteadd they go straight to Google and search for WordPress templates. While this can be good for certain situations , like getting a quick presence online or for people that like to mess around with layouts on a daily basis, the end result will not lead to a good experience for clients or end users (which is something I have witnessed on other peoples websites).  Anyone can download a template and setup a website,while this might be attractive, the result is your website looking similar to another one. Thus not making you stand out from the crowd. The performance of the website is effected as well, as the downloaded template is catering for all sorts of different scenarios/situations. This means more code has to be processed and downloaded.

When the structure/building blocks have been established, I then further drill down the blocks into medium level blocks. For example, the header on Court Farm,  can be divided into two columns, one column for the logo and then a second column for the quick book online and contact buttons. I then repeat this process for each of the structure’s building blocks.

The next stage is to start building the structure blocks using HTML and then to populate the data into these blocks using PHP. As a software developer, using PHP is a relatively simple process for me. Using the PHP functions from WordPress allows me to setup WordPress to allow the owners at Court Farm to easily populate the website. Effortlessly add adding a new cottage or adding new blog articles without having to worry about messing up the layout.

court-farm-interactions

Finally, after the structure and the data has been processed into the correct blocks I then work on the interactions. For most websites, I use CSS3 and JQuery in Javascript. If I can, I try to use CSS3 as much as possible as the performance can be far greater especially on mobile devices and tablets than jQuery. However, certain interactions such as animating SVG elements can be far more controllable using Javascript and JQuery than CSS3. So it really depends on what sort of interactions I am trying to develop. At this point, some developers might suggest using already developed plugins/scripts to achieve the interactions. And while this is somewhat true, they also come with a lot more code as they have been developed to offer all sorts of different interactions, not simply just the interaction I am trying to achieve. It also means it’s a lot harder to made changes if the client is requesting certain features to be implemented, as you would need to read and understand all the code. However, if the code is bespoke, it means all the code that exists, exists solely just for the interaction. This subsequently helps towards the websites performance,  as perhaps, only half as much has to be downloaded.

As I have quite enjoyed writing this blog article, I hope to continue writing with regular articles on 3D Visualisations, Designing and Software Development.

Like what you see then, fancy a chat?

Email me Phone me

Testimonials

As a design company, we have always had our own ideas of how something should look and the style we wanted to use, Dean was great at creating the websites and 3D modelling for our products.

Always readily available for updates and small changes that are constantly needed throughout the development of the site. The work from the start has always been top quality, but as projects have moved on quality has actually improved to levels we hadn’t thought available are now present on our sites.

With limited knowledge on the more technical side of website design such as SEO, Dean was always happy to take the lead and offer help with setting up the parts of the website we hadn’t originally thought of as directly important.

We have worked on many sites with Dean and continually try to keep the websites up to date on the both the Design and Technical sides of it and look forward to working together on future projects.

Jake Sacree - Gecko Head Gear
See what others are saying...