Ask HN: Do you know Photoshop?
49 comments
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.
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/
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.
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.
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 ;)
Yeah, do it!
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.
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
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'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)
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.
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 use a pen and paper or a tablet for mockups.
I edit images in Pixelmator.
I don't use art editing tools for mockups.
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/...
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...
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...
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.
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!
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?
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.
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.
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).
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.
"Ask HN: Do you know Photoshop?"
Can anyone ever know Photoshop? I've been a Photoshop user since version 2.5.1 (1994), and even though I use Photoshop daily, I feel I've barely scratched the surface of its power. Photoshop is the main reason why I keep my Lynda.com subscription.
Last week, Dan Benjamin and Jeffrey Zeldman interviewed Adobe's John Nack for 'The Big Web Show'. John Nack himself admitted to not knowing everything about Photoshop, even though he used to be Adobe's Photoshop Senior Product Manager.
http://5by5.tv/bigwebshow/37
Can anyone ever know Photoshop? I've been a Photoshop user since version 2.5.1 (1994), and even though I use Photoshop daily, I feel I've barely scratched the surface of its power. Photoshop is the main reason why I keep my Lynda.com subscription.
Last week, Dan Benjamin and Jeffrey Zeldman interviewed Adobe's John Nack for 'The Big Web Show'. John Nack himself admitted to not knowing everything about Photoshop, even though he used to be Adobe's Photoshop Senior Product Manager.
http://5by5.tv/bigwebshow/37
I interpret mastery not by knowing its complete bloated feature set, but instead by saying that for any effect or purpose that I turn to Photoshop to solve, the challenge is completely in the design of the effect, not ambiguity about the use of the tool.
But then, you never stop learning.
But then, you never stop learning.
No option for "I know the basics, and don't immediately see the need to learn more?"
I'm with you there. If I need any Photoshopping for personal projects, I have my GF do it. She's a painter, photographer, and Photoshop heavyweight. In return I do the dishes, which I find much more satisfying.
My flow is Balsamiq for rough mocks / usability testing, Fireworks for design comps, and Photoshop only for actual image processing (mainly as a hobby). Balsamiq is awesome once you learn some of the hotkeys, and many of the commands overlap with those provided by Fireworks. The founder of Balsamiq was a Sr. Software Engineer at Adobe, and the apple doesn't fall far from the tree.
Balsamiq is very cool. We're starting to use it for mockups and it's really improving our workflow. It's super simple and created nice mockups fast.
Gimp + Inkscape, just the basics.
I hate many things about Photoshop, and also find it to be the best at many of the things that it does and therefore, unfortunately, is indispensable.
For example, if I want to save a gif or png file, Photoshop is going to give me a smaller file size for a given image quality than anything else.
Another example, it's the only pixel based program I've found that has acceptable masking features for even the simplest forms of icon design.
For example, if I want to save a gif or png file, Photoshop is going to give me a smaller file size for a given image quality than anything else.
Another example, it's the only pixel based program I've found that has acceptable masking features for even the simplest forms of icon design.
It's important to keep in mind that "knowing Photoshop" has little to no equivalence with "knowing how to design" anymore than "I know vi" means "I can program". Both are equally valid skills, but learning the former won't automatically address the latter too.
For web design, I find myself using Illustrator for rough mockups since it's much better at Photoshop at text editing and rapidly mocking stuff up (and making quick copies of everything for side by side comparison).
inkscape.
I make everything in SVG and use CSS to continually change the size without loosing detail.
I only convert to pixels\PNG when ready to deploy. Don't design any fixed pixel art during the development process and you will save tons of time.
I make everything in SVG and use CSS to continually change the size without loosing detail.
I only convert to pixels\PNG when ready to deploy. Don't design any fixed pixel art during the development process and you will save tons of time.
While your tool doesn't necessarily have to be Photoshop, knowing design is somewhat significant in web development.
I know we're not specifically on the topic of hybrid producers here, but I really believe that a programmer should be able to assemble a design or help create a blended approach to UX while working on a project.
"I'm a coder, not a designer" is a poor argument. I use Photoshop daily as well as my language of choice, IDE, JS/jQuery, etc. and I'm no MENSA candidate by any stretch of the imagination.
I think if you love web development, you want to be involved in the whole process.
I know we're not specifically on the topic of hybrid producers here, but I really believe that a programmer should be able to assemble a design or help create a blended approach to UX while working on a project.
"I'm a coder, not a designer" is a poor argument. I use Photoshop daily as well as my language of choice, IDE, JS/jQuery, etc. and I'm no MENSA candidate by any stretch of the imagination.
I think if you love web development, you want to be involved in the whole process.
While I don't your tool has to be Photoshop, knowing design is somewhat significant in web development.
I know we're not specifically on the topic of hybrid producers here, but I really believe that a programmer should be able to assemble a design or help create a blended approach to UX while working on a project.
"I'm a coder, not a designer" is a poor argument. I use Photoshop daily as well as my language of choice, IDE, JS/jQuery, etc. and I'm no MENSA candidate by any stretch of the imagination.
I think if you love web development, you want to be involved in the whole process.
I know we're not specifically on the topic of hybrid producers here, but I really believe that a programmer should be able to assemble a design or help create a blended approach to UX while working on a project.
"I'm a coder, not a designer" is a poor argument. I use Photoshop daily as well as my language of choice, IDE, JS/jQuery, etc. and I'm no MENSA candidate by any stretch of the imagination.
I think if you love web development, you want to be involved in the whole process.
I touched it for the first time in 92.
I don't remember the version number but I know it was B&W only. I was in a graphic design school ("Lycée Professionnel" for fellow frenchies) and our teachers were aware of the global change of direction of our future job so they obtained a dozen of small Macs rigged with old versions of Illustrator (88), Photoshop (wikipedia says it must have been 1.0), and the awesome TypeStyler.
I use it daily since my first job in 96, that's 14 years. Wow, time flies.
I don't remember the version number but I know it was B&W only. I was in a graphic design school ("Lycée Professionnel" for fellow frenchies) and our teachers were aware of the global change of direction of our future job so they obtained a dozen of small Macs rigged with old versions of Illustrator (88), Photoshop (wikipedia says it must have been 1.0), and the awesome TypeStyler.
I use it daily since my first job in 96, that's 14 years. Wow, time flies.
I only use it for throwing up quick site designs using SiteGrinder. www.medialab.com - see what it can do for you.I found it in one of those Advanced Photoshop magazine ads.
I know photoshop really well but not from the interface design perspective (Fine Arts major in college concentrating on Photography so I know Camera RAW and the associated photo related tools really well). It always amazes me how many features it has and how useable it is with all of those features (I have been using it since 5.5 which has, as far as I can recall, has a very similar interface for a number of the primary photo type tools -curves, layers, etc.)
[deleted]
For a small game I'm working on, Photoshop has actually become part of the build process.
The artwork is saved in largish PSD files and I have a script which generates the required AppleScript to open each one, scale down the images to the required formats (for ex, retina-display and non-retina display), occasionally exporting different layers into different output files.
The artwork is saved in largish PSD files and I have a script which generates the required AppleScript to open each one, scale down the images to the required formats (for ex, retina-display and non-retina display), occasionally exporting different layers into different output files.
I'm good at photoshop for sure, but I wouldn't suggest it for mockups, either. It's not what the tool is designed for, and it's not what the majority of the userbase is doing with it.
That said, if you want to edit photos, or do pixel-based image manipulation of any sort, it's superb piece of software.
That said, if you want to edit photos, or do pixel-based image manipulation of any sort, it's superb piece of software.
I learned photoshop before I learned to program, because I was really interested in art when I was young so I wanted to learn how to color my drawings in it after I scanned them in. My interests took a large shift since then, but I still can use it quite well.
The biggest problem I face is that in the time it takes me to do a single page mock up a pro could have done 15 different one. It is not quite a matter of software knowledge at this point, it is more of a "this is the only thing I can think of doing" thing.
I find InDesign better suited for rapid mockups. Try it sometime.
PhotoImpact can do about 90% of what you can do in photoshop and it's much easier to learn/use.
Not to mention a fraction of the price. There's a free trial, give it a shot.
Not to mention a fraction of the price. There's a free trial, give it a shot.
I use Photoshop/Illustrator when provided by my employer, but mostly I just use Inkscape. Gimp is too painful to use.
I don't fee like I need any more skills in Photoshop.
I don't fee like I need any more skills in Photoshop.
Great, application I think. I am a little rusty and it's like CAD, you need time to get used to those 2000 menus.
But it delivers what you need.
But it delivers what you need.
I badger my way through Photoshop, but definitely could use some help. Any books people recommend for learning it?
I can modify existing content to fit my needs, but drawing stuff from scratch is where it gets complicated for me.
i am 38 and remember photoshop 1. Around 5.0 I was great at it, now I don't bother to keep up. Back in the day you would keep 20 versions of one document- no layers. I wonder how many people realize how much of PS is taken from pre-press, channels and mask are essentially rubylith and overlays
I prefer Illustrator for my mockup and design needs. Still use Photoshop for photo manipulation though.
How about "I know the basics, and that's all I really need to know so I'm fine for now"?
Photographer. Subject does not mention mockups.
I know the basics for mocking up a website.
Ninja rockstar awesomeface.
I prefer Adobe Fireworks.
I need to learn
psdtuts is a great place to learn!
[deleted]
In my experience, photoshop designers (who don't know how to code) often make poor design choices. I've found myself scratching my head more than a few times when trying to convert a mockup to html/css because of a designer who has a poor understanding of the browser as a design environment.
I am a photoshop master
Would there be any interest?