4. Johnsons Baby Shampoo

Started by creating the base shapes in illustrator. I learned an important lesson here. To create a shape with smooth curves the anchor points must be straight and equal in length

  1. Large yellow tear drop
  2. rim of the yellow tear drop that holds the blue gradient and text
  3. The red tear drop ‘no more tears’
  4. The small blue tear drop at the bottom
  5. . The banner next to the red tear drop.

I ⌘C, ⌘V into Photoshop as a path. Then split these shapes into separate layers so they could be used individually and gave them a base colour. Next step is applying layers styles to these shapes to mimic the logo.

The Gradient Overlays really transform these basic shapes. It was a good opportunity to use some nice linear and radial gradients. I’m steadily becoming more comfortable with them. Other usual suspects are at work Drop Shadows, Inner Glows, Strokes etc. It was surprising how the effects transformed these shapes.

The rest is positioning text, choosing suitable fonts. Some good practice with text on paths. I downloaded Treehouse font from dafont.com. Its a close match for the Johnsons type except kerning and tracking don’t seem to work in the Character Palette. The letters could be closer together.

What we end up with is a half decent replica of the Johnson’s label.

Here t is. I’m quite pleased with the result and learned a few things along the way.  Using stroke a path for the white line at the bottom for example. Never used so many gradients before. I’m sure there are easier ways to do this, but my main goal is to be proficient with Layer Styles.

The shapes are a bit off, but that’s OK. That’s what happens when you eyeball things!

The Layers Panel ended up being quite long!


3. Flora

Started off in Illustrator

Created a path for the RHS of the heart (1) followed by (2) Transform > Reflect [ vertical, copy ]. I did 1 and 2 several times until I was happy with the shape. Once I was hapy with the shape I went back to the RHS and and completed the path (3) , then modified the LHS so there was no overlap (4)

I used Pathfinder: Divide and remove the unwanted pieces at the overlap at the bottom of the heart, followed by Pathfinder: Unite to reconnect the small central piece back to RHS.

Now it just a matter of coloring the heart to match the official  logo.

I used these gradient fills matching the logo as close as possible, then ⌘C , ⌘ V into Photoshop as a smart object

I type the text on a path to give it a shallow curve, a green Color Overlay and a Drop Shadow [ color=yellow, blendmode=normal, opacity=100 ]

For the backdrop I pressed ⌘ CLICKed on the layer to load the Smart Object as a selection, used the Polygon Lasso tool  [ Add to Selection ] to add the insde of the heart. In Paths Palette I clicked Make work path from selection.

Gave it a white fill, and ⌘T to enlarge so that it encompasses the logo

It didn’t come out that great but was important since it wouldn’t be noticeable once I applied a  gaussian blur:15.4px

The heart could a little fuller at the bottom, but that’s just knitpicking. Overall Im happy with the result.

2. Caro

Starting with Microsoft Tai Le font and applying the following layer styles

First used Color Overlay to get a suitable brown. I sample this colour for my Drop Shadow and reduced it opacity. With Bevel and Emboss highlight I tried used using Linear Dodge for the highlight mode hoping for a stronger highlight but it made no difference


The highlight really could be stronger. Using contours perhaps ? or turn off Bevel and Emboss and use Inner Shadow [ color=white, blendmode=normal/screen ] thus using it to produce highlights instead of shadows.

The star is a shape layer. It started off as a square. I added extra anchor points with the pen tool and pulled them towards the centre.

Then it was just a matter of rotating it into place before adding the layer styles

I added a inner shadow, sampling the stars color. I couldnt get the right look for the highlight using Layer Styles so opted for quick and easy additions with the pen tool.

So here it is. The finishing touches were simple enough. For the nestle logo I started with with Helvetica, converted to a shape layer, and used the pen tool to make the necessary changes.

Its not quite in keeping with the nestle logo, certainly could of done a better jobs. Maybe next time!

1. Natco

Started with my font Hiragino Kaku Gothic

and change the font metric a little making the central letter smaller the N and the O, adjusting the letter spacing etc.To make the double drop shadow effect I applied a Stroke [ color=black, size=4px ] and a Drop Shadow [ color= #c58917, blend mode = normal ].

Even though the stroke surrounds the letters It will not look that way when it sits on a black background. The backgrounds are shape layers. Just rectangles, then adding an extra anchor point and pulling inwards to make the ark. then colouring appropriately. The gold background has a simple drop shadow applied to it.

By adding the backgrounds it really begins to take shape.The only thing missing is the logo, a set of crockery.

This was simple enough to produce in Illustrator using the Pen Tool, Rectangle Tool and Pathfinder. I made the stoke colour the same as the background colour in Photoshop so everything should match up nicely. The last step to selcect all ⌘C and ⌘V into Photoshop as a Smart Object.

First one done!. The text doesn’t follow the contour of the background as much as it should. To do so I would have to convert the text to a Shape Layer. For now I prefer that the text is still editable

Layer Styles are Everywhere!

What with spending so much time on branding lately Ive begun to look at packaging in a whole new light. I was in the supermarket today and it hit me

Layers styles are everywhere! There just no getting away from them. I found myself trying to work out how some of them were done. A stroke here, a Bevel and Emboss there. Some are simple enough others not so much.

Anyhow, in an attempt to become better acquainted with layer styles, and Photoshop in general, I’m going to start reproducing some of these Logo(type)s. See how much success I have. Might just learn a thing or two!

Starting with simple ones to build up a bit of confidence. I’m not too bothered about exact font matches. Anything close will do to begin with. I don’t want  to turn this into a font hunting exercise thus distracting me from actually trying things out, actually doing some work.

Anyway here goes! .