web design tips

How to Create Free to Low Cost Banners

by Freddy on January 5, 2009 · 0 comments

Recently some of my clients have asked me to create flash banners for their sites.

I like doing things the easy way so I googled “flash banner generator”.

A few sites came up, but nothing that I really liked. So I almost gave up on that and figured that I would just have to design them myself using Flash (uggh…more work).

After stumbling for a few hours, I came across Bannersnack (oh yeah!)

This is probably one of the ‘prettiest’ flash banner generator or flash banner creator tools that I have ever come across.

It’s super easy to use…and it’s free! (if you don’t mind having the Bannersnack logo showing).

Of course, if I were to use it for a client of mine, I wouldn’t want the Bannersnack logo to appear. You can do that by upgrading your account for like $9.

Their site is full of tutorials and examples of what you can do with their software. Check it out.

I created a banner of my own as you can see here…and it only took like 6 minutes. Let me know what you think.

{ 0 comments }

How to Make an Image Rollover in CSS

by Freddy on December 1, 2008 · 2 comments

In this tutorial I will teach you how to make an image rollover using CSS and Adobe Illustrator. It’s pretty straightforward and shouldn’t take you more than a couple of minutes. I’ve included the HTML, CSS, and image below the video.

If you like this tutorial please make it known by bookmarking it and commenting below.

index.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home Button</title>
<link type=”text/css” rel=”stylesheet” href=”style.css”>

</head>

<body>

<a class=”homebutton” href=”#”>Home</a>

</body>
</html>

style.css

@charset “UTF-8″;
/* CSS Document */

a.homebutton {
display:block;
width:120px;
height:40px;
text-indent:-5000px;
background:url(images/homebutton.jpg);
text-decoration:none;
}

a:hover.homebutton {
background-position: -120px 0;
}

{ 2 comments }

144 Places to Get Great Web Design Inspiration

by Freddy on November 20, 2008 · 3 comments

As you may well know I’m not that creative. Not creative enough to come up with some awesome, out-of-this world web design straight off the top of my head anyway.

But I don’t have to be.

There are literally millions of websites out there that I can get inspiration from. Fortunately there are some websites that have sifted through most of the clutter and have compiled some of the best Flash and CSS website galleries so that you and I can get a feel for what web designers around the world are doing.

Below is a list of the top 144 places to get great web design inspiration from. The list is in alphabetical order, so if you get lost…just remember A, B, C, D….(you get the idea).

If you feel there is an inspiration gallery that was not included in this list just go ahead and include it in the comments below.

A Site A Day
click to enlarge

Avenue CSS
click to enlarge

Best CSS Design


click to enlarge

Best Design Web Gallery


click to enlarge

Best Web Gallery

click to enlarge

Blazing Gallery

click to enlarge

Blog Design Blog


click to enlarge

Boxed CSS


click to enlarge

Brdcast

click to enlarge

Cart Craze


click to enlarge

CMS Showcase


click to enlarge

ColourLovers

click to enlarge

CommandShift3

click to enlarge

Cool Homepages

click to enlarge

Cool Site Collection

click to enlarge

Coroflot

click to enlarge

Creative and Link

click to enlarge

Crazy Leaf Design

click to enlarge

CSS Design Yorkshire

click to enlarge

CSS Imagine

click to enlarge

CSS Inspirace

click to enlarge

CSS WeAreTheBUZZ

click to enlarge

CSS Website

click to enlarge

CSS 2.0

click to enlarge

CSS Artillery

click to enlarge

CSS Arts

click to enlarge

CSS Bag

click to enlarge

CSS Based

click to enlarge

CSS Beauty

<click to enlarge

CSS Blast

click to enlarge

CSS Bloom

click to enlarge

CSS Brigit

click to enlarge

CSS Candy

click to enlarge

CSS Clip

click to enlarge

CSS Collection

click to enlarge

CSS Conversion

click to enlarge

CSS Cookie

click to enlarge

CSS Cool

click to enlarge

CSS Count

click to enlarge

CSS Creme

click to enlarge

CSS Dance

click to enlarge

CSS Delicious

click to enlarge

CSS Drive

click to enlarge

CSS Elite

click to enlarge

CSS Em

click to enlarge

CSS Exchange

click to enlarge

CSS Flavor

click to enlarge

CSS Fresh Blend

click to enlarge

CSS Fuel

click to enlarge

CSS FX

click to enlarge

CSS Galaxy

click to enlarge

