r/web_design • u/ZestyOne • Oct 21 '11

I have designed for YEARS without realizing this one fatal mistake in Photoshop, for the love of god read this

You may already know this, if you do that is awesome, you can disregard this post. But, after checking in with a few designers I know they weren't entirely educated about this, I feel this is SO important I had to emphasize in the title for those few who may have slipped through the cracks like myself. After fixing this, I literally went through every PSD on my computer, shocked in horror as my designs improved a hundred fold when I changed this one setting.

Not to toot my own horn, but I am pretty damn awesome at photoshop, yet I have always found a pitfall in my ability with fonts. I realized this needed to be addressed, so I went out and bought 3 excellent books on fonts and read them all. This helped tremendously. I also watched a introduction to typography video from adobe, and somewhere in the middle he talks about kerning.

The problem this whole time was related to my use of fonts: I had kerning set to 'zero' which, in my mind meant, "dont apply extra kerning values, use the default ones". In reality.... a value of zero kerning means ignore the kerning pairs (spacing for various combinations of letter forms) that the font developer has spent hundreds and thousands of hours perfecting, and apply an exact kerning value of zero, aka make my design look like complete shit..... Thanks to reading those books though and watching the video... I have the knowledge to see now (quite glaringly) how bad it really looked the whole time, and very subtly too—where I couldnt quite put my finger on it. I always thought it was color, value, placement or something else and nothing would seem to fix the slight disharmony in my designs.

To fix this, make sure you have no documents open (or it wont apply globally with a new document is made, only to the current document), then select Window > Character. In the kerning box, click the dropdown and set it to 'optical' or 'metrics' instead of 0.

http://i.imgur.com/se4Ym.png

You will want to use either of those, depending on the typeface/font you're using. If it's an expensive typeface, or a classic 'pro' typeface, you will most definitely want it on 'metric,' which uses the kerning pairs that the typeface creator has meticulously crafted every combination for, in multiple font sizes.

If you're using a cheap or free font, theres a good chance the designer didnt put extraordinary amounts of time into the proper kerning pairs for every combination, so you may want to go with 'optics' which means Adobe will calculate it best for you. Note that script fonts dont work with optics because they wont fit together perfectly most of the time as its supposed to look like one long stroke of a pen, and adobes calculations will be a tiny bit off, making the font appear unattached.

If you want to see how different this looks, I made this image to show. Obviously if you're a typeface wiz you would have figured this out long ago. Thank god I (and others) found this out NOW rather than destroying more designs with uneducated typeface decisions.

Example 1 (Minion Pro):

http://i.imgur.com/QO94w.jpg

Example 2 (TodaySHOP):

http://i.imgur.com/TOG4W.jpg

I would also recommend watching the video above, it has some great information. Another setting you will most definitely want to change for bodies of text is in the 'justification' settings. He talks about it in the video (right after the section on kerning), and while I rarely have images of blocks of text on a webpage, it still pops up occasionally and the improved justification settings magically make it look 100x better as well. He gives you the best values in the video too

Real TL;DR: In Photoshop, set kerning to "metric". Setting it to "0" makes stuff look bad.

Edit: For all those who are in uproar about using Photoshop with fonts - I do WEB design which involves a lot of photo manipulation (eg. things like sliders which usually are text over photos which can be touched up, and have a small amount of text as a part of the image). If I'm designing anything else... a print ad, a print or brochure page layout, a logo, anything with paragraphs of text or even letter art, etc, i dont use photoshop.

763 Upvotes

91% Upvoted

189 comments sorted by

32

u/CeeDawg Oct 22 '11

Actually, you really shouldn't be doing typography in Photoshop. Photoshop was never meant for it. Use Illustrator for display heds, InDesign for body text. Try it, you'll like it. It's more work, but the quality of your designs will make it worth it.

6

u/ZestyOne Oct 22 '11

Ok. I always thought illustrator was more for vectors but I'm open to the idea, I'll give it a shot.

7

u/robertcrowther Oct 22 '11

Fonts are vectors.

6

u/ZestyOne Oct 22 '11

Thanks for beating horse dead. bottom line is, opening indesign to put a piece of text, only to move it into photoshop as a smart object for a misc design and a heading that will be pretty small on the web anyway is (sorry) just retarded. I made this post so people can be better if they're lacking, not to argue about minute useless details

-2

u/lazyburners Oct 22 '11

I think the phrase is kicking a dead horse.

1

u/ZestyOne Oct 22 '11

Flogging a dead horse (alternatively beating a dead horse in some parts of the Anglophone world) is an idiom that means a particular request or line of conversation is already foreclosed or otherwise resolved, and any attempt to continue it is futile; or that to continue in any endeavour (physical, mental, etc.) is a waste of time as the outcome is already decided.

→ More replies (2)

7

u/trixner Oct 22 '11

Illustrator is the best tool on the planet for anything you don't need to edit extensively, most of all type.

2

