Creative Leak Designs Blog

November Calendar Wallpaper Design

admin — Fri, 31 Oct 2008 21:39:20 +0000

Every month I like to submit to Smashing Magazine’s wallpaper showcase. It gives me a chance to do some illustration work strictly for fun. Below is my November design.

With November starting and December right around the corner this is by far my favorite time of the year. Even though we only get snow in Houston every 7 years, I’m always hopeful that it will come. Twice in my life my hopes became reality.

Below are links for you to download this wallpaper in different formats. So slap this onto your computer and enjoy a month of football, eating and awesome weather!

Download with Calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200
Download without Calendar: 1280×960, 1600×1200, 1680×1050, 1920×1200

Updating a Photo Gallery on your Site from your Phone

admin — Sat, 11 Oct 2008 03:31:23 +0000

Recently my wife and I had a baby and I wanted my family members from out of state to see him. Usually, I’m pretty bad about remembering to take photos and uploading them somewhere for people to view but once I started emailing them to Flickr, I started taking more pictures. Then, I realized that I can have them pull directly into my own site from Flickr and now I upload even more photos. Since I was able to do this, my family got to go directly to my site and see eveything that was gong on with the baby as it happened (except the graphic photos - I learned in health class that nobody wants to see that).

This is really all you have to do:

1. Get a Flickr account: http://www.flickr.com

2. Find your upload email address that Flickr gives you:
http://www.flickr.com/account/?tab=email
From here you can take pictures from your phone, send them to the email address given from Flickr, and they will pull onto your Flickr stream.

3. Create a Flickr badge: http://www.flickr.com/badge.gne
You will go through 5 steps to create your badge. Make sure you select an html badge in step one and that you select ‘none’ for orientation in step 3. This way you can style it yourself.

4. The final step will give you code to add to your site. Copy and paste it into your site.

5. Edit the code to make the images show the way you would like instead of in a tall vertical line.

I changed these lines:
#flickr_badge_uber_wrapper {text-align:center; width:260px;}

.flickr_badge_image img {border: 1px solid black !important; float: left; width: 250px; height: auto;}
#flickr_badge_wrapper {background-color:none;border:none; width: 570px; float: left;}

Now The images are all the same height, when it is updated they all move over and still look fine, and they fill up the space that I wanted.
http://www.creativeleakdesigns.com/photos/

Create a Repeating Background with a Complicated Texture

admin — Sun, 05 Oct 2008 17:28:23 +0000

If you code your designs then you know that the file size of your images is a huge deal and you want to keep them as small as possible. On the other hand, you want your designs to look awesome so you have to figure out ways to repeat backgrounds instead of applying one large one into you design. Below is the process that I go through when I want to create a tile that repeats a complicated background.

1. Find a texture that you want to repeat.
For this, I used a texture from Blualien on Flickr. I liked it because it’s very interesting and making it repeat seamlessly looks a little difficult. That shoud make for a good example.

2. Copy the image and place it directly on the side of your first image.
After you copy it, put a guide line between the two images and then merge the two layers. Your guide line is there because you are going to split the two layers up again in a second.

3. Clone pieces of the image so you can’t see the seam line.

First hide your guides (ctrl+h). Then select your image (ctrl+click the layer *or select with your marquee tool (m)). Once your images is selected, use the clone tool (s) to hide the seam line. I usually use the clone tool with the brush size at about 45 and the opacity at 80%. With your clone tool, select an area to the left (alt+click) and brush over the line. It should end up looking like this:

4. Split up your new image.

Now that you have your image looking like one solid piece, turn you guides back on (ctrl+h) and cut the image in half again. (select one half and press ctrl+shift+j). Next, move the second image back on top of the original image. Then in the top layer select the right half of the image and delete it and merge the two layers. It should look like one solid piece again. By this point, you can duplicate the image to the left and right and it will repeat smoothly.

5. Repeat all steps vertically

Create a guideline below the image, duplicate the image, and place the top layer below your original image.

6. Clone over the seam line

Merge the two layers first and select the whole image. Then use the clone tool and clone pieces of the image over the seamline until it is seamless like below:

7. Finalize the tile

Just like with the horizontal repetition, cut the image in half by turning your guidelines back on, select the bottom half of the image and hit ctrl+shift+j. Put your new image above the original and delete the bottom half of the top layer. It shuold look like one solid piece.

7. Duplicate the image to the left, right, top and bottom.

Now, you can export the image out as a background and have it repeat along the x and y axis like below. With any complicated texture, you will still know that it is repeated but nobody will know exactly where the seam is where it’s repeated. This will reduce your file size and still let you repeat a cool texture.

Fitness First Health Clubs launches a Creative Leak Design

admin — Wed, 03 Sep 2008 21:57:17 +0000

Fitness First, a chain of Health Clubs in the Maryland, Washington DC and Virginia area has just launched a new website with eCoastStudios showcasing it’s new Creative Leak Design.

The new design for the site now targets important information for current and existing club members right up front. New elements include class schedules, locations and facility tours to give the site visitor a view inside the clubs and the classes.