CSS Glance

click to enlarge

CSS Hardcore

click to enlarge

CSS Hazard

click to enlarge

CSS Heaven

click to enlarge

CSS Here

click to enlarge

CSS Heroes

click to enlarge

CSS Hot

click to enlarge

CSS Ice

click to enlarge

CSS Import

click to enlarge

CSS Impress

click to enlarge

CSS Leak

click to enlarge

CSS Liquid

click to enlarge

CSS Loaf

click to enlarge

CSS Lounge

click to enlarge

CSS Mania

click to enlarge

CSS Mess

click to enlarge

CSS Mix

click to enlarge

CSS Moon

click to enlarge

CSS Nature

click to enlarge

CSS Nice

click to enlarge

CSS Pick

click to enlarge

CSS Pinoy

click to enlarge

CSS Princess

click to enlarge

CSS Rand

click to enlarge

CSS Reboot

click to enlarge

CSS Revue

click to enlarge

CSS Season

click to enlarge

CSS Smooth Operator

click to enlarge

CSS Snap

click to enlarge

CSS Star

click to enlarge

CSS Tea

click to enlarge

CSS Tux

click to enlarge

CSS Vault

click to enlarge

CSS Zen Garden

click to enlarge

Daily Slurp

click to enlarge

Dark I

click to enlarge

Delicious CSS

click to enlarge

Design 2 Day

click to enlarge

Design By Grid

click to enlarge

Design Creme

click to enlarge

Designer Source

click to enlarge

Design Flood

click to enlarge

Design Grabs

click to enlarge

Design Idol

click to enlarge

Design Meltdown

click to enlarge

Design Shack

click to enlarge

Design Snack

click to enlarge

Dez Inspiration

click to enlarge

Divine CSS

click to enlarge

Edustyle
click to enlarge

Fantastic CSS

click to enlarge

FaveUp

click to enlarge

Free CSS

click to enlarge

Full Single

click to enlarge

Gallerific

click to enlarge

Inspiration Folder

click to enlarge

Inspiration King

click to enlarge

Inspiration Up

click to enlarge

Light on Dark

click to enlarge

Mabuc Plus

click to enlarge

Most Inspired

click to enlarge

My3W

click to enlarge

Nice Stylesheet

click to enlarge

One Page Love

click to enlarge

One Pixel Army

click to enlarge

OSWD

click to enlarge

Perfection

click to enlarge

Piepmatzel

click to enlarge

Refresh

click to enlarge

Screenalicious

click to enlarge

Sharebrain

click to enlarge

Siti Web Design

click to enlarge

Standards Reboot

click to enlarge

Stare At

click to enlarge

Strange Fruits

click to enlarge

Styleboost

click to enlarge

Stylecrunch

click to enlarge

Style The Web

click to enlarge

Submit CSS

click to enlarge

The Best Designs

click to enlarge

The Designed Tree

click to enlarge

The Dezine

click to enlarge

The Inspiration Room

click to enlarge

UCreative

click to enlarge

Unique CSS

click to enlarge

Unmatched Style

click to enlarge

Urban Trash

click to enlarge

w3c Sites

click to enlarge

Web Design Showcase

click to enlarge

Webcreme

click to enlarge

Web Newly

click to enlarge

We Love TXP

click to enlarge

We love WP

click to enlarge

{ 3 comments }

How to Get Free Vector Art

by Freddy on November 1, 2008 · 2 comments

I’ve had some pretty artsy clients before. They had a contemporary style and wanted their web design to show that.

Of course I would tell them that it was my specialty and that I would come up with a design that would knock their socks off. I would then go home and sweat bricks. How would I come up with contemporary designs? Would I have to draw everything on paper first? I’m not that great at drawing so that wasn’t an option.

What if there was a website I could download graphics from and then tweak them to use them in my projects? Well, I found just that site (in fact, one of many, but this one’s my favorite). Wanna know what it is?

Watch the video. (hint: it’s a great way to get free vector graphics).

{ 2 comments }

Web Design Tool – Web Developer Toolbar

by Freddy on October 30, 2008 · 1 comment

I came across this web design tool awhile back and it has proven to be invaluable. It has taught me alot about web design as it has allowed me to take a sneak peek at other peoples’ coding and design techniques.

This tool is the Web Developer Toolbar for the Firefox, Flock, and Seamonkey browsers. Take a look at this video to see how this can be a very invaluable web design tip for you:

{ 1 comment }