Thinking In Black – Tips and hacks for working black in digital illustration

Thinking In Black

Black can be a trouble to work with when it comes to print, especially with all of the varying print processes, paper finishes and general variations with commercial printing machines, inks, screen calibrations and so on - working with a black is a headache and I'm sure many others would agree! So, I have put together some tips and tricks to assist with your projects - it can be a dark and treacherous path. This post will mostly focus on creative approach rather than the pure technical aspects of Black ( K ). Working with 4 colour printing and spot colours is a detailed topic in its own right which is worthy of a post.

Illustrators, painters, artists and photographers

Firstly, does it really need to be BLACK? When I say does it need to be ‘Black’ are there many things in the real world that are completely black? Aside from an all light absorbing, all-life-drinking black hole that absorbs all light and colour? Besides… that's something that;s not of our world as far as I'm aware. Looking at the world around you, you will see come to see how lighting, surface, atmosphere and texture will absorb surrounding colours, including what you would what you would call a black surface. For example, someone is wearing a black t-shirt, more often that not if, even if it is new, light will catch on the folds, the creases and the contours of the fabric giving the black fabric a slight hue or tint depending on the light source and ambience.
  Study things! I like to look at surfaces and objects that have an interesting finish for example : gloss surfaces, bottles, matte paint, skin, fur, hair, shadows, animals, sunglasses, cloth, etc. Another good source of reference of how to use light and dark with dramatic effect is Chiaroscuro – do some research online - research Caravaggio (one of many artist's using this approach) and see what comes back. Caravaggio used light and dark with excellent dramatic effect framing the narrative in light and shadows. This is potentially subjective but hopefully... it will be food for thought – if its jet-black you’re after then please read on! ( I have attached a little image below with some dark but not black shading )

Illustration with a pinch of mood lighting! Left : a world of pure black and white without colours, the others... and bit of hue and tint

RGB controversial

Typically, I like to work in RGB first and then convert my files to CMYK afterwards, especially if I’m working on a bitmap illustration or digital painting. Why? Because working in RGB generally gives me more creative freedom in the beginning and it also allows me to move between digital and print at a later date anyway. This is a my preferred method when working on an illustration and by no means a rule, just a preference. I’m not the only one working this way. By doing a Google search I stumbled upon a commercial artist who also likes to work this way – this writer and artist goes into much greater detail about the in’s and outs of color channels on their blog. I recommend having a read at some stage – perhaps after you have read my post. :-)

