Design Software Tips

(On this page: Selecting The Right Graphic Design Software, The Difference Between Raster and Vector Graphics, Design By The Numbers - Monitors Show Color Differently, Design For Print, Design For The Web.)

1. Selecting The Right Graphic Design Software

   While we are here to help you find the font you're looking for, we would also like to make some recommendations on graphic design software selection to help ease your pain, and maybe clarify a thing or two you were unsure of...

   In the grand scheme of design there are two types of software for dealing with 2D design: vector and raster formats. As a random example of both, vector format outputs text more clearly than raster, but raster usually allows for better execution of special effects and higher quality rendered art. Each have their own strengths.

   For this discussion we'll stick to the two software platforms most professional designers would consider to be the standard for design: Adobe Photoshop and Adobe Illustrator. There are many versions in use of both applications. Older versions are still loaded with great features to make your design come to life and with professional quality. There are a few other applications to choose from, but we feel Photoshop and Illustrator are the most suitable for this section's discussion.

   A note on professional quality... the application can only do what the user wants and it is definitely possible to create professional quality work with lesser suites of design software, but it's unarguable that packages like Photoshop and Illustrator make it easier to be a better and more efficient designer. It's the designer's responsibility to ensure file setups are correct for the medium. The best way to make sure this is right is to review any file specifications for colorspace, dimensions, resolution, etc., with the printer, coder, production manager, etc., BEFORE you being. Doing the upfront work will ensure you have no major mistakes rearing their ugly heads later towards the end of your design.

   When considering what format you should choose for your design, consider what you're really about to make, and what steps you'll need to go from rough to polished final versions. If you're going to take designing anything serious, you'll need both vector and raster solutions - copies of Photoshop and Illustrator. Moving art from one program to the other can be quite useful, and having two screens can make this an almost magical experience. The next few paragraphs highlight some basics to consider before you start designing.

   Adobe Photoshop is used to manipulate and create raster art - digital camera type-art - where excessive zooming makes everything look like large squares called pixilation. Pixel-pushing is a Photoshop thing. You never quite have the control to move and manipulate your art unless you put everything on separate layers - that could be a lot of layers. It's better to view raster art as paint on top of paint on top of paint... Pixels on the same layer become one solid piece of art. With the use of a wand tool or similar selection tool you can finagle a selection, but it can be difficult at times to edit completed art. Photoshop is capable of creating life-like art and is quite good at it too, but requires a good deal of practice before you unlock the power of its features. (Note: Oddly enough there is an Illustrator-like tool in Photoshop called the Path tool - it is quite powerful to the professional Photoshop designer.)

   Another great use for Photoshop is to edit .jpg images, .png images, .gif images, and other similar raster-based images. Importing vector art like .ai files, .eps files, and true vector .pdf files offers you a choice to place it at any size, and then manipulate it similarly to any other native raster-based Photoshop art.

   Adobe Illustrator is used to manipulate and create vector art - illustrations - where excessive zooming maintains perfect clarity - sharp pixels. Vector paths are more simple to manipulate, since each vector path exists as its own complete mathematical description for color, shape, size, transparency, etc. These dimensions or attributes can be multiplied by a given factor and scaled infinitely (in reality the canvas size is limited due to the limited computer processing power afforded to us by today's computers, so we get around this by designing large art - billboards, vehicle wraps, etc. - at a ratio to the final art. Since it's scalar art it's always clear. The machine outputting the final art to the production equipment will bear the burden of scaling it up with sheer processing power, something beyond the conventional home or office computer).

   Illustrator's ease in keeping shapes separate makes it a good choice for detailed illustration, document or collateral materials creation like logos, business cards, letterhead, envelopes, brochures, flyers, etc. You can do this in Photoshop too, but Illustrator lets you make changes rather easily since art is composed of individual objects. You cannot edit raster art in Illustrator, but you can rasterize any vector shapes which can come in handy when you're looking to reduce file sizes for output.

   Photoshop is great if you're looking to reuse parts of existing photography based art to create new art, and Illustrator is great to create art from scratch. Photoshop is quick and easy but changes are permanent, while Illustrator has a higher learning curve but offers art that's never beyond being truly editable.

   In the end if you're serious about graphic design for print or on the Web, you need both types of applications - a good raster program to manipulate pixels and a good vector program to manipulate paths.

   Learn more about Adobe Photoshop and Adobe Illustrator here.

   Written By: R. Rotondi, findTheFont.com Staff Writer

2. The Difference Between Raster and Vector Graphics

   Raster graphics are pixel-based, and simply record images in a pixel-by-pixel format. The sequence of colored pixels is broken down and recorded as simple file. Vector graphics are path-based and mathematical in nature. Each path is comprised of a series of points, and as a whole makeup an object. Objects are scalar since they're pure math. Adobe Photoshop is a raster based program, and Adobe Illustrator is a vector based program.

   Written By: R. Rotondi, findTheFont.com Staff Writer

3. Design By The Numbers - Monitors Show Color Differently

   A common misconception is that a single design is suitable for all uses - this is not the case at all. Typically a professional designer will begin with one single question in mind, "What am I making?" Well regardless of what the answer, you're bound to come across the size setting for your artboard or canvas during initial setup and if you don't you should find it. If you're designing for the Web size is one thing, and if you're designing for print it's another. Both Web and print mediums require upfront consideration of what the output size will need to be. Here are a few basics to get you through the initial setup of a design file.

   Resolution is directly related to size. The Web displays at a standard 72dpi in most cases, and print files are safely sent to print with a minimum resolution of 300dpi. Print files are simple to calculate file artboard and canvas size settings for, but Web files are a bit more tricky since not all monitors are the same resolution, width and height.

   Typically you can assume 800px wide and XXXpx tall will be a good starting point when designing a website, landing page, splash-site or e-blast. 800px wide for the Web means most screens will be able to see it without scrolling left and right, and a height of "XXX" simply means the page scrolls vertically so go as tall as you'd like, but you should consider keeping important content "above the fold" on the Web - above the lowest point on the screen before content goes off-screen and requires the user to scroll.

   Written By: R. Rotondi, findTheFont.com Staff Writer

4. Design For Print

   Print being the more difficult medium to design in when compared to anything related to Web design. Print exists in the CMYK colorspace (4 channels of color: Cyan, Magenta, Yellow and Black), and works in the complete opposite when compared to Web and its RGB colorspace (3 channels of color: Red, Green and Blue).

   To put it simply when it comes to visualizing how CMYK works... ink covers paper and as light passes through ink on a particular type of paper. The light reflected back is what remains of the full color spectrum (ROY G BIV) that wasn't filtered out (ignoring the physics behind our eyes when considering inverse color theory). So what we see is what remains, therefore CMYK's measure of a scale of 0-100, means 0 no ink and bright paper, and 100 means all ink and as bright as the ink color properties with consideration to the brightness of the paper, it's coating, it's finish or texture, etc...

   Print design requires knowledge of making 1-color, 2-color, 3-color art, 4-Color Process art (4CP), 4CP plus Spot Colors and Tints, Varnishes and UV coatings among other things. Transparencies and CMYK are usually tricky to create in vector-based software, and output can be a bit of a crapshoot when it comes to digital and offset printers and their associated printing methods, with a factor of the print machine's state of operation as well - a dirty printer roll will not have desirable results. A new Pantone color-matching book is an invaluable tool to the professional designer, and the only true way to ensure the color you want is what you get in your printing - RGB monitors only "express" CMYK colors, but can never truly be one. This creates much letdown when novice designers get their prints back undesirably colored.

   You can learn more about Preflight checks for printing on a different website, but a few useful tips to consider when sending files to print are: Set file resolution to 300 dpi, and make sure special effects are set to output at 300dpi as well. Make sure you're using CMYK colors in a CMYK file, and no RGB colors mistakenly mixed in. Ensure all fonts are converted to outlines in vector, or rasterized in raster (Note: Photoshop doesn't require fonts be located on a remote machine if you do not edit them, while Illustrator requires a complete set of what's referred to in the design file loaded on the remote machine. This is why we convert to outlines or rasterize text just to make sure there are no last-minute problems. Include a standard bleed of 1/8" all around and be sure to leave a design safety of 1/8" in all around from the final size. This safety ensures poor cutting of the final printed piece does not cut off anything important to the marketing message. Bleeds must pass beyond the 1/8" area outside of the final size to ensure full edge-to-edge ink coverage.

   Written By: R. Rotondi, findTheFont.com Staff Writer

5. Design For The Web

   Web design at its heart is much more simple than CMYK print design. For starters you can pretty much do whatever you want with special effects and transparencies as long as you output your file to the correct format - jpgs do not have transparencies, but .png's do. .Gif images have transparencies as well, but also have the ability to display animated content. The Web works within the RGB colorspace (3 channels of color: Red, Green and Blue), and works in complete opposite to the print based CMYK colorspace (4 channels of color: Cyan, Magenta, Yellow and Black).

   In complete opposite to the physics behind printing in CMYK, RGB uses the addition of light particles - photons - to add luminosity to an otherwise lifeless dark black screen. With RGB art you work on a scale of 0-255 for each color channel, 0 being no light and 255 being the most light possible from a single channel. Paper does not glow it reflects remaining light. Monitors do not reflect light they create light and produce luminosity and brightness in a color.

   Written By: R. Rotondi, findTheFont.com Staff Writer