Ask HN: Do you know Photoshop? | Hacker News Reader

Ask HN: Do you know Photoshop?

48 pointsthesash78 comments

I have thought about making video tutorials on how to use Photoshop to create practical design elements. Ie, how to make a button or how to design a header. Something every programmer making their own webapp could use that doesn't really require much Photoshop knowledge.

Would there be any interest?

Yes please.

I recently discovered that I could create reasonably decent looking UI elements using only layer styles. I assume there are better ways to do it.

Layer styles are an incredibly underrated feature, IMO.

I actually built a small business around them: http://photoshoplayerstyles.com/

Those are pretty good, nice work! /me bookmarks

Nope. Layer styles were pretty much designed for doing exactly that.

Don't underestimate the value of layer styles. In fact I would say that for most UI design 80% of the "visual style" can be achieved via layer styles.

Just make sure to Name and Group your layers, otherwise you can end up with 100s of layers named Layer N with undecipherable thumbnails. Also it's nice to save your most commonly used layer styles to swatches.

Absolutely. I'd also recommend the tutorials at Lynda.com for really in-depth overviews - they have a whole set of tutorials focused on web design with CS5: http://www.lynda.com/home/ViewCourses.aspx?lpk0=116

That said, Lynda.com is subscription-based and tends to be lengthy. A short set of tutorials on key techniques would be a great resource.

Yes, Photoshop knowledge is one of the major gaps in my toolset. I'm a little ashamed that I have to go to a designer for basic interface elements.

Please do. This is one of the things I would really like to learn this year. Looking forward ;)

I would be interested in a set of tutorials on buttons, drop shadows, torn paper effects, header design, logo design text effects - all of the stuff that I use or need to use Photoshop for.

Yes, I tend to get discouraged at the photoshop hurdle.

Yeah, do it!

I strongly dislike Photoshop for mockups and think that using it is indicative of poor practice. In my experience it leads to premature optimisation of styling over basic design, tends to lock down designs too soon and gives no real insight as to usability. A Photoshop mockup is inherently static and turning it into a clickable prototype generally requires a great deal of duplicated effort.

My preferred tool is Keynote using the Keynotopia templates[1], but there are an array of excellent options for quickly creating rich, interactive mockups.

[1] http://www.youtube.com/watch?v=DOiCdZYVpqM

I read the title, then read the questions and didn't understand.

I use a pen and paper or a tablet for mockups.

I edit images in Pixelmator.

I don't use art editing tools for mockups.

I've not tried Keynote, but I loooove hotgloo for wireframes and quick mockups. If you haven't used it, I suggest checking it out.

www.hotgloo.com

(note: not affiliated with hg in any way)

Thanks, I tend to use PowerPoint for fast mockups but that looks good for something between basic functionality and mockup code.

Voted "I know the basics but want to learn more", but a more accurate answer would be "I know the basics and that's all I need to know, and all I want to know".

I find 'You suck at Photoshop' amusing and educational.

http://www.mydamnchannel.com/You_Suck_at_Photoshop/Season_1/...

Cool fact: Try searching for this in Google:

How do I make X in Photoshop?

X is any physical object you can think of.

This will return relevant results for all valid values of X.

Examples for X:

1) X=Earth: http://www.google.com/search?sourceid=chrome&ie=UTF-8...

2) X=Sand: http://www.google.com/search?sourceid=chrome&ie=UTF-8...

3) X=Monkey: http://www.google.com/search?sourceid=chrome&ie=UTF-8...

4) X=Pyramid: http://www.google.com/search?sourceid=chrome&ie=UTF-8...

Just because you can Google something doesn't mean you "know" it. Try the same thing with any programming language.

True. To me it was surprising to find out how many extremely specific Photoshop tutorials are out there.

Ducks, gets ready for the onslaught

Actually, for simple mockups which seem to be what most people here are talking about, I most often use PowerPoint...

Obviously it's a long way behind Photoshop for general sketching, let alone the far more sophsticated stuff Photoshop can do, but when we just need a quick overview of an interface concept, it works fine. It's relatively easy to use and the whole office already has it and largely knows the basics.

