The design I’ve been working on features the word ‘Cobra’ – Simply because it sounds pretty bad-ass! The blackletter type has been customised and modified with additional swirls, curls and various pointy bits which add plenty of visual interest while disguising the original wording.

View full size artwork

The first stage of the design process will be in Illustrator, here we’ll create and tweak the gothic script lettering. The first step is to pick out a bunch of blackletter style fonts. There’s a huge range and different styles to pick from. I wanted a font that used straight edges on most of the letters, as opposed to being rounded. I eventually picked out Cloister Black as my typeface of choice.

I wasn’t too keen on the shape of the letter A, so I took a copy of the O, created outlines from the text (CMD+Shift+O) then used the Direct Selection Tool to take portions of the original letter A to build my own customised version. The original letter O, the little point at the top and the terminal at the bottom were all combined with the Merge option from the Pathfinder palette.

The new letter A was combined with the rest of the word and all the letters converted to outlines making them ready for customisation.

One of the first tweaks was to extend the letters to make the whole word taller, which was the main reason I wanted a font with straight edges. The lower half of the text was selected with the Direct Selection Tool and moved downwards (holding Shift to constrain the axis).

Elsewhere a new brush was created. A small circle was drawn, then the left hand point dragged outwards with the Direct Selection Tool. The bezier curves were removed from this point with the Convert Anchor Point tool to give a sharp point.

The rounded edge from the opposite end is then clipped off using a temporary square along with the Subtract option from the Pathfinder palette. This shape is then added as a New Art Brush by clicking the littler ‘new icon’ at the bottom of the Brushes palette.

This new brush is used with the Brush Tool to draw some smooth swirly lines across the text. My Pen Tablet came in handy here, but the same effect could easily be created with a mouse. Double click the Brush icon to edit the Smoothness settings in order to generate nice flowing curves.

Smaller flicks were drawn and carefully positioned over key points of the text. When the edges are lined up the shape flows seamlessly.

More flicks were drawn and duplicated across the inner sections of each letter, giving a a kind of thorny or teethed appearance.

Some of the longer lines overlap the text, which seems a popular feature in this style of gothic typography design.

Various swirls, curls and sharp pointy bits later and the vector version of the type design is complete. Any tight angles and the position of each individual piece were adjusted to perfect the design.

In order to migrate the design to Photoshop while keeping the various objects separate, I had copy and paste each set of elements individually. To ensure they all remained aligned in Photoshop a temporary blank rectangle was also used with each selection.

As each element was pasted into Photoshop the temporary rectangle would keep everything aligned and scaled correctly, with each piece being placed on a new Photoshop layer.

A rough stone texture was added over the black background and set to soft light to generate a cool and distressed background for the type to sit against.

Each layer of typographic elements was then given a Drop Shadow. The settings were tweaked to create a subtle shadow by lowering the opacity and increasing the size.

The Drop Shadow layer style in the layers palette was then rasterized into a layer of its own by right clicking and selecting Create layer. This then allowed a Layer Mask to be used to erase out portions of the shadow with a soft brush, leaving shading in key places to give a three dimensional effect.

Drop Shadows were added to the other typographic pieces and each one adjusted with a layer mask. This shading allows the swirls to either blend into the type or flow on top of the wording.

Once all the shadows are in place the design is given an extra level of depth and dimension, as well as bringing a little legibility back to the wording.

A selection of the whole design was made by CMD-Shift-clicking the thumbnails of each layer in the Layers palette. This selection was then filled with white on a new layer.

A subtle noise texture was added using the Noise filter. A small about of 3-4% is all is needed to give a tactile feel to the otherwise unrealistic smoothness of the white fill.

A Gradient Overlay was also added as a layer style to this new layer. The gradient flows from grey to white vertically up the design.

An Inner Shadow and Stroke combination also helped add a subtle chamfered edge effect. The Inner Shadow gives a thin 2px white border while the Stroke adds a darker grey border to the outside.