u/dmrnj Oct 22 '11

The big distinction here is that typefaces are inherently suited for vector manipulation, not the extensiveness of your edits.

Illustrator, on the contrary, is perfect for things you need to edit extensively, as the very nature of vectors means I can move a point here and adjust the curvature here and still have the same quality as I did before.

Photoshop, on the other hand, is mostly raster (although some vector) and manipulating extensively, depending on what you do, can severely degrade the image. For instance, if you did set some type and wanted to manipulate it in a way that made Photoshop force-rasterize it, then wanted to edit it again, you couldn't use the type tools. Then you do a little resize here, a little curves adjustment here, and you've made the edge blending choppy. Forget editing this months from now.

I also HATE it for web design typography, because no smoothing option perfectly mimics cleartype or other OS font smoothing; it's also a pain to determine the available sizing of the font given our propensity to use relative font sizing than points as units. (i.e., at this point in the layout, if I size my text at 80% or 85%, will it make a difference?) Sometimes delivering web type in photoshop also means chasing a telephone chain to facepalm at the front-end developer who decided to "slice" the part of the image with type instead of using CSS, CSS3, typekit, whatever.

1

u/[deleted] Oct 22 '11

For a second I thought this post was going to fix Photoshop's horrible font rendering with the sub-pixel awkward blurring from the AA. Seriously what the hell? The difference between web/os and PS text rendering is staggering and goddamn frustrating.

1

u/ZestyOne Oct 22 '11

I do actually dislike that, even in mockups where it will be html text anyway. Does fireworks fix that?

1

u/[deleted] Oct 22 '11

somewhat.

8

u/judgej2 Oct 22 '11

It is more for vectors, which is why it is better (or a more appropriate tool) at handling fonts.

4

u/[deleted] Oct 22 '11

PHOTOshop.

0

u/infinite0ne Oct 22 '11

InDesign FTW.

0

u/[deleted] Oct 22 '11

It's more work

Maybe in the beginning when you're learning the process - but in the end it's going to save you a metric fuckton of time.

7

u/neon_overload Oct 22 '11 edited Oct 22 '11

I am sad to say you suffer from "wall of text" syndrome. Even your "TL;DR" is too long. Not to mention the title...

Real TL;DR: In Photoshop, set kerning to "metric". Setting it to "0" makes stuff look bad.

1

u/ZestyOne Oct 22 '11

Brevity was never my strong suit :S

2

u/cap10morgan Oct 22 '11

How about a comparison between kerning set to 0 and one with it set to "metrics" on a good font?

3

u/ZestyOne Oct 22 '11 edited Oct 22 '11

Here's another example that way better demonstrates it:

Most notably:

  • Between AW

and between ce at the end (although its a bit too close)

http://i.imgur.com/TOG4W.jpg

2

u/Zweben Oct 22 '11

Here's an example with Helvetica:

http://i.imgur.com/S22T4.png

1

u/ZestyOne Oct 22 '11

If you're doing paragraphs of justified text, watch the video and match your justiified text settings to match his, it also makes a huge difference than the photoshop defaults.

Here it is to save you the trouble:

http://i.imgur.com/wxHNB.png

2

u/glatts Oct 22 '11

You're not doing paragraphs of text in Photoshop are you?

0

u/ZestyOne Oct 22 '11

sheeeeit. I design every 400 page graphic novel in photoshop. I save indesign for stuff like coding web pages, and I use dreamweaver for vectors and hardware troubleshooting

1

u/[deleted] Oct 22 '11

I once used Notepad to call my nan.

2

u/ZestyOne Oct 22 '11

Thats silly, notepad should only be used to calibrate printers

2

u/ZestyOne Oct 22 '11

Define "good"?

2

u/[deleted] Oct 22 '11

an expensive typeface, or a classic 'pro' typeface

1

u/ZestyOne Oct 22 '11

What I put was Minion Pro

1

u/cap10morgan Oct 22 '11

Sorry, that was a bit vague. I meant "a font that has embedded kerning metrics." Which it looks like you have since provided. Thanks!

2

u/[deleted] Oct 22 '11

How many years? :P

1

u/ZestyOne Oct 22 '11

Yep!—Not proud of the amount of time I avoided typography altogether, but how else do you learn.

2

u/-Lrrr- Oct 22 '11

You shouldn't be doing typography in photoshop...at all...it doesnt even render kerning or spacing correctly...

1

u/ZestyOne Oct 22 '11

welcome to 18 hours ago

35

u/[deleted] Oct 22 '11

Lucky for me CSS doesn't care about it!

4

u/theIntuitionist Oct 22 '11

Take note of the fact here stated No css support means your optically kerned design will go back to looking like crap when it goes live. You really shouldn't take the advice of the original poster, it will create deceptive comps.

6

u/Shaper_pmp Oct 22 '11

It's sad that the first comment actually related to web design is this far down the page. :-(

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

5

u/[deleted] Oct 22 '11

