

Ask HN: Recommendations on Learning Photoshop? - krsgoss

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?
======
fgblanch
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/>

------
natesm
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.

~~~
oneplusone
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.

~~~
thechangelog
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.

~~~
accomplice
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.

------
edanm
_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...](http://themeforest.net/category/site-templates/admin-templates)

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

~~~
paolomaffei
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.

------
kingsidharth
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.

------
gallerytungsten
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.)

------
zachwaugh
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.

------
wordchute
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.

------
andrewvc
For color correction you cannot do better than this book:
[http://www.amazon.com/Professional-Photoshop-Classic-
Guide-C...](http://www.amazon.com/Professional-Photoshop-Classic-Guide-
Correction/dp/0764536958)

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...](http://www.amazon.com/Photoshop-LAB-Color-Adventures-
Colorspace/dp/0321356780)

~~~
danilocampos
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.

------
baggachipz
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.

~~~
TomOfTTB
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>

~~~
baggachipz
Fantastic. Thank you, good sir.

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

------
sahillavingia
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.

------
splatcollision
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>

------
acconrad
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.

------
fragholrok
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.

------
TomOfTTB
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.

------
cageface
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.

------
dfmedrano
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.

------
raquo
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.

------
gte910h
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.

------
CyberFonic
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.

------
cloug
learn to leverage layer styles

~~~
mbrandonw
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.

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

------
viggity
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)

------
dreww
the only tutorial you need is: <http://bit.ly/56xOzK>

