But all good things must come to an end…

So,  in light of the recent times and economic downturn I have decided to say…Sod all that! Lets make things better!

I am writing this post to inform my readers that change is coming for Branded07 and I need your help! Over the coming months I am going to be carrying out  a full re-Brand(ed) of Branded07.

So whats in store?

A new name will be born, Branded07 was developed out of nothing really and there is no story behind it, I now have a story! And even though I, Rob Palmer have become known for Branded07 I feel it is reaching its final days. I will be designing a whole new and improved look to the site with a less traditional, more intriguing site layout and OK, I ‘may’ keep the Puffins!

What I would like from you…

I would like to use this post as a tool to collect a group people who would like to be kept ‘in the loop’ and up to date on all the re-design steps. You will get the chance to offer feedback and comments on all the new design elements, and I am also planning on running a couple of questionnaires to gather some insight into my specific quandaries! So if you would like to help a guy out, simply write a comment in the comments section on this blog post with your email address and I will add you all to a mailing list.

It is exciting times and I am really looking forward to starting on this. Branded07 will still be running as functionally as ever up until the date of switch over, so keep your eyes peeled and I look forward to hearing your thoughts!

Stage 1 – Photoshop

I set out offering a range of poses for the snow leopard, chosen three can be seen below.

Stage 2 – Illustrator

I then moved on to transferring the chosen sketch into vector. Starting with tracing the concept and filling in with solid colours.

Stage 3 – Illustrator

Now we come to add in the detail work using illustrator. I knew I was running a final pass through Photoshop so I kept the detail pretty minimal, adding rough texture to the fangs, highlights to the body, head and tail.

Stage 4 – Back to Photoshop

After Illustrator I took the image back into Photoshop to add the final details such as whiskers, spot detail and eye highlights.

Final Result

Setting the stage

We will first of all set up a pretty standard document in Photoshop. In this example I have created a 72dpi, 800px x 800px stage. If you were going to set this up to maybe make your own cards then I would advise a higher resolution.

A Basic Background

We will start of by creating a simple gradient effect on our background, but we will be adding our paper effect to the background later in the tutorial, so for now this can stay as a gradient.

Creating Petals

I realise there are some set shapes in Photoshop to allow for the creation of flowers, but following this technique, you will be able to create some fun shapes (not just flowers) and experiment with different abstract backgrounds and all sorts. So, the first step is to create an oval shape using our Ellipse tool.

The colour is a bit irrelevant at this stage, as long as it has a decent enough contrast to the background.

We must now move the pivot point using our transform tool.

While the transform tool is select, grab hold of the center pivot point and drag it down to the base of the shape as shown in the image above. We must then, while the transform is active, rotate the shape. By holding the Cmd, Shift and Alt keys (Windows – Ctrl, Shift and Alt) we are going to rotate the petal. In your example you can do this to whatever degree you choose, but in this example we rotate the petal 30 degrees clockwise.

Press enter to complete the rotation. Now we must step and repeat this process. The easiest way to do this is by simply holding down the same keys as the step above (Cmd, Shift and Alt) and pressing the ‘T‘ key. This will mimic the previous transform but add another 30 degrees onto the rotate. Repeat this process until you have a fully formed flower.

This process can create some great shapes and it would be at this stage I would say to pause the tutorial and have a play around with this technique. Try increasing and decreasing the size on your first rotation and have a look at the great spiral effects you can create!

Adding the Paper Effect

So now we have our shape ready to add a paper effect to. It would be good to note at this stage that I did not create this effect but I cannot for the life of me remember where I saw it first. It is a funky way to create paper crumpled paper though. So set up a new layer and call it ‘Paper‘

Now this technique is pretty simple and only involves three steps. Firstly we must create a gradient on this level. So select your gradient tool and select a Black to White gradient. Make sure the Mode is set to ‘Difference‘ and the opacity is 100%.

Now anywhere across your stage drag a gradient, any angle, just go nuts! Once you have done one gradient, choose a different angle and on the same layer, drag it across again. You will notice the original gradient is still there and the new gradient intersects with it to form a new gradient.

So now we have a couple of gradient intersections, we need some more, not to many, but enough. These intersections will eventually create our creases in our paper. Dont worry about positioning the creases exactly over you flower shape either as we can esily edit this at a later stage. So my final set of gradients looks like this.

Pretty mental huh! Ok now we have our gradient car crash, we must turn it into paper. This involves the final two steps to this process. First of all we select the layer filter ‘Emboss‘