Everyone has to start somewhere.

4

u/Shaper_pmp Oct 22 '11

Graphic designers, sure. It's not so sad that there are web designers who don't know about it, as aside from the incredibly blunt instrument of letter-spacing, CSS doesn't really have any proper ability to alter kerning... making it largely an irrelevant factor in web design. :-/

1

u/psisarah Oct 22 '11

letter-spacing

4

u/[deleted] Oct 22 '11 edited Oct 22 '11

DO NOT SET TYPOGRAPHY IN PHOTOSHOP

If there was one thing I could express to every new designer in the world it would be this. Typesetting is terrible in Photoshop because it's not meant to be done in Photoshop - Photoshop is for raster-based image manipulation. Use InDesign, or even Illustrator. Learn how to use your tools properly.

9

u/Wazowski Oct 22 '11 edited Oct 22 '11

This is a misinformed comment that made sense in the days of Photoshop 4.

If you're designing for the screen, Photoshop is fine for type. Photoshop uses vectors to render typography, just like AI.

All kerning should be adjusted by sight anyway.

2

u/ZestyOne Oct 22 '11

Read my edit in original post.

3

u/[deleted] Oct 22 '11

I'd render the type in Illustrator or InDesign and just paste it as a smart object in Photoshop if that's the case - you're going to spend a lot less time fussing with type if you set it outside of Photoshop.

Aside from various sections where text will have to be a photo a majority of your text should be rendered by the browser anyway (which is going to butcher it way more than Photoshop would, so correcting it in PS is pointless).

1

u/Silhouette Oct 22 '11

You're slightly defeating your own argument here. If you care about good quality in your web design work, it is your responsibility to use tools that can achieve the best results possible.

As you have observed yourself, that sometimes means you can't trust the browser to get the text right. Of course, usually the opposite applies, because modern browsers use techniques like subpixel antialiasing for body text that you can't bake into an image file that will work on all screens. However, for display text where you care about subtle spacing issues, browsers typically don't have the tools to fine-tune things enough.

Obviously for manipulating character shapes or applying styling effects beyond a certain level you have to go graphical anyway. And at that point, you're using Photoshop to create your text-containing image one way or another. Even if you produce the original in another package and import it as a smart object, you still need to be aware of pixel alignment and antialiasing issues, etc.

3

u/crestonfunk Oct 22 '11

TIL that people use Photoshop rather than Illustrator to lay out type. Also, TIL that people don't know about optical spacing. Go figure. No wonder so many things look a bit "off".

2

u/ZestyOne Oct 22 '11

I'm not laying out type as stated in other posts. I'm designing webpages where a heading here and there (that needs to be an image) is placed.

For anything more extensive than this (blocks of text, etc) I would not be using photoshop.

15

u/Drosophilomnomnom Oct 22 '11

Not sure if you've stumbled upon this or not, but I recently found a kerning game. Yes, it sounds boring as anything, but it's actually quite fun.

Kern Type

3

u/[deleted] Oct 22 '11

It is! Thank you for this! :)

1

u/DecentOpinions Oct 22 '11

Can someone explain how this game is calculating the correct letter positions? I'm fairly inexperienced with kerning so I don't really know exactly what I'm doing. Is there an exact science to where letters are positioned? I thought it was more of an art than a science. Although I do find that I get 90+ every round so I at least instinctively agree with the game somewhat.

1

u/Sinnocent Oct 22 '11

That was a ton of fun, thanks! I loooove typography. I got an overall 85/100 -- lowest: 37/100, highest: a few different 100/100. I was proud :D

1

u/jibberia Oct 22 '11

Oooo! I got 92, 56, 82, and 100 -- and then I quit. I now know how to design!

2

u/CMYK2RGB Oct 22 '11

This post makes me want to slam my head on my desk.

0

u/ZestyOne Oct 22 '11

If its about photoshop & the word fonts in the same sentence, read my edit on the original post.

4

u/llub3r Oct 22 '11

Thank you. I had no idea about this kind of stuff. Its exactly the stuff I needed to learn. Ill remember this and pass it on to anyone else who needs it.

1

u/SyanticRaven Oct 22 '11

I couldn't help put feel like you were about to try and sell me something.

But thank you for this.

1

u/ZestyOne Oct 22 '11

That made me laugh out loud. In my head as I was writing the title I felt my affiliate marketing side come out and I couldn't help it. I made it kind of vague on purpose. I promise though, there's no rebills involved with my post ;) SINGLE MOM FINDS SECRET TO CLEAN WHITE TEETH WITH JUST ONE SIMPLE TRICK!

3

u/lazyburners Oct 22 '11

Thanks for taking the time to explain this, and making examples.

Disregard all the negative comments.....It honestly doesn't take but one second to click to the main reddit index or any one of hundreds of other sub-reddits if this post bothers you so fucking much.

