I actually don’t have a massive problem with the Photoshop effect, as with a bit of tweaking it can be ok(ish). But more often than not it gets used without any alterations to the shading and highlights and looks too heavy. There are other ways to craft something a little more subtle and a bit more interesting.

Using the Mesh tool in Adobe Illustrator

Drawing your vector shapes in Illustrator and using the Mesh tool will give you greater control over the shading. The process does take a bit longer but the end result is better in my opinion.

Bevel and Emboss in Photoshop

Out of the box, the Bevel and Emboss effect in Photoshop is heavy and a bit ugly:

Use Illustrator to draw your button shape

Here I drew an oversized button at 400px by 150px with a corner radius of 20px:

Create shading with the Mesh tool

With your button selected, click on the Mesh tool on your tool palette (it looks like a box with wavy lines through it). Click an area inside your button on the top right and adjust your colours a bit lighter. Do the same on the bottom left but make the colours darker.

There are no exact rules about the colours and position of the Mesh anchor points as it’s here that you can experiment to create a button bevel that is unique.

Do you know a better way of creating bevels?

Share your methods below.

Ideas

Working as apart of a focus I came up with a number of ideas to trial before moving towards the final ‘Robopup’ concept.

Focus group work

The focus group agreed that a familiar creature like a dog would appeal to the age group that the platform was designed for so I began working up concepts based around this.

Refining the concept

Once the initial concept was created I began to make refinements to the texture and shading in Adobe Illustrator.

Shading

I’d started off using simple black shapes with adjustments to the transparency to get areas of shading. I also worked on the eyes to give them more depth.

Highlights

In the initial concept I used gradients created in Photoshop to give highlights but I refined this with vector shapes and applied a gradient mesh.

Shading complete

Once the shading and highlighting was complete ‘Robopup’ had more depth and life.

Finishing touches

To help with presentation I animated ‘Robopup’ in Adobe Flash.

Please let me know below what you think of the finished character. Do you use a similar process? How would you improve the finished article?

Default Photoshop drop shadow

Another way of creating a drop shadow

With a little bit more time you can create a more realistic and pleasing drop shadow effect.

Here’s how to do it

Draw yourself a shape making sure you leave some space around the edge of the canvas for the shadow. Add a nice thick stoke (using a layer style) to the shape then duplicate the layer. Remove any styling from the bottom layer so that you just have a simple shape. With that bottom layer selected choose Edit > Transform > Warp then pull out the bottom left and right corners a little.

With that same layer selected, choose Filter > Blur > Gaussian Blur and blur it enough (but not too much) until it just creeps out from behind your top shape. Once you’ve done that, adjust the size a bit Edit > Transform > Scale so that you hide the top parts of the shadow behind the top layer.

As a finishing touch, put a gradient across one of the bottom corners of your top layer and adjust the opacity so it’s not too heavy.

Click below to take a look at the source file for this effect:

Download source files here

If you’ve found this post useful (or know a better way), let me know by commenting below.

Inkscape as an alternative to Adobe Illustrator

http://www.inkscape.org/
An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.

GIMP as an alternative to Adobe Photoshop

http://www.gimp.org/
GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring.

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted.

Scribus as an alternative to Adobe InDesign

http://www.scribus.net
Scribus is an Open Source program that brings award-winning professional page layout to Linux/UNIX, Mac OS X, OS/2 Warp 4/eComStation and Windows desktops with a combination of “press-ready” output and new approaches to page layout.

Underneath the modern and user friendly interface, Scribus supports professional publishing features, such as CMYK color, separations, Spot Colors, ICC color management and versatile PDF creation.

Nvu as an alternative to Adobe Dreamweaver

http://nvu.en.softonic.com/
Nvu is the new Web editing environment based on the Mozilla platform and its Gecko layout engine. Primarily made for Linspire and other Linux flavors, its cross-platform architecture makes it available on a wide variety of other platforms.

Nvu binary test builds are now available for Linux, Windows, Mac OS X and FreeBSD. The easiest-to-use, most powerful Web Authoring System available for desktop Linux users.

Online tools

If you like to keep your software in the clouds, check out this site for some online alternatives – http://aviary.com/

What do you use?

Have you come across any good alternatives – please comment below.

The effect below will give you a hand rendered text effect that can be applied in a number of ways using Adobe Illustrator and Photoshop. It doesn’t have to stop at just text but this tutorial will take you through one way of getting hand drawn text into your PC generated artwork:

Step 1

I used InDesign to create my template heading and outlined the text with a thin light grey keyline. Make sure the font size is large enough to fill the paper you are going to print out onto as this will improve the quality of the end result.

Step 2

Once you’ve printed out your template, grab a pencil and start filling in the white space. You don’t need to be too precise – sometimes scruffy rendering gives a better result.

Step 3

Once you’ve filled in the text it’s time to scan your artwork. If you have a good enough camera you can take a photo too. The higher the resolution the better.

Step 4

You may need to adjust your scanned artwork in Photoshop to make the strokes a little clearer and the background a bit whiter.

Step 5