The selection of the whole design is loaded once again, then filled with a black to white gradient on a new layer. Setting this layer to Hard Light allowed the black to interact with the grey from the layer below adding more shading.

Additional spots of black were dotted around the design, which were also given the Hard Light blending mode to add more levels of shading and tone.

A spray paint Photoshop brush was used to create some splattery textures across the type, adding more detail and subtle marks which all help give a more tactile feel.

All these additions of texture and tone help give a metallic feel to the design.

Two thin vertical lines were added to each letter. One filled with white, the other in grey, which gives a chiselled line effect. Layer masks were added to each line to both fade out the upper and lower edge as well as mask out where any swirls overlap the text.

These chiselled lines help add that little extra to the metal effect, while enhancing that impression of multiple dimensions where the swirly lines clearly flow over the top of the letters.

The Pen Tool was used to draw small selections over the pointy areas of the text, then a quick dab with a soft brush helped add a bit of dimension and visual interest to these elements.

The final gothic blacketter typographic design is complete! The customisation of the letters is made easy with Illustrator’s editable paths, then Photoshop brings it all to life with realistic textures and different levels and shading and tone.

Download the source file

This week’s questions

• How do you deal with a client’s needs vs your technical skills – Do you charge less for a job where you have to learn new skills because it might take longer to complete?
• How did you create the outro at the end of your video clips?
• How much time do you spend each week divided between client work and blog stuff?
• Can we have Spanish subtitles please?
• How important is a degree in web design when compared to a well developed portfolio? Is it about showing your grades, or your skill?
• I want to go into freelancing but really don’t know how to start or how to get more clients, I have 4 clients now, do you have some magical recipes how to get more?

Links mentioned in this week’s news

.NET Magazine Awards

Design Rhythmic Motion Typography in After Effects

28 HTML5 Features, Tips, and Techniques you Must Know

Thanks to everyone who submitted their kind comments and questions on the last video. I only pick out a hand full to answer to keep the videos short, so if I didn’t pick yours this time, feel free to submit it again and I’ll hopefully provide a good answer in an upcoming episode.

The design I’ve created is a mini tribute to the Sloth character from the Goonies. The quick doodle depicts the basic form with just a few simple doodle lines. All the linework, including the outline of the text is given a rough texture to create a hand-drawn feel, then everything is brought to life with a muted colour palette and a mix of texture additions in Photoshop.

View larger artwork

Create a new document in Adobe Illustrator and grab the brush tool. Draw the basic outline of the character’s head as a complete path. Tip: Double-click the brush icon to open up the settings. Use the Edit Selected Paths option to fine tune your linework.

To give the linework a cool doodle effect, go to Effect > Distort & Transform > Roughen. Adjust the sliders to limit the effect down to just a few subtle bends and kinks in the lines so the basic shape is still recognisable.

Continue drawing the facial features with the Brush tool. The same stroke and roughen effect should be continued through onto the subsequent lines.

Use the Direct Selection Tool to tweak the position of the end points to ensure the lines overlap without a gap.

The great thing about doodling in Illustrator is you can easily move things around if you didn’t get the positioning quite right the first time.

Finish off the character with the remaining facial features. Being a doodle the artwork doesn’t need to be super high quality. Anything goes, make it as rough as you like!

Find a suitable colour palette to use for your design. I found this muted palette from ColourLovers. Copy (CMD+C) the main outline of the head and paste behind (CMD+B). Clear out the stroke and add a flesh coloured fill from the colour palette.