Once you select emboss you will immediately see the creases appear on our layer. My recommended settings for the emboss stage are Angle 135 degrees, Height 2 pixels, Amount 150%

Now for the final stage of the paper effect. We need to nudge the levels to make it less gray. So open up your levels for this layer:

The only thing we will be altering on this example is the mid tones, so on your levels panel, nudge the mid tones up to 4.

You can now see the paper has been formed. All we have to do now is add this paper effect to our flower. Now as mentioned earlier, the paper creases may not be in the best position for you flower, so a little nudging around is called for here until you are happy with the position.

Then select back to the Flower layer and highlight the shape by holding ‘Cmd‘ and clicking the shape on the layer.

Once you have the paper in a position your are happy with, we then need to create a clipping mask for the flower. So Ctrl click or right click on the ‘Paper‘ layer and select ‘Create Clipping Mask‘. We must then duplicate the ‘Paper’ layer to allow for two different layer settings. We need to set the lower level Paper layer to ‘Overlay‘ and the upper level Paper layer to ‘Colour Burn‘. This gives us a nice rich colour to the layers.

As mentioned earlier I also added this paper effect to the background of the image. Using the exact same steps as above. The following examples will show this in place.

Adding the Pin

We are now going to add a little pin onto the centre of the flower to make it seem like it is pinned to the wall.

Firstly draw a circle using either the ‘Ellipse tool‘ or by using the ‘Elliptical Marquee tool‘ in the center of you flower, roughly 30px in diameter. Fill this with any colour. We must then add some layer properties to this circle.

So double click the layer you have just created and add the following drop shadow properties to the pin.

And now a small highlight:

You may also see I have added a gradient to the pin, this can alter for each flower you create so choose any gradient you like for your flower.

Now we just add some tough ups to the pin by creating a small sheen.

Add a new layer and create a new circle above the pin 4-6px smaller in diameter, filling it with white.

Once this circle has been created, use your ‘Eraser tool‘ to fade the highlight out until it creates a subtle sheen.

The Stem

Lastly for your paper flowers we need to create a stem. This is a pretty simple process. Firstly create  new layer Below all layers used to create the flower header.

Using your ‘Pen tool’ or ‘Polygonal Lasso tool‘ Draw a stem coming from underneath the flower head.

Fill this shape with a green gradient as shown above. We then need to add some smaller details to the stem to complete. A small highlight and a drop shadow to add some depth.

Firstly repeat the stem creation process but only highlighting the raised section at the bottom. On a new layer fill this selection with a lighter shade of green.

Now, to create the shadow, duplicate the stem layer and make sure you have the bottom most of the two layers selected, then drag this right a little. Add a colour overly to this layer using the layer properties, this colour should be a slightly darker colour than the background paper colour.

The next step is to add a specific drop shadow under the bottom petal of the flower, to highlight it being further off the paper than the stem. So create a new layer above the stem and draw an ellipse. Fill this with a darker green than used on the stem. Crop this shape to the width of the step and add a ‘multiply‘ effect to the layer

The Final Flower

Hopefully now you should have something that looks like this:

Now all we need to do is duplicate the whole procedure to create some new flowers. You can do this by either creating a new shape from scratch, maybe with different shaped petals, or you can Group up all the layers above and duplicate the Group. You can then go back down your layers to find the masked paper layer, un-mask it and move it around a little to a new spot, then re-mask it to make it seem like there are different creases on this flower.

You can alter the tint of the other flowers easily on the flower layer, and even alter the colour of the pins. Add a paper cut out of some grass to pin on there and you got a lovely spring pin up image!

Give it a go, and it does not just have to be flowers! Any shape or image can be given a paper effect using the techniques above! Enjoy!

Well there is a way in Photoshop to quite easily re-create a hair effect after a rough trim, and it only uses one tool!

Advisory equipment

This technique produces best results when using some form of graphics tablet. It can be done using a mouse but it is a little more challenging to achieve smooth curves and effects.

What we plan to do…

Generally when cutting out people in photographs, the majority of the work is pretty straight forward. Everyone has their own techniques for this, but time after time there seems to be this trend for just rough cutting around the hair line.

In this tutorial I will show you a very simple way to cut out a photograph and deal with the sticky situation of the ‘Cut out hair’. We will be re-creating the hair in a neat and tidy manner, allowing the photograph to be placed on a range of backgrounds.

Lets crack on… Firstly we need to select a photograph.

Here I have chosen a male model with spiky hair. My main reason for this is it will enhance the effect and show off the technique better than say a female with straight hair. Although the technique works for all hair types! In case anyone was thinking I am a ‘hairist’!

