I was working on a design for Lawrence Griffiths (LookingForAWebsite) who is setting up a website for a primary school. As the school is set in trees – the design brief was to convey this feel, meaning lots of green tones and shades. All was going fine until I wanted to upload the mockups as optimised jpgs for preview and feedback. With my file setup as RGB, 8 Channel and the ‘convert to sRGB’ set in the ‘save for web’ window – I thought I was doing everything I needed to simply optimise my mockup.
But how wrong I was… again, I hit the odd colour shift problem – my carefully chosen green tones taking on a completely different shade as soon as I went into the ‘save for web’ window… :’(

I’ve had this problem before and always somehow managed to get the result I wanted. Knowing I have only scratched the surface as far as colour calibration is concerned – I went searching for answers… and yet again: the kind kowledge-sharing experts to the rescue :-) I still don’t know enough about colour profile but as I am now working with a much better setup I wanted to share what I’ve learnt.

On their beautifully crafted web design blog, Doug Avery from Viget wrote an article on this very issue: “The Mysterious “Save For Web” Color Shift“. Doug gives a 3 step solution to getting your colours right for the web: setting up Photoshop to use the correct colour profile, setting up the Proof to view any given file on the right monitor setting and how to deal with the default presets in the ‘save for web’ option. The article received a huge number of comments – some by happy webdesigners which this solution worked for, some by colour experts who went into more depth on this issue discussing many more aspects of monitor calibration.
If you are interested in this issue you should definitely read this article and all the comments. It seems some people with more expertise disagree with Doug’s advice and recommend different solutions. As I am not an expert myself – I would suggest you read the comments yourself and follow up on any links to other articles given.
A must-read should be “Best Practice Colour Setup for Web Designers” by Nina Richards.

The comments show some tension between the practical wedesigners who are happy to run with the first solution given (I have to admit that this is what I did as time pressure was on I did not have time to read all the comments) and the colour experts whose knowledge runs a lot deeper. Only after Doug’s solution didn’t work for me did I go back and take time to read the comments – and JeanP came to my rescue.

Jean described and explained clear steps for me to take in order to solve my green shift problem – and it worked beautifully :)  Please bear in mind that this is by no means the one and only perfect solution – rather what I setup following Jean’s advice.
So here is an outline of what I did in order to keep my colours true to their original.

1. set system preferences for display: System Preferences > Display > Calibrate

   → follow the instructions setting Target Gamma to 2.2

2. next, open Photoshop (or close all files) and edit the colour settings: Photoshop > top menu > edit > color settings

   → choose the appropriate setting for your location
   please see the screenshot for additional notes.

   NOTE: I am not sure yet how to sync colour for all Creative Suite apps.

3. Photoshop: proof setup: top menu > view > proof setup

   → choose ‘Monitor RGB’ to view the file as it would display typically on an average RGB monitor.

   Jean says: “Don’t adjust your color after while in Monitor Color Preview, just consider it a preview of how the image will look in Firefox. Turn the preview back off. “

4. 
   → ‘save for web’

   NOTE: the first screenshot shows the default option of ‘convert to sRGB’ which I have always been using. In this case, if I understood everything correctly, it should not affect my image as it is already sRGB.

   Jean suggests to save the image in 2 different versions and previewing it in the different browsers to choose the final version for use on the website. She kindly set up a sample with my image saved in the 2 different versions – showing a clear difference of the colour difference in Safari and Firefox – please do have a look for yourself.

Well, that is it. A HUGE thank you to Jean for all her input, help and advice on this. I feel I am now much better setup and doubt I will have to struggle with my colours as much as I did before – still, there is still a lot to learn.

Even though Photoshop does come with a good selection of default brushes – it is a lot of fun to create your own brushes and brush sets, as well as giving you more creative freedom. If you have never created your own brushes and think this might be complicated – don’t worry… It’s very easy – you might need a little time to experiment until you get the results you are after but the actual brush creation is quite simple.

You can understand a custom brush essentially as a black and white image which you can then use to ‘stamp’ your image with. Note that our custom brushes would not be used as the airbrush, for example, with which you would imitate the real tool and use via click and drag. A custom brush however would be applied by a single click – though clicking and dragging can at times produce some interesting results as well.

You can create a new brush from anything you have drawn or painted yourself – or you can use an image edited to suit. Once you start creating a lot of specific brushes you can then also save your own brush presets for easier use.

1. painting a brush preset

1. create a new document in Photoshop using a white background (for clearer view of the new brush shape)
2. create an empty layer and using a soft brush, create one dot in the middle of your document as shown below
3. edit the dot using additional brush strokes, transformations or filters – here I have used the Liquify filter:
   top menu > filter > liquify
   
4. once you are happy with your shape – choose the rectangular marquee tool and draw out a selection around your newly created graphic. Check that you have the correct layer selected and make sure not to cut off any edges as this would also become part of your new brush and might not give you the desired result.
   
5. with your selection active – define your new brush: top menu > Edit > Define Brush Preset…
   name you brush and click ok.
   
6. you new brush is now saved as part of the current brush set – to try out your new brush, select the brush tool and go to the brushes palette. To see the thumbnail of your new brush – set the viewing options of the palette to ‘thumbnail’.
   
7. with your new brush selected – you can now have some fun experimenting… just to get you started:
   • click more than once on the same area to intensify the brush stroke
   • use different brush sizes
   • experiment with different pain modes (remember that these will need some existing colour or image to show their effects)
   • create new brushes from the your current bush as variations (mirrored, different scale of effect…etc…)

   

