Viewing entries tagged
Green IT

       Do Serious games really work?    So do they?  Yes they do and we have metrics to demonstrate ‘ Return On Engagement ’!  Earlier this year Totem Learning designed and developed a game to educate business owners on greener IT practices. The game develops players’ understanding of IT issues within their company and supports them to implement better, greener practices.  A few months on, we can report that ‘Green IT’ has been a great success! The report has shown that learners finished the game with a full understanding of green IT practices. Not only was the level of learning very high, the game was so effective that it provoked a proactive attitude and action in many of the learners!            

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


           Here is just a cross section of facts and figures from the report:    92% of learners sought out more information on greener practices upon finishing the game    96% either have or are considering taking a course on energy saving business practices    23% are actively seeking assistance from local sources for implementation of these newly learnt practices, while 70% plan to in the near future    89% said they have, or would, recommend the ‘Green IT’ game to colleagues                  As for the design and enjoyment of the game:     71%  of learners found the scenarios and tasks within the game were directly applicable to their own companies.     59%  agreed the value of insights from the game were good or excellent.    And  79%  found it easy to use.   This is a brief look at the learning benefits achievable through using serious games but it is a brilliant outcome for this project and we are looking forward to sharing more great reports like this in the future! 

Comment

DO SERIOUS GAMES REALLY WORK?

Yes they do and we have metrics to demonstrate ‘Return On Engagement’!

Earlier this year Totem Learning designed and developed a game to educate business owners on greener IT practices. The game develops players’ understanding of IT issues within their company and supports them to implement better, greener practices.

Comment

       Is 'IT' Green?: Optimization for platforms    Now I have the characters completed, the final stage is to optimise the characters to work in game.  I worked at 300 dpi so we can print these characters large and to a high quality, this is useful for the marketing department. As we have huge files it’s easy to alter the image to a lower resolution. BUT keep loads of backups and don't overwrite your original Photoshop file!  You can always make a folder called original files. It doesn’t hurt to have a copied back up, in fact it's advised.  We need lower res files to work in OpenGL. Don't let techy words scare you; it basically means your job is to get your images to fit that program and OpenGL won’t run huge files. The smaller the resolution the quicker the game will run in the scene.  Keeping the resolution down  Go to the task bar, select image and in the settings image resolution needs to be lowered to 72 DPI and 8 Bits. Click on the index in the toolbar as shown below in the diagrams.  Taking the resolution down from 300Dpi to 72Dpi the Bit rate down from 16Bits to 8 Bits lets you select the indexed colour. It takes away the softness from the images but the characters will look small on the screen anyway so people won’t notice as much.   We saved over 10mb of data going through this process, and now the game loads lightning fast!  The visual way in Photoshop to keep the resolution down     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


    

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     Balancing of characters with back grounds  Based on research and watching lots of Michael Bay films Orange tones for daylight and Blue tones for night time work well. This is achieved with an ALT link layer solid colour layer with a layer modifier on it. Play around with the opacity, sometimes that in itself is very effective.     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     Final Images for the Is IT Green game with characters in day time and night time scenes.  Thanks for reading and keep drawing people!  Nicky Rhodes over and out…………for now………….  My next series is on environments so watch this space!

Comment

IS 'IT' GREEN?: OPTIMIZATION FOR PLATFORMS

Now I have the characters completed the final stage is to optimise the characters to work in game.

I worked at 300 dpi so we can print these characters large and to a high quality, this is useful for the marketing department. As we have huge files it’s easy to alter the image to a lower resolution. BUT keep loads of backups and don't overwrite your original Photoshop file!  You can always make a folder called original files. It doesn’t hurt to have a copied back up, in fact it's advised.

Comment

       Is 'IT' green?: Character creation       

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     One way to judge if your silhouettes have any major faults is by X flipping your character artwork. Using silhouettes this way will bring you a step closer to perfection.  In silhouette form it’s easier to spot the weakest and strongest character. It helps to judge if any extra tweaks need to be added. The weakest character seems to be the Data Technician. Her silhouette is less defined. Ideally, we want to see more of her glasses and her headset but her hair and lab jacket make up for it. I could have done more to that character but she does work in colour. The strongest seems to be the Janitor. Everything about him stands out; his hat, mop, shorts, even his moustache!     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     final images alongside the style guide     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     Here’s where the influences for my character designs came from. They are easy to see with the final designs alongside the Style guide.  I’ve taken snippets from Ido Yehimoitz, exaggeration techniques with a hint of Scooby Doo. I have kept Pascals light source and ambience influence and used it for the environments, bearing in mind the characters will be affected as they will be in the environment. You can see the end result on the last blog post of this series.