This image is royalty free and can be downloaded here.

A rough cutout

First of all we are going to perform a rough cutout of the model. We need to create a new transparent layer in Photoshop and set it beneath our image layer. As I mentioned above, there are many techniques of cropping and cutting out images, in this tutorial I will be using the Polygonal Lasso Tool (L) I will not be masking any layers as we will be directly editing the cutout.

So start off by cutting out the body, neck and lower face of the model up to the bottom of the hairline just above the ear.

You may notice the image used is a low resolution image. Again this is only for the purposes of this tutorial, and in fact the technique works much better in higher resolutions.

At this stage we are still rough cutting. For the next step we are going to perform the first trim around the models head. This can be as rough as you like but be sure not to cut to deep into the shape of the head and try to imagine and follow a rough line where you would imagine the hair spikes to be. I have deliberately cut to deep in the image below to show how easily this technique can rectify a mistake.

The close up view shows how accurate/inaccurate you need to be.

The finished rough cut

As you can see below, we are now at a stage where the model is fully cut out with a rough edge around the hairline.

The ‘Smudge’ technique

OK we are now ready to give this guy a better haircut! This whole technique works around the ‘Smudge’ Tool (R). Now, for this particular image I have chosen the following settings for my smudge tool.

If you select the smudge tool and then edit the Brush Preset. You need to use a standard brush head, we will manually set the size to 1px and set the hardness to 80%. Close the Brush Preset and set the strength of the smudge tool to 80%. As I said, these setting will work nicely for this image, but for a higher resolution image you may want to play around with the brush sizes and strengths.

It is always good to keep the brush tool pretty hard or the hair goes to wispy. Last setting to check before we continue is to make sure the ‘Sample all layers‘ box is unchecked. This will smudge all layers and will mess up your background image if you were editing on top of one.

Lets start smudging!

The first thing I would say before we start is to always try to follow the current direction of the hair, don’t be worried to throw in some curves and cross overs as no hair is perfect! In fact the more perfect you make this the less realistic it will be. And always try to work outwards away from the face unless you are doing tidy up strokes or working with long hair.

It doesn’t really matter where you start on the hair as it will all flow into itself as you move around.I will try to show my motions through this one section of the hair. The blue lines show pulls or drags away from the face, the red lines show corrections or drags into the face. The correction lines are for removing any stray wispy/blurry sections. I call it ‘cutting in‘.

As you can see I have worked with the image and the natural hair line to extend and enhance the edging. The deeper the pull the further forward the hair should be as you will be overlapping previous smudges. I would advise working from back to font by editing the outside hair first and working inwards.

Continue doing this around the full circumference of the hairline.

And that is it! One technique to create a nicely cut out head of hair. You can now look to place your image on any background and any colour varient you like. Below are some examples…

Grungy Background

Lively Background

Add some fun highlights!

Hope you like the tutorial! Give it a go, its a really easy technique and you can get some very nice results.

I was asked:

1: Where did you get the inspiration for your site’s style?
2: How do you test your sites for accessibility?
3: What tools or techniques do you use to make sure your sites get built to good standards?

I answered very thoroughly as there was a chance I would not get featured.

Anyway I was told if I get in I would get a PDF version of the mag and a copy sent through the post. So I waited…a month went bye and the new copy of .Net came out (Issue 182) I stood in the shop, searching through this magazine for what must have been like 30 minutes…I nearly got kicked out! I looked under every section, searching for a line, a word, even a mention…But nothing. I still bought it and had my wife run through it a couple of times to check I hadn’t missed it, but no, I didn’t get my feature…Gutted.

Anyway, a few days ago I got a text from a friend saying…

Hey, saw your feature in .Net magazine, am very jealous!

It was in Issue 183! Woohoo! Straight out to the shops to buy it, and there I am! My very own quarter page spread!

“I even have a quote!”

Now for all you big successful agencies this is not such a big thing, but it is my first feature and I am ecstatic!

I am in along side some very special websites which are certainly worth a mention: www.hype.com.br / www.jasmax.co.nz / niketo.ru so I am chuffed to bits!

Thank you .Net! If anyone fancies taking a look it’s in issue 183 pg61 in the gallery section. (You don’t have to buy it but don’t tell them that!)

VOTE FOR ME HERE! »

Yup it has now gone to public vote, so if you like my site and think it deserves a prize, please spend a couple of seconds and throw me a vote! Thats if you think its the nicest blog in the list!

Voting Closes on December 1st 2008 and there is a lot of very popular blogs in the list. So all votes will count!

Thank you all for your support and wish me luck!