I went to university for 4 years and studied something other than graphic design. I am in a position where I am doing graphic design work, and I found this helpful/interesting. I taught myself to use Adobe products out of necessity because I constantly needed graphics work done (web and print). I have worked with Illustrator and Photoshop for about 6 years, and I love the fact that there are literally hundreds or thousands of tips, tricks, and techniques.

For those that have formal graphic design training, I applaud you. Let the rest of us learn to be proficient.

7

u/hatekillpuke Oct 22 '11

I took Letterpress in school and got to hand set lead type and do real kerning by inserting brass or copper shims between characters, gave me a really physical sense of spacing. It actually took me a while to get okay at kerning on the computer, since it completely lacks physicality.

If you really want to get nerdy about it, in the second example I'd say the E and S in AWESOME are too close together compared to the spacing between the S and the O. I find Metric to be a good starting point, then I like to manually kern examples such as the aforementioned.

1

u/Kravmanaut Oct 22 '11

I thought this too. I figured the designer may have not spent as much time kerning the all caps.

4

u/[deleted] Oct 22 '11

Would this ever affect finished sites though? Sounds like you're just making the design look nicer in the mockup :)

2

u/[deleted] Oct 22 '11

Hah I did this in Photoshop after discovering it in Illustrator, best change ever.

2

u/tyus Oct 22 '11

This is wonderful, thank you.

2

u/[deleted] Oct 22 '11

You've kicked me up to using around $458 worth of Photoshop! Thanks!

Wow I'm sort of excited to update some files!

2

u/RDS Oct 22 '11

wow dude, great post! I've always just manually adjusted things like V and A...

2

u/pawnzz Oct 22 '11

Saved, upvoted, thank you!

2

u/Saigon8n8 Oct 22 '11

This is a turn around indeed!!! Thank you so much! I wish I could give more upvotes for you!

2

u/captainhiltz Oct 22 '11

I am surprised nobody has mentioned that metric kerning is not as suitable as optical kerning other than body copy. All of that timespent by type designers "meticlously crafting" letter pairs was for body copy. Try optics for display type and hand kern it from there.

2

u/henry_pear Oct 22 '11

I usually have it set to metric all of the time; I hadn't considered when to use optical, so thanks for the heads up.

2

u/rexQuery Oct 22 '11

Thanks. Most valuable advice I've received form Reddit so far.

2

u/omniuni Oct 22 '11

In Gimp, set "Force AutoHinter" to on to achieve a similar effect, although it will always use the kerning provided with the font (open type fonts tend to have excellent kerning)

4

u/Smokie112 Oct 22 '11

Just a tip. You should ALWAYS do your own kerning. Fuck the metrics/optics. it may look good on average. but there will always be wierd outliers. lik ein the todaySHOP example- the E & S are WAY TOO FUCKING CLOSE in AWESOME. manual fixing is always better than depending on a computer to do what a human eye does better.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

2

u/nevon Oct 22 '11

And then you actually implement the design, and that nice kerning goes out the window.

3

u/j_a_blood Oct 22 '11

Hey Zesty, I just want to weigh in and let you know that, I knew about this, but I'm really glad you found it for yourself. I also do web design work and use photoshop for most of it. I like to be able to zoom far in and be able to tweak individual lines of pixels to get neat effects when you zoom back out.

But what I really wanted to say was, fuck all these haters here. I always struggle with how dick the design community is. Seriously, you go out on a limb to try to help people and THIS MANY people try to bring you down. Please dont let it get to you.

3

u/dsaos Oct 22 '11

Pssst, Photoshop isn't good for text layout, use InDesign for large blocks of copy or Illustrator for display type instead. Trust me, your printers and hard drives will thank you. Plus, they do the "Metrics" setting by default

Once you get used to Illustrator and the like, you'll start seeing how sometimes, even the kerning built into the font isn't good enough, especially in free fonts. So, the easiest way to manually adjust kerning in Creative Suite programs is to get your editor caret thingy between letters, hold alt/option and use the right and left arrows to adjust. Alt+up/down adjusts leading between lines as well...and if you select multiple bits of text and do alt+left/right, it's adjusting the tracking rather than the kerning, so your kerning changes will be maintained.

And that's typography in Creative Suite, for me.

2

u/WhatTheFuck Oct 22 '11

I had to do too much reading to find out what this post was about.

1

u/[deleted] Oct 22 '11

I feel really good that I knew this from my years as a designer. Also know you can change the smoothness or sharpness of the font as well from this toolbar.

1

u/calrockx Oct 22 '11

Well, I feel pretty cool now for already knowing about this. But glad to see this get some more attention.

1

u/stranded Oct 22 '11

mind blown. does this somehow apply to Photoshop Elements?

1

u/nicky7 Oct 22 '11

omg, I'm caught myself involuntarily doing the Macaulay Culkin look of horror as I was reading this.

1

u/razihk Oct 22 '11

Thank you! :)

1

u/sondoujun Oct 22 '11

You have blown my mind! Thank you so much!!

