Better by design

 By Simon Williams

Whether designing for page or screen, using the right application saves time and effort. Simon Williams looks at the leading contenders.

HardCopy Issue: 54 | Found In: Design & Media | Published: 01/11/2011 | Last Revision: 22/02/2012

Design software used to imply paper-based documents pretty exclusively. Whether it was desktop publishing or the photos and illustrations used to brighten the pages, the finished document was likely to end up in print. While this is a still an important medium, design for eBooks, video or the Web is now just as important and many applications can handle more than one type of output. Here we look at the most impressive applications for print, video, photos, illustration and the Web. Although this market is dominated by Adobe, which made its name with products like Photoshop, Premiere and InDesign, there are other well-known players such as Quark, Corel, Pinnacle and even Microsoft.

Print publishing

Despite many predictions of a screen-based society, a vast amount of information is still published on paper. Desktop publishing (DTP) applications are ideal for putting together anything more complicated than the internal report which can be knocked up in Microsoft Word. These are essentially assembly tools, taking words, graphics and photos and laying them out on a page.

What we use

Jason Stanley - Graphic Designer

Here on HardCopy our art editor Jason Stanley is usually to be found buried in Adobe CS5.5 Design Premium, using InDesign to design the magazine itself, and both Dreamweaver and Fireworks on our Web sites.

Jason also uses Photoshop and Illustrator extensively, and Adobe Flash to create online promotions. In the past we did use QuarkXpress together with Photoshop extensively, but the integration offered by the Adobe CS suite prompted us to switch.

Having said that they’re largely about designing for paper, most DTP programs can also be used to repurpose material, allowing you to use the same content and design for electronic distribution on DVD or on the Web. Adobe’s InDesign desktop publishing tool superseded PageMaker and was created as a direct competitor to QuarkXPress. In many publishing houses, Adobe has usurped its rival by pushing the tight and increasing integration between Adobe InDesign CS5.5 and the other Adobe tools found in the CS5.5 suite. InDesign 5.5 adds extra features for eBook publishing and can create for Flash or HTML5 (important if you’re designing for iPhone or iPad). Different sizes of page can be created in the same document and there’s extensive support for long documents (cross-referencing, conditional text, bullets and numbering). It also includes strong typographical control, thanks to Adobe’s historical strength in font design and formatting. Often dismissed as too basic, Microsoft Publisher 2010 has many of the features needed to produce day-to-day documents in small and home offices. This version is the first to incorporate the Ribbon interface, bringing it into line with the other members of the Office suite.

Microsoft Publisher screenshot
Microsoft Publisher is a surprisingly sophisticated desktop publishing tool for use at home and in a small office, and remains easy to use.

The Ribbon doesn’t exactly suit a desktop publisher, where a toolbox is often more convenient, and some odd changes have been made, like removing the possibility of scanning an image directly into a Publisher page. Even so, the program is generally easy to use and includes direct PDF, HTML and XPS creation, as well as integrating well with contact lists from Excel, Outlook and Word for mail merging. Object alignment is much easier, with guide lines popping up to show when horizontal or vertical edges align. Typographical support has also been improved, with OpenType fonts now supporting alternate character shapes, true small caps and ligatures. The longest lasting professional page design software is QuarkXpress, now on version 9. It started as a Mac-only product but has been cross-platform for many years. As well as providing output to print up to broadsheet and beyond, it now supports the ePub ebook format, Blio rich media eReader and iPad through the free App Studio add-on. Particular strengths of QuarkXPress include typographical controls, comprehensive shaped text-wrap tools, image grids, easy cloning and linking of page elements and a separate story editor to help modify text in complex layouts. Conditional styles make it easy to repeat formatting rules, such as changing the font or size of the first word in stories throughout a publication. Others to consider include Adobe FrameMaker, PageStream, and Serif PagePlus.

Video production

