100 Photoshop tutorials to power up your skills - Part 2

Fix problems with Photoshop

Erase unwanted backgrounds in Photoshop

Use the Eraser tools to select and delete unwanted backgrounds - or even just parts of them. We show you how in this Photoshop tutorial.

Post-production fixes

Photography in design can be a tricky aspect. Ten world-renowned designers channel their best advice on how to get the most from your photos using Photoshop in post-production.

Blur backgrounds easily in Photoshop

Wished you’d taken that shot with a wider aperture? Make it happen in Photoshop using a blur filter and a painted mask.

The complete guide to fixing exposure in Photoshop

What is a histogram? How do you fix poorly exposed photos? We answer these questions and more with this Photoshop tutorial walking you through exposure in Photoshop CS6 and Camera Raw.

Organisation in Photoshop

How to make the most of your graphic assets

Learn to keep your graphic assets under control

Whether it's vector experimentation in Illustrator, manipulation in Photoshop or tinkering around with a 3D application, if you make something interesting then why not categorise it, file it and keep it around for later repurposing? This Photoshop tutorial shows you how.

Manage your layers more efficiently

Managing layers in previous versions of Photoshop could sometimes be a struggle. Luckily, CS6 has made some upgrades which means layer trouble is a thing of the past, as this Photoshop tutorial explains.

How to build experiments into your workflow

Experimentation is key to remaining creative (and sane). In this Photoshop tutorial, find out how to create artwork that has a solid foundation, yet still enables you to mess around along the way.

Graphic design in Photoshop

Design a chrome and plastic button in Photoshop

Making UI elements should be part of every designer’s toolbox. Here's how to make a cool looking chrome and plastic button in Photoshop.

Make interesting vector shapes in Photoshop CS6

The introduction of vector shape layers in Photoshop CS6 has opened up a wealth of new possibilities. In this Photoshop tutorial you'll find some tips so you can make the most of them...

How to merge vectors with photographic imagery

Learn how to merge a few basic images and then mix them in with vector shapes to create a unique editorial illustration. Sound difficult? Actually no.

How to fix skewed perspective using Photoshop CS5

Learn the techniques needed to fix warped lines and skewed perspectives in Adobe Photoshop CS5. It's not that hard...

Bring your images to life

Add a bokeh effect to your images

Create out-of-focus highlights from scratch with a little help from Photoshop CS6’s new time-saving shortcuts, in this easy to follow, four-step tutorial.

Turn photos into simple caricatures

Master Photoshop's Free Transform tool and use it to warp portraits of your subjects into comical caricatures!

Get the toy camera look

Get the toy camera look with Photoshop.

Recreate a fish-eye effect

Give images the super-distorted fish-eye treatment, then crop and add text to get the look of an iconic album cover.

Apply a quick vintage look in Photoshop

Use Photoshop CS6’s Color Lookup feature to change colours within an image, in four simple steps.

How to add frames to photos using Photoshop and Lightroom

Using a combination of Photoshop and Lightroom, here you'll discover a few ways to add frames and borders around your photos. The workflow includes using tools such as Photoshop blend modes, custom brushes and layer styles.

Create a realistic sketch effect with Photoshop

With the help of Photoshop's stamp and brush tools, we reveal how you can convert your photographs into stunning pencil sketches!

Recreate infrared photography in Photoshop

You don't need a dedicated camera to take an infrared image - you can do it in Photoshop instead. We explain how, in just six simple steps.

Create a Polaroid pinboard effect

Transform a single image into a striking montage of Polaroid shots with this fun Photoshop layers technique.

Create a fashionable cross-processing effect

Fashion photographers used to develop film in the wrong chemicals on purpose to create striking colour effects. Here’s how to achieve the look in Photoshop.

Add the hipster vintage look

Learn how to utilise Adobe Camera Raw as a creative tool, and add cool retro effects to your shots.

100 Photoshop tutorials to power up your skills - Part 1

100 Photoshop tutorials to power up your skills