The clubs have so many great features that set them apart from other gyms including multiple locations for one monthly price and the personal attention that all members receive from the staff and Fitness First trainers. Not only did we want to highlight this information, we wanted to get people excited to work out at Fitness First.

Take a tour around the new site, and if you are in the area, take a tour around one of the clubs! We would love for you to join the Fitness First family. Request a free guest pass to get started.

September Wallpaper - Dangerous Dinner

admin — Tue, 02 Sep 2008 02:09:33 +0000

This wallpaper illustration was created for Smashing Magazine’s monthly wallpaper showcase. It is about the underdog and never underestimating him. Download all sizes below:

Download: 1920×1200 1680×1050 1600×1200 1280×960

Tim Newton Painting, Fishing with Dad, Tattooed on a Man’s Leg

admin — Thu, 28 Aug 2008 04:41:33 +0000

About two years ago, I painted Fishing with Dad in honor of my dad who passed away in 2001. I told the story of how he was very supportive of my art and music and how I really enjoyed the time that I could have with him. That has always been one of my favorite paintings because it still touches me and my family in a certain way – We all really miss him.

Recently I received a comment on Creativeleak.com saying that somebody got the painting inked on their leg. I was so surprised and asked to see a photo of it. Brian, from Philadelphia, recently got the tattoo to symbolize his relationship with his son. His comment on the site said this:

“I have to tell you Tim, I just had this painting inked on my leg. I looked for a year for a tattoo but, I couldn’t find something that worked for me .Your painting was dead on. I hope you don’t take issue to me using it but, I want to thank you for it. My son, who is 5 loves it and now i have something that we have together besides fishing. Thanks again.”

I love to tell stories - that’s why I paint and play music. It is fascinating to me that through stories, we can all relate and connect to each other. I feel honored that Brian felt a connection to this painting and that it was a good symbolic representation of the relationship with his son.

Coincidentally, my wife is pregnant and we found out the day after I received the comment about the tattoo that we are having a boy - Our first child. Needless to say, it has been a great week. I look forward to the day when I can take my son fishing and paint about that. Although I think I’ll have plenty of paintings about him before that day comes.

For more from the tattoo artist, view Kris Smith’s work

The Jewelry Lady Illustration - Step by Step

admin — Mon, 25 Aug 2008 04:54:20 +0000

The Premier Jewelry Lady is a picture that I have done using only Adobe Illustrator. With vector graphics you do not get the type of shading that you would get from using Photoshop or your own hands but with simple techniques of layering you can come up with effects that give the illusion of shading but also give a clean, sharp look. Below is the step by step process of creating this piece.

First, I always start off with a thumbnail sketch. Whether it is a painting or a design I always start with one so you can see the composition before you start getting into it. But with Illustrator this is extremely important because you will be using this drawing to outline your pieces.

After I have my sketch I import it into Illustrator and give it its own layer. When I start creating multiple layers, I always have this one on top with a transparency of about 40% so I can turn it on and off and keep my lines exactly on the drawing.

The first thing I start doing with the actual artwork is apply the bottom layer as a simple shape. Each layer really is just a bunch of shapes on top of each other just like in painting. You want to start with the basic shape and keep adding colors with smaller shapes to give the illusion of shading without using the gradient tool.

Here is the first layer of shading. The reason I don’t use the gradient tool or the mesh tool is because for me it’s so clean that it’s cheesy. You know what I mean? Sometimes it looks good but for me, I just stay away from those. As you see, the shapes of darker yellow already give the hair body and form so the more you add, the more solid it becomes.

I always say that using illustrator adds instant satisfaction and this is the reason. I am 20 minutes into the project and I get excited on steps like these: It’s looking great and I know it’s about to look even better.

Here is the last bit of shadow that I am applying to the hair. I plan on doing this to every piece of this picture so this is the only part where I will go step by step into this type of shadow. You’ll notice that every time I added a layer, the shapes got smaller inside of the previous shape that I added. This gives the shape body.

Last, I add the hilights. It’s the same idea of creating smaller shapes inside, but you just go lighter instead. A lot of this has to do with knowledge of painting so you will have to understand where your light source is before you create the shading or else it will not make sense visually.

Ok so we have a head…now I am going to add her body. On the dress, I did the same effect as the hair but I used larger shapes as folds and I used a smaller amount of shapes to give it a satin look. To give her the right folds, you have to visualize where her movements are and think about how clothing would drape on top of those movements and then how the lights would hit each part. After that, I add arms and she is finished…Well almost. I need to add accessories.

By this point, I have about 6 illustrator layers and about 100 actual pieces to her. The reason I say illustrator layers is because I create a new layer every time I start a new part of the girl. I have one layer as the hair, one as the head, the dress, the arms, the accessories and the sketch on top. This way I can lock layers that I’m not using and work on sections at a time if I need to go in and fix anything. Also it helps to stay organized.

Next I start adding background pieces. The jewelry box is again just shapes on top of shapes. I used three colors in all for the outside of the box: red, lighter red, and lighter red. You’ll see that I did that just to give it a highlight. It’s pretty easy once you start to get the hang of it.