Once your happy with the clarity and white and black levels, use the marquee tool and copy the scan and paste into Illustrator

Step 6

With the bitmap selected choose ‘Object > Live Trace > Tracing options’. In the pop up box you have, play around with the options but make sure you have ‘Preview’ checked so that you see the effects. I kept the ‘Mode’ at ‘Black and White’ as I want a simple vector shape at the end.

Step 7

Now that you have created a trace you need to expand your object using ‘Object > Expand’ and be sure to expand object and fill. Once that’s done ungroup everything (you might need to ungroup a couple of times). Un-select everything and click on the white behind your traced object and delete it. Getting rid of the background means we have a nice clean, transparent vector.

You can use the Magic Wand tool to help just select one colour.

Step 8

Once you have removed the white background from the trace, select the traced artwork, make sure it’s a single colour. Save the vector and it’s ready to use.

Step 9

You can copy and paste the vector into Photoshop as a shape layer which means you can resize without compromising quality.

Hope this is useful.

Looking for free vector rubber stamp downloads?

Step 1

In Illustrator create your text. It’s better to use a strong/heavy, compact font and in this case I’ve used ‘Impact’.

Step 2

Using the Rounded Rectangle tool draw around your text leaving plenty of breathing space between the edge of the rectangle and the text.

Step 3

With the rectangle selected choose ‘Object > Path > Offset path’ from the menu bar. In the options box choose a desired width for the offset (not too thin).

Step 4

Now ‘divide’ the shapes using the option in the ‘Pathfinder’ palette (found from the ‘Windows > Pathfinder’ menu). Don’t forget to ungroup them too.

Step 5

Now drag your items apart so you can see what your doing. It’s a good time now to create outlines from your text. With the text selected choose ‘Tools > Create outlines’.

Step 6

Now open up Photoshop and create a new file. I usually choose a canvas size that is the same size as the Illustrator document size so in this case A4. Individually copy and past your objects from Illustrator to Photoshop. Paste them as a ‘Shape Layer’.

Step 7

With one of the shape layers selected, choose ‘Make Selection’ from the ‘Paths’ palette options. Now zoom in a bit so you can see what your doing.

Step 8

Create a new layer and pick a colour and brush. You’ll need to use a spatter type brush as you want a rough and textured finish. Now roughly fill in your selection. Perform the same steps for each shape layer but with the inner rectangle, just skim the corners and edges a little.

Step 9

You should now have 3 bitmap layers (as well as your shape layers) for the text, outline and inner rectangle. Copy and paste each of the bitmap layers back into your Illustrator file.

Step 10

With the bitmaps you just pasted selected, choose ‘Object > Rasterize’ from your menu. Keep the resolution high at 300dpi.

Step 11

Still with the bitmap selected choose ‘Object > Live Trace > Tracing options’. In the pop up box you have, play around with the options but make sure you have ‘Preview’ checked so that you see the effects. I kept the ‘Mode’ at ‘Black and White’ as I want a simple vector shape at the end.

Step 12

Now that you have create a trace you need to expand your object using ‘Object > Expand’ and be sure to expand object and fill. Once that’s done ungroup everything (you might need to ungroup a couple of times). Un-select everything and click on the white behind your traced object and delete it. Getting rid of the background means we have a nice clean, transparent vector.

Step 13

Finishing touches like rotating the vector a little will help but you can always do that in your final artwork wherever you intend to use the stamp. Spending a little more time in the Photoshop stages and using higher resolution brushes like these will give even better results but this is just a quick guide to get you started. You can import the vector file into whatever artwork you are working on and overlay where needed. Please do comment if you find that useful or you have suggestions for a quicker way too.

I stopped by Clarkes Stationers and Ransoms hardware store and bought a nice big piece of white card and some green electrical insulation tape and then set about tearing up some strips and roughly sticking it to the card.

I then fixed a macro lens to my Nikon D70s and took close up shots of each bit of tape that I’d stuck on the card.

Before starting on the brushes I sharpened up the images and adjusted the contrast and exposure to make the lighting a bit harder so that you could see the details and creasing a bit more. I didn’t reduce the size of the image as I wanted higher resolution brushes.

Using the pen tool I created a path around each bit of tape. Take your time with this bit and (if you haven’t used the pen tool before) get a feel for how that tool works. Try and keep to no more than a pixel inside the object you are drawing around (the bit of tape).

Once the path was complete I created a selection from the path, copied the contents and pasted onto a new layer. By doing this you make the background transparent which is important for creating brushes.

Hide the original layer for now but make sure you’ve pasted the contents of your selection into the same position as your original layer. By doing this it will help if you want manually add some shadows (which is what I did) to the tape.

At this point I cropped out the extra space from around the tape.

I made a selection of the entire canvas on the correct layer and then chose ‘Edit’ and ‘Define Brush Preset’. The dialogue window gives you the option to name that brush so I gave it an obvious name followed by a number (there are 4 or 5 of these!).

I did the same steps above for another few bits of tape and, from the Brushes palette I saved the entire set out as a .abr file.

Download .abr file here.

Pretty good fun. Wondering what to try next?