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?
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.
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.
"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/.
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.
They posted a tutorial just today that would probably teach you a good 80% of what you need to know: http://tinyurl.com/3vo3cqv
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.
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 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...
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:
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.
- 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.
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.
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
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.
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.
It is meant for people who already know a little Photoshop but if you know enough to use Acorn you should be fine.
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 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.
Just hire a comptent designer and work together to iterate fast, really FAST! It will work out less costly and your productivity will increase.
