TWO GREAT UTILITIES FOR WEB BUILDERS - PT 1

I have previously outlined my general workflow for designing and building websites. I take a pretty "hands-on" approach. This being said I would like to share a couple of powerful utilities that I use on every web project and have found to be invaluable in terms of saving time and keeping the quality of my work high. Both are available in both free and commercial versions. I think knowledge of these could benefit anyone involved in building and/or maintaining websites.

Irfanview - The Great Little Image Utility With the Funny Name

The first tool addresses the issue of image management. The scenario I will address as an example is this one. You have your design, the client gives you a disk or sends you several emails of various pictures to use, usually full size digital camera or scanned images. Now comes the task of re-sizing and optimizing these images to work in the website. If there are a large number of images involved, this is a time consuming and repetitive job that I hate to bill to my clients at full rate. There area number of shortcuts, but they usually yield less than optimal quality and dependability. The solution? Irfanview (pronounced ear-fan-view). The powerful little program with the funny name. Below is a list of some of Irfanviews many functions.

* Many supported file formats (the list is too long to include here.)
* Multi language support
* Thumbnail/preview option
* Paint option - to draw lines, circles, arrows, straighten image etc.
* Toolbar skins option
* Slideshow (save slideshow as EXE/SCR or burn it to CD)
* Show EXIF/IPTC/Comment text in Slideshow/Fullscreen etc.
* Support for Adobe Photoshop Filters
* Fast directory view (moving through directory)
* Batch conversion (with image processing)
* Multipage TIF editing
* File search
* Email option
* Multimedia player
* Print option
* Support for embedded color profiles in JPG/TIF
* Change color depth
* Scan (batch scan) support
* Cut/crop
* IPTC editing
* Effects (Sharpen, Blur, Adobe 8BF, Filter Factory, Filters Unlimited, etc.)
* Capturing
* Extract icons from EXE/DLL/ICLs
* Lossless JPG rotation
* Unicode support
* Many hotkeys
* Many command line options
* Many PlugIns
* Only one EXE-File, no DLLs, no Shareware messages like "I Agree" or "Evaluation expired"
* No registry changes without user action/permission!
* and much much more


To be honest I have never found the time to explore all of Irfanview's capabilities,but the ones I have tried worked well. Today I will be discussing using batch processing to take the clients picture files and convert them to use in a website. I create a directory, usually with 'websize' in the name and then open Irfanview. When you first open Irfanview you are presented with a simple user interface, with a screen for single images or movies.



On the file tab in the menu, you select 'Batch Conversion/Rename' or you can just press the B key on your keyboard. You will be presented with the dialog shown below.


Choose a Function - In the top left corner of the dialog you select the function you want to perform. A batch conversion will convert files to a specified format and will also perform other functions in the process; such as resize, optimize, sharpen,watermark, etc. More on that in a moment. Batch rename can rename a group of files and allows the setting of a naming pattern and the ability to serialize the names. This can be handy for making groups of images you use conform to your own naming conventions without having to keep track of doing individual files. It is also real handy for loading gallery applications that load using file names/directories. The last of the three choices combines the first two functions.

Choose Your Files and Output Directory - On the right side of the dialog is where you can navigate to the working directory and choose the files you wish to work on. You can do the selecting and sorting in this dialog or you can just open a folder and select and drag and drop the files you want to work with into the bottom left box on the dialog. To preview files you have added in the box, just select a file and it will appear in the image preview box on the left if you have the Show Preview image box checked. Or you can just press the P key on your keyboard. In this interface you can also move the files around or autosort them by different parameters to get them in order for serializing. By default Irfanview works from top to bottom.

Conversion Settings - On the left, under 'Batch conversion settings' you can set the Output format using the dropdown. Once you have selected your format you can click on the 'Options' button and you will be presented with choices specific to that format (jpeg/gif options shown below).


