March 23, 2009
My friends over at chillingo contacted me to cook up a 300x100 Adobe Flash animation, 300x100 gif animation of the Adobe Flash animation and a 728x90 JPG banner.
Briefing:
Since it was about iPhone i thought about integrating user interface elements of the iPhone. Since the space was quite limited I decided to go with the top bar of the iPhone user interface, which shows the carrier, time and battery status. Instead of the carrier I choose the company name chillingo. I replaced the time with the chillingo slogan, Innovate, Publish, Play.
Since this was a longer animation, I thought about integrating something that would show the current status of the animation. I choose the battery meter for the flash animation to reflect the status of the animation. I wanted to give it a nice dynamic by increasing the overall speed of the animation. All elements have been created from scratch.
Following the result of the Adobe Flash animation:
This animation turned out larger than I thought. It ended up being 148kb, too much for my taste. So I was working on the same animation and skipping the screenshot part which resulted in the following light weight version of 52kb:
After that I was working on the GIF animation which is shown below:
The final piece was a static 728x90 JPG version and no animation. The result below has been made smaller to match the dimensions of this blog:
My friends at chillingo were happy, all I care about.
Briefing:
Some ideas/phrases I want to convey:
Chillingo
Developing for iphone?
Publish through Chillingo
Want to maximise sales?
The most successful publisher ---- maybe follow with a flash-up image of Zen Bound and iDracula (like blipverts)
Since it was about iPhone i thought about integrating user interface elements of the iPhone. Since the space was quite limited I decided to go with the top bar of the iPhone user interface, which shows the carrier, time and battery status. Instead of the carrier I choose the company name chillingo. I replaced the time with the chillingo slogan, Innovate, Publish, Play.
Since this was a longer animation, I thought about integrating something that would show the current status of the animation. I choose the battery meter for the flash animation to reflect the status of the animation. I wanted to give it a nice dynamic by increasing the overall speed of the animation. All elements have been created from scratch.
Following the result of the Adobe Flash animation:
This animation turned out larger than I thought. It ended up being 148kb, too much for my taste. So I was working on the same animation and skipping the screenshot part which resulted in the following light weight version of 52kb:
After that I was working on the GIF animation which is shown below:
The final piece was a static 728x90 JPG version and no animation. The result below has been made smaller to match the dimensions of this blog:
My friends at chillingo were happy, all I care about.
March 09, 2009
Briefing:
Create a logo for Pixel Heist
Create a business card for Pixel Heist
For me as a designer it is always a challenge to create something for myself. I personally do not like designing for myself and usually pass on projects for myself to fellow designers. The reason is simple. The self criticism and try to create the perfect design for myself is at best impossible. Over the years I recognized the following symptoms when designing something for myself:
Very rarely am I 100% happy with the result.
Just when I though I was finished with a design I keep changing things around.
I spend way too much time on any given design.
This time I tried to come up with a logo and a business card for myself. I was close to passing it on to a fellow designer but I decided to just give it a shot.
An effective logo is a simple logo. That is my experience and that is how I approached the process. I tried to not spend too much time and avoid continuously changing things around. I fixed up a few sketches:
The idea was to integrate a pixel into the logo. Also some interaction of that pixel with the font itself. I am not a friend of taking the easy way of putting the object, in this case the pixel, as the dot of an i. In my eyes this is a valid practice but quite overused in logos. Even though I tried it within the sketching process, I actually took it a bit further and replaced the i completely with an object. I tried to add the scientific background I posses and been drilled with before entering the world of design. So a little lab gadget with a pixel coming out of it. I tried many variations and wanted to integrate something like an eye within the pixel. Building a relation between pixel and the eye. Sketching for quite some time I was happy with the lettering and the object hovering above the X.
I went into Adobe Illustrator and started to transfer my ideas into the digital vector world.
I played around with fonts and I was NOT happy with any of them. As a designer I accumulation/acquired a virtually infinite amount of fonts over the years.
So the decision was clear, I am going to create my own font. This is a very time consuming process but well worth the time investment if I can reach the desired vision I had for the logo.
I tried to integrate an eye within the pixel but it turned out to be not as effective as I thought. Still keeping the idea in mind I came up with the following result:
As shown above I decided to go with black and red as the primary colors, which I personally find quite powerful.
At this point I finished the design/creation of the logo. Now it is time for the business card part. For the text information on the business card (other than the logo) I used a standard font. To loosen it up a bit I used round background elements following the black and red color scheme. Following the final result I sent off to the printer:
UPDATE: 03/10/2009
I picked up the business card from the printer today I am surprisingly pleased with the design for myself :) ..
If you would like me to design your logo, business card, etc. feel free to fill out a contact form and let's talk.
Create a logo for Pixel Heist
Create a business card for Pixel Heist
For me as a designer it is always a challenge to create something for myself. I personally do not like designing for myself and usually pass on projects for myself to fellow designers. The reason is simple. The self criticism and try to create the perfect design for myself is at best impossible. Over the years I recognized the following symptoms when designing something for myself:
Very rarely am I 100% happy with the result.
Just when I though I was finished with a design I keep changing things around.
I spend way too much time on any given design.
This time I tried to come up with a logo and a business card for myself. I was close to passing it on to a fellow designer but I decided to just give it a shot.
An effective logo is a simple logo. That is my experience and that is how I approached the process. I tried to not spend too much time and avoid continuously changing things around. I fixed up a few sketches:
The idea was to integrate a pixel into the logo. Also some interaction of that pixel with the font itself. I am not a friend of taking the easy way of putting the object, in this case the pixel, as the dot of an i. In my eyes this is a valid practice but quite overused in logos. Even though I tried it within the sketching process, I actually took it a bit further and replaced the i completely with an object. I tried to add the scientific background I posses and been drilled with before entering the world of design. So a little lab gadget with a pixel coming out of it. I tried many variations and wanted to integrate something like an eye within the pixel. Building a relation between pixel and the eye. Sketching for quite some time I was happy with the lettering and the object hovering above the X.
I went into Adobe Illustrator and started to transfer my ideas into the digital vector world.
I played around with fonts and I was NOT happy with any of them. As a designer I accumulation/acquired a virtually infinite amount of fonts over the years.
So the decision was clear, I am going to create my own font. This is a very time consuming process but well worth the time investment if I can reach the desired vision I had for the logo.
I tried to integrate an eye within the pixel but it turned out to be not as effective as I thought. Still keeping the idea in mind I came up with the following result:
As shown above I decided to go with black and red as the primary colors, which I personally find quite powerful.
At this point I finished the design/creation of the logo. Now it is time for the business card part. For the text information on the business card (other than the logo) I used a standard font. To loosen it up a bit I used round background elements following the black and red color scheme. Following the final result I sent off to the printer:
UPDATE: 03/10/2009
I picked up the business card from the printer today I am surprisingly pleased with the design for myself :) ..
If you would like me to design your logo, business card, etc. feel free to fill out a contact form and let's talk.
November 01, 2008
Briefing:
This was a simple job and it didn't take much time to accomplish the requested work. The only time consuming process was to recreate the logo since the client had no other art work frm it than the referenced website screenshot.
Following the result I created. The work has been done in Adobe Photoshop CS3 and the logo is sizable just like a vector without loss of quality.
The client was happy, all I care about.
- Create a scalable version of our Logo as close to the original as possible. Referenz image:
- Keep the same look as current logo but change it to give it that web 2.0 effect.
-The Logo is trademarked and also used as a brand at partner sites so it is important that the over look stays the same.
This was a simple job and it didn't take much time to accomplish the requested work. The only time consuming process was to recreate the logo since the client had no other art work frm it than the referenced website screenshot.
Following the result I created. The work has been done in Adobe Photoshop CS3 and the logo is sizable just like a vector without loss of quality.
The client was happy, all I care about.
October 24, 2008
The client approached me after finding out about my service at iToonU.
Briefing:
This is one great example to show how my iToonU service can be employed to replace real life photographs in a professional way. All toons have been created with my Wacom Graphics Tablet in Adobe Illustrator. The results are vector images that can be used for web and print.
The client was happy with the results, all I care about.
Briefing:
iToonU the complete company staff
Put all staff in business suite
Visually separate staff by position in company by using business suite with different color combinations
Deliver toons optimized for web and print use
This is one great example to show how my iToonU service can be employed to replace real life photographs in a professional way. All toons have been created with my Wacom Graphics Tablet in Adobe Illustrator. The results are vector images that can be used for web and print.
The client was happy with the results, all I care about.
October 23, 2008
The client that I did the iHula design for approached me again and asked me to do another design project following the iHula design. I accepted since I really enjoyed designing the iHula project.
Briefing:
I created the whole project in Adobe Illustrator as vector to take advantage of lossless upsizing and possible print option down the line. I started with sketching of the dog and added the details later right within Adobe Illustrator without sketching these elements. I covered the 'cute' element with a cat sitting on the fence, watching the dog.
The following yard scene was approved by the client:
Following the splash screen including the name of the application.
I have created the 512x512 and the iPhone icon analog to these screenshots.
The client was happy with the result, all I care about.
Briefing:
We need a nodding dog
The scenery should be a backyard with elements that match the scenery
We would like to see something cute like the crab in the iHula project
Add the dog's name Charles somewhere
We need 512x512, 480x320 splash screen, 480x320 animation screens, iPhone icon
I created the whole project in Adobe Illustrator as vector to take advantage of lossless upsizing and possible print option down the line. I started with sketching of the dog and added the details later right within Adobe Illustrator without sketching these elements. I covered the 'cute' element with a cat sitting on the fence, watching the dog.
The following yard scene was approved by the client:
Following the splash screen including the name of the application.
I have created the 512x512 and the iPhone icon analog to these screenshots.
The client was happy with the result, all I care about.
October 22, 2008
Briefing:
I looked through stock designs and the internet and have not found a single hula girl that fit my vision for this project. I ended up creating my own hula girl from scratch.
I submitted the design to the client and it was approved. I created this hula girl in Adobe Illustrator to take advantage of vector scaling and possible print option down the line. To add the 'cute' element I opted for a crab. Here too, I had to create the crab from scratch. I sketched it and used Adobe Illustrator for this task as well.
Following the hula girl and the crab I have created for the client:
I added the background scenery and the following result was approved by the client:
Following the 512x512 image I created:
My vision for the splash screen was to add the iHula lettering and something funny, involving the crab. Following the result I cooked up:
The client was thrilled, all I care about. I hope the application will sell well at the Apple Store.
The idea is to to create an iPhone application that shows a tilting hula girl, just like the ones you put on your dashboard.
Make the hula girl look attractive.
Add something cute.
Create a 512x512 image, 480x320 splash screen, all 480x320 animation screens, iPhone icon.
I looked through stock designs and the internet and have not found a single hula girl that fit my vision for this project. I ended up creating my own hula girl from scratch.
I submitted the design to the client and it was approved. I created this hula girl in Adobe Illustrator to take advantage of vector scaling and possible print option down the line. To add the 'cute' element I opted for a crab. Here too, I had to create the crab from scratch. I sketched it and used Adobe Illustrator for this task as well.
Following the hula girl and the crab I have created for the client:
I added the background scenery and the following result was approved by the client:
Following the 512x512 image I created:
My vision for the splash screen was to add the iHula lettering and something funny, involving the crab. Following the result I cooked up:
The client was thrilled, all I care about. I hope the application will sell well at the Apple Store.
October 18, 2008
Briefing:
You can see the initial front page design by clicking here.
I thought of a three column design to integrate all products into the front page. Due to the width limitation each product had I could only integrate two thumbnails for the first two products and one for the last product since the logo on the bottom right was not to be changed in size.
As you can see in the initial site design there was definitely no room for any description. That needed to be cut and put on a separate page which I created as a details page.
The three columns view worked better than I initially thought and following the result I cooked up for the client (the image has been resized to fit the dimensions of this blog):
The client was happy with the result, all I care about.
Add two products with their thumbnails to the front page without changing overall appearance and dimensions of the site.
Do all programming and design necessary to accomplish this task
You can see the initial front page design by clicking here.
I thought of a three column design to integrate all products into the front page. Due to the width limitation each product had I could only integrate two thumbnails for the first two products and one for the last product since the logo on the bottom right was not to be changed in size.
As you can see in the initial site design there was definitely no room for any description. That needed to be cut and put on a separate page which I created as a details page.
The three columns view worked better than I initially thought and following the result I cooked up for the client (the image has been resized to fit the dimensions of this blog):
The client was happy with the result, all I care about.
October 09, 2008
The client is located in Germany and asked me if I would be able to work on an ad campaign for them.
I said yes and received the briefing:
Since the photo is the vocal point I made sure get a few images, the client can pick from. I submitted a view photos and I guess I am way to americanized :) after 8 years in the USA. I choose photos with a lot of expression, character and color. I had to pull it back a bit as the client said we need it a bit more conservative. I had to readjust a bit to the wants and needs for Germany :) I submitted a view more conservative images and one made the cut.
Based on this image I created the following print ad:
The client liked the result and I went ahead to get the flash animation started.
Following is the result that the client picked:
Based on this animation I created 3 additional flash banner sizes. Exported them to work as animated GIF and combined the animation to make sense as a static JPG file.
The client was happy, all I care about.
I said yes and received the briefing:
Needed:
Print: Design for postcard advertisement to give out at various places.
Flash Animation: Flash animation that matches overall design of print design in various sizes.
GIF Animation: As close as possible to the Flash animation that will be shown to visitors without Flash capabilities.
Static images: Static images of animation that will be shown to visitors without Flash capabilities.
Content:
Picture: Thoughful/Sad/Angry woman with crazy hair.
The Picture is the vocal point and needs to carry the whole ad campaign.
Text: Jolie.de/Styler, You don't Need a Man - Just a New Hair Cut
Since the photo is the vocal point I made sure get a few images, the client can pick from. I submitted a view photos and I guess I am way to americanized :) after 8 years in the USA. I choose photos with a lot of expression, character and color. I had to pull it back a bit as the client said we need it a bit more conservative. I had to readjust a bit to the wants and needs for Germany :) I submitted a view more conservative images and one made the cut.
Based on this image I created the following print ad:
The client liked the result and I went ahead to get the flash animation started.
Following is the result that the client picked:
Based on this animation I created 3 additional flash banner sizes. Exported them to work as animated GIF and combined the animation to make sense as a static JPG file.
The client was happy, all I care about.
October 03, 2008
October is the breast cancer awareness month. What better way to show my appreciation, respect and support by creating an awesome looking pink awareness ribbon. I thought of topping it by creating a whole package containing the pink ribbon in various formats so it can be used for web, desktop and print. This package is FREE for personal and non-profit use. I appreciate any help spreading and using it wherever you can.
Click here to DOWNLOAD the Pink Ribbon Awareness Pack
September 30, 2008
The client's briefing:
Following the result I delivered to the client:
The client was happy with the results, all I care about.
Brief Summary:
Redoing my branding, need a logo that is simple, clean, modern, cutting-edge, fresh. Looking for something to communicate an artistic, upscale identity.
Wants:
My color scheme is black, white, green (hex #4c6429), and I sometimes use copper in my marketing materials. Colors should be used as accent colors only, not be overpowering
Much of the time the logo will be in black and white, without color... needs to function with both (could I get the same design in BW as well?
Simple line art graphical element that I can incorporate by itself
Should be a vector graphic
Don't Wants:
3D effects
Camera or film-strip graphics
Anything that even remotely resembles clip art
Strictly wedding-oriented logo (I'm trying to appeal to family/child/senior portrait clients too)
Sappy sentimentality
Anything too corporate
Following the result I delivered to the client:
The client was happy with the results, all I care about.
Remark:
Your post will not be visible right after submission. Please allow some time for me to see and approve it.
Due to the increased number of spam comments by idiots and porn losers I am now approving comments manually. I can not risk younger visitors to my site being exposed to this crap. I apologize for the inconvenience and thank you for your understanding.
ABOUT
PixelGrinch is the site of designer Bert Stahl, who writes about design, technology, health & fitness and more.