Love it or hate it, Photoshop continues to be the design software of choice for millions designers across the globe for a wide range of tasks, including photo editing, graphic design, typography,illustration, 3D modelling and animation. Here, we round up the very best Photoshop tutorials from around the web covering all these areas and more...

Introducing Photoshop tools and features

Two-minute tool school: the Burn Tool

One of our own Photoshop tutorials, hosted on the Creative Bloq YouTube channel, introduces the Burn tool. In the easy-to-follow video, discover how to selectively darken areas of an image, with an overview of settings and tips on working with Shadows, Midtones and Highlights.

Two-minute tool school: Color Replacement Tool

Another of our YouTube Photoshop tutorials, this short video introduces the Color Replacement Tool, which lets you paint roughly over an area of an image. Discover how to replace colours based on Hue, Saturation, Colour and Luminosity.

Two-minute tool school: Content-Aware Move Tool

This Photoshop tutorial introduces the Content-Aware Move Tool. In the easy-to-follow video, we reveal how Photoshop can analyse pixels and heal unwanted portions within an image.

Two-minute tool school: Custom Shape Tool

This Photoshop tutorial introduces the Custom Shape Tool. Choose from a large selection of different shapes and learn how to use various settings such as Fill, Stroke and more.

Two-minute tool school: Dodge Tool

This Photoshop tutorial introduces the Dodge tool. You'll learn how to selectively lighten areas of an image. Learn about brush options, Range, and Exposure. Brighten eyes, pick out details, and much more!

Master Photoshop CS6's Crop tool step-by-step

This Photoshop tutorial is a fantastic way to get to grips with the crop tool. It's set out in a step-by-step fashion to help make the process of mastering it even easier.

Iris Blur in Photoshop CS6

Iris blur is basically the opposite of field blur, in which you can blur everything apart from where your pin is placed. Learn the ropes with this simple step-by-step Photoshop tutorial.

The Blur Gallery in Photoshop CS6

One of the most popular features in Photoshop CS6 has been the Blur Gallery - three brand new filters that allows for photo-realistic depth. Discover how you can use them in your work in this Photoshop tutorial.

Get creative with the Photoshop Brush tool

Get an overview of the Brush tool in this brilliant Photoshop tutorial. Find out what it can do and how best to use it.

How to use Photoshop's Curves and Adjustment Layers

Discover how you can quickly adjust dull skies and improve your landscapes using Adobe Photoshop's Curves and Adjustment Layers in this Photoshop tutorial.

Pro tips and techniques

How to add drama with the Radial Blur Filter

In this Photoshop tutorial, learn how to use CS5's built-in filter effects to add a feeling of movement and power to your images.

Use Adjustment Layers to tone an image

This Photoshop tutorial explains how to add a variety of tone and colour effects using the Adjustment Layers option in Photoshop CS5.

Use Photoshop's Tilt-Shift filter

Using Photoshop's CS6 Tilt-shift blur effect, Ben Secret explains an innovative approach to saturation by creating a miniature model village. In this Photoshop tutorial you'll learn how to simulate an exaggerated depth-of-field effect.

The ultimate guide to adjustment layers - curves

Curves allows you to adjust the tonal values in an image, increase or decrease the exposure, or automatically colour correct. This tutorial provides a comprehensive explanation of the Curves functions and how to use them.

Combine colour with monochrome in Photoshop

Get creative with colour, learn how to create a wider tonal range, and create classic images with added impact in six simple steps! A fantastic Photoshop tutorial to boost your skills.

Five top Photoshop tips for great spot colour

Learn how to use Hue/Saturation Adjustment Layers and S-shaped curves for excellent spot colour results in this Photoshop tutorial.

How to body sculpt using the liquify tool

Fancy mastering the art of airbrushing? This Photoshop tutorial will get you started as it describes how to use liquify for photo retouches.

Got milk? New calendar bares all using Photoshop

Photographer Jaroslav Wieczorkiewicz has created a calendar where women are clothed in milk. Very fast milk.

Images can take up to 200 frames to complete

Forget the usual calendar designs - London based photographerJaroslav Wieczorkiewicz has decided to use some cleverPhotoshop skills and create a milky tribute to the 1940s. Channeling inspiration from the retro pinup girls, this will certainly catch the eye.