One of the coolest things here is the ability to set the filesize, using the RIOT plugin and the optimization is set automatically. To add other functions to your you click on the 'Advanced' button below the 'Options' button and you will be presented with the dialog shown below.


This is where the true power of Irfanview starts to show. You have a variety of options for setting resizing, cropping and resolution as well as make tweaks to the pictures. Usually I just use the resizing function, but the quality of adjustments made using this tool are quite high, of pro caliber (see the bottom of this article). When using settings here, pay particular attention to the MISCELLANEOUS choices in the bottom right corner. This controls overwrites and directory writing. You also have an option on the bottom left of this dialog to save settings (as and INI file) and to load settings you have previously saved. Another great time saver!

If you have selected a rename option in the 'Work as' section that will activate the 'Batch rename settings input. You can enter a name and then click on the options button which will show you the various settings you have available. It is all pretty self explanatory. One of my favorite features here is the ability to replace text in a file name - handy for versioning. Other than that, on the file management side, I usually have created a directory for the output and select Copy original/input files to output directory. I imagine most people would make the choice to keep the originals.



This brings us to the final choice in this flow, selecting the output directory. You can choose to input a directory manually (who does that anymore?), use the current directory (default),or Browse to choose your output directory.

With your images all loaded and sorted and all of your output options and your output directory select you are now ready to go. "Start Batch" or the S key on your keyboard and watch Irfanview work. The first time you do this you will be amazed at how fast it is. It reports its output as it goes and lists whether each conversion went okay and it gives a a little summary of files, errors and warnings at the end.



That is basic file conversion on Irfanview. I have used this utility for years and is has saved me untold man hours in putting together web projects. I also do photography and use it for renaming and optimizing proofs, renaming files for submission to editors and other task. As I mentioned before, Irfanview is free for non-commercial use and a license for commercial use is currently only USD $12.00, quite a bargain and well worth it to support Irfan Skiljan in his efforts to continue enhancements and improvements. This utility works on all current versions of windows, even 64 bit Vista. You can obtain Irfanview at http://www.irfanview.com/ .

Example: I have posted a couple of images for you to compare. The first if for the original image, a web image at 114 kb and the second is the same image, resized and optimized with Irfanview to 51k. You can view them in different tabs on your browser to compare or download them for comparison. This will give you and idea of the quality you can get with Irfanview.

Original

Optimized

Next up - JRuler!

From Rock to the Web - A Technophobe's Journey

