Advertise    Write for Us

Vectorboom

Tutorials that Show You How to Create Awesome Text Effects in Illustrator, Photoshop and CSS

posted by: Iaroslav Lazunov, in Articles / Inspiration/ Comments: 1

In every design, may it be a banner or a logo, text effect is very important. This is because an attractive text effect surely catches the eyes and delivers a better message to onlookers. In this showcase, we have collected 36 tutorials that show you how to create awesome text effects in Illustrator, Photoshop and CSS step by step. Feel free to learn from this tutorial and apply it to your very own graphic designs that may suit your needs and style.


Adobe Illustrator


Create a custom type illustration

In this project, I'll show you how, with preparation and planning, a word can be manipulated to interact within itself ornamentally. Here you can see the finished design, and over the page I'll walk you through the process. These ideas will help and inspire you to start creating your own type illustration, without the use of Photoshop filters to twist your words and add flourishes. Continue...


How to Create a Liquid Logo Using Adobe Illustrator and DrawScribe Plugin

In this tutorial we will cover the techniques of creating "liquid” objects with the help of the Dynamic Sketch Tool, part of the DrawScribe plugin, plus the Blend Tool. This tutorial includes detailed instructions and interesting tricks that will allow you to succeed in creating this kind of style. Continue...


Working with type in Illustrator

Focusing on using type in Illustrator to create a bold, eye-catching message, we are going to use a 'type as image' style of typography. This style is both popular and effective for communicating strong messages visually. Continue...


Designing type art for Haiti

Engaging 12 illustrators with wildly contrasting styles could have resulted in a disconnected set of artworks, but Stephen wanted harmony. He wrote a simple brief explaining the positive messages that The Renmen Project wanted to evoke. He also sent round a template to provide guidance on the letters’ dimensions and shape, plus a primary and secondary colour swatch. Continue...


How to Add Decorative Glamour to Your Ordinary Script Font

Sometimes you need to go a little bit wild with your typography. In these cases, you can either take the easy way and choose a fancy font from some of the free font site like Dafont or Urban Fonts, or get creative and give some extra sparkle to your ordinary font, creating a typographic design which can stand by itself. This tutorial, discusses this later option. Beware of the following boolean operations galore!  Continue...


Create type from a single path

In this tutorial, I'll show you how to construct this great quote from Erik Spiekermann in a handwritten style using Illustrator's paths, and encourage you to study the type to find effective ways of connecting each letter. Continue...


Colourful type art

Michael Kammerer’s abstract works feature heavy doses of typography and geometrical shapes. Here he shows you how to produce an illustration based on the letters D and A in a kind of dismembered style. Continue...


How to Make a Wooden Text Effect with Adobe Illustrator

In the following tutorial you can learn how to create "wooden text". Using the 3D Extrude and Bevel Tool combined with some clever gradients and layer effects you can make this great effect that’s perfect for text and symbols alike. Continue...


How to Turn Your Boring Type Into a More Interesting Art Piece

In this tutorial I will walk you through a process which is great for turning some static type into a more interesting art piece. Continue...


Create an Organic Spring Lettering Illustration

If you want to learn how to create organic lettering, with digitally drawn lettering, then we have an awesome tutorial for you. This tutorial covers all the techniques in creating this lettering illustration and gives advanced coloring and compositional tips. Continue...


Craft vectors with style

In this tutorial I’ll explain a technique that I developed to treat a logotype supplied in vectors by the creative team at The KDU. The project started with an all-member call-out to help promote a fashion trade show called TMRW. Continue...


Create jewel-encrusted gold 3D type

Gadzala explains how to extrude type in 3D, apply metallic materials to give it a golden sheen, and add gems, sparkles and gleams. The look is totally over the top, but retains an innocence that stops it looking cheesy. Continue...


Create a Reusable Retro Type Treatment

In this tutorial I will show you how to create a simple retro type treatment. Even though its simple, it uses some powerful Illustrator features. If you have read my tutorials before, you know this means the Appearance panel! Along with the Appearance panel, we will be using some texture effects, Warp effects, and some simple layering. Continue...


Create isometric grid-based 3D lettering

Steven Bonner shows you the possibilities of an isometric grid by creating a custom 3D typeface. Continue...


How to Create Folded Text with Adobe Illustrator

Today we will learn how to create text that is located in different planes. One very interesting trick with the Bounding box will let us do it without using 3D modeling. Find out more at the jump! Continue...


Woodcut effects for type art

The tutorial will give you an appreciation of the versatility and potential of custom brushes, which you can use to achieve effects ranging from shadows and light to textures. You will also learn how to manipulate strokes using Illustrator’s Width tool and create depth with the Blend tool. Continue...


