/Tutorials/ Halftone filters

12/07/2006 | Filed under Design > Tutorials

Find out how to add some visual punch and interesting effects to your web site’s graphics by working with Photoshop’s Halftone Filters

Photoshop’s Filters menu. Yeah, we know, all good designers steer well clear of it, right? Well, apart from the blur filters and the odd trip to Sharpen -> Unsharp Mask, of course. Actually, that’s not quite it. Although it’s true that overuse of filters is a very bad idea, which will only make your work look dated, unprofessional, illconsidered, or all three, careful use of filters can add visual punch to your work, especially if you concentrate on one or two filter types for a particular look and feel. Be careful not to mix and match too many ‘artistic’ filters, or you’ll end up with a site that has a confused visual style.

If you aren’t entirely sure what halftoning is, it’s when a continuous-tone image is converted into an image composed of dots of varying size and intensity. When the dots aren’t far apart, the eye sees shades of tone, but when the dots are too small, or the space between them too large, the eye starts seeing dots again. You can see halftoning most prominently in low-resolution publications. Look at an image from a distance and then from close up. In this issue’s tutorial, we’re going to check out two of Photoshop’s halftone filters.

Part of the process of being creative is in using tools in a manner other than what they were designed for. Sure, you’re not supposed to be able to see the dots when converting images to halftones, but it provides an interesting visual texture.

 

TUTORIAL 1. Applying halftones to gradient backgrounds

Step 1: Create a new RGB document in Photoshop and press D to reset the toolbar colours. Using the Gradient tool, Shift-drag a Foregroundto- Background gradient about 150 pixels from the top of the image. You can use the Info palette (Window -> Info) to gauge how long your dragged line is.	Step 2: Go to Filter -> Pixelate -> Color Halftone. In the Color Halftone dialog box, set Max. Radius to five and all of the Screen Angles (Degrees) values to 45. Note that by changing the value of the Max. Radius setting, you can make the pattern of dots more or less prominent in your image.	Step 3: Click OK and your gradient will be rendered as a halftone pattern, as shown in the screen grab. Adding some colour to this is simple: add a new layer and fill it with a flat colour using the Paint Bucket tool. Use the Layers palette’s Mode drop-down menu to change the layer’s mode to Multiply.
Step 4: To use this image as a web site background it has to tile. Zoom in and carefully use the Crop tool to ensure the start of the pattern is at the left-most edge and its end is at the right-most edge. Don’t make the crop too narrow – some browsers choke when tiling tiny images. A few hundred pixels wide is fine.	Step 5: Go to File -> Save for Web to bring up the Save for Web dialog box. Because the image has few colours, choose GIF as the format, and leave the Colors setting in its default state (images created in this fashion tend to use fewer than 100 colours and have smallish file sizes, and the image will be cached anyway).	Step 6: In Dreamweaver, apply the image to the web page’s background: create a CSS rule, choose Tag as the selector type and type ‘body’ in the Tag field. In Background, set Background color to the value of the background colour from Photoshop, Background image to the location of your exported image, and Repeat to repeat-x.

TUTORIAL 2: Converting a photograph to halftone

Step 1: Open your digital photograph in Photoshop and perform colour and level correction on it as appropriate, via the Image -> Adjustments menu. Press D to reset the toolbar colours to black and white, and then go to Filter -> Sketch -> Halftone Pattern to bring up the Filter Gallery.

Step 2: Select Dot from the Pattern Types pop-up menu in the settings area and set Size to one and Contrast to 50. By doing this, you’ll create a stark, fully halftone, black and white rendition of your original photograph. Click OK and go to View -> Actual Pixels to see the image at full size.

Step 3: Although a section of such an image can look great when used as part of a web page, halftones also look good when you reduce and therefore slightly blur them. Try halving the dimensions of the image for an interesting effect. As for exporting, a fairly compressed JPEG is suitable for large halftone images.

TUTORIAL 3: Using a halftone pattern to enhance text

Step 1: Halftones can also be used to provide some added visual interest to a graphical heading. To start, select the Text tool, use the Character palette to select a suitably chunky and large font, and type out your heading. Use the Color field on the Character palette to colour the text something other than black or white.	Step 2: Create a new RGB document that’s both longer and wider than your text (it should be at least a third wider, although it can be significantly bigger than that). Press D to reset the toolbar colours and then go to Filter -> Render -> Clouds, which adds a random cloud-like pattern to the canvas.	Step 3: Run the Difference Clouds filter a couple of times (Filter -> Render -> Difference Clouds) to enhance the pattern, adding increasingly distinct areas of light and dark – this will make for a more effective halftone image than just running the Halftone Pattern filter directly after completing step two.
Step 4: Go to Filter -> Sketch -> Halftone Pattern and use the settings from tutorial two. You’ll end up with a monotone image that has halftone dots between the black and white areas. Copy and paste this image on to a new layer, above the text created in step one, and set the layer’s mode to Multiply.	Step 5: Move your cursor between the two layers, hold Alt (Option on a Mac) and click. A clipping mask will be created, meaning the halftone layer will only be visible within the text. You can still edit the halftone layer, deleting content, changing its size, and moving the pattern until it looks how you want it to.	Step 6: All of the elements shown over the past two pages can be combined into a single design, as we’ve done in the screen grab above. A Photoshop mock-up for our finished design is on the cover CD, and we’ve also provided the full web page for you to enjoy experimenting with.

 

Comments

mary schlesinger / 14/11/2006 / 19:07

Where can I purchase ready-made halftone patterning techniques? Plaids, for instance.

krishnamoorthy manickam / 30/11/2006 / 06:05 / http://www.boonze.com

Nice tips....

Simon Stern / 11/03/2007 / 14:43 / http://www.luxurygiftscorp.com

Great tutorial. When you click on the pictures it would be nice for them to blow up to a bigger size. Other then that its great.

Mugunthan ramasamy / 24/04/2007 / 12:14 / http://techconet.co.in

Nice Teaching...
WE want some maximised picture,atleast in mouse Rollover...

Mathew / 25/07/2007 / 01:47 / http://www.mbwebdesign.co.uk

If anyone has an answer to Mary's question I'd also be grateful to read it

Madeline / 01/12/2007 / 06:12 / http://ozmad.net/forums

Corel Painter has a "Weave" effect that allows you to create any pattern of plaid or weave you would like. I do not know if Painter Classic includes it.
Some examples:
http://img528.imageshack.us/img528/5027/plaidswp0.jpg

Nils / 07/04/2008 / 14:46 / http://www.greatwavedesign.com

Thanks for the tutorial. I love using half tone as a background for text or general layout. Tutorial 1 also works great on any area that has color variations (clouds, foggy areas, shapes, etc.) for great backgrounds. It's very popular in ads and patterns.

annelee / 15/05/2008 / 11:47

So easy to learn steps are so detailed thanks a lot

Toni / 23/06/2008 / 23:32 / http://vector-art.blogspot.com

Hey great tutorial ! I've been looking for halftone tutorials for long time. Thank you very very very very very much :)

Regards !

Add a comment

Your name:


Your email: (Not displayed)


Your website: (optional)


Enter your comment here: