My Blog for your Knowledge

We'll make sure your website works for you...

The Road to Web designing

Art Illustrations

Do you want to look great?

10 October 2009

Use layers to create dynamic depth

Creative genius Neil Duerden has been wowing the design community with his effects-heavy work. Here’s how he uses Photoshop’s Multiply blend mode to add depth.

Dynamic depth in Photoshop

border=0

For this tutorial, we’re going to be primarily using Adobe Photoshop to create an image that layers a stack of simple effects. The result is a more complex final image that shows considerable depth in its composition.

This style of image is simpler than you’d think to create, but can demand a lot from your system.

You will be switching between Adobe Illustrator, Photoshop, and Corel Painter as well, and throwing a few hand-rendered elements in just for good measure, and to bring out the hands-on creative in you.

A central element of this tutorial is the use of the Multiply function in Photoshop. Part of the darken family of blending modes, at its most basic it compares the blend layer’s pixels with the base layer on a channel-by-channel basis, but rather than simply choosing the darker of the two, it multiplies the base colour by the blend colour.

A multiple of black will always be black, and anything multiplied by white is unchanged. Otherwise, the net result is always a darker underlying image.

Become a mixologist

Multiply can seem odd at first glance. The concept of mixing paints – red and blue, for example – is simple to grasp. Multiplying is similar to the leap between addition and multiplication in mathematics.

To understand it, here’s a mini tutorial. Try creating a document that has two layers in Photoshop. Fill both layers with the same mid-range colour. A light grey works best here.

Next, switch the top layer’s blending mode to Multiply, and you’ll see the mode in operation, with the blend colour a much darker grey.

The key for this tutorial, though, is to focus on experimentation, especially with blending modes such as Multiply and Photoshop’s layer effects, and having a great starting image. While there is a lot you can follow directly along with – and the splat.ai file is included on the cover CD so you can do just that – an image such as this is heavy on creative fun.

Part of creating a complex image such as this is to be a magpie when it comes to images. From the base mono image through to hand-drawn elements, cutouts and scanned elements, our image is alive with points of interest and texture.

border=0

Step 1
First, you need to obtain a mono shot that has good deal of contrast. The shot can have a background or be on an infinity screen, though bear in mind that each type will give a different feeling to the final piece. Your main task here is to find a shot you like, as you will be staring at it for some time.

border=0

Step 2
Mask off the subject as tightly as possible, by creating a duplicate layer and adding a layer mask set to reveal all. Next, select the mask itself and draw around the image you wish to keep.

You can use feather-edge brushes to allow for semitransparent edges. Alternatively, you can use masking software like onOne Software’s Mask Pro 4, which makes this bit a lot easier.

border=0

Step 3
Now, add a layer in between your two existing layers and add a splash of colour. To do this, simply add a gradient of your chosen colour to create a little contrast and use the hue command in the layer effects. Don’t make this too obvious, as the effect should be subtle.

border=0

Step 4
Next, switch your image into Adobe Illustrator. With the image opened, begin to draw vector lines over the top. Remember to place it on a separate layer and lock it before you start, as accidentally moving the image as you draw your vectors is not good!

Draw whatever you fancy, and in keeping with your chosen image as this is where you stamp your mark on the piece.

border=0

Step 5
If you have kept the original the same size in Illustrator, all you need to do is paste it into Photoshop and it will be the correct size.

If you’re not happy with the colour, you can simply adjust the hue by going into the Image>Adjustment>Hue and saturation menu.

border=0

Step 6
Now highlight vectors using the Burn tool – using this will give added depth. You should vary the brush size to get the best possible result.

You want to make this appear as a cross between a real look and a plastic falseness to help it stand out from the original layer. This will obviously differ depending on what you used as a base image.

border=0

Step 7
Duplicate up the top layer of the subject, and then adjust the hue and saturation as in step 5, using a colour that matches the composition of your piece.

Next, add more sections to your layer mask to hide areas and give more interest to the viewer. Use your own personal judgement here, and don’t shy away from experimentation.

border=0