To fill elements that aren’t complete shapes, use the Pen tool to roughly draw an outline that stays within the width of the stroke. Fill this shape with a relevant colour swatch then repeatedly press CMD+[ to alter the stacking order until it sits underneath the strokes.

Select the Brush tool again and increase the brush size using the ] key. Add a slightly darker flesh tone as a stroke colour, then trace around the existing linework. The larger brush size will create a basic shading effect. Send these strokes below the darker linework using the CMD+[ shortcut.

Decrease the brush size slightly then draw some subtle facial wrinkles using the same darker flesh tone.

Sloth's iconic "Hey you guys!" quote has to appear in the design. Type it out and select a nice chunky font. Here I'm using Futura Extra Bold with the tracking adjusted to -75.

Press CMD+Shift+O to create outlines of the font, which essentially turns the text into editable shapes. Right click and Ungroup, then select each word and re-group (CMD+G).

Scale and position each word onto a poster sized artboard. Hold Shift while scaling to constrain the axis and keep the text in proportion.

Use the eyedropper tool to alter the fill colour of the text, then add a darker stroke from the colour palette. Bump up the stroke weight and align it to the outside by adjusting the options in the Stroke palette.

Give the text that same doodle feel by going to Effect > Apply Roughen - Because this effect was the last used this shortcut will apply the same settings.

Copy (CMD+C) the text and Paste in Front (CMD+F). Clear out the fill and adjust the Stroke settings to a lighter shade aligned to the inside. Repeat the process on the other two words.

Draw a rectangle elsewhere on the page. Use the Direct Selection Tool to select and nudge the two bottom corner points closer together.

Add a Gradient as the fill colour to the new rectangle shape. Add a yellow swatch to both ends of the gradient spectrum, then adjust the Opacity to zero on one side.

Copy and paste the rectangle and rotate it by 90 degrees. Align it to the lower edge of the original then make duplicates in order to form a series of radial flares.

To fill the smaller gaps between the 45 degree angles go to Object > Transform > Rotate. Enter 22.5 in the options (45 divided by 2 = 22.5). Continue duplicating and rotating this new shape to fill out the rest of the pattern.

Position the flare in the centre of the letter 'O' on the design. Scale the flare to extend to the outer stroke of the wording.

Paste in the character and scale it to fit roughly in the centre of the radial flares. Ensure the character is at the top of the stack by hitting CMD+Shift+].

Next we’ll move over to Photoshop to add some cool textures and make use of the powerful blending modes. Create a document according to your poster size and fill with a subtle yellow background colour.

Paste in a detailed texture file and desaturate to remove the original colouring. Set this layer to Multiply.

Paste in another texture file and set this layer to Multiply. The two textures will interact with each other as well as the yellow background colour.

Next, paste and scale the vector design from Illustrator. Enlarge the design so the text completely fills the canvas.

Change this layer’s Blending Mode to Multiply to allow the textures to interact with the crisp vector colours to give a cool retro feel.

Quickly switch back to Illustrator to create a thick rectangular stroke with the roughen effect.

Paste this into Photoshop and change the blending mode to Soft Light. Adjust the Opacity to 80% to create a subtle border.

Create a new layer and fill it with white. Go to Filter > Noise > Add Noise and adjust the settings to around 50%. Change this layer’s blending mode to Multiply and turn down the opacity to around 20%.

The final poster is complete! It combines the best of both applications – The sharp and crisp vector lines of Illustrator and the powerful blending modes of Photoshop.

Download the source file

View full size illustration

Sugar skull originated as part of the festivities of the Mexican Day of the Dead (Dia de los Muertos) holiday. The traditional sugar skull is a sweet treat that’s decorated with lots of bright and colourful designs, which makes it a popular source of inspiration for designers and illustrators. The sugar skull theme is also hugely popular as tattoo art, and makes an equally trendy apparel design. A quick search online brings up plenty of resources to feed your imagination and generate ideas for your own skull design.

Let’s get started with out own vector sugar skull Illustration. Open up Adobe Illustrator and draw an oval onto the artboard. Use the Direct Selection tool to drag the upper most point downwards (hold Shift) to flatten out the top curve.

Use the Pen tool to complete the outline of a skull by drawing a protruding cheek and jaw line. Finish the lower jaw along the centre line of the skull. Copy (CMD+C), and Paste in Front (CMD+F), then go to Object > Transform > Reflect to flip the duplicate over.

Align the duplicate to the opposite side of the skull, then merge all the objects together using the Pathfinder tool.

Zoom in and tweak the outline where the two halves are joined. Removing stray points with the Pen tool will clean up the outline and remove unwanted kinks.