How to Create a Vector Grass Text Effect

Follow this quick tip and learn how to create a simple grass text effect. We will use the Note Paper effect then with the help of the Live Trace options to obtain the vector shapes that we need. The Pucker & Bloat effect can be used successfully in this case to create a pretty realistic grass look. Let’s begin! Continue...


Design a classic serif poster

From choosing the perfect font to bespoke glyphs and ligatures, Emiliano Suárez reveals how to manipulate serif type in your design work.   Continue...

Photoshop


Create Gold Ornamental Text in Photoshop

Ornamental text can be created in several ways. Today we will demonstrate how to combine several stock images to create some nice gold ornamental typography. Let’s get started! Continue...


Create Awesome Black and White Abstract Text Effect in Photoshop

In this tutorial, I will show you the steps I took to Create Awesome Black and White Abstract Text Effect in Photoshop. The main focus of this tutorial is the use of layer masking techniques, plus some interesting drawing skills. Have a try! Continue...


Create Light Painted Typography From Scratch in Photoshop

If you’ve ever attempted to write words using traditional light painting photography techniques you probably know how challenging it can be to create words that are easy to read. In this  tutorial, author Alex Beltechi will demonstrate how you can create a similar look without a camera and tripod. Continue...


Fantasy Spring Text Effect

This tutorial will show you how to create a simple brush, then modify its settings, in order to create a nice fantasy spring fresh text effect. Continue...


How to Create an Abstract Wireframe Text Effect

In this text effect tutorial we will demonstrate how to create an abstract wireframe text effect. Let’s get started! Continue...


Honey leaking effect on the delicious pancake

Play with Warp transformation to create more natural handwriting and leaking effect. Continue...


How to Create an Incredible Typographic Illustration

All work and no play makes Jack a dull boy. In this two-part tutorial, we’re going to learn how to bring a simple proverb into a complex typographic illustration that achieves a level of realism without actually using any photos. Yes, we’re going to build this idea from the bottom up. In the first part, learn how to model your own objects in Cinema 4D and prepare them for isolation in Photoshop. Continue...


Create a Funny Wooden Type Treatment in Photoshop

In this tutorial I’ll show you how to easily create a wooden text effect. We will start from a polygon, then we will play with wood textures and with layer styles to achieve a really funny result. I’ll go in depth with each step so that Photoshop beginners will find the process easy to follow. Continue...


Create Typography That’s Going Down the Drain

In this  tutorial, author Alex Beltechi will demonstrate how to create another typographic treatment from scratch using pipes and hoses for letters. In this tutorial you will learn how to plan paths in Illustrator, model them in Cinema 4D and bring them alive in Photoshop. You’re going to need to know the basics of Cinema 4D for this one, as today’s focus is on Photoshop. Continue...


Chrome Text and Frame Effect

The key to making any type of material look good in Photoshop is a combination of surface texture and lighting. For chrome, the surface is very smooth and shiny. So we need the shape and lighting to reflect that (pun intended!). The good news is that with the addition of Layer Styles in Photoshop several versions ago, chrome is now an easy effect to achieve. The effect works equally well on text and other objects.   Continue...


Vintage Typography Tutorial using Ornamental Styles

Today, we have a great vintage typography tutorial for you to follow along with.  You’ll see how to use a scanned image as the basis for ornamental text, and then how to work with stock images and Photoshop to create a vintage typography artwork. Continue...


Papercraft Text Effect

As usual, my tutorials are very long. It is not that the effect is difficult to achieve. In fact it is very easy. It is just because I don´t want to leave beginners out in the cold. Each step, no matter how easy it is, is explained in detail. Of course, I can unintentionally leave something unexplained, but I expect everybody, with a minimum Photoshop experience, to be able to follow the tutorial and reach the final result. Continue...


Create Creepy, Branch Based Typography

Learn how to create some creepy typography created out of winter branches: Continue...

CSS


Create Beautiful CSS Typography

In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic. We’ll also touch on some general typographical concepts along the way. Continue...


Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here! Continue...


Using CSS Text-Shadow to Create Cool Text Effects

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects! Continue...


CSS3 Trans­forms & @font-face Experiment.

It’s a web page com­pletely designed using basic CSS and new CSS3 tech­niques. Pretty impress­ive right? Continue...


3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover! Continue...

Follow us if you want to be the first to know about the latest Adobe Illustrator tutorials and articles. Vectorboom team works for you!

Total comments: 0
Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Username
Password
Recent Consultations
Overview of The Stylism Plug-in for Adobe Illustrator
How to Create a Floral Seamless Pattern with Adobe Illustrator CS6 and WidthScribe