#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. User Avatar
    joyoge designers' bookmark
    Permalink to comment#

    really helpful vid. thanks a lot..

  2. User Avatar
    Permalink to comment#

    great video
    good for beginners

  3. User Avatar
    Permalink to comment#

    thanks for video

  4. User Avatar
    Stephen Hill
    Permalink to comment#

    Thank you :)

  5. User Avatar
    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. User Avatar
    Permalink to comment#

    Great collection of photoshop tricks chris!


  7. User Avatar
    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. User Avatar
    Permalink to comment#

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

  9. User Avatar
    Permalink to comment#

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

  10. User Avatar
    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. User Avatar
    Thomas Offinga
    Permalink to comment#

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

  12. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    Really good tips. Thank you!

  24. User Avatar
    Melivn Walls
    Permalink to comment#

    Great tips Chris. thanks!

  25. User Avatar
    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. User Avatar
    Permalink to comment#

    thanks for a great screencast

  27. User Avatar
    Permalink to comment#

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

  28. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  32. User Avatar

    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.