Step 8
Next, freehand draw a shadow beneath the model and using the layer effect Multiply. You need to place one below at 100 per cent opacity, and one above at around 50 per cent opacity to hide the joint between the model and the background.

border=0

Step 9
Open up the file splats.ai supplied on this month’s cover CD and paste these onto your image, and set the layer to Multiply. Place this layer behind the main masked subject layer and experiment with the layer opacity to get the effect level you think is right.

Repeat this process several times, adjusting the opacity each time, until you get the complexity you desire. Time for some hands-on creativity. Get out your pen and paper and do a few hand-rendered drawings. Scan these in and place them behind your subject image.

The image layer then needs to be set to Multiply. If necessary, use the Edit> Transfer>Perspective feature in Photoshop to get your scanned in drawings to better match your composition.

Time to swap programs. For this final stage, we’re going to use Corel Painter. Open your layered file in Painter and duplicate the master layer of the girl, then apply the Effects>Fill>Pattern filter and choose the rose design. Then apply this to the layer top layer using the Gel layer effect, reducing the opacity to around 15 per cent.

border=0

Step 10
Now you need to get a picture of an item that complements your image, and clip it out and place the image behind the main image, adding a slight drop shadow – enough to boost the contrast.

You then need to duplicate this layer, resize it, and change the opacity and layer modes in random to get a mixed effect. There is no science to this – just experiment.

border=0

Step 11
Next, duplicate the splat effect and flower layers, changing the hue and saturation to fit in with the composition. This will give a more blended feel to the image as a whole. Next, multiply these layers down using various layer effects. I can’t stress enough that this is all a chance to experiment!

border=0

Step 12
Finally, introduce some other elements using the same effects as with the flowers in the earlier step. Don’t be shy – just pile them up and work on your composition. You can take this as far as you want.

Remember this is all about experimentation and making it different so try to get a good selection of items in at this stage. Drawing vectors and importing them can be a good idea to add more depth.

border=0

Step 13
Continue experimenting in this way, adding layers and elements until you’re happy. Then just flatten your image and save the file.

Author: Neil Duerden

2 October 2009

Create amazing sticker art


In this masterclass, Leicester-based duo Waste – the combined talents of Daniel Lowe and Norman Hayes – have drawn inspiration from the likes of Ed Roth and Jim Phillips to create an astounding sticker collection.

And not only can you explore how the duo create their art, but we’ve included the full sticker sheet free with this issue for you to slap onto surfaces anywhere.

Mention stickers to professional designers, and the inspirational styles of the likes of Jim Phillips and Ed Roth spring to mind. Roth, who was part of the 60s ‘Kustom Kulture’ in Southern California, kickstarted a whole generation of grotesque characters that have since formed the basis of sticker and card art.

It was a mantle taken up in the mid-70s to late 90s by Phillips, who transformed the art style into detailed skateboard deck art that came to dominate the scene.

Roth, who was born in 1932, was an artist and cartoonist who was behind the hot-rod icon Rat Fink, and other extreme characters. His passion was custom car building, but his staggering array of outsized, imaginative monstrosities that appeared as cartoon characters sealed his fame.

It’s reported that Roth’s hatred for Disney’s Mickey Mouse led him to draw the original Rat Fink. After he placed Rat Fink on an airbrushed monster shirt, the character soon came to symbolize the entire hot-rod/Kustom Kulture scene of the 1950s and 1960s.

Fast-forward to the mid-70s, and the other great inspiration for Waste’s style – Jim Phillips – stepped into the limelight. Best known for his rock posters – his second poster was for the first East Coast appearance of The Doors – from 1975 to 1990, Phillips was art director for Santa Cruz Skateboards, where he created hundreds of skateboard deck, T-shirt, sticker, and ad art designs.

His stickers became so popular that his designs chalked up sales of eight million over a two-year period. These two sticker-design giants were responsible for a cultural phenomenon. You can find out more about Jim Phillips at www.jimphillips.com, and more about Ed Roth at www.edroth.com.



