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.<p>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.<p>By no means do I think designers are irrelevant. I just need "good enough" to let me iterate faster. Any recommendations?
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.<p>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.<p>You will find nice tutorials in places like:<p><a href="http://psd.tutsplus.com/" rel="nofollow">http://psd.tutsplus.com/</a><p><a href="http://www.smashingmagazine.com/" rel="nofollow">http://www.smashingmagazine.com/</a>
I'd consider Illustrator instead. It's vector based, it's great for layout, and boxes are <i>boxes</i>, 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.<p>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.
<i>Don't learn Photoshop.</i><p>"I want to be able to rely on myself for cranking out your standard web/app elements."<p>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.<p>Then I learned there is a much better way for us developers: buying templates.<p>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 <i>best</i> 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.<p>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.<p>Resources:<p>WooThemes - beautiful and very easy to use themes for WordPress (and a few other CMS', I believe). <a href="http://www.woothemes.com/" rel="nofollow">http://www.woothemes.com/</a><p>ThemeForest - also great themes, available for WordPress or as just plain html/css/js files you can play with. <a href="http://themeforest.net/" rel="nofollow">http://themeforest.net/</a><p>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 <i>everything</i> 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. <a href="http://themeforest.net/category/site-templates/admin-templates" rel="nofollow">http://themeforest.net/category/site-templates/admin-templat...</a><p>Oh, by the way, if you're interested in learning Photoshop just for fun, I really recommend the Lynda videos - <a href="http://www.lynda.com/" rel="nofollow">http://www.lynda.com/</a>.
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.<p>Biggest reason is that photoshop forces you to get into details. Taking your focus away from design - that' will be <i>why something is there</i>? 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.<p>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:<p>- <a href="http://365psd.com/" rel="nofollow">http://365psd.com/</a> and <a href="http://designmoo.com/" rel="nofollow">http://designmoo.com/</a> - 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.<p>- <a href="http://methodandcraft.com/" rel="nofollow">http://methodandcraft.com/</a> - Just recently launched, but already has some nice videos I've learned a lot from.<p>- <a href="http://photoshopetiquette.com/" rel="nofollow">http://photoshopetiquette.com/</a> - A bunch of quick tips<p>- <a href="http://bjango.com/articles/" rel="nofollow">http://bjango.com/articles/</a> - All the design articles are great<p>- <a href="http://designthencode.com/" rel="nofollow">http://designthencode.com/</a> - 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.<p>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.<p>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:
<a href="http://www.amazon.com/Professional-Photoshop-Classic-Guide-Correction/dp/0764536958" rel="nofollow">http://www.amazon.com/Professional-Photoshop-Classic-Guide-C...</a><p>It's a great book for engineers working with color, as its principles are explained through color theory and the mathematical relationships between colors.<p>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.<p>Additionally, you'll learn a ton about color theory, which is worthwhile by itself.<p>If you finish that book, this one is awesome as well: <a href="http://www.amazon.com/Photoshop-LAB-Color-Adventures-Colorspace/dp/0321356780" rel="nofollow">http://www.amazon.com/Photoshop-LAB-Color-Adventures-Colorsp...</a>
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.
This may be unorthodox but maybe try learning without Photoshop? I built <a href="http://gumroad.com/" rel="nofollow">http://gumroad.com/</a> 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.<p>My take on the browser-based web design web app (+ css animation)
First prototype: <a href="http://editroom.splatcollision.com" rel="nofollow">http://editroom.splatcollision.com</a>
HN thread: <a href="http://news.ycombinator.com/item?id=2408173" rel="nofollow">http://news.ycombinator.com/item?id=2408173</a>
Once I started treating "learning X" with the following mentality, I had the best results:<p>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).<p>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.<p>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.<p>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 (<a href="http://tinyurl.com/3hqdumj" rel="nofollow">http://tinyurl.com/3hqdumj</a>). 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.<p>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.<p>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.<p>I use both, depends on the task I need to do.
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.<p>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 !<p>Just hire a comptent designer and work together to iterate fast, really FAST! It will work out less costly and your productivity will increase.
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)