With the outline selected, go to Object > Path > Offset Path. Offset the path by 3mm, then right click and Ungroup the two lines.

Add a thick 6pt stroke to the inner outline and a 2pt stroke to the outer outline. Align both strokes to the outside of the path using the Stroke palette.

Use the Pen tool to draw a flowing line from the inner outline. Hold Shift while dragging the anchor points to produce accurate angles.

Duplicate these lines and go to Object > Transform > Reflect to position them on the opposite side.

Draw a circle to represent the basic shape of an eye. Go to Effect > Distort & Transform > Zig Zag to edit the outline of the circle.

Change the settings to Smooth, then adjust the sliders to create a flowing wavy outline around the circle.

To confirm the appearance of the shape, go to Object > Expand Appearance. This will make the Zig Zag transformation permanent and allow the object to be used with the next step.

With the object selected, go to Object > Path > Offset Path. Enter 3mm in the options.

Repeat the process of adding an offset path a few more times, then adjust the fill and stroke of each item to produce alternating outlines. Use different stroke weights to add more detail.

Add another circle to the centre of the wavy outlines. This time go to Effect > Distort & Transform > Pucker & Bloat. Drag the slider around 10% towards the Pucker side of the bar.

Use the Align palette to centre up the items. Shift-click both the Pucker shape and the wavy outline, then click the wavy outline once more to set this as the key object.

Continue adding more circles using various sized stroke and alternating colours. A series of dots can be created using the Stroke palette – Check the Dashed Line option, then adjust the dash to 0 and gap to 8-10pt. Make sure the Round Cap and Round Join options are set, then adjust the size of the dot by increasing the stroke weight.

Draw a small white circle, then drag the lower most point downwards (hold Shift). Copy (CMD+C) and paste (CMD+F) this shape, rotate it by 180 degrees then move the duplicate vertically, leaving a small gap between the two objects.

Copy both items, paste, then rotate these duplicates by 90 degrees. Continue adding more shapes at 45 degree angles.

Paste another duplicate of the shapes, then go to Object > Transform > Rotate. Enter 22.5 (45 divided by 2 = 22.5) then finish off the pattern until all the elements are evenly spaced.

Two more small circles in the centre of the eye finishes off the detailed pattern nicely. Make sure everything is aligned using the Align palette. Group all these objects together (CMD+G).

Make a copy of the eye and move it to the opposite side. Group both eyes together then align them with the main skull outline. Remember to select the skull outline as the key object by giving it an extra click. This will ensure the eyes move into place, not the outline.

Elsewhere on the artboard draw an oval. Drag the lower most point upwards until the bottom edge is almost flat.

Duplicate this shape and butt it up to the previous. Scale each duplicate down by 90% (Object > Transform > Scale) and vertically align them all to the bottom.

Select all the objects and go to Object > Envelope Distort > Make with Warp. Choose an Arc with a bend of around -16 degrees. Adjust the distortion to keep the outlines of the teeth running vertically.

Go to Object > Expand and select just the Object checkbox to make the effect permanent then make a copy. Add another Envelope Distort to the lower set, but this time bend them so they run parallel to the upper teeth. Expand the second set too.

Make duplicates of the two sets of teeth, then merge these duplicates together with the Pathfinder palette. This merged version can be used to add a thick outlining stroke and an offset path.

Send the thick outline and offset path items below the primary teeth shapes by repeatedly pressing the shortcut CMD+[. Group all the items together.

So far we have the eyes and mouth in place on the skull. Use similar techniques to create a nose. Begin with a basic shape, then add offset paths with alternating fills and strokes to build up the layers of detail.

Let's build some pretty elements to decorate the skull. Draw a circle over the upper skull area, add a Zig Zag transformation, Expand Appearance then add a 3mm offset path. Alter the stroke weights and align them to the outside.

Copy the series of radial teardrop shapes from the eye graphic and scale them up for use in this decorative element. Align them so they overlap the white outline, creating a cool intersecting effect.

Continue adding circles and differently shaped elements to build up the detail. Duplicating items that have been used elsewhere speed up the process.

Once the decorative shape is complete group the items together. Make a duplicate of the skull outline (CMD+C - CMD+F). Send this item to the top of the stack (CMD+Shift+]), then use it as a clipping mask to trim out the excess from the decorative element.

