Blog Archives

All Archived Posts in photoshop



Logo Tutorial: Add subtle Depth of Field to your portfolio images

This is a follow up to my previous logo design tutorial 'Logo Tutorial: A logo seemingly photographed on textured paper' in which I showed you how to make your portfolio images.

It's not a complicated procedure and only has a few steps, but it's a subtle finishing touch for some of the images you may show to your clients. As with anything to do with Photoshop there are often multiple ways to achieve similar results and often gazillions fine tune options to play with. So what I show you is just the initial basic process where you can play around with the finer details.

Be realistic

Having some knowledge of photography and lens DOF (depth of field) is certainly useful here. If you have played with shallow depth of field in your photography you will know what I mean, especially portraiture and even macro photography. But this isn't a photography tutorial. :)

The final result will depend on the extent of perspective you have applied to your images, the angle and also the final image resolution. These factors determine the values you need to apply.

It's easy to apply an effect that looks a little too OTT, like the example below. Doesn't look 'bad', but I guess depends on what rocks your boat.

Side by side comparison. The left image is quite subtle whereas the right looks pretty dramatic.

Ultimately comes down to the angle of perspective you have used and how far in the distance the logo seems to go, this will determine how much DOF you should use.

Tip

A good way to see what fits in with a real camera DOF effect is to use a camera,  preferably with a SLR Print a few logos off, take some photos, experiment with the DOF, the angle at which you are taking the photo and see what works.

Let's crack on with the important stuff. Make sure you have a suitable image to work from, ideally one that used the style of logo created from my previous tutorial 'Logo Tutorial: A logo seemingly photographed on textured paper'.

The only difference you will see is that I work from a logo on a separate layer to the texture, whereas the tutorial combines the logo and texture. No problem, it just reduces the steps you need to do, whereas I have to duplicate the DOF for both the logo and texture layer. But I find I get a bit more flexibility with these separate layers

Step One

On your logo layer, add a 'Vector Mask' using the 'Add vector mask' in the layers palette (the icon where the yellow tab is shown), this creates a white 2nd thumbnail next to you logo highlighted in by the blue layer at the top.

Step Two

We will first draw the gradient on the 'vector mask', this image shows you where to start drawing it from. All we use is a default black/white gradient. I find it's quite important where the gradient starts, so I  start it from the beginning of the logo image, as shown by the red line and follow the angle of the logo and off the page.

Ensure you select the 'Vector Mask' thumbnail to the right of the logo layer, select the Gradient option in the floating toolbar. Drawing the gradient on the 'Vector Mask' creates the thumbnail image above.

Step Three

Holding down the 'Apple/Cmd' key, press and select the 'Vector Mask' thumbnail you created the gradient on, this turns the 'white\grey' areas of the gradient into a selection, as shown by the 'marching ants' above. This creates the area that will be affected by the DOF blur we will be adding shortly.

Although the selection looks like a hard line, it's not. Turning the gradient into a selection has similar effect to a wide area feather in that any thing you apply to this selection will fade rather than end abrubtly.

You need this selection active for Step Four.

Step Four

To create the DOF blur, we will use a blur filter called 'Lens Blur'. In the main menu go to 'Filter' then select 'Lens Blur' and you get the window you see above. There are a host of variables here to change, but for our project, all we will playing with is the 'Radius' value.

As you can see I have opted for a lowish value of 21, if you increase this to say 40, you will get the more 'ballsy' the example I showed you above. The amount of 'Lens Blur' also changes depending on the resolution of your image, so the value may need adjusting depending on your image resolution.

So this is a great time to play around with the values and see what works best for you.

Step Five

After applying the 'Lens Blur' we end up with this, a combination of the blur and the original gradient.

If you are working with the logo on a different layer to the texture as I do, then you need to apply the 'Lens Blur' to the texture as well. So keeping the 'marching ants' selection active, select your texture layer and reapply the 'Lens Blur'.

If you have been working with the logo combined with the texture, then we can delete the 'Layer Mask', so make sure you select the 'Layer Mask' to the right of the gradient layer and delete it. If the logo disappears as well this means you need to 'select all' on the 'Layer Mask' first before deleting.

