This was my first ambigram project and I’d like to share with you the process. The main difficulty was the similarity of both words chosen by client: "Powerty" should become "Poverty" – so it’s not your traditional ambigram of it reading the same both ways.
I’m going to show you the process of creating an ambigram and creating a 3D bevelled effect. I’ll share some techniques which can be used in many other typographic projects. Although I’m using Adobe Illustrator for this, you should be able to translate the same techniques in other vector applications.
This ambigram was created for Powerty EOOD Bulgaria with a Creation Credit to Adam.
1. Create Your Ambigram Sketch
Step 1
In the early stages, I tend to sketch out a variety of concepts for the client. This can lead to a lot of sketches, but it’s something that will help hash out the ideas and often tangents can create unique spins on a concept.
While sketching, make sure you really like the idea of the design. No, I’m not kidding – creating an ambigram is on of the most difficult typographic challenges, so be sure you have as many approaches as you need before settling on a design.
I drew an initial sketch using red marker, then I rotated the sheet and I’ve drawn another word using black one. At this stage, try to focus on a letter stems, which are the most essential parts of the letter.
2. Refine Your Ambigram in Vector
Step 1
When I’m happy with the sketch, I trace it to create bolder shapes and lines. It doesn’t have to be smooth and clean, because it’s still initial part of design process.
Step 2
I’ve then overlapped a duplicate of the design above and rotated it 180 degrees. After reducing the Opacity of the duplicate, I can get a basic idea of how to form the letters.
Step 3
Then I played with the Opacity of the upper layer to see which elements overlap, which I found very useful. From this, I’ve been able to clarify my design and create a more sleek composition.
I’ve first drawn the initial stems of the letters and added the relevant serifs to form the letters.
Step 4
With the stem width set, I’m able to continue adding detailing, such as curls and flicks. This has given a more Gothic style to the design.
Step 5
The next step is to create a style for the other letter parts, like angles and stem endings. At this stage I am looking for something rather geometrical and solid. This helps contrast with the curls and matches the end style I want to achieve.
Step 6
I’m happy with this composition so far, however I feel I need to modify some of the shapes to be more consistent with the overall style of the letters.
Stems and elements are blocks which should be carried on further into the look of the lettering. It helps to maintain a coherent style to the letters. So I’m going to modify the forms slightly and continue to do so until I’m happy.
Step 7
The main difficulty of working on the ambigram was the constant awareness of maintaining the legibility of the rotated project.
After any major change, check to see that it doesn’t prevent you reading the second word. If it does, modify or undo accordingly.
Step 8
It’s important to make mock ups during the design process. It helps to compare the different solutions of the problem. Sometimes it’s even better to leave a project for a few hours or days and take a fresh look later. Due to this, I’ve been able to make further modifications to the central part of the design.
Step 9
When I saw that what was left was only the details and balance of weight of initials, I knew that the project was almost done. Time to send it off to the client to see what they think.
Step 10
The client has came back and asked for some changes. They’ve asked for a more calligraphic look which is still in keeping with an "Old English" style.
This method is a very quick and effective way to change all over look of typeface. Just leave stems the same and change the details. It’s a simple conversion that creates new look.
Step 11
After a few changes described above I’ve finalized letters, so now it’s ready so I can apply a type treatment effect on it.
3. Apply a Bevelled Effect to the Letters
Step 1
The first step for this bevelled effect is to add light coming in from the left. To achieve this, I’ve used the Pathfinder panel in Adobe Illustrator. Alternatively, you could use Clipping Masks (Control + 7) if you’re more comfortable with those.
Step 2
I’ve used the same technique when I’ve applied a second shade of grey to the letters.
To create shades or highlights on every straight letter you can simply create a Rectangle (M) and then cut it out with the Pathfinder > Minus Front, using narrowed circle drawn with the Ellipse Tool (L).
Step 3
Next step was to create the same effect, however this would be for light coming in from the top left of the design. The shades of grey you’re using will not be as bright, but enough you can definitely see there is a highlight. Project is slowly coming to a close.
Step 4
The final highlighting shapes are created using the Pathfinder panel. I’ve drawn some arrows as an example of where these highlighted areas are to help you.
Step 5
At this stage what’s left was just looking for mistakes and smoothing details. This is important as sometimes you miss the smallest detailing which could throw the whole project off.
At the end you should always give yourself a break from the project. It will help to have clearer look on the whole design and spot the mistakes which you haven’t seen.
Awesome Work, You’re Now Done!
I’ve finished off the project by bringing it into Adobe Photoshop to play with the Curves. This has helped me modify the colors used and gives it a dark metal look. The contrasting background works well and is picked up in the highlights.
I hope you’ve enjoyed my first tutorial for Vectortuts+ and you’ve came away with some great tips on how you can create your own ambigram.
