There are many sites around at the moment with this effect being used as a background or as part of the design. It is a really great alternative to simple noise effects or gradients and adds an extra dimension to your designs, really quickly and easily, and the best thing about it, it is repeatable, scalable and very easy to tweak.

So jumping straight in, I find even if I am working with an open document, it is much easier to create this effect in a separate document and then copy it across rather than creating it straight in to my layout, simply because it is quicker, and you have to finally use a step and repeat so it is easier to get a nice square crop on the texture.

Step 1 – Create your workspace

In this example I am creating the texture at 500px x 500px and aiming to crop around 400px square for a good amount of variation on the texture. You could go smaller to keep the file size down, but I find this adds more variation to the texture itself.

Step 2 – Create a layer and add some noise

So now we simply create a new layer and fill it with a white. We then want to add some noise, so we go to Filter > Noise > Add Noise. We want to use 100% noise to make the texture really grainy, and make sure you have Monochromatic checked. Choosing either Uniform or Gaussian distribution makes very little difference for our desired effect.

Step 3 – Duplicate and blur

Next step we need to duplicate the layer we have just added noise to, do this by right clicking on the layer and selecting ‘Duplicate Layer‘.

Now with your top layer selected, we want to add a motion blur. Do this by selecting Filter > Blur > Motion Blur. For this effect we are going to blur at right angles, 90 degrees vertically and horizontally, but the effect works just as well at 45 degrees. So we want to set our first motion blur to ‘Angle 0‘ and distance of 35.

Next we hide the current layer we are working on and select the layer we first created. We now want to repeat the process but this time set the motion blur to ‘Angle 90‘ or ‘Angle -90‘

Step 4 – Add layer effects and cropping

Now the final step we want to combine the effects to make the canvas. To do this we simply make our top layer visible again, and set the display settings of both layers to ‘Color Burn‘. This should leave you with a white screen.

We now need to tweak the color settings to create our desired final effect. We are going for quite a subtle, oldish feel to this canvas, so we are going to set the background of the canvas to be the color #bdb79b.

Finally before cropping we want to play around with the opacity of our layers, in this example I have set both layers to be 20% opacity but you can of course make this is strong or faint as you like.

Step 5 – Cropping

We now need to combine our layers and crop the canvas. There are two ways to do this, and it depends on how strong your canvas effect is to how you tackle it. If your canvas is very very subtle, you can get away with simply taking a swatch of around 200px x 200px from the center of your canvas and cropping this way. But I like to make a pure seamless background.

So to do this, we first of all flatten our layers by selecting all the active layers and pressing ‘Ctrl E‘ for Windows or ‘Cmd E‘ for Mac. We then using our Marquee tool, draw out a 200px x 200px segment of our canvas.

Then instead of cropping, we copy this and paste it over the top of our other layers. We then set our background layer to invisible so you are only left with your 200px x 200px swatch on the screen.

Next we duplicate the layer, select our transform tool ‘Ctrl T‘ for Windows or ‘Cmd T‘ for Mac, and we want to flip the duplicate swatch horizontally. There are many ways of doing this but we are simply going to set our horizontal scale to -100%. This then flips the swatch. All we do now is simply align this swatch to the right or left of the original. And that gives us a seamless repeating pattern left to right.

Now we combine these to layers to make one rectangular shape swatch.

Repeat the above steps but this time we want to set the vertical scale to -100%. So after completing these steps you should be left with a 400px x 400px repeating canvas texture.

We can then crop it and save it for web. As mentioned earlier, this is quite a large texture, but you should still be able to save this image at quite a low file size due to the minimal amount of colors used.

So that is it! Creating your very own canvas effect in Photoshop. You can also try messing around with the settings, creating different colors, depths of texture and angles to make the effect more diverse.

New sites are popping up all over using very simple techniques to create very effective, modern looking designs. And why are these techniques proving so successful? Well one of the biggest reasons is they are used so heavily nowadays on designs for Apple products, namely iPad and iPhone.

That’s right, Noise, Grooves and Text Shadows are such a winning combination because they highlight depth, and pixel perfect accuracy, simply because each of them use a single pixel width or height to create the desired effect, and you can’t get much more accurate than that…Well, unless you are designing for iPhone 4, in which case you have to use a bit of maths to calculate how wide a pixel actually is on screen, as the new screens use a higher resolution than that of superman’s vision!

So for this tutorial we will be sticking with the standard 72DPI.

These techniques have become bread and butter to the every day UI designer and will be commonly seen on a load of websites and applications, possibly to many you say? Well maybe, but being able to perfect these simple steps and techniques means when the right project comes along, you to can easily implement a modern look to your site designs.

So, that’s the intro out the way! Now I thought I would cover off each of the above for mentioned items and display how they can be used and combined.

The Desired Outcome.

Basic setup, open up Photoshop and create a blank image, any size will do for playing around with this, I used 500px x 250px. Throw in a gradient, here I used (#848ea2 top and #5b687f bottom) and we are ready to go!

Technique 1 – Noise

Easy-peasy this one, just don’t over do it! Noise can be produced very simply in Photoshop by navigating to ‘Filter’ > ‘Noise’ > ‘Add Noise’

For this example I set the noise to 1%, Distribution to Gaussian and made the whole thing monochrome to keep away from the multicolours!

Technique 2 – Grooves

Two ways to create grooves, either with images, or with borders in CSS, depending on where you are using them and how often they are to be repeated. I would suggest using a background image for main header breaks or title breaks, and borders for items such as list breaks or repeating items.

a) Create a Groove in HTML

This is best used for repeating elements stacked either next to or on top of each other, and can only really be used with more than 2 items or you will lose the effect. For this, all we need to do is add a border-top and border-bottom to our elements, one light and one dark to create the groove effect.

So, using the colours we are using in this example, your code would look something like this:


ul{
border-top: #3d495f 1px solid;
border-bottom: #8895ac 1px solid;
}
ul li{
border-top: #8895ac 1px solid;
border-bottom: #3d495f 1px solid;
}
 


You will notice that the colours have been reversed from the List to the List item, this is so we can apply the grooved look to the first and last element. You must also make sure you have no margin on your list items and no margin or padding on your list. That easy!

b) Create Grooves with Background Images

This is still a light weight solution and very simple to create, better suited for individual items and one which I would suggest using for this example.

For our horizontal groove we need to create a 1px wide by 2px high image, which can be saved as a 2 colour gif to keep the weight to a minimum.

Selecting your shades here are quite important as they need to be balanced. If your groove uses to heavy highlight and not enough low-light, or visa verse, you can easily loose the effect of the groove and your line will look more like a 1.5 pixel badly aliased cutout.

For the visual we simply stretch this 1px wide image to the width of our canvas like so.

When zoomed out you will see our groove stands out nicely and offers a decent amount of depth. Both the highs and lows can be picked out nicely. For this example I used the colours: #8895ac for the highlight (bottom) and #3d495f for the low light (top).

Technique 3 – Text Shadow

Text shadows are being brought in through CSS3, and even though not fully supported over all browsers, this CSS3 technique alters the look of the element so subtly that when viewed in none supported browsers, the fallback and degradation effect is pretty minimal, it is worth the risk of using it.

If you are concerned about your CSS being valid, which you have every right to,  then you can always create a secondary CSS file for your CSS3 elements.

So we choose a font for our header and copy, for this we are using a web safe font ‘Times New Roman’ but with the range of font replacement techniques available this could easily be applied to a none web safe font also.

We will set our header font size to 70px and center the text, and our paragraph will be set to 18px with a line height of 22px. Both will have a colour of #0f1727 which is quite dark but, we need to keep our contrast up as the same applies with colours on text shadows as it does when creating the groove, to little difference and you will not notice the effect, to much and it will become unreadable, as demonstrated below.

