Goodbye Poster

Long time no post, as I can’t reveal anything from the project I’m currently working on.
Instead just a quick thing in between - a goodbye poster for a colleague who was leaving.
Because we all feel better with a goodbye poster signed by the team mates, and honesty who doesn’t like trashy unicorn-fluffy-birds?!

Leaves some space for signing and can be re-used for any leaving team mates.

RAINBOW SUGAR SHOCK YOU SAID
I feel ya, you’re home here.


Complete eBook. Grab it, it’s free!

I’m excited to share my work on the eBook ‘The JavaScript Web Development Revolution - How Technologies Like ReactJS and Serverless Computing Will Change the World’!

I was working on all design parts of the book: Cover, illustrations and graphics, color concept, font choices & complete layout of all 41 pages. I am very happy with the workflow and result and hope to work on even more eBooks in the future.


Concept Sketches to final Illustrations

Concept

Illustration

Concept

Illustration

Alternative Cover Concept

Cover Concept

Illustration


Color Concept

I love creating color concepts. I received the company’s CI including their main logo color and created color compositions around it. That’s partly a very technical step, going for standard contrasts which always work well, and partly plain experimental. Insight:

Icons, Infographics, Details

I created some additional infographics, icons and shapes for the layout of the eBook. 

Grab your free copy!

You can download the full eBook here for free: scrivito.com/eBook

Client: Scrivito / Infopark AG


Grand Rin Rummy: New Years Animation

I haven’t posted in a long while as most stuff I was working on is secret so far.
But here’s something I can show in between: some screens and animations for the Grand Gin Rummy app.


animation preview

First I created a preview animation and later rebuild it in Unity 3D, where the animation functions are limited - so when creating an animation preview with After Effects, I always have to keep in mind tu only use basic animation functions like translation, rotation, opacity and nothing too fancy. The animation is shown in the big main tile of the app’s home screen on mobile and facebook:




Ice Ice Baby

Another Special for Grand Gin Rummy! As in the past specials I was responsible for offering some concepts and then creating and implementing the assets - this time with the allowance to go a bit off-style and create more attention. 

Goodbye styleguide colors - a dream in pastel

With that freedom, I could go a bit crazy and created some quick drafts. As the special was a bit spontaneous, I got great support from my UI colleague, who created the shop graphics with my assets and also drew that cute ice cream cone in the bellhops hand.

For the first time I also got the chance to overpaint our mascot, the bellhop. Normally changes in our mascot and bigger illustrations would be done by our inhouse-illustrators but this time there was zero time left. As we normally don’t overpaint our mascot for small specials it would have been fine just without a change, but after finishing concept and assets for this special there was still a bit time left until the build, so I got the the chance to try if I can do it. 

Illustration? Challenge accepted

By got the chance, I mean inviting and advertising myself to get the task, because sometimes you need to just say what you want. So if I wouldn’t have taken the chance to at least try it, we could just have used the regular mascot version. I took the standard version and turned him into a ice cream seller, so that we had a small story together with the typical awning. With the great feedback I got, I created three idles of this mascot version. They got approved and are all used within our app - success!

My first draft for a quick change

older version of our mascot turned into an ice cream seller

Final poses and single assets

Credits: Original mascot version by Sammy Mansour, who also gave me great feedback for my concepts. Ice cream cone in the hand: Stefan Chavdarov.


Jackpot!

One of our newest features in the Grand Gin Rummy app is the Jackpot! Beneath other things, I had the pleasure to be responsible for the main visual, which was a lot of fun! 

Explorations I

First, thinking of a Jackpot, the idea was an actual pot, so I spend the first day with some scribbles and ideas how a jackpot could look like, including editing old assets likeI also created a quick exploration for the dashboard animation with coins falling down into the pot as a sign for an increasing jackpot, combined with a counter.Then the briefing changed to create a safe as main visual which was great, as this brings a direct connection to our storytelling in the hotel. 

Explorations II

Together with my colleague I explored possible perspectives for the safe (matching the floor/carpet) as well as different styles for the safe. Based on some of the research images, a tendency for black/whitegold safes appeared and became a strong favourite. In my eyes, this color combination was way to close to our Tournaments color scheme (which is… black/whitegold ;-) ), so I added more color combinations from our styleguide with a focus on a warm gold like our bell asset. I’m glad I could convince my mates here, so that we went for a warm gold/magenta version in the end! As we agreed on the basics, I created the safe in the chosen perspective from flat colors to rendered.

Variants

So.much.fun. I applied different handles, number wheels, color combinations, feet, different pattern/frames on the door. Finally my colleagues, who were working on the screens for the Jackpot, integrated my visual and I’m very happy with it.

Variations

From flat to rendered

Different items

Detail of the number wheel

Sidebar Icon

For our Sidebar and menu header we needed a minimal icon of the jackpot as well. I created some quick icons in Illustrator and went with different ideas. The sidebar icon is super small and the problem I needed so solve there was to find an easy symbol which is not confusing with similar icons. Example: The number wheel easily looks like a gear-wheel and would make the user think of settings instead of a jackpot/safe.