(http://muddycolors.blogspot.co.uk/2011/08/printing-your-work.html)

Unexpected Results - a pleasant accident

I was always taught to work in CMYK for print and RGB for digital. I still champion this for working with professional printers as trying to print from RGB file may produce some erratic results, be it for leaflets printing, flyers, and other mediums. I accidentally ran a test print from Photoshop in RGB (Thinking it was CMYK) and the results were far more superior than the CMYK version. Both were printed on the same satin finish paper, on a Canon Pixma A3 with an impressive result. Despite my efforts and tinkering with the levels in the CMYK version to replicate what had happened In the RGB Version, I couldn’t produce the same results. I will make an assumption that my Inject printer translated the RGB to CMYK and just knew what I was after. I can’t complain too much as this project was sent to print and retained all the vivid colours and strong black colours.  Saying this, I still recommend trying to stick with the CMYK for design and print despite this result as this is typically what is asked - best to be safe, but something worth exploring for the future.

Digital - Add a Hue

Unless your are working in RGB and your artwork will remain for screen (digital) only. Then may be best to work with ‘Designer Black’ check the numbers. Although the computer says it black (or you've had it calibrated) it is best to drop a bit of colour into the mix - and do test print it.

Have a little play in the Colour Palette - this is the picker from Photoshop

Tips + Photoshop!

If you are working on a image in Photoshop and have started in RGB and want to convert your artwork colour settings in Photoshop, don’t just click on “convert to CMYK” use the colour profile under edit instead as this will provide better results. Use U.S. Web Coated (SWOP) v2. Experiment with the different settings to get the desired finish.

Last Key Points!

• Take heed of the colour warnings when you are in the colour picker window. This could save a lot of headache later on.
  
  
• Let the printer do the leg work. Send your artwork to the printer and try to let them help you. A printer worth their salt will want to help you and have your return custom. To reinforce what results you could also send them a physical sample (saying like this please!) from your home printer – assuming you have a good quality home printer.
• As mentioned previously, if you are working on an image with a lot of dark areas why not add a little hue / tint of colour? 20% cyan for example or some magenta/red for a warmer image.
• Avoid working with 0, 0, 0, 100 K, as this best reserved for font/text printing and can your work charcoal appearance. Use a ‘Rich black’ or 'designers black' instead. 20, 20, 20, 100 k for example.
• Avoid 100, 100, 100, 100, CMYK as this is reserved for crop marks and using this colour can drown the paper - no one wants drowned paper!
• Don’t be fooled. Your screen can be way out of the sync with your printer. Do some test’s first and see what results come from your printer (even printing on your home printer cannot guarantee the finish you require when you send your work to print) So take note.
  
  Yes... black can be painful to work with! And can be tricky colour to tame!

Thank you for reading!

Consider The Brief : some short tips on writing a design brief

Consider The Brief

Designer to Client!

This post has been written up to offer information with regards to setting up rough guidelines for setting a brief. Imagine answering the following...

Purpose & Plan

What is the purpose of the project? Is it to expand the business, launch new products or promote something that you are already offering to an exiting customer? In other words, you will need to have some sort of a plan and end goal in mind for the project. If you don't know what it is that you business needs it will be trickier for a designer help. With out a plan, even a loose one, you will end up going around in circles. Maybe ask yourself some of these questions :-

• What do I want to get out of it? 
• What will my return on investment be? 
• Can this be achieved? 
• Should I do this now? 
• What is the competition doing? 
• How can do it differently/better?

Those are a couple of suggestions.

Budget

Budget is important to consider as this will affect the amount of time that will need to be allocated to your project - factoring in deployment, build/design, concept and whether anything else needs to be considered.

If you have a larger budget for your project(s) then you may want to consider a cascading approach. This method, is far more open ended financially but allows for plenty of creative and innovative freedom, a designers dream. A draw back with this free flowing approach is that money and keep on going into a project, regular checks on the amount spent so far are a good approach and ball park figure should be offered in the beginning, especially with smaller business with tighter purse strings. The other method is a fixed price, this method for spending usually suits both parties, or so I have found, a draw back with this is that sometime contracts and prices need to sometimes be re-evaluated should there be substantial changes to a project specification. Favourite approach – Fixed prices discussed in the beginning. Factoring changes (or tweaks) requests will increase price as more time will be required.

Time Frame

Please take into account when you need a project to be completed, things can take time to finish in addition with other projects. Also, waiting to hand over all relevant information at the last minute will end in disappointment eg, sending all the photo's over for flyer an hour before a production deadline or as the designer needs to leave will not make the best of it... Get the relevant information such as, text, photo’s, FTP details etc over in decent time. The earlier, the better! Trust me on this one.

Target Market

If this is a design project that is yet to have a brand established have you considered who the target market will be? Is this for children, adults, professionals, tourist, artists, trade and so on.

Branding

Do you have an existing brand guidelines for your company? If you have any existing logo, colours, fonts, do’s and don’ts this may be required for the project to be completed.

Deployment

Depending on the desired project, how do you intend to deploy the project? Will this be a small web banner, a flyer, will you be using a printer, will this be a for screen, will it be for print? It is worth considering how this may evolve in the future be it for print or screen. It is easier to scale a large file down or resize a vector than it is to resize a 60 px 60 px logo onto a bricks and mortar shop.

Limitations

Is there anything in the that a designer can't do? Will it be for a certain target demographic, politically sensitive, have to fit on some something small, needs fit x y z etc etc

So, you have written a brief....

Dear Designer,

I want you to create something that brings value to the company, here includes the specification and the brief to expand my business! Thank you for offering your time and experience!

Hope this helps a bit!

Should you require any design services feel free to have a look >

Creative Design Services >

Satzuma : Design & Development Projects Update Summer 2016

ORANGE WITH A SPLASH OF BLACK

“its black and orange!” That was the first thing I noticed when I received my current employer shortlisted me and sent me a link to their web address! What's not to love about black and orange – as a kid orange used be my favourite colour and now I practically dream in it. I felt that it has been long overdue that I should post a blog update with regards to some of the creative projects that I have had the honour of working on in the past couple of years. These range from designing Air applications, websites, characters, product videos, intro's flash animations (now Animate CC) and many more.

Bit of Action Script 3

THIS WAS AN AIR APP AND BROWSER DEMO
FOR DIY PHONE CASE PRODUCT

Stand design at the Harrogate Show - TETO!

My Rufus illustrations for the book cover artwork!

Website Interface

Packaging for the Smartphone Joystick

Above, I have added the interface design and the screen grabs of the working iDesign application, this was built in flash and written in AS3. The other projects cover the trade show picks, illustration, UI and some packaging.

Not Just Design And Development.

Satzuma is a company that cultivates a think different approach, be it in marketing and design or its approach to business. Having the opportunity to work with like minded team and being at the forefront of the creative process has given some invaluable experience in creative direction, hiring staff, working with freelancers, collaborating with business development and of course, recruiting fellow design interns!

"Satzuma illustrates three important skills; Do one thing well, make it a fun thing and think different"

- Guy Kawasaki, Former Marketing Chief of Apple

"I have worked with Jimm for over 6 years across hundreds of commercial projects. Jimm's ability to produce my ideas or concepts quickly by carefully listening and understanding to what I need or want commercially makes the difference. His design skills by hand and computer combined has always produced highly creative and unique pieces of work which has formed one of the main corner stones of our business."
– J Ramm, Satzuma LTD

Thanks! :-)

Simple Custom Cursor For Your Stencyl Game

The following block shows a simple method for making your own custom cursor.  Please refer to the Stencyl community help section for further details on coding blocks.

General Gist : this little 'how to' covers some basics for making a custom cursor in Stencyl. In a nutshell, you need to hide the default operating system cursor and swap out for your own custom cursor, which will be an actor type.

Part 1 : Graphics
1 ) Firstly you will need to draw your one custom cursor in graphics program of your choice. I used Adobe Illustrator to draft up this pointer and exported it as a .PNG – Dims 29px 27 px, remember to save your .PNG in logical place in your project folder.