Editing film or video electronically is a key part of film, TV and corporate presentation production alike. Video editors import unedited video clips of all lengths and present them on a time line or storyboard, showing separate lines for video clips, titles, sound tracks and stills. Combining all these elements creates the finished video which can typically be output in a variety of formats and to DVD, CD or directly online to services like YouTube. Probably the best-known of all video editors, Adobe Premiere CS5.5 is available in two distinct versions: Professional and Elements. The Elements product is designed primarily for home use, while the Professional version extends through semi-professional and into the professional market. The big improvement in version 5.5 is the introduction of the native 64-bit Mercury playback engine. Using this tool gives much smoother playback while editing, without the need for so much separate rendering. It’s now much easier to switch between Premiere Pro and other systems, such as Final Cut Pro or Avid software, which may be in use on a collaborative project. As well as being able to use the keyboard shortcuts of either of these video editors, you can also move video to and from Premiere Pro using an XML format as a go-between. Aimed at the enthusiast and semi-pro video market, Pinnacle Studio HD 15 is a video editor with many of the same core features as Premiere Elements, for which it is a direct competitor. Pinnacle is a subsidiary of Avid, one of the main providers of professional video editing software for TV and film. The program is aimed at video enthusiasts to help in the editing and distributing video on DVD and CD, and for uploading to the YouTube Web site. It has a wider range of supported formats than some higher-end products, reflecting the range of different platforms in the consumer video market.

Pinnacle Studio HD screenshot
Pinnacle Studio HD offers a cleanly designed screen, ideal for video editing, with a timeline at the bottom, preview above and to the right, and a tools panel to the left.

The new features in version 15 include archival, so you can save all the files used in a particular video project together in one place. This could be to an internal or external hard drive, DVD or memory stick, or an online storage service. Aimed at the same general market as Pinnacle Studio, Corel VideoStudio Pro X4 Ultimate is a video editor for the enthusiast. It is designed to cope with a wider array of uses than some of the mainstream professional applications out there, though not at such exacting levels. VideoStudio Pro X4 Ultimate adds a couple of interesting features to its set in the latest version. It now handles stop-motion animation, so you can shoot videos frame by frame, and handle time lapse easily, either by removing frames from a video or by combining a number of stills to make a movie. The package includes proDAD Mercalli SE image stabilisation and Boris Grafitti 5.3, which helps create all kinds of sophisticated titles. Others to consider are Avid itself, and Apple’s Final Cut Pro. There is also Camtasia Studio from TechSmith which lets you record and edit what appears on the screen of your PC for training or presentation purposes. It can export to a wide range of formats including H.264/MPEG-4, MP4, SWF, WMV and MOV, and comes with presets for YouTube and devices like the iPhone or iPad.

Photo enhancement

The increasing use of photographs in all forms of media has boosted the importance of photo editing software, so it is one of the key tools in a designer’s kit. From the basic ability to resize and crop images, modern tools can often take the place of camera settings to enhance or apply effects to photos. They can be stitched together to make panoramas and objects can be removed by ‘airbrushing’.

Adobe Photoshop CS5.1 screenshot
By combining different photos of the same subject, you can use Adobe Photoshop to create a High Dynamic Range (HDR) image which looks very vital.

More recently, the ability to edit RAW photos, which take data directly from a camera’s sensor without applying any compression or other modifications, has made the digital darkroom a reality. Adobe Photoshop CS5 is the best known of all photo editing applications, so ubiquitous that the verb ‘to Photoshop’ is now listed in some dictionaries. Version CS5 includes several new features designed to speed up treatment of photos. Tools like automatic lens correction can use an image’s EXIF information to automatically correct for distortions like chromatic aberration and vignetting. Drawing a straight line over a photo and snapping the photo to the line corrects a crooked image in one move.

Designing in 3D

Designing in 3D is a good deal more complex than designing in 2D as it involves a combination of Computer Aided Design (CAD) and rendering software, but it has major applications in creating objects for games and film.

Creating compound 3D models depends on being able to manipulate standard shapes, such as spheres and cubes, and being able to create new ones from scratch. New shapes can be generated using a virtual lathe to spin 2D shapes, or a mesh to model shapes from a series of linked triangles.

Once the basic model has been created, its surface can be smoothed, painted and texture mapped to make it appear more real. Models can then be laid out to build up a scene for a fixed image, or fed into a games engine for animation. Computer Generated Images (CGI) are used in film, video and TV, for both feature and advertising content.

The main commercial 3D modelling tools come from companies like Autodesk, originally known for AutoCAD but more recently the creator of the Maya 3D design and animation suite. Autodesk has several related tools such as Softimage and 3ds Max.