Step 1
We're going to design a sticker sheet that will be printed on self-adhesive vinyl and die-cut. To start, launch Photoshop and create an A5 landscape document, setting the resolution to 300dpi, and colour mode to CMYK. Name it sticker sheet layout.



Step 2
You'll need to decide on a few informational elements before you start the design proper. Things to conside include company name Web address, contact details and any extra branding. You should also look back at any some sticker art from the 60s to early 90s – when the likes of Jim Philips and Ed Roth produced some amazing examples – for inspiration, as it's from here we'll be taking our lead.



Step 3
Before further work in Photoshop grab yourself a pencil and paper, and start producing some rough sketches of possible layouts and sticker ideas.

Once the layout and sticker designs have been chosen, you then need to map it out onto an A5 sheet, and transfer those positions roughly to the layout in Photoshop (you can use a separate layer to block out sticker areas, using the box and polygon tools to create a map of your sticker sheet). Save the document as Sticker sheet Layout.psd.



Step 4
For this masterclass, the stickers themselves are going to be pen and ink graphics that will later be coloured in Photoshop. There are many ways to draw pen and ink graphics but the method in the following steps best suits our own style of illustration.

Step 5
We've a good idea of what our sticker art will be, so it's time to sketch them. Key tip here – always ensure you use a jet black, ultra sharp pencil so you produce clean, sharp edges. Smudgy designs don't translate to stickers that well.



Step 6
Once your sticker art is sketched in pencil, it's time to link them up. Our personal preference is to use tracing paper to re-trace our pencil drawings in pen, improving the drawings where possible. Heavy up the outlines, especially on the underside of the character forms, and add texture and shading where needed.



Step 7
The next step is to bring the inked work into Photoshop. To do this, you'll need to access a scanner, which will scan each piece of artwork. Alternatively, you can always work in digital form in the pen-&-ink stage, bypassing the need to scan anything in.

Once scanned, open each sticker illustration into Photoshop and choose Image > Mode > Grayscale. Next choose Image > Adjustments > Brightness and Contrast and adjust each image to get a nice crisp line.



Step 8
Next, copy-&-paste each of your sticker designs onto the Sticker Sheet Layout document, and arrange them in your desired layout. You can toggle the position layer on and off as you work for accurate placement.

Because the stickers will be die-cut, it's important to allow space all the way around each of the stickers to prevent any details being cropped. No design should butt up against any other design.



Step 9
The next step is to colour up your stickers on the sticker sheet layout document but, before you do, you need to decide on the colours you are going to use. We want the colours to be vibrant and, because we don’t have the luxury of using spot colours, we have decided to use CMYK.

But, how you handle it is different to the standard CMYK working. For this sticker style we are sticking to pure CMY and K values – and avoiding any shades.



Step 10
First, you need to organize your layers. On the layer palette, highlight all layers that contain your sticker art and sticker sheet info, and choose Layer > Merge Layers (Cmd/Ctrl+E). Rename the layer Black, and set to Multiply from the drop-down menu on the layer panel. You need to keep the layer top-most and, if you haven’t already, delete your positioning layer as suggested in step 3.



Step 11
Next, create a new layer and name it Cyan. Set the fill colour to 100 per cent Cyan and 0 per cent Magenta, Yellow and Black. Using the brush tool (b) colour up the areas that will be cyan.



Step 12
Repeat for the Magenta and Yellow colours – keep to 100 per cent values for each. Once your sticker sheet is coloured, save the document as a PSD file. It’s handy to keep an unflattened version of your sheet in case you decide to change the colours.

However, for printing, we need a flattened TIFF, so flatten the layered image by choosing Layer > Flatten image, then save as Sticker sheet.tif.



Step 13
With the artwork for the sticker sheet finished, you have one more document to create before it goes to print – a die-cut line template, which we’re going to create in Adobe Illustrator.

Load up Illustrator, create a new A5 landscape document, and choose File > Place to place our artwork. Next, lock this layer by choosing Object > Lock > Selection.

Step 14
Now we need to draw our die-cut lines around each of the areas that will be cut. Set the fill colour to empty and the stroke colour to red and, using the pen tool (p), draw your cut marks as shown.


