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.

All you have to do to create your icon is make a 57 x 57px png icon, name it “apple-touch-icon.png” and place it in the root directory of your site. You don’t even need to worry about adding the glossy highlight or round corners, the iPhone does all that for you. Safari on the iPhone will now recognize your icon when a user adds your site to their homescreen. The image below is the icon in my root directory. Notice that it’s completely square, and has no reflection, compared to what you actually see on the phone (above).

If you want to read more about WebClip icons, TUAW has a great post with some links to websites where you can make/submit your icons.

a

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.

My 2 Favorites (by far):

These 2 sites are more like a goal to me. Both of these artists are not only cutting edge, but on top of their game and highly-sought-after. I love the style and I find their work inspiring and incredibly eye-pleasing.

Neil Duerden :: Farm

A self confessed mac monkey based in a rural miners cottage 20 miles north of Manchester (UK), I create pieces that combine elements from mixed media, photography that are interlaced with complex vectors to create pieces that always hit the brief for clients all around the world.

Radim Malinic – Brand Nu

Radim Malinic, the creative force behind Brand Nu, prides himself on his artistic sensibility. His work has been described as imaginative, sophisticated, sensual and sexy. While his goal is to fulfill the needs of his client, he creates contemporary visions that are a complex montage of layered photographic and colorful elements. His award winning creations could be and have been used in books, magazines, corporate identity, CD?s and DVD?s, posters, and fine art picture collectionslist full of returning custom.

Album Art

Sometimes I like to search for album art or CD cover art to find inspiration. My preferences align well with a lot of album artwork so I find this type of artwork useful in order to gather ideas to use in things I do. (which doesn’t include CD art).

Typically, I use 2 different ways to view album art, the first Being Flickr (I find it to be more accurate). I usually just do a search for Album Cover, and Album Art. I’m always surprised at some of the wicked album covers I’ve never seen. There is some really interesting stuff to look at in the world of album art. Seriously, why or how else would you get to see these miniature works of art, unless you bought the album, or it was so famous that it reaches iconic status? I think album art is a very untapped source for inspiration.

Second, I sometimes do a Google Image Search for Album Cover to see what I can find. It’s way less accurate than Flickr, but lots more results. Also, the site containing the image you click on sometimes has more than one, and maybe even a gallery of covers.

Design Tutorial Blogs:

A lot of tutorial blogs often make collections of “good” designs for us to look at for inspiration. Here are some that I’ve found.

Smashing Magazine

50 Beautiful CSS – Based Web Designs in 2006

45 Fresh, Clean and Impressive Designs

30 Dark Designs you Should’ve Seen

83 Beautiful WordPress Themes You (Probably) Haven’t Seen

TutorialBlog

30 Great Website Designs (Part 1)

30 Blue Websites

30 Red Websites

30 Green Websites

CSS Design Galleries:

I like to browse CSS design galleries, not only to see some excellent CSS in action, but to feast on some cool visuals. These galleries pride themselves on showing you the best of the best as far as CSS goes, but there are tons of unique visual styles to checkout. You can stumble across the perfect button style, creative headers, unique menus/navigation, and lots more. If you are thinking of starting a website or blog and can’t decide on a style, this is where you start.

Unmatched Style

CSS Beauty

CSS Mania

CSS Elite

CSS Import

CSS Remix

Stylecrunch

Screenalicious

Stylegala

CSS Zen Garden

CSS Drive

CSS Vault

CSS Tux

CSS Brain

Webcreme

CSS Design – Yorkshire

Blog Themes:

Along with all of the cool designs above, I sometimes like to browse the different Themes available for bloggers. Some of the good theme designers out there put a lot of effort into their work, and you can often get inspired just by looking at the themes. There are lots of creative designs and lots of creative elements within those designs. I use Wordpress, and it has a huge theme directory with lots of filters for easy viewing:

Wordpress Theme Directory

iStock

I know, istock isn’t normally thought of as an inspiration site, but every time I go there, my mind floods with ideas. Just do a search for something you’re interested in (like Swirls or Vector Grunge), and see what you can find. You don’t have to buy anything to get inspiration. You can download the preview and use it as a guide while trying out new things on your own.

