Of course Linux and web design go hand in hand. So it makes perfect sense that there be a tool for the Linux operating system that can handle this task. There is, and that tool is called Agave.

Agave does one thing: It helps you create color schemes that match. But like any good Linux application it takes this a few steps further by giving nods to web designers with Hexadecimal and interior/graphics designers with RGB and HSV color equivalents. Agave is as simple as it is helpful. Once you start using this tool, you will quickly grow to depend upon it. Let’s get it installed and see how it is used.

Getting and installing

Agave should be in your distributions repository. You can either fire up your Add/Remove Software utility, do a search for “agave” (no quotes), select the results, and click Apply. Or you can open up a terminal window and issue a command like:

sudo apt-get install agave

or

yum install agave

Once installed you can fire up Agave by issuing the command agave or you can find a menu entry in the Graphics submenu of your Main (KDE) or Applications (GNOME) menu.

Using Agave

Figure 1

When you first start Agave you will be greeted by a random triad of complimentary colors (see Figure 1). NOTE: When you start Agave the second time it will start up with the last color you used.

There are a few tools to take advantage of in Agave. The first thing you will notice is the dropdown. This dropdown allows you to select from various types of compliments. You can select from:

• Compliments: This will show you the complimentary color of the color you have chosen.
• Split Compliments: Colors that are on either side and exclusive of the true color.
• Triads:  Three colors equidistent from each other on the color wheel.
• Tetrads: Color harmony based on four colors.
• Analogous: Three colors adjacent to one another on the color wheel.
• Monochromatic: Three hues of the same color.

With those different color types you can pretty easily create schemes for any design. So how do you choose a color? One of the easiest methods is to click the Random button. This will give you a random color and, based on your color type selection, will scheme to that color. This tool is great if you’re trying to design something, from the ground up, but are a facing a block when trying to choose a color scheme.

Figure 2

If you know your starting color you can click on the color button (this is the small square of color to the left of the dropdown) which will open up the color palette. From within the palette you can choose a specific color in a number of ways:

• Change Hue/Saturation/Value/RGB:  Either enter the number for the value or click the up or down arrow.
• Color Name: Enter the Hex of the color you want.
• Color Wheel: Drag the color wheel around to find the color you want.
• Dropper: Is there a color on your screen you want to use? Click the dropper tool and then click on that color you want – it will automatically appear in the palette.

Once your color has been chosen, click OK and your color scheme will update on the main window. If you need more colors (or different scheme types) change the dropdown to select the scheme you want.

Color type

You can also switch from Web-safe colors, Visibone colors, Tango icon theme palette, or GNOME icon theme palette. To change the type simple click on the dropdown at the bottom of the window.

Save your color

Once you have found a color you like you can save that color by clicking the “+” symbol at the bottom right. You can also rename the saved colors by right clicking a saved color. This will come in handy when you are working with color palettes for different design projects.

Final thoughts

If you do any design work, you need to use Agave. Not only will it save you crucial design time, it will ensure that all of your color schemes are, at least, pleasing to the eye.

Related posts

• KompoZer, a free, open-source and half-decent WYSIWYG web editor (3)
• Create a 3D logo with The GIMP (6)
• A standard compliant web browser and editor: Amaya (2)
• Yoggie PICO Personal Mobile Security Computer (3)
• With Ubuntu 9.10 Arrives Wubi 9.10 (2)

With The GIMP, creating rudimentary 3D logos is painless…if you know the steps. And with a good collection of fonts you can make your clients think you have far more skills than you might actually have. With that in mind, let’s take a look and see just how simple it is to create a 3D logo with The GIMP.

How it works

The GIMP has a built in feature that helps you to create these logos. We will be working with version 2.6 – which is actually important because the engine that creates these has changed as well as the location of the submenu has changed. So if you don’t have 2.6, give upgrading a go.

The process is pretty simple.

• Select the type of logo you want to create from the Create menu.
• Enter all of the necessary information and select the configurations to suit your needs.
• Click OK
• Edit the image to suit your needs.
• Save the file.