Plus, because it forces you into a very primitive sketch, no-one starts debating fonts and colourschemes, or whether things should line up slightly differently. Focus on that later, get the general concept out there and sorted first.

Picasa's UI was done entirely using Photoshop files. Layer names=widget names, etc. Our small-company team loved it. But at Google, I found very few engineers who wanted to touch Photoshop, ever.

Biggest issue with using Photoshop in your actual production pipeline: "programming in the large" - you can't do code reviews or merges on PSD files, not nearly as easily as .cpp files. So as a team gets big, it is very hard to scale up.

Often the tools (Flash [not Flex], Photoshop, etc.) you use as a small team of <10 people just do not work when you have 20-50 people working on the same project. Then again, maybe teams never should get that big!

Thanks for sharing. I've wondered for a long time what UI toolkit was used to make Picasa!

So you create the UI elements as PSDs and then export to some image format when building? Or do you actually interpret the PSD files in code itself?

During development, you can use PSDs directly. For shipping it all gets compiled to squeeze out overhead bytes. There's a parallel text file to describe hierarchy and extra properties. Sort of clunky, but it works.

I've been using it for about 14 years now (putting a number to that seems strange, odd that it's been that long). I've quite literally grown up along side the program. I saw it learn new tricks in its childhood (history panel in version 5, vector shapes in version 6). I saw it find it's first love (ImageReady in 5.5), it's breakup (ImageReady axed, partial features merged in with photoshop under the "animation" window), and it's current mistress (Macromedia merger). I saw it go to college and get smart (Smart layers in CS3), and watched as it changed its style (CS4 redesign).

It's odd knowing the intricacies of the beast that photoshop has become. I couldn't imagine learning it all from scratch right now, but having come from such an early version (4.0 was my first version) I saw many of the current features get added in, and learned as it went along. Then again I suppose I can understand it. I switched to vim as my primary editor around four years ago. I feel like vim is my current photoshop - enormously complex, but elegant once you understand it.

Played around with it for a while, but because I currently don't have a way ($$$) to get Photoshop (nor do I really need it), I use Paint.NET for most of the things I do. For the few things for which Paint.NET is not good enough I use GIMP ;). And of course Inkscape for vector graphics.

I am in the same boat. I downloaded the Photoshop and Illustrator trails. The programs are great, but I would use them so rarely, that I couldn't justify the purchase prices. So, Paint.net and Inkscape for me!

The Photoshop basics get me around for casual UI mocking -- layers, blending options, gradients, free transforms -- but I haven't mastered the shapes or pen tool in PS.

Illustrator is where I head for scalable vector stuff (duh). Despite having seen some crazy, crazy awesome wizardry with the Photoshop pen tool, in AI the pen tool is much more manageable and powerful IMHO, especially in conjunction with the all-powerful Pathfinder.

Follow up question: who paid for it? (half joking)

I bought an OEM copy of CS3 for something like $200. I registered with Adobe and everything.

You might as well have pirated it because you are violating the agreement by installing OEM on a different computer.

What do you mean a different computer? This was a copy that was never installed. I bought it from one of those online OEM shops. It wasn't zipzoomfly.com, but something like that.

OEM is to be installed on new equipment from manufacturers that have an OEM agreement with Adobe per the license. It doesn't matter that nobody else has used that copy. Just speaking from my experience searching in vain for legitimately cheap copies of CS.

I use Fireworks. I find it so much easier for doing web design/photo editing/anything than Photoshop.

I started using Fireworks since CS4. At first I didn't understand how it was different than say Photoshop or Illustrator for web design. Then as soon as I started mocking and designing UIs for actual web applications, or applications, Fireworks showed it's strength. (Heck I sometimes use it to make logos, http://www.ptizo.com/media/preview/brand/ptizo-logo-alpha.pn...)

The number one reason I prefer Fireworks it's that the file itself can be viewed as normal PNG (and still retain editable features). The second is the mix of vector/pixel objects (all you want from vectors but as pixels).

If you have to design for the web I would recommend you to use Fireworks over Photoshop as your design tool (please stop with the shadows and gradient madness, they make the page rendering slow and scrolling crappy).

Firework's preference for objects over layers is what is key here. It drastically increases my productivity and allows graphics to be much more mutable than Photoshop.