A quick update on a current project I’m working on. I’ve been wanting to work on a cut-out type design. This is a screen capture of the work process. The idea is for the finished work to resemble paper cut out art. I want to re-sue the assets in an AE animation, but also think that I’ll be taking the vector work into Photoshop too for a variant. This is just an element of a wider design.
Companies are increasingly discovering the power that spot illustrations add to their efforts in enhancing their brand messages through creative storytelling. Whether on their websites or through their social media efforts these visual expressions of an idea add a great and unparalleled value. They say a lot about the company using them as well as adding a magical ‘pulling’ power to their blog posts, articles or other marketing efforts.
There are so many different ways of serving up an extra punch to your brand building efforts through storytelling. Illustrations can take on so many forms and so easily conform to brand guidelines such as colour palette and so on - I love creating vector style illustrations with interesting little complexities like texture or lighting or simplified shapes organised in an unexpected way; but the magic of this media is that there are innumerable styles the designer/illustrator can pursue to tell the story. Visit the illustration segment of my portfolio for a peek into vector styles or pen and ink styles. There are so many more ways to create images and I plan on posting up some more variants as I go - so keep an eye for my work. Here, in this post, I've got some doodles that I did recently.
The theme/brief for these ‘doodles’ was ‘Let’s make cloudy magic!’ and is meant to occupy an ambiguous space that encourages teamwork in work tasks and creative or inspired work in the field of cloud computing. They’re meant to be little ‘soundbites’ made to make you smile or to add inspiration when buying into that blog message you’re reading.
One of the magical elements of these kinds of illustrations, and what I mean is these illustrations being increasingly used by companies to tell a story — is that they can be either static or animated. Movement can be subtle or a little more developed. This kind of ‘fun’ will add to your brand message - no doubt about it.
Journey begins with exploring ideas in my sketchbook. I work in a very rough and basic way - just getting the idea down. Refining these ideas into better sketches can happen later, but I just focus on plucking these ideas out of my head and onto paper. As many as I can put down.
I then choose the ones I want to take forward and develop, I sketch these ideas directly into photoshop with my Wacom pen using the sketchbook as reference.
For these doodles I chose to stay in Photoshop, I digitally inked the sketches and produced variants of the doodle. From plain ‘pen and ink’ to coloured variants. Here are the doodles for ‘Let’s make cloudy magic’:
Final of ‘I AM the city’. I wanted to combine techniques, to merge images into a kind of parallax, a play between figure and ground and back again. I started painting, rendering her in greys with a singular brush. Allowing my brush strokes to been seen at times. In Taiwan I learnt that temples reflect that the Dragon is on the left and the Tiger is on the right. The centre door is the god’s entrance, while the door on the left is the dragon door and the door on the right is the tiger door. Something I learnt a little too late and got myself a dragon tattooed on my right arm - I guess I could say that I’m always going in. Anyway, I painted a dragon rising out of her jacket, as if the motif were coming alive. It’s smoky and ethereal. The tiger is on the right and still static, maybe it’ll jump into life soon. Colour is worked into the image and the city has been played on top and under the painted base. I’ve painted in defining lines over the top most layer for some definition.
Work in progress for new illustration, hoping to have the final variations up soonish. Still rendering and painting her, she’ll form the base over which I’ll continue to work over. I’ve included a video snippet of the paint process on her face.
I don't think I've ever spoken to a designer or developer who loves how CSS manages layout issues, we understand it and manipulate CSS to obey us but I think we all dislike how it works. BUT WAIT! The CSS gods have heard our cries, tada! CSS Grids are now gaining widespread support in most if not all browsers - of course I suppose we'll still have to use HTML tables to craft our emails cause email apps are sadly stuck in the dark ages but maybe one day that'll change too.
Using CSS grids closely resembles how graphic designers approach grids, this means creating layouts are not only easier in HTML/CSS but also mirror how a designer thinks about working with space. All that frustration when building a webpage layout flies out of the window, we can easily port over that mathematical structure you lovingly crafted in your visual design. Here's the HTML I created for a basic structure - bear in mind this was using columns and rows similar to any grid structure I might have built in any other creative app and without manipulating floats or absolute/relative positioning in any way.
<link rel="stylesheet" href="styles.css">
<div class="grid header">header</div>
<div class="grid sidebar">sidebar</div>
<div class="grid content">content</div>
<div class="grid extra">extra</div>
<div class="grid footer">footer</div>
The divs are in a nested structure, the container div will be declared as a grid within the CSS. The classes define the layout for each grid div. The external CSS file uses CSS grids, here is the CSS file content:
grid-template-columns: 1fr 3fr;
If you copy and paste the two different portions into a .html and styles.css file respectively and then open up the html file in a browser you'll be able to see how I put together a basic structure with CSS grids. Simply.
Listening to the Foals on the road home through the Southdowns brought this about.