So the left item does not include any text shadow, the center image has text shadow of white which is to vivid, and the image on the right has the finalised colour which was chosen as #8895ac.

So applying all these techniques together we end up with a very nice, modern looking snapshot of what a full web page could look like.

All I would say is do not over use these techniques, as much as they are popular at the moment, they do become quite repetitive and should only really be used on extremely relevant projects, not just for the sake of using them.

So that’s a wrap! Hope you enjoyed this little tutorial, go now and make some Noise, get Groovy and be sure you leave a Shadow!

This technique of image replacement can be found on a range of websites including the Apple website and Web Designer Wall, and it has a range of benefits, mainly loading time and reduction of file size.

Using the image replacement technique is very handy when each link is unique. If you notice on the Hull Digital website, each link on the navigation has its own unique background on rollover. It can be used if each link has the same interactive states but I would advice using CSS more in this case. So here is a short tutorial on how to create an accessible based navigation similar to the Hull Digital website.

All the files used in this tutorial can be found here: Download
You can view the final navigation here: Final Navigation Demo

1. Start with your sprite.

First of the whole navigation is drawn from 1 single image. This reduces the load time required and also avoids any delay on mouse over by actually loading in a new separate image.

Here is what your image would look like.

So once this image has been uploaded we need to set up the XHTML and to do this we use a standard un-ordered list with an ID.

2. The Markup

<ul id="global-nav" >
<li><a href="./">Home</a></li>
<li><a href="./about">About</a></li>
<li><a href="./contact">Contact</a></li>
</ul>

We must then give each list item an ID. This is not ideal, especially not for an ever expanding CMS driven site. But I would not recommend this technique on a dynamic or expanding menu bar anyway. This technique is ideal for smaller static sites, or menus that will not change.

So, our markup now looks something like this:

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home</a></li>
<li><a href="./about" id="gn-about" >About</a></li>
<li><a href="./contact" id="gn-contact" >Contact</a></li>
</ul>

Now we have our markup we need to figure out how we are going to insert our image. There are many different ways of doing this. The easiest is to display each element as a block element, add the image as a background image and nudge the text out of the way using either padding or a negative text-indent through CSS. This works and works well, however it is not particularly accessible.

You see, if a user has their images switched off on their browser, there will be no text to display, therefore making the navigation inaccessible.

So to counter this we must play around with an empty span which we embed within the <a href> element. Again, empty code tags not great! But to achieve the desired effect it is really the best and most effective way before looking at CSS3.

So our markup ends up looking like this.

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home<span></span></a></li>
<li><a href="./about" id="gn-about" >About<span></span></a></li>
<li><a href="./contact" id="gn-contact" >Contact<span></span></a></li>
</ul>

And that’s it! Pretty clean huh? Well obviously other than the empty span!

Anyway, lets move on to styling this bad boy.

3. The Style.

Ok, now we have our markup and our image, all we have to do is style it. We firstly need to make sure all the links sit in-line rather than top to bottom, we then need to make sure they are set as block elements so we can actually see the background image, and finally we need to sort out positioning so we can play around with our span.

So, for the initial styling. We need to add a background to the main page to allow the images to blend in, I have chosen a simple noise texture for this example. All image files can be found in the download or in use on the demo page.

body{
background:url('images/BG-main.jpg');
}

We then set up the un-ordered list with ID ‘global-nav’ with a set height and width. This allows us to clear any content beneath as we will be using floats on our blocked list objects.

#global-nav{
display:block;
height:33px;
list-style:none;
}

We then need to look at the standard list item. We won’t look at styling sizes and particulars yet as this will be done with the specific IDs. We can also within this single tag add some global styling to the links and the spans as they will all warrant the same style.

#global-nav li, #global-nav li a, #global-nav li a span{
float:left;
height:33px;
}

We now need to make sure our hyperlink has a relative position. We do this because we are going to position our span absolutely over our hyperlink, effectively masking the text behind with the image.

#global-nav li a{
position:relative;
text-align:center;
}

Now we position the span. As we have added a relative position to the surrounding hyperlink and set specific sizes, add an absolutely positioned element within this will be simple and cross browser compatible. We also at this stage include our sprite which will apply the background image to each span on a single load.

#global-nav li a span{
position:absolute;
top:0;
left:0;
background:url('images/BG-global-nav.jpg') no-repeat left top;
}

Now as each of our hyperlinks are different, they all need individually styled elements applied to them. So for this next step we apply two styles, one to the hyperlink itself and one to the span.

#global-nav li a#gn-home, #global-nav li a#gn-home span{
width:102px;
}
#global-nav li a#gn-about, #global-nav li a#gn-about span{
width:109px;
}
#global-nav li a#gn-contact, #global-nav li a#gn-contact span{
width:135px;
}

As you can see from this code we have applied a width to each span and hyperlink to define the exact widths for each item.

So if you check your build at the moment, you should see everything taking shape, but each link will have the ‘Home’ image visible. This is because we need to do our final step which is to position each item according to the size of the link. This is where a bit of simple maths comes in!

Take the image below as a guide for your sizes. The space around the sprite has been increased so the guides can be visible.

Once you have worked out the widths of your navigation elements, it is then a simple case of applying a minus value each time you add a link. Within the style this looks like the following:

#global-nav li a#gn-home span{
background-position:left top;
}
#global-nav li a#gn-about span{
background-position:-102px top;
}
#global-nav li a#gn-contact span{
background-position:-211px top;
}

So as you can see, the first link or the ‘home’ link image is positioned ‘left’ ‘top’ or ’0 0′. The next link along is then nudged to the left by the exact amount as the first link is wide, in this case 102px.

The next figure is then created by adding the first two widths together, in this case 102px + 109px = 211px. For longer navigation bars you would simply continue this trend right the way through to however many links you want on the page.

So re-checking the example you should see that each link now has the correct ‘inactive’ state applied. Now we simply need to add a hover state, and this again is really simple. We need to add the hover state to the ‘href’ rather than the ‘span’ so it will be compatible with the good old crummy IE6!

So your final addition to your CSS would look like this:
#global-nav li a#gn-home:hover span{
background-position:left bottom;
}
#global-nav li a#gn-about:hover span{
background-position:-102px bottom;
}
#global-nav li a#gn-contact:hover span{
background-position:-211px bottom;
}

All we have done here is change the value ‘top’ to the value ‘bottom’ meaning the hover over state looks visible when the user hovers over the link.

The Dreaded IE6!

There is one down side to this swift little technique and that is IE6 will not support the hover of any html element other than a link, so our neat little CSS technique just won’t cut it and you will need to pull in a little Javascript. Luckily there is a script at hand, and it is known as ‘Whatever:hover’. It can be downloaded here and it has simple installation instructions.

So that’s it! Give it a go yourself, making an accessible image based website navigation is simple! Make sure to view the fully working demo and download the files!

Don’t get me wrong, If I am inspired and have a great idea in mind, I don’t wait to write a functional spec before I visualise it! But before I show it to a client I always back track and make sure what I have visualised can actually be built!

With all these steps involved we need to have some way of simplifying and speeding up the process. So here are some general tips and tricks to help take away some of the leg work in a web project.

Milestones & Sign off

Setting milestones for a project is a good way of managing workload and time frames. It can be done as simply as adding dates into your iCal, or using some project management software like Basecamp which is ideal for this sort of thing. In a general web project I work to some specific milestones, these can be summarized and ordered into the following:

• Information Architecture Phase

• • Client Personal Persona – Highlighting an overview of your client is very important. Finding out their likes, dislikes, trends and expectations will make your life much easier in the long run.
  • Website Schematic – (See Schematic & Key overview below)
  • Wireframes – (See Wireframes overview below)
  • Functional Spec – This can become a pretty hefty document, but should be produced and detailed for every unique page on a site. It should highlight what content and elements are to be on a page, and more importantly ‘how’ you intend elements to work. If there is an interactive section on a page, this document should cover either a visual or descriptive work flow and goals for the element in question.
  • Sketch work – It wont harm to brainstorm and sketch out your ideas at this stage.
  • Client Sign off of all above

• Design Phase

• • Design Stylesheet – This can also be referred to as an enhanced wireframe. I use it to display snippets of ideas on how I intend an element to work, and also add some colour to different sections, possibly even a patch of texture here and there. This sometimes helps clients visualise the final product and make any final amends before you waste a lot of time changing your final designs.
  • Layered PSDs – (See PSD set up below)
  • client Sign off of all above

• Build Stage

• • Slicing – Cut out and create all your textures, background images and interactive elements first, use a well formatted naming structure. I generally use BTN-name.jpg for buttons, BG-name.jpg for Backgrounds, ICON-name.jpg for Icons, IMG-name.jpg for inline images and LOGO-name.jpg for logos. This will help when searching for images in the build stage.
  • CSS – (See Global CSS settings below)
  • HTML/PHP - Writing from scratch and after every page written check it against web standards
  • Client Sign off all above

• Testing

• • Cross Browser Checks – Try to test on as many browsers as possible, and on different Operating Systems. I test on both Mac and PC, generally on the following browsers: IE 6-8, Firefox 2-3, Safari, Chrome and Opera
  • Accessibility – If you haven’t got it installed, Web Developer toolbar for Firefox is an absolute must and will totally speed up and improve your testing processes.
  • Client Sign off all above elements before hosting

Site Schematics & Keys

Site schematics are a great way to improve you and your clients overview of a project and cover off any late changes or additions to a site build. I use Illustrator to create my Schematics, but there’s some great software out there like Omnigraffle which does a lot of the hard work for you. Tip to speed the process up if doing it manually is to create a key of elements which you can use over and over rather than creating everything from scratch.

Wireframe Elements

Wireframes are so important in the creation of websites. There is nothing worse than spending hours creating a PSD design which shows a three column layout, a large header and three paragraphs of text nicely fitted around 3 images aligned to the left, then the client decides they want the ‘exact’ opposite of what you have designed! Following the above processes should narrow down these sorts of errors, but it generally takes about 30 mins – 1 hour to create a wireframe, where as it can take 3-4 hours to create a full PSD, so even though you are adding time on, in the long run you will save time on error correction. Again, I do my wireframes in Illustrator, but you can use software like Giffy to do this.

Tip here would be similar to the Schematic tip, if you create an archive of elements such as blocks, image placers and link blocks, then it will speed up your wireframe creation.

PSD Set-up & Layers

I would highly recommend this little tip, if you have a PSD template already set out it will save you time, maybe only 5 minutes, but it all adds up! My template is a blank PSD, 1600px wide x 1200px high. It has no background set, and has all my layers already set for me. Setting up your PSDs with sensible names layers will also help when slicing your design up as you can block out say the whole Footer area and Header area. The PSD also has the following enabled and ready:

Grid Layout

I have a grid set out using guides. They are set centered on the document, one centre line, then some boundary lines to highlight 1024px and 1280px widths (Common screen widths), and 768px and 610px high to highlight the fold and average browser view. I also have a line set for 1000px wide which gives me a max width on a 1024px x 768px browser when there is a scroll bar present. (Don’t forget the scroll bar!) And also a width marker for 960px wide which is usually what I design to. 960px is a nice width as it allows for a decent border either side of your content.

Snap to Guides and Smart Guides

Having this enabled in Photoshop is a great way to get exact size layouts quickly and easily. It can be enabled in Photoshop by going to View > Show > Guides

I have uploaded the PSD template I use in most of my designs, it can be downloaded here.

Global CSS settings

