Some useful graphics tools for designing web sites

The programs listed here are open source or freeware; one of the reasons for that is so that others can work with the files. My experience is that sooner or later others will have a need to change files. There is a benefit to using open source because the programs do not need to be purchased for every person that needs to make changes, and there is no conflict of interest about copying software. has the majority of features that people use photoshop for. Microsoft paint just does not cut it. Layers are needed to add shadows and highlights. Transparencies are needed to so images are not limited to boxes; Transparencies also need to be variable, some image elements need to allow the background to show though beyond what can be done in CSS. Color adjustments need to be made to create masks to do texture – they also allow for artistic work that can not be done with paint. Blurs are needed for highlights and shadows as well as to create textures – for example a metalic texture is created with two basic steps; 1) Create a random noise (color it of course) 2)  Apply a motion blur falls short in being able to manipulate the perspective of an image. Gimp another open source program is able to change perspective. Gimp has a more complicated user interface. The user interface of is easy to use and has features like clip image to selection which really saves time. Changing perspective is often needed to take an image from a camera and square it or take a square image and convert it to a 3d image.

Inkscape is based on SVG and does a wonderful job to create vector graphics. Don’t let one of the main reasons for the program limit what you think of it; Inkscape also handles images. Masking can be done by another image, by a clippath or any other element. If you want to cut out an image from a photo Inkscape can be the fastest way to do it; one assumes not all elements are not behind a green screen. images are all svg images.

Morphing images: Photoshop is not opensource it does morphing. I have not yet come across a good opensource program for morphing. 3d programs of course do morphing but there is a big difference between 2D and 3D programs.

3d ray tracing rendering: Daz 3d studio does not provide for creation of complex objects. One can create simple objects with it, simple does not mean images are not photo realistic. Simple objects would not include a photo realistic human face object. A human face can be rendered with Daz but the object itself is imported. Daz 3d studio also animates objects.

A recent ad on TV had a pizza box with the brand of the company animated, (it enlarged from left to right). Creating this animation with Daz would involve the following steps. 1) Create a simple box and size it. 2) Apply images to box (see Ironman image above) but without the brand name. 3) Create a simple plane sized to box. 4) apply brand name to plane. 5) Create the scene, place brand name plane on top or in front of box. 6) Create a deform shape for the plane element that scales the logo larger, limited in size to create desired effect. 7) Animate the base of the deform starting from the left across the brand name plane. The results would be photo realistic (actual photos are used), and identical to the TV ad.

The use of the described animation on a website, would normally be done in flash. Daz creates a AVI file – Format Factory converts that to a flash video or a flash object. Silverlight can also be used but requires WMV video.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: