Ask HN: Recommendations on Learning Photoshop? | Hacker News Reader

Ask HN: Recommendations on Learning Photoshop?

63 pointskrsgoss37 comments

Hi, over the years I've worked to round out my design skills by reading books like Don't Make Me Think, the Non-Designers Design Book, Bulletproof CSS, and Handcrafted CSS.

One area where I feel like I'm sorely lacking is Photoshop. Right now I cobble some basic stuff together using Acorn. I'm looking for a good way of learning PS from the perspective of modern web/app design. I don't care about photo editing, etc. which many books focus on. I want to be able to rely on myself for cranking out your standard web/app elements. The more of this I can do on my own, the better since it means I can iterate faster without waiting for a designer to send stuff my way.

By no means do I think designers are irrelevant. I just need "good enough" to let me iterate faster. Any recommendations?

View on HN

I think the best way is just by doing. You start with an idea in mind, for example a metallic logo for a website , or a wood background texture for an iphone app, or rounded border gradient button. So look for tutorials in google, you will find a lot, so look for one you like the final result and make it.

By doing tutorials you will learn a lot of tricks and concepts on how to combine layers, styles, create shapes, etc... at the same time you will get work done (with better or worse results but done) Then becoming a pixel perfect designer it's just a matter of practice, and by combining the tricks and concepts you will learn in the tutorials, you will be able to do whatever you may want.

You will find nice tutorials in places like:

http://psd.tutsplus.com/

http://www.smashingmagazine.com/

I'd consider Illustrator instead. It's vector based, it's great for layout, and boxes are boxes, not a set of pixels are are coincidentally shaped like a rectangle (admittedly, Photoshop is also capable of this, but it's much more limited). It's also intuitive - you move things by clicking on them and dragging them. Pretty much all of the things it seems that you'd like to do would be possible and easy to do in Illustrator. As you said, you're not interested in photo editing.

If you do decide to stick with Photoshop (and they're by no means mutually exclusive, as long as you're willing to pay for both), stay away from old tutorials. Recent versions introduced nice nondestructive things, like smart objects, smart filters, and layer styles. Those are much preferable to the destructive alternatives that we had to use in the past.

Don't ever use illustrator for web design. Monitors uses pixels and you need to work in pixels if you expect to do great work. Use Illustrator when you are illustrating.

Amazingly, Illustrator allows you to output to multiple formats. However, it's vector based work allows your designs to work in far wider range of places beyond just the pixelated world of the web.

Logos, icons, or other illustrations should be done in Illustrator. If you do a 500px logo in Photoshop, you are effective fixed at 500px.

If you're merely referring to using Photoshop as a glorified layout editor for creating a quick rendition of the site, I guess that's fine. But then it's overkill by a large margin for the task.

If you expect to do graphics for the web, learn illustrator. If you except to merely mock up a site to later have it used merely as a reference for CSS/HTML, then their is less expensive software out there.

After you make something in Illustrator, you must must must look at the raster result it makes when you actually commit to a size and make actual png files.

Just slinging vectors at a problem fails in the last mile, often causing blurriness or jaggies.

You need illustrator + photoshop or illustrator + fireworks to really "do a job" as they say.

My design partner uses Illustrator for layout quite successfully. It doesn't handle pixel perfect layouts but gets us so close so quickly that it's well worth it. Out final stage involves editing the UI "sprites" in Photoshop for pixel perfection. So, yes, Illustrator is a valid web design package.

No need for that step, ask you designer to try this. In settings, make set all increments to pixels. Then set the grid to 1px X 1px (in some unobtrusive color) When creating a new doc, always go to view / (check) snap to grid / then whenever making a sprite simply put everything together, and draw a rectangle around it. With the rectangle still selected, make sure its height and width are in even pixels, and Go to object / artboards / convert to artboard. Hit save for web, and you are done! (hint, make sure strokes are always set to inside, or outside, and never centered, adobe defaults to center, so creating some reusable graphic styles can make this quicker) I have created a special key command for convert to artboard, since I use it about 80 times a day. Also, its typically better to double click and enter height and width then to draw a rectangle to insure the dimensions are in absolute pixels.

This is just plain wrong. Before adobe released the "align to pixel grid" and the preview in pixels (since CS or before) there has always been any easy way to work on a pixel grid, and snap everything. If you dont know how.. thats one thing but its certainly not the case you are describing.

Don't learn Photoshop.

"I want to be able to rely on myself for cranking out your standard web/app elements."

I had the same problem (learning Photoshop) with that exact reasoning a year ago. I learned Photoshop and got pretty decent with it in terms of what I could do, although I was far from able to design anything beautiful.

Then I learned there is a much better way for us developers: buying templates.

If what you want is to have a decent design for your site, but you can't afford or don't want to wait for a professional designer, buying templates is the best thing you can do. You can get a beautiful-looking template for as little as $10-$20 dollars, and they'll be much better than you could hope to accomplish with limited time.