Frozen with high speed strobes, each photograph is layered from hundreds of photographs of splashes on real models using real milk. Inspired by artists such as Gil Elvgren, Wieczorkiewicz has said that it can take up to 200 frames to reach the finished image.

Mixing the layers in Photoshop, effects and finishing touches then complete the striking image. If this has inspired you, you'll be pleased to know that the calendar will be available for purchase next month.

See more work from Jaroslav Wieczorkiewicz over on his

15 phenomenal things about Photoshop CC

01. Connected to Behance

When you join Creative Cloud, you can quickly sign up to Behance and, of course, its ProSite personal portfolio tool - both are free within the CC subscription. The best part? If you want to showcase a WIP, final illustration or anything you've created in Photoshop on Behance, you can upload it directly from Photoshop itself. Just go to File>Share to Behance. If you haven't linked your Behance account, you'll receive step-by-step instructions the first time you try to share. Also, you can sync Behance with ProSite, meaning that a Creative Cloud membership provides a very simple way to publish new work to your portfolio site.

02. Smart Sharpen

The Smart Sharpen filter will save you so much time that you won't know what to do with it all!

In terms of the new features in Photoshop CC, one great addition is the Smart Sharpen filter. Found in the Filter>Sharpen menu, it enables you to quickly reduce noise and halo effects, using adaptive sharpening technology. You can, of course, dynamically preview the effect, as well as compare the result to Photoshop's legacy sharpening tool with the check of a box. You can use presets or save your own, using Amount, Radius and Reduce Noise sliders (amongst many other options) to get the required result.

03. Generator technology

The Photoshop 14.1 update contains a brilliant new feature - and technology - called Generator. This is a brilliant workflow addition, and essentially enables you to quickly create image assets in real-time as you work. Simply add a file extension to the name of your layer or layer group, and Photoshop will automatically create a JPG, PNG or GIF from the contents of that layer. If you make a change to that layer, the file is immediately updated. You can even add scaling factors. It's a huge new feature.

04. Save to Cloud

Picture this: a client wants to see a work in progress but doesn't really understand file formats and the like. Now, using Photoshop CC you can save your files directly to Creative Cloud and then, using the desktop app or browser-based dialog, choose to share files. The client simply receives an email and can view the project in their browser. How's that for a quick and easy project update? What's more, saving files to the Cloud enables you to manage them across multiple machines - desktop, laptop and even mobile devices.

05. Intelligent upsampling

Scaling up lo-res images is now simple (and plugin-free) with intelligent upsampling

You've been sent a low-res image by a client who wants it blown up to a huge size. What do you do? It used to be that you would have to resort to the likes of the (albeit excellent) plugin Genuine Fractals to upsample your images without a glaring loss of quality. Thankfully, in Photoshop CC you can now do this directly in the app. Combine this with being able to easily share files via Creative Cloud, and suddenly it's easy to show your client exactly what the low-res image will look like at the requested size.

06. Extended features included

Before Creative Cloud, two versions of Photoshop existed: Photoshop and Photoshop Extended. The latter included powerful image, video, analysis and 3D tools. With Creative Cloud and Photoshop CC you now get all of this in one version - so you don't have to pay any more to get all the exciting features of Photoshop Extended. It may seem a little, but if you want to build 3D into your workflow, it's a lot…

07. Multi-shape and path selection

The ability to select multiple paths, shapes and vector masks at once is, again, a simple yet very useful addition. Even in multi-layered documents with lots of paths, you can easily target the path and any layer you want right on the canvas using a new Filter mode (rather like the Filter mode in the Layers panel introduced in CS6).

08. Conditional actions

Actions are an important part of any professional Photoshop user's workflow - and with Photoshop CC they have become much better. For processing files they are brilliant: you use if/then statements to determine image properties before applying your action. They are all based on the rules you set up, so you are in complete control.

09. Editable rounded rectangles

The editable rounded rectangles feature is great for web designers

For a web designer who wants to export shapes as CSS data for use in another Adobe app such as Muse, editable rounded rectangles can be a lifesaver. You can resize shapes, edit them and re-edit them - before or after they're created.

