Text Logo Process

[grantserafy]

Can anyone list the best process, step by step, to create a text logo for use on web, social media, and print? So that it is cleanest, least pixelation, etc. Maybe want to create it in AI and then export to PS to add some bevel and emboss.
Done it before but can't recall best process...

1. Create text in AI. Should I group and create outline and expand or not? I may have a main, larger text on top of a smaller text which I would not add touches to in PS.

2. Make it 600ppi and anti-alias turned on and export as png.

3. Open in PS, add bevel, etc. save as 600ppi png.

Thanks.

[grantserafy]

And since I am only using PS for the top text do I then import top text png from PS, open in AI and group with other bottom text and expand and export same - anti-aliased, 600ppi?

[Bobby Henderson]

If you're working with text and want the end result to look correct in print create as much of it as possible in Illustrator. Most logotypes, brands, etc are created as purely vector-based items. Any live type is converted to outlines to avoid font substitution issues.

Beware of baking Photoshop bevel and emboss effects into something like a text logo. Those are pixel-based effects and they don't necessarily scale so well, especially at small sizes. Even if the effects are visible/legible too much of that stuff can plunge a design into cheesy territory quick. For print-based work it's more cumbersome dealing with pixel-based effects imagery that has to be clipped into the vector paths of a logo or other graphics elements than it is dealing with vector-only elements.

The 600ppi thing doesn't mean much (other than bloating the file size). Your "master" design should be vector-based and stored in a CMYK document. The raster effects setting probably doesn't need to be more than 300ppi. When designing for web, it's really best to design for specific pixel layouts, like 600px X 200px for example, rather than winging it with a ppi/dpi setting. Many people say screen based designs should be 72ppi because that's how it measures out on a display. Many computers displays have varying resolutions. My 17" notebook has a 3840x2160 layout; it packs considerably more than 72 pixels into an inch (it's closer to 256ppi). The ultimate thing that matters is the physical sizes in pixels of the PNG images, not ppi ratings.

To get lettering and other elements to look their sharpest when exported the lettering and other elements need to be sized and positioned specifically for the pixel grid. You can set capital letter height sizes in pixels within Illustrator and use snapping functions to get elements positioned just right so fewer edges are fuzzy when the PNG image is exported.

Also, you might consider using SVG as an option. The vector format is well supported by leading web browsers now. We don't have to worry about the tyranny of Internet Explorer anymore. SVG conforms more easily to high ppi displays and liquid web layouts.

[grantserafy]

Excellent. Thank you so much.

Not sure yet, but I think this logo will mostly be used on web and social - do you still feel it is better to stay away from bezel and emboss type additions?

And if I add some of those features within Illustrator itself (I think after I create outlines I can use the Style feature), is that okay and won't have any of those raster problems? Maybe even using Trajan Color would suffice?

[Bobby Henderson]

So-called "flat" design became popular around a decade ago as a revolt to all the bevels, glass and other glitz that was common to "Skeuomorphic" design. It was also a respose to the use and abuse of various Photoshop-based effects in a lot of amateur graphic design. Generally speaking, less is more in logo design and other graphics work. The more embellishments you can strip away while keeping the design interesting, dynamic (and legible) the better it will function at small sizes or farther viewing distances.

In short, it's important for the finished product not to look like the packaging from a sack of Gentle Giants dog food. I mean, holy cow, that company's packaging is a laundry list of things not to do in graphic design.

It's a judgment call whether or not to include raster-based effects in graphics work. Usually I stay away from it or use it very sparingly because of the various technical issues and issues of good/bad taste that are involved. The Trajan Color typeface bundled into Illustrator is an OpenType-SVG font. It's all vector-based. But when you convert lettering set in Trajan Color to outlines you'll find each letter is a group of multiple vector objects, each with their own gradient fill. Those objects work fine in print-based documents within an Adobe-centric work flow. Some rival graphics applications may have problems when importing AI or EPS files made of that artwork.

[Mylenium]

Also, you might consider using SVG as an option. The vector format is well supported by leading web browsers now.

Pretty much irrelevant. Most social sites either won't even accept it or ghenerate a rasterized version of it and since you can't predict how that's done, it may end up looking garbage. Unless you want to create "stickers" within the API of a given service, typically only accessible if you pay, there's not much point to troubling yourself with SVGs, least of all the abominations AI creates.

Mylenium

[Bobby Henderson]

Social media apps/sites do not comprise the entirety of the Internet. SVGs work just fine in dedicated web sites. I'd like to see SVG become more popular as a format for depicting logos online. I wouldn't have to deal with as many crummy JPEG and PNG "logos" as customer provided artwork.

[Lukas Engqvist]

First I would not recommend PNG as a format for print. You should be making print logo different than weblogo. Please consider if you should be using SVG for logo. There is also the Asset Export panel in Illustrator. (PDF would then be a reasonable variant for print)

If you are planning to use photoshop as part of your workflow I would just place Illustrator object directly in Photoshop as smart object. PNG has only Alpha transparency and no blending modes. (Photoshop is not a good option for making logos for Print)

If you want pixel perfect you can align to pixel grid. If you should expand depends on the logo, aligning to pixel grid may distort the graphic, since it is rounding to closest pixel.... so pixel perfect art must be designed to be pixel perfect from start. 

[grantserafy]

Appreciate it very much...can you possibly share the steps to do that from Illustrator...

1. Type text into AI.

2. Group, create outlines.

3. Save as AI?

4. Open AI file as Smart Object in PS.

5. Save as what?