Also, if you're looking to just throw up a website quickly, I'd look into getting it set up with WordPress + a commercial template. It will take you 3 hours to get a beautiful-looking website up on the net, and you can always copy the design (and the design's code) if you want to make a web-app with the same theme. This is what I use for all my sites - a quick WordPress site with a theme from WooThemes, and a web-app (sitting on a subdomain) with the same theme, copied from the original template.

Resources:

WooThemes - beautiful and very easy to use themes for WordPress (and a few other CMS', I believe). http://www.woothemes.com/

ThemeForest - also great themes, available for WordPress or as just plain html/css/js files you can play with. http://themeforest.net/

ThemeForest Admin Templates - I just learned about this one. ThemeForest templates, but that are specifically designed to serve as an "administration interface" for a webapp. In other words, if you're building a web application, these themes have everything you need. I haven't used one yet, but I'll definitely be buying a theme from here the next time I build a webapp. http://themeforest.net/category/site-templates/admin-templat...

Oh, by the way, if you're interested in learning Photoshop just for fun, I really recommend the Lynda videos - http://www.lynda.com/.

themeforest: no, no, no!!

I've made the mistake of using those for some clients sites on a budget. Like 7 of them, so a good sample.

Can you believe on average the bugs in those themes actually made us waste more time than building our own?

WPMU Dev themes also have a low quality level (one didn't even validate...).

I don't know about woothemes or elegantthemes, they might have a good quality and support but there are too much of them around and looking exactly like a site I've already seen is a bad thing in my book.

Your best bet in my opinion is learning Fireworks, it easy to make vector wireframes, and is is meant for churning out web optimized assets. The 9 slicing is huge help when reusing buttons, modules etc. Plus, there are lots of great UI templates out there to get you started. I personally use illustrator, but would highly recommend Fireworks for you particular needs

I've been designing (read: wasting time) in Photoshop for years now. Taking your path now - lest Photoshop. I use it to generate nice noise. Make some visual effects or resize thigns.

Biggest reason is that photoshop forces you to get into details. Taking your focus away from design - that' will be why something is there? Is it the best way to put it? best size? Can there be better layout? What do you want users to do? What do you want them to think? THat's design and Photoshop doesn't respect it.

Do not waste a single minute trying to learn that monster. It's meant for Photos, not for design.

Sounds like you should learn some Illustrator as well for the type of geometric elements you seem to have in mind. What I like to do is create elements in Illustrator, then copy & paste them into Photoshop for assembly. That way you get an immediate reality check by rasterizing. Of course you save the Illustrator file with all it's elements so you can re-paste as needed. (Illustrator's typography works better than Photoshop's; and of course there is a much better set of drawing tools.)

Just been going through this process myself. I usually use Fireworks, but wanted to learn Photoshop since there are so many more resources available. Here's some that I've found helpful:

- http://365psd.com/ and http://designmoo.com/ - Both have free, high-quality (for the most part) PSD's you can download. Sometimes for me the most helpful thing is just seeing how someone else constructed something. How many layers they used, which layer styles created a certain effect, etc.

- http://methodandcraft.com/ - Just recently launched, but already has some nice videos I've learned a lot from.

- http://photoshopetiquette.com/ - A bunch of quick tips

- http://bjango.com/articles/ - All the design articles are great

- http://designthencode.com/ - Can't vouch for this personally as I haven't gone through it myself, but looks like a really great and detailed guide.

I love Photoshop and have been using it forever, but it is really for photos. For web graphics its really all about Illustrator, and maybe InDesign if you want to get into layouts - they're almost the same, but InDesign is geared more towards print so you get a lot more visual queues for object placement, etc. I would go with Illustrator though, and with growing browser support for the SVG format knowing how to create vector images will become an increasingly important skill for developers/designers.

If you just want something to touch up photos, GIMP is pretty good and free. Its like an older version of Photoshop. If I just need to fix the color balance or crop an image, I usually find myself opening up GIMP just to knock it out quickly.

With any of these programs, its good to spend time playing around (sometimes known as practice), and then you'll have a better basis for understanding the more in-depth features. There's tons of stuff on Youtube dealing with specific tasks, you just need to know what to search for in the first place.

For color correction you cannot do better than this book: http://www.amazon.com/Professional-Photoshop-Classic-Guide-C...

It's a great book for engineers working with color, as its principles are explained through color theory and the mathematical relationships between colors.

Most photoshop 'experts' are people who have dicked around with it forever and just haphazardly learned the tools, Margulis comes from a much more empirical place and shows how to manipulate color in ways that are more natural and less damaging to images by using as few tools as possible.

Additionally, you'll learn a ton about color theory, which is worthwhile by itself.

If you finish that book, this one is awesome as well: http://www.amazon.com/Photoshop-LAB-Color-Adventures-Colorsp...

That is, indeed, good material, but I suspect that OP is probably better served by content that addresses how to draw with vectors, use layer styles, etc. That stuff is the juice for making UI elements and mockups.

To threadjack a bit, what about the equivalent for Illustrator? I've made myself minimally proficient in photoshop, but when it comes to creating something new (like an icon, etc.) I'm lost in Illustrator.

Going with the same theme as the advice I gave above I'd suggest visiting Nettuts Vector/Illustrator site: http://vector.tutsplus.com/

They posted a tutorial just today that would probably teach you a good 80% of what you need to know: http://tinyurl.com/3vo3cqv

Fantastic. Thank you, good sir.

Check out lynda.com. They have some good lectures for free, and a huge library for 25/mo.

This may be unorthodox but maybe try learning without Photoshop? I built http://gumroad.com/ without it and it has the added benefits of: 1) forced simplicity, 2) speed building it and, 3) speed for users.

Strongly agree that using photoshop for web design is going the way of the dinosaurs. Don't bother learning the wrong skills. Designers who can't code will need to adapt to new tools or (figuratively) die off. Browser-based web design applications are going to be the wave of the future.

My take on the browser-based web design web app (+ css animation) First prototype: http://editroom.splatcollision.com HN thread: http://news.ycombinator.com/item?id=2408173

Once I started treating "learning X" with the following mentality, I had the best results:

Have a project. Want to learn some photoshop, find a picture/logo/whatever that you want to emulate. Or whatever you want to create, think of what techniques are involved and learn those. Don't try and learn 3D text if you're thinking of creating a logo with a gradient. Google "photoshop gradients", and make sure it's from a credible source (such as psdtuts).

I find if I'm only learning what I want to learn, I don't get bored, so I stay motivated to learn, and simply exploring a tool/language/et al, I will become curious and branch out from what I was originally planning to learn, and thus learn new things organically, rather than forced. So for example, if I'm creating a Web 2.0 and I start using Inner glow, that might entice me to learn about drop shadows, and how the overlay tool works and what the difference is between "Multiply" and "Darker". Give it a shot and see if that gives you some direction.

Having been in your position about 6 years ago, reading a ton of books and websites, I'd def. say don't waste your money on books about programs like photoshop/illustrator, etc, as they become outdated very quickly.

Take fgblanch's advice, he (she) knows what they are talking about. The number one place to become a psd ninja would def. be psdtuts (psd.tutsplus.com). The great thing about it is besides the fact that they have video and step by step tutorial, if you are in a hurry, most times you can just download the already created 'standard web element' being featured in the tutorial, and tweak it to your liking.

Also smashing mag is pretty awesome too, they feature great step by step tutorials, and also frequently post beautiful icon sets, images, fonts, textures and examples for your graphic inspiration needs.

I was looking for the same thing a while back and a friend recommended a book to me called Photoshop: Down and Dirty Tricks (http://tinyurl.com/3hqdumj). For me it was the best advice because I prefer to learn by doing. The Amazon link I provided has a "look inside" feature so you can see how the tutorials are structured and decide for yourself if it would work for you.

It is meant for people who already know a little Photoshop but if you know enough to use Acorn you should be fine.

I haven't tried it myself yet but a lot of people seem to prefer Fireworks. My experience with Photoshop so far is that it's adequate for web work but clearly wasn't designed with this in mind.

I'd recommend Fireworks if you want to iterate the whole layout and if you don't need to invest too much time polishing the graphic style of UI elements. Fireworks has a lot more direct manipulation of the canvas elements.

Photoshop on the other hand has more and better graphics manipulation tools: color pickers blending options and effects. It you need to come up with a carefully crafted graphic style, use Photoshop.

I use both, depends on the task I need to do.

I also used Acorn but found DrawIt to be much better suited for web stuff (icons, buttons, gradients, etc.), and it's way simpler than Photoshop.

Do LOTS of tutorials on the adobe site of the type of things you're trying to do. Get a "learn by tutorial" book. You'll pick up the toolset that way pretty fast.

I do second the person in this thread though that points you at fireworks. While I can do things in photoshop, many items come super fast in fireworks.

To become proficient in PhotoShop will take a long time. If anything it will make you iterate slower, much slooower !

Just hire a comptent designer and work together to iterate fast, really FAST! It will work out less costly and your productivity will increase.

learn to leverage layer styles

This. Photoshop has plenty of filters for interesting effects, but layers, in my opinion, are where some of the meat and potatoes sit. A lot of times I find myself going back and forth on style changes, such that I was relieved to find the layer styles feature for myself.

I also make heavy use of solid color layers; the color layer is a layer composed of two things--the layer of color (which extends into, conceptually, infinity) and a mask which helps in managing of the area through which the color shows. The great thing about this is that you can change the color of the layer at any time, over and over. You can do something similar with layer styles, where you choose a color overlay for the layer, as well.

It's all about vectors masks and layer styles. Wanna make a sweet glossy button? It's just a simple rounded rectangle vector mask with a gradient fill, drop shadow, inner/outer glow and texture overlay.

Also learn about blending options/modes (i.e. screen, multiply, overlay, etc.) for combining effects.

Also subscribe to the RSS feed of 365psd.com, download each day's psd and figure out how it works.

Check out youtube for the "You suck at photoshop" tutorials. They are amusing and really informative.

You should definitely learn how holding control, shift and alt (or some combo thereof) in combination with the mouse (click, drag, wheel) will effect all the various tools. This goes for any mouse heavy graphical editor (illustrator, blend, fireworks, etc)

the only tutorial you need is: http://bit.ly/56xOzK

Reply on news.ycombinator.com