I have had a love/hate relationship with personal computers most of my life. For a while I was a computer science major in college. Then I realized that sitting in a cubicle for hours a day hacking code, drinking coffee and grape soda by the liter and eating Fritos was probably going to put me in an early grave. So I ran away and joined a rock band. Became a technophobe. Really, I didn't want to ever have anything to do with computers again.
About two years later, I was out of the band and getting my start in the music business and my mentor, Greg Forest, showed me how the computer could be used as a tool. With his techniques he was doing the work of a whole office full of people by himself. This was 1988 and he was way ahead of the game. He was even doing some digital recording, turning out demos for songwriters. So I got interested in computers again.
At this time I was also doing a little bit of writing for a couple of music publications and through my relationship with editors got some work doing first typing and then layout. We were doing the typeset on computers and then doing a paste up of the layouts. We were doing the computer stuff on Ataris and Macintosh computers (yes the little self contained box). This is where I started learning desktop publishing and graphics.
Along about this time I went through a transitional phase of my life, so I wasn't doing much on computers as I kept moving around, working on the road some and changing jobs pretty often. Oh yeah, I might add that at this point around 1991-92 I still had never owned a personal computer of my own.
I got out of music and in to art. I was doing fine art photography and starting to show some work in galleries while supporting myself working as a restaurant manager and waiter. There were hints on the horizon concerning digital photography but I was into film and the darkroom and I stuck to that. Besides, good digital cameras were really expensive at the time and film would probably be around for at least another century, right?
One pivotal event in my path to the digital world was when I worked an agreement with a fellow in Austin to trade finishing out a cabin in Bastrop County for a year's rent. The cabin was on the edge of some wild woods, but there was a main house on the property that I had access to and it had computers and Internet. In my little escape to the woods I had managed to hook up with the whole world.
This was 1999 and I had heard a lot about the Internet, but had never really done any surfing. I hardly knew what a browser was. I was desperately behind and out of practice on computers but I got really interested in the Internet and started spending a lot of time up at the main house surfing the web, exploring and learning. It was along about this time that I published a calendar of my photos and thought that it would be a really great idea to have my own website, although I had no idea what it would take to make that happen. So I filed the idea away for the time being.
When I got done with the gig at the cabin I moved back in to Austin. My calendar was released at the end of 1999 and that coincided with my move back to town. I bounced around for a while, living with room mates, doing art. A friend of mine loaned me an apple computer he had and I started using it to surf the net, although it was often frustrating since I was on a dial up connection through an external modem. Soon I finally bought a computer of my own. I bought it at a pawn shop for four hundred dollars. It had an AMD K6-2 chip,128 MB of RAM and Windows 98. Adding more memory to this computer was the first of many computer upgrades I would do myself. About the time I made this purchase I also rented a loft/studio in Smithville and prepared to move there. An acquaintance of mine who was a web developer offered to help me out with getting a web site going. Unfortunately, before this was accomplished our relationship soured and that was the end of that although I did get my domain registered. I had no idea what it took to hire someone to do a website. I imagined it was pretty expensive. I had a free webspace with my dial up ISP so I created a little web page there. Then I found out about Dreamweaver and how you could download a free thirty day trial. So I downloaded it and started figuring out how to build a website. This would be version 1 of leswarren.com. I had Paint Shop Pro for the graphics, which I kept pretty simple. It was a frames based site with a basic black and white scheme. The Dreamweaver trial ran out, so I started learning to code by hand. Soon I was able to cobble pages together in a text editor. I still don't use Dreamweaver much.
Not long after this I was doing a photo shoot for a caterer who said they needed photos for a website and a brochure. As always with these local jobs I asked who would be doing the design and printing for the brochure. They said they didn't have anybody yet. As providence would have it, I had recently come in to some money from an insurance settlement and had used some of the money to buy good graphics programs, Pagemaker being one of them. I asked the caterer if they wanted to give me a shot at the brochure and the website. I convinced them that it would be a whole lot simpler to have one person handle everything and besides, I would take some of my payment in trade. I was able to complete both the brochure and a simple website satisfactorily and give my girlfriend an amazing catered dinner for Valentine's Day. Little did I know it, but I had started a new career path. It would take years to open up fully, but the work had begun.
I started practicing and studying in earnest. There were and still are a lot of resources on the web. I started learning about javascript and dhtml. My next job I traded a website for a van. It was a little more advanced with javascript slide shows and stylized navigation with image swaps. I also improved my own site. It would be years yet before I left my restaurant job and went full time. All that time I studied and improved. At some point I took some part time work in a commercial photography studio to learn digital workflow. Then I bought a digital camera. That camera paid for itself the first week I had it. I started studying Photoshop and how to work with digital photos and I must say, that is one of the hardest things I have ever learned. But I eventually became an expert, which not only helped me make a little money at photography but also helped a lot with websites. I put Linux on my computer and learned how to bash around in servers. I eventually had to replace my computer. And so the progression went.
Now I am a full time freelancer. I do graphic design and web development. I now work on big dynamic sites, usually working with programmers. I also do some photography. I live in a small town so I have to diversify to keep going. I still have to study continuously to expand my skills. Besides just the technical stuff I have had to learn about web strategies and how to make websites work for my clients. I don't anticipate ever being able to do this without doing a lot of homework to keep up. But thanks to the web and a lot of individuals who are willing to share their expertise and experience the knowledge is accessible. And I know I am not the only one who has learned this way. You might say the web is self-propagating.