10. Better 3D tools

Photoshop CC brings with it some improved 3D tools. For one, the 3D Scene Panel has been enhanced to make it easier to switch between a 2D and 3D workflow (thanks to a more conventional naming scheme and options). Secondly, higher quality live previews help you achieve great looks in less time. Plus, you can easily create better glow effects, scene illumination, and lighting for bumps and textures. Remember that After Effects now comes with Cinema 4D Lite, making your Creative Cloud 3D workflow - particularly across motion projects - a real breeze.

11. CSS From Layers

Web designers rejoice: the new CSS From Layers feature enables you to generate CSS code for specific design elements, and simply copy and paste the code into Dreamweaver or Muse to get the results you want. Let's say you designed a rounded rectangle element on a layer. Just Ctrl/right-click a layer or layer group and choose Copy CSS from the Context menu. It's as easy as that, and a great way to quickly move from mockups in Photoshop to live code in Dreamweaver or Muse.

12.  Colour import from web files

With this clever new feature you can import colour swatches directly from HTML, CSS or SVG files - which is great when you need to find inspiration for a colour scheme or require help to match an existing scheme. It's another solid example of the excellent workflow features of Photoshop and the rest of Creative Cloud - and undoubtedly one you'll use again and again.

13. Improved type styles

The improved styles functionality in CC makes it incredibly easy to quickly set type styles and apply them across your Photoshop document, enabling you to maintain consistency and accuracy across your design projects.

14. Camera Shake Reduction

We've spoken about Photoshop CC's camera shake reduction previously, but it is still a handy feature

The new Camera Shake Reduction feature is great for when you've got some shaky shots you need to save for a client mockup or website. Whether your blur was caused by slow shutter speed or a long focal length, Camera Shake Reduction analyses its trajectory and helps restore sharpness - all in an intuitive dialog of course.

15. Expanded Smart Object support

Being able to apply effects non-destructively, without actually affecting the pixels, is a huge bonus. It enables you to experiment with different effects without committing or saving a duplicate of the file. In Photoshop CC you can apply Blur Gallery and liquify effects: your original file will stay intact as you push, pull, pucker or bloat the image or video. You can edit or remove the effects at any time, even after saving your file.

Mock up a music player widget in Photoshop

Morgan Allan Knutson explains how to mock up a simple music player widget in Photoshop using vector shapes and layer styles to produce subtle and simple interfaces.

While voice recognition and gesture technologies are advancing exponentially, the need for visual user interfaces will persist into the future. Decades ago, interfaces were often garish and overdone. But consumers expect a quality appearance from today's well-designed and affordable modern software; designers must now make their interfaces beautiful too.

Best practice for interfaces is to keep things simple. The content should be uninhibited and it should be obvious how to use the interface. Shifting paradigms too drastically can be detrimental to a person's immediate understanding of how your application works. It's better to stick to what people know, for example, a triangle for a 'play' icon.

Music widget

In this tutorial you'll make each piece of a fictional music player widget, down to the icons on the buttons and the knob on the progress bar. You'll learn: how to use Adobe Photoshop's layer styles to add smooth and subtle dimensions to sharp interfaces; how to apply barely noticeable gradients that aid in expressing a characteristic of tangibility; how to create helpful and beautiful interaction states for the widget's buttons; and how to design proper hover and pressed-in states while keeping everything crisp.

01. Create a container layer

Draw a rounded rectangle with a 6px border radius. Double-click the layer to open its styles dialog and give it a 90deg linear gradient fill of #F9F9FA on the top and #EFEFEF on the bottom. Add a white inner shadow with 2px distance.

02. Add a drop shadow

Give the container layer a black 4px drop-shadow with 1px distance and 10% opacity. Now, add a 1px stroke and give it a light-to-dark gradient with a fill of #C8C8C8 on top

03. Isolate the button bar

Duplicate the layer, choose the Path Selection Tool (A) and select the rectangle's path. Using the Rectangle Tool (U), hold shift while drawing a rectangle over the existing path. Select Intersect Shape Areas in the options panel to isolate a smaller shape.

