5 ms·

Ask HN: Learning photoshop for web design

7 points by truthseeker 15y ago

Hello HN, I am a hacker who can't design. I can put together css/html but can't create a shiny button if my life depended on it. I am lost when it comes to layers and other photoshop stuff. I would like to change that. I am not sure if self learning is going to be easy. What are some resources for learning photoshop quickly. 1. preferably online classes with someone to mentor. 2. Dead simple screencasts ala railscasts. thanks

maxdemarzi 15y ago
http://psd.tutsplus.com/ http://psd.tutsplus.com/ but don't over do it. Just grab something off http://themeforest.net/ http://themeforest.net/ , minor tweaks, and call it done.
- truthseeker 15y ago
  I've looked through and tried to follow some tips on psdtuts. Most of them are over my head too (unfortunately). I started looking for courses in community colleges around my area but haven't found any that are geared towards web designers. Yeah, themeforest is the route I usually take but to customize anything, I am still lost.
pvarangot 15y ago
My main use of photoshop is for photography and not design... but disclaimer aside I beleive The Russel Brown Show should be useful for you: http://www.russellbrown.com/tips_tech.html http://www.russellbrown.com/tips_tech.html Also, for buttons and icons maybe you should be getting away from pixels and more into vectorial. Try searching for Illustrator tutorials on shiny or glossy buttons as a start.
tmbsundar 15y ago
Try the "Photoshop Classroom in a Book" by Adobe. It is simple and you can go through the entire material and design a basic project in less than a week. Next thing you could try after completing that book is to take a real life project - like designing a magazine cover (though that is better done with Illustrator + InDesign) - and go over a web tutorial....
sdfjkl 15y ago
I've tried to learn Photoshop from tutorials a few times and failed each time. Either the tutorials were for a newer/older version than I had, or they assumed basic Photoshop knowledge which I lacked, or they were flawed and missed an important step and never worked. In the end I picked up a workable knowledge by watching a 2D designer work with it for a few afternoons and occasionally interjecting questions ("that's really useful! Which hotkey was that?").
cschmidt 15y ago
I've never seen them myself, but I've heard good things about the videos on Lynda.com. This one looks a lot like what you're looking for.... http://www.lynda.com/Photoshop-CS5-tutorials/for-the-web/65718-2.html http://www.lynda.com/Photoshop-CS5-tutorials/for-the-web/657...
brudgers 15y ago
Learning Photoshop quickly is analogous to learning Visual Studio quickly. It's not the software that makes the difference, it's the wetware; and no tutorial is going to give you years of experience and a good eye for aesthetics. So just fire that baby up and start drawing.
underdesign 15y ago
Skip Photoshop. Learn HTML and CSS, if you want to do web design. Photoshop is for image editing, any work produced in it is unfunctional, and requires another round of work to transform it to a working prototype. http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop
moozeek 15y ago
Before you put time in learning Photoshop maybe you can try Adobe Fireworks first, which is Adobes "web designer" product. It's much more intuitive than Photoshop, which I never managed to get around with, no layer stuff etc. Just draw, paint and put your objects on the canvas, it manages the layers automagically. Fireworks combines vector and bitmap graphics, you can open and save PSD files and for web design purposes I did not miss anything yet. Also it's much cheaper (around 300 USD?). I guess you can start playing with it with no tutorial, but of course there are resources like http://www.fireworkszone.com/ http://www.fireworkszone.com/ or http://www.entheosweb.com/fireworks/default.asp http://www.entheosweb.com/fireworks/default.asp. And they regularly post resources on their Facebook channel https://www.facebook.com/AdobeFireworks https://www.facebook.com/AdobeFireworks
- sambeau 15y ago
  If you are using Windows, an alternative cheaper option is Microsoft's Expression Design which is great for web and UI design and can often be picked up cheaply online (plus it has a rather generous 60-day trial). http://www.microsoft.com/expression/products/Design_Overview.aspx http://www.microsoft.com/expression/products/Design_Overview...
LarryA 15y ago
In case its a case of not 'getting' bitmap editing... You might consider a vector editor - like Illustrator or Inkscape. Works more like a programmer's mind; where you need to tweak elements and can always go back. Photoshop doesn't always give you that flexibility. There are also tutorials on-line on doing buttons and such for inkscape/illustrator.