Another time saver is to have a master CSS document set up with all the basic Global reset settings already written. The Global reset was introduced by Eric Meyer, his version can be found here: Eric Meyers Global CSS reset This is a pretty intense reset and is not always needed for most designs, but a simple reset can be produced by doing something like:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, em,
h1, h2, h3, h4, h5, h6, strong, th {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
a {
text-decoration: none;
}
Have a play around with your own reset and then save it to re-use in the future.

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.

Step 1 – Setting the Stage

Open up a new document in Photoshop, in this example I am using a 500pxx500px working area.

Create two new layers, first called water, next called ripple. Then select your Gradient tool or (G) and choose two nice shades of blue. Here I have used #00589d and #409ed3.

NOTE: The further apart your fade colours are, the more harsh your ripple will look.

Now we select the first layer, ‘water‘ and stretch a fade straight up from top to bottom. Darker at the bottom, lighter towards the top.

You then select your second layer ‘ripple’ and reverse the process, Dark at the top, light at the bottom.

See example image below.

Step 2 – The Ripple

In this stage we are going to create the ripple, and this can be done in one simple step in Photoshop.

Make sure you have the ‘ripple‘ layer selected, then go to Filter > Distort > Zig Zag

This will open the following box.

Make sure under ‘Style‘, Pond ripples are selected. You can then tweak the Amount and the Ridges to whatever suits your project, here I have set Amount to 80 and Ridges to 5. Now simply select OK.

This will give you a full screen ripple on your stage. Now we need to adjust the height of the layer to add perspective. Make sure you are still on the ‘ripple’ layer and select your move tool (V)

NOTE: Select ‘Show Transform Controls’ at the top of your tool bar.

Now we drag the layer vertically squashing it to around 30% of its original height. This can also be set in the top toolbar.

Step 3 – Cleaning up

Now we have our ripple and the correct angle to view on the stage we need to do some manual cleaning up. You can play around with layer effects here either by lightening or darkening the layer, I have chosen to keep it as is and perform a feathered elliptical marquee to crop off any excess layer fade. To do this select your marquee tool and make sure you have feather set, in my example it is set to 10px.

We now draw an ellipse around the area we want to crop. We then inverse the selection (Shift + Ctrl + I) and cut or mask the excess.

After your feathered mask or crop you may find you need to tidy the image up further depending on how much you cropped off, if so this can be done simple using a soft Eraser tool.

And there we have it, a very simple pond ripple. No it is not photographic! But it can be improved upon, or used in a multitude of areas. See below a couple of examples.

The Floating Box

The Bobbing Puffin

Heh, couldn’t resist!

Websites such as Apple, Vodafone and Pepsi are all using the effect somewhere on their sites. There are even scripts and sites out there to create the effect for you. http://h-master.net/web2.0/ for example, allows you to enter a piece of text, and then will automatically generate a web 2.0 reflect effect on the imputted text… Clever huh! but still, it is applied on a 2D object.

But what about 3D objects?

What these auto generators do not take in to consideration is a 3d object. They will still generate the effect but it will look incorrect.

Image to show Incorrect example of Web 2.0 Reflection

What it will do is take the lowest point of the image and create the reflection from there.

So even though these effects are extremely clever, they do have their limits. What I am going to do is look at a couple of simple ways to create a reflection effect, which can be created in photoshop or any vector editor, which will reflect the 3D object correctly.

The Skew method

In this method we take a duplicate of the original image and skew it on a reverse mirrored angle to the original. Taking into account the 3D plane of the original object.

Step 1: Duplicating your object

The first step is to duplicate your 3D object or group. Right Click or Control Click on the layer or group and select ‘Duplicate Layer’ or ‘Duplicate Group’, call this new layer ‘Reflection’.

Please note: if you have duplicated a group rather than a layer, you will need to merge the group before we move on. This is done by Right Clicking or Control Clicking on the ‘Reflection Group’ and selecting ‘Merge Group’

Step 2: Mirror the layer

The next step is to mirror the new layer. Make sure you have the ‘Reflection’ layer selected, and select the ‘Move Tool’ or press ‘V’ Now click on one of the top Transform nodes surounding the object, and drag it vertically down until the image reverses itself.

Step 3: The Skew

This is where we correct the simple 2D reflection by skewing the reflection to correctly mirror the original object.

We need to decipher where the lowest point of the image is and split the reflection at this point. On the example used the lowest point ‘Touching Point’ is the bottom corner of the house.

We firstly with our Rectangular Marquee Tool or ‘M’ select all the reflected object that appears to the left of this point. We then go to Edit > Transform > Skew. This will bring up some transform nodes around our selection. We then click and drag the left center node upwards. This will align the reflection up with the base of the original image.

Once happy with the angle, we press Enter to complete the skew. This process is the repeated with the other side of the reflection.

Step: 4 Touch ups

After we have successfully skewed the reflection so that it sits nicely underneath the original and all the planes match up, we need to do some small Touch ups. With this particular example it is around the door area, but this will be different depending on your example.

I simple select the area which needs filling on the reflection layer and fill it to the same colour as the door.

Step 5: Creating the Fade

There are many ways to create a fade in photoshop, but I am going to use a simple ‘feathered lasso’ to get rid of any excess reflection we don’t want. If this was a complicated image and you did not want to delete an information you could always mess around with masking off layers. But for this example i am going to keep things simple. Select your Lasso tool or ‘L’ Make sure the anti alias is selected and add a Feather, for this I added 10px.

I then selected a V shape running along the faces of the reflection.

This selection then gets deleted. We then drop the opacity of the reflection layer down to whatever suits your image. For my example I have dropped the layer opacity down to 40%.

Other Example

As a designer, going on to someones website and seing the default lens flare effect plastered all over their images shows a lack of thought, design and well, shows the creator is probably trying to hide something in their work! The point is it is very generic looking, and those in the know can spot it from a mile off.

Saying that, the default lens flare can be used very effectively and work really well, in the right style and on the right image.

‘‘Lens flare is the light scattered in lens systems through generally unwanted image formation mechanisms, such as internal reflection and scattering from material inhomogeneities in the lens.’’

Read more at Wikipedia

How to…

An amazing graphic and web designer whos work I have been admiring & following for some time now, Nick La creator and designer of some beautiful web sites such as Web Designer Wall, N.Design Studio and Best Web Gallery, shows us in one of his tutorials Vector Polishing Techniques how the default lens flare can be very effective.

The image, shown below is one of his vector pieces and used on the website Next2Friends. It includes a very effective use of the default Photoshop lens flare.

Vector Image by Nick La

In this image Nick ads the lens flare very subtly, and it isn’t just placed on the image any old how it is edited and moved around until it sits just right on the vector artwork.

I had a go! I took a standard photograph and added the lens flare to act as light coming in from the direction of the sun rather than as a standard lens flare.

[SinglePic not found]

Original Photography by Justin Hankins

This example is really simple and shows a diverse way of using the lens flare effect without it being to…how can I put it… ‘Lens Flarey’!

I basically added a new layer above the photo, filled it with black and then created my lens flare on this layer. I chose the 105mm Prime as it has the least hue and would sit nicely in this image.

I then made a screen of the layer and placed it where I wanted on the image.

Last thing to do is touch up the image with the ‘Burn Tool’ and voila!

How Not to…

Some images just do not need lens flares, they would degrade the quality of the image, and just become a distraction rather than an effect. The following example is a way of NOT using a lens flare to enhance an image;

Now, this lens flare is just put on any old how, it offers no enhancement to the image, looks out of place, doesn’t make much sense in its positioning, and basically makes the whole thing look quite amateurish. I mean, come on…its a carrot!

The Conclusion

As demonstrated above adding a lens flare to an Image can be an effective way of enchancing the image or targeting a focal point on an image, but it shouldn’t be over used and when it is used it should be used with thought. Dont just stick with the norm photoshop default as it becomes very samey, Alter the hue, burn the image and cut and paste bits you want.