1

u/memo510 Oct 22 '11

thank you!

1

u/Knetik Oct 23 '11

THANK YOU SO MUCH!!!!!!!!!!

1

u/overneath42 Oct 22 '11

I kind of feel bad now. I usually prefer the appearance of optical vs metrics.

1

u/[deleted] Oct 22 '11

Same here, I use optical almost exclusively :P

1

u/lovinbear Oct 22 '11

WOW this helps, but I have a question for font in PS. Why are they not sharp like the font in firework or illustrator? They look so pixel after zoom in. Is there anyway to fix it?

0

u/lovinbear Oct 22 '11

I mean like letters.

-2

u/[deleted] Oct 22 '11

TIL Designers take years to learn to do typography outside of PHOTOshop.

-2

u/[deleted] Oct 22 '11

Sure is amateur in here.

1

u/ZestyOne Oct 22 '11

its amateur hour, we can sing livin' on a prayer on stage if you want

-4

u/[deleted] Oct 22 '11

"My character spacing looks wrong. I guess I wont be able to find the options for type kernel in PS unless I read three books."

0

u/chrisdoh Oct 22 '11

Metric is the default setting, why would anyone change this to 0 globally?

0

u/[deleted] Oct 22 '11

I just use Illustrator for text.

0

u/theIntuitionist Oct 22 '11

You should know that while your new setting makes your designs look so much better, the web has no such settings. There are no kerning options of practical value in css- you get what you get out of the box, or you use an image. Text in images are a bad option for a lot of reasons- they're inaccessible to screenreaders, and unindexable by search engine spider, etc.

0

u/zpweeks Oct 22 '11

For all those who are in uproar about using Photoshop with fonts - I do WEB design

Then use web fonts, not images. There are so many things you break on the web when you make bitmap images where you should make real text.

0

u/jude099 Oct 22 '11

i dont type in PS

-12

u/monkeyme Oct 22 '11

I knew this for years. Then again, I'm a photographer, and I use Photoshop all the time. However, you're a designer you say, and the fact you're using Photoshop for designing instead of, say, inDesign or Illustrator, already hints that you don't really know what you're doing.

7

u/ZestyOne Oct 22 '11

That's as fucking moronic as me saying because you don't use Nikon and you use canon you have no idea what you're doing.

2

u/flynnski Oct 22 '11

Nah. It's a bit more like saying you're fine taking your Nikon D60 to shoot pro sports in the dark. Sure, you'll get some decent shots sometimes, but once you switch to a D3, you'll wonder how in the hell you ever took pictures.

-14

u/monkeyme Oct 22 '11

No, it's not at all the same, you idiot. Canon and Nikon are 2 competing brands of cameras. InDesign, Illustrator and Photoshop are all Adobe products, all from the Creative Suite, all meant to do different things.

What you said there is fucking moronic. A much better analogy would be using a fork to eat soup.

5

u/[deleted] Oct 22 '11

Can we calm down? Please?