a

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.

Vector vs. Raster graphics. (a short explanation I found)

This is why I always start off in Illustrator. You don’t have to worry about saving an image or a PSD and wanting to go back and change a pixel dimension 3 weeks from now. You can simply open your illustrator (vector file) make the adjustment (ex: change the width of a button) without sacrificing any quality, and re-rasterize it in Photoshop.

Let’s get started: The example I will be using is a simple button rollover, using a cutomized button from my Free Vector Web Page Elements – Part 2. I don’t use inkScape, but I assume this tutorial can be applied to that software as well.

Here We Go:

1. Download one of my Free Vector Files, unzip it and open it in Illustrator. This is what you will see if you use my Free Vector Web Page elements -Part 2

2. Delete EVERYTHING except for the button you want to use, then save the file as a different name (still in vector format-AI).

3. You can easily adjust the width to any size using the Direct Selection Tool (White Arrow) . Make sure none of your shapes are locked (Object Menu > Unlock all), select all of the points on one side and nudge or drag them to your desired width. Save your file once you have made any adjustments.

4. Now, in that new illustrator file you just created, change the fill color of the button (for a rollover) and save that as a different file name. You should now have 2 new illustrator files, the original button, and a button with a different fill color.

5. Now in Photoshop, go to File > Open, select your Illustrator button files and open them. Make sure your color setting is RGB while importing to photoshop, and your resolution is set to 72.

6. After rasterizing (importing into Photoshop) you should have 2 raster images of your button with identical pixel dimensions! Because you created the 2 colors of your button from the same Illustrator file, now you have perfectly aligned images to use as a rollover in your HTML and CSS. The background is transparent, which will be ideal for many of you. If not, all you have to do is add a custom background color by creating a new layer below your button layer and filling it with whatever color you choose. If all you want is a white background, simply flatten the images.

7. Now all you have to is in the File menu, select “Save for Web,” choose your output settings, name your files, and Bam. Instant perfectly aligned, optimized images for the web, all from a completely vector source file.

8. Repeat steps 3-6 for any vector shape, or if you need to modify a button you are currently using. That’s also the beauty of saving each button as it’s own Illustrator file. If you are descriptive in your file naming, you don’t have to return to the original free download file, just open the vector button file you created, change something, import to Photoshop, and save.

Download the files I used in this tutorial:

Includes: – AI (2) EPS (2) SVG (2) JPG (2) HTML (1)

The HTML I used for the button:

Button

The CSS I used for the button:

Note that the actual div doesn’t have a background image, only “a” and “a:hover.” Also, by defining dimensions for your “a,” you make the entire image clickable, instead of just the text because it creates an invisible box that surrounds the Linked Text.

.button {
	height: 31px;
	width: 206px;
	line-height: 30px;
	text-align: center;
}

.button a:hover{
    display: block;
	height: 31px;
	width: 206px;
	background-image: url(images/button_tutorial_2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	color: #999999;
}

.button a {
    display: block;
	height: 31px;
	width: 206px;
	background-image: url(images/button_tutorial.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	color: #FFFFFF;
	text-decoration: none;
}

a

Who needs 4 round corners when you can have 1 or 2 that fade into oblivion?

There are a few reasons why this is not only kinda cool, but also a good idea for optimizing your site or blog:

1. It just looks cool.

2. It effectively separates content and keeps load times down because the background only loads once and doesn’t repeat.

3. It gives you freedom in your layout. Having a border that fades into your background enables you to leave the height and/or width of the column up to the content. For example, if you have a fading corner on the each section of the sidebar in your blog, you can add as many links as you want into that section and your CSS only loads one background image.

4. It makes load times faster and allows for a much more forgiving and fluid design for sites and blogs that get updated often.

5. It enables you to achieve a professional Web 2.0 effect, while giving you plenty of options to add content without changing your CSS.

6. Visually speaking, it effectively integrates the contents of the section into the rest of your site. By fading the color of a section into the background, you are creating a “Visual Connection” to the rest of your content. (Users generally won’t notice this on a conscious level, but good to know.)

Is your site “Fadeworthy?”

a