We end up with this.

Pretty much job done.

Just to finish things off I'm going to play with the settings for the logo transparency layers as we did in the previous tutorial. A few tweaks and I have managed to get a slight 'ink shine' to the logomark. Subtle, but a nice finishing touch.

Nice. ;0)




PS Logo

Logo Design Tutorial: A Logo Printed on Textured Paper

More than a few readers have asked me to create a Logo Design Tutorial showing how I achieve the above effect, the logo 'seemingly' printed on textured paper. Time to sharpen up your graphic design skills!

What we are trying to do is present your logo designs to potential clients in a way that shows what the logo 'could' look like printed on paper. It helps present your work in a more natural way and ultimately allows the client to see the logo design in context.

The best way would be to print out your logos on actual paper and photograph them, so this method I show you below is a quicker alternative. But photographing the real deal is the perfectionists way.

This style seen above is only used in some of my external portfolios and also within my logo process posts. Right now my portfolio is based on a solid background. However, I am in the process of updating all my portfolio images to the style above.

Colour or Mono?

I refrain from using coloured backgrounds in my portfolios. I like to show the real naked form of my logo designs rather than a sea of different colours. Where possible I also use a mono version of the actual logo, only a few of them are coloured.

I see some portfolios where each logo has a totally different colour background and if can look quite overwhelming. There isn't a wrong or right way but personally I prefer to focus on the core design without noise and distractions. With each logo having different coloured fancy backgrounds, each logo is fighting for attention and the end result is that you can end up not really seeing 'the logo'.

It's easy to get caught up in the 'presentation' of logos, thinking that the more graduations, the more solid coloured background colours the better. This may be so for individual logo designs, but when you are talking about a number of designs on page, like my portfolio, it just becomes too overwhelming. Keeping the logo on a neutral background helps ensure each logo is given the same opportunity to shine for the right reason.

But it's a personal preference. I do show colour version of my logos in my various logo process posts, but for the purpose of the main portfolio, all backgrounds are mono.

Find a Textured Logo Background

The first task is to source a suitable background. There are a number of solutions. You could create your own, find some actual paper or card you like and either photograph or scan it in, or find a 'free' digital texture online. I found a texture on-line, something similar to this.

There are plenty of places to download free textures, so take a good look and find some you like.

Remember to find an example that is large enough in dimensions and in resolution. Finding a texture that is 5cm x 2cm that is 72dpi will not be much use to you.

It's worth considering off line uses as well. You may spend all this time focusing on an optimised size for your website, but you may want to print these off later down the line or create a high resolution PDF, so ensure you have plenty or size and resolution to play with.

The minimum resolution for a digital image for commercial quality printing is 300dpi.

