Recommended Graphic Design Software
Fluid Email Design Editor For Mac
Affinity Designer
Affinity Designer is frequently cited as a high-quality graphic design tool, and one of its advantages is the inclusion of both raster and vector art creation tools. As a result, it also supports a wide variety of file types, and it has a real-time preview mode, lots of layer controls, and is Force Touch-aware for Mac users. The program is aggressively priced at $50, and you can try it for free, of course.
CorelDRAW
With compelling choices available for free or at low cost, you might wonder why someone would shell out hundreds of dollars for products from Corel or Adobe. Sheer familiarity has a lot to do with it. It takes a while to learn the ins-and-outs of a graphic design app at the professional level and moving to a new app can take time. And because Illustrator and CorelDRAW have been around for so long, there's a huge library of tutorials available online to get you up to speed, and a large number of people who can help you if you encounter a problem (although Inkscape has been around since 2003, so it's no slouch in the community department at this point).
You also know that an image created in Illustrator or CorelDRAW will look the same in your app as it does in a copy of Illustrator or CorelDRAW installed on another device. You don't have to worry about compatibility errors or confusion when a file doesn't look the same across different devices.
Vectr
There are bunches of free apps for editing images, but making 2D art from scratch often calls for more complex graphic design or vector graphics apps, especially for professional artists.
Vectr has an accessible interface and emphasizes real-time collaboration. You can upload your image to Vectr's cloud storage and send other people a link to view it and edit it themselves.
Inkscape
Many artists actually prefer Inkscape over Illustrator. The former has full support for CMYK color (used in print publications), text kerning and spacing, real-time shape manipulation with either an input devices or by entering exact numbers, grouping objects to create temporary layers, and support for Adobe file formats.
GIMP
Raster graphics are the standard digital medium for hand drawing/painting 2D art that doesn't need to scale. These are the JPGs and PNGs of the world, whereas vector art is usually an SVG (scalable vector graphics file). In the raster medium, you can actually use the same tools that you do for editing images, like Adobe Photoshop, GIMP, Paint.NET, or even the built-in Paint app in Microsoft Windows.
Of these, GIMP is both free and a credible competitor to Adobe Photoshop. GIMP uses largely different menu navigation and keyboard shortcuts, so it can take some time for Photoshop users to transition to, but persistent seekers can save a lot of money once they get the hang of it.
HTML Email? Dreamweaver CC Delivers!
Adobe Products Featured
A recent industry study named Dreamweaver CC the overwhelming favorite HTML editor for designing and developing HTML emails. And not by a little: Dreamweaver was preferred by greater than twice as the nearest competitor.
Why is this venerable web development tool the number one choice for designing HTML emails? It’s precisely because Dreamweaver has been around so long and mastered Web technology at every stage: from the early days of table-based layouts to the modern, responsive era with media queries. The state of HTML emails today demands exactly such a wide-spread grasp and implementation of the languages and protocols that Dreamweaver offers.
Jumpstart with Dreamweaver CC’s Email Starter Templates
If I had to pick one word to describe the entire HTML email ecosystem, it would be arcane. With the wide variety of email programs—many stemming from the earliest days of the Internet—the technology applied is pretty much a hot mess and very troublesome for today’s web designers to get their collective heads around. To simplify all our lives, Dreamweaver CC includes four really great HTML email templates as starting points, all easy to adapt and customize.
To access these wonderful jumping-off points, follow these steps:
- Choose File > New to open the New Document dialog.
- Select the Starter Templates category.
- From the Sample Folder column, choose Email Templates.
- Select the desired template.
- Click Create.
Use the starter template that best suits your design needs:
- Basic – Layout includes single and two column design, with media queries for both devices with a width of 600 and 480 pixels, coded so that multiple columns are linearized.
- Fluid – Similar to Basic, except no media queries are used although percentages are applied. Multiple columns persist on devices with narrower widths.
- Hybrid – Offers the widest initial display with a single media query for screens with a maximum width of 480px. Layout includes 2 and 3 column areas as well as float left and float right.
- Responsive – Similar to the Hybrid layout, but incorporating a media query for devices with a maximum width of 600px.
Not only are these very solid initial designs that will work for many email layouts, they are just chockfull of helpful email-specific coding, all lovingly commented. I’ll point out some of the more useful snippets as we go. As a testament to their worth, I used the Responsive email starter template as the basis for the example HTML email shown throughout this post.
One of the first things you’ll learn when developing an HTML email is that you have to go back to the stone age for your email to display properly across the board: table-based layouts, no external CSS, no JavaScript or PHP. A recent post by Karol K on effective HTML newsletter design summarized these challenges. But, surprise, surprise! Numerous email clients now support media queries, at the very heart of responsive design. And, as you probably well know, Dreamweaver CC offers full media query support as well, from development to depiction. This ability comes in very handy when adding a new media query to an existing design:
- In Live view, make sure the Visual Media Queries bar is open and available.
Click the Show/Hide Visual Media Queries bar button to toggle its display. - Drag the scrubber handle to resize the document window to the desired width for your media query.
I wanted to supplement the 600px max-width media query included in the Responsive starter template with one for smaller screened iPhones, so I moved the scrubber to 480px. - Click Add New Media Query (the plus symbol inside the inverted triangle on the ruler).
- In the pop-up, choose max-width as the parameter with the desired value to set the media query code.
- Embed the code within the page by either choosing an existing
Now, you can use CSS Designer and all the other built-in Dreamweaver tools to create your media query specific CSS rules. One very big caveat, however. It’s vital that all declarations include an !important keyword to override the corresponding inline CSS—because, as we’ll see in the next section, most CSS is inline for HTML emails.
Inline CSS rules!
Airport Design Editor For Fsx
As mentioned, inline CSS is pretty much the mandatory method for styling HTML emails. That’s not to say that you can’t use embedded styles during your development process; I’ll show an easy way to get the best of both worlds.
Dreamweaver offers a number of tools for handling inline styles. If an inline style is already applied (one key advantage for customizing a Dreamweaver email starter template, where many are), you can easily adjust it through the CSS Designer panel.
- Choose the page element you want to style in the Live view document window; if you prefer, you can go the Tag Selector or DOM panel route.
- From the CSS Designer panel, enter Current mode.
- From the Selector panel, choose the entry.
- Modify any existing properties or add new ones in the Properties pane.
The fastest way to insert an inline style for the first time into a tag is through the Quick Tag Editor. With the element selected, press Ctrl-T/Command-T and enter a style parameter, like this style=”padding:20px;”. If you don’t want to specify a property by hand, you can just insert style=”” into the tag and the entry will be available in the CSS Designer panel.
Of course, incorporating the same style over and over again can be mind-numbingly tedious. An alternative approach is to specify embed your general styles in a
Text Editor For Mac
Topics in this article