Fast forward to present day and there’s a nearly overwhelming number of social outlets for designers to promote themselves on and network with others. In this article I’ve listed six of the most prominent social networks for designers available today.

The Invites

Five of the six networks listed here are invite only, so along with covering the sites I’ve also got a few invites to give away:

Five invites to LoveDsgn

Three invites to Forrst

Three invites to Design:Related

To enter yourself in the drawings for the invites just leave a comment below with a link to your portfolio and which sites you’d like to get an invite to. I’ll announce the winners in a week

The Sites

Dribbble

Forrst

Design:related

LoveDsgn

Designers Couch

Behance Network

Part 1 – General

Step 1

Design your error page as a static HTML page.

Step 2

You can upload the error pages to anywhere on you server, but I recommend putting them either in the root directory, or in a folder in the root.I put mine in a folder in the root called “errors.”

Step 3

Add the following line of code to your .htaccess file in the root of your site.

ErrorDocument 404 /errors/404.html

And for the other error messages, simply uplad the other HTML files and add another line in your .htaccess file and change the error code to whatever you need, like:

ErrorDocument 503 /errors/503.html

in my example code, obviously, I’ve got a folder called “errors” in the root directory of my blog, and I named my error message html files as the same name as the error I want to display.

Live Example

The easiest error page to test, (as well as the most used) is 404, or “Not Found.” Simply type in your URL, then a forward slash and then a bunch of jibberish, like this:

http://www.bittbox.com/fghjkdfghdfgkjh

And that’s it. If you are having trouble seeing your error messages, you might check your file paths in your .htaccess file, as well as the file paths to images in your HTML and/or CSS, depending on how you have it setup.

Part 2 – Custom 503 “Service Unavailable” Page using WordPress and the Maintenance Mode Plugin

Step 1

Obviously, have the Maintenance Mode plugin installed and activated. Maintenance Mode lets you display a custom message while your site is down, whether your upgrading, or making a new theme, or simply doing maintenance of any kind. Nowadays, wordpress shows an error 503 (most likely your server default) “Service Unavailable” error when you do an automatic upgrade, so customizing this 503 error can make you rest a little easier when you need to upgrade your worpdress. (which wordpress users know, happens often.)

Step 2

Copy your 503.html error you already made in Part 1, and put it in your wordpress theme directory. Then rename it to 503.php. Even though it’s most likely a simple html or xhtml file, the Maintenance Mode plugin needs a “php file extension, and it has to be in the same folder as all of your theme files. (don’t forget to move any images, and check image URLS during this process, as well as any image URLs in your CSS for your 503.)

Step 3

In the WordPress Dashboard, go to Settings > Maintenance Mode and select the custom 503.php option under “Splash Page Theme.”

Done

In order to test the custom 503 that will display when you do upgrades (as long as maintenance mode is active before you upgrade) you can just activate it for a minute to see what it looks like, but you have to either log out, or use a different browser where you aren’t logged in to your site.

Conclusion

Custom error messages can be cool, and I recently learned a little about how to make them, so I thought I would spread the knowledge. It was way easier than I previously thought, and all you need is FTP. As I mentioned earlier, some customizations may be available from your host admin panel, but using the .htacess method, you can add as many as you want, and therefore have more control.

Here’s a link to the most common Apache Error Codes»

Here’s a link to all Apache Error Codes »

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.

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.

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;
}

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?”