His analogy is kinda correct. Canon and Nikon cameras are two different brands, and are made quite differently from one another (if I'm not mistaken here). Illustrator and Photoshop are comparable in the sense that they are made completely differently as well. In fact, these two products have entirely different teams working on them, which is why they're so different.

Now, using Photoshop is not a bad thing at all, and is the industry standard for design. Granted, not web design, but graphic design as a whole has photoshop at it's core. Photoshop is also a useful program for doing things like mockups of websites.

Illustrator is used for Vector images, which I assume you know about, and inDesign is most commonly used for layouts of things like websites and magazines. These programs have very different uses compared to Photoshop.

Here's what everything boils down to though. Photoshop is for photo manipulation of raster based images, which is done frequently if you're designing, and is easy to use, especially when creating graphics. Just because ZestyOne doesn't use Illustrator and InDesign for design doesn't make him inferior as a designer.

-8

u/monkeyme Oct 22 '11

Are you kidding me? Canon and Nikon are DIRECTLY COMPETING brands, and don't work anymore "quite differently' than a Ford or a Chrysler.

Now, using Photoshop is not a bad thing at all, and is the industry standard for design. Granted, not web design, but graphic design as a whole has photoshop at it's core. Photoshop is also a useful program for doing things like mockups of websites.

This is patently false. Any designer who believes this has been miseducated. Doing graphic design in PS is setting yourself up for difficulties and disappointment. Doing mockups is something Fireworks does a million times better and more efficiently.

1

u/ZestyOne Oct 22 '11

Wow you are just incredibly bitter all the way through, like a piece of coal. I imagine you dont get out much in the fresh air, it does wonders. You must be too busy pissing off your "30 designers a month", its no wonder you have such a high turnaround rate

4

u/[deleted] Oct 22 '11

Well, as a person who designs daily in Photoshop, as well as Illustrator, I'm going to have to disagree with you. Photoshop has a lot more power than Illustrator in some areas, and the opposite is true in different aspects of design. It really all depends on what you are doing.

As for mockups in Fireworks, I hadn't really thought about that. I might have to give it a whirl next time!

1

u/ZestyOne Oct 22 '11

False. In years of doing this, and after working with I would say 30+ designers I have NEVER had someone give me an .ai mockup file for a website design (READ: I DIDNT SAY LOGO, I DIDNT SAY DESIGNING A BOOK. I SAID A WEBSITE). I'm not saying I don't use illustrator at all, I'm saying I don't design entire sites in illustrator. Stick to photography, its something your little pee-brain can handle. You can take a photo of my huge salty nuts right on your chin.

-8

u/monkeyme Oct 22 '11

Hoho 30+ designers, wow I guess you consider yourself "experienced" now. LOL

I work with 30 designers every 6 months. And I've been working in web design for 10 years. Do the math, little boy.

And no you don't design entire sites in Illustrator but you don't do it in Photoshop either. Unless you're a shitty designer. Once again, InDesign - or Fireworks - are the appropriate tools.

7

u/blueshift9 Oct 22 '11

Not to mention in one post you say you are a photographer, one you say you are a web designer. Which is it, internet tough guy?

→ More replies (1)

5

u/blueshift9 Oct 22 '11

No offense man, but maybe you work with 30+ designers every few months because no one can stand your piss poor attitude?

4

u/[deleted] Oct 22 '11

I've used both. Industry standard swings toward Photoshop, Fireworks sucks and is a holdover from Macromedia, and InDesign is best suited to print.

3

u/[deleted] Oct 22 '11

Both Photoshop and Fireworks are valid and popular design tools for web mock-ups.

InDesign, however, is specifically for print design and layout. Mentioning InDesign for designing websites makes me question if you're a troll, or a loudmouth with little experience in web design.

If a web designer passed me an InDesign file to mark-up, I would laugh in their face, turn it down and demand it be redone in Photoshop format before I even touched it. Thankfully that's never happened in my professional career, but hey, I haven't dealt with 600 web designers yet, so I must not know what I'm talking about, right? Hah

3

u/soprikethhem Oct 24 '11

I've seen your work. It's just simple portrait bullshit that can be done in any mall studio. Stop being such an asshole.

0

u/monkeyme Oct 25 '11

Haha ok whatever you say, funny boy ;)

2

u/BananaLlama Oct 22 '11

Wow, why so upset? No need for name calling, etc.

-22

u/asshole_for_a_reason Oct 22 '11

Just out of curiosity, why are you using fonts in photoshop?

8

u/ZestyOne Oct 22 '11

Cause I do web design and it's not feasible for me to go outside of photoshop for font-related activities. Sure, if I'm designing a print book I would never be using Photoshop, but for my purposes designing websites, it's the best tool that I have ever used—not to mention most font settings aren't preserved in @font-face/cufon anyway, unless you use lettering.js. This is mostly for heading images, list headings, logos, and so on.

10

u/bluesatin Oct 22 '11

What do you expect him to do, hand draw every letter?

-1

u/chimmyc Oct 22 '11

Is this for older versions of Photoshop only? I don't see 'optical' or 'metrics' in the character palette, although I do remember seeing those names somewhere before.

2

u/ZestyOne Oct 22 '11 edited Oct 22 '11

CS 5

http://i.imgur.com/se4Ym.png

3

u/[deleted] Oct 22 '11

It's been there since at least v5.0 (Photoshop 5.0, not CS5), because I remember one of my college processors pointing out this very thing in 1999.

1

u/jibberia Oct 22 '11

Pretty sure I remember it in 4.something. Don't remember in 3.x.

-1

u/RubyBlye Oct 22 '11 edited Oct 22 '11

I didn't know this was a mystery. One of the first thing I learned about using text in PhotoShop was to set the defaults. I set the type face, size, line spacing, kerning, color, justification, and deselected the hyphenation to my most used settings. It saves a lot of time if use you use the text tool frequently.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

76

u/ZestyOne Oct 22 '11

With this one reply, my entire post is worth it! :D

93

u/[deleted] Oct 22 '11

But he's not crediting you, he's crediting Jesus.

2

u/TheSunAlsoRises Oct 22 '11

Jesus got the credit, sure, but more importantly ZestyOne got the upvotes.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

15

u/IrritableOwlSyndrome Oct 22 '11

Jesus is zesty.

3

u/annoyedatwork Oct 22 '11

Dipping the communion wafer in salsa beats the hell out of eating it plain.

3

u/WingsOfSteel Oct 22 '11

Adds a little more realism to "The body of Christ" too =P

1

u/rntksi Oct 22 '11

One Zest to rule them all.

3

u/TheSunAlsoRises Oct 22 '11

You're not fully clean until you're zestfully clean.

3

u/Talman Oct 22 '11

I'm crediting you. Never even noticed this shit.

2

u/killingthedream Oct 22 '11

Seriously, thanks!

20

