Web Developer/Designer Tool Kit: Part 2 - Other Tools
Code Library
Over the years you'll find that you're reusing code much like any programming language. It's
nice to start out by setting up a code library for yourself so that you can easily access the
code that you need. No point in retyping out the same basic HTML document elements time and
time again, just make a generic template that you can copy and use.
Of course this isn't limited to just HTML. CSS, JavaScript, ASP, PHP, VBScript, or whatever else
you may need. Maybe a simple HTML Form for submitting emails. Or a date and time function in PHP.
If you have it in your library you can cut down your work time. And come on, that's just a nice
thought.
Recommended: Dedicate a folder for your code library and then make sub folders for each
area - HTML, CSS, PHP, JavaScript, etc. Makes finding what you need a lot easier.
Image Programs
Image Editors
Web developers, like it or not there's going to be a few times (okay many times) when you're going to
need to do some image work. Designers, like it or not there are going to be times when you're looking
at code. What's the solution? Honestly there isn't one. We're a unique group where there are times
when we're a developer, a designer or both at the same time. Image programs are vital to us and we
need to have a good one.
This is the area, in my opinion anyway, where we need to spend some money. Getting by with MS Paint
or some free online image making program isn't going to cut it here. We are of course talking
about a major financial investment here so we need to make sure we get a program that does what
we need it to do.
I'm mainly talking about the big programs like Adobe Photoshop, Adobe Illustrator and Jasc Paint
Shop Pro. While they are a bit pricy you will find that they are worth the price if you're creating
a lot of images or if you're outsourcing your image work to an individual or company. I've found
that Adobe Photoshop has more than paid for itself with the first three websites I worked on.
The advantages of these programs are too numerous to mention. Your level of comfort with these
programs is a must. Thankfully you can download all three as trial versions so that you can
test them out and find out which is right for you.
Image Editing Trials
Adobe Photoshop
Adobe Illustrator
Jasc Paint Shop Pro
Recommended: What ever image editor you're most comfortable with after using the trials.
Author's Pick: Adobe Photoshop.
Screen Capture Programs
There are of course other image programs that you may need from time to time, but you can probably
get away with free programs. While a nice screen capturing program is helpful you really don't
need to invest in one. You're more than welcome to look for a program but if you're running Windows
you can make use of the "Print Screen" button on your keyboard (usually above the "Insert" key or
to the right of the "F12" key). Simply press that button and it does a screen capture. Copy the
image into your image program and there you go. Simple and free, what more could you ask for?
Recommended: The "Print Screen" button (Windows users).
Image Slicers
Image slicers are good to have too. But you don't need to worry about paying for a good one. CoffeCup
offers a free Image Slicer on their site that is really nice. Also if you have Photoshop you can
slice up your images with that.
Recommended: CoffeeCup Image Slicer.
Image Viewer
One last image tool and then we'll move on. A nice image viewer is a handy tool to have around.
Windows XP Pro has one but I've often times found it lacking for what I needed. If you can make
due with the one that comes with Windows that's fine. If you don't want to buy one you can
always open many images with your web browser. But if you have a huge library of files to look
through it's a good idea to get something like ACDSee or even CoffeeCup's (free) Image Viewer.
Makes looking at all your images a snap.
Color Pickers and Schemers
Color Picker
A nice color picker can save you time and headaches when trying to match a color from and
image that you've made yourself or found online. There have been many times where I've created
an image only to forget the color code I've used so that I could match a color to the image.
Nattyware offers a free color picker called Pixie. It's a simple to use tool that shows the color under
the mouse pointer in Hex, HTML (HEX Triplet - ex: #dcf34e), RGB, CYMK and HSV. There's also an option to
copy the HTML value so you can paste it into your code, a magnifier for those hard to see colors and a
color mixer. Very easy to use program that's free. Can't beat that.
Get Pixie Color Picker from Nattyware (free)
Recommended: Pixie.
Color Scheme Programs
Color schemers on the other hand are useful to people, like myself, who aren't the best color
theorists in the world. Will this shade of green work with this shade of blue? What if I add
a light teal to the mix? What will it look like? Color schemers can be a great help, allowing
you to work out your color scheme before you start the coding.
I'll admit that while I use a color scheme program, I still find myself using it only to help
generate schemes and not to check the ones I create. Creating my own color scheme for a site
is still done in CSS and checking it in a browser.
There are a great number of color scheme programs out there. Two that I've tried (and have
liked) are Color Wheel Pro (version 2 is about $40) and Color Schemer Studio (current
version is about $50). I used the trial of Color Wheel Pro and it's a really excellent
program. It's on my list of programs to buy - not near the top, but eventually I'll get
it. The nice thing about this program is that if you know Flash MX you can make your own
template for a site and import it into the program to use with the color choices.
Trial of Color Wheel Pro 2
The color schemer program I'm currently using is the Color Schemer Studio. At $50 I don't
think I'm going to buy it but the trial does show you some good color schemes. It has a
random color button that will pick a color and generate a scheme around it. Keep on clicking
until you find a nice scheme to use and you're set.
Trial of Color Schemer Studio
I should mention that with both of these programs - and with any color scheme program you look
at - the best features are the Color Harmonies. This allows you to pick the type of color
scheme you want, Complementary, Split-Complementary, Triads, Tetrads, Analogous, Monochromatic,
etc. Make sure that the program you buy or try has these as they make for unlimited number of
possible color schemes.
There is of course one other option if you don't want to buy a color scheme program. Make
one yourself. Before I had any color scheme program trials I created a PHP version that
would take in four colors and build sample websites using all possible color combinations.
I even created a JavaScript version that would allow me to enter in the colors for
specific areas of a site (including text colors, link colors, headings, etc.). A quick
way to make your own color scheme program - if you have the skill to do so.
Miscellaneous Programs
FTP Program
There are always going to be times when you need to upload your sites to your host or your
clients host. Some hosts have a control panel to do this, but I have yet to find a host
that allows me to upload everything at once. A good FTP program just makes good sense.
CuteFTP is my personal choice, but CoffeeCup also makes a good FTP program that is free.
There's always the simple FTP command in Windows if you'd like, but whatever you decide
to use, make sure you have a way to use FTP.
File Compression
You may not need this for web design/development to be honest. Personally I like it in
my bag of tools to compress (usually ZIP) all my client files to save to disk. I'll even
zip the client a copy so that they have it incase something happens to my copy. But if
you're not working with clients it's still a good idea to have a file compression tool
to uncompress (as in unzip) files you download from the web. Many trial and freeware
programs are zipped so make sure you have one.
Conclusion
You'll notice here that I didn't even touch on area's like scripting languages such as JavaScript,
VBScript, ASP, PHP, etc. If you're using those then you'll find your bag of tools expanding. You
may even look at the list above and think that none of these are really necessary. And you'd
be right. The only things that you need are a text editor and a browser to make an excellent
website. But these are tools that will help you get the job done and get it done faster.
I once heard of a man who built a home by just using his Swiss Army knife. He cut down the
trees with it, sawed them, drilled holes, used it as a hammer, and so on. Think of this man
as the web developer/designer with only the text editor and a browser. You can build a site
with just your Swiss Army knife, but it's much easier if you make use of the tools that
help get the job done faster.
Links
In case you missed any of the links in this article (both Part 1 and Part 2) here's a list
of all the links:
Internet Explorer - Web Browser
Internet Explorer Stand Alone Versions Site 1
Internet Explorer Stand Alone Versions Site 2
Netscape - Web Browser
Opera - Web Browser
Mozilla, Thunderbird and Firefox - Web Browsers
Evolt's Web Browser Archive - for MANY different web browsers and versions
ConTEXT - Text Editor
Adobe Photoshop - Image Editor
Adobe Illustrator - Image Editor
Jasc Paint Shop Pro - Image Editor
Pixie from Nattyware - Color Picker (free)
Color Wheel Pro 2 - Color Scheme Program ($40)
Color Schemer Studio ($50)
CoffeeCup Image Slicer
CoffeeCup FTP (free)
CoffeeCup ZIP (free)
CoffeeCup Image Viewer (free)
ACDSee 6 - Image Viewer and more ($50)
Read Web Developer/Designer Tool Kit: Part 1 - Browsers and Text Editors
If you want to read more about programs for your tool kit please read part one of this article.