Blog
Teacup
I've been on @Dribbble a lot lately. Fantasizing about what it would be like to actually get drafted and eying Jeff's shots and subsequent feedback and kudos with bitter jealousy. Of course I realize that until I post more work that is @Dribbble-worthy I really have no right to get my undies in a wad over it. In fact, it's really been motivating me to do more design lately and is entirely responsible for my latest creation: the teacup.
I've been wanting to do a teacup for some time now, and my goal was to make something that looked really polished. I used some of the same techniques I developed with my Birdie design, but this time I was working from a collection of photos I scavenged rather than a sketch.
When I was nearly finished I sent a tweet out with a snapshot of my work to get some feedback. I only got a single response, and it was from @ovall who asked if it was vectors (he also said it was amazing - thanks @ovall!) - I was immediately filled with regret for not trying to make it full vector and realized that I had been secretly disgusted at the amount of raster painting I've been using lately. I find comfort in the knowledge that this isn't for print and it's resolution is more than adequate for nearly any implementation I might imagine. At any rate I have a feeling that there are more vectors in my future.
So what do you think? I treasure feedback from people and I am always looking for ways to improve and gain insight into how other people view my work. I was thinking this would make a wicked-cool dock icon for something, any ideas? In the meantime, here's a wallpaper for you if you want it.
Thanks for looking.
- Gordon (aka - @DangerFinger)
Mint iPhone Pepper Icon
Not a fan of the icons that come with the stock Mint iPhone Pepper? Maybe you will like this one more! Basic install is very easy, although in order to get the icon to look exactly correct it requires a small modification to the Pepper itself.
This requires you to have installed the iPhone Pepper.
First you need to download the icon. Upload that PNG to the '/mint/pepper/shauninman/iphone/webclips/' directory.
Second go into your iPhone Pepper Preferences and select the newly uploaded image.
Finally, and this is optional, edit the '/mint/pepper/shauninman/iphone/class.php' file. On line 106 you should see the link tag with a rel of "apple-touch-icon" replace that with "apple-touch-icon-precomposed". All this does is removes the glare that Apple puts on the icon.
And you are done! Let me know what you think!
Here is an iPad version if you need it.
Birdie!
Lately I've been really busy at work with things that are a little more left-brained than I normally like. Lot's of project management, client interaction, and back-end code work. Between that and the demands of my family and yard (stupid springtime!) I was starting to lose track of the last time I did anything remotely artistic. I decided that something had to be done and pulled out my sketchbook and started thumbing through it. I came across a little birdie sketch I'd done recently and decided to make it properly.
I started by scanning in the sketch. I thought about doing it full vector with contours, but this time I wanted to try that airbrushy super-smooth look that seems to be so popular lately. I've played with this style before (you may have seen my fish and octopus illustrations), but I was never really satisfied with the results.
Once I got the sketch scanned in and deleted most of the background, I started adding vector shapes beneath it - using the sketch as a basic guide. The first layer of shapes were defined by color - so I ended up with 6 or 7 basic shapes. I tweaked these a little to correct for some errors in the sketch, and fiddled with the color until I found what I thought would work well.
Now that I had the basic shapes I started adding vector shapes to define shadows and highlights. I knocked the fill opacity down to 0% and in the blending options I un-checked the "Blend Clipped Layers as Group" option. I then created new raster layers and clipped them to the vector shape I created to define the shadow. I could then use the brush tool to create nice soft shadows within the shape, and define crisper edges where I wanted them. I layered several of these and used the same technique for highlights as well. I ended up with dozens of of layers and hundreds of shapes - but creating them went really quick as I've become pretty efficient with the pen tool.
Once I got all the shapes laid out I descended momentarily into tweakville - erasing and repainting the same areas over and over. I quickly realized that these were areas that didn't need to be tweaked, they needed to be redrawn. I deleted the shadow shapes entirely and recreated them - it was much better. I'm starting to realize that "tweakville" is a symptom of a problem with the design that tweaking can seldom resolve - a transplant is typically the solution. I really like the way the feet and beak turned out. The feathers make me happy too... well, most of them. I really like the new technique I'm developing, and look forward to trying it out again on another project.
Day 80 on 365PSD
Want to see some of the techniques we use in our icons? Check out day 80 on 365psd.com for an un-altered PSD of one of our newest contributions.
Cardf.ly coming soon!
We have a new web app that we have been working hard on. First release will be to the iPhone, second to the iPad and web. If you are interested in receiving updates please visit http://cardf.ly and sign up. BETA previews will be given out shortly.
Our first contest in the works
Durring the next few days we will be gathering some prizes for our very first contest.
So far, it's going to be a 2 week long contest with a 1 week voting period. After the votes are tallied first and second place winners will receive a prize.
If you are interested in contributing to the prizes please contact jeff@ekindesigns.com.
If you would like to see a specific contest please let us know in the comments.
Follow @ekindesigns for updates.
The contest will start May 1st.
New website design
After some time we decided our last design has warn its welcome. So, during the next week or two we are are going to start kicking the old design out and phasing the shiny, new, one in.
Please let us know what you think of the site and new features. If there is anything you would like to see please tell us.
Dynamic table creation with PHP 5
This is a very simple and effective solution for building dynamic tables.
// Create an XML object starting with the table tags
$table = new SimpleXMLElement('<table></table>');
// Add attributes to the table tag. Here we are adding a class.
$table->addAttribute('class','table table-data');
// Add the header row
$table_row = $table->addChild('tr');
// Add a class to the header
$table_row->addAttribute('class','table-header');
// Loop through the array and build the headers based on the array keys
foreach(array_keys($data[0]) as $head){
$row_col = $table_row->addChild('th', $head);
}
// Loop through each row in the data
foreach($data as $row){
$table_row = $table->addChild('tr');
// Loop through each column
foreach($row as $col){
$row_col = $table_row->addChild('td', $col);
}
}
// Print the HTML table on the page. This could also be returned in a function.
echo $table->asXML();Removing all the Drupal CSS files to start fresh
When designing and developing a Drupal theme it is often more time consuming for me to override all of Drupal's default CSS styles. So, after quite a bit of research I decided to make a simple solution for resetting the styles so I can really start fresh. I also found that if we just delete all of the styles Drupal and all of its modules set, we are left with some huge holes.
Below is some simple code to accomplish this in Drupal 6. Just copy and paste it in your template.php file.
function [THEME_NAME]_preprocess(&$vars, $hook) {
$css = $vars['css'];
$css_execptions = array(
'sites/all/modules/lightbox2/css/lightbox.css',
'sites/all/modules/lightbox2/css/lightbox_lite.css'
);
if(is_array($css['all']['module']))
{
foreach($css['all']['module'] as $key=>$value)
{
if(!in_array($key, $css_execptions)) unset($css['all']['module'][$key]);
}
}
$vars['styles'] = drupal_get_css($css);
}iTheme - Starting to accept beta testers
I have been working hard on our Drupal iTheme module and am getting to the point that I am going to start picking beta testers.
Please let me know if you are interested. Convince me that you are the right one for the job.
Jeff Broderick