PhotoShop for Web-developers-2

Image for post
Image for post
PhotoShopped Vintage picture by me

Welcome to Part-2 of the series. As told in part-1, most of the things in this series are from the great Photoshop course on Udemy by Dan.

We will next learn to change color of something using Hue. This is a very useful trick which can be used when we create ecommerce site items. There are times when we have same t-shirt in different colors. This requires us to have the model wear different color t-shirt and give the same pose. But most of the time it can be done easily with photoshop.

I will be using this red t-shirt image for this part.

Image for post
Image for post
Classic Red t-shirt

Now, Open it in photoshop. Then open the Adjustment panel and take mouse over Hue/Saturation to click.

Image for post
Image for post
Hue/Saturation

Now, dragging the Hue slider is where the magic begins. You can also increase the Saturation a bit to enhance the color. But sliding the Hue, changes the color.

Below, we create an orange t-shirt.

Image for post
Image for post
Orange t-shirt

Next is Green t-shirt.

Image for post
Image for post
Green t-shirt

Next is pink t-shirt

Image for post
Image for post
Pink t-shirt

And the last one is Blue t-shirt

Image for post
Image for post
Blue t-shirt

We will next learn to change just one color in an image using Hue. There are cases when an image have many colorful items, but we want to change color of just one item.

Consider the below image, where we many 3 different colors items.

Image for post
Image for post
Different colors items

Now, if we use the earlier technique , it will change color of all three items. Let’s check that first.

Image for post
Image for post
Changes color of all — not desired

We want to change the color of the left-most cyan item only. For this we have to click on the below dropdown which shows master. It will show all the colors available on the page. Click on cyan.

Image for post
Image for post
Select cyan

Now, slide the Hue slider and it will change color only of the Cyan item.

Image for post
Image for post
Cyan item changed to blue

Below we change it to Pink.

Image for post
Image for post
Cyan item to pink

This concludes part-2 of the series. You can find part-3 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store