Tutorial
This is my first ever tutorial.
Let me know what you think, any comments are welcome. :)
Program: PS E3 with added Curves
Difficulty: Easy
Translatable: Yes
PSD: No
>>
Our base. A picture from Getty re-sized to 100pixel width.
(I like icons that are not 100x100 but I realize most people want to see the whole 100x100 canvas used. I didn't want to crop this particular image into 100x100 so I decided to play with it.)
Duplicated the base, moved that layer up to the top so only a 2 pixel bottom strip showed.
Pushed the yellows on that layer so the strip showed up more clearly.
Placed the base exactly under the 2px yellow strip.
(I've seen this done on a couple of icons, a small strip of a contrasting colour or of a texture, and I like the effect, I like using the base image to create something like that.
I used Enhance > Adjust Color > Color Variations > Midtones > Decrease Blue to make the yellow pop, but of course there are other ways to do this.)
Duplicated the base.
Removed the top part of the sky and placed that layer underneath the base leaving a small strip between the two.
Rotated, or flipped, that layer horizontally.
(I wanted to have a repetition of the images but had to remove part of the sky to make it work because I wanted the to mountains to show.
The white strip just looked better than simply pasting the images together and flipping the bottom image looked better in the overall composition.)
Changed the colour of the background from white to black.
Moved the original base up so only a 1 pixel yellow strip shows on the top.
(Usually I go back and forward trying different things when I'm working on an icon.
At first I thought a 2px yellow strip would be good but when the whole icon came together I decided on just a 1px strip.)
Used a 5 pixel soft brush on 20% to erase some of the blue of the sky at the top of the bottom image so it blended better with the black strip.
(I actually changed the colour of the background a couple of times before finally settling on black when I decided to sort of blend it with the sky.)
Used two Curves layers, a Brightness/Contrast layer and a Hue/Saturation layer to push the contrast and make the colours pop.
Merged the whole icon, duplicated it, sharpened that duplicate layer and set it to 10% opacity.
(My usual steps when working on most icons.
In actual fact I did the contrast part somewhere in between working on the composition, just leaving those layers at the top of the PSD and moving the image layers around underneath that.
Curves layers: Using two points, the first point in the middle, the second point between the bottom of the line and the first point. The first point pushing up, the second point pushing down to create a slight s-shaped curve.
I use Curves mostly for contrast but of course it can do much more.
Brightness/Contrast layer: Usually I lower the brightness, depending on the brightness of the source image, and increase the contrast.
Quite crude I know, but it works for me.
Hue/Saturation layer: Again depending on the source image, I increase the saturation between 5 and 20 points, sometimes I play around with the Hue by up to 10 points.
The results depend on the source image so I always play around with the settings, sometimes duplicating the layer and changing the opacity of the layers or even using a soft black brush to remove/mask parts of the layer as I go along.)
Poll
Let me know what you think, any comments are welcome. :)
Program: PS E3 with added Curves
Difficulty: Easy
Translatable: Yes
PSD: No
>>
Our base. A picture from Getty re-sized to 100pixel width.
(I like icons that are not 100x100 but I realize most people want to see the whole 100x100 canvas used. I didn't want to crop this particular image into 100x100 so I decided to play with it.)
Duplicated the base, moved that layer up to the top so only a 2 pixel bottom strip showed.
Pushed the yellows on that layer so the strip showed up more clearly.
Placed the base exactly under the 2px yellow strip.
(I've seen this done on a couple of icons, a small strip of a contrasting colour or of a texture, and I like the effect, I like using the base image to create something like that.
I used Enhance > Adjust Color > Color Variations > Midtones > Decrease Blue to make the yellow pop, but of course there are other ways to do this.)
Duplicated the base.
Removed the top part of the sky and placed that layer underneath the base leaving a small strip between the two.
Rotated, or flipped, that layer horizontally.
(I wanted to have a repetition of the images but had to remove part of the sky to make it work because I wanted the to mountains to show.
The white strip just looked better than simply pasting the images together and flipping the bottom image looked better in the overall composition.)
Changed the colour of the background from white to black.
Moved the original base up so only a 1 pixel yellow strip shows on the top.
(Usually I go back and forward trying different things when I'm working on an icon.
At first I thought a 2px yellow strip would be good but when the whole icon came together I decided on just a 1px strip.)
Used a 5 pixel soft brush on 20% to erase some of the blue of the sky at the top of the bottom image so it blended better with the black strip.
(I actually changed the colour of the background a couple of times before finally settling on black when I decided to sort of blend it with the sky.)
Used two Curves layers, a Brightness/Contrast layer and a Hue/Saturation layer to push the contrast and make the colours pop.
Merged the whole icon, duplicated it, sharpened that duplicate layer and set it to 10% opacity.
(My usual steps when working on most icons.
In actual fact I did the contrast part somewhere in between working on the composition, just leaving those layers at the top of the PSD and moving the image layers around underneath that.
Curves layers: Using two points, the first point in the middle, the second point between the bottom of the line and the first point. The first point pushing up, the second point pushing down to create a slight s-shaped curve.
I use Curves mostly for contrast but of course it can do much more.
Brightness/Contrast layer: Usually I lower the brightness, depending on the brightness of the source image, and increase the contrast.
Quite crude I know, but it works for me.
Hue/Saturation layer: Again depending on the source image, I increase the saturation between 5 and 20 points, sometimes I play around with the Hue by up to 10 points.
The results depend on the source image so I always play around with the settings, sometimes duplicating the layer and changing the opacity of the layers or even using a soft black brush to remove/mask parts of the layer as I go along.)
Poll