Make a copy of the decorative element, then flip it using the Reflect transform option to position it on the opposite side.

Draw a couple of circles that flow across the upper skull area. Give these circles a dotted stroke. Instead of using a Clipping Mask, simple shapes like these can be clipped using the Scissors tool. Make intersections where the paths meet the skull outline then delete out the excess.

Make copies of the detail lines at the edge of the skull and rotate each one to form a series of shading lines.

A teardrop shape can be quickly made by dragging the lower most point of a circle vertically using the Direct Selection tool. Convert the anchor point to remove the bezier handles and therefore creating a sharp point.

Variations of the teardrop can be made using the Envelope Distort tool. Add a Vertical Bend of 50%.

Don’t forget to permanently fix the shape by going to Object > Expand and selecting just the Object checkbox.

Scale and position these teardrop shapes across the skull to fill out the white space and provide extra decoration. Make sure each object is also replicated on the opposite side to make the skull perfectly symmetrical.

Objects as simple as a circle can be used to fill out other areas. Align little circles around the mouth to produce another pattern.

As well as using Clipping Masks and trimming shapes with the Scissors tool, shapes can be clipped to size with the Pathfinder Intersect option. Use a copy of the skull outline to clip out the excess from objects that extend beyond the edge of the design.

Continue adding tiny vector shapes and elements to completely fill out the skull until you’re happy with its appearance, or until you lose your sanity. The final sugar skull is packed with detail and ready for combining with other elements as a poster or setting up as a cool t-shirt print.

Download the source file

This week’s questions

• Why do designers tend to use Macs over Windows PCs?
• How do you find your clients?
• How often do you trim your eyebrows?
• What camera do you use?
• What differences are there when communicating with clients in agency work to self employment?

Links mentioned in this week’s news

Getting Carried Away with Balloon Lettering

35 of the Best Facebook Fan Pages

A Guide to Popular Printing Techniques

Thanks to everyone who submitted their kind comments and questions on the last video. I only pick out a hand full to answer to keep the videos short, so if I didn’t pick yours this time, feel free to submit it again or post it on YouTube and I’ll hopefully provide a good answer in an upcoming episode.

What is an image resolution?

The resolution of an image refers to the density of the pixels (or printed dots) that make up that image or graphic. The higher the resolution, the crisper and more detailed the image will be. A lower resolution will be fuzzy, and less detailed. Image resolutions are measured in DPI (Dots Per Inch) and PPI (Pixels Per Inch). There are differences between the two – DPI refers to a printed document, and the amount and spacing of the Cyan, Magenta, Yellow and Black dots, whereas PPI refers to the pixels on a screen. They aren’t the same thing, but designers and print professionals tend to use the terms DPI and PPI interchangeably. Sometimes they’ll say DPI but mean PPI. For example, a 72dpi design for screen should really be referred to as 72ppi.

300ppi vs 150ppi vs 72ppi

If you create a 10×10 inch document at 72ppi, and another 10×10 inch document at 300ppi in Photoshop, you’ll notice they’re totally different sizes on screen. This is because of different number of pixels used in every inch. In the 72ppi document, you can only fit a max of 720 pixels across the whole width of the document, but this is 3000 pixels in the 300ppi version.

When creating designs for the web, we can usually suffice with 72ppi. If we calculate the resolution of a fairly dated 15″ 1024×768 monitor, that works out to 68ppi, whereas a more modern 1440×900 15″ MacBook Pro display would work out to 96ppi. As monitor sizes and resolutions increase they’ll be capable of displaying much higher imagery, but for now 72ppi seems to be the rule of thumb.