Part 2 : Importing a Cursor As An Actor Type

1 )Open Stencyl and navigate to your game project (assuming you have already made a project)

2 )In the upper left corner press on the “Actor types”and create a new actor. You will then need to add a frame and import your newly created cursor!

Part 3 : How To Make it work

1 ) Click on 'actor behaviours' and create a new behaviour! This will be a basic behaviour to make your Cursor work in your game.

2 ) Click “add event” in the top of the panel. Add > When updating

3 )You can either navigate through the code blocks manually or you can search for them. Using the image shown. Thats how to make a basic Cursor in Stencyl! Don't forget to attach the block to the Cursor Actor, the green button in the top right will allow you to do this - “Attach to actor”

Block for making custom cursor

Run game!

Bug with cursor full screen * untick fullscreen mode!

Please take into account that the flash player from Stencyl ( when tested from the game ) game glitches in full screen mode. The main default operating system mouse will still be visible despite having the cursor hidden.This could be an apparent issue with the flash player. - Dated from May 2016. Try unticking the full screen mode... Not the best

Notes : this bug happens on a iMac OSX i5 10.9.5

#stencyl #flashplayer #cursor #simple #pointer #codeblock

Bring Out Your Beasts – MONSTER DRAW...

Bring Out Your Beasts – MONSTER DRAWINGS

Felt compelled to draw some vile things and a little less of the London Underground (although I will be coming back to this very soon) I have been getting my brain monsters and design down on paper. Most of these sketches, doodle's, drawing have been captured on a traditional cartridge paper using both my mechanical pencil and graphite.

I think it has to be said that I get a level of satisfaction from drawing the grisly details of creatures, be it afflictions, boils, wounds, teeth and any other visceral part of the anatomy. Drawing this gives me sense inner rhythm , a hum or chord in which my body and mind tunes into. It's gives me sense of focus and relaxation which I can only graze upon with these few words.

Take your time to have a browse, I have been feeling quite inspired to do some more creature design and studies since going to the zoological museum at UCL. Elephant skulls are quite fascinating to draw and also strange without flesh. That's for another day.

It's Blurred?

Thank you for looking and reading. To view more of these pieces of artwork you will need sign up to Patreon to see what that walking affliction might to look like, thank for you support. (You will need to pledge $5 or more see this post)

https://www.patreon.com/posts/

All artwork Copyright JD Odell 2016. Please do not use, distribute without my prior consent.