In the end I got the idea to go for a safe with a keyhole - sure, the safe in the visual doesn’t have a keyhole, still it represents the locking mechanism and is working well in small sizes.

Sidebar Explorations

Final Icon

Teamwork! Credits: Coins - Sammy Mansour, Animation - Stefan Chavdarov, Dashboard/Leaderboard UI and Visual Support: Enrico Schmidt, Main Menu Teaser Bar: Esko Kolb, Technical Artist: Robert Schneider. Fabric inside the safe was taken from the Level-up suitcase.



Unlocked Indicator

A short entry for today: We needed an indicator for new or unlocked content, i.e. after a level-up. 
Every time the user returns to the main menu after unlocking new content, this overlay is shown. 
I uploaded the preview graphics here, final animations were done in Unity 3D. To keep things simple and in style, it’s inspired by the ingame ‘knock’ button in a more simplified way.


Main Menu: XP Bonus Indicator

We wanted to add a bonus in experience points on higher stakes, so I created some drafts how we could display the bonus in the very narrow space in the Stake Selection.

As I created the XP icon in 3D, I also created some drafts with XP stacks in perspective, unfortunately they didn’t make it into the app. In the end we went for the small indicator at the top. 
I also created a draft for putting the Chip Balance into the leathern top bar which is live in the app now!


XP-Icon or how to struggle with Blender

Me: “Oh, I really should learn to use Blender. It’s a free 3D software and I possibly can create cool stuff with it!”
Also me: opening Blender, looking at the Interface and immediately closing it again.

This happened so often! A part of me really wanted to learn it, but I also remembered my 3D classes for Autodesk Maya at university - I suffered. Besides, there was no convenient reason to learn it, as I’ll most likely never work as an 3D artist.

Now I had the chance to learn it at work. We needed a 3D icon but only had 2D artists working in our team, so I took my chances. To understand my background: I really suck at 3D. During studies, I only visited the mandatory classes for 1 year and was happy to focus on other things afterwards. For example, this was my first animation test from study (animation class 6 years ago):

Still, working on a super simple object (basically a cube) seemed to be a good chance of getting back to all the basics! 

Concept phase

But first, I created plenty of (2D-) concepts for the new icon. Starting points:

  • matching the existing coin icon.
  • but don’t look too similar to the coin icon.
  • turnable in the same way.
  • similar contrast .

Here are some of the concepts I created:

After deciding for the final shape and pattern, I did some color explorations as well. The idea was also to bring a new color into our app for the whole new category. Blue became a quick favourite and was in the end applied to the XP-icon and XP-bar.

3D Learnings

Basics

Coming from Autodesk Maya, it took me a while getting used to the new controls and shortcuts. I found out way too late, that some of the controls easily can get changed to Maya controls, so the first hours I basically used the wrong controls followed by CMD+Z followed by another try. 

Apart from that of, most things of curse have the same principle, i.e. loading the sketch into Blender, extrude faces, UV mapping etc.

Lightning & Rendering

This step might be a bit unusual. The lighting of our coin was done in Photoshop using the 3D functions - to keep it the same, I used the same setting and same angles for the rendering. Also, this way the 3D file is accessible in Photoshop for other artists in a program they know.

For me this means that I’ll experiment with the Cycle Render, as I didn’t have the chance to try it properly during this task.

Minimalist version of the icon for our help menu

For the help screen, I created a minimal 1-color/negative space version of the XP-Icon:



Wedding Card / Infographic

Preview and color variant

Two friends of me got married and invited me to a wonderful wedding at a castle this weekend! 
For their wedding card I was also drawing an infographic-card with 3 ideas how to spend the money ;-)
I tried some color various and test-printed them in a small size before printing the final one in A4. It’s in german, but I hope you can enjoy the graphic anyway. All text is handwritten in this one.

Get in contact if you would like me to create an infographic / card for as well.


Portrait Practice

Currently I have a lot of work, so for today here’s something from last year which I never posted. I normally like to draw flat illustrations or in a cartoony style, but sometimes it overcomes me to just paint! 

Apparently I also saved some process files, so I created a gif! As always, there you can see what my sketches usually look like xD

Have a good week! 


XP Concept Animations

This is a follow-up entry on GGR: New Avatars where I explain my work on the new XP & level-up feature. Today I focus on the XP-bar, the level-up and the concept for the chest-opening, which, in our case, is a suitcase.

Concept Animations

Including the XP-bar into the avatar was the first idea and in this case, the first idea made it into the app. I created some rough animations I created for the process of gaining XP (with a placeholder for the XP-icon). 

Better quality (HD) video here: https://vimeo.com/224715732

I really like creating animations, especially in after effects and I’m a big fan of null layers and expressions! In this case, I created the base files and made them easy usable for other artists as well. All significant animated layers could get handled via Slider Controls.

left/center: early concepts, right: late concept (teamwork)

I also created the early concept for the result flow where the users sees that he’s getting XP and maybe eben a bonus. For the chest opening, I created the early concept for the opening and in the end we went with the perspective version and my colleagues created a very nice suitcase and reward process while I was working on the XP-Icon. My next blog entry will show the progress of creating that XP icon or: how to struggle with Blender for the first time.