Next I create each piece of jewelry. First on the necklace, I created a white line with a copy of it behind it but as a grey. To do the shine, I just create really skinny triangles on top of each other than I add white circles on top of that. I then grab the circle and add a gaussian blur and you get a shine. For the diamonds, I put extremely small circles next to each other and made them different colors of white and grey. Mostly white though. Then I add the shines and you get a diamond necklace. For the second necklace, the chrome piece was started by making the basic shape a color of grey. Then I add smooth shapes of dark and light colors. Chrome doesn’t really have smooth shading so you need to make sure that the colors right next to each other have a harsh contrast

For the last part, I create the background. You don’t want it to overpower the foreground so you make the shapes extremely simple and have almost no shading. Then, use lots of pastel colors to keep it in the back. Last, you grab the whole background layer and you give it a slight blur to give it that depth perception and that’s basically it. The thing to remember is that these are all just shapes. It takes some practice and understanding of light source and composition but after you get the hang of it, it is a lot of fun.

Creative Leak Designs is Up and Running

admin — Tue, 19 Aug 2008 19:53:59 +0000

For the past few years, I have been at Schipul - the Web Marketing Company as a designer first and then Creative Director. I have learned a lot from Schipul and the people there but it is now time to move on to running my own shop - mainly because I have a new baby boy on the way and I want to have the time flexibility to be with the new addition to my family. Also, i really love doing this stuff.

Over the weekend, my new site went up: http://www.creativeleakdesigns.com. In it, you will find portfolio pieces, services that I offer with design and information about me and the company. It will be a work in progress over the next few months so keep checking in to see updates.

Please feel free to also contact me about the site. Your feedback is always welcome.

Thanks -Tim Newton

Layering Images - The Secret to a Long Lasting Design

admin — Sun, 10 Aug 2008 06:10:11 +0000

Design on the internet goes in phases according to what’s cool at the moment. It’s not that we’re conforming to what’s popular but once the style is established, you pretty much have to follow because every client wants what is modern to look modern. Not long ago, the style was very glossy with many reflections but now the modern element is grunge. Of course, if you follow what’s modern and are on the edge, you do run the risk of looking dated as soon as the style is over. This can be a good thing if you’re designing for clients and are constantly updating their site. However, if you need the design to last then you need to do something a little different.

Think about clothes. Many people are embarrassed when they look at themselves in the 80’s because of how they were dressed. Most of the people who are embarrassed were the stylish people because they followed trends and were on the edge of what was modern at the time. More conservative people look about the same now as they did then (when referring to clothes and hair). What was normal then is normal now and will be normal for many years: solid colors, collar shirts, plain jeans or kakis, etc. But an element that both groups of people could use then and now without ever looking out dated is layering: layering with jackets, shirts under sweaters, cardigans over tank tops, etc.

Layering is also one thing that will last in design no matter what style you put it with. Layering automatically adds more depth to a design so instantly it is more complex. Take the Houston Zoo design that I designed while working as a designer at Schipul. I went into the planning knowing that I wanted to give the feeling of actually being there so I needed many layers to make it complex and look real. If you’re looking at depth and start on the lowest layer, then you visually have about five layers before you even get to paper background. Because of that, I know the design will last even when the grunge phase is over (since there are many grunge elements on this particular design).

Things you can do to have the look of layering:

1. Shadows. Understand where your light source is coming from and use shadows accordingly. I like to manually create shadows using shapes because it gives me more flexibility but the Photoshop shadows that you add from double clicking a layer will work just as well.

2. Color Differences. If many layers have the same color, give the layers closer to the bottom a darker tone. In the Zoo example, I made some of the leaves black silhouettes to look further away. In Photoshop, I like to duplicate layers, select the bottom layer, hit ctrl+U, and take the lightness down a little.

3. Details of imagery. Give layers closer to the top more detail and then make layers that are further back shapes with less detail. This goes back to the leaf silhouettes. The black leaves also look further away because they have no detail when compared to the leaves near the top.

When you think about layering, you don’t have to save it for designs with many illustrations or for grungy designs with heavy imagery. Even the web 2.0 designs that use visual layers seem more complex and in turn, better designed. Try even adding a shadow behind an image and then a platform with a shadow behind the image with the shadow. It will give the look of your content much more depth.

Wallpaper Downloads

admin — Sun, 22 Jun 2008 00:50:41 +0000

Below are three wallpaper designs that were designed for Smashing Magazine’s monthly showcase. Feel free to download them and set them as your background.

Flying Man

Download: 1920×1200 1680×1050 1600×1200 1280×960

The Flying Man is an illustration about things in life changing. Changes are usually great and exciting but many times there are uncontrollable elements that make the changes difficult.

Stay Creative

Download: 1920×1200 1680×1050 1600×1200 1280×960

The Stay Creative wallpaper is based on the Picasso quote, “All children are artists. The problem is how to remain an artist once he grows up.” The man in the illustration is looking back on his creativity as a child trying to figure out how to get it back.

The Concrete Jungle

Download: 1920×1200 1680×1050 1600×1200 1280×960

The Concrete Jungle is about an elephent who is trying to leave his home because of it becoming a parking lot. The problem is that wherever he goes, there is more concrete and his options are becoming very limited.