Now let’s take a look at the process with a bit more detail.

The logo tool

Figure 1

To open up the logo tool go to the File menu and select the Create submenu. From with the Create submenu you will see the Logos submenu, click on that to reveal the different types of logos you can create (see Figure 1).

The different types of logos range from the cartoonish, to the professional, to the nearly-fantastical. There are quite a few choices so your best bet is to play around with them until you find the type of logo you prefer to work with.

Figure 2

Once you click on the logo type you want to create a new window will open. It is within this window that the logo is created. The good news is, you really need zero artistic skills to tackle this task.

Figure 2 shows all of the configuration options you will have to deal with to create a logo. Don’t let amount of options fool you, you really only need to work with a minimum of these to create your logo. Here’s what you’ll need to work with:

Text: This is what your logo will say.

Font: This is the font you want to use for your logo.

Blend Gradient(s): These will be the gradient colors you will use for your logo. You can create new gradients as well. The included gradients should be plenty to get you started.

Background Color: If you know the color of the background your logo will be going over you can change this here. I usually delete the background color so the logo is surrounded by a transparent border.

Figure 3

And that is the bare minimum you need. Once you have all of that filled out, click OK and the logo will be created.

Figure 3 shows a sample logo created using the Glossy logo tool, the Biometric Joe font,  and the Cold Steel 2 gradient.

Of course there are plenty more options to configure for your logo – but getting the hang of the basics will give you plenty to do with this tool.

Figure 4

TIP: As I mentioned I tend to remove the background in this logos. What this does is allow my logos to be placed on any color background. To do this go to the layer window of your new logo, select the background layer, and click the delete button in the layer window. When you save this image you will now want to make sure you save it in a format that supports transparency (such as .gif or .png.)

Final thoughts

I have used this method to create logos for plenty of clients. Not only does this make you a more versatile web designer, it also adds to the bottom line as you can now charge design fees.

Related posts

• Use Agave to create color schemes (1)
• 9 high quality free fonts (3)
• Yoggie PICO Personal Mobile Security Computer (3)
• With Ubuntu 9.10 Arrives Wubi 9.10 (2)
• Widgets for Linux: SuperKaramba (6)

They offer 25 designs right now, not a big deal quantity-wise, but the designs are extremely good and nice and web 2.0 in a good way. You also get layered PSD files, which means you can modify these images easily (and freely). Plus, they say new ones will be added periodically, which seems to be true, since earlier today when I checked they only had 23 designs I think (a new page was definitely added).

As a web designer I hate using pre-fabricated termplates, but I have to say this is an exception and I’ll be looking into some logos for my own stuff, it’s rare that you get such high quality in this area of the open source market, enjoy!

Related posts

• Use Agave to create color schemes (1)
• The most awesome datacenter ever! (2)
• Started something too big (3)
• Reveal the Font that has been used in an image (1)
• Resources for web designers (4)

You don’t only get one font weight with only a few extra characters. You get the full deal, with different font weights, characters, and in some cases all characters have a unique shape (Delicious font). There are also some nice descriptions, which make me realize how hard font design must be. Apparently “The Delicious italic is not a slanted roman, but a true italic.”… No comment from me, I have no idea what he’s talking about, but the font looks awesome!

My favorite one is Museo and Diavolo. I love the elegance that the narrow Museo offers, especially in its thinner variants. Diavolo is probably one of the coolest fonts I’ve ever seen. Put a bold heading on any page in Diavolo and the font itself makes a statement instantly. My only problem is now that I can’t use these fonts in my web pages because few people have them, let’s hope css3 changes this and enables embedding of fonts properly. Anyway, these fonts are awesome, check them out and download them right now!

Related posts

• Create a 3D logo with The GIMP (6)
• Web Development: Realtime Fonts Changer (1)
• Use Windows Vista fonts in Windows XP (22)
• Use Agave to create color schemes (1)
• The most awesome datacenter ever! (2)