Step 15
Finally, unlock the sticker sheet by choosing Object > Unlock All, then delete it. You’re left with a die-cut template, which needs to be saved as ‘diecut.pdf’. Job done!



19 September 2009

10 Simple Steps to Better Photoshop Performance

Before getting started with Photoshop, we all should have first visited the “Edit > Preferences” menu and change the “Performance” settings to fit our personal taste and computer specifications, but this isn’t always the case – in many situations designers simply forget these aspects.

If you never changed the default performance settings in your Photoshop or you just want to double check them to improve the Photoshop performance, here are 10 important and useful points that you may want to consider.

1. Adjust The Number Of History States

Maybe you already went through that bad feeling of clicking “undo” dozens of times and realizing that Photoshop wouldn’t provide you with more previous steps, but this problem can be easily resolved by changing the History States setting in the “Edit > Preferences > Performance” menu.

There are more efficient ways of going back and forward in your projects like using the “Snapshots” feature, which are essentially comfortable checkpoints of your work that you can go back to. But if you use Undo a lot, you may want to consider adding more states, e.g. set them to ‘30′. However, be aware that too many states on a single image will usually result in History Palette literally “eating” RAM and if you work with less than 2GB of RAM, you probably shouldn’t using the Undo Feature that often!

Overall, you may add up to 1,000 history state levels in Photoshop.

2. How Many Cache Levels Do You Need?

The Cache Levels setting can be found inside the “Edit > Preferences > Performance” menu, right under the History States. It controls the histogram and the time it takes an image to reappear on the screen after an action is applied to it.

By default, there are 6 cache levels; the number of levels can be increased to the maximum of 8 which will – obviously – increase the rendering speed. It is particular effective when you are working with high-resolution images. When workin with smaller view-sizes, e.g. viewing an image at 50% Zoom, the cache levels will determine the number of “down samplings” allowing Photoshop to perform operations faster.

Photoshop uses Image Caching and if you have a good amount of RAM, like at least 2GB and work with high-resolution images, you might want to raise the level to 8 as the speed performance will compensate the memory loss, but if you have a low RAM amount and usually work with small images only (1-4MB), you may want to lower the value to 1 or 2 as the RAM will be better allocated – storing the images rather then caching them.

3. Keep An Eye On Your Memory Usage

Photoshop really likes RAM and will use every little bit it can grab, but it also allows you to limit the RAM resources of your computer that Photoshop will use, and it even gives you good suggestions for the appropriate range of RAM values it wants. This setting, of course, can be found inside the “Edit > Preferences > Performance” menu, on the Left Side.

The displayed available RAM is the value left for applications after the Operating System loads into memory. If you are going to use mostly only Photoshop, or if you have a low amount of memory, you will probably want to give it 75-80% of the available RAM. But if, on the other hand, you are more of a multi-task kind of person with browser, word processor, mail, Twitter client etc. being always opened, then you might want to limit Photoshop to around 50%.

Efficient Use of Memory

After setting up your memory values, you can keep an eye on how Photoshop is performing. At the base of your image window, click to the right of the document size information and you will be able to choose “Efficiency” which will show you a percentage value. If this value is not 100%, it indicates that if you allocate more RAM to Photoshop, the operations would perform faster. Closing applications or images that you are not using can also increase the efficiency – not exactly a secret, but worth mentioning nevertheless.

4. Use Proper Scratch Disks

Similar to what happened with RAM, Photoshop also uses a good amount of your hard drive space as the so-called “scrath disk” which works as the secondary memory resource. Photoshop assumes that your primary hard drive is its scratch disk, but you can set it up differently with a secondary internal or external hard drive.

If you are going to work with large images, it is recommended that you have a dedicated scratch disk that is different from the one containing the image file. Using different scratch disks is good, especially to avoid killing your primary boot drive when you have just a few gigabytes left.

5. Turn Font Preview Off

