Design Vitality

In today’s tech age, the modern blogosphere is becoming a much more populous region of the world wide web. Bloggers from all over the world are creating, managing, and maintaining their own websites, most often using freeware templates or creating their own from scratch.

As a designer, I recognize how difficult it can be to compose and style your own website or blog, especially if you don’t have any design skills or are just starting out. I was a beginner once, and it was definitely a learning experience to style and develop my own blogs.

One of the most valuable aspects of the internet is the instant availability of all kinds of helpful tools and information. Among these resources are the golden nuggets known as online  generators. If you need to create a quick and easy element for your website or template, these utilities offer automated functions for creating just what you’re looking for.

Be it images, text, layouts, or CSS, these generators have just the fix you need.

Web 2.0 Design

1. Web 2.0 Badge Generator
Badges are fun little accents to add to a Web 2.0 oriented site. Quite often, they are used to denote a “Beta” mode, but they can be used for much more. This generator allows you to select a badge style and customize the color, text, and size.


2. Web 2.0 Buttons
In just four steps, this generator offers you a variety of options for specifying the shape, color, text, and inclusive icons for a custom Web 2.0 button. It offers more than 50 fonts and a hefty variety of icons (or the option to upload your own).


3. Stripe Generator
As Web 2.0 has evolved into its own style of design, there are many elements that have emerged to represent it. Reflections, cutesy icons… and stripes. This utility offers up a variety of settings for creating and customizing a striped pattern that is just right for you.

(more…)

Anyone that knows what’s what about web design knows what CSS is, and how invaluable it can be to styling the navigation of a website.

The thing about CSS is that it is capable of much more than just stylistic design. It has a degree of utile functionality as well, and I’m going to point out some tutorials that make use of some of the more practical applications of CSS when designing your site’s menus.

1. Mac Style Dock Menu Navigation Bar in CSS
For those of you Mac fanatics out there who love the smooth, animated functionality of the OSX Dock, then this is the menu for you! This tutorial makes use of a quick and easy jquery script to beautify the effect.

2. Hoverbox Menu
Similarly to the fisheye expansion effect of the Mac Dock, this menu creates an onHover blowup of the image link.

3. Position Property CSS Menu
This menu makes use of the CSS position property in order to create a rollover effect. Rather than replacing the image, it simply changes the position of the existing image, which has the rollover built in.

4. Flickr-like Horizontal Menu
Like the look and feel of the Flickr navigation menu? Well, so do we! This tutorial augments the CSS with a bit of Javascript to emulate the Flickr functionality.

5. Apple Style Rollover Menu
Here’s another one for the Mac fanatics. Like the look of the menu on the Apple website? Well, this tutorial shows you how to recreate it.

(more…)

Your website navigation plays an integral role in keeping your site easy to use and navigate. Button tutorials are useful because you can take the techniques you like from a tutorial and use them to make your own custom buttons to match the site your working on.

I have filtered through the millions of results to highlight the 39 button tutorials you should have in your arsenal. (more…)

Video tutorials can make learning new Photoshop skills quick and easy. Unfortunately, hunting down decent Photoshop video tutorials online can be pretty tough.

To save you the trouble of searching through pages of the same videos about editing some girls face over and over, we’ve tracked down some of the better Photoshop video tutorials and put them all in once place. Enjoy! (more…)

Text and the way it looks is a major part of any design. A great design can be cheapened if the text on the page looks wrong. Any logo is almost entirely text. From water to fire, these 51 tutorials will show you how to create any style of text you want.

(more…)

Your logo is the most important factor in your brand’s identity and it has a huge impact on how users perceive your website, or company. So avoid making the Digg front page for having one of the web’s worst logos, and get started on your new fresh logo design today. (more…)

Anyone who has ever typed the phrase “graphic design tutorial” in Google knows there are millions of pages out there. To make things easier for those of us wanting to improve our design know-how I have scoured the web from Google to Technorati.

I’ve put together a list of 31 quality graphic design tutorials sources for Photoshop, Illustrator and more that have detailed instructions. (more…)

It’s not 1999 anymore, so why do so many sites look like that’s where they came from? With all the hype surrounding Web 2.0, a site needs to keep up with all the latest trends to avoid spiraling into obsolescence.

New techniques and visual styles come out daily, so there’s really no excuse for having an ugly site. To help bring you up-to-date, we’ve scoured the net for some of the coolest tips and tutorials.

There’s a little bit of everything here; Flash, Photoshop, CSS, PHP, and more. Whether you’ve just started building your site, or you’re just looking to revitalize your old site, this list will help you get started. With your imagination and these tutorials, you’ll have your site looking good (or better) in no time.

(more…)