November Calendar Wallpaper Design

October 31st, 2008

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!

Cold Approaching Wallpaper

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

October 10th, 2008

Photo Stream from FlickrRecently 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

October 5th, 2008

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.

Texture Step 1 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.

Texture Step 2

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:

Texture Step 3

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.

Texture Step 4

5. Repeat all steps vertically

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

Texture Step 5

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:

Texture Step 6

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.

Texture Step 7

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.

Final

Fitness First Health Clubs launches a Creative Leak Design

September 3rd, 2008

Fitness First Health Club Website

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

September 1st, 2008

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:

September Wallpaper - Dangerous Dinner

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