Photoshop users (and especially designers) like to have a good selection of fonts always installed and ready to be used; but when the font preview is active, having too many fonts can slow you down. Turning the font preview feature off can be a simple and instant step towards improving your Photoshop performance. To do so, simply go to the “Edit > Preferences > Type” menu and remove the check mark from the “Font Preview Size” option, just as it is shown in the picture above.

6. Use Thumbnails In Your Palettes

Displaying preview thumbnails in the Layers, Channels, and Paths palettes will cause Photoshop to consume some more of your RAM as it will be constantly updating the thumbnails to reflect the changes you will be doing in your project. The memory consumption will keep growing with the amount of thumbnails you have opened at the same time as well as their size.

You could use the smaller thumbnail size or no thumbnail at all to increase your Photoshop performance. To do so, in each palette, select “panel options” from the palette menu as it is shown on the picture above and select the smallest thumbnail size or “None”.

7. Learn How To Use Purge

When you are working on your images, Photoshop stores image data for the Undo, Clipboard, and History features. This data consumes memory, especially if you have been working for a while and have a high number of History States defined (see Point 1 for more on History States).

To eliminate that extra image data consuming your RAM, go to: “Edit > Purge > ( option )”. Keep in mind that clearing History will remove all the history states saved previously and you will not be able to undo your latest actions.

8. Set Maximize PSD And PSB File Compatibility to Always or Ask

Maximize PSD and PSB File Compatibility increases the size of your file by attaching a flattened copy of your image when you save your image. A small amount of extra data is included in the file when you choose this option that ensures that PSD and PBS files saved in Photoshop will open in previous versions.

Additionally, if you want to use the Edit in Photoshop feature in Photoshop Lightroom, this option needs to be on. To change the Maximize File Compatibility option choose “Photoshop > Preferences > File Handling”.

9. Don’t clutter your Photoshop

Of course, you can easily find an enormous amount of free stuff to add up to the default Photoshop brushes, fonts, patterns, etc. but that doesn’t mean you need to download every freebie that comes in your way. Keep it simple! Having too many plugins and other resources installed in Photoshop will greatly decrease performance. Most top designers use a small selection of fonts and brushes that define their style and that can be used in a great amount of ways for literally millions of different results.

10. Reset Default Settings


If you are using a shared machine for your Photoshop needs there is a little Photoshop start-up trick that may come in handy. When the application is launching, if you press and hold: Alt + Control + Shift (Windows) or Command + Option + Shift (Mac), a window will pop up asking you if you want to delete the Photoshop settings file, resetting all of the preferences to their default.

About the author

Marco Sousa is a blogger, computer engineer student and webdesign enthusiast. He is also one of the co-founders of Scarletbits.com, a blog dedicated to high quality freebies, news, tips and tutorials for the web design community.

14 September 2009

Change the Title Tags in Blogger for More Search Engine Traffic

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?
It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.