In a different area, specifically to help modelling landscapes, Bryce 7 is both easy to control and capable of producing very naturalistic or extravagant fantasy landscapes. A series of plug-ins for adding people and specialist characteristics to Bryce landscapes are available. Originally from the stable of Kai Krause and available only on the Mac, it’s now supported on both Mac and PC.

If you want to try 3D modelling before making what can be a substantial investment, there are many freeware offerings that are worth having a look at. For example, Wings 3D describes itself as an advanced sub-division modeller and is used by some professional 3D designers as a handy scratchpad. A list of 25 freeware 3D modelling programs can be found at www.hongkiat.com/blog/25-free-3d-modelling-applications-you-should-not-miss/.

Other features, like Content-Aware Fill can remove unwanted objects, like signage and utility cables from photos in a few swipes of a brush, and knockouts are now much easier to set up and adjust, even when dealing with fine detail, such as hair. Although ArcSoft PhotoStudio 6 is a budget application in comparison, it still shares some similar tools. Both can work with High Dynamic Range (HDR) images, which PhotoStudio creates by combining multiple shots of the same subject, bracketed with different exposures. It also has a software engine which can intelligently remove noise from images taken in low light. Photo noise can be a considerable problem with less expensive cameras and at lower ISO levels. Like Photoshop, PhotoStudio 6 supports RAW camera formats, so it can work directly with sensor images. PaintShop Pro used to be a rival to Photoshop and although more recently it has fallen behind, Corel has continued to develop the application. With PaintShop Pro X4 you have an economical but well featured photo editing tool. Like the other two, it supports RAW images and can create HDR shots with vibrant or accentuated colours. It can also achieve selective brightening of parts of an image and combine similar images to create blends with the best elements of each image combined into one. If you’ve seen those funky cityscape shots, where everything looks like tiny models, you can also simulate the effect of a tilt-shift lens, to achieve this. The new version also enables you to add adjustment layers to images, allowing you to experiment with changes and effects without altering the original image. Other applications to consider in this field are GIMP (the GNU Image Manipulation System), Serif’s PhotoPlus X5 and Photoscape.

Illustration software

Drawing or illustration software is different from photo editing software in several respects. The main one is that photos are raster graphics, defined by the colours of the rows of pixels that make them up, while drawings are vectors, controlled by the coordinates of their nodes and the equations of the lines that connect them. Vector images can be resized to any level, without affecting their sharpness – they never pixellate. Drawings are more often created from scratch within an illustration program and are usually used by designers who have artistic training. Illustration applications are often used with graphics tablets, which provide more natural interaction than using a mouse. Originally a partner to Photoshop, Adobe Illustrator, now in version CS5, has been rather overshadowed by its tearaway sibling. The program enables smooth curves to be drawn with mouse or stylus and can simulate various natural media, such as bristle brushes. It can cope just as well with perspective drawing, providing grids for 1, 2 or 3 point linear perspective. The Blob Brush can be used to draw areas with a single vector outline in the same way you might paint a raster area in a photo editing program. With multi-platform design becoming more and more important, drawings produced in Adobe Illustrator CS5 are resolution-independent and will scale correctly to any screen size.

CorelDraw X5 screenshot
Borrowing a feature from Corel Painter, CorelDraw X5 offers artistic brushes which mimic the use of natural paint media in a vector environment.

Perhaps better known than Illustrator, at least in the Windows world, is CorelDraw. Now CorelDraw X5, the program includes a new colour-management engine for better colour matching across different media, and new Web graphic design tools which make it easier to put clip-art together quickly. You can fix the radii of curved corners on objects, so that resizing them doesn’t disturb the corners. The PowerTrace tool, which converts raster images to fully-scalable vectors, has been improved again and creates more accurate reproductions. Sold as a suite, CorelDraw includes copies of Photo-Paint, PowerTrace, Capture and Connect, so providing a pretty comprehensive set of design tools in the one package. The Premium version includes VideoStudio Pro, adding video to still image production; and SWiSH Max for Flash animation. If you need to create drawings for business, such as floor plans, flow charts or tree diagrams, you may find a purpose-made tool like SmartDraw more convenient. This vector-based application relies on a wide selection of pre-configured templates which you can quickly adapt to your needs, while retaining a professional look and feel.