04. Create button shapes

Remove the stroke and drop-shadow, and lighten the gradient to #F0EFEF on top and #F9FAFA on bottom. Use the Line Tool (U) to draw a single #DFDFDF line across the top of the bar. Add two black vertical lines and lower the opacity to 6%.

05. Make a play icon

With the Custom Shape Tool (U), draw a sharp triangle and fill it with #BABABA. Rotate it clockwise by 90deg with Free Transform (Cmd+T). Apply a black inner shadow of 1px distance and 1px size at 40% opacity. Apply a white drop-shadow at 1px distance.

06. Make a fast-forward icon

Duplicate the play icon. Use Free Transform to scale it down to approximately 75%. Then, use the Path Selection Tool (A) to select its path. Copy and paste it. Now, hold shift and use the right arrow key to move the new path over to the right.

07. Create a rewind icon

Using the Line Tool (U) again, hold shift and add a 1px vertical line to the icon. Hide your path with Cmd+H. Choose the Move Tool (V), hold opt+cmd and hit the left arrow key to duplicate the layer. Then, Cmd+T, right-click and choose Flip Horizontally.

08. Add text

Move the new shape into position and make sure both buttons are symmetrical. Next, add accompanying text for the track title and artist using the Type Tool (T). Set them apart with contrast by making one lighter than the other.

09. Tweak the type style

Next, add a bit of depth to the text. On one text layer, add a white drop-shadow at 1px distance. Then right-click the layer and click Copy Layer Style. Select the other type layers, right-click one in the layers palette and click Paste Layer Style.

10. Create a track layer

Choose the rounded rectangle tool, give it a radius of 100px, and draw a track in between the timestamps. It needs to appear as a darker trench that the progress bar will fill up. The layer styles will be reversed as the light source is coming from the top.

11. Finishing touches to the track bar

Give the track bar a white drop-shadow at 1px distance and a black inner shadow of 1px distance at 10% opacity. Add a gradient stroke with #8C8C8C on the top and #DFDEDE on the bottom. Finish it with a gradient fill that's #CCCCCC on the top and #E8E8E8 on the bottom.

12. Make the progress bar

Duplicate the track layer and, using the Direct Selection Tool (A), select the three rightmost anchor points (zoom in or marque). While holding shift, hit the left arrow key to move the right edge of the progress bar into the middle of the track.

13. Back to the first layer

Now the shape of the progress bar is established, right-click on the first layer you made (for the container) and click Copy Layer Style. Then select your new progress bar layer, right-click, click Paste Layer Style and remove the drop-shadow.

14. Create the progress bar knob

Select the Ellipse Tool (U), hold Shift, and draw a circle for a knob. The layer styles will be in your clipboard from the previous step, so right-click on your ellipse layer and, again, click Paste Layer Style. This time leave the drop-shadow for depth.

15. Add a few button states

These are useful to give users confirmation that the button is pressed. Select the button bar at the bottom and duplicate the layer. Then, select the leftmost anchor points and, while holding shift, drag them until they reach the left edge of the right divider.

16. Turn the layer into a hover state

It's best if buttons subtly light up on hover. Change the top of the gradient to white and the bottom of the gradient to #EFEFEF. Remove the inner shadow as it conflicts with the divider. Now duplicate the layer and hide the original.

17. For a pressed-in state

We want the individual buttons to darken and appear as if actually been pressed when a user clicks their cursor. Change the fill to black and reduce the gradient opacity to 95%. Next, add an inner shadow of 1px distance and 3px size at 20% opacity.

18. Add styling

To sharpen the button, add a 100% #D7D7D7 drop-shadow with a 1px distance. Make sure Use Global Lighting is unchecked and change the angle to -90deg. In the layer palette, move the layer underneath the vertical button dividers, but above the button bar divider.

19. Fine tuning

For the icing on the cake, go back to the knob layer and duplicate it. Use Free Transform (Cmd+T) to size it down by 20%, and paste the layer styles from the track layer onto its layer. Then darken its stroke by changing its top gradient colour to fully black.