7 points by truthseeker 15y ago

maxdemarzi 15y ago

http://psd.tutsplus.com/ http://psd.tutsplus.com/ but don't over do it. Just grab something off http://themeforest.net/ http://themeforest.net/ , minor tweaks, and call it done.

truthseeker 15y ago
I've looked through and tried to follow some tips on psdtuts. Most of them are over my head too (unfortunately). I started looking for courses in community colleges around my area but haven't found any that are geared towards web designers. Yeah, themeforest is the route I usually take but to customize anything, I am still lost.

pvarangot 15y ago

My main use of photoshop is for photography and not design... but disclaimer aside I beleive The Russel Brown Show should be useful for you: http://www.russellbrown.com/tips_tech.html http://www.russellbrown.com/tips_tech.html Also, for buttons and icons maybe you should be getting away from pixels and more into vectorial. Try searching for Illustrator tutorials on shiny or glossy buttons as a start.

tmbsundar 15y ago

Try the "Photoshop Classroom in a Book" by Adobe. It is simple and you can go through the entire material and design a basic project in less than a week. Next thing you could try after completing that book is to take a real life project - like designing a magazine cover (though that is better done with Illustrator + InDesign) - and go over a web tutorial....

sdfjkl 15y ago

I've tried to learn Photoshop from tutorials a few times and failed each time. Either the tutorials were for a newer/older version than I had, or they assumed basic Photoshop knowledge which I lacked, or they were flawed and missed an important step and never worked. In the end I picked up a workable knowledge by watching a 2D designer work with it for a few afternoons and occasionally interjecting questions ("that's really useful! Which hotkey was that?").

cschmidt 15y ago

I've never seen them myself, but I've heard good things about the videos on Lynda.com. This one looks a lot like what you're looking for.... http://www.lynda.com/Photoshop-CS5-tutorials/for-the-web/65718-2.html http://www.lynda.com/Photoshop-CS5-tutorials/for-the-web/657...

brudgers 15y ago

Learning Photoshop quickly is analogous to learning Visual Studio quickly. It's not the software that makes the difference, it's the wetware; and no tutorial is going to give you years of experience and a good eye for aesthetics. So just fire that baby up and start drawing.

underdesign 15y ago

Skip Photoshop. Learn HTML and CSS, if you want to do web design. Photoshop is for image editing, any work produced in it is unfunctional, and requires another round of work to transform it to a working prototype. http://37signals.com/svn/posts/1061-why-we-skip-photoshop http://37signals.com/svn/posts/1061-why-we-skip-photoshop

moozeek 15y ago

Before you put time in learning Photoshop maybe you can try Adobe Fireworks first, which is Adobes "web designer" product. It's much more intuitive than Photoshop, which I never managed to get around with, no layer stuff etc. Just draw, paint and put your objects on the canvas, it manages the layers automagically. Fireworks combines vector and bitmap graphics, you can open and save PSD files and for web design purposes I did not miss anything yet. Also it's much cheaper (around 300 USD?). I guess you can start playing with it with no tutorial, but of course there are resources like http://www.fireworkszone.com/ http://www.fireworkszone.com/ or http://www.entheosweb.com/fireworks/default.asp http://www.entheosweb.com/fireworks/default.asp. And they regularly post resources on their Facebook channel https://www.facebook.com/AdobeFireworks https://www.facebook.com/AdobeFireworks

sambeau 15y ago
If you are using Windows, an alternative cheaper option is Microsoft's Expression Design which is great for web and UI design and can often be picked up cheaply online (plus it has a rather generous 60-day trial). http://www.microsoft.com/expression/products/Design_Overview.aspx http://www.microsoft.com/expression/products/Design_Overview...

LarryA 15y ago

In case its a case of not 'getting' bitmap editing... You might consider a vector editor - like Illustrator or Inkscape. Works more like a programmer's mind; where you need to tweak elements and can always go back. Photoshop doesn't always give you that flexibility. There are also tutorials on-line on doing buttons and such for inkscape/illustrator.