app • Adobe Photoshop CC - martindubenet/wed-dev-design GitHub Wiki

Looking for menu top tools? Watch this tutorial


Hidden shortcuts

Windows macOS Action
Ctrl+[J] Duplicate selected layer.
Ctrl+Alt+Shift+[E] Merge all selected layers into one new layer.
Ctrl+Shift]+[F] Fade Smart Sharpen.

 

Plugins

Dealing with the WebPShop (*.webp) file format

https://developers.google.com/speed/webp : WebP is a modern image format maintain by Google to provides superior lossless and lossy compression for images on the web.

IMPORTANT note from Adobe

Since Photoshop 23.2, Photoshop provides full support to the WebP file format

Install the plugin for Photoshop

  1. Go to the WebPShop project on GitHub,
  2. Download the file
    1. On Mac OSX:
      1. Download the .zip file
      2. Extract the *.plugin file from the .zip,
      3. Drag it in /Applications/Adobe Photoshop 2022/Plug-ins/,
    2. On Windows :
      1. Download the *.8bi file,
      2. Drag it in C:\Program Files\Adobe\Adobe Photoshop 2022\Plug-ins\,
  3. Launch Photoshop.

Also available for front-end development on projects via npm webp-converter.

 

My Preferences

  • General Options
    •    Check✅ Auto-Update Open File-based Documents
    • Uncheck⬜ Auto show the Home Screen
    •    Check✅ Use Legacy « New Document » Interface
    • Uncheck⬜ Skip Transform when Placing
    •    Check✅ Use Legacy Free Transform
    • Uncheck⬜ Beep When Done
    •    Check✅ Export Clipboard
    •    Check✅ Resize Image During Place
    •    Check✅ Always Create Smart Objects when Placing
    •    Check✅ Preset Syncing
  • Interface ➥ Options
    •    Check✅ Show Channels in Color
  • Workplace ➥ Options
    •    Check✅ Open Documents as Tabs
    •    Check✅ Enable Floating Document Windows Docking
  • Tools
    •    Check✅ Show Tooltips
    • Uncheck⬜ Show Rich Tooltips
    • Uncheck⬜ Overscroll
    • Uncheck⬜ Zoom with Scroll Wheel
  • File Handling ➥ Cloud Documents Local Working Directory
    • Choose Directory : Select your SSD external drive volume
  • Transparency & Gamut
    • Choose a lighter grid color
  • Units & Rulers
    • Rulers + Types : Select Pixels
  • Plugins
    •    Check✅ Enable Developer Mode
  • Technology Previews
    • Uncheck⬜ Enable Native Canvas Rulers
    • Uncheck⬜ Enable Content Credentials (Beta)

Actions (.atn)

  • MacOS Terminal : ~/Library/Application Support/Adobe/Adobe Photoshop 2022/Presets/Actions
  • Windows : C:\Users\{{UserName}}\AppData\Roaming\Adobe\Adobe Photoshop 2022\Presets\Actions

 

Step-by-Step guide to solve irritants from predefined Preferences

Error message «Scratch disks are full»

Stay with legacy settings

Go to menu WindowShapes then click at the top right of the panel that opens and in the drop down menu choose "Legacy Shapes and More"

Bring back Arrows within my list of Shapes.

Since version 2020 the default stack of Shapes has been replaced by « Boats, Flowers, Leaf Trees and Wild Animals ». To

Disable layer selection on click

Auto-select

  1. Select a layer and press the « Move » (V) tool.
  2. From the « Move » tool's Options Bar, above the artboard, Uncheck⬜ Auto-select option.

Disable left tools popup tutorials

Uncheck this option : PreferencesTools⬜ Show Rich Tooltips

screenshut

Stop « Save For Web » tool to rename the files by adding hyphen

  1. Open any file in Photoshop then do a « Save For Web » action.
  2. From the « Save For Web » window 🖱Click on the mini ▾☰ menu button next to « Preset ».
  3. From this dropdown, choose the «Edit Output Settings» option (last).
  4. From the « Output Settings » window, from the second (2nd) dropdown menu, select the «Saving Files» option.
  5. From the « Filename Compatibility » options Uncheck⬜ Unix option (last checkbox on the right).

Clear all « Unsued Swatches »

  1. Download an empty set of Swatches : Available from Dodona's blog post here
  2. Go to Photoshop, 🖱Click the « Swatches » window menu in the right corner.
  3. From the contextual window menu, choose «Replace Swatches…».
  4. Load the « No_Swatches.aco » file that you downloaded at step 1 (above).
  5. This should clear all the swatches and leave you with only the Black color.

 

Using FontAwesome icons in Photoshop

  1. Download and install FontAwesome for Desktop,
  2. From the downloaded folder, find the .otf files to install in your Font Manager app (Font Book on macOS),
  3. Go to FontAwesome.com Search Page to find the icon you're looking for,
  4. Within the modal window of the icon look in the upper-right corner to find the « Copy Glyph » Call-To-Action,
  5. In Photoshop, select the TEXT tool (T) and click in the artwork to create a TEXT layer,
  6. Paste the Glyph code from your clipboard (⌘Command+V) on the TEXT layer,
  7. You should now see the icon.

 

Tips and Tricks

For the Fade Smart Sharpen (Ctrl+Shift+[F]) option to be available you to use it immediately after applying a brush or filter. If you do anything else this option is disabled and appears as grayed out.