Comment

IS 'IT' GREEN?: CHARACTER CREATION

One way to judge if your silhouettes have any major faults is by X flipping your character artwork. Using silhouettes this way will bring you a step closer to perfection.

Comment

       Is 'IT' green?: Colouring    We refined the line in the last post so now its time to add some colour! Use layers like this:     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     Photoshop Setup   Start with the wireframe and select the ‘magic wand’ tool. Select the outside of the character and any space between the janitor and the mop. Select 'inverse' and fill white as seen above.  To create an ‘ALT Link layer’ hold down Alt and click between the two layers. The bottom layer becomes a base for the top colour to fit on top of. Add more ALT link layers to the base by using the same process    
    
 
 
 
 
 
 
 
 
 
 
   
    
       Red Pen Corrections Colour Pass  The red pen is out in force once again, this time there is less red and it’s taking into account colour too. The changes range from quick fixes to big fixes but it’s all workable. It helps if you do this one character at a time.     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     I have taken up the red pen approach PJ introduced to all my work now. I use it to find any defects and fix them. It improves the final quality of the images and acts as a final refinement. It trains your eyes to spot mistakes. You will soon have eyes like a hawk and will be able to spot all kinds of little problems with ease. It will make you a first port of call for critiquing colleague’s work. Tomorrow is the penultimate blog of this series and I'll be looking at final refinements and last minute tweaks - I hope you'll join me!   

Comment

IS 'IT' GREEN?: COLOURING

Colour using layers organised like this:

Comment

       Is 'it' green?: Drawing and researching      
  
  
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
  
  
      Draw, Draw and Draw!     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


    

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


       
  
  
    You have to keep drawing! Even if it’s not going well and you find you just can't draw. Maybe you're having one of ‘those’ days. That's ok. Take a break. Leave your desk and get some fresh air. Have a bite to eat or a nice cool beer. Relax.  Then get back to your desk. Change from a pencil to a ball point pen if you have to, draw! As seen below! I believe you have to draw and draw and then some, if you are going to uncover the gem you're after.   I like using a ball point pen as it makes you focus on creation rather than refinement. I’m looking for the rough beats which I’ll get plenty of time to tweak and refine later.         

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


        Early sketches for the Data Executive    
  
  
    Here I thought I would save time. I jumped straight into illustrator without really thinking, this is what I came up with. Very mediocre, slightly lifeless icon style. The character still had comedic value but it was missing a vital ingredient. My advice is simple: Avoid doing this- work on paper and then scan it in when you are happy.     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


        Back to research  I looked back at my research. I focused on some Italian characters that seemed to suit. I finally found a great celebrity to loosely base my character around and I went from there.     

  

    
       
      
         
          
             
                  
             
          

          
           
              Green IT. Character Design Process, Nicky Rhodes  
           
          

         
      
       
    

  


       
  
      Now we enter the refinement phase. As you can see above my sketching is a bit ropey and raw due to them still being in the working out stage. Once you are happy with your sketch idea; get feedback! Get as many people as possible to look at it and comment. I let work colleagues look through my final 6 character sketches. They would make passing statements, good and bad. Pick up on comments like: ‘I don't trust that guy’, ‘Is she a ninja?’, ‘he looks like a knight’, chances are these opinions will reflect the masses thoughts too.        

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


        If you can: adapt or, at least, consider what would happen if you turned the janitor into a knight? It can give character added dimensions. Not everyone has to like your character, just as long as they recognise what it’s supposed to represent then your job is done. Don't take offence if people say "it’s rubbish" or "that could be done better". But do question them, ask for specifics so you can refine it and adapt. Equally, be mindful and question "is their criticism founded and worth pursuing". Also wise to remember; you won’t please everyone you ask. People will see different things and want different tweaks. Don’t try to please them all. Take the ideas that resonate most with what you are trying to achieve, otherwise you’ll end up with something designed by a committee: vanilla and lifeless. 

Comment

IS 'IT' GREEN?: DRAWING AND RESEARCHING

Draw, Draw and Draw!

You have to keep drawing! Even if it’s not going well and you find you just can't draw. Maybe you're having one of ‘those’ days. . .