Thank you for reading

London Underground Drawing - Crowded Northern Line in Rush Hour. "Mind The Gap"

Tube drawing captures the folly of the London Underground

I have been traveling on the London Underground for years and despite the fact that it is a travel nightmare, most people avoid social interaction and a bit smelly! It is a fascinating place.

I felt inspired to draw a scene of the rat race capturing the annoyance, the displeasure and the all round chaos that unfolds in the morning and evening's getting from A to B - you should hear some of the expletives I mutter under my breath. With this drawing I felt compelled to share a sense of immense overcrowding, irritation and the general lack of personal space.


In this picture
None of these people are faceless numbers, each person is an individual with a story to tell. To pick a few faces out of the crowd: you have the builder getting to the site with his huge toolbox, both him and it covered in bits of muck and plaster. You have the woman in the middle trying sandwich herself on the already crammed train and the other woman to the right desperately trying to force herself and her luggage onto the carriage, in doing so obstructing the doors so nobody gets to where they are going but ironically she is frowning at someone else. You have the 'Turtles' (i'm guilty of this) sticking their backpack into other peoples personal space and also reducing the total capacity by a few – oh the joys. And lets not forget that stranger on the left holding a bin liner with a sword hilt inside... weirdo. This is all but a fragment of who and what travels the perilous London underground. These brave souls must venture to their place of work battling odours, the ignorant and tourists with selfie sticks, whats not to make you blow your lid!

This picture was illustrated on my travels from South Wimbledon to Honor Oak Park.

Happy new year all!

If you would like more information on this drawing be it a print or a commission feel free to get in touch.

London Artwork!

Working With PHP Include : First Baby Steps For Designers - Making A Low Maintenance Website

Experiment With “Include” PHP

Maintaining a large website such as Satzuma can become time consuming.  Using “include” can take the website to the next stage of modular design. Imagine having to write 1 line of code into a php file instead of having to copy & paste the same piece of code across 70 pages, worse still… imagine that piece of code had a typo – across all 70 pages! You start to get the idea – the horror. Using PHP include can reduce the time consuming method of copy and paste, shorten time, and take your website to that next stage of design (Or look at a CMS system). With this Include method, the information you amend in one file can change across multiple webpages, just to name a couple of ideas you can use this for navigation, footers, banner adverts and much more. I cannot emphasise how much easier this will make your life when working on larger projects. Change once to  update many!

How To Go About It


As a rough example we are going to make a footer module. We also have the main document that will  “include” pull in, integrate, import a file from your website.

This tutorial/experiment will assume you already have prior knowledge of setting your website up with root folders etc, if you need some more help with this please follow these tutorials.

https://helpx.adobe.com/dreamweaver/how-to/first-website-part1.html 

Or PHP



http://php.net/manual/en/tutorial.php

You Will Need: 

 - The main file (The parent/master)
 - An external footer file (why not add some styling to your html?) 
 
 - one line of code, which you will embed into the parent folder. 
 
 - A space to upload/test your experiment. (domain and hosting)

Stage 1 - Parent File

We will treat this file as the master file, the parent which pulls in the external modules to construct the page. Remembering that if you are using this modular method for constructing your website it will make life much more efficient.

Why not call your parent file ‘master.php’ 



This image shows (with straying CSS, bleurgh! ) the master.php and Product-footer-test.html working together... or popping out of the bottom. 

Stage 2 - Footer File


I have used the footer in the example, as this area of the website has frequent updates with new products and information constantly being change and added, and it is spread across the entire website… As you can see, all styling is added to this queasy example with the accursed table! Any changes or modifications will be included in the master file once you add the “include” piece of code to the master file. So what you change here (the footer file) will be visible once you come to uploading all of the files and testing the file. So... Design and build your footer file and add you styling to it.

Stage 3 - The Simple Piece of Code to Paste Into Your Master PHP file. 

The image below shows in red where the piece of "include" code sits. So, imagine you have made a hollow space on your webpage, in the hollow space you are going to add this code to the bottom. As shown. 





Product-footer-test.html"); ?>


This will call on the footer module and all of its elements.  Once you upload your files you can see whether the footer has worked.

This visual diagram will show how the principle will work leaving aside how the coding works for the PHP include.

Hope this helps, I plan to use this much more in the future.

Happy designing...