If you’ve ever seen something you’ve really wanted in your cubicle I’m sure you’ll find it here. The workplace looks like a paintball arena, there are weird waterfall things, colors, lights, and of course it’s in a cavern. I always thought Google was the best place to work, now I’m having second thoughts!

The place has backup power from two submarine engines, a “small” 1.5 megawatts of energy are used on cooling the servers, and there is just so much coolness to this I can’t begin to explain. Oh, by the way, you could supposedly hurl a hydrogen bomn very near the place and it would withstand the effects! Now that’s a safe datacenter! Take a look at Royal Pingdom for some pics and an interview the CEO of the company who built the place.

Related posts

• Weather Forecast for your iPod (0)
• Use Agave to create color schemes (1)
• Started something too big (3)
• Skype Emoticons (19)
• Resources for web designers (4)

It would be fair to say that Google and Apple have provided the most unique design directions over the last 10 years, Google with it’s minimalist user interfaces and Apple with it’s glossy Aqua theme. While I think Vista stands on it’s own design-wise there are definite Apple inspired decisions made.

Over the last few months however I’ve been noticing the new direction Microsoft design has been going in and I’m really liking it a lot. The first indication was the Microsoft.com redesign which I noticed went to a much more minimal design than previously and was followed by redeisgns across most of the Microsoft websites. Next the Internet Explorer 8 beta 2 came out and notably has lost the ‘gloss’ of IE7. The  Windows Live wave 3 followed and introduced a similar but more toned-down interface with no icons and was predominantly white, finally the online services began to be updated and introduced a great new theme which can be seen here. The Microsoft Software + Services strategy website also got a nice minimal theme.

I personally love this direction, the design is minimal, perhaps inspired by Google and yet much more attractive while avoiding the glossy, ‘web 2.0’ look which has so dominated design for the last decade and was present in the previous wave 2.0 incarnation of Windows Live.

What do you think about this change in design?

Related posts

• Windows Live Writer Portable (9)
• Windows Live SkyDrive Explorer (63)
• Windows Live Photo Gallery (8)
• Why Google Chrome OS Will Have No Huge Impact (20)
• The reinventing of the Operating System (16)

I found deciding on a colour scheme to be an incredibly frustrating process, and what I finally settled on was fairly safe but not very original or exciting either. However here are a few of the tools that I used to help me locate colours, palettes and inspiration, hopefully this can be useful to you too.

Adobe Kulur

My favorite because of the great community. A lot of really good palettes here and plenty of things to help you designing. Kulur refers to both the website and the AIR application which you can download here.

The AIR application has a useful feature of letting you drag schemes separately onto your desktop to compare various palettes. Once you have decided you can copy the RGB values straight onto the clipboard.

Colour Browser

Another AIR application, this one doesn’t need to be connected to the Internet and is useful as a desktop tool for storing various palettes and schemes. This tool is for creating your own palettes, not finding other peoples and is pretty simple but useful.

Color Scheme Generator 2

A color wheel you can use to create a palette from, has a number of options such as pastel, dark pastel, contrast pale etc.

ColorSchemer ColorPix

ColorPix is great. Install it and you can use it to find out what color anything on your screen is. Perfect for stealing someone else’s great scheme or creating variations. If used in conjunction with the Colour Schemer Gallery then you can really find some great ideas.

Related posts

• You’d be Stupid Not To… (31)
• Use Agave to create color schemes (1)
• Unofficial Adobe Reader Patch Released (4)
• The most awesome datacenter ever! (2)
• The best way to create pdf documents (12)

You’ve all seen them, the icon from XP, the interface left over from Windows 3.1… sometimes you wonder what’s so hard about simply updating a few icons here and there?

Well  it obviously bugged Long Zheng because last week he wrote a blog post entitled Windows UI taskforce: your help wanted. In it he suggested that he knows someone on the development team who may be able to follow some suggestion through.

With the development of Windows 7 speeding full-steam ahead, I thought this might be an opportunity as good as ever to make these problems known to Microsoft and hopefully get them all resolved.

The idea was to find the UI quirks, take a screenshot and post them to the blog. Two days and over a 100 submissions later Long Zheng had given up and decided it easier to create an entire new site dedicated to the issue.

