In my last post and video I explained how to make a child theme for the Genesis theme framework in WordPress. In this article I explain how to start styling the Genesis child theme.

Here you can see where we left off last time with the Genesis child theme only just set up plus an image of the Photoshop visual I used to show the client how the home page would look:

Once the client was happy with the PSD visual, I started creating the child theme locally using MAMP, Photoshop and a text editor.

As you can see above left, the default Genesis child theme looks particularly uninspiring but it is actually very quick to style up the new theme using Genesis. I have made around 10 videos of 5 minutes each showing how I did this, so it can be done in less than an hour!

Genesis Theme Settings

If you look again at the Genesis default theme above (kinda ugly, eh?) you see 3 gray bars across the top. All we need is one top horizontal navigation menu – which is sort of standard these days.

We can get rid of the other two straightaway by going into Genesis Theme Settings on the left hand side of the WordPress administration area.

I will run down the basics of the Theme Settings from the top to the bottom.

• Firstly, I have the default Enable Automatic Updates checked. This means you can update Genesis with a mouse click when the updates come out – as with WordPress, you should do this every time an update comes out. This is one of the benefits of using Genesis – it is developed alongside WordPress and so will always work whatever happens to the WordPress core.
• Leave the Custom Feeds section blank.
• Default Layout is a cool Genesis feature where you can put a sidebar on the left or right, have no sidebars or two sidebars in various arrangements. You can change this on a page by page basis (even cooler). For this site I put the sidebar on the right.
• For Header Settings you can either have an image or the text of the site title. I chose “Header Image” for this site.
• In the Navigation Settings you can choose to have only primary navigation which gets rid of one of those ugly gray bars. You can also Enable Fancy Dropdowns which adds a rather nice Suckerfish delay to your dropdown and makes you look like a coder rockstar when you’re not. You can add other options to the navbar such as today’s date or a site search.
• You can choose which pages you want Breadcrumbs on (I turned these off to get rid of that other ugly gray bar).
• You can choose to have Comments and Trackbacks on posts only but not on pages (as is the usual way).
• You can alter the output of your main blog pages by choosing to have excerpts only and thumbnail images, for example, in the Content Archives section.
• In the Blog Page section you can choose to have only certain Categories listed. I left this with All Categories.
• And lastly you can add various scripts to your header and footer sections of the webpages in Header and Footer Scripts. This is useful for installing Google Analytics and jQuery scripts.

I generally like to do as little as possible here in the Theme Settings and as much as possible in the style.css and functions.php files. The Theme Settings, although important, are only very general controls. When you are creating websites for demanding clients. Most of the action takes place in CSS-land.

Adding a background color and image

This is, of course, straightforward CSS. The background is a light brown color with a gradient running down from the top where it is darker. In the video below I copy a slither of the background and then create a one-pixel wide GIF in Photoshop of the gradient and same that in the child theme’s images folder as bg.gif. The CSS to create the background is:

body {background : #f3ece1 url(images/bg.gif) repeat-x; }

This repeats the one-pixel wide GIF along the top of the background and then, under the repeated GIF is a background color of the light brown #f3ece1. This color I sampled with the Photoshop Eyedropper Tool (I) was the color of the last pixel at the bottom of the copied slither from the PSD. This means that the gradient runs down from the top to the background seamlessly.

Adding a background color to the main page wrapper

This actually makes most of the page light brown which isn’t much good, so, in order to get the main core of the page white I added some CSS to a div id in the mark-up that contains all the page elements. In most web page mark up there is a div id called “wrap” or “wrapper”. In Genesis it’s called “wrap”.

#wrap {margin: 15px auto;
background: #fff;
width: 960px;
padding: 20px ;
-moz-box-shadow: 0px 0px 5px #aaa; -khtml-box-shadow: 0px 0px 5px #aaa; -webkit-box-shadow: 0px 0px 5px #aaa; box-shadow: 0px 0px 5px #aaa; }

This CSS above colors the central area white. I’ll go through the above, line by line:

• margin: 15px auto; puts 15 pixels on top and bottom and makes sure the whole website is centered – this is from the default Genesis theme
• background: #fff; makes it white
• width: 960px; makes it 960 pixels wide (good job I’m here!)
• padding: 20px; this adds 20 pixels of white around it so that the background doesn’t butt right up against the edge of the text (so it isn’t 960 pixels wide, it’s actually 1000 pixels wide – CSS will drive you mad!)
• -moz-box-shadow: 0px 0px 5px #aaa; … etc. adds an even shadow around the wrap in all most of the main browsers

So that’s the background and the wrap finished, now it’s on to the header logo.

Adding a header logo in Genesis

As you can see above I chose “Header Image” under Header Settings in the Genesis Theme Settings above.

I saved the logo in Photoshop and put it in the child theme images folder and then added this to the CSS:

.header-image #title-area {background : url(images/logo.jpg) no-repeat top left ; }

This adds the logo to the top left of the header which returns us to the home page when clicked.

The logo for this site was deeper than the space allowed so I had to add a greater height to another two elements in the stylesheet.

#header {height: 126px;}
.header-image {height: 126px;}

Genesis themes are excellently coded and the CSS is just a joy to work with, however, this is one of the few cases where you have to add something twice!

Starting to style a Genesis child theme in WordPress

I actually did realise I was filming myself for parts of this video so I apologise for the unkempt appearance.

Here is the video where I change the Genesis Theme Settings and style the background and logo in WordPress using a Genesis child theme. It also may help you to view the previous video where I create the child theme and the following video where I move on to a header text widget and the top navigation bar.

What do you think?

Hopefully this contained some useful CSS tips for those that don’t use Genesis and was helpful for those that do! I’m always interested to hear about how you create WordPress themes or if you have any questions.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The internet is daunting, disorganized and idiosyncratic. Web designers should try to make the user’s journey as simple and as pleasant as they can. What’s more, there are certain actions that webmasters would like visitors to perform – to go to a page, to submit some information, for example. For these reasons, knowing how to design and code a beautiful web button is an essential skill for web designers to have.

Sometimes we’ll mock-up a web page design in Photoshop first before creating it with code and mark-up. The two operations are quite different but have the same effect. Firstly, I’m going to show you one way I’ll make a web button in Photoshop. And then I will explain how to reproduce the exact same visual effect using HTML and CSS.

How to make a button in Photoshop

First of all create a new document in Photoshop, making sure the color mode is RGB and it’s 72 ppi.

Then in the Tool bar (on the left-hand side, usually) select the Rounded Rectangle Tool.

And then in the Options bar (at the top, usually) set the Radius to 5 pixels. The larger the radius the more curved the corners. You will specify this value later in the CSS.

Now you can draw your button by clicking and dragging (with the Rounded Rectangle Tool selected). Don’t worry about what color it is as we will set this using Layer Styles effects in the Layer Palette.

So, once you’re happy with the shape, with the rounded-corner rectangle layer selected, click on the effects icon at the bottom of the Layers palette which is a lower case bold italic fx. Choose any of the options in the resulting drop-down menu and this will open the Layer Style dialog box which hosts a bucket-load of Photoshop goodness!

It doesn’t matter which style you work on first but let’s start with the gradient. Click on Gradient Overlay on the left-hand side of the dialog box.

Set your gradient by clicking on the, er, gradient and then choosing two colors in the Gradient Editor.

By clicking on the “color stops” at the beginning and end of the gradient, and then clicking Color underneath, you can eventually choose colors from the Color Picker. (Maybe one too many clicks here, Adobe!) The important thing here is to click to shades of the same color that are quite similar, so that the gradient isn’t too steep.

Next, let’s do the Stroke or border. After OKing everything, click on Stroke on the left-hand side of the Layer Style dialog box and, annoyingly you’ll get a default red border of 3 pixel. (How about making this default to 1 pixel, Adobe!?)

So, change the width to 1 pixel and pick the color of the stroke or border. It’s sometimes nice to make it the same color as either the beginning or end of the gradient. In this case the darker of the two colors.

Finally, we want to give the button a subtle one-pixel highlight on the top, under the border. This can be done by making a one-pixel high selection on a different layer but you can do it within the Layer Style dialog box as well. Click on Inner Shadow on the left-hand side.

Now, usually shadow styles are dark but they can provide glows or highlights. Click on the black rectangle after the Blend Mode drop-down and change the color from black to white. Choose Normal for the Blend Mode (you won’t see white in Multiply). Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel.

This is really subtle and you can barely see it on this lighter example (the left-hand one of the buttons at the top of this article. But on the darker one it is more noticeable. Either way, this one-pixel highlight at the top of a button gives it a slight 3D effect that will make the visitors love to click on it and your client happy to hire you again!

That concludes the styling for the button, now for the text.

Get the Type Tool (T) from the Tool bar and click on the Photoshop document where you want the text to go. Type your text: “Click me”, in this example.

Use the Options bar to select the font, color and size of the text.

To give the dark text a glow under it and the light text a shadow under it we can choose Drop Shadow from the Layer Styles dialog box.

Again on the left-hand example on the top, we want to give the text a subtle highlight underneath it so it looks like the text is slightly indented into the button. To do this we, change the Blend Mode to Normal and change the color from black to white. Make sure the Angle is straight up 90º and that the Distance and Size are 1 pixel. (For the example on the right, the Blend Mode will be Multiply and the color a very dark blue.)

And that’s how you do it in Photoshop. After your client has approved the design of the buttons you shouldn’t just save the image out as a JPG and source it in the HTML. You should use CSS to style up the element (which may be input or a p class or an a class).

How to style a button in with CSS

Here I will give you the styles, for the button below which is similar to the one up top but with slight smaller text. (If you’re reading this on an RSS feeder, by email or on a scraper site, you won’t see the following button so you best check it out on the website).

Here is the button styled in CSS

Here is the HTML for the text example immediately above. However, most of the time, buttons are marked up with the input tag.

<p class="button"><a href="">Here is the button styled in CSS</a></p>


Before you can start on the CSS you need to go back to the Photoshop document. Zoom in to your button and select with the Rectangular Marquee tool (M) a one-pixel wide selection. The height will be the eventual height of the button. You may like to take the Stroke off for this as it may complicate matters and you will be setting this in the CSS.

Cmd/Ctrl-Shift-C to Copy Merged the sprite and then make a New Document in Photoshop (Cmd/Ctrl-N).

The size of the new document will be the size of the sprite you just copied if you have Preset set to Clipboard.

Paste the 1-pixel wide background gradient into the new document and Save for Web & Devices (Cmd/Ctrl-Opt/Alt-Shift-S) as a fairly good quality JPG to avoid banding.

The other information you want from the Photoshop document of your button visual is the HEX value of the button’s Stroke or border and the HEX value of the text color.

And here’s the CSS.

p.button {
background: url("path/to/1px-wide-background.jpg") repeat-x #C2CBF4;
border: 1px solid #C2CBF4;
border-radius: 5px;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
font-weight: bold;
padding: 5px ;
text-align: center;
font-family: Helvetica, Arial, Tahoma, sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 24px;
width: 350px;
}

p.button a {
text-shadow: 0px 1px 1px white;
color: #4E5FAB;
text-decoration: none;
}


Notice the background has a color as well as a background image (gradient) this is for people who browse without images.

Every button should have a hover state

Every link or button on a web site should change itself visually when the user’s mouse is over it. This gives the user the impression that it is a “live” or “active” area of the screen and therefore will do something if clicked, otherwise it’s just inactive text or imagery.

So make sure you set styles for the hover state.

p.button a:hover {
text-decoration: none;
color: #6E80D0;
text-shadow: 1px 1px 1px #fff;
}

p.button:hover {
border: 1px solid #8b9be4;
}

In this particular example the background gradient of the button doesn’t change on the hover but it should do. You can do this by doubling the height of the background sprite by creating a lighter or darker strip of pixels underneath and changing the background image’s y co-ordinate to show the different pixels.

p.button:hover { background-position: 0 40px; }

Here the background image will be moved up by 40 pixels when hovered over, showing the lighter or darker pixels. 36 pixels being the height of the button.

But I’ll do a proper sprite tutorial on another day!

Other tutorials

I have another tutorial about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web 2.0 button.

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

Let me know what you think

Any other top tips for web buttons? I would love to hear what you think in the comments down below. Plus, please feel free to vote for this article with a Tweet, a Like or a Plus One!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

It is usually better to show a client what a website will look like before the development stage starts. Here are a few tricks for creating website visuals in Photoshop.

Getting started

Create a large Photoshop document, at least 1200 pixels wide by 900 pixels deep (this can be increased later with Canvas Size), RGB at 72 dpi.

I then usually center the design within the 1200 pixels wide canvas by drawing a couple of guides. (Pet peeve: websites that are aligned left with the browser window.) Draw vertical guides by dragging them out from the vertical ruler on the sides of the document. If you can’t see the rulers go Cmd(Mac)/Ctrl(PC)-R.

You can do this by eye, although I usually want the width of the website to be exactly 1024 pixels. Zoom in [Cmd(Mac)/Ctrl(PC)-plus] for greater accuracy. You can view/hide the guides by going Cmd(Mac)/Ctrl(PC)-;.

The above example of the guides on the canvas is viewed at a magnification of 17.5%, obviously you will want to work on your design at 100% magnification. The magnification percentage can always be seen in Photoshop at the top of the document’s window.

Use vectors, Shapes and Smart Objects

When creating squares, rounded corner objects, buttons, navbars, sidebar backgrounds, etc., it is better to use the Shapes from the Tool bar rather that to create them with selections. These are essentially vectors rather than bitmaps so later editing will be easier. If you want to change their color you can click on the layer thumbnail box and select a color with the Color Picker, or add a Layer Style if you want a gradient.

Similarly, when dealing with logos or any graphical element within a website design it is always better to use vectors not raster graphics. So when pasting in your logo from Illustrator, be sure to keep it as a Smart Object as you can see below. Now you will be able to increase and reduce the logo’s size multiple times without worrying about it’s quality. If you enlarge and reduce a bitmap logo you will soon see the quality affected.

Another benefit of Smart Objects in Photoshop is that you can double click their icon in the Layers palette and edit the graphic in Illustrator, once this is saved the Smart Object updates in the Photoshop document. If this Smart Object has been copied and used multiple times in the design (an arrow, an icon, a graphic device) then all instances of this Smart Object will be updated. This is awesome!

Name Layers and Layer Groups to keep everything organized

A web page can easily have over a hundred different elements and you will need to be able to select them and groups of them quickly in order to move them around.

So group all your layers into layer groups of the main areas of the page (header, footer, sidebar, etc.) this will make things easier if the client suddenly says, “can we have the sidebar on the opposite side?”

One little irritation is that inevitably as you work down the page from top to bottom on the document the layers end up stacked the other way round. I haven’t found a way around this yet!

Layer styles for text shadow

We all love layer styles for the ability to add drop shadows, glows, gradients, etc., on to almost anything. It is particularly useful when mimicking the CSS3 text shadow effects in browsers.

For dark text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the Distance and Size to 1 pixel.

For light text shadows, for example {1px 1px #000}, use the Drop Shadow effect as default only changing the color from black to white, the Blend Mode to Normal from Mulitply, and the Distance and Size to 1 pixel (see below).

Grab your color with the Eyedropper

To use the Eyedropper tool, simply press the I key and click on the area you want to sample the color from. Then click on the foreground color at the bottom of the Tool bar to open the Color Picker.

You then get a HEX version of the color that you can use in your CSS mark up. Click “Add to Swatches” if you want to easily access this exact color elsewhere in the design.

Presenting a web page design to a client

You’ve finally finished the page and you save it out as a JPG, what do you do? Do you just send the JPG to the client? No! Put it in a web page for the client to look at in a browser so there’s no confusion as to how it looks.

It’s also a good idea to add any hover states or drop-downs in the page so the client knows exactly what they’re getting.

Here is the HTML I use to show a large JPG centered in a webpage:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Home page visual number 1</title>
</head>

<body style=”padding:0; margin:0; background:#fff”>
<div style=”margin: 0 auto; padding:0; height:1900px; text-align:center;”>
<img src=”home-1.jpg”/></div>

</body>
</html>

You have to enter a height on the containing div if the page is very deep, otherwise the client won’t be able to scroll down.

Save it as “home-1.html” along with the JPG in a folder on your website (I use /dev/client-name) and send the link to the client. When the client comes back with comments, just re-save the HTML file as “home-2.html” and don’t forget to change the image name and title. This allows easy reference to earlier versions.

What about you?

What little tricks do you employ when creating the visual look of a website in Photoshop? Or do you use Fireworks or some other tool? Please put your excellent suggestions plus any queries in the comments section down below.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

A guest post from Louise Baker of Zen College Life

For web designers, developers and amateur creative types that work with a lot of graphics and image manipulation, the decision of which software to use is an important one. While Adobe Photoshop and its related Creative Suite programs are well respected throughout the world, open source software is making some big gains in terms of popularity and acceptance. Each graphics software release continues to push the envelop of what’s possible in terms of design. Here’s a quick comparison between the proprietary and free, open source software available for graphic designers and web developers.

Photoshop vs. GIMP

As the ultimate Swiss Army Knife of image manipulation and layout creation, the latest version of Adobe Photoshop offers an impressive array of capabilities for almost every need. Photoshop handles paths, layers, color saturation and transparency impeccably. It’s easily the most polished raster graphics editor available. It’s also fairly expensive, retailing at a price of $699. It’s main competitor is the GNU Image Manipulation Program, also commonly referred to simply as GIMP. GIMP is free, stable and supports a rich ecosystem of handy plugins, brushes and tools to extend the functionality of the basic program, but illustrators who are long used to Photoshop may find GIMP too dissimilar to use effectively.

InDesign vs. Scribus

When it comes to desktop publishing applications, the Adobe InDesign package is the go-to program for crafting newsletters, posters, promotional fliers and e-books. It allows even the most inexperienced user the ability to quickly and easily set layouts and play around with designs. Scribus is the closest equivalent to InDesign in terms of ease of use and functionality. Boasting many of InDesign’s main features and with a similarly uncomplicated user interface, Scribus is available as a free download for Mac OS X, Windows and Linux. The major drawback is its inability to work with the file formats used by Adobe’s InDesign.

Illustrator vs. Inkscape

Finally, there’s the matter of vector graphics editing. Adobe Illustrator is one of the oldest vector graphics tools on the market. As such, it’s a highly stable and powerful way to work with icons, logos and any other type of 3D graphics that are beyond the capabilities of Photoshop or GIMP. Popular with Linux users, Inkscape has many of the same capabilities as Adobe Illustrator when it comes to vector graphics manipulation. Though lacking some of the refinement of Illustrator, it consistently produces smaller, lighter SVG files without a lot of “garbage code” and bloat.

Conclusion

Though pricey, using Adobe software has some key benefits. The Adobe Creative Suite is the industry standard for graphic design at present and will remain dominant for the foreseeable future. As such, there are many more tutorials and guides available online for beginners. Open source software, though free, has a steeper learning curve and can be challenging for the inexperienced. For many, the established community of developers using Adobe software and the support system they provide is enough of a reason to choose Creative Suite tools. For more advanced users, open source software is an appealing and low-cost alternative.

Louise Baker is a freelance blogger and journalist who writes for Zen College Life, the directory of higher education, distance learning, and online schools. She most recently wrote about the top online colleges.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Go cmd/cntl-N or File > New… to create a new Photoshop document of the size of your button. This one has a width of 175 pixels and a height of 35 but it can be any size. (You knew that, didn’t you?). The Resolution should be 72 pixels per inch and Color Mode RGB for websites, of course, and I have the Background Contents to be White as the button is going on an area of a website that has a white background.

Draw a rounded rectangle with, you guessed it, the Rounded Rectangle Tool (U) make the radius 3 pixels in the Options bar at the top.

Make sure the rounded rectangle snaps to the edges and fits exactly the size of the image. It doesn’t matter what color. Here’s a gray one zoomed in to 200%.

Now there are two Layer Styles you want to give the rounded rectangle – Gradient Overlay and Stroke. So with the rounded rectangle selected in the Layers palette go to the “fx” icon at the bottom and choose Gradient Overlay.

On the first panel you should make sure that the angle of the gradient is either 90º or -90º so the gradient either goes straight up or straight down. (Otherwise keep the default values of Normal Blend Mode, 100% Opacity, Linear Style and 100% Scale). To choose the actual colors of the gradient you need to click on the gradient to get the Gradient Editor to pop-up.

Here the trick is to choose two colors that are of the same tone but very close together so that you can only just tell them apart. To choose the colors click of one of the colored squares (stops) with triangles on top of them underneath the gradient (the default is black and white). Once the stop is clicked on, click on the color where it says “Color:” and that will give you a Select stop color box. Here I have also copied the darker of the two colors in the Gradient Editor by option dragging the stop. This ensures that more of the gradient is a solid color and the color change occurs more quickly at one end (in this case at the top).
And the second Layer Style is Stroke. Here you want to choose a color that is darker than the darker of your two colors but only just (with the same degree of separation as the difference between the two colors in the gradient. The size should be 1 pixel and the Position should be Inside. The other values should be the default ones.

Now your button should look like this:

… a little too flat! Now we’ve got to get a bit creative with our penultimate pixels!

The web designer’s secret penultimate pixels!

In order to give the illusion of a flat but 3D button there needs to be a slight highlight near the top and a slight shadow near the bottom – so slight, in fact, it’ll be the height of one pixel; so near the top and bottom, in fact, it will be offset by one pixel. In order to do this, it is necessary to create a new layer and select the Single Row Marquee Tool.

You will need to zoom in to your button by going Cmd/Ctrl-+ a few times. And then position your single row of pixels with the marquee on the second row of pixels just below the top. You can do this easily by just dragging the Single Row Marquee Tool to the top of the image and then moving it down one pixel by hitting the down cursor key once. Now fill this white – (get the Default Background and Foreground Colors by hitting “D” and filling with the Foreground Color (white) by going alt/opt-delete). This will leave you with this:

The do the same again but for the black line. First create a new layer (very important that the white and black lines are on different layers for reasons you will see in a moment), then put a row of black pixels on the second to bottom row of pixels using the same method. And you will be left with something like this:

There’s one more important thing to be done with these pixels. As the corners of this button are slightly rounded we need to shave a couple of pixels off the ends of the black and white lines. You can do this with the Rectangular Marquee Tool (M) and using the cursor keys for positioning. Remember the marquee will move one pixel to the left, right or up or down every time you hit one of the cursor keys. If nothing happens when you hit delete be sure you are on the correct layer!

When you’re finished you will be left with something like this, with two pixels deleted off both ends off the black and white lines:

The last thing that remains to be done (as you can see above) is just to make the white penultimate pixels line less prominent. Do this by changing the white line’s layer opacity to 30% (hit “3″ with the layer selected).
And now you should by left with this:

Other web button tutorials

This is a very flat button. I have written lots of tutorials about more bulging, shiny, jelly buttons. Here is one for a cool, shiny, web2.0 button. (If anyone get excited by my use of the expression “web2.0″ to describe the look of a button, please be advised that it wasn’t me who coined that first as a design term!!!)

And, here’s another tutorial about how to create cool shiny buttons in Illustrator alone.

That’s all for now and please accept a big apology, especially to my regular readers, for the month’s gap in between my last two posts. I will shortly be writing and backlogging a number of great posts about design and marketing so this won’t happen again. Goodbye, everybody!

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I’ve done many articles about Photoshop in this blog. And many of them concern photo montage where a composite photograph is created by joining two or more other photographs.

However, this article has come from something I’ve seen in studying my Google Analytics. An awful lot of people arrive at my site having typed the keywords “how to put one image on another image” or something like that. So I thought I would try to explain the basics of photo montaging in Photoshop.

The basics

In Photoshop, make a selection (see how later on) of one part of one image. Copy it (Cmd/Ctrl-C). Open another image. And paste it (Cmd/Ctrl-V). And now you will find the pasted element as an extra layer in the Layers palette (Window > Layers F7). Use Free Transform (Cmd/Ctrl-T) to size, rotate and move it to where you would like it to go.

Making selections and cutting out

There are many different ways of selecting certain areas of an image in Photoshop. Different techniques will suit different images. For example, with Obama on the left, his head was shot against a very uniformly brown background. Because of this I was able to very easily select that color (with the Magic Wand Tool (W)), inverse the selection (Cmd/Ctrl-Shift-I) and copy.

However, in the case of these selections, I’d feathered them first. Feathering applies a blur to the edges of the selection which helps to create the illusion of the pasted element “belonging” to the background image rather than looking definitely cut out with hard edges. In order to feather a selection: with the selection “live” (ie. you can see the “marching ants” as in the Obama head) go Select > Modify > Feather… (Cmd/Ctrl-Opt/Alt-D) and enter the width of the blur in pixels. Mac users: this keystroke hides/reveals the dock, anyone know how to stop this happening?

One of the other more usual methods of cutting out parts of images in Photoshop is with the Path Tool (P).

Putting a part of one image seamlessly onto another

Here is the original image of the babies. Don’t they look nice!

As always with images of people, skin tones and lighting are very important. It’s very rare that you can cut out a head from one image and paste it on to another without any further work. With this image I used Curves (Image > Adjust > Curves… (Cmd/Ctrl-M)) to match the skin tones of the heads to the skin tones of the babies’ bodies.

I have already mentioned feathering as a method of blurring the edges of the cut out. This process can be continued with Layer Masks. Click on the Add Layer Mask icon in the Layers palette (it looks a bit like a washing machine) and use the Brush Tool (B) with a black brush will “erase” areas of that layer. Use a soft brush and play around with opacities.

Who are these guys?

If you’re wondering, from left to right the babies are: Vladimir Putin (Russia), Hu Jintao (China), Gordon Brown (UK) and Barack Obama (USA).

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I did this montage to illustrate marketing material that was highlighting Africa as a young and emerging economy.

I had a photo of an ordinary seedling growing out of earth in someone’s hands. I created another layer of this picture (Cmd/Ctrl-J) and cloned out the seedling using the Rubber Stamp Tool (S). I then went back to the original picture and cut around one of the leaves with the Lasso Tool (L) – there was absolutely no need to be precise with this cut out. This roughly cut out leaf was then pasted over the top layer of just the hands and earth. I then had to find an Africa shape.

Finding vector maps and images

Luckily there are some great free vector resources out there. I could give you a list here but just Google “free vector” and you’ll find some great ones. To find a map of the world in vector simply type “free vector map” or something like that and then have a look at the image search – I find this speeds things up a bit. Here you can compare at least 20 (hopefully) free vectors without having to go to the individual websites. The one at Vector Vault looked nice and simple.

Layer masks in Photoshop

Next, I simply isolated the Africa shape I wanted in Illustrator and copied and pasted it into my Photoshop document (choosing Smart Object) and sized and rotated it over the leaf I had cut out earlier. Then a Cmd/Ctrl click on the icon of the Smart Object in the Layers palette makes a selection of the shape and then a click on the Add Layer Mask icon with the leaf layer selected turns the leaf into the Africa shape. It’s at the bottom of the Layers palette and some say it looks a bit like a washing machine!

Finishing touches

Some areas of the map of Africa weren’t filled up with the leaf so I cloned areas of the leaf out to reach the edge of the Africa shape.

As the Smart Object of the Africa shape is vector I found it gave the leaf an unrealistic sharp edge. To counteract this I blurred the layer mask of the leaf not the leaf itself otherwise the sharp edge would have remained. For blurring I usually go Filters > Blur > Gaussian Blur and choose the Radius (usually somewhere between 0.5 and 2). I had to make sure I had the layer mask selected not the layer itself when applying the filter by clicking on the layer mask. When you’re editing the layer mask the rectangle of it will have a thicker border in the Layers palette. (If you click on the layer icon itself the thicker border will move from the layer mask on the right to the layer icon on the left so you know which one you are working on).

Lastly I added some Inner Glow to the leaves to give them a realistic yellowy edge.

Below is another one I did of a single leaf. Above you can see the layers palette from the image below – the leaf with the Africa shape layer mask is above the layer with the cloned out seedling.

So, I hope that made sense to everybody. Sometimes it’s difficult to explain Photoshop practices without doing loads of screen shots. Would anyone do this in a different way? How does this compare to your Photoshop methods?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Supplying initial ideas

Some designers will tell you that they always design one option for themselves and one for the client. One very beautifully “designed”; the other more commercial. Personally, I like to supply two or three options, all of them for the client.

Try to show the client variety in your options and discuss the strengths and weaknesses of the different designs so that you can understand exactly what is needed.

Choosing great typefaces

Sometimes I like to use a combination of a serif and a sans serif typeface. Here the title is in the elegant Didot font and the body is in Futura, mostly Futura Light. Also instead of making body, or even title fonts, in black, I’ve experimented with different shades of gray.

Dealing with photography

If your advertisement has a product image in it – or any image for that matter – it is necessary to get it to reproduce as well as possible.

The photo that was decided upon for this ad was of a mature man modeling the product. There were a number of things about the photo that were improved upon (blotchy skin, dirty fingernails, wrinkles, etc.) The original photo is on the left; the re-touched photo on the right.

To make these improvements in Photoshop I used the Clone Stamp Tool (S) to get rid of blemishes and the Dodge Tool (O) to lighten areas.

Lastly, I changed the image’s mode to CMYK and made sure in Image Size that it was roughly the size it will be when reproduced with a resolution of 300 ppi.

Writing great copy

I could write a lot more about this subject, especially about the headline. This headline actually came from the client and, along with the picture, fulfills most headline criteria. It is attractive, attention-grabbing and clear.

Always be at pains to make the text as simple as possible, being informative about the benefits of the product or service.

And … don’t forget the spell check.

Supplying the artwork

Make sure all images and logos were high resolution and CMYK. Also make sure that the text was CMYK, especially that the black or gray text is made out of K (key black), without any C, M or Y. There should be no RGB colors in the artwork.

I laid this out in Adobe InDesign and exported it as a PDF/X-1a:2001. I finally checked it in Adobe Acrobat Professional where you can see all four plates separately to check that there aren’t any rogue elements in the ad that may cause problems later.

I have written further information about preparing artwork for print and supplying artwork to printers in this website.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I would do catastrophically badly.

I am particularly bad at public speaking. But, even if I weren’t what would it matter if I said: “I am an excellent graphic designer and I have great marketing ideas when it comes to promoting businesses.”

Why would anyone believe me? This is why I am a great believer in the website being your permanent shop window.

It is much better (for me at least) to get your potential clients knocking at your door rather that the other way around. That is why I always eulogize about the benefits of writing constantly about what you do in order to advertise your services to the world.

How to create this in Photoshop

Re-sizing and putting perspective into type is easy in Photoshop. Here’s how I put the text onto the lectern picture.

First of all, create the text you want with the Type tool (T). When you are doing this it is important to make it as large as possible. The reason for this is that it need to be rasterized in order to apply perspective.

The next step (you guessed it) is to rasterize the type layer. Go Layer > Rasterize > Type or right-click (PC) or Cntl-click (Mac) on the type layer and select Rasterize Type.

Now go Edit > Free Transform, or Cntl/Cmd-T and you will see a box around the text with eight anchor points on it. In order to apply perspective Cntl/Cmd-alt-shift-click on one of the four corner anchors and drag. But what you will find easier is just a Cntl/Cmd-click on one of the four corners of the Free Transform box to move that corner to wherever you want. Finally hit return to render the transform.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is was a Photoshop image I did to illustrate how Chinese national oil companies were active in Africa.

I’d tried recently many vector flags and country outlines solutions to similar illustrative quandaries and I thought this time it was nice to do it all in Photoshop.

I created the mask of the outline of Africa by copying the Blue Channel and adapting it to be a selection of only the part of the map that was Africa. Here is explained using Channels to make masks and selections on a similar image.

Once you are happy with the extra Channel, it’s a Cmd/Ctrl click on it to make it a selection then over to the layer you want masked and a click on the Add layer mask icon in the Layers palette. The beauty of this way of masking is that the mask can added to or subtracted from with the Brush tool(B) or even blurred to create the effect you want.

After this was done it was the usual playing round with layer blend modes to get the best effect. The top flag layer I had on Normal with an Opacity of 60% and under that I had another duplicate layer with a Hard Light blend mode. Underneath was just the original map image as a Background layer.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is an illustration I did for a business card which I designed and created in Illustrator and Photoshop for a motorsports development fund.

Rather than the standard old 86.6 mm by 53.98 mm rectangular thing they asked for a graphic representation of a Formula One steering wheel. It’s great when clients come up with brilliant ideas!

I was really inspired by this job and, after searching Google images for examples of these steering wheels, I set to work first in Illustrator. Here is the basic outline I did together with two of the dials.

As you can see I did only the very basic outlines in Illustrator although I did take care to get the dials and lights looking fairly realistic. Once I had done one dial I grouped the objects, copied them and then re-colored them with the Recolor Artwork button that sits in the Control palette at the top of the screen (see above). This is a really great way to change the hue of a group of objects.

Once I was happy with it in Illustrator and had every major object on different layers I exported the document as a .PSD in Illustrator (File > Export…). Then I opened the same document in Photoshop and began the finishing touches.

The most important thing to do in Photoshop was to add the highlights, which really add realism to the illustration. I also added a bit of blurring to the main body of the steering wheel as well as noise to the dials.

Finally, the outline path from the original Illustrator file was used as the die cut for the printers to cut around the edge of the illustration.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The problem

Err, sorry, the challenge. How many times does this happen? You have an otherwise beautiful design and your client insists on including pictures of people who’s images weren’t taken by one of the world’s best photographers.

This is a reoccurring hitch; we have to include pictures of the CEO, the MD, the whoever, but there’s not the budget or the time to get a professional portrait done only a happy snap of 20k.

The solution

Or is it the workaround? As you can see above, it’s not difficult. Turn your original photo into greyscale and cut it out. Feather or blur the edges in certain parts of the photo by extreme amounts. This is particularly necessary if the subject is leaning up against a wall or has someone else standing in front of them. Go either Filter > Blur > Gaussian Blur… or Filter > Noise > Median…, or, preferably, do both.

Prepare your Photoshop document with a white background while experimenting with swathes of colours and blends on different layers. Play around with the blend modes, “Multiply” will be useful. These different colour layers can be used for other portraits, simply change their hue and positioning. Add some more layers on top of white lines with some assorted brushes.

Now comes the clever bit. I found this much easier in Illustrator. Save your Photoshop document noting the pixel dimensions and color mode. Create a new Illustrator document mirroring the dimensions and color mode. Place the PSD on artboard, lock layer, create new layer, and with the brush tool (B) selected, trace certain areas of your image to make it look like an old-fashioned re-toucher has had a go at it. Set artistic brushes (found in the Brushes palette) to some of these lines (“Artistic_ChalkCharcoalPencil” was my favourite). This is easier to do in Illustrator rather than Photoshop because the lines can be evened out (double click or the Brush tool in Illustrator and make sure the smoothness is around 0).

You may like to copy and paste these elements bit by bit over to the Photoshop document or, having put them on different layers in Illustrator, export it as a PSD and then copy over the layers. Either way, you will want to further experiment with layer blend modes and opacities for these artistic touches.

This was not my idea. I was contacted by The Talent Business to do this for their new staff members. See their “Who to talk to” section.

Here are the originals:

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Web 2.0 in design and marketing

This is an image I made to try to explain the digital grapevine: A network of users that interact to answer questions, solve problems and have fun or the trend in the use of the internet and web design that enhances creativity, information sharing and collaboration among users that has been referred to as “Web 2.0″. The best description of this that I have read is from Stephen Fry:

… an idea in people’s heads rather than a reality … an idea that the reciprocity between user and provider is what’s emphasised. In other words, genuine interactivity, if you like, simply because people can upload as well as download.

The internet is now a teenager – it’s been 14 years since Marc Andreessen’s release of the Netscape Navigator browser in 1994. Now the technology has evolved to web-based communities such as social-networking sites, wikis and blogs.

I intend to harness the benefit of this trend both for myself and my clients as I see it as an important approach to both design and marketing at the moment.

How I made the image

I was very suprised I couldn’t find a sample series of binary numbers on the net quickly, so here are mine.


001001010111010101101001010011010100110010001100100001
011010011000010001100100010101001100110000100101011101
101011011001100001100100010110010010011001101101001100
010100100000110110101101101101110111001000110100101001
011011101011101110101000100101100000011000110111011101
110100000100010000011101011011110100101010100101011110
110110101010010001100100011001000110001111011011101001
0001000100000110101101010111010111100

These numbers were put in the OCR-A font. This font is used for a variety of purposes including the ISBN labels on books. After scrolling through Blend Modes in the Layers palette in Photoshop, I hit upon Soft Light and Overlay as ones that seemed to work.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

A while ago I did an article explaining how to create a country’s flag inside its map outline and I used as an example the Australian map and flag. I’ve since had a lot of interest from Australians who wanted to use the image so I thought I’d do one for Americans as I get a lot of visitors from the United States.

I employed a very similar technique for this one as I did the other one. First, I got from a Google image search the country outline of the USA and a picture of the stars and stripes. I turned the country outline into vector form by using Adobe Illustrator’s Live Trace. The flag I re-created manually in Illustrator.

Once the flag was finished, I grouped all the objects and position the country map outline over the flag and, with both selected, I went Object > Clipping Mask > Make (Cmd/Ctrl-7) to give the flag the outline of the country.

I then copied this and pasted it into a Photoshop document and added a Bevel and Emboss and a slight Drop Shadow layer style.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

There is an ad campaign in London at the moment for Portuguese tourism. You can see 48-,24- and 16-sheet adverts in the tube with giant portraits of famous Portuguese celebrities (Cristiano Ronaldo, José Mourinho) with a landscape showing through the image. Something similar to this effect that can be achieved with only a few clicks in Photoshop.

It helps to find a picture, like the one below of José Mourinho, that is lit from the side so half the face is white and the other half black. However, failing that, find a portrait that has a white background. Once the image is chosen, cmd/ctrl-click on either the red, blue or green channel in the Channels palette. This will give you a selection.

Now find your “background” image and paste it over your portrait image. Now click on the New Layer icon in the Layers palette to give you a blank new layer. With the selection still live, fill this layer with white. To do this either go Edit > Fill… and in the resulting pop-up box chose White for your fill (the quick key for this pop-up box is shift-F5) or simply go cmd/ctrl-delete to fill the selection with the background colour (the default background colour is white; to get the default foreground and background colours, simply press D). You knew that!

You may want to copy this white layer (cmd/ctrl-J) or alter it’s opacity.

This is a simple and effective way of putting one image inside another with interesting and eye-catching results.

You can download the PSD of the top picture here. 3.4MB

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

You have a great photo. You have a great design. One problem: the photo doesn’t “go” with the design.

The solution is to change the image in Photoshop to more accurately match the colour scheme of the design or, more commonly, to match the client’s or brand’s colours.

In the above example the final image (on the left) was changed from the original image (on the right) to reflect my client’s corporate colours.

There are many different ways of doing this in Photoshop. For the different segments of the umbrella I cut around them using the Pen Tool (P) and, after feathering the resulting selection slightly to get rid of hard edges, I filled a layer with the red or the orange and set the layer’s blend mode to Color Burn. Linear Burn also works, as does Color. Play around with the layer blend modes.

However for the dress I used a different technique. After isolating the dress in the same way, by making a path with the Pen Tool and featuring the path’s selection (Select > Modify > Feather… (CS3); Select > Feather (before CS3!)) by 2 or 3 pixels, I changed the colour slightly using Hue/Saturation. Go Image > Modify > Hue/Saturation… (cmd/ctrl-U) and move the Hue slider.

To get the client’s or brand’s corporate colour, read the RGB or CMYK values by hovering over them in Photoshop whilst looking at the Info palette and see if you can emulate those values on the part of the image that you are trying to colour. Do this in order to get an accurate colour match.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I made this image of one of my favourite guitarists, Jimi Hendrix. He is associated with flamboyant clothing and psychedelic colourful artwork on his album covers and guitars so I tried to make this image as vibrant as possible.

To do this I followed the basic techniques of pop art that I’ve used before. Only this time instead of underlaying the image with flat Warhol-esque colours, I put in various colour gradients on different layers.

This was achieved by getting a new blank layer (clicking on “Create a new layer” icon in the Layers palette, or cmd/ctrl-opt-shift-N) filling it with a gradient of the colour spectrum (select the Gradient Tool (G) and in the Info palette select one of the two spectrums available, to apply the gradient simply drag the Gradient Tool across the image). This can be done repeatedly on different layers. I set the layers’ blending modes so that the colours on all of the layers can be seen and merge together in a complimentary way so that the result is kaleidoscopic. The blending mode I found most useful for this was Difference, but I also used Linear Burn and Soft Light.

I also used three different greyscale layers of the man himself of differing opacities. Multiply, Screen and Pin Light were the layers’ blending modes used here but Multiply is usually the most effective for the black in pop art. One or two of these layers were blurred.

Importantly, this effect can be used to resample a tiny web pic up to a large high resolution print ready image with no loss of quality!

You can download the low resolution PSD here. jimi-hendrix-psychedelic-pop-art.psd 4.6MB

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

A client of mine was illustrating an article about the World Economic Forum whose annual meeting is usually held in scenic Davos in Switzerland. My client was keen to stress the importance of interconnectivity within both the forum and the wider business community and gave me an image of connected wires of light to marry with the snowy village shot.

To cut out the sky of this pic I adjusted one of the RGB channels. This is a specially useful technique if the area you want to cut out is clearly differentiated by the tones in the picture already – like a figure shot against a white background for example. In these situations you already have a bit of information there that can do the job for you.

Have a look at the channels and select the one which is closest to the black and white mask you want to create – it’s usually the blue channel in RGB. Copy this channel by dragging it to the ‘Create a new channel’ icon at the bottom of the Channels palette. Firstly, create a stark channel of just white and black with no greys. One way to do this is to go Image > Adjust > Threshold… but you may want to use Curves…

This will never be enough to create the cut-out mask in itself but it should be possible to create a channel that closely fits the outline you want. It’ll then be necessary to select the Brush Tool (B) to fill in the areas of white or black as desired. Black hides; white reveals.

When you are happy with the channel, simply cmd/ctrl-click on the channel in the Channels palette go to the appropriate layer in the Layers palette and click the “Add layer mask” icon at the bottom of the palette (it looks like a washing machine). The channel copy will be applied to the layer as a mask.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I created this image to represent the idea of “Energy in a Box”.

The secret of making a box in Photoshop is to use guides and enabling the Snap to Guides feature to make sure everything looks as it should do.

I started with selecting a 2d side (or sides) for the box. I chose a sun image to represent energy. I added some Inner Glow around the edges and saved the document. I then created a slightly larger Photoshop file and proceeded to set my guides (see below).

Paste the 2d shape into the file and use the Free Transform tool (Cmd/Ctrl-T) and, holding down Cmd or Ctrl, drag the corners of the 2d shape to the correct point where the guides intersect.

You may decide to darken some areas of the cube to increase the 3d effect.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The image above has been stylised in Photoshop and Illustrator.

To trace a photo in Adobe Illustrator, go File > Place and select the photo you want to trace. I find it useful to then lock this picture layer in the Layers palette and click on the New Layer icon to make sure your trace and your image remain separate in your Illustrator document. Then, as you can see below, I selected the Pen Tool (P) and traced the eyes, the nostrils and the lips. Tracing the picture gives you the added bonus of a good vector illustration to use elsewhere!

Now open up the original image in Photoshop. This is when you should perform the usual cloning and trickery to get rid of any blemishes, scratches or general untidiness in the photo. I used this technique to smooth the model’s skin. And I also brightened up the teeth, the whites of the eyes and the eyebrows.

Next you should bring in the elements of the Illustrator trace bit by bit. So, I selected the mouth first, copied it and pasted it onto the Photoshop image. The trace was done in black, so setting this layer of the pasted Illustrator lips to Overlay in the Photoshop Layers palette really makes the lips stand out and deepens the red.

Then the eyes were done in a similar way, first the irises, only this time I coloured them pale blue in Photoshop and set the Layer’s Blend Mode to Saturation. Then the highlight in the eyes was made white in Photoshop and their Layer’s Blend Mode was set to Overlay. Finally I pasted in the eyelashes.

The underlying image of the woman’s face is quite pale that is why employing this technique causes a really striking, almost “pop art” effect.

See below the original image on the left, the trace in the middle and, on the right, the finished piece.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Everybody knows that your marketing message will be enhanced by the creative use of graphic imagery. A competent graphic designer will be able to communicate your message to your market.

But have you ever wondered what is the best way to make the graphic communicate the message?

The above picture provides an answer. And it is … make the graphic the message or put the message in the graphic.

I was working with a well-known international credit agency who were pitching to a large bank. They were trying to convey to the bank the message that they would save money if they took them on. So I put the message on a till display or cash register. Some people were skeptical at first, saying that the cash till gave a negative message of spending money and would imply the opposite. But I was adamant about it. The message was powerful enough and the graphic provided context – much better than an image of dollar bills, for example.

The point is that the message fits into the image in an everyday way.

It’s an obvious one but it nearly always works. There is one thing I have loved doing over years and years of Photoshop usage. It’s getting a picture and incorporating an idea, a message, some copy, some type, an icon, a headline or a symbol into it. There’s something about it that instantly captures the attention.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The above picture of a couple has been treated in Photoshop to give it a gritty, grainy, reportage look. This has also been described as the “Dave Hill effect” after a Californian commercial photographer (not the guitarist from Slade) although, of course, this won’t be his exact method.

It immediately looks like a serious photo that could be used with a medical/lifestyle/reportage feature rather than the slick/studio/airbrushed shot that it is.

There’s two main parts to this. First, adding the particularly high contrast, and second, adding the grain.

The contrast can be changed to something more akin to contours on an aerial photo by the High Pass filter. After copying your layer go, Filters > Other > High Pass… and choose a radius you feel comfortable with. Set the Layer Blend Mode of this layer to Hard Light. You will start to notice a hardening of the edges. Copy the layer again to increase the effect. Experiment with this Filter and the Blend Modes of the layers to achieve the effect you want.

The grain can be added to a separate layer of 50% grey, applying Noise and setting the Layer Blend Mode to Overlay.

Cmd/Ctrl-Opt/Alt-Shift-N or click the new layer icon in the Layers palette to create a new layer. Go Edit > Fill (shift-F5) and choose 50% gray from the top drop down menu and Overlay from the second. Now go Filters > Noise > Add Noise… and choose your degree of grain.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

This is a quick technique to even out blemishes in a model’s skin. I came across this by accident but I think it’s a really good way to instantly make people pictures look more eye-catching and professional. It also has the effect of brightening and adding contrast.

Very simple. Get the layer you want to work on with the less-than-perfect skin (if it is your locked background layer double-click on it to unlock it). Make a copy of this layer (Cmd/Cntl-J). Set the top layer to Screen blending mode in the layers palette.

You will notice immediately the picture has become brighter and the contrast has increased – maybe too much. If you want to decrease this effect then decrease the opacity of the top layer a little.

Next, with the top (Screen) layer selected, go Filter > Blur > Gaussian Blur… I blurred this image by about 9 pixels, I’d go for 25 if it were a high resolution. The more you blur this layer the more the skin smooths out and the more of a “glow” is created. The effects of the glow can be masked off around the face if desired.

I stumbled upon this trick whilst designing some packaging for a music software company.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

After I had designed a vector logo for a client, I was asked to web 2.0-ify it.

This is what I did. The “Toby Beresford” and the cogs are on separate layers in Photoshop. Individually I set the Layer Styles of Gradient Overlay and Bevel and Emboss.

The Gradient Overlays are the same on both layers. I picked a light blue colour for my background colour and a dark blue colour for my foreground colour and selected them in the Gradient pull down menu in the Layer Styles pop-up box.

In the same pop-up box, but with the Bevel and Emboss style selected, I played around with Depth, Size and Soften, as well as the opacities of the highlights and shadows until I got the desired effect on both the elements of the logo.

Lastly I created a shiny table top reflection effect using the Free Transform tool.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

I used this image as a title slide in a PowerPoint presentation for MasterCard, one of my clients. It was a great excuse to do a reflection and transform its perspective to make it look like the headline is actually there on the pavement.

The method I use to do perspective is much simpler that going Edit > Transform > Perspective. I prefer to do most of my transforming with the Free Transform (Cmd/Ctrl-T) function. First, however, don’t forget to rasterize that type! Right-click on the text layer in the Layers palette and choose Rasterize Type.

With this done, go Cmd/Ctrl-T for Free Transform, grab the top-middle point and pull down. Now your type is a vertically flipped. Then, with Cmd/Ctrl-Shift-Option held down, drag one of the bottom corners for the perspective (see below). And then hit Return.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

“Reflections are the new drop shadows!” If that’s the case, here’s how!

Copy the text layer – or layer – that you want to reflect (Cmd/Ctrl-J). If the layer that you want to reflect is a text layer then you should Rasterize it. To do this, right-click on the text layer in the Layers palette and choose Rasterize Type.

This is my method of quickly flipping something vertically in Photoshop. Go Cmd/Ctrl-T for Free Transform, grab the top-middle point, pull down (see below) and then hit Return. Simple, no need for cumbersome menus.

Next you need to create a gradient mask to fade the reflection from top to bottom. To do this, select the layer that is the reflection, click on the “Add layer mask” icon at the bottom of the Layers palette (looks like a washing machine), select the Gradient Tool (G) and drag from above the top to below the bottom of the reflection. Easy! (Didn’t work? Make sure your Foreground and Background colors and your Gradient picker are defaulted.)

Lastly a bit of rippling and blurring. Go Filters > Distort > Ripple… and choose the desired level of wobble. Only blur it a touch.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The above picture is one of my snaps taken very quickly at the end of clearish autumn day. I have improved this picture with Photoshop by selecting certain areas and altering the colour, brightness and contrast.

I first thing I did was to copy the photo to a new layer (Cmd/Cntl-J) I then use my method for creating a layer mask with the Gradient tool which was explained in the previous post to mask out the sky. I then used Image > Adjustments > Curves… (Cmd/Cntl-M) and clicked the Auto button (this finds the lightest part of the selection/layer and makes it white and finds the darkest part of the selection/layer and makes it black). Further contrast can be added by creating an ‘S’ shape out of the curve (see below). Contrast essentially means making dark areas darker and light areas lighter.

Then to make the picture more interesting I isolated the people at the bottom right with the Lasso tool (L) with a Feather of 15 to blur the edges and applied contrast using the same technique.

The original layer is now the lower half of the picture. I used Image > Adjustments > Curves… (Cmd/Cntl-M) to brighten the sky and, more importantly, to take out some green and add some blue to give the sky a more interesting look.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

Here, as promised, is a short tutorial about creating montages. Here is a montage of three different images which gel together without having to laboriously cut anything out.

Layer masking with a brush

I sized the cityscape image over the picture of the girl and played around with layer blend modes until I chanced upon one that seemed to do the trick. It’s Color Dodge at 88% opacity.

Then I needed to get rid of some of the building’s lights from her face. The way to do this is to create a layer mask. In the Layers palette, simply click on the Add Layer Mask icon. It’s at the bottom of the palette and looks a bit like a washing machine (see below).

When you’ve done this a white rectangle will appear adjacent to that layer and, when you’ve selected the Brush Tool (B) your foreground colour will be black and you’re ready to start editing the layer mask.

When the layer mask is white it is unmasked and black is masked. So “painting” on the layer mask with a black brush will “erase” areas of that layer. Use a soft brush and play around with opacities.

Notice when you’re editing the layer mask and when you editing the layer itself. The rectangles will have thicker borders in the Layers palette to show you which. Click on a layer’s mask and your are editing the layer mask (foreground and background colours are the default black and white). Click on the layer rectangle itself and your are editing the layer (foreground and background colours revert to the colours you had there).

Layer masking with a gradient

Then I overlaid an image of a band. I wanted the left-hand side of the image to show the drummer and the right-hand side to show more of the girl.

Same technique as above. Click on the Layer Mask icon in the Layer palette to give yourself a blank layer mask. Click on the Gradient Tool (G) and drag (in this case horizontally from right to left more-or-less in the centre of the image) where you want your gradient mask. You can do this as many times as you want to get the right effect (no need to Cmd/Ctrl-Z).

This band layer is set to Lighted blend mode at 50% opacity.

Adding a border around the image

Add a new layer (Cmd/Ctrl-alt-shift-N). Select all (Cmd/Ctrl-A). Go Select > Modify > Border… add a value of, say, 5 pixels. You may want to feather it a bit. And fill it with a dark colour from the image.

Here is the layers palette for the finished image.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

The montages will eventually go on large sierra boxes (a sierra box is a large cardboard box for software containing a DVD case and other printed material), DVD cases and the DVDs themselves as well as other promotional material.

Dance music montage

The dance montage was to capture a dance, house, deep house, tech house vibe.

World music montage

This montage was for world, dub, latin, reggae and ethnic.

Rock music montage

And this was for alternative, grunge, rock and pop. What do you think?

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.

If your client hands you a .PPT from MS PowerPoint or and .DOC Word and says: “The presentation/print deadline is tomorrow, make this look nice”, what are you going to do?

The answer is to use other programs such as Photoshop, Illustrator, InDesign, Quark, Premiere or Keynote and get creative!

Here are a few tips I’ve picked up over the years of doing this.

Make sure you import your client’s text into InDesign and Quark rather than copy and paste it

Why? Because it keeps the formatting (bolds, italics, heads, subheads, notes, etc). If your client has gone through the document and done this there’s no need for you to do it again. OK, you may not like your client’s choice of formatting or font, you can change that globally over the whole document in seconds. Use the Style Sheets or Utilities > Font Usage in Quark and Paragraph Styles or Type > Find Font in InDesign to turn the sow’s ear into a silk purse.

If you want a presentation to look good don’t do it in PowerPoint

I know this isn’t always an option as all the world and his wife seem to want to use PowerPoint for any purpose but, if you can’t persuade the client to go for Premiere or Keynote, there’s always the PDF. The good old PDF will give you an excellent presentation with vectors supported, movies played and excellent interactivity.

You’ve got to do it PowerPoint, now what do you do?

In PowerPoint go File > Page Setup and that’ll give you the size of the slide. Then go to Photoshop go File > New and type in the same height and width values from PowerPoint, create your attention-grabbing masterpiece, save it as a PNG (transparency is supported) and then back in PowerPoint go Insert > Picture > From File… and select your PNG.

OK, so you can do that for every page of a 40 slide deck if your client wants to edit the text, but it’ll add a bit of extra fizz to the proceedings.

Get your client to provide you with the source files

If there’s a blurry bitmap graph or chart that you need to beautify, ask if it exists as a PDF or ask for the source files. Even if it was the ugly result of a PowerPoint-Excel partnership the chances are it can be copied and pasted into Illustrator and the type can be changed and the excess crud can be deleted.

Similarly a PDF can be opened from within Illustrator with the type and the vectors editable, if the wind is blowing in the right direction, if you’re lucky!

For both of these routes you may find all the elements refusing to be ungrouped. If this is the case go Object > Clipping Mask > Release and Object > Compound Path > Release and then ungroup and see where that gets you.

This is an article from Rob Cubbon

Please download your free copy of How to Market Yourself Online a PDF eBook which contains all my best tips on internet marketing, social media and blogging.