WebClip Icons are strictly for iPhone & iPod Touch users, but since they are quite the popular little devices, website owners might want to think about adding a WebClip icon soon. A WebClip icon is the icon that the iPhone/iPod Touch uses if a user adds your site to their (now customizable) homescreen/s. I would expect that most people who would bookmark BittBox on the iPhone would just read the RSS feed, but as a site owner, I don’t want to leave anything to chance. I want my icon to look the way I want it to look, and not rely on the iPhone to do it for me. Think of it as a really big favicon.

Read the rest of this entry »

Filed under: General Web Design | 26 Comments »

We all need inspiration every once in a while, and I have a few favorite sites I’d like to share with all of you. Some of these may be obvious, some may not, but I’m including the obvious ones because I realize a lot of people who read BittBox may be new to design. If you fall into that category, bookmark these sites (a couple of which are in my sidebar). We all get stuck sometimes, and when that happens, I like to stop everything, sit back and surf for inspiration. Or just to try and take in some new ideas.

Read the rest of this entry »

Filed under: General Web Design | 21 Comments »

Let me start of by saying that there are many different ways to do this. I’ve recently gotten a lot of emails and feedback regarding how to take the free vectors I provide, and actually use them in a web page design. There is no possible way I can entirely cover that subject with a single tutorial, so I’m going to show you a simple example to expose some key steps that might make this process a little more clear to you. It’s important to note that this tutorial requires basic knowledge of a vector graphics editor (Illustrator in my case), Photoshop, HTML, and CSS.

There are a number of reasons why vector graphics may be pushed aside in favor of photoshop when it comes to web design. One of those reasons is exactly why I wrote this tutorial. It takes a few extra steps to get an image from vector format to a webpage design, but vector graphics hold much more value in the long run. For instance, you can customize a set vector buttons for a specific website design, take all of those customized vector graphics into Photoshop, and you have your raster buttons to save for the web. However, since you started off in vector format, you can dig those buttons up a year from now and change anything you want about them, without losing a single pixel-worth of quality.

Read the rest of this entry »

Filed under: General Web Design | 24 Comments »

This is a very simple way to achieve the “fading corner” look with 2 small background images, the trick is setting it up right in your graphics editor.

There are only 2 images used in this example. A background gradient (repeated-x), and a background image for the top of the content container. The background image for the content is necessary in order to get the rounded corners. The reason this method works is because you can set the color of your page background gradient to fade into the color of your content container or wrapper.

Example:

Read the rest of this entry »

Filed under: General Web Design | 12 Comments »

Due to the responses to “Free Fading Corner Images”, I will cover how to use a fading corner with CSS.

Simple Method:

I’ve found that the simplest way to do this by using a single div with the fading corner as a background image that doesn’t repeat. Make sure in your css that you set the background image to no-repeat, and place it in the top left. I also put a 20px left padding on the content in the div.

Read the rest of this entry »

Filed under: General Web Design | 25 Comments »