Adobe Flash

There are a number of technologies involved in handling designs for electronic distribution, whether for phone, tablet or Web. Adobe’s Flash has arguably been the most important for the last several years.

Flash is a multimedia platform, designed to bring animation, video and interactivity to Web pages. It can be used to animate vector and raster images, and is the basis for many online advertisements and a wide selection of simple games. The Flash Player is provided free by Adobe with Adobe Reader and has well over 100 million installations.

The best-known application for building Flash materials is Adobe Flash Professional CS5.5. This is a fully fledged creation tool for Web animation and interactive applications. It can be bought separately, but is also included in all versions of Creative Suite except Design Standard.

Flash Professional uses advanced animation techniques, such as inverse kinematics, tweening and motion properties like spring and bounce, to help realise complex scenes. It also enables interaction, so customers for Flash-created projects can exercise comprehensive control over object elements.

Flash is available for PC, Mac and a wide variety of portable devices, including smartphones. Flash file formats are supported by several third-party applications, including KToon and SwiSH Max 4. TechSmith’s screen casting tool, Camtasia, used to create screen-based tutorials, producing Flash-compatible files. Its rival, Screencam, produces Shockwave Flash (SWF) files by default.

The importance of Flash may have peaked as Apple has stopped supporting its use on devices running iOS, which means iPhone, iPad and iPod. While this is only a small proportion of available devices, HTML5 is also gaining momentum and may well be the platform of choice for the next generation of mobile devices, whether or not they can run Flash.

SmartDraw 2012 has a completely redesigned project management tool which enables you to squeeze a complete chart down to a single page and to colour code tasks automatically, to show when they’ve run late. Other freshly designed templates include those for hubs, meetings, timelines and organisational charts. Others to consider include Corel Painter 12, Microsoft Visio, OpenOffice.org Draw and Xara Xtreme.

Targeting the Web

Designing Web sites is very big business, but there are several different approaches, from hand-coding of HTML and CSS to big database tools which are all about displaying goods online. In between these are Web design tools which work much more like DTP programs. These applications aim to make Web design a matter of choosing and positioning elements on a page, with all the hand code kept behind the scenes. Many can handle simple e-commerce, too, in the form of shopping trolleys and access to PayPal and credit card payments. Adobe Dreamweaver CS5.5 is well suited to targeting the growing range of devices capable of displaying Web content. Not only does it generate and support HTML5 and CSS3, but it can display the same screen in several sizes simultaneously on a PC so you can compare how they all look. The program also incorporates the PhoneGap framework, so you can package any application you design ready for the App Store or Android Marketplace. As with InDesign, Dreamweaver is well integrated with other Adobe applications, though in this case it’s Flash (see panel), Fireworks and Photoshop. Dreamweaver is a good tool for hand coding, as well as for designing from the front. The program can help with coding, providing code hints for HTML, JavaScript, Ajax and PHP. Microsoft has come a bit late to the Web design party and Expression Studio 4 Web Professional is a little light in feature terms by comparison. However it does have good standards support and can handle HTML, PHP, XML, CSS, JavaScript, ASP, Ajax, Flash and (of course) Microsoft’s Flash rival, Silverlight. The Studio 4 Web package is a suite that comprises the Expression Web site designer, Expression Encoder for Silverlight, and the vector drawing editor Expression Design. Serif WebPlus X5 is perhaps a surprising inclusion in this company but can be a very sound choice for individuals and smaller companies who want to create a presence on the Web with very little outlay. WebPlus X5 works very much as the same company’s DTP program, PagePlus X5, does for paper documents. Unless you really want to get down and dirty, you never need to see any HTML in the complete design and running of your Web site. Version X5 includes good e-commerce integration together with the ability to set up blogs, forums and online booking, and to display Google Maps and YouTube videos within pages. You can also show slideshows and live Twitter feeds. Other applications to consider include MR SITE Takeaway, NetObjects Fusion XII and Web Studio 5.

Share and Bookmark  

Comments

Be the first to comment about this article...

Leave a comment

You must login to place comments.