How to use Photoshop's Gamut warning

Gamut = Colours that are within the colour space you are using
Out of Gamut = Colours that fall outside the colour space you are using

Have you ever created a design in Photoshop and had it printed only to be left wondering where your colours went? Did the printer guy put a can of vaseline over your artwork, did they forget to add ink, what on earth happened...? Often the answer is that the missing or dulled colours in the printed version were out of Gamut.

Colour Profiles

RGB = Red Green Blue (additive colour mixing)

Varying intensity of 3 components (beams of red green and blue light) are used to create the colours within the RGB colour profile. To illustrate this simply: Zero intensity from each of the 3 colour components will produce black (which has the RGB value of: (R) 0, (G) 0, (B), 0) whereas maximum intensity from each of the 3 colour components will produce white (which has the RGB value of: (R) 255, (G) 255, (B), 255). RGB is the colour profile used on computer screens and televisions. If you mainly design for on screen applications, you may never come across the out of gamut issue, but if you want to print your artwork it helps to know a little more about how colour profiles work.


CMYK = Cyan Magenta Yellow Key (Black) (subtractive colour mixing)

CMYK is the colour profile used in colour printing. The CMYK colour profile is made up by partially or entirely masking colours on a lighter background (white paper or canvas). The ink reduces the light that would otherwise be reflected - subtracting brightness from white; hence it is referred to as a subtractive colour mixing model.

Comparing Visible (to the eye), RGB and CMYK colour spectrum 

(image source: mosaic design service) 

Comparing RGB colour profile to CMYK

(image source: Wikipedia)

As you can see in the images above, the RGB spectrum is both larger and brighter compared to the CMYK colour profile. You can also see that some colours are affected more than others when converting from RGB to CMYK.

Before converting your RGB design to a print ready CMYK file, the steps below may help print-proof your design and avoid unpleasant printing surprises.

---

Using Photoshop's Gamut warning

Step 1 - With your design still in RGB mode (check this by clicking on Image in the top menu  > Mode), Save your design with a new name (File > Save as) as this will ensure that you still have your original and the changes you make when preparing the file for print will be done on a copy.

Step 2 - Go to the top menu and click on View and select Gamut warning:

In this example  I have deliberately used colours outside the CMYK colour space

When I select View > Gamut warning - this is what it looks like:

Everything that is grey is outside the CMYK colour space (there's not much inside!).

With Gamut warning turned on, you can add adjustment layers to carefully bring the colours back in gamut. Make sure you have Layers switched on (Window > Layers), and then click on the adjustment layer icon at the bottom of the layers window and select Hue/Saturation:

Create a Hue/Saturation adjustment layer

In the Hue/Saturation adjustment window you can tweak Hue, Saturation & Lightness by dragging the sliders left or right of zero (middle). 

Instead of altering all colours at once (Master), it is better to modify one colour at a time by creating multiple adjustment layers and correcting Reds, Yellows, Greens, Cyan, Blue & Magenta individually. To do this, start with the colour you want to bring back into gamut first: click the dropdown menu and select the colour closest to the one you are going to bring into gamut:

1. Do not edit the Master, because that will affect the whole image (not just the problem colours)
2. Select the colour you will be changing first (Yellow, Green, Blue etc)
3. Use the eyedropper and click on the area you are going to change.
4. If you find it hard to see exactly where the colour is you can turn off gamut warning for a quick peek.
5. Drag the saturation slider slightly to the left (to de-saturate the colour) until you see the colour come back into gamut (the grey will disappear).
6. Adjust the lightness slider (left or right) to further adjust the colour. 
7. Be careful to not drag the sliders too far: The aim is to fix the problem areas by adjusting the colours as little as possible.
8. Create a selection area for each new adjustment layer (see below) - this will help preserve the non-problem colours and allow you to adjust only what needs fixing.

TIP: Before you start it is a good idea (especially when you have a lot of out of gamut to deal with) to create a selection area of the out of gamut colours. Go to Select (in the top menu) > Colour Range - and select Out of Gamut. This will create a selection area. If you have a large selection area it is also worth to Feather the selection to create a softer blend between the selected and non selected area. Right-click and select Feather. Adjust the feather radius depending on the size of your image (I used 15 pixels on this image which was 800 pixels wide):

Step by Step Gamut correction
Top left: Yellow brought back into gamut |  Top right: Greens and some Cyan almost back in gamut
Bottom left: Cyan and Magenta coming back in gamut | Bottom right: The adjusted image.

If you want to make any final adjustments (Colour, Brightness etc), do this before converting to CMYK. Leave gamut warning on so you can see if an adjustment goes too far.

Converting to CMYK - and saving your file for print

When you have no grey left - all your colours are in gamut and you are safe to convert your image to CMYK for printing.

• Flatten the image (if you want to save the file with layers, make sure that you save it as a psd before you flatten it).
• Check that you are converting to the intended CMYK profile: View > Proof Setup
• Convert to CMYK by going to Image > Mode and select CMYK. 
• Save the image

The image on the left shows the adjusted, print ready version where I used Photoshop's gamut warning to correct colours. 

The image on the right is a straight conversion from RGB to CMYK (no adjustments). While the difference may not be huge, the adjusted version has more vibrancy in the blues and greens (which tend to be 2 of the main problem 'colours' when converting to CMYK).

 

How to insert HTML signatures in Windows Live Mail

In this post I will show you how to quickly insert a HTML signature in Windows Live Mail. If you are using Window Mail or Outlook Express, the process is almost exactly the same, as they all belong to the Microsoft stable and are built using many identical features (even though the look and feel is different).

First you need to have created your HTML signature. Check out my earlier post which shows you how to do this: How to create your own html email signature.

Struggling with the HTML side of things - Want a quick solution?

If you find it a bit daunting to create your html signature from scratch, there are plenty of free (and paid) tools available, which can do most or all of the 'behind the scenes' work for you... A Google search will throw up many options, or you may want to try:

• WiseStamp - a free plugin for Chrome and Firefox. Create your signature using the visual editor, which also lets you insert social networking links, quotes and more. You can then use the platform to automatically insert your signature in emails sent with Gmail, Yahoo, Hotmail - or you can copy the html code and save it as a file to insert manually when using a different email client. Note: If you want to remove the advertisement tagline below your signature you will need to upgrade to a paid version.

Before you attempt to configure your signature in Windows Live Mail, make sure that you have saved your signature file (for example my-awesome-signature.html) in a folder on your computer where you will easily find it – it is important that you do not move this folder as your local machine inserts the signature from this location every time you send an email (any images used in your signature will need to be uploaded and linked to in the html code).

Open Windows Live Mail 

Click on the blue menu tab (top left)

Select Options & Click on Mail

Click on the Signatures tab and then click the New button

Click on the Rename button and give your signature a new name

Next - Select File as signature type - and click the Browse button

Locate and select your signature file

Note: make sure you select to view HTML files or you won't see the file

Click Apply and OK to save your new signature (you can set it to be the Default Signature if you like, or you can leave that for later when you know if this is the one you want to use as your main signature).


Compose a new message to test your  Email Signature 

In message mode the quickest way to insert the signature is by clicking the "Other" dropdown menu - select Signature and click on your new signature to insert it. You can also go to the Insert tab at the top of the message and insert the signature that way, whichever works best for you. 

Signature successfully inserted in new message

Test your signature by emailing it to yourself - if you have more than one email address (using different email clients) send a test to each one, as this will give you a better idea of how your signature is performing.

How to create your own HTML email signature

A signature at the end of your email is a way of personalising or 'professionalising' the way you sign off the emails you send. To create your own signature is relatively easy - to make your recipients see the signature exactly the way you do is a different story, and here are a few reasons why:

• Email Clients (such as Gmail, Windows Live Mail, Thunderbird, Yahoo...) all manage and display emails in their own unique way. I have spent a lot of time ranting over the fact that 'Not all browsers are equal', but have come to the conclusion that browser differences are minuscule compared to the differences dished up by the various email clients on the market.
• End User Settings - Basically people set up their email account to display emails the way that suits them. For example, if someone selects to display all their emails in plain text, this will ignore any HTML content in your signature and only display the text component. 
• Images blocked or turned off - Some email clients block images by default (the end user has to manually accept or 'show' images in each email, or edit their settings show external images by default). The main reason for images being blocked is spam protection, though people with slow internet connection may also select to not show images (as images take longer to load than text). 

While you cannot control all aspects of how your signature will appear to your recipients, you can arm yourself with enough know-how and tools to ensure that most people will see it the way you intended it to look.

Create your own HTML signature

The HTML Signature example:

The Code:

<table width="300" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td valign="top" style="padding-left:10px">
            <br /><b>
            <span style="font-family:'arial','sans-serif'; color:#444444;font-size:10pt">
                trinity tricks</span></b><br /><br /></span>
            <b><span style="font-family:'century gothic','sans-serif'; line-height:1.1em; color:#818286; font-size:9pt;">web design | computers | graphics
            <br /></span></b>
            <span style="font-family: 'arial','sans-serif'; color:#444444; font-size:7.5pt;">
            <b>visit:</b> <a href="http://trinitytricks.blogspot.com" style="color:#444444; text-decoration:none;"> trinitytricks.blogspot.com</a></span>
            <br /><br /></span>
        </td>
    </tr>
    <tr>
        <td valign="top" style="padding-left:10px; line-height:.5em;"><a href="http://trinitytricks.blogspot.com/" target="_blank"><img src="https://lh6.googleusercontent.com/-zvve--z_zhq/uedz2siyd7i/aaaaaaaaagy/rsjmq7cjeba/h64/ttsign.jpg" width="300" alt="trinity tricks" border="0" /></a></td>
    </tr>
</table>

The How To:

The section above shows the code I wrote for the Trinity Tricks signature (everything except the thin border around it, which is just for size illustration purpose). As you can see, the signature is contained inside a small table, which makes it easier to control the display properties.

Open your preferred html editor - I use Notepad++, but any editor will do the trick (Notepad, Dreamweaver, etc.) and start by creating a table to hold your signature. If you are using an image, you will need to resize it to fit and then upload it (so it can be viewed by your recipients).


Things to remember when creating your signature:

• Keep it simple
• Use in-line styles to define fonts, colours and placement of your text and images. Any element you haven't specified will inherit styles from outside your signature (html properties in the email or email client / user defined settings), which could result in a bit of a dog's breakfast so to speak...
• Font family (use web safe fonts such as Arial, Century Gothic, Helvetica, Trebuchet MS)
• Font size - specify in pt or px
• Line-height - specify (in em) to control space between each line
• Colour (remember to use the US spelling: color)
• Alignment, Padding & Margin - enable you to further control the placement of text & images.
• Alt tags on images are useful - especially to those who have turned off images
• Any image you want to show in the signature must be uploaded and referenced with an absolute link (starting with http://) - You can use ftp to upload your image to where your website is hosted, or upload it to your blog, picassa album or any other online image hosting you choose. If you reference the image to a place on your computer... you will be the only one who sees it.
• Save your signature file as a html or htm file to a place on your computer that you won't be changing or moving around (this is important if you want to insert the signature using Windows Live Mail, which I will show you how to do in the next post).
• Test your signature - open the html (or htm) file in your browser and see if it looks the way you intended, tweak if necessary.
• Do not include <html> <body> or <!Doctype... > in your signature file 

When your HTML signature is looking good, it is time to move on to inserting the signature in your email ... 

This post shows you how to insert a HTML signature using Windows Live Mail



Some email clients (both webmail and 'mail to your front door') include a signature editor in the settings area. Before you insert your html signature, make sure the editor is in 'source' or 'html' mode (otherwise you will be sending the html code as your signature!) - Paste your html signature code and save. You can generally also define if the signature should be included in all your outgoing emails or inserted manually.


If you are using Gmail (which currently doesn't support html signatures), this little work-around will help insert your signature: Download WiseStamp - a free plugin for Chrome and Firefox. When you have downloaded the application, you can paste your HTML signature in the editor, save it and allow WiseStamp to insert the signature in your Gmail emails...

How to embed a YouTube video on your Website or Blog

Simply login to your blogger account or your website admin area (or use FTP access) and follow the simple steps below:

If you have your own YouTube channel where you post videos, you may want to show these off on your website/blog. It is very easy to embed videos and let your website/blog visitors view them without having to leave your site.

A word of caution before we start: If the video isn't made by you, then you obviously don't own the copyright to that clip, which means there could be copyright issues involved. Do not post commercial or branded videos on your site (unless you own the copyright). If you want to post a clip made by someone else, it doesn't hurt to seek their permission before you do. Always give credit to the owner / maker of a video (and provide a link back to their YouTube channel), never attempt to pass other people's work off as your own. Right... having covered copyright, we're ready to move on to the simple steps of embedding your video:

Here's a quick video showing how to embed a YouTube video on a blog

Step 1: Locating where to place the embed code

Using your Blogger account:

Create a new post and type the text you want to appear before the video. Click the HTML button and scroll to the bottom of the code (or to where you want the video to appear).
This is where you will paste the embed code... (see step 2).

---

Using your website CMS (content management system):

Open the page you want to embed the video on in the text editor - and type a few words where you want to place the video. Next, use the toolbar  to access Source (or HTML) mode. Note: Your toolbar may look different, depending which CMS your website is using, but generally you will have a text editor with functions to edit in both compose and source mode.

Look for the words you just typed and place your cursor just below on a new line...
This is where you will paste the embed code... (see step 2).

---

Using FTP to upload edited pages to the server hosting your website:

Open the page you want to embed the video on using your preferred html editor. I use Notepad++, but any editor will do the trick. Locate where you want to embed the video (add a heading or some text if you like), and place your cursor ready for pasting the code from YouTube...

---

Step 2: Copying the embed code from YouTube

Open a new tab or window in your browser and open the YouTube video you want to embed. Below the video you will see a Share button - follow the steps below to copy and insert the embed code on your website or blog:

• Click the Share button to expand sharing options for the video. 
• Click on the Embed button to show the embed code. 
• Tweak settings for your embedded video below the code: 
• If you don't want to show related videos at the end of your video, make sure this box is un-checked.
• You can change the display size of the video: select a size option or enter your custom size.
• When you are done: Select and copy the embed code in the box above
• You are now ready to paste the code in the location you prepared in Step 1

Note: If there isn't an embed button, this generally means that the video maker/ owner has disabled the embed function for that video. If the video is yours, you may want to have a look at the settings in your video manager (click the advanced tab) and make sure that you haven't disabled embedding by mistake.