50 Essential Photoshop Shortcuts For Web Design

Photoshop is one of the most popular ‘go to’ applications for web designers. Partly because of its array of functions but mostly because it is a powerful tool that scales with the user’s knowledge level; allowing beginners and experts alike to create and edit graphics/photography.

Photoshop’s popularity to some extent can be attributed to its flexibility. Photoshop touches the daily lives of millions; from wedding photographers to students to web designers – all will use Photoshop slightly differently and all will more than likely have a set of core functions they use more than other.

Shortcuts are a Photoshop user’s biggest friend. The more you know, the quicker you can work and the quicker you can move onto the next task. Whether that results in more money or getting to bed before midnight; speed = a happy designer. This article highlights our fifty essential Photoshop shortcuts specifically for web designers. Hopefully they will speed up your day!

Slicing & Optimising

1. Ctrl – toggles between the Slice and Slice Selection tool
2. Shift+drag – draws a square slice
3. Alt+drag – to draw from the centre outwards
4. Shift+Alt+drag – to draw a square slice from the centre outward
5. Space+drag – to reposition a slice while creating a slice
6. Right click slice – open a context-sensitive menu

Measurement (PS Extended)

7. Shift+Ctrl+M – record a measurement
8. Ctrl+D – deslect all measurements
9. Ctrl+A – select all measurements
10. Shift+Ctrl_H – hide/show all measurements
11. Backspace – removes a measurement
12. Arrow Keys – nudges the selected measurement
13. Shift+Arrow Keys – nudges the measurement in increments
14. Ctrl+left/right Arrow Key – extend/shorten selected measurement
15. Shift+Ctrl+left/right Arrow Key – Extend/shorten selected measurement in increments
16. Ctrl+up/down Arrow Key – rotate selected measurement

View Images

17. Shift+Ctrl+W – close a file in Photoshop and open a Bridge
18. Q – Toggle between Standard mode and Quick Mask mode
19. F/Shift+F – Toggle forward/backward between Standard Screen Mode, Maximized Screen Mode, Full Screen Mode, and Full Screen Mode with menu bar
20. Double-click Hand Tool – fit image in window
21. Ctrl+1 – magnify 100%
22. Home/End – move view to upper-left corner or lower-right corner
23. \ – toggle layer mask on/off as rubylith (layer mask must be selected)
24. Ctrl+Tab – cycle through open documents
25. Shift+Ctrl+Tab – switch to previous document
26. Ctrl+drag over preview in Navigator panel – zoom in on specified area of an image

Select & Move Objects

27. Space + drag any marquee tool (except single column or single row) – reposition marquee while selecting
28. Shift+drag – add to a selection
29. Alt+drag – subtract from a selection
30. Shift+drag – constrain marquee to square or circle (if no other selections are active)
31. Alt+drag – switch from Magnetic Lasso tool to Lasso tool
32. Alt+click – switch from Magnetic Lasso tool to Polygonal Lasso tool
33. Move tool+Alt+drag selection – move copy of a selection
34. Move tool+Arrow Keys – move selection 1 pixel
35. Any selection+Arrow Keys – move selection area 1 pixel
36. Ctrl+Arrow Keys – move layer 1 pixel when nothing is selected on layer
37. Magnetic Lasso tool+[ or] – increase/decrease detection width
38. [+/ – toggle crop shield off and on
39. Ruler tool+Alt+drag end point – make protractor
40. Alt+drag guide – convert between horizontal and vertical guide
41. Any selection tool+Shift+drag – add to a selection
42. Any selection tool+Alt+drag – subtract from a selection
43. Shift+drag guide – snap guide ruler ticks (except when Snap is unchecked)

Transform Selections, Selection Borders & Paths

44. Alt – transform from centre or reflect
45. Shift – constrain
46. Ctrl – distort
47. Enter – apply
48. Ctrl+. or Esc – cancel
49. Ctrl+Alt+T – free transform with duplicate data
50. Ctrl+Shift+Alt+T – transform again with duplicate data