Batch Actions

Editing images using the Batch tool

Downsize 4K screenshots to 72 DPI

How to use the Script tool to resize in batch

Warp a sticker on a cylinder shaped bottle youtube

Imgur

  1. Copy/paste the sticker on a new seperated layer,
  2. 🖱Right click on the sticker layer an choose Convert to Smart Object from the contextual menu,
  3. Select the new Smart Object layer ➥ Photoshop menu EditFree Transform (⌘T),
  4. Press «⌘ Command+🖱Click» on the handle points to align the corner of the sticker so it match the perspective of the cylinder,
  5. From the top Warp menu bar, 🖱Click on the «Switch between Free Transform and Warp modes» icon
    Imgur
  6. Select the Warp: Arch mode from the list,
  7. Again 🖱Click on the appropriate handle point to adjust,
  8. Then from the Warp menu bar, choose Custom so all the handles are available for you to add a bit more curving effect for a more realistic morphin of the sticker on a round surface.
  9. Now explore the effect of the different layer types. The «Hard light» should be a good choice to allow some light from the bottle to shine trough the sticker thin paper.

Select and mask hair

This method is available since Photoshop CC 2021. See the original tutorial here.

4 steps to REFINE SELECT hair

  1. From Photoshop menu 🖱Click Select ➥ Select and Mask… (Ctrl+Alt+[R]),
  2. From the top toolbar, 🖱Click on the « Select and Mask » button,
  3. From the left toolbar, 🖱Click on the « Refine Edge Brush Tool » button [R],
  4. From the top toolbar again, 🖱Click on the « Refine Hair » button.

Transform a picture in an illustration

Cartooning method 1

See the original youtube tutorial here

  1. If you have multiple layers, merge them as one layer.
  2. Duplicate the layer,
  3. New layer mode : Hard light,
  4. Apply the High Pass filter on it : Filter ➥ Other ➥ High Pass,
  5. Select both layers and merge them as one new layer : Ctrl+Alt+Shift+[E],
  6. Apply the Diffuse filter on this new (3rd) layer : Filter ➥ Stylize ➥ Diffuse ;
    • Select the mode Anisotropic — Then 🖱Click Ok.
  7. Make sure you're view your image at a 100% zoom level — Then open the «Smart Sharpen» filter window :
    • Filter ➥ Sharpen ➥ Smart Sharpen ;
    • Adjust the amount to eliminate the blurring on the image — Then 🖱Click Ok.
  8. Now we remove some of that sharpening by going to : Edit ➥ Fade Smart Sharpen (Ctrl+Shift+[F]) ;
    • Change the mode from Normal to Overlay,
    • Change the Opacity value from 100% down to about 50% — Then 🖱Click Ok.
  9. Apply a Surface Blur to it : Filter ➥ Blur ➥ Surface Blur :
    (whatever value you chose try keeping a ratio of radius been 1/3 of the threshold)
    • Radius about 5 pixels,
    • Threshold about 15 levels — Then 🖱Click Ok.
  10. Done!

Cartooning method 2

Youtube tutorial here

  1. Duplicate the original layer,
  2. Select and Mask [L] on this layer to isolate your subject,
  3. Filter ➥ Filter Gallery ➥ Artistic ➥ Poster Edge,
  4. Adjust Poster Edge values to;
    • Tickness: 0,
    • Intensity: 0,
    • Posterization: Adjust for your needs.
  5. Add some sharpening to un-blur your image: Filter ➥ Sharpen ➥ Unsharp Mask;
    • Amount: about 90 %,
    • Radius: about 5 pixels,
    • Threshold: about 10 levels.
  6. Filter ➥ Stylize ➥ Oil Paint,
  7. Adjust Oil Paint values;
    • Stylization: about 4,
    • Cleanliness: about 3,
    • Scale: about 0.1,
    • Bristle Detail: 0,
    • Angular Direction: 0,
    • Shine: 0.
  8. Again, add sharpening to your image for a 2nd time: Filter ➥ Sharpen ➥ Unsharp Mask;
    • Amount: Decrease to about 60 %,
    • Radius: Keep the same 5 pixels,
    • Threshold: Decrease to about 5 levels.
  9. Select the above (duplicated) layer,
  10. Again, Filter ➥ Filter Gallery ➥ Artistic > Poster Edge,
  11. Adjust Poster Edge values to;
    • Tickness: 0,
    • Intensity: 3,
    • Posterization: about 6.
  12. Again, Filter ➥ Stylize ➥ Oil Paint, keep the previous values and click OK,
  13. Reduce opacity to this (above) layer to about 25%,
  14. Rename this layer to « Outlines »,
  15. Go to the 3rd duplicated layer above all — Rename it to « High pass » — Then make it visible,
  16. Apply the High Pass filter on it : Filter ➥ Other ➥ High Pass,
  17. Change High Pass Radius value to about 2.0 pixels,
  18. Change the layer's Mode to Overlay,
  19. Add some color adjustment : Window ➥ Adjustment ➥ Color Lookup,
  20. Adjust the Color Lookup values;
    • From the dropdown menu choose « 3Strip.Look » — Then click OK.
  21. Apply an opacity of about 50% on the Color Lookup layer.
  22. Done!
⚠️ **GitHub.com Fallback** ⚠️