early concept for the reward opening animation


New Avatars

I was working on the look and animations for an XP progress indicator which involved changes on the avatar itself, too.

From Rank to XP

Instead of Seasons and a rank-based system, we changed to a level-up system. My job was to find a solution for the exchange: getting rid of the old system (rank and stars in the avatar) and instead adding an indicator for the level and the XP the user currently has. Knowing from myself I want to know how far I’m away from the next level-up, I came up with the progress bar included into the avatar. This bar would be involved in the level-up, where I had some ideas for the animation. 

Style Exploration

I explored some styles for both the XP-bar and the plate showing the user’s level. Having a new indicator in the game made us wondering if we should bring a new color to the game, too, instead of strictly sticking to the color styleguide. I also tested it on a darker background, as we planned a darker screen for the level-up.

The avatar we ended up with got tested on all screens and comes in different versions. The full version contains the two loose parts of the circle - I kept them because I wanted them to be animated in the level-up.
During tournaments, the game comes in a black/whitegold-look, so I adapted the new logo to the tournament-style as well. These are the new avatars in the default and tournament look:

I was working on the look and animations for an XP progress indicator which involved changes on the avatar itself, too.

From Rank to XP

Instead of Seasons and a rank-based system, we changed to a level-up system. My job was to find a solution for the exchange: getting rid of the old system (rank and stars in the avatar) and instead adding an indicator for the level and the XP the user currently has. Knowing from myself I want to know how far I’m away from the next level-up, I came up with the progress bar included into the avatar. This bar would be involved in the level-up, where I had some ideas for the animation. 

Style Exploration

I explored some styles for both the XP-bar and the plate showing the user’s level. Having a new indicator in the game made us wondering if we should bring a new color to the game, too, instead of strictly sticking to the color styleguide. I also tested it on a darker background, as we planned a darker screen for the level-up.

The avatar we ended up with got tested on all screens and comes in different versions. The full version contains the two loose parts of the circle - I kept them because I wanted them to be animated in the level-up.
During tournaments, the game comes in a black/whitegold-look, so I adapted the new logo to the tournament-style as well. These are the new avatars in the default and tournament look:

Lead Artist: Esko Kolb


Grand Gin Rummy - level up!

The last weeks I’ve been working on a big new feature for the Grand Gin Rummy App, which just got released. As I not only like mobile games but video games as well, I’m a big fan of any system which provides gaining experience to level up. And that’s exactly what’s new now! 


Here’s a sneak peak of the new feature (there’s sound, too):

This is the biggest update for our app so far, so I’ll post the process in pieces. 

As a quick overview I worked on the new avatar, result flow, the XP bar, the level-up, the chest opening and the xp icon itself. On some of these parts I only participated a litte, others I worked on 100%. I’ll cut down the process in upcoming post and will show some my work from concept to final. 

Overall it was an awesome team effort, also greatly supported by our developers who always help us with the integration and testing of the final assets.


Gaining XP

Early Level-up concept



Father’s Day Special


Since our Father’s Day Special already was live, I can publish my work here now. I created the graphics for the special which this time includes the offer popup and the shop entry for mobile and facebook. 

created illustrations, partly from the concept phase

left: concept. center+right: live screens

This time I was allowed to layout it a bit more free than in previous specials to keep it interesting. Exporting, slicing and integration into Unity was part of the process. I had a warm, vintage-ish color style in mind (matching the old photos). In the end colors got changed to blue to avoid a too feminine appearance. But I’m happy that the ‘out of the box’ graphics like the photos and hat made it into the live version.

Lead Art: Esko Kolb


Comic Collab #69 ‘Forest’

For the first time I participated in the Comic Collab initiated by german comic artist Schlogger. The topic for this month was ‘forest’. As the initiative is german, I uploaded my comic in german - but there’s an english version at the end of this blog post as well.

Over the rest of the day, I’ll link of other artists who joined the Comic Collab this month here as well:


ENGLISH VERSION OF THE COMIC:

english version


Sunday Doodles

For practising a render technique for illustrations (2D) I created some assets in flat shapes only to add light and shadows later. I’ll create more assets and composite them all togehter into one scene.

As I’m working on the Grand Gin Rummy mobile game which plays in a hotel, the choice of my theme might’ve been influenced by that a tiny bit ;-)






Grand Gin Rummy Valentine’s Special


Now where the Valentine’s Day is over, I can show you my latest work for Grand Gin Rummy. Currently we a running a special Valentine’s Table with higher stakes. I was responsible for all ingame graphics and I enjoyed working on it! .

Card Back

I started with card backs containing a central icon which expands to the corners, like we had it in our previous ‘4th of July’ Special. As main symbols I worked with flowers and hearts. I created graphics starting from the center, the corners and created patterns as well.

explorations

We decided to go for a heart pattern, so I improved the shape and worked on the color combinations. Parallel I worked on the ingame background and created frames as overlay for our default background.

background explorations

special shop entry

Also have a look at the banners the marketing team created with my assets:

Using Format