Comment

       Is 'it' green?: Incorporating character stereotypes            Stereotypes in the Design Process    
  
  
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
  
  
         

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


      Always reference from real life. I restricted myself to certain nationality groups. My aim was to capture a typical Slovenian/Italian etc   face type; taking into consideration features such as eye shape, skin tone, hair colour, etc. Often determining these traits are big generalisations and not factual. But it is a good exercise to have recognisable traits in your characters. It helps people easily associate your character with the nationality, age group, occupation etc your character belongs too.   A great example of this in practice is Wallace and Gromit. Many of the characters are ‘stereotypical’ British people. They have bad teeth, a fanatical love of tea, an insatiable appetite for biscuits and a dubious taste in clothing!      

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


      Stereotyping traits can refer to personality, such as a love for tea and biscuits, or physical traits like bad teeth. When considering the latter it is always best to get a wide sample for inspiration, then pick out the most commonly occurring similarities. Take care to be   aware socially when creating characters. My teeth are lovely and straight, by the way, but I can’t resist a cup of tea!     
  
         

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


     This is an example of my influene. I took inspiration from specific people in the limelight so the audience can easily connect with them. It’s always good to base characters on celebrities or actors, loosely. It is a great starting point. You may also find your characters become influenced by family members or work colleagues.        

Comment

IS 'IT' GREEN?: INCORPORATING CHARACTER STEREOTYPES

Always reference from real life: I restricted myself to certain nationality groups. I was aiming to capture a typical Slovenian/Italian etc face type; taking into consideration features such as eye shape, skin tone, hair colour, etc. Often determining these traits are big generalisations and not factual but it is good to have recognisable traits in your characters so people more easily associate with the nationality, age group, occupation etc your character belongs too. 

Comment

       Is 'it' green?: decision making with design            

  

    
       
      
         
          
             
                  
             
          

          
           
              Nicky Rhodes  
           
          

         
      
       
    

  


     Step Two - Narrowing it down  So now you have your initial research done. It’s time to break it down into categories. This will help build a clear picture of what to focus on.  With Green IT, I took the styles I thought best appropriate for the brief and split them into similar looking sections. Doing this helps to work out what style I want to achieve. At this stage it’s still ok to not know exactly what you want and you're allowed to get it wrong. This is a good process to narrow down your options to design styles which suit the brief and you are happy to pursue.     

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


    

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


        Decision making time!  I find this stage super tricky. I loathe making decisions. I’d rather merge all the styles and ideas together but this is an ill-advised method. It can become time consuming, messy and often doesn’t work out in the long run.  If you find things are getting tricky- you can't find the style you want and nothing is working out- go back to the previous step and do some more research. You might just stumble on something better.   Looking back, the images I have chosen all seem similar. I had drifted back to my comfort zone without realising, doing exactly what I wanted to avoid.  Back to the initial research stage; this time you know what you're not looking for. You have come a bit closer to the style you want through eliminating those you don’t.        

  

    
       
      
         
          
             
                  
             
          

          

         
      
       
    

  


        Even after the decision making process you can still add or take away pictures that are more in fitting with what kind of style you want to achieve. Styles can be merged together or influence each other too. There is never a right or wrong way as long as you keep all your research in this way you will be ready to work in a clear and focused direction.  Three mega things to take into consideration:  -     What stands out most?  -     What styles connect with each other?  -     Which path is most efficient? (Depending on your project length and budget, you may need to be limit how far you stretch yourself)     Back and forth  There are still a fair few styles on those pages. But narrowing it down, we are starting to see some strong themes emerging. For example: a cut out style with flat defined lines. The only images that are swaying focus are the Monkey Island and Rayman imagery. These indiscretions become easy to spot using a layout like this. It saves time and lessens headaches, allowing your brain to focus on creativity.  Refinement- Last-ish step before we start the design process.  Now you will be able to see that I have taken out loads of images and added Scooby doo character stylings into the equation. I have done this because it’s all part of the refinement process. You can take away images… it doesn't matter how many. As long as you're left with a range of images that help you work towards your desired style, you’re making progress.  As you can see I’m very indecisive and want to pinch bits from different images. This isn’t wrong, if anything, at this stage in the process, it makes your work unique and hopefully best tailored to your brief.   

Comment

IS 'IT' GREEN?: DECISION MAKING WITH DESIGN

So now you have your initial research done. It’s time to break it down into categories. This will help build a clear picture of what to focus on.

Comment