When creating designs for print we’ll usually need to use a 300dpi resolution document. Your printer might say “Make it 297x210mm at 300dpi“, so you would make a 300ppi A4 document (notice that misuse of DPI and PPI). If you accidentally created this document at 72ppi, you would have to start from scratch and recreate the design because you can’t magically generate the extra pixels you require out of thin air. If you DID change the resolution from 72 to 300, Photoshop would GUESS what colour pixels to insert, but as you can imagine the end product isn’t going to look too good. This is known as Resampling.

You CAN change a 72ppi image file into a 300ppi file by Resizing. This is when Photoshop takes the number of pixels it has to play with and divides them up so that there’s 300 pixels in every inch instead of 72. However Photoshop will soon run out of pixels, therefore the document would be much smaller. This isn’t any use for your print artwork, as your 297x210mm file would end up at 72x50mm in size, but it is crucial when working with photographs or posters. More on that later.

Sometimes you’ll be asked to create a print document at 150ppi. This is usually the case when working with large format graphics that will only be seen from a long distance, so the close up quality doesn’t matter so much. The lower resolution makes life easier for your computer, and results in a much smaller file size.
If you’re creating a super large document (like a billboard), your printer might ask you to create the artwork at smaller dimensions, but at a higher resolution (say, 600ppi). This again helps because the smaller document is going to mean smaller filesizes. They can resize the artwork in order to bump it up to the full dimensions, using that original 600ppi resolution to create a larger document at 150dpi.

Resizing vs Resampling

When altering an image size in Photoshop you have two options, resize or resample. If you resample (the default option in Photoshop), you’re altering the pixel size of the document. If you resize (Uncheck the resample box), you’re altering the resolution and therefore the printed size of the document.

As we know, resampling a document up is bad. Photoshop will have to guess what pixels to insert into the gaps. Resampling a document down is OK, as we’ve already got more than the amount of pixels we need.

If you Resize an image, you’ll keep the same pixel size, but alter the actual print size and the resolution. Let’s see how this is useful in the real world:

I designed this piece of artwork at A3 dimensions (297x420mm) at 300ppi. I’ve decided I want to get it printed as a poster. What size poster can I print?

The best answer would be A3, because the original 300ppi version would result in the best quality print. However my local printer will accept files of at least 150ppi.

By unchecking the resample box in the Image Size settings, I can change the resolution from 300 to 150 without affecting the original image quality. Only putting 150 pixels into every inch instead of 300 means you can fill more inches. The result is a 594x840mm, which is just about A1 size.

This 150ppi A1 file won’t be as crisp at the 300ppi A3 file, but the difference won’t be noticeable unless the two prints were seen side by side.

For more print related articles and tutorials, be sure to check out these two older posts: Designing for Print – Setting up Crops and Bleed & The Ultimate Guide to Designing with Black

Setting up your Wacom tablet

How to Choose a Graphics Tablet that Fits Your Needs

How to Set up Your Wacom for Awesome Results

Wacom Settings In Illustrator

Intuos Pen Tablet Settings & Preferences

Illustrating with your Wacom

A Pseudo-Sugar Skull: From Start to Finish.

Drawing Skulls with a Wacom Tablet

Electric Zombie Tee and Video

How to Design Your Own Custom Hoodie

How to Draw Your Own Vector Wings

Create A Grisly Zombie Illustration With A Pen Tablet

Discover tattoo illustration techniques

How to Create a Three Color Wolf Skull in Illustrator

How to Create a Cartoon Character with Expressive Lines

Adobe Illustrator Cartoon Tutorial with a Wacom Tablet

How to Draw a Classic Hand using a Graphics Tablet

Painting with your Wacom

How to Draw a Portrait in Photoshop

Digital Painting Tutorial

Create a Rebellious Skateboarder Using Digital Painting Techniques

Old style pin-up art… The new way

Advanced Tutorial: Creating ‘Broken Link’

Painting fantasy eyes

Suberb Tutorial of Digital Painting President Obama

Wonder Woman Pin Up Digital Painting

How to Enhance Photos With a Pen Tablet