#49: Hodgepodge of Photoshop Tricks

Photoshop is my tool of choice in designing for the web. I liken it to choosing the guitar as an instrument to play. A guitar sounds great alone and there are loads of resources to help you learn it. Photoshop is a very powerful tool all by itself and I'm going to add to that pile of resources by sharing some simple tips and tricks I used when using it every day.

Links from Video:


  1. joyoge designers' bookmark
    Permalink to comment#

    really helpful vid. thanks a lot..

  2. Markus
    Permalink to comment#

    great video
    good for beginners

  3. ipevgeny
    Permalink to comment#

    thanks for video

  4. Stephen Hill
    Permalink to comment#

    Thank you :)

  5. KaiChanVong
    Permalink to comment#

    Do you find Photoshop does vector crisp enough? Or do you find Illustrator better for vectors which are diagonal or curved even with the pen tool… So far I’m finding illustrator just that little bit more professional looking.

    Is there something I’m missing that I can change in the settings to make it sharper with vectors?

  6. Brenelz
    Permalink to comment#

    Great collection of photoshop tricks chris!


  7. Max
    Permalink to comment#

    Great screencast i love the rounded corners resize technique, on top of your organisation folders i created a screecast a while ago to create an action to create all you folder structures when you open your document, cause it can be quite repetitive if your constanly designing screen designs.

    See it here: http://www.designshard.com/video-tutorials/photoshop-actions-creating-folder-structures-for-web-designs-tutorial/

    For any one whos intrested.

  8. Joe
    Permalink to comment#

    @KaiChanVong: Adobe Illustrator is a vector graphics editor, so I’d imagine Illustrator handling vectors better than photoshop.

  9. carlnunes
    Permalink to comment#

    I was wondering how other web heads organize there stock photos. Thanks for sharing!

  10. scottgm
    Permalink to comment#

    ”A Computer Without Photoshop is Like a Dog With No Legs, Sure It Is Fun But You Can’t Really Do Anything With It”

    I came across this quote somewhere, I love it

  11. Thomas Offinga
    Permalink to comment#

    Wow, that Gradient effect alone was worth the watch. Great little trick! :)

  12. Mikkel Hansen
    Permalink to comment#

    Hi Chris
    Not directly related to the content of this screencast, but I noticed you have your apps in the dock organized in groups.
    How??? :)

  13. Alex
    Permalink to comment#

    Hi, thanks for the tipps, just tried them all and they are really handy.
    they are right, you learn every day. ;)

  14. wiseass911
    Permalink to comment#

    Great Screencast, the gradient trick should save me a lot of time when designing. Thanks again, keep the great videos coming.

  15. milehighdesigner
    Permalink to comment#

    Chris, can I suggest that layout design be the next CSS-tricks? Tee hee, just kidding. :)

    But seriously, can you incorporate the frog eye in the next one?

    Always nice to watch something like this even though you’ve used PS for a while… I learned about selecting the layers, then shift click on the folder. Thats a nice trick… I’ve been moving them into the folder for years now.

  16. Don
    Permalink to comment#

    I’m happy to announce that I know every of them :)
    -And Yes PS is a grat tool I use it for some years already too.
    For some reason I never dig the .jpeg compression, somehow I just dont like the “fragments” which appear in the picture. I even use png24 for gradiens.
    I found .png the best format for creative stuff(never cared about IE -hahaha!) and it’s the format i prefere over the others…
    But for “photo-like-pictures” its beter to use .jpeg -I agree :).

    greetings from hamburg/germany

  17. Meph
    Permalink to comment#

    Amazing video, thank you very much I learned a lot!
    Also — you sound quite cool, this made me like want to be your friend and stuff :p
    No but seriously, keep up the great work :)

  18. Yosy
    Permalink to comment#

    Great Video,I have a question which height you’re using in site like SPPS?
    And from where do you get the stock photos?



  19. Jack Feefofe
    Permalink to comment#

    Great screencast as always, Chris! I personally use The Gimp for all of my purposes, which does include designing websites. I have never had the chance to try PhotoShop because I use Linux, so I am just satisfied with The Gimp.

    In my opinion, Gimp can produce the same results in most cases, just in a different ways. I can replicate a lot of PhotoShop tutorials in Gimp. I would agree that Gimp seems to be a bit harder to use, though. It does not have “layer styles.” Instead, you have to use filters, and then you cannot modify the effect after it has been applied. You cannot group layers into folders. And the Gimp does not handle vector shapes as well. You can create a selection and then fill that selection to make a shape, but that isn’t vector. To actually create a vector shape, you have to use a filter, Gfig, which opens another window in which you create and modify vectors.

    Although PhotoShop has a slight or slightly greater than slight (ha!) edge to The Gimp, I find that The Gimp is just enough for my purposes!

  20. Nora Brown
    Permalink to comment#

    Hi Chris,

    That was the first CSS-Tricks podcast I’ve watched. Pretty entertaining. I love the term “the claw”. Could they add and more modifier keys?

    I was curious if you were able to upgrade just your photoshop, after having purchased (what looked like) one of the adobe suites. I was told you couldn’t do that, you’d have to upgrade the whole suite or buy a complete version of photoshop, which seemed pretty bogus to me.

    Thanks for the screencast.

  21. Lamonte @ Binary Crunch Technology and Programming1
    Permalink to comment#

    Holy crap, I never knew the gradient trick XD

    Thanks man. Great tips and stuff.

  22. Dayday
    Permalink to comment#

    The gradient trick was a really nice one as well as ctrl – 0 which I didn’t know zoomed out for free transform handles. THANK YOU CHRIS you are awesome!!

  23. Nic
    Permalink to comment#

    Really good tips. Thank you!

  24. Melivn Walls
    Permalink to comment#

    Great tips Chris. thanks!

  25. Jon
    Permalink to comment#

    Nice video Chris.
    It would be helpful if you bulleted the items covered, but that really isn’t a big deal.
    I was wondering if you could cover in video or a brief post how to take a pattern and get it to tile into a background that would cover the whole background of a page. I found this http://www.pegaweb.com/tutorials/web-page-backgrounds/web-page-backgrounds.htm but i was thinking of a wood background or something with grain. It might not be possible without looking terrible or being massive, but I thought I would ask.
    Thanks by the way for all the posts and videos, I learned pretty much all I know about css from your site.

  26. Sebastian
    Permalink to comment#

    thanks for a great screencast

  27. Skuzziwerx
    Permalink to comment#

    Thanx for these Ps tips and tricks…. all extremely helpful. :)

  28. Louis
    Permalink to comment#

    Chris, could you reduce the file size of these videos? I love your videos but I find they’re too large to download. Is that necessary? Thanks.

  29. Rembrand
    Permalink to comment#

    Loved the screencast, I actually learned a couple of really helpful things (you can drag the gradient overlay thingy?!). I do have to disagree on the png-8 remark though. As big a fan as I am of the format, I found GIF icons are usally 1.5 to 2 times the size compared to PNG. It’s nitpicking, but could be useful to some.

  30. Branson
    Permalink to comment#

    As always, great tutorial. This one was very simplified compared to the other videos, but it focused on the key PS techniques. Thanks again Chris!

  31. Peter
    Permalink to comment#

    Great tricks! That gradient trick is crazy… How could i’ve not known that before now? Thanks man

  32. Les

    I love the frog =) Good tutorial on some basic Photoshop functionality. Before I even start working in Photoshop I always create all the Groups I’m going to need, I can’t imagine working in Photoshop without doing that first =/

  33. Aryan
    Permalink to comment#

    thanks for the article, it was nice and at the same time informative too…..but you speaks a lot….more than required…. :P

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.