My main texture file is around 1000px wide and weighs in at a respectable 300dpi. This is more than big enough for all my online portfolio's, the biggest displayed size is around 820px. If you go to my portfolio and click on any of the thumbnails, you'll get a enlarged image. So this is the biggest I generally work to. (I realise the plug-in doesn't quite work perfectly)

Customise your texture

The next step comes down to personal preference. If you find a free texture online, then it's wise to change the colouring of it so it's more unique to you. The texture I found was this light coffee colour, so I desaturated it and increased the contrast a little to make it look bright and white.

The first band is the original, the middle is after I have applied a Photoshop 'Desaturate'. Desaturate simply removes the hue/colour and effectively turns it into a greyscale looking image. A basic 'Desaturate' tends to leave images looking rather flat.

To give it a little zest, I played with Photoshop 'Levels' where I just bumped up the 'Highlight' area.

Template

Keep all your logo portfolio images consistent in size. To help with this I have one master Photoshop texture template file. This file consists of my texture on the 'background' layer and I add my logo designs to new layers.

So right now we have our custom colour textured background. Hopefully at this point your image is still around 300dpi and of a adequate size, mine hover around 2000px in width.

Always keep an eye on your master image file size and resolution. It's all to easy to loose track and make changes that affect the overall quality of the image.

Adding the logo

We could plonk a logo on this now and that would look great. But it looks just like that, it's plonked on. Doesn't look part of the background. So we need to look at some ways to make it look more like it's actually printed on the texture.

As I mentioned at the start, if you are looking for realism, it's probably a better option to print out your designs onto some nice paper, then photograph it.

Point to note. When choosing your texture, make sure you find a texture that looks like it could be 'real paper', otherwise it sort of defeats the purpose of this exercise.

Let the background shine through

So to make the logo look a bit more like it's actually printed on some textured paper, we need to allow some of this texture to shine through. That's what would happen if you printed the logo on actual textured paper.

As with anything in Photoshop, there are a number of ways to achieve a particular  need. The method I show you is the quickest and easiest, but you could play around and spend time making it more realistic.

First I set the logo layer to 'Color Burn', this creates this faded look. But importantly it lays the colour down over the texture and gives the impression that the black ink is soaked into the textured lumps.

As this first layer is far too light, I simply duplicate this layer but adjust the opacity to around 50% which boosts the overall ink coverage.

You can use 'Liner Burn' as well, I sometimes use this for coloured logos. It's a good idea to play around with these layer effects to get the desired effect as they do work differently depending on the colour and lightness of the design.

So now we have a logo that looks more realistic as you can see the texture behind the 'ink'. So now we need to add some 'perspective'.

Adding perspective

As usual, there are more than one way to achieve similar effects so this is the quickest and easiest way I know to fake perspective. If you have a number of images to do this with, then this is probably the most efficient method.

Select both your logo and texture layer by shift clicking them. With both layers highlighted we will be applying 'Edit - Transform - Distort'.

It's worth noting that you need to allow for the canvas area to reduce in size due to the 'Distort' effect, so you may want to make the logo a little smaller within the middle of the texture. The proportions in the image above should do you fine.

Once you select 'Distort' you end up with 8 draggable corners as below. In the example below I have dragged the top right down and to the left, dragged the bottom right up and left and dragged the bottom left right and top.

This gives you an idea on how you can achieve this fake perspective. There are many variations to play with, so it comes down to you how you want it to look. I would sit on the side of subtle rather than too outrageous. The idea is to make the perspective look as realisic as possible, like you are looking at a sheet of paper from a certain angle with your camera.

The reality is however is hard to pin down, 'realistic' is kinda subjective in this case. If you were photographing a printed sheet, the depth of perspective could radically change depending on the lens. If you used a wide angle, then you are more likely to achieve more dramatic shots with more extreme perspective.

The example below is based on the style I use for my portfolio pieces.

You can see that the bottom left sweeps towards you whilst the top right seems to bend off into the distance, almost like there is a curve in the sheet. The idea was to draw the eye in and to allow the eye to follow the perspective all the way to the top right.

Fiddle with this until you are happy with the overall look. Once you have all 8 handles in place then take a screenshot so you can replicate this on other logos.

Once you have the required perspective, you can apply the transformation then 'crop' the image appropriately as I have done above.

Subtle gradient

My final step is to add a subtle gradient on a new layer, starting around the middle and getting darker the further top right it goes.

With the layer gradient in place I then apply 'Color Burn' to that layer. This will burn the gradient into the image below and here you can make final adjustments to the gradients overall opacity, tweaking it until you get the desired look.

Something like this.

Job done.




Profilactic LogoOne more chicklet to add to my collection. Obviously it is for the Lifestreaming Social Aggregator Service, Profilactic, which I have been using extensively recently and highly recommend it as a way to manage all your feeds, social networking messages and service profiles.

This image is a bit different to my usual, as it had to be a bit longer due to the extra wording. It is 140px wide instead of the usual 80px.

As used by Profilactic.com on their Mash-Up Badges.

As my general warning for these, please just don't try and enlarge them, they will look damn awful at any magnification due to the small Chicklet size of 140px by 15px.

Smashing.

Ofcourse you are free to use these however you wish. It would be appreciated though if you could find somehow to link to this page or at least my site. Nothing obtrusive, just maybe a link in your Blogroll or something. That would be nice.