The way I originally imagined it was to go through each of the suggestions by hand and add them to my post along with a pretty screenshot. Needless to say, I got tired about 20 entries in and couldn’t imagine doing 140 more. I had to come up with something more manageable.

With PHP in one hand, MySQL in another and some duct tape in my mouth, I’ve put together a voting-centric community feedback portal over at www.istartedsomething.com/taskforce.

This will work great if Microsoft actually uses it and people submit only quirks which need to be modified to fit the existing theme. The problem will be that some people seem to think it’s just a general suggestion box which really won’t achieve much.

Problem: The sound panel requires too many clicks to change the volume for the recording and playback channels.
Solution: Make it much easier to change volume.
Severity: High
Impact: High
Status: Not fixed

Problem: UAC Prompts too much
Solution: Two options
1) Allow the application to list all of its actions at once and you check mark them.
2) Allow a time limit when the UAC prompts. when a specific process is given full access say for 30 sec.
Severity: High
Impact: High
Status: Not fixed

So if you’ve noticed some elements inconsistent with the Windows design this is as good a place as any to submit it. I’ll be interested to see if Microsoft pays attention and something does get done.

Related posts

• Windows Vista SP1 Download (12)
• Windows Vista SP1 breaks applications (2)
• Windows Vista Editions – Do you know the differences ? (6)
• Windows Longhorn Blog (0)
• Will Microsoft ever learn ? (3)

The tool isn’t too complicated, you can see an isometric world with the ability to drop various colored cubes into the field. You can also delete cubes, replay the animation (showing the design in progress, and you can save the art. Not a whole lot to it, but very effective. In fact, the only thing I was missing was a tool to create objects, or strands of cubes, it would be so much easier to create big shapes this way. The editor features some cool building animations like when you put down a cube, or when you delete it. Not very useful, but nevertheless cool.

On the main page there is also a nice gallery of recent and popular art and you can see that some people are really talented. While browsing through, you can even click and view their animations, although it’s a shame you can’t edit and save for yourself. If you have some designer veins in you, take a look at Cubespace, it’s a fun tool!

Related posts

• Use Agave to create color schemes (1)
• The most awesome datacenter ever! (2)
• Started something too big (3)
• Resources for web designers (4)
• New Microsoft Design Direction (0)

The first one became my favorite as soon as I came across it not long ago. Called Design Float, this website is based on digging system (honestly a clone) but with the content range limited to design only. Despite being aimed at design in general rather than web design only, most of the content published till present is related to the web and computer graphics.

Especially often people publish different sorts of useful lists of services you would normally hardly hit on by accident, like a list of online color tools for example. So far I’ve found quite a bunch of interesting resources thanks to the filtering that shows the best content. Watching this web grow in size slowly, I wish it wouldn’t get spoiled by the not-so-perfect digging (or floating in this case) system during longer time period. RSS feeds for different categories are available.

Another useful website is actually a simple list called For Web Designers rather than a complex site. Although it was IMHO built especially for the purpose of earning money using 4 small-size banners sitting right at the top, it still does provide links that may be eventually found useful by many. Tutorials, tools, free resources, validators and generators, all at your disposal in one place. Over 500 links so far, tag cloud for easier search is present as well.

The last one, Clean CSS is an online CSS optimizer and formatter (not a validator though). Upload your style sheet, select options and level of “compression” and get the result in a downloadable form. Light-weight code, more satisfied surfers.

Related posts

• Yahoo Server Monitor Widget (0)
• XML Escape Tool (0)
• Wordpress Broken Link Checker (5)
• Widgetize you website with Yourminis (3)
• Website Optimization: Page Speed For Firebug (5)

Let me know, your opinion matters ;)

Just filling up some space here..

Related posts

• Wordpress 2.6 (9)
• Wordpress 2.5 released (5)
• Wiredtree Review After Four Months (3)
• Win Domain and 1 Year free hosting (7)
• Who is hosting ghacks ? (1)