2.1 creating a brush preset from an image – TEXTRUE BRUSH

1. create a new document in Photoshop using a white background (for clearer view of the new brush shape)
2. open up a suitable source image – this can be anything, from a scan, a photo or any other photoshop work you might have done yourself.
   to follow the next few steps – feel free to download the source folder here – all images © image*after and morguefile
3. check image size and resolution and edit setting to suit your needs.
4. to create a soft-edged texture brush it will be important to edit an appropriate selection – here a layer mask has been applied:
   
5. as any brush preset works with black and white – you will need to edit the image’s colour range. You can apply any working methods you usually use to render the image greyscale. I prefer to work with adjustment layers whenever possible as they allow more flexibility.
   
6. next, you will need to edit the outer edges of your texture. I have added a new layer on top with solid white and used a layer mask to edit an irregular and soft edge, fading the new texture.
   
7. you can now define your new brush (top menu > Edit > Define Brush Preset…) and try it out…
   

2.2 creating a brush preset from custom graphics – CORNER BRUSH

1. create a new document in Photoshop using a white background (for clearer view of the new brush shape)
2. create your graphic either working in colour and converting to greyscale before defining the brush – or working only in black and white from the start.
   I have used several layers with varied opacities to create the visual shown below.
   
3. in the case of a corner brush – make use of the sharp corner and create your graphics accordingly. Imagination is your only limit – have some fun and take some time to just play, create 4 different corner brushes, forming any sort frame, use some of your vector artwork – or find inspiration in ornamental fonts…
4. once you have completed your graphic – you will need to merge all used layers in order to define your brush.
   It is good working practice to always keep hold of a layered version of your original artwork or image edits. I generally set up a folder for this (see screenshots) and keep all layers backed up.
   You can quickly and easily produce a merged layer containing all artwork while at the same time keeping all existing layers as backup (note: this is for Photoshop CS2):
   • highlight all layers
   • hold down the ‘alt’ key and choose ‘Merge Layers’
     (top menu > layer > merge down or: use the options on your layer palette)

   

5. select your artwork layer and define your brush (top menu > Edit > Define Brush Preset…)
   … and have some fun trying it out and creating more …
   below you can see the brush applied to the previous sample graphic.
   

2.3 creating a brush preset from object photos – OBJECT BRUSH

1. create a new document in Photoshop using a white background (for clearer view of the new brush shape)
2. open up a suitable source image – this can be a photo of any object of your choice. As we’re discussing brushes here – I have used an image of a paintbrush with paint.
   [the image used is in your source folder - download folder again - all images © image*after and morguefile]
3. as with the other textures created – the image needs to be edited to suit.
   quick sum up:
   - check size and resolution and edit to suit
   - edit colour range to greyscale
   - fade edges as desired for better blending
4. remember you will need a single layer containing all artwork to define your brush
   (top menu > Edit > Define Brush Preset…)
   
5. to use the brush – give yourself some time to experiment with different sizes and colours. Work a layered set up to make use of the layer modes and opacities.
   The sample image with added brush:
   

3. saving custom brush into sets – BRUSH SETS

Once you have created a number of brushes – the currently loaded brush set might be a little heavy to work with. The more brushes you will need to load – the more processing power photoshop will require….
To create your own brush set – use the Preset Manager. You can access its panel via the brushes palette.

You do not need to delete the default brushes – but while creating you own brush sets this might be easier to work with than looking at a ever growing number of brush descriptions.

Now select all your own custom brushes and save your set.

To use any brush set – simply load it via the brushes panel. You can choose to ‘Append’ the selected brush set which will replace any current brushes entirely – or you can load several brush sets at once.
Depending on the number and size of your brushes – you should not overload your brushes panel, this can slow down Photoshop quite a lot and could cause a program crash if you do not have enough power.

… and that’s it – have fun and go crazy with brushes…

1. open your image in Photoshop – here the image used is that of a yellow flower on dark coloured rock. Though the contrast within the image is quite vibrant and effective – the aim is to tone this down and edit the image to be used as background graphic, tied into the colour scheme of a site design, for example.
   
2. In order to edit this image as duotone – you will need to make sure that the image mode is set to 8Bit/Channel – and turn the image into a grayscale image.
   You could simply go to the top menu, select image and mode > and choose the grayscale option.
   However, it would be best to fine-tune your image using the channel mixer adjustment layer – rather than choosing this automated conversion only.
   
3. to apply the channel mixer options – go to the layer palette and create a new adjustment layer. The setting window will open – allowing you to edit each channel’s percentage setting. To achieve a black and white image, ready for grayscale mode, check the ‘Monochrome’ box in the bottom left corner.
   You can now edit the colour information of each channel separately which will allow you to achieve richer and more defined grayscale image to use.
   
4. Once you are happy with your adjustments – click ‘ok’ to confirm. Now you are ready to turn the image into grayscale using the top menu, as mentioned above.
   top menu > image > mode > grayscale
5. You can now turn your image into a duotone image.
   top menu > image > mode > duotone
   
   select duotone form the drop down menu and click the Ink 2 colour icon to select your chosen colour.
6. Again, you have an option to fine tune this effect – by clicking on the curve icon you can edit the way the duotone effect is applied to your image.
   
7. You should now have a nicely shaded duotone image ;)