How to Change the Titles:
  • Go to Layout>edit HTML in your Blogger dashboard.
  • Search for this tag: <title><data:blog.pageTitle/></title>
  • Replace this tag with the following code:
  • <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
  • Save your template and you should see the results in your web browser as depicted in the images below.
  • It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!





  • 12 September 2009

    Download Free Norton Antivirus 2010 Beta

    http://www.symantec.com/content/en/us/home_homeoffice/images/beta/NAV2010.png
    Overview
    Be one of the first to try Norton AntiVirus 2010!
    This beta test version of Norton AntiVirus 2010 is the fastest, most proactive protection against viruses, Trojans and worms we have ever offered. The 2010 version of Norton AntiVirus offers superior performance, improved protection, and tools to help preserve the performance of your PC.

    OVERVIEW:
    This year the Norton Protection System has been enhanced and our new SONAR 2 technology to stop new and unknown threats. To protect your PC’s performance, we have added the Norton Performance System.
    Testing Windows 7? Norton AntiVirus 2010 will protect your Windows 7 system from all types of malicious software.

    Test drive tomorrow’s Norton AntiVirus, today.

    System Requirement:

    This year the Norton Protection System has been enhanced and our new SONAR 2 technology to stop
    new and unknown threats. To protect your PC’s performance, we have added the Norton Performance
    System.

    Testing Windows 7? Norton AntiVirus 2010 will protect your Windows 7 system from all types of
    malicious software.

    Test drive tomorrow’s Norton AntiVirus, today.
    Microsoft® Windows® XP with Service Pack 2 or later Home/Professional/Media Center
    • 300 MHz or faster processor
    • 256 MB of RAM (512 MB RAM required for the Recovery Tool)
    • 200 MB of available hard disk space
    Microsoft Windows Vista® Home Basic/Home Premium/Business/Ultimate
    • Supports 32-bit and 64-bit platforms
    • Must meet the minimum Windows Vista operating system requirements
    Microsoft Windows 7® Starter/Basic/Premium/Professional/Ultimate
    • Supports 32-bit and 64-bit platforms
    • Must meet the minimum Windows 7 operating system requirements
    Email scanning supported for POP3- and SMTP-compatible email clients.
    Browser support for Vulnerability Protection feature:
    • Microsoft Internet Explorer® 32-bit 6.0 or higher
    • Mozilla Firefox® 3.0 and later
    Please read the following before you begin your download.

    Before using this pre-release software, it should be emphasized that it may not display the stability of a final product. You may encounter problems with this pre-release software that may possibly result in data loss. This software is not recommended for production use and it is highly recommended that you backup your existing data before you install this software. SYMANTEC WILL NOT BE RESPONSIBLE FOR ANY DATA LOSS OR DAMAGE TO YOUR COMPUTER AS A RESULT OF TESTING THIS PRODUCT.

    Please note that installing this Beta may uninstall some Symantec and/or other third-party programs already installed on your machine. Please ensure that you have your prior product media (i.e. compact disks) so that you can re-install your products after the Beta version expires. This beta release will expire in 30 days. At that time, you will need to uninstall the Beta software and re-install your prior Norton product. Or, you can purchase the full version and install it.
    Thank you for your help in evaluating the product.
    Your 2010 Norton Product Team

    DOWNLOAD:
    Please read the following before you begin your download.

    Click "Save" when prompted. By default, the file "NAVBetaDownloader.exe" will be saved on your desktop. After your download is complete, click on the file to begin installation.

    Steps to install the public beta version of Norton AntiVirus 2010:
    1. Your installation of the beta test version of Norton AntiVirus 2010 should have started automatically. If it did not, save ‘NAVBetaDownloader.exe’ to your desktop, double-click it to download the product test build and start the installation.
    2. Follow the onscreen instructions to complete installation.

    Please click on the “Download” button.

    Download Now

    9 September 2009

    Master the gradient mesh tool Illustrator


    The Gradient Mesh tool is tricky to master, which leads many digital artists to play with it a few times and then leave it alone, or only use it for specific tasks. One challenge with the tool is that when the mesh is complicated, the gradation of colour between two points forms a hard line instead of a soft gradient.

    There isn’t always an easy way to combat this: instead, the artist has to learn to fool the eye, and even compromise a little sometimes. In this tutorial, Stephen Freeman shows how to deal with this, guiding you step-by-step through how to create this illustration.

    He’ll also illustrate the potential and limitations of the Gradient Mesh tool, and show you how to handle some of the tool’s other little niggles. Gradient meshes use a lot of power, particularly when they get complex, so be patient if your machine doesn’t boast a speedy processor.


    01. Create a quick sketch. In this case, we’ve drawn a Tyrannosaurus Rex’s head. The purpose of this sketch is to lay down the shape of the head as it will appear in the final illustration. At this point it is wise to apply some colour and map out light and shadow areas. Save it as a CMYK image.


    02. When you’re satisfied with the sketch, import it into Illustrator using File > Place and set the transparency to about 40 (highlight the sketch and then go Window > Transparency, or hit Shift + Cmd/Ctrl + F10). Now lock the layer (Object > Lock, or Cmd/Ctrl + 2).


    03. Starting with the bottom jaw, make a basic outline of the head. It’s crucial that the shape isn’t too complicated, as this will make the mesh difficult to control. With the shape selected, fill the path with the mid-tone colour (C = 52, Y = 28, M = 67, K = 22). We will create the shadow and highlights using the mesh.


    04. Select the Gradient Mesh tool and place a point near the bottom edge of the jaw line. We are trying to get the path to follow the curvature of the jaw. We will be developing the shadowed area along this line.


    05. Once you’re satisfied that this line follows your contour closely enough, place another mesh line just above it. The purpose of this line is to isolate the first line you created. The reason for isolating the line is to prevent any colour you apply to it from bleeding into the area we need to reserve for midtones. With this done, apply the shadow colour (C = 61, Y = 39, M = 83, K = 76). Pull some of the mesh points beyond the viewable area of the path so that the gradient will blend smoothly.


    06. Now our shadow is in place, we can define the upper shadow area. Select the same colour we used for the mid-tones and isolate the upper ridge line. This isolation preserves the colour under the protrusion. Be sure to mould this line to the shape of the protrusion with as few mesh lines as possible. We need to keep the mesh simple at this stage because we will build on it as we go along, and we don’t want it to be difficult to edit later.


    07. With all your shadows in place, start adding in highlights. I find it useful to refer to my original sketch for the position of the highlights. With the Gradient Mesh tool, create a new mesh line contoured to the shape of the upper ridge, by adjusting the handles as you would with any regular path. Select a highlight colour (C = 5.5, M = 1.5, Y = 6.5, K = 0) and apply it to the line.

    08. You should now have a basic bottom jaw without the skin texture. To add texture, play around with the mesh lines we already have, and add a few new ones for control. Add vertical mesh lines and bend them to match the bone structure, adding a highlight colour to the light side. This gives the impression of skin stretched over bone.


    09. Add in mesh lines until it resembles a grid, then fill the grid with alternating light and dark colour to add fine texturing, like skin patterns.


    10. The upper jaw, eyes and nostrils are all created from one mesh; this is the most complicated part of the illustration. Draw its silhouette and fill it with a mid-tone colour (C = 52, Y = 28, M = 67, K = 22). First isolate the eyes and the area where the nostrils will be. For the eyes, mould the mesh into the shape of the eye, and add a mesh to separate the whites from the pink parts of the eye. Fill the pupil with white and the corners with pink. Create the pupil and add brown. Add a mesh to indicate light and dark areas in the pupil.

    11. For the nostril, add a mesh inside the area we isolated. Select each handle on the points and mould the path to the curvature of the nostril. Add more mesh points to indicate the shadow under the nostril and a highlight on the top.


    12. When you’re creating the shadow areas on the face, be sure to use as many mesh points as necessary to accomplish the curvature of the face. Pay special attention to areas where the skin folds and creases. Don’t be afraid to pull the mesh completely outside the path. This is great for situations when you wish to create a smooth graduation of colour on the edge of a path.


    13. For the horn shape over the eyes we need to create separate meshes and then blend them into the skin. First draw the shape of the horn, keeping it as simple as possible, then add a mesh. The mesh will follow the contour of the path and give form to the shape, so all you will need to do is add mesh for light and shadow.

    14. We’ll need to create an individual mesh for each tooth. Once you’ve drawn each shape, add a base colour – use white for most teeth, adding a hint of yellow for some. Next, add light and shadow areas. For the darkest shadow, use 32% black and 26% yellow. For some teeth add a strong yellow up to 50%. For speed, create basic teeth, duplicate them, scale them, and reuse them to fill the mouth with teeth.


    15. Handle the tongue, gums, and mouth lining in a similar manner to the skin, except use a base colour of C = 10, M = 36.5, Y = 22.3, K = 0, with a highlight of C = 10, M = 99, Y = 76.2, K = 88.7. For the crease that runs down the center of the tongue, first create a mesh, then add shadow and highlights, as before.


    16. The final area is the part that connects the upper jaw to the lower jaw. We’re creating this separately to keep it simple, as complex shapes are difficult to mesh, and sometimes the Gradient Mesh tool just won’t work on a path that is too complex.

    Author : Stephen Freeman


    Follow on Buzz