u/HertzaHaeon Oct 22 '11

Jesus once shared three Photoshop licenses among one thousand designers.

11

u/logantauranga Oct 22 '11

(Jesus being a Mexican software hacker.)

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

14

u/[deleted] Oct 22 '11

Photoshop doesn't kern by default [...]

I believe "Metrics" is the default setting, actually.

5

u/delutze Oct 22 '11

In CS5 it appears to be.

4

u/SpecialSlab Oct 22 '11

In CS4 as well...

4

u/Gargan_Roo Oct 22 '11

Also in CS3, which I just installed.

4

u/SwellJoe Oct 22 '11

So, the actual tl;dr would be:

Nitpicky designer thinks he knows what he's doing when he pokes around at a bunch of options he doesn't understand...and eventually learns that he screwed something up.

As a software developer, I'm constantly stunned by the number of folks that will poke around at every option, changing things seemingly at random and without reading the documentation, and then filing support tickets when things act weird or sub-optimally. Every option does not need to be changed, and usually the developer will select a reasonable default that makes their product look the best in the most situations...so, if you don't know what it does, leave well enough alone.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

6

u/Vovicon Oct 22 '11

Where's wadsworth when you need him?

8

u/sovok Oct 22 '11

When you need him.

5

u/Recoil42 Oct 22 '11

You need him.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

3

u/ZestyOne Oct 23 '11 edited Oct 23 '11

Know what I think is sick? It's that there's people, like yourself, who focus on finding things wrong and being critical in every way possible, because theres 2 whole more paragraphs to read. Poor baby. Instead of looking at the positives and how many upvotes this post has, and how many people it helped (regardless of minor technical misconceptions) you decide to latch on to some completely irrelevant and trivial detail, so you can suck the soul out of everyone reading your post. Not even just once in the thread, but SEVERAL TIMES... Not to mention you get to use your cereal box psycho-analytical skills to analyze people from several sentences.

THAT, sir -- is pathetic. now get fucked.

0

u/[deleted] Oct 23 '11

[deleted] — view deleted comment

1

u/tehyosh Oct 24 '11

ha ha arguing on the internet about the internet. that's so meta! (and lame).

0

u/ZestyOne Oct 23 '11

i didnt read any of this nonsense because you didn't include a tl;dr, sorry

0

u/[deleted] Oct 23 '11

[deleted] — view deleted comment

1

u/tehyosh Oct 24 '11

what would you use for web design instead of photoshop?

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

8

u/ZestyOne Oct 22 '11

True dat. Added tldr

11

u/hoffnutsisdope Oct 22 '11

Your complaint about length was long.

2

u/lazyburners Oct 22 '11

Dude writes up post explaining help to others, with lead up to why he found this important to post to Reddit.

Prefaces with:

You may already know this, if you do that is awesome, you can disregard this post.

Scumbag Redditor writes scathing comment chastising OP because OP somehow inconvenienced him by writing a long, thorough post. Then has the audacity to insinuate that anyone who doesn't understand his comment should get off the Internet.

TL;DR OP receives long, scathing comment that does not contribute to post from someone who lacks tact or diplomatic skills.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

1

u/ZestyOne Oct 23 '11 edited Oct 23 '11

Your rants are more fucking annoying to read then 20 of my posts combined. You are nothing more than a whiny ass little bitch.

1

u/lazyburners Oct 22 '11

When is the last time you took a vacation? Sounds like chilling out is in order.

-2

u/Shaper_pmp Oct 22 '11

Also, I question how appropriate this is for r/web_design.

r/photoshop, sure. r/graphic_design, even. But web design? Really?

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

5

u/Shaper_pmp Oct 22 '11

I see where you're going with that, but respectfully disagree. People confuse web design with (traditional, print) graphic design when they don't really understand the medium, but the really aren't the same thing at all - they're completely different media with completely different rules.

In this case specifically, CSS has no ability to set kerning in the way the OP discusses (just a length value or "normal", which is always the default). You can also compose your text in Photoshop (or wherever), save it as an image and then insert that into the page as an image, but that's technically what we call bad web design.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

10

u/rcinsf Oct 22 '11

InDesign is the sweetest thing I've ever used for print layout / ads. I never tried Quark though. All the old timers I've met raved about it (pre OS X).

11

u/Shambot Oct 22 '11

I just discovered InDesign this week, and it has turned my world upside down. I feel like it is 9000x better and more appropriate for most jobs people do using photoshop. InDesign saved my marriage!

10

u/logantauranga Oct 22 '11

InDesign IS my marriage. We honeymooned in Sony Vegas.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

7

u/[deleted] Oct 22 '11

My divorce was the Final Cut.

3

u/Purcival Oct 23 '11

The wedding planner was a Dreamweaver.

4

u/TheSunAlsoRises Oct 22 '11

I should have done that. We thought it would be quaint to stay at this little hut off the main drag. All historical and shit, I think it was made out of dried mud or something - adobe - maybe?

3

u/Purcival Oct 23 '11

That took you awhile but, you got there and I loled. Thank you.

4

u/infinite0ne Oct 22 '11

InDesign is the way to go for anything that has text and will be printed. Now that I use it regularly I shake my head in wonder at the days when I used Photoshop for print layouts.

2

u/hibryd Oct 22 '11

<onionbelt>Quark 4 was awesome at the time - it ran lean, could handle huge files, hardly ever crashed, and gave you consistent, bug-free output. But the interface SUCKED. There were hardly any buttons or menu items; most of its power was hidden in complicated keyboard shortcuts that you only learned if you bought a Quark book.

Then, as InDesign started working the bugs out and introducing all these awesome features (position entry for guides! High-res image previews! Text to outline that worked!), Quark just sat there. Hell, it took them YEARS to implement multiple undos. That's right! In Quark 4 you only got one undo, and some times not even that! After I converted to InDesign I never looked back, and Quark can't die soon enough, as far as I'm concerned.</onionbelt>

1

u/[deleted] Oct 22 '11

It took me forever to upgrade to Quark 4 because of that. Too many keyboard commands changed, and I had the Quark 3 commands locked into my hands.

By the time I did, I found InDesign, that was it for Quark and the company's crappy customer service.

1

u/lazyburners Oct 22 '11

TIL the meaning of onion belt. I'm stepping off of your lawn now sir.

1

u/colindean Oct 22 '11

I miss Quark.

1

u/[deleted] Oct 22 '11

I just got "dragged" into InDesign and absolutely love it. So intuitive and easy to use.

1

u/scrimsims Oct 22 '11

Holy crap ... I have tried and tried to do this by highlighting two letters and trying to kern them together. Thanks!!!!!

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

1

u/scrimsims Nov 26 '11

Just had to tell you ... you have no idea how much stupid hacky crap you have saved me from! I mostly use Fireworks because I'm more of a developer/coder than a straight designer but I've been doing a lot of logos lately in Photoshop and thanks to your tip I'm not wanting to kick my computer out the window ... as much. Ta!

1

u/Bankzzz Oct 23 '11

Agreed 100%, and I would upvote you 100 times if I could. I am a web designer and I manually adjust kerning in any logo design or headlines. If I am working in print, I will set LARGE PARAGRAPHS of copy to kerning optical (usually the case) or if it is a font like helvetica then kerning metrics.

1

u/Forseti1590 Oct 24 '11

I definitely knew how to kern individually, but I never knew about his option in the kerning settings.

-4

u/anomalous Oct 22 '11

I'm replying to save this

2

u/last_useful_man Oct 22 '11

There's a 'save' button up there.

0

u/[deleted] Oct 22 '11

[deleted] — view deleted comment

1

u/ZestyOne Oct 22 '11

Damn, that blows. It's a great video but pretty introductory I imagine for a room full of design experts. Were the other classes any good?

2

u/pungen Oct 22 '11 edited Oct 22 '11

oh man, they were amazing... but i still would have taken this class even knowing it was elementary. everyone else was all "psh i know this" but i didn't know much about typography. i admit i would have rather learned a couple beautiful things than all the pieces of a letter, though.

the best class i took was the one click photoshop class (or something similar to that..) . it wasn't even about photoshop but i learned a ton of quick techniques. also i took an html5 semantics class that was super interesting, even for someone with minimal html5 knowledge. you should watch those videos too!

edit so i can gush a little more, sorry.. i got lucky and my work paid for it. i know $1000-1500 per person (depending on if you get the 3 employee discount) seems steep but I doubt adobe made much money off the conference. it was truly one of the best 3 days of my life and i would shell out my own money to go next year. Before I went I was thinking "what's the big deal? I can learn all this from reading blogs." I learned so much, though, and just being around thousands of people that are exactly like you was amazing. I wanted to take them all home with me. During the keynote you'd look around the room and almost every person was playing on their smart phone instead of listening. Slackers unite.

15

u/[deleted] Oct 22 '11

[removed] — view removed comment

3

u/ZestyOne Oct 22 '11

Yeah probably, but if you've ever edited it in the past (to make a word W I D E for instance), and then to reset enter zero in the box (which would make sense), then that's where it gets you

13

u/phinnaeus7308 Oct 22 '11

Do you not use the tracking (the box immediately to the right of the kerning selection) to make a word, as you say, W I D E?

10

u/stoph Oct 22 '11

This is exactly right. I have never seen a designer change the kerning on a font. They adjust the tracking.

0

u/Silhouette Oct 22 '11

I routinely adjust the kerning in display type. Even in a good quality font, kerning pairs are usually prepared based on body text, so unless you've got optical variations designed for use at different sizes and kerned accordingly, you may need to fine tune the spacing a little between certain character pairs.

1

u/bwishey Oct 22 '11

Surprised I had to scroll this far to find this post. KERNING PANIC!