 | ||
|
| ||
| ||
|
| ||
September 28, 1998
The following article was originally published in the Site Builder Network Magazine "Site Lights" column. (Now MSDN Online Voices "Design Discussion" column.)
I used to wish I could find one tool or technology that could do it all.In my garden, I have my Zen Gardner tool, which I use for all kinds of tasks; before, I used several different tools. But it's not that easy when building a Web site or an animated GIF. You most likely find yourself switching among several applications for design, development, and production. You May also create Web graphics with many of the available technologies that add animation, reduce download, and enhance the user experience. There is always a new tool to try just around the corner, and there is no one, Zen-like tool that will do it all.
There is an overwhelming plethora of industry graphics tools and technologies to choose from -- including quite a few from Microsoft. They all provide ways to create imagery and motion for various purposes, but how do you know which one to use, and when? Here are a few suggestions and considerations for integrating any of the Microsoft graphics- and site-related tools and technology offerings into your Web design process.
Best used for:
Companion to other products, such as Greetings and Publisher, the Picture It!®
photo-editing program allows consumer, small-office, and home-office users to easily fix and modify their photos on their PCs. Picture It! is not as robust as Image Composer for creating Web graphics. Instead, this tool focuses on preparing photographic images for social professional-looking output, such as cards, collages, calendars, flyers -- but not necessarily for Web graphics.
Best used for:
Photo Editor shipped with the standard edition of Microsoft® Office 97. If you only have Office 97 and seek a quick tool for accomplishing very basic photographic editing capabilities, Photo Editor is your solution. This tool lets you scan, crop, resize, rotate, and add graphical effects to photographs. Some photo editing is enabled through a set of icons on the tool bar, such as smudge, sharpen, adjusting color balances, adjusting gamma, and setting transparent colors. If you're a digital photographic expert, don't expect to find many advanced features. This tool does not include effects for creating drop shadows, filtering edges, making complex selections, or using typography.
Best used for:
A companion to FrontPage98, Image Composer
works great for creating quick, Web savvy graphics. As an avid user of Adobe Photoshop® for years, I found it took some time to get used to sprites instead of layers. You can also edit Adobe Photoshop files in Image Composer. The tool supports many basic and advanced image-editing features, such as color tuning, cropping, rotating, alignment and others. It also ships with some cool warps, filters, and art effects, and supports plug-ins. One thing I wish the tool did: When you are color tuning an image, you have to hit the apply button to see the effect. I would prefer a preview or the ability to view a simultaneous change to the image.
Best used for:
After creating a series of images in Image Composer, use GIF Animator to import the individual images, add animation, control palettes, and preview your animation. The only thing I wish this tool provided is a size monitor so that I could see how large the final animation file was before saving it.
Best used for:
Yes, there is yet another option, a new kid on the block. PhotoDraw™ 2000 will be the graphics companion to Microsoft Office for the business professional, and is not targeted for the high-end design professional community. However, it combines the image-capture and retouching capabilities of Picture It! with Image Composer's warps and filter effects and OfficeArt's AutoShapes and drawing tools.
As a designer, I appreciate several aspects of the tool. The crisp visual menus and interface elements are very effective at communicating the form and function of the tool. The inclusion of 20,000 graphics, 300 professionally design templates, visual effects, and various brush stroke effects is impressive. Imagine that you don't have to know the difference between vectors and bitmaps. Both raster and vector images can be imported and edited in a simple Microsoft Office-like interface.
PhotoDraw will read Adobe Photoshop files, and supports importing and exporting a variety of standard graphics file formats. It also supports a native file format, MIX, for storage and production files. I've tried to create graphics in Word and PowerPoint, and found it more than challenging, with the outcome somewhat unprofessional looking. Once I got used to the interface and spent some time with this tool, I was able to create professional-looking layouts and graphics combining vector and photographic imagery in a short amount of time. This tool will definitely help Microsoft Office users improve their design and graphic creation -- going beyond the old clip-art phase into a new level of more professional-looking business graphics.
Best used for:
Use Liquid Motion to create animations that will be viewed with any browser that supports the Java programming language, including Internet Explorer 4.0 and 5, Internet Explorer 3. x, AOL, UNIX, Netscape 2. x, 3. x, and 4. x.
This tool provides triggers that make it easy to create simple animations. Advanced features, such as time effects and inner scenes, aid in creating more complex animations. To work with your own graphics within the tool, you can easily import vector files from Macromedia Freehand and other file formats. A variety of 2-D and 3-D graphics-generation tools are available within the tool. For novice designers, prepared animated Liquid Motion themes add animation to standard FrontPage themes.
Best used for:
This tool is best for those who want easy page generation and quick graphic creation. To keep your Web designs consistent, FrontPage provides thematic graphical design packages that include backgrounds, bullets, banners, hyperlinks, and navigation bars to use across your site. FrontPage also ships with two companion tools, Image Composer and GIF Animator, for creating original graphics.
Best used for:
With Visual InterDev™, you will find yourself whipping out ASP and Dynamic HTML pages using a WYSIWYG editor, a rich database tool, and end-to-end debugging facilities.
Those who are looking for Web graphics solutions using Visual InteDev will now find graphical themes similar to those of FrontPage 98. Themes provide a choice of several graphics, layouts colors, and typography styles. This tool also now has a Cascading Style Sheet (CSS) tool to help integrate design and layout technology into your pages.
Best used for:
Use Cascading Style Sheets (CSS) technology to create the illusion of graphics using typography by combining various characters and symbols. The z-index capabilities of CSS enable you to stack typographical elements and position such on a page to build lightweight Web graphics. CSS can also be used to enhance typography and layout of HTML elements on the page. If considering CSS to create graphics in your design, be sure to consider non-CSS browsers and differences in browser CSS implementations. Both Visual InterDev and FrontPage 98 support CSS authoring.
Best used for:
Dynamic HTML (DHTML) enables animation, behaviors and rich functionality that can be added to your graphics and any other HTML element on the page. Many tools provide WSYWIG editing environments for DHTML -- but behind the scenes, this technology is purely scripting plus HTML. An object model has been established for the HTML document that exposes all elements within the HTML document as objects. Just as we give names to our kids, and tell them what to do by first calling their names, we can give names to our HTML elements and tell them what to do via script. Therefore, graphical elements can be hidden, visible, positioned, moved, scaled, and so forth within the browser window.
Best used for:
Active Server Pages (ASP) technology cuts page production down, works well for designing templates, and provides a great solution for data-driven Web pages. If you have a database of graphics, they can be delivered to your Web pages or template via ASP. For example, a gallery of images that would normally take up several HTML pages, with a couple images per page, can be reduced down to one page of ASP that generates all the pages required for the gallery. ASP can be used to help you structure the environment of template placing of your graphical and textual content.
Nadja Vol Ochs is the design consultant in Microsoft's Developer Relations Group.
For creating graphics, I've used Adobe Photoshop for years. It remains my staple image-editing tool. I do use GIF Animator and Image Composer for different projects. At first I found the transition between using Photoshop layers to using Image Composer sprites a bit confusing. I recently started playing with PhotoDraw™ 2000, and find it interesting to use. I especially enjoy the visual interface elements, and the variety and unique manipulation of brush strokes. The 3-D integration is also effective. If you are familiar with using Office products, you will find the interface easy to use because it is so similar to other Office products' functionality.
Most designers are creatures of habit when it comes to tools. We get used to how graphic manipulations are handled in one application, then become bewildered by new approaches to working with graphics. I find it fascinating when a tool challenges my own stubbornness in how I assume images should be treated and what type of interface we expect them to be massaged within. Overall, you will use a combination of tools and technologies you are most comfortable with to get the graphics created, and to your client or audience, in the most creative, quick, and effective manner. Keep your toolbox full, and don't be afraid to try something new. Interesting tools and techniques pop up where you least expect them.
- Nadja
Photo Credit: PhotoDisc
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top