6 ms·
Ask HN: Recommendations on Learning Photoshop?
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?
- cloug 16y agolearn to leverage layer styles
- moggie 16y agoThis. 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.
- mbrandonw 16y agoIt'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.
- danielvnzla 16y agoCheck out lynda.com. They have some good lectures for free, and a huge library for 25/mo.
- natesm 16y agoI'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.
- oneplusone 16y agoDon'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.
- jasonlotito 16y agoAmazingly, 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.
- gte910h 16y agoAfter 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.
- TomOfTTB 16y agoI 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 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.
- cageface 16y agoI 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.
- baggachipz 16y agoTo 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.
- TomOfTTB 16y agoGoing with the same theme as the advice I gave above I'd suggest visiting Nettuts Vector/Illustrator site: http://vector.tutsplus.com/ 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 http://tinyurl.com/3vo3cqv
- baggachipz 16y agoFantastic. Thank you, good sir.
- fgblanch 16y agoI 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://psd.tutsplus.com/ http://www.smashingmagazine.com/ http://www.smashingmagazine.com/
- dreww 16y agothe only tutorial you need is: http://bit.ly/56xOzK http://bit.ly/56xOzK
- acconrad 16y agoOnce 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.
- dfmedrano 16y agoI'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.
- gte910h 16y agoDo 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.
- sahillavingia 16y agoThis may be unorthodox but maybe try learning without Photoshop? I built http://gumroad.com/ http://gumroad.com/ without it and it has the added benefits of: 1) forced simplicity, 2) speed building it and, 3) speed for users.
- andrewvc 16y agoFor color correction you cannot do better than this book: http://www.amazon.com/Professional-Photoshop-Classic-Guide-Correction/dp/0764536958 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-Colorspace/dp/0321356780 http://www.amazon.com/Photoshop-LAB-Color-Adventures-Colorsp...
- danilocampos 16y agoThat 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.
- gallerytungsten 16y agoSounds 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.)
- viggity 16y agoYou 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)
- zachwaugh 16y agoJust 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/ http://365psd.com/ and http://designmoo.com/ 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/ http://methodandcraft.com/ - Just recently launched, but already has some nice videos I've learned a lot from. - http://photoshopetiquette.com/ http://photoshopetiquette.com/ - A bunch of quick tips - http://bjango.com/articles/ http://bjango.com/articles/ - All the design articles are great - http://designthencode.com/ 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.
- kingsidharth 16y agoI'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.
- edanm 16y agoDon'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/ 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/ 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-templates 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/ http://www.lynda.com/.
- paolomaffei 16y agothemeforest: 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.
- raquo 16y agoI 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.
- wordchute 16y agoI 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.
- splatcollision 16y agoStrongly 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 http://editroom.splatcollision.com HN thread: http://news.ycombinator.com/item?id=2408173 http://news.ycombinator.com/item?id=2408173
- CyberFonic 16y agoTo 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.
- fragholrok 16y agoHaving 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.
- skeeterbug84 16y agoCheck out youtube for the "You suck at photoshop" tutorials. They are amusing and really informative.