Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 12 2014

08:14

January 22 2014

15:00

Get ‘Layed’: What You Need to Know about Photoshop Layers

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

photoshop-layers-02

photo from Wallpaper Stock.net

Having said that Photoshop is a must-have software, it is also equally a must to master it. And that entails a great deal of effort. With all the tools, options and features of Photoshop, which – until today – is continually developing, it is very difficult to start training with the software. But never fret, you have us. What is 1stwebdesigners for, right?

photoshop-layers-01

Photo from Deviantart

One of the probably gazillion things you need to know about Photoshop is its layers. The importance of mastering this feature is, of course, pertinent for a web designer as a web design, before being coded, is most probably created through Photoshop.

Layers are free and independent elements in a Photoshop work space. They can be manipulated in scaling, color, effects, position, opacity and more. Layers often represent separate elements that a designer wants to tweak or customize. In the realm of web design, layers play an important role. They are used to represent the design elements of a webpage. They are made to imply a text box, an image, a background, the content and a lot more.

photoshop-layers-03

Photo from Designcontest.com

Most Photoshop users will agree to the notion that one of the key features of a software like Photoshop is its good layering options. Here are some of them that you need to know.

Fill and Opacity

Fill and opacity are two different things. Although they are commonly confused as the same terms and often connected as a single terminology (i.e. Fill-Opacity), they are completely different from one another.photoshop-layers-04

Fill is an option of a layer to customize how many percent of the background color is seen. This option is commonly used for shapes

.photoshop-layers-03

On the other hand, opacity is the option that dictates how transparent the whole layer relative to the other layers in the design.

The difference between the two is that the Fill option does not affect layer styles. For example, you put a stroke in the image. Notice that when you ticker down the fill percentage, the stroke is still seen unlike if you lower the opacity percentage, you see the whole image together with the layer styles is made transparent.

photoshop-layers-05

Grouping

This is one of the most rudimentary learnings a Photoshop user should have when it comes to layers. Grouping really does not do a lot of things in the design per se. Despite that predicament, the importance of grouping is never left behind. You see, grouping helps in the organization of layers. Aside from naming them properly, which is also very useful, grouping layers improves the workflow because you don’t need to search the whole design looking for a single pixel. Just find where it belongs and voila! You have it!

photoshop-layers-09

photo from elated.com

Masking

Masking is the act of hiding particular portions of the layer to show the layers below it. This technique is a very important skill in a designer’s arsenal as it is a good way of combining multiple photos in one seamless image.

Photoshop masks can be used at a very large amount on a single layer. According to TutsPlus.com, you can use up to 11 Pixel Masks and 11 Vector Masks!

If you want a good tutorial, better visit this.

photoshop-layers-06

Photo from Photoshopsupport

photoshop-layers-07

Photo from Amazon news

Selecting

Supposed you’re slicing up particular photos in a design. You have a lot of options to choose from. Either you click the layer you want to copy or cut, press CTRL+A and paste it wherever you want to, or use the lasso or quick selection tool. But you have a third option. That is quick selecting it by pressing CTRL + click the image desired.

photoshop-layers-11

Layer Styles

Layer styles give you the liberty to select specific options to enhance the design. There are some options to tinker on:

  • General Blending – here you can choose the Blending Mode. The Blending mode option allows you to customize background and image relationships and how to complement, contrast or both. Aside from that, you could also choose from advanced options where you are allowed to reduce the opacity of the layer as a whole or per channel.
  • Bevel and Emboss – this option gives your layers a 3D feel as they tend to pop out of the design. The Bevel and Emboss option add depth to the design, making it more ‘realistic.’ In this option, you could select from contouring options like inner bevels, emboss and more.
  • Stroke – this is one of the most used options in the menu. Stroke adds an outline to the main image. You can choose the opacity of the stroke, the color and its blending options.
  • Inner Shadow- gives you a subtle darkening of the layer. Inner shadow also provides depth. (Outer Shadow is the opposite of this)
  • Inner Glow – adds a shiny and feathered yellow design in the outline of the image within. (Outer Glow is the opposite of this)
  • Color Overlay – fills the whole image with a chosen color. It will totally forget what’s inside the fill. It will surely fill every spot of what you wanted it to fill with.

photoshop-layers-10

Conclusion

Layers are one nasty piece of business to study. It requires a lot of time and patience to do this. With the importance of layers highlighted, it is equally important to study them well. The key to this lesson is that you should try using them and commit mistakes. It’s where we really learn- from our mistakes. So next time, you’ll be dealing with layers, stand up and be proud that once in your life, you got ‘layed’ here at 1stwebesigner. Again, pun intended.

January 15 2014

14:00

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

The need I am talking about is lighting effects. In photography and graphic design, lighting is very important because it stimulates the vision to think or perceive a certain period of the day. Light, in these specific art forms, creates the illusion of time and space. You can readily make people believe that you took a certain photo at night just because the lighting says so. One can also confuse a picture to be taken at dusk when in fact it’s otherwise just because the light says so. Having said that, it is important to put in mind these reminders and master the art of lighting.

For beginners, you’ll find these tutorials very fun-to-do and instructive. For experts and masters, you’ll find these links refreshing. So here they are:

Nike Ad in Photoshop

photosho-lighting-effects-11

Morning Light in Photoshop

photosho-lighting-effects-10

Lomography Effect

photosho-lighting-effects-09

Rainbow Light Effect

photosho-lighting-effects-08

Light Bulb Text Effect

photosho-lighting-effects-06

Apocalyptic Effect

photosho-lighting-effects-05

Fiery Explosion

photosho-lighting-effects-04

Dynamic Lighting

photosho-lighting-effects-03

Crystallized Effect

photosho-lighting-effects-02

Scarecrow + Sick Background Lighting

photosho-lighting-effects-01

Conclusion

You have to admit that Photoshop is the best editing software when it comes to photos. With its versatility, you can easily play with the lighting of your photos or graphic illustrations. These tutorials are just guides. Remember that you should never stick to them point by point. You should learn how each step works and how can you adjust them for different photos of different scenarios. This way, you can apply the concepts in your everyday designs.

August 05 2013

13:00

Working with Types: Typography Tutorial for Beginners

In this typography tutorial, I will guide you on how to transform boring texts to your advantage. You will learn how to utilize typography for your website, or even for your print needs. This article will extend from web page design, to printing to graphic images.

They say letters are boring. Unlike videos and music, text is static. It does not move or tickle other senses besides the eyes. Texts are usually placed as information-dissemination tools which convey the detailed message of the media being used. For example, if you upload a YouTube video tutorial, the video is the dynamic medium which will aid the viewer to achieve the goal. On the other hand, the text will provide all the details needed in case something is not clear.

This fact might give you an impression that texts are really boring. But what if they are really not? What if texts, which are used mainly to detail, are used for the design function? How is that possible? Of course, through typography.

Typography has existed for a long time. It originated from a time we all couldn’t remember. Basically, typography is the technique of putting texts or types in an orderly manner to make it visible, attractive and readable. Simply put, typography is the art of working with texts, graphically.

The tutorial is divided into five parts:

  1. Creating Typographies Using Photoshop
  2. Choosing the Perfect Fonts for Every Occasion
  3. Where to Download Fonts (Free and Premium)
  4. How to Consider the Perfect Colors Fit for Your Design
  5. Sample Finished Product on a Website

Type, Design, Publish!

Aside from Adobe Illustrator, Photoshop is also a good software that can help you render good typographies. This is easier and more advantageous to use if you are a web designer. In Photoshop, you could create typographies, render it as pictures, and even layout your own website!
So, what are the things we should know to create Photoshop typographies?
First, you should familiarize yourself with the Type tool. It’s a flexible tool in Photoshop where you could customize the types according to your preference. You can find it in the tool palette of your Photoshop software, or simply press the shortcut ‘T’.
The Type tool has three sub-tools. They are the:

  • Horizontal Type Tool – this sub-tool will enable you to type text as you type normally, from left to write.

typography-tutorial-Horizontal

  • Vertical Type Tool – this sub-tool will enable you to type text from to bottom.

vertical-tool-typography-01

  • Horizontal Type Mask Tool – this sub-tool will enable you to type horizontally in a mask. This can be used if you want to use your Type in picture backgrounds. For example,

Insert the desired picture:

typography-tutorial-original
Use the horizontal Type mask tool and type your chosen word.

typography-tutorial-typetypography-tutorial-koalatype

You will now have the text masked over the main picture (notice the “marching ants” forming the world Koala).

typography-tutorial-marching-ants
Now you can cut the photo and what will remain is the masked area.

typography-tutorial-ctu

  • Vertical Mask Tool – basically the same as the horizontal mask tool. The only difference is the orientation of the type.

typography-tutorial-vertical-mask
One of the things that you should know are the text panels. In Photoshop, there are two text panels that you can find: one is located on top of the window, just below the Menu bar, and the other one is located at the right side of the window.

typography-tutorial-textpaneltop

typography-tutorial-side
The top panel shows the font face, style, size, alignment, color and warping options. The side panel shows the options for font face, style, size, spacing, kerning, leading, horizontal and vertical size, color, and style options.
The font face shows options where you can select from the different installed fonts recognized by Photoshop. Here, you could choose from Impact, Arial, Times or any other installed fonts. The font style shows you customizations for text styles. You could choose from Bold, Italic, Black, Bold Italic or Regular.

The warping option allows you to choose between options and warp your text, Just simply press the button as shown.

typography-tutorial-Capture
typography-tutorial-warp
Spacing shows you the distance between individual letters, kerning allows you to set the horizontal spaces between all selected letters. Leading, on the other hand, allows you to set the vertical spaces between each line.
Horizontal and vertical settings give you the liberty to decide whether your texts will blow up or shrink down horizontally or vertically. This option is different from the font size because the latter changes the size uniformly on both horizontal and vertical axes.

Aside from that, you can also choose whether to bold, italicize, large caps, small caps, subscript, superscript, underline or strike-through texts.

Familiarize yourself with the functions of these tools first before you move on to the next part.

Find the Fount of Fair Fonts!

Of course, as tools for design, typographies should be typed in attractive and suitable fonts. There are a lot of fonts available on the Web to download.

Fonts should be readable yet peculiarly attractive. It should suggest a feeling of belongingness in the typography that you are designing. Of course, using good fonts is as important as designing it. It creates a sense of identification for your site. Because of this, you need to familiarize yourself on its different kinds, forms and uses.

There are seven font categories. They are the most commonly used font types in designing. They are:

1. Old style – old style fonts are considered the parent fonts. They originated from the traditional methods of printing. These fonts are commonly identified through their serifs. Serifs are fonts which have flag-like endings. Also, the fonts in this category are commonly two-stroked, meaning, they are composed of thin and thick parts. They are often used in print output, like newspapers and books or in designs which require formality, credibility and simplicity.

Examples:

  • Times New Roman
  • Garamond
  • Book Antiqua
  • Baskerville Old Face

typography-tutorial-font-oldstyle

2. Modern – modern typefaces are commonly changing according to trends. One font can be modern depending on the pop culture. Commonly, modern fonts are digitally produced, meaning, they don’t have root traces on print fonts. These fonts are commonly used for movie posters, shows, and events.

Examples:

  • Bauhaus 93
  • Avengance
  • CollegiateHeavyOutline

3. Script – script fonts are fonts that have curves and ornaments. They are calligraphic in nature and suggest a theme of elegance, formality or luxury. Commonly used in weddings and other formal and conservative occasions, the script fonts are more evidently elaborate than the design itself.

Examples:

  • Script MT Bold
  • ANGEL TEARS
  • Before the Rain
  • Brush Script Std

4. Decorative – these decorative fonts are very thematic in nature. They are used to imply a very particular occasion or event. Often used in brandings which require recognition and easy memory stamping, decorative fonts can used for designing purposes.

Examples:

  • a dripping marker
  • Confetti Stream Gretoon

5. Sans serif – literally meaning without serif (sans is a French word which means without), Sans serif fonts are fonts that have no flaglike endings. They are commonly plain. These fonts are commonly used in main texts for print output and web texts. They are easy to read but plain.

Examples:

  • Calibri
  • Arial
  • Century Gothic

6. Ornaments – these are fonts that are based on symbols and pictures. They are best used for logos and secret messages.

Examples:

  • Symbol
  • Wingdings

7. Slabs – slabs are wide fonts with slab serifs. Slab serifs are thick horizontal endings placed on letters.

Example:

  • Blackoak Std

slab

Fonts, fonts, fonts everywhere!

The Internet provides us a huge database of downloadable fonts. Websites offer a wide variety of fonts ranging from usage to font categories. The only challenge that remains for us, is to actually look for them.

  • Font Space – this is one of the best sites as they claim to have 21, 043 fonts in their database. You can choose from the popular ones, or you can look for the newly uploaded ones. It’s up to you. Just click the font name or image and download.
  • 1001fonts - this one’s also claiming a thousand fonts. The only difference of this site from fontspace is that you could actually buy premium fonts here.

Other sites: dafont, 1001freefonts, fonts.

Now you’re probably wondering why the hassle to buy premium fonts if there are free downloads? Well, the thing is, there are fonts that aren’t free. Some of them, which are sold by their authors, are originally made. It means that the designs are as exact as you would want them to be. For more info on this, just read our article on fonts.

Are colors only for design?

Coloring can be fatal to a design. Failure to harmonize color to its target market could result into a decline of viewership for a website. Having a good color that is identified to your company or website, is as good as identifying it with the its logo. That is why a lot of websites have brainstormed on how to have the best logo color possible.

Think of Facebook, YouTube, Twitter, Google and Yahoo. Close your eyes and imagine a color when you hear their names. Of course, you would see exactly how they appear on your browser. That is the power of colors. They make you remember the site itself. With the eyes as the primary organ used in browsing the web, colors can help you earn a lot of money and viewers as well.

Think of your website typography. Will it have the same impact on your viewers? Will it stamp the same memory of your website to them? Or would they just forget it because some other website has a cooler way of using it?

According to Kissmetrics.com, 93 percent of people remember the company by their color. Meanwhile, the same research shows that 83 percent of buyers buy an item because of its branding color. Now think, are colors just for design? I guess not.

So, when will you use a certain color?

  • Use yellow when you want to get attention. Yellow, a hot color, is also a neon. It grabs the eyes’ attention. If you want to make them focus on something, use yellow. It is optimistic and youthful. Likewise, when you create positive typographies, use this color.
  • Use red for urgency. Red suggests alertness, energy and importance. Use red when highlighting warnings, emergency drills, or something that should be done ASAP.
  • Use blue for trust. Often, banks use the color blue to ensure that your money is secure and safe. It suggests a stronghold of something that should not worry you. Use it to make your viewers calm and clear-minded.
  • Use green for relaxation. The eye processes green very easily. It could also suggest wealth, nature, beauty and peace..
  • Use orange for calls. A call to action. A call to move. Use it in advocacies, meetings, and other political matters.
  • Use pink for romance and feminism. Pink suggests a touch of a woman to a design. Use this to attract female teen readers.
  • Use black for luxury. Black is an elegant color. Use it for formal occasions, formal occasions and any design that would suggest luxury.

Typography Tutorial: Make a Cool Typography in 10 minutes

Okay. This one’s a good example of a typography with a simple message: It’s alright to commit mistakes. I made this using the concepts I have discussed in the previous parts of the blog. So how did I make it?

typography-tutorial-final
1. Open Photoshop. Create a new file. I used a preset size with a width of 8 inches and height of 10 inches, with 300dpi. You can, of course, change this one to any size you want.

typography-tutorial-1
2. Next, add a new layer. Name it “background”. Double click it to show the LAYER STYLE window.

typography-tutorial-2
3. Go to Gradient Overlay and click on the gradient. A window will open that will let you select the colors you will use. Use the #6dd0f7 and #4aa8cd colors. Make the Style: Radial.

typography-tutorial-3atypography-tutorial-3b

4. Now, we need to do the ribbon design. Go to the Rectangle tool and draw a rectangle. Color it #8393ca.

typography-tutorial-4a
5. Now, create a triangle using the pen tool. You should be able to create a triangle that would look like a flap of the actual ribbon. Color it #6274b2.

typography-tutorial-5
6. Copy the triangle and flip it. Now draw another rectangle using the rectangle tool. Color it #8393ca. Place the rectangles in a manner that they will overlap with the triangle flaps

7. Duplicate the ribbons.

typography-tutorial-6
8. Now type the message on the ribbons. In this case I used the Yellow Peas Demo font. I colored it black. For the center message, I used the Vermin Vibes 2 White and colored it #6274b2.

typography-tutorial-7

typography-tutorial-9
10. Save it as a JPEG file.

typography-tutorial-final

May 07 2012

15:27

50 Photoshop And Illustrator Tutorials For Creating Text Effect

Adobe Photoshop and Illustrator are tools that every designer and artist use, interact and rely on for completing his design work. These tools cannot be overlooked no matter how smaller or bigger your design work is. Thus, learning to use this most important and crucial designing tools inside out is important for every designer. One of the major uses of Photoshop and Illustrator are in creating dramatic and dazzling text effects for banners and logos.

In this round up, we have put together a collection of 50 Adobe Photoshop and Illustrator tutorials that will help you learn creating awesome text effects. All these tutorials are very easy to follow. Enjoy!

How to Create an Abstract Wireframe Text Effect

Create Detailed Vintage Typography with Illustrator and Photoshop

How to Create a Colorful Text Design in Photoshop

Create an Extremely Glossy Text Effect

Create an “IronHero” Text Effect in Photoshop

Creating Simple Gold Text Effect

Create a Light Bulb Inspired Text Effect in Photoshop

Cool Dots Text Effect

Create a Cinematic “Sergeant America” Text Effect in Photoshop

Create Delicious Cookie Text Using Photoshop

Create a Metallic Type Treatment Using Photoshop and Cinema 4D

Create a Stunning Text on Wild Fire Effect

Create “Awesome” 3D Style Lettering in Photoshop

Create a Retro Folded Effect using Photoshop

Create a Stitched Text Effect for an iPad Wallpaper

Create a 3D Newspaper, Text Effect in Adobe Illustrator

How to Use Typography to Create a 3D Text Effect

How to Create a Vintage Type Postcard

Create a Cartoon-Style Graffiti Text Effect in Photoshop

Create A Fancy Neon Text Effect In Photoshop

Create a Futuristic, Grungy Metal Text Effect in Photoshop

Create Typography That’s Going Down the Drain

Create a Royal Gold Text Effect in Photoshop Using Layer Styles

Create a “Transfarmers” Text Effect Using Layer Styles in Photoshop

How to Create a Chocolaty Valentine’s Day Card for Your Girlfriend

Text In Stitches

Simple Dark But Vivid Text Effect

Create A Dynamic Shattering Text Effect

Delicate Text Effect

How To Create a Gothic Blackletter Typographic Design

Type Illustration Project: Experimental Digital Workflow

Clouds Text Effect in Pixelmator

Create Detailed Letters of Gold and Diamond

Colorful Plexi Text Effect using Photoshop

Awesome Text Effect

Create a Swirly Type Treatment

Floral 3D Text Effect

Colorful Light Burst Text In Photoshop

Design a Skin-Textured Typography Scene

How to Create an Incredible Typographic Illustration – Part 1

Colorful light burst text effect

Create a Dream Design with 3D Typography

Create an Ancient Typography with Dry Soil Texture

How to Create an Ice Text Effect with Photoshop

Stunning 3D Effect

Create a Baseball-Inspired Text Effect in Photoshop

Elegant Leather Style Text Effect

Stars Candy Text Effect

Learn to Create Party Text Effect

Learn to Create Marble Text Effect

How to create Caramel Text Effect on Photoshop

February 19 2012

10:00

Create Your Own Font and Kill Comic Sans

Font! The word has a whole lot of science involved with it. Fonts are everywhere and those who don’t understand fonts use Comic Sans! Don’t worry, I am not diving into the never-ending debate of “Comic Sans in not a font” and related stuff. We are here to learn how we can create our own personal font. A point comes in everyone’s life when we want to see our own handwriting in the form of font. Also, one may just want to experiment with fonts and want to see something different in the fonts list in their personal computers. This is when you feel the need to create your own font. This article will try to dig into two different perspectives of this issue and find a solution in both cases.

Note - My initial way will be more or less generic and will depend on how much you practice the same. You will have to scan your typeface multiple times and experiment with the steps that I will list. The second way will help you understand a hidden Windows tool that can be used to create characters that can be used over and over using your Character Map.

Create Your Own Font Using Paid Software


This method is going to be a bit boring and might just force you to give up on it while half way through. But, I will suggest you stick around as the end results will be amazing. I don’t promise that after your first try itself you will be the Fontographer that you want to be, but sooner or later you will be swimming in the river of your own fonts. Who knows someday 1WD might just list your font in its showcase. #Dreaming!

So, lets start with the usual steps that will teach you how to create your own font. But, remember that you will have to inspire yourself to create your own thing.

  • Start Consuming Information - You might have been a designer all your life or may be a writer by birth, but creating your own font is a different theory altogether. Issues like spacing, bends in letters, curves, angles etc. become so important that overlooking any one of them might just kills the whole experience. I won’t be jotting down all those concerns as understanding the science behind fonts is a different story and one can write multiple articles on that itself. Let me jot down some articles and books that will help you gain insight into the mechanics of fonts:
  1. A Short Course On How To Improve Your Site’s Typography on 1WD.
  2. Fonts and Encodings by Yannis Haralambous.
  3. The Complete Manual of Typography by Jim Felici.
  4. Thinking with Type by Ellen Lupton.
  • Learn To Sketch - This is very important. I have this cousin of mine who loves logo designing. I saw that he was designing logos directly in Photoshop. I helped him understand the importance of sketching before moving on to Photoshop. Today, he thanks me for the push that I gave him. It is important for designers to understand how sketching on paper is a lot different from what they do directly on computer. You will never be able to get the real feel of curves and angles unless you have a pencil in your hand. Later on, the pencil sketch will act as the much wanted skeleton that will be the backbone of your digital font. Keep it clean and see the magic. Remember that sketching on paper will give you the liberty to understand the quality of lines and their exact geometry. Spacing will be taken care of by your software later on once you go digital.

  • Scan Your Sketch and Convert to Vector Art - This is it. Time to go digital! Once you are done with your sketch and you are sure that the end result is exactly what you want your font to look like then it is time to scan your sketch and clean it up a bit. Use Photoshop (or any other image editing tool for that matter) and clean up your sketch. Let go the smudges and stray lines. Covert the sketch to vector art before you proceed.
  • Time to Pick Your Font Software - This is the point where most of the readers might just give up. The reason being that most of the good font software out there will cost you some cash. Buy one and start learning them. One of the best in the business in Fontographer. I will suggest that you go ahead with Fontographer as it has a lot of resources on the web that will help you understand the software and create your very first font. Stick with the adrenaline rush and don’t stop until you have your own typeface!

[image via Soft Pedia]

  • Lastly, let us know once you have your own font up and ready for use.

Create Characters Using Secret (and Free) Windows Software


Private Character Editor! Heard of it before? Well, PCE is Windows-based software which is already installed on your machine. You just don’t know it yet. Those looking to create their own fonts or characters real quick can use this tool and start rolling in no time.

PCE can help you create around 6400 characters which can be used on your documents using “Character Map”. Now, let us quickly understand how PCE works:

  • Click on Start button and then click Run (or Windows key + R). Now in the dialog box type C:WINDOWSsystem32eudcedit.exe (considering that your Windows is installed in C: drive) and hit enter.

  • You will be greeted with PCE’s “Select Code Window”. Basically, this window will be your map using which you will use to map the characters that you create in the Windows character library. You can use any of the boxes that are blank. Choose any one of these and click Ok.

  • A grid measuring 50×50 pixels will open. You can use the tools on the left to create your own character. Take your time and edit your character as much as you want. The drawing area is overly simply for anyone to understand what is happening. Though, you will have to be a calligraphy expert to come up with a really attractive design. As you can observe in the image below, I ain’t one!

  • You can even copy and paste the bitmap selection between PCE and paint.
  • Also, you can use an existing character as a base for your new design. Copy the existing character to the grid by using Edit > Copy Character. Change it with the available tools and have fun.
  • Once you are done with your design then either you can map your character to all the fonts in Windows or to selected ones as per your choice. Go to File > Font links .. to understand what I mean.

  • Lastly, save your character before closing from Edit > Save Character As.

  • Now, it is time to use your character. Again, open the Run dialog box and type charmap.exe and hit enter.

  • From the Font drop down menu opt for All Fonts (Private Characters) and voila!

  • Select your character and click the Copy button. You can paste your selection anywhere including the notepad.

Conclusion


As you can see, creating your own font isn’t an easy task but there are options available. Creating your font will require a lot of concentration and commitment. Remember that you won’t be able to create your font if you give up on yourself. Also, for those who don’t want to go through the process of scanning or for those who don’t own a scanner, PCE is always there for help!

December 20 2011

21:00

50 Excellent Text Effects Tutorials in Adobe Illustrator

We are all well acquainted with the power of Adobe Illustrator and how important it is to a designer. Be it creating appealing text effects or creating awesome characters, Adobe Illustrator is always there to help out designers. In this collection, we are presenting some amazing and helpful tutorials regarding creating incredible text effects by using Adobe Illustrator. With this selection, you can learn how to create blurry, sketchy, bubbly, sticky, sleek, glossy, retro, futuristic effects.

Without further ado, let us move towards the collection of amazing tutorials. Kindly note that some of these tutorials may also require the use of Photoshop intended for finer details.

If you think we have missed some cool tutorials out there, then let us know or share them with us in the comments. Enjoy!

1. Create a Slick Golden Text Effect with Adobe Illustrator

In the following tutorial you will learn how to create a slick golden text effect. Although it’s a pretty short tutorial, the sixteen steps cover many techniques and effects that can be used for other projects. The Pen Tool steps may be a bit challenging, but with patience and some basic knowledge you will succeed.

Create a Slick Golden Text Effect with Adobe Illustrator

2. How to Build Letter Art From Bricks In Illustrator

In this tutorial we’ll use 3D-rendering, Blends, and an Art Brush for creating the final brick art. The skills you will learn here can easily be transferred to creating various brick letters. Enhance your vector skills as a digital brick artist in today’s Illustrator tutorial. So let’s get started!

How to Build Letter Art From Bricks In Illustrator

3. How to Create a Neon Text Effect

In this tutorial we will learn how to create a neon text effect using Gradient Mesh, 3D Modeling, Art Brushes and Transparency palette. Let’s begin!

How to Create a Neon Text Effect

4. How to Create a Sparkly Text Effect

In the following quick tip you will learn how to create a sparkly text effect in fifteen simple steps. It’s a another tutorial focused on the Appearance panel. Basically, almost the entire text effect is made using only one compound path. A compound path with a simple fill, eight strokes and some basic Illustrator effects.

How to Create a Sparkly Text Effect

5. How to create candy cane typography.

In this tutorial we will create a superb candy cane type design using Illustrator and Photoshop. Apply this effect to your own text and create cool and unique Christmas cards!

HOW TO CREATE CANDY CANE TYPOGRAPHY

6. Meltdown Text Effect

Create a super cool meltdown text effect for a typeface in this premium illustrator tutorial. Have fun with your imagination and artistic skills. Learn how to create glows and a liquid drip effect for text in this tutorial. You will learn the techniques which I used to create beautiful text effects.

Meltdown Text Effect

7. Create a cool water effect

In this tutorial the artist will walk you through the process that he has used in one of the design projects I finished recently. You will learn how to use the mesh tool to create water droplets, use the symbol sprayer tool using symbol of water droplets and dispersing them.

Create a cool water effect

8. Tron Legacy Tutorial

In this tutorial you will learn how to create a beautiful effect like the Tron Legacy Style, for this tutorial the artist used Adobe Illustrator, Adobe Photoshop and Cinema 4D.

Tron Legacy Tutorial

9. Create a Jar Illustration and Splashy, Purple Text Effect

In the following tutorial you will learn how to create a jar illustration and splashy, purple text effect. We’ll craft this with numerous, layered shapes and with various opacities. We’ll work with paths and the Pathfinder tools to enhance our text, give it dimension, and style. Let’s get started!

Create a Jar Illustration and Splashy, Purple Text Effect

10. How to Create a Delicious Chocolate Text Effect

For all the chocolate lovers out there, here is how to create a delicious chocolate bar text effect in Illustrator. You will use the Blend Tool, effects like Roughen and Chrome, different Blending modes and also the 3D Extrude & Bevel effect to create perfect chocolate squares. Enjoy!

How to Create a Delicious Chocolate Text Effect

11. Create Colorful, Layered Paper Type

In this tutorial the artist will show you how to brighten your mood by creating vivid illustrations with layered paper text and ribbons. We’ll create custom type and use Illustrator effects extensively to enhance our work.

Create Colorful, Layered Paper Type

12. Create a Variety of 3D Lettering Effects for Poster Design

In this tutorial the artist showcases three different approaches for creating simple 3D lettering effects in the context of poster design. Onward and upward we go!

Create a Variety of 3D Lettering Effects for Poster Design

13. Create a Furry Calligram

In this tutorial artist will walk you through creating your own calligram inspired by a dog named Poppy. You’ll learn how to manipulate a typeface through to rendering fur, adding doggy features, and various details.

Create a Furry Calligram

14. Create a Mummy Text Effect

In this tutorial you will learn how to create this treatment with some gradients and, of course, heavy use of the Appearance panel. There isn’t a lot of steps but the tutorial is slightly more advanced.

Create a Mummy Text Effect

15. Golden Text with Diamonds

In this illustrator tutorial, we will learn how to create a golden text style with diamonds using the appearance palette and scatter brushes. You will learn lots of new techniques on applying transform effect, offset path and seamless pattern on appearance palette.

Golden Text with Diamonds

16. How to Make a Flesh Ripping Zombie Type Treatment

In this tutorial you will learn how to make a Flesh Ripping Zombie Type Treatment.

How to Make a Flesh Ripping Zombie Type Treatment

17. Creating an Environmentally Friendly Green Type Treatment

In the following Illustrator tutorial, the artist will teach you how to create a green type treatment. It works great for logos and other design elements.

Creating an Environmentally Friendly Green Type Treatment

18. Create a simple blood text

In the following steps the artist will show you how to create a simple blood text effect. You’ll start with a simple text then you will use the Roughen and the Warp effects. Finally, you will need multiple gradients and some simple brushes.

Create a simple blood text

19. How to Create a Zodiac Themed Graphic Style

In this tutorial you will learn how to create a complex graphic style, using only the Appearance palette and commands from the Effect menu. We will be creating a style based on the signs of the zodiac. All the style elements are created from a single character. Is it hard to believe? Let’s get started!

How to Create a Zodiac Themed Graphic Style

20. How to Create Smoky Brushes and Type In Illustrator CS4

In this tutorial, the artist explain how to create realistic smoke, make it into a brush and use it for type. Let’s light up our vector cigarettes and get smokin’!

How to Create Smoky Brushes and Type In Illustrator CS4

21. Old School Type Line Gradients

A detailed tutorial on how to create old school style type.

Old School Type Line Gradients

22. How to Make a Wooden Text Effect

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.

How to Make a Wooden Text Effect

23. Creating stunning, detailed typography with illustrator

In this tutorial you will learn how to create stunning, detailed typography with illustrator

CREATING STUNNING, DETAILED

24. Let’s Make a Playful Yet Robust 3D Letter Design

This tutorial is perfect for the confident beginner who wants to take her skills to the next level. We’ll explore how to create 3D text and use depth-of-field to enhance a design.

Let’s Make a Playful Yet Robust 3D Letter Design

25. How to Create a Trendy Retro Type Treatment

In this Illustrator tutorial, the artist will show you how to create a trendy retro type treatment with a free font, gradients, blends, and some scatter brushes. It’s a relative easy tutorial containing techniques that can be quickly applied to many other type treatments and various graphic elements.

How to Create a Trendy Retro Type Treatment

26. Bling Bling Text Effect

In this tutorial the artist will be teaching you how to create this eye-catching bling bling effect in illustrator. You will learn how to create the texture and apply it to any text. So let’s get started.

Bling Bling Text Effect

27. Create a glossy, smooth text effect

In this tutorial the artist will show you how to create a glossy, smooth text effect using multiple fills and strokes with different blending modes and varied opacity percentage. For some discrete details, the Star Tool, the Pathfinder options and some other basic effects will come in handy.

Create a glossy, smooth text effect

28. Create a Stitched Type Effect

In this tutorial you will learn how to create a stitched type effect. You will create simple geometric patterns, a pattern brush and use the appearance panel to create the final look. Let’s get started!

Create a Stitched Type Effect

29. Create a Grimy Text Treatment with a Pen Tablet

In this tutorial the artist will show you how to create a grimy text treatment utilizing Illustrator’s Blob brush, Live Paint, and a pen tablet. You can easily apply these techniques to other illustrations, type treatments and logos.

Create a Grimy Text Treatment with a Pen Tablet

30. Create An Editable Metal Type Treatment

You can easily create this effect without the Appearance panel, but creating this effect like in this tutorial you can easily adjust anything with the text without changing the effect. It is also a good idea to create a Graphic Style for easy implementation to other text and objects within Illustrator.

Create An Editable Metal Type Treatment

31. Create a Dream Design with 3D Typography

In this tutorial, we’re going to create a 3D Typography based design. All the elements will revolve around the centerpiece and theme: dreaming. The word will dictate the entire layout and control the space by allowing everything else to emerge from within. The trees will grow out of the letters; the mountains will show themselves behind the word and overshadow the glowing moon.

Create a Dream Design with 3D Typography

32. Grungy 3D Text

This tutorial will teach you how to use the 3D tools in Illustrator along with some simple but clever shadow techniques to create some awesome looking grungy 3D text.

Grungy 3D Text

33. How to Create a Hand Drawn Style Text Effect

In the following tutorial you will learn how to use different brushes and effects to create a hand drawn text effect. Perfect for illustrative designs, you will create a cute and fun lettering effect.

How to Create a Hand Drawn Style Text Effect

34. Create a Bending 3D Text Effect

In the following tutorial you will learn how to create a 3D Text Effect in Adobe Illustrator. In addition to using the 3D tools, you’ll layer letter shapes to create color shifts with gradients and highlights. You’ll also work in subtle patterns controlled with Opacity Masks.

Create a Bending 3D Text Effect

35. Create a Green Viscous Text Effect

In the following tutorial expand an existing font, use illustrator’s 3D tools to add dimension, and then add a green viscous text effect. If you want to add a fun, vector text effect to your portfolio, then get started now.

Create a Green Viscous Text Effect

36. Create a Vibrant 3D Pixel Type Treatment

In this tutorial, I will show you how to create a fun 3D pixel font type treatment. Using a free font, gradients, and Illustrator 3D filter, you will easily create a type treatment that you can apply to many other fonts.

Create a Vibrant 3D Pixel Type Treatment

37. Illustrator Tackle Twill

This tutorial will show you how to simulate a tackle twill look with Illustrator’s Appearance palette. When we’re done you will be able to apply this style to any text or shape within Illustrator.

ILLUSTRATOR TACKLE TWILL

38. How To Create Detailed Gothic Linework Typography

Follow this step by step walkthrough of the design process for my recent gothic typography design. We’ll be customizing a blackletter font with various black and white elements and creating a range of tones with detailed line work to create a cool gothic style design that would be right at home as a logo for a heavy metal band or dark apparel brand.

How To Create Detailed Gothic Linework Typography

39. Retro 3D Arcade Text Effect

In this tutorial we’ll make clever use of Illustrators built-in 3D capabilities, gradients and opacity masks to design a Retro 3D Type Effect.

Retro 3D Arcade Text Effect

40. Create a simple folded paper text effect

In this tutorial you’ll learn how to create a simple folded paper text effect. Also, to improve the look of the final result, you will learn how to create some ink blobs and stains from some simple ellipses and brushes.

Create a simple folded paper text effect

41. Create a Silky Ribbon Text Effect

In the following tutorial you will use the Pen and Gradient tools to create a swirling ribbon text effect. Even though we’re applying the ribbon to text, you can use this effect to make shapes and scrolls. Let’s get started!

Create a Silky Ribbon Text Effect

42. How to Create a Smokin’ Western Type Treatment

In this easy tutorial, you’ll learn how to create a western type treatment primary using Illustrator’s Effects. Using the effects from this tutorial, you can easily apply them to other type treatment and logos. Let’s get started!

How to Create a Smokin’ Western Type Treatment

43. Stylish text effect tutorial

In this tutorial you’ll learn how to create a beautiful text effect with a subtle vintage look that’s going to be applied to a specific typeface, just to help you get an idea, we will try to generate an old school text that can be implemented on modern web designs.

Stylish text effect tutorial

44. How to Create a Colorful, 3D Text Effect

In the following tutorial you will learn how to create a colorful three-dimensional text effect. We’ll use several Illustrator effects, built-in patterns, a modern font, and more to bring this effect to fruition. Let’s get started!

How to Create a Colorful, 3D Text Effect

45. How to Create a Glossy, Colorful Text Effect

In the following tutorial you will learn how to create a glossy, colorful text design in Illustrator CS5. We’ll use an interesting font choice, opacity masks, shape building techniques, and more to create this text effect.

How to Create a Glossy, Colorful Text Effect

46. Create a Glassy Text Effect Filled with a Green, Acidic Substance

In the following tutorial you will learn how to create a glassy text effect filled with a green, acidic substance. You’ll use shape creation tools, Opacity Masks, and filters. This project could work well to add a mad scientist feel to your next creative design project.

Create a Glassy Text Effect Filled with a Green, Acidic Substance

47. Create a Marker Text Effect

This tutorial involves intermediate vector shape building skills in Illustrator to create the markers, along with some layering and script usage to create the text effects. Let’s get started.

Create a Marker Text Effect

48. How to Create a Fun 3D Plastic Text Effect

In this tutorial you will learn how to create colorful 3D plastic letters using the 3D Extrude & Bevel effect and also an all-purpose plastic look that you can save in the Graphic Styles and use it in other projects.

How to Create a Fun 3D Plastic Text Effect

49. Create a Chalkboard Type Treatment

In this tutorial you’ll learn how to create a chalkboard type treatment with some gradients, a bristle brush, and some freebies from Vector Mill! The tutorial is relatively simple and can be applied to many other Illustrator projects. Moreover, you can use the Vector Mill freebies in other projects!

Create a Chalkboard Type Treatment

50. Create a Reusable Retro Type Treatment

In this tutorial the artist 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.

Create a Reusable Retro Type Treatment

December 06 2011

10:00

Using Retro Style Images And Banners For Advertising

Retro style images and pop art graphics like those of Roy Lichtenstein and Andy Warhol is a popular style adopted by graphic designers for web and print design. They are chic, fashionable, eye-catching and add to the ‘cool’ factor of the company and its products. Lots of stock images are available for download which can be used for web designing, however if you want something unique or customized it’s better to grab a pencil and paper and do it yourself.

Step 1: Visualize the layout


If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below
Mailchimp retro

istockphoto

Tagetscope retro layout

Step 2: Sketch


Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Retro image sketch

Step 3: Scan


Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

scan retro image

Step 4: Digitally enhance


Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

magic wand on retro image

b. Zoom and use the pen tool to copy the finer details on layer 2

pen tool on retro image

c. Use the brush to reconstruct the details on layer 2.

brush tool on retro image

Step 5: Integrate


Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.
retro and pop art inspired banner
retro and pop art inspired banner

July 22 2011

05:27

Outstanding Text Effects Tutorials in Illustrator

Advertisement in Outstanding Text Effects Tutorials in Illustrator
 in Outstanding Text Effects Tutorials in Illustrator  in Outstanding Text Effects Tutorials in Illustrator  in Outstanding Text Effects Tutorials in Illustrator

Adobe Illustrator is a powerful tool that you can create fluffy, vague, sparkling, gelatinous, glossy, glittery, retro and revolutionary effects with. Creating a particular text effect in Illustrator is not that difficult now; thanks to the availability of huge number of tutorials that guide you through each step.

Here we have gathered a collection of around 50 amazingly helpful tutorials that let you create breathtaking typographic effects in Illustrator. Some of them also use Photoshop to give the text effect its fully refined look. Let’s have a look at this collection.

Text Effects in Illustrator

Create a Poster Theme Illustration in Illustrator
This following tutorial lets you create beautiful poster theme illustrations simply, using Adobe Illustrator.

Texteffectstuts47 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Neon Text Effect Using Adobe Illustrator
Create appealing and tempting neon text effects by using Gradient Mesh, 3D Modeling, Art Brushes and Transparency palette. Let’s begin!

Texteffectstuts41 in Outstanding Text Effects Tutorials in Illustrator

How to Create Colorful Neon Text with Adobe Illustrator
This tutorial teaches you some quick tips on how to create a colorful neon text effect. In this tutorial, you will learn the use of thick font and the Round Any Corner Script to create letter shapes and other techniques to create neon text effect.

Texteffectstuts1 in Outstanding Text Effects Tutorials in Illustrator

Creating a custom Font : Understanding the Dynamics of Blend Tool
This tutorial is designed to help you create a custom Font, while at the same time accepting the dynamics of the Blend Tool.

Texteffectstuts40 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Colorful, 3D Text Effect
This tutorial is shared here to let you learn the technique of creating some colorful and appealing 3D texts.

Texteffectstuts36 in Outstanding Text Effects Tutorials in Illustrator

Create an Airport Time Table Type Effect
In this quick tutorial, you will learn to create an airport timetable text effect. Creating such an effect is ideal for websites, posters and even logos.

Texteffectstuts19 in Outstanding Text Effects Tutorials in Illustrator

How to Create a 3D Sketch Text Effect
This tutorial lets you learn how you can play with the 3D options in Illustrator to create 3D letters while also transforming them into a sketch text. Add any color that you like as the transparency allows you to place it on any background.

Texteffectstuts2 in Outstanding Text Effects Tutorials in Illustrator

Create a Jar Illustration and Splashy, Purple Text Effect
This tutorial walks you through creating a jar illustration with a splashy purple text effect. You will see how different layered shapes and opacities are used in this tutorial and how the paths and the Pathfinder tools are used to enhance the result and give your text dimension and style.

Texteffectstuts30 in Outstanding Text Effects Tutorials in Illustrator

Create Colorful, Layered Paper Type in Illustrator
Let’s create some vividly colored illustrations with layered text and ribbons. Here, you will learn to use Illustrator effects expansively to optimize your work.

Texteffectstuts32 in Outstanding Text Effects Tutorials in Illustrator

How To Create a Cool Chrome Text Effect in Illustrator
The following tutorial helps you get the skills required to create cool retro chrome text effects by using Illustrator. This tutorial teaches you all the steps from beginning to end.

Texteffectstuts38 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Retro Style Textured Logo
This tutorial helps you learn to create a retro vector seal logo by using Illustrator with Ryan Quintal. This extremely easy to follow tutorial lets you create an awesome final effect.

Texteffectstuts3 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Paper Style Alphabet using Illustrator 3D
With this, you will learn to create a paper style alphabet and the shadows of them by using 3D modeling. This tutorial is perfect for creating logo designs.

Texteffectstuts4 in Outstanding Text Effects Tutorials in Illustrator

Create a Chalkboard Type Treatment
This tutorial lets you create amazing chalkboard type treatments by using some gradients, a bristle brush, and some freebies from Vector Mill.

Texteffectstuts23 in Outstanding Text Effects Tutorials in Illustrator

Learn to Create a Variety of Script Lettering
This tutorial showcases three unique approaches to create different script lettering styles. The tutorial starts with a simple basic script and leads you to more advanced techniques.

Texteffectstuts5 in Outstanding Text Effects Tutorials in Illustrator

How to Create an Entangled Lettering Illustration
Creating a perfect entangled lettering illustration is what you will learn in this tutorial. You can also learn casting shadows and highlighting through abstract color shapes.

Texteffectstuts6 in Outstanding Text Effects Tutorials in Illustrator

Create a Variety of 3D Lettering Effects for Poster Design
This tutorial teaches you different techniques of creating simple 3D lettering effects in the context of poster design.

Texteffectstuts7 in Outstanding Text Effects Tutorials in Illustrator

Create a Green Viscous Text Effect
This tutorial helps you learn the use of existing font and 3D tools of illustrator to add dimension and create a green viscous text effect.

Texteffectstuts8 in Outstanding Text Effects Tutorials in Illustrator

How To Create a Simple Sticker Text Effect
This tutorial showcases the technique of using text and the Round Any Corner script to create a simple sticker effect. Such text effects can be used in graphics, including shapes and symbols.

Texteffectstuts9 in Outstanding Text Effects Tutorials in Illustrator

Create a Furry Calligram in Illustrator
Here you will learn to create your own calligram by manipulating a typeface, rendering fur and by adding dog features and various details.

Texteffectstuts10 in Outstanding Text Effects Tutorials in Illustrator

Learn to Create a Variety of Beveled Lettering
This tutorial is designed to teach you different techniques of creating beveled lettering styles. The tutorial starts with the least complex and moves on to the most polished and professional look.

Texteffectstuts11 in Outstanding Text Effects Tutorials in Illustrator

Cool Typography with the Blend Tool in Illustrator
Here you will use Illustrator’s Blend tool first and then use Photoshop for some final retouches in order to create cool typography.

Texteffectstuts13 in Outstanding Text Effects Tutorials in Illustrator

Create a Top Gun Badge on Illustrator
Here, you will see how to create a vector badge and then make it look more appealing by adding some features. Simple to execute.

Texteffectstuts14 in Outstanding Text Effects Tutorials in Illustrator

Tron Legacy Tutorial
In this tutorial, you will use Adobe Illustrator, Adobe Photoshop and Cinema 4D. This is an interesting tutorial that helps you learn all three of these programs simultaneously.

Texteffectstuts15 in Outstanding Text Effects Tutorials in Illustrator

Vintage Badge in Illustrator and Photoshop
In this tutorial you will see how to create a vintage badge by using Illustrator and Photoshop. Take a look!

Texteffectstuts16 in Outstanding Text Effects Tutorials in Illustrator

Grungy 3D Text In Illustrator
Use Illustrator to create appealing grungy 3D text with some smart shadow techniques.

Texteffectstuts17 in Outstanding Text Effects Tutorials in Illustrator

Create a Silky Ribbon Text Effect
This tutorial teaches you to use the Pen and Gradient tools in order to create a swirling ribbon text effect. You can also use this effect to create different shapes and scrolls.

Texteffectstuts18 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Glassy Text Effect in Illustrator
In this tutorial, you will see how to create a splendid glassy text effect by using Illustrator. Here you will learn some clever techniques to enhance your skills.

Texteffectstuts20 in Outstanding Text Effects Tutorials in Illustrator

Create a Mummy Text Effect
This guide helps you give your text some classic mummy treatment by using a few gradients and the Appearance panel.

Texteffectstuts21 in Outstanding Text Effects Tutorials in Illustrator

Create a Polished Raised-Type Treatment
Learn to create a polished, lifted-type treatment by using the Appearance panel, some gradients and transforms. You can also apply the treatment to other fonts and vector elements as well.

Texteffectstuts22 in Outstanding Text Effects Tutorials in Illustrator

Create a Reusable Retro Type Treatment
Here you will see how to create retro type treatments by using some powerful Illustrator features and texture effects, Warp effects, and some simple layering.

Texteffectstuts24 in Outstanding Text Effects Tutorials in Illustrator

Create a Glossy Smooth Text Effect
This guide lets you discover how to create a glossy smooth text effect by using multiple fills and strokes with various blending modes and different opacity settings.

Texteffectstuts26 in Outstanding Text Effects Tutorials in Illustrator

3D Golden Text Effect
This tutorial will be great for beginners who want to create professional 3D text effects in Adobe illustrator. Here, you will see how to create text using 3D extrude and the techniques to clean up the broken shapes and then apply glow to the 3D text.

Texteffectstuts28 in Outstanding Text Effects Tutorials in Illustrator

Golden Text with Diamonds
This tutorial showcases the use of the appearance palette and scatter brushes to create this stylized text with diamonds. Several other useful techniques will also be taught in this tutorial that will help you in your future endeavors. So let’s get started!

Texteffectstuts29 in Outstanding Text Effects Tutorials in Illustrator

How to Add Decorative Glamour to Your Ordinary Script Font
Learn to add glamour to your ordinary scripts in simple to follow steps and add some extra sparkle to your ordinary font.

Texteffectstuts31 in Outstanding Text Effects Tutorials in Illustrator

How to Make a Flesh Ripping Zombie Type Treatment
Follow the artist’s steps and create flesh ripping zombie characters and type treatments for this blood-curdling illustration.

Texteffectstuts33 in Outstanding Text Effects Tutorials in Illustrator

Creating an Environmentally Friendly Green Type Treatment
This tutorial lets you create some cool and soothing environmentally friendly green type treatments that you can apply to your different projects.

Texteffectstuts34 in Outstanding Text Effects Tutorials in Illustrator

How to Create Candy-Cane Typography With Photoshop and Illustrator
Learn how to craft some lip smacking Candy-Cane type by using Illustrator and Photoshop and create the appeal that you always wanted to harness.

Texteffectstuts35 in Outstanding Text Effects Tutorials in Illustrator

How To Create Detailed Gothic Linework Typography
This step by step explanation demonstrates the design process for an amazing gothic typographic design.

Texteffectstuts37 in Outstanding Text Effects Tutorials in Illustrator

Multi-Stroke Tips for Adobe Illustrator
In this tutorial, learn to add multiple strokes to objects in Illustrator using the Appearance panel.

Texteffectstuts39 in Outstanding Text Effects Tutorials in Illustrator

Produce a Glowing Neon Open Sign Using Illustrator CS5
Here you will see how neon tubes are produced in the Illustrator world by simply altering a path and adding stroke colors with Gaussian blur. This will allow you to produce our own glowing neon open sign in Illustrator CS5.

Texteffectstuts42 in Outstanding Text Effects Tutorials in Illustrator

Create a Bubble Text Effect
Use different tools such as Ellipse, Rectangle, Rectangular Grid and Twirl along with some basic effects to create this Bubble Text Effect.

Texteffectstuts44 in Outstanding Text Effects Tutorials in Illustrator

Stylish text effect tutorial using Illustrator
Here you will see how to use Illustrator to create stylish and elegant text effects with a subtle vintage look that can be applied to any specific typeface.

Texteffectstuts45 in Outstanding Text Effects Tutorials in Illustrator

Create a Simple Blood Text Effect
This is an extremely easy to follow tutorial that will teach you how you can create simple blood text effect.

Texteffectstuts46 in Outstanding Text Effects Tutorials in Illustrator

Create a folded paper text effect
Create a simple folded paper text effect by watching this tutorial and also see how to improvise the final look.

Texteffectstuts48 in Outstanding Text Effects Tutorials in Illustrator

Make Grunge Type with Live Trace and the Pathfinder
This tutorial aids you in creating a grunge type effect by simply creating a vector texture with Live Trace first and then applying it to the text.

Texteffectstuts49 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Piped Frosting Text
This tutorial will help you learn how to create a paste text effect. You will also learn the use of different tools to create the text effect that can be used to demonstrate a piped frosting effect.

Texteffectstuts50 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Gummy Text Effect
Here you will see how to use the Offset Path function and various other coloring techniques to create cool and cute gummy text effects.

Texteffectstuts51 in Outstanding Text Effects Tutorials in Illustrator

How to Create a Zodiac Themed Graphic Style
This particular tutorial helps you learn the basic techniques to create a complex graphic style, using only the Appearance palette and commands from the Effect menu. This lets you create designs based on zodiac signs. Let’s get started!

Texteffectstuts52 in Outstanding Text Effects Tutorials in Illustrator

How to Create Smoky Brushes and Type In Illustrator CS4
Here you will see how the smoky brushes and type are created in Illustrator. You will be amazed to see the realistic results.

Texteffectstuts53 in Outstanding Text Effects Tutorials in Illustrator

You may also want to consider our previous posts:

(rb)

June 19 2011

10:00

Quick Tutorial – Creating a Letterpress and Embossed Text Effects in Photoshop

In the past few years the letterpress text effect has become a huge trend in web design. It’s being used in headers, headlines and even interfaces. The love for the letterpress effect has been transferred from printing machines to our computer screens. If done right letterpress can be a splendid and neat accent in your design. Another superb, yet often underrated, text effect is embossing. You may have seen it in some menus though. Text embossing is another effect which digital art has borrowed from traditional design. This tutorial will guide you through creating the letterpress and embossed text effect in Photoshop. The tutorial will be using some basic layer styles together with some more advanced techniques. If you’re a beginner in Photoshop text effects, continue to read to find out how to achieve fantastic looking letterpress and embossed text effects in Photoshop.

Final Image

(click on the image to view full-size version)

Letterpress-13-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-26-letterpress-embossed-text-effect-tutorial-photoshop

Background

Having the perfect background when using a letterpress or embossed text effect is very important. The right background can seriously enhance the overall look and make it more realistic. For letterpress and embossed text we want the background to be lighter than the text itself. So lets begin.

1. Create a new document

Start by creating a new document. Dimensions I used are 700×400 with dpi set to 72 pixels/inch.

Background-1-letterpress-embossed-text-effect-tutorial-photoshop

2. Solid color

Grab the Paint Bucket Tool (G) and fill the layer with #30485a.

Background-2-letterpress-embossed-text-effect-tutorial-photoshop

3. Adding texture

Download this Black Leather Pattern and open it up in Photoshop. There’s no need to download the original size image since we are going to define a pattern from this. I downloaded the 240×240 version. Once you’ve opened the pattern in Photoshop, go to Edit – Define Pattern and click ok.

Background-3-letterpress-embossed-text-effect-tutorial-photoshop

Head back to your document and create a new layer. Go to Edit – Fill – Pattern and choose the pattern you just created.

Background-4-letterpress-embossed-text-effect-tutorial-photoshop

Background-5-letterpress-embossed-text-effect-tutorial-photoshop

Set layer’s Blending Mode to Overlay and Opacity to 55%.

Background-6-letterpress-embossed-text-effect-tutorial-photoshop

Download this Subtle Grunge texture and paste it into your document. Hit Ctrl+T and adjust it so it fits your document.

Background-7-letterpress-embossed-text-effect-tutorial-photoshop

Go to Layer – New Adjustment Layer – Hue/Saturation (Ctrl+U) and drag the Saturation slider to the very left.

Background-8-letterpress-embossed-text-effect-tutorial-photoshop

Then again go to Layer – New Adjustment Layer – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

Background-9-letterpress-embossed-text-effect-tutorial-photoshop

Set layer’s Blending Mode to Soft Light and Opacity to 15%.

Background-10-letterpress-embossed-text-effect-tutorial-photoshop

4. Darkening Corners

Now select the Brush Tool (B) and choose a large soft brush with around 150px size and hardness set to 0%. Hit D on your keyboard to set the foreground color to black and background color to white. Holding Shift brush around the edges.

Background-11-letterpress-embossed-text-effect-tutorial-photoshop

Now increase the brush size and brush the corners carefully to make a nice rounded frame.

Background-12-letterpress-embossed-text-effect-tutorial-photoshop

Got to Filter – Blur – Gaussian Blur and set its radius to around 55 pixels depending on your document size. If necessary adjust your layer’s Opacity. I set my to 75%.

Background-13-letterpress-embossed-text-effect-tutorial-photoshop

And you’re done with the background. To unite the layers click on the top one, hold Shift + Ctrl and click on the bottom layer. Then click Ctrl + G to group them.

Letterpress effect

Select the Type Tool (T) and type in your text. I used a font called Myriad Pro, set to Bold, 95pt size, Spacing -10 pt. After you’ve typed your text do a right click on the layer and click Rasterize Type.

Letterpress-1-letterpress-embossed-text-effect-tutorial-photoshop

There are various ways to create the letterpress effect. I’m going to teach you the easiest and quickest way, in my opinion. Do a right click on your text layer and select Blending Options. Then apply the following Layer Styles.

Letterpress-2-letterpress-embossed-text-effect-tutorial-photoshop

Letterpress-3-letterpress-embossed-text-effect-tutorial-photoshop

Letterpress-4-letterpress-embossed-text-effect-tutorial-photoshop

These are the Styles which worked fine for me. You may want to twiddle with the settings that so that it looks right. Your text layer should look similar to this one.

Letterpress-5-letterpress-embossed-text-effect-tutorial-photoshop

Not looking quite like a letterpress effect, right? But we’re going to fix that. Do a Ctrl + click on your text layer. A selection should appear.

Letterpress-6-letterpress-embossed-text-effect-tutorial-photoshop

Still with the active selection head to your Background group and find the black leather pattern layer.

Letterpress-7-letterpress-embossed-text-effect-tutorial-photoshop

Select it and hit Ctrl + J. A new layer should spring up.

Letterpress-8-letterpress-embossed-text-effect-tutorial-photoshop

Bring that layer’s opacity up to 85%. Then go to Image – Adjustments – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

Letterpress-9-letterpress-embossed-text-effect-tutorial-photoshop

With that done, your letterpress effect now should look much more realistic.

Letterpress-11-letterpress-embossed-text-effect-tutorial-photoshop

For the final step lets add subtle lighting to our image. Grab the Gradient Tool (G), hit D and X on the keyboard to set white as a foreground color and black as a background color. Choose Radial Gradient and draw something like this.

Letterpress-12-letterpress-embossed-text-effect-tutorial-photoshop

Set the layer’s Blending Mode to Soft Light and Opacity to 45%. Congratulations, you’re done with the letterpress effect. Click on the image to view the full-size version.

Letterpress-13-letterpress-embossed-text-effect-tutorial-photoshop

Embossed effect

We’re going to create the embossed text effect on the same background. So delete your letterpress text layer and the one you substracted from black leather pattern and do a Save As. You should have a fresh background with smooth lighting on it.

Embossed-1-letterpress-embossed-text-effect-tutorial-photoshop

Again start by typing your text. I used the same bold Myriad Pro with 95pt size and -10 Spacing. After you’ve typed your text rasterize the layer.

Embossed-2-letterpress-embossed-text-effect-tutorial-photoshop

Now apply the following Layer Styles to your text layer.

Embossed-3-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-4-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-5-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-6-letterpress-embossed-text-effect-tutorial-photoshop

Your text layer should look similar to this one.

Embossed-7-letterpress-embossed-text-effect-tutorial-photoshop

Now just like with the letterpress effect do a Ctrl + click on your text layer, select the black leather pattern and hit Ctrl + J. Name the new embossed2. Bring layer’s Opacity up to 100%. Go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down.

Embossed-8-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-9-letterpress-embossed-text-effect-tutorial-photoshop

Now apply these Layer Styles to the embossed2 layer.

Embossed-10-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-11-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-12-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-13-letterpress-embossed-text-effect-tutorial-photoshop

Now do a Ctrl + Click on your original text layer. Then go to Select – Modify – Expand, enter 1 pixel and click ok.

Embossed-14-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-15-letterpress-embossed-text-effect-tutorial-photoshop

When that’s done create a new layer and grab Paint Bucket Tool (G). Set the foreground color to black and fill the new selection. Name the layer stroke.

Embossed-16-letterpress-embossed-text-effect-tutorial-photoshop

Do a Ctrl + click on your original text layer to select it. Then select the stroke layer and hit delete on your keyboard.

Embossed-17-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-18-letterpress-embossed-text-effect-tutorial-photoshop

Select the stroke layer and hit your left arrow key once. Then set the layer’s opacity to 45%. That should give you a neat emphasizing stroke around your text.

Embossed-19-letterpress-embossed-text-effect-tutorial-photoshop

For the final touches select your original text layer again and do a Ctrl + click to load a selection from. Locate your black leather pattern and click Ctrl + J. Name the layer embossed 3 and drag it above the stroke layer.

Embossed-20-letterpress-embossed-text-effect-tutorial-photoshop

Firstly, set the layer to Normal and lower the Opacity to 20%.

Embossed-21-letterpress-embossed-text-effect-tutorial-photoshop

Then go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down a bit.

Embossed-22-letterpress-embossed-text-effect-tutorial-photoshop

After that go to Image – Adjustments – Color Balance (Ctrl + B) and in Midtones set the balance to +20 for Blue tones.

Embossed-23-letterpress-embossed-text-effect-tutorial-photoshop

To finish up lets add a bit more lighting to our image. To do that go to Edit – Fill and choose 50% grey. Set layer’s Blending Mode to Overlay. Then grab Burn Tool (O) with large soft brush set to Midtones and Exposure set to around 30%. Then just brush around the center. If you’d switch layer’s Blending Mode to Normal you should see something like this.

Embossed-24-letterpress-embossed-text-effect-tutorial-photoshop

Set layer back to Overlay and go to Filter – Blur – Gaussian Blur and set it’s radius to around 30 pixels.

Embossed-25-letterpress-embossed-text-effect-tutorial-photoshop

And that’s about it with the embossed text effect. Click on the image to view a full-size version.

Embossed-26-letterpress-embossed-text-effect-tutorial-photoshop

I hope you enjoyed this tutorial on creating letterpress and embossed text effects in Photoshop. Of course this is not the only way to create the effect, Photoshop is full of possibilities you just have to experiment. You just have to imagine how would the effect look in real life and then it’s up to you how you achieve it. Feel free to make suggestions and ask questions if something wasn’t clear to you.

Here is the PSD file for you, if you want to compare your outcome with ours!

March 27 2011

10:00

31 Fresh and Useful Photoshop Tutorials

Photoshop is the premiere graphic editing program used by designers all over the world. It’s popularity never stops growing and as it grows more people want to try to create something beautful, fun or just weird with this incredible software. Photoshop is second to none and today we have compiled a great collection of awesome, useful and totally fresh Photoshop tutorials.

1. Design a Clean and Corporate Website Layout

Design a great-looking, high-quality clean and corporate website layout with the option to download the PSD file

2. Create a Professional App Store Web Layout

Check out this kick-ass photoshop tutorial which teaches you how to make a professional looking app store layout

3. Design a Cool Textured Portfolio Design

One more stunning and well-prepared layout Photoshop tutorial which teaches you how to design a nice textured portfolio design.

4.Create the Surreal Photo Illustration checkmate

This Photoshop tutorial teaches you some techniques, but especially a surreal and abstract photo manipulation.

5. Create a Mysterious Photo Manipulation in Photoshop

We’re moving on with another Photoshop, photo-manipulation tutorial which shows off the creation of a dark and mysterious poster.

6. Create a Speeding Car Scene with Lighting Effects

This Photoshop tutorial has a well-written and explained process of creating a colorful, bright car scene.

7.Create a Fallen Rain Soaked Angel Composition

Take a look at this awesome and well-designed dark angel composition which shows the use of some kick-ass skills.

8. Create a Nature-Inspired Photo Manipulation

The following Photoshop tutorial teaches how to create a stunning nature inspired and bright photo manipulation.

9. Create a Dark and Surreal Poster in Photoshop

One more Photoshop tutorial which teachesyou how to design a dark/surreal and awesome poster design

10. Serene Fantasy Photo Manipulation

Learn how to create a high-quality and beautiful work of art by following this tutorial which shows the creation of a serene fantasy poster.

11. Design a Personal Website Layout

Design an amazing personal website layout in Photoshop by taking a look at this useful tutorial. It is also possible to download the final version in PSD format for free.

12. Create a Landing Page in Photoshop

This well-written Photoshop tutorial will teach you how to create an elegant landing/single-page  website layout.

13. Dezign Folio Portfolio Designing Tutorial

If you need or want another great website layout, then this tutorial will work great for you. Learn to make a very detailed portfolio design.

14. Create a C0lorful Aged Poster

The following tutorial goes into detail to teach you how to create a colorful and aged poster.

15. Create a 3D Industrial Style Icon

This really interesting tutorial will show off how to make a 3 dimensional industrial styled icon in Adobe Photoshop.

16.How to Draw a Classic Electric Guitar in Photoshop

This useful and really well-prepared tutorial will teach how to create a detailed and stunning classic guitar.

17.Making a Super-Hero Movie Teaser Poster

By following this stunning tutorial, you will design a great super-hero inspired move teaser poster

18.How to Create an Intense Movie Poster

Another tutorial on how to create a movie poster for Photoshop. This time you’ll be learning how to make an intense, bright poster.

19. Ringed Supernova Photoshop

The following surreal and abstract Photoshop tutorial will teach you how to create a nice-looking composition of supernova planet.

20. Drawing of a Pig Tutorial

This is probably the best tutorial in this showcase. It teaches you how to create a very realistic, yet abstract, pig portrait in Photoshop.

21. Create a body made of rain

Another kick-ass and high-quality poster design on making a person look like they’re made of rain.

22. Playstation Portable Realistic Buttons

Learn to make some well-designed PlayStation buttons by following this really useful tutorial.

23. Milk Monster Design Tutorial

Make a monster from almost anything! Here you will find out how to create cute monsters that will scary anybody!

24.How to Create an Outstanding Wallpaper

Hard to find something you like for a background? You don’t need to search at all, because here you will learn how you can create original backgrounds by yourself!

25.Create an Ice-Cream Type Treatment in Photoshop

Awesome text effect made out of simple things, Just what you need to learn basic illustration techniques!

26. Create a Shiny Apple

This tutorial will teach you how to take a boring fruit and make it really a ‘peel’ ing!

27. Create a Balanced and Abstract Poster

Abstract doesn’t mean easy! Here you will find a way to make it easier by learning the balance in an abstract composition.

28. Create a Radar Icon in Photoshop

A small tutorial that will give you the hints for creating your own unique and awesome radar icon.

29. Awesome Glitter Text Effect

Shiny and glossy, here you will find how to make your text like that just using glitter texture and some little tricks.

30. Create a Dark Digital Art Piece

This can be a source of inspiration + hints for your own piece of art, learning how to use the grunge effect in your photos.

31.Make a Tron-Inspired Photo Manipulation

Think that surreal manipulations are too hard for you? Here you will learn the basics and create a fine TRON style picture.

November 28 2010

10:00

50 Eye Catching Photoshop Text Effects Tutorials

Photoshop_text_tutorialTechniques really is a great help to create a stunning photoshop text effects that will give your design a great look. Every now and then there are different designs and styles that are used to create text effects that are being featured to match the latest trend on the web.

In this post, I’ll be featuring 50 most eye-catching photoshop text effects tutorials that you can use for your design, website , hobby or even just a crash course for newbie.

1. 3D texture

Photoshop_text_tutorial1

2. Create a spectacular flaming meteor effect on text

Photoshop_text_tutorial2

3. How to create high-quality metal 3D text in Photoshop

Photoshop_text_tutorial3

4. light and shade

Photoshop_text_tutorial4

5. Create Destructive Black and White Lettering with a Dramatic Splash Effect

Photoshop_text_tutorial5

6. Stunning 3D effects in 30 minutes

Photoshop_text_tutorial6

7. How to Quickly Create a Stylish Retro Text Effect

Photoshop_text_tutorial7

8. 3D text with a touch of grunge

Photoshop_text_tutorial8

9. Design soft stylized 3D type

Photoshop_text_tutorial9

10. Create a 3D flowery text effect

Photoshop_text_tutorial10

11. Create a dream-like design with 3D typograph

Photoshop_text_tutorial11

12. Quick and dirty Photoshop text effects from scratch

Photoshop_text_tutorial12

13. Create a spectacular grass text effect in Photoshop

Photoshop_text_tutorial13

14. Plastic text

Photoshop_text_tutorial14

15. Icy cold

Photoshop_text_tutorial15

16. Paint-splodged text

Photoshop_text_tutorial16

17. Text in stitches

Photoshop_text_tutorial17

18. Wet watercolor

Photoshop_text_tutorial18

19. How to create a gold text effect in Photoshop

Photoshop_text_tutorial19

20. Colored chrome

Photoshop_text_tutorial20

21. Reflective liquid type

Photoshop_text_tutorial21

22. Wood inlay

Photoshop_text_tutorial22

23. Paper-craft text effect

Photoshop_text_tutorial23

24. Dramatic text-on-fire effect in Photoshop

Photoshop_text_tutorial24

25. How to Create a Copper Photoshop Text Effect

Photoshop_text_tutorial25

26. Vanity License Plate

Photoshop_text_tutorial26

27. Star Wars text effect

Photoshop_text_tutorial27

28. Create a trendy typographic poster design

Photoshop_text_tutorial28

29. Graffiti with Photoshop

Photoshop_text_tutorial29

30. Super-cool frilly bits typography

Photoshop_text_tutorial30

31.Typography wallpaper in Photoshop

Photoshop_text_tutorial31

32. Floral

Photoshop_text_tutorial32

33. Splattered blood

Photoshop_text_tutorial33

34.Worn and torn

Photoshop_text_tutorial34

35. Grunge rubber stamp.

Photoshop_text_tutorial35

36. Distorted letters

Photoshop_text_tutorial36

37. Decorative text

Photoshop_text_tutorial37

38. Rough metal

Photoshop_text_tutorial38

39. A slick supernatural text effect

Photoshop_text_tutorial39

40. Smoke type in Photoshop in 10 steps

Photoshop_text_tutorial40

41. Moonshine effect

Photoshop_text_tutorial41

42. Transparent glass lettering in Photoshop

Photoshop_text_tutorial42

43. Scan-line text

Photoshop_text_tutorial43

44. Create a layered glowing text effect

Photoshop_text_tutorial44

45. Vibrant pop text effect

Photoshop_text_tutorial45

46. Slow-shutter effect

Photoshop_text_tutorial46

47. Colorful retro text

Photoshop_text_tutorial47

48. Colorful watercolor

Photoshop_text_tutorial49

49. Furry text

Photoshop_text_tutorial48

50. Light burst

Photoshop_text_tutorial50

Hope this text effects tutorials inspire you. If there are text effects tutorials that I’ve missed or your own creations , please post it on your comment and I will be happy to update it.

November 08 2010

07:00

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!

View the text-shadow effects

Check out the six text effects of vintage/retro, inset, anaglyphic, fire and board game in the demo, then copy the code snippets below to use the effects in your own designs. Needless to say you’ll need a text-shadow supporting browser (Safari, Chrome, Firefox) to see them in all their glory.

View the demo

How text-shadow works

How the CSS text-shadow property works

The text shadow CSS property is used to add shading to any text related HTML element. The syntax includes figures for the X-offset, the Y-offset, the blur amount and finally the colour of the actual shadow. What’s more, you don’t have to settle with one shadow, you can build up multiple text-shadow values to create some really cool effects!

Vintage / Retro text effect

Vintage text-shadow effect

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

How it works:

The vintage style text effect is made up of two text shadows, but the first is set to the same colour as the background in order to give the impression that the second shadow (the thin dark grey one) is offset to the bottom right. Remember to make sure your first shadow colour is set to the same colour as your page background, and the text and second shadow also both use the same colour.

View the demo

Neon text effect

Neon text-shadow effect

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

How it works:

The neon text effect is made up of 8 levels of shading. The base text is given a white fill, then each of the 8 text-shadow values are given larger and larger blur amounts while also getting darker. This blends between a vivid white inner glow and the large purple outer aura.

View the demo

Inset text effect

Inset text-shadow effect

text-shadow: 0px 2px 3px #666;

How it works:

The inset or letterpress style text effect is one of the more common uses of text-shadow. The shadow is offset on the Y-axis by a tiny amount to give the impression of a subtle highlight. On dark backgrounds offset the shadow underneath the text with a light colour, whereas on light backgrounds offset to the top of the text with a darker shadow colour.

View the demo

Anaglyphic text effect

Anaglyphic text-shadow effect

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

How it works:

The anaglyphic text effect recreates the cool effect used on old 3D images. The effect is recreated with CSS using a mix of text-shadow and RGBa colouring. Using RGBa on the text and the shadow allows the alpha channel to be set to 50% transparency so the underlying text is visible through the shadow.

View the demo

Fire text effect

Fire text-shadow effect

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

How it works:

The fire text effect is another style that uses multiple levels of shading. Each shadow is offset in different directions, uses various blur settings and blends a range of warm colours to create the impression of a flame. These colours span from bright whites through to yellows, oranges and darker amber tones.

View the demo

Board Game text effect

Board Game text-shadow effect

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

How it works:

The board game text effect simply uses multiple shadows each with an increasing amount of offset from the original text to create an alternating series of colours. No blurring is used to keep the shadows crisp and sharp as exact reproductions of the original text.

View the demo

September 28 2010

12:58

Fuzz/Furry Text Effect (Works great as Grass!)

In this tutorial, I will show you a how to create a fuzzy text effect using a simple technique and a custom brush. This tutorial is written for users who have a basic understanding of the tools and techniques in Photoshop.

The Final Image

This is what we will be creating:

Fuzzy Text Final

Step 1: Setting Up the Document

Create a new document that is 1100 x 500px and fill with a brown color. For this image, I used a radial gradient to give the image a slight vignette.

Document with Brown Background

Step 2: Typing the Text

Select the Type Tool (T) and use a bold font to type anything you want. I’m using Arial Black set to a dark green color (#232B1E).

Type

Step 3: Rasterizing Type

To rasterize the font, right click on the text layer and select Rasterize Type

Raster Type

Step 4: Rounding Out the Text

To round out the sharp edges, apply the Median Filter (Filter>Noise>Median) with a setting of 14 px.

Rounded Text

Step 5: Setting Up the Colors

Set your foreground/background color to the following (this will be necessary for our custom brush to work properly):

BGFG Color

Step 6: Creating a Brush

Now, we want to add some fuzz to our text. To begin, we need to create a new brush. Open the Brushes Panel (F5) and use the following settings:

Brush Settings

Here are samples of the brush strokes using a pen tablet. If you dont have a tablet, go back in to your brush settings and go to the Shape Dynamics tab and set the Size Jitter’s Control to “Fade” with a setting of 35 or so.

Brush Test

We’ve made grass!

As you see the brush we’ve created allows the base of the stroke to be darker than the tip. This is important as it will mimic natural lighting.

Step 7: Starting The Fuzz

Create a new layer called ‘Fuzz Outside’ and start to draw in to fuzz, always starting your stroke from the base and moving out. you want to stay on the edge of the text for the first round.

Starting Fuzz

Finish each letter:

Outside Fuzz

Make it quicker!

To make this go quicker, copy and paste similar letters (as I did with the letter ‘Z’)

Step 8: Adding More Fuzz

Create a new layer called ‘Fuzz Middle’ and change your background color to a lighter shade of green. Start to make shorter strokes more inside of each letter as shown. These strokes should overlap some of the initial strokes.

Adding Fuzz

Pen Tablet vs. Mouse

If you aren’t using a pen tablet, you may have to adjust the bush’s Size Jitter in the Shape Dynamics tab and Background/Foreground Jitter in the Color Dynamics to get the right length of stroke with the right amount of color fade.

Finish each letter:

Middle Fuzz

Step 9: Adding Even More Fuzz

Create a new layer called ‘Fuzz Inside’. This time, make a few short strokes completely inside each letter as filler. It is not necessary to make alot of strokes. We will use a simple technique to add filler to the gaps.

More Fuzz

Finish each letter:

Guassian Blur2

Step 10: Adding a Blur

Select your text layer and give it a Gaussian Blur of about 3 px.

Text Blur

Step 11: Finishing The Fuzz

To complete the fuzz, we need to Add Noise set to 38%, Give it a Gaussian Blur of 1.3 px, and adjust the Levels (Ctrl + L) slightly to increase the contrast of the noise.

Fuzz Effects

Add a drop shadow to the Text layer:

Fuzz Shadow

Your image should resemble this:

Fuzz Final

Step 12: Starting the Highlights

If you want, you can add a highlight around the edge of the text to make it pop more. to do this, select all 3 of your ‘Fuzz…’ layers and merge them to a new layer.

Merging Layers

Step 13: Drawing Highlights

Next, Create a new Layer called ‘Highlights’ and with the color set to white, draw where you want the highlight to go.

Draw Highlights

Step 14: Adjusting the Low Lights

Adjust the Blending Mode of the ‘Highlights’ layer to Overlay and make this layer a clipping layer to the newly merged Fuzz layer

Clipping Layer

Step 15: Adjusting the Low Lights

To Finish, just give the ‘Highlights’ layer a large Gaussian Blur. You’re Done!

Fuzz Text Final


September 21 2010

21:00

40+ Stunning 3D Text Effect Photoshop Tutorials

40+ Stunning 3D Text Effect Photoshop TutorialsTypography is defined as the art and technique of arranging type, type design, and modifying type glyph, and in order for you to master this art you should learn more techniques and methods to manipulate text to create stunning typography art. Using 3D effects makes text & typography more realistic and brings it to life. In this article I compiled a list of 40+ 3D Text Effect Photoshop Tutorials for you to learn new 3D text effects.

1. 3D Textured Text Effect

2. Floral 3D Text Effect

3. Create 3D Typography with Advanced Texturing and Lighting Effect in Photoshop

4. Create Awesome Splashing Water Text Effect in Photoshop

5. Design a Zebra-Skinned Crimson Text Effect in Photoshop

6. Create an Awesome 3D Text Effect with Abstract Brush Decoration in Photoshop

7. Design a Super Delicious, Shining and Glossy Text Effect in Photoshop

8. Design a God of War III Inspired Cracked Text Effect in Photoshop

9. Make a 3D Colorful Abstract Text Effect

10. Create Colorful 3D Text Effect in Photoshop

11. Colorful Plexi Text Effect using Photoshop

12. 3D Layered Text Effect

13. Metal Text Under 12 O’clock Spot Light

14. Create Awesome Text Made of 3D Blocks

15. How to Create A Realistic 3D Typography in Photoshop

16. Create a Spectacular Style Text Effect

17. How to create 3D Love text composition

18. Design a Slick 3D Ice Text Effect

19. Create an Extruded Glossy 3D Text Effect in Photoshop

20. How to Create an Incredible Typographic Illustration: Part 1, Part 2

21. Add Fantastic Color to 3D Text: Part 1, Part 2

22. Create a Steam Powered Typographic Treatment: Part 1, Part 2

23. How to Create High Quality Metal 3D Text in Photoshop

24. How to Design a Stunning, 3D, Sunset Type Illustration

25. Using Light and Shade to Bring Text to Life

26. Create a Spectacular Flaming Meteor Effect on Text

27. Design Soft Stylized 3D Type

28. Create a Spectacular Grass Text Effect in Photoshop

29. Recreate the ‘Bee Movie’ Text Effect

30. Create This Dazzling 3D Text Effect in Photoshop

31. How to Create Remarkable 3D Text in Photoshop

32. How to Create a 3D Text Photo Manipulation

33. Create a Dream Design with 3D Typography

34. 3D Text On Fire

35. Kaboom! Exploding Text

36. Create 3D type art using Photoshop CS5

37. 3D Type with Repoussé in Photoshop CS5 Extended

38. The Making of “Climb” – An Awesome 3D Text Composition in Photoshop

39. Create an Awesome Funky Text Effect

40. Create A Beautiful 3D Text Composition

41. Create a Cool 3D Graffiti Text Effect using Line Art in Photoshop

Let us know if we have missed some thing awesome and we will be happy to update the article.

June 07 2010

13:00

Elegant 3D Text Effect in Photoshop

In this tutorial you’ll learn how to create an elegant 3D Text effect using simple the shape tool, layer styles and paths.

Step 1: Setting Size

Make a new document. I’m choosing a standard desktop resolution of 1280×1024 so this can be used as a wallpaper.

Step 2:

Now press "U" and select the rectangle tool. Create a rectangle that is the size of the document. Name this rectangle layer "Gradient". Now apply a layer style with a gradient overlay using these colors #af1854, #f0d6c0 and #ffffff. Be sure the gradient is set to Radial.

Important

Make sure to turn on the "Shape Layer" instead of the default path layer when using the Rectangle Shape Tool.

Step 3:

Now transform the rectangle named "gradient" and increase it’s size from all sides. The gradient will stretch along with rectangle and the background will look like this:

 

Step 4:

Now click on type tool and write "Think" on a new layer. Name this layer "Think". I used Helvetica Neue 75 bold. Apply an inner glow with these settings:

Blend Mode: Multiply
Color – black
Opacity – 8%
Size – 13 px
Note: These values may change depending on the size of your font. Use the image below for reference.

The text will look like this:

Step 5: Creating 3D Text

Duplicate the text layer and position it behind "Think" layer. Name this layer "3D". To give it a 3D look, we need to extract all the highlighted 3D faces of text . Let’s start with letter "T".

Press "U" and create a rectangle of equal width above the letter "T". Don’t forget to turn on "shape layer". Fill this rectangle with any color and give opacity 20%.

Press "A" and select the direct selection tool. Select the upper two anchor points and align them by pressing the right arrow to give the top of your "T" a 3D look. Name this shape "T1".

Create other faces shown below using the same process. Name these T2 and T3.

Step 6: Giving Shadows

Select the face T1 and change it’s color to white. Hold Ctrl and click on layer T1 to get selection of layer. Create a new layer and name it "T1shadow". Select a brush, and using the color black, hardness 0% and size 50 px. Drag from left to right to give it depth.

Step 7:

Repeat step 5 & 6 to the rest of the characters. Give shadows to other letters carefully. If everything is done correctly, the result will look like this.

You may decide to apply your shadows differently. I’ve applied shadows that gives the text a bit of a soft glossy feel.

Step 8:

Select all layers except the background layer, group them and name the group "Think". Copy the group and merge all the layers of this group copy. This layer will be automatically named as "Think". Duplicate the Think layer and change the blending mode to multiply with 50% opacity.

Step 9:

To create a perfect shadow we need to establish a perspective viewport. Create a new document of size 900 x 600 px. Press ctrl + " to show the grid. Press print screen to copy the entire desktop. Open new document, paste the image and remove the area without the grid.

Copy this grid and paste it in our work document. Change it’s blending mode to multiply to see through it. Transform it to create a plane on which the shadow will fall.

Step 10: Shadowing

Duplicate the Think layer and fill it with black. Transform it to make it fall onto our grid.

Fill in empty spaces where we added extra faces on our characters with black and merge them with the think shadow layer. Now our shadow will look like this:

Step 11:

Apply a Gaussain Blur to our shadow layer "think shadow" and change it’s blending mode to multiply. Now add a layer mask to the “think shadow” layer to fade out the shadow using a gradient (or use a soft eraser).

Step 12:

Looking pretty good! Now let’s add some lighting effects. Press P to select the pen tool and create a Path like this.

Now select a brush of size of 5px with 100% hardness. Select White as your foreground color. Select the pen tool again—the path you drew before should still be there. Right click and select "stroke path" tool. Select Brush from drop down menu and turn on "stimulate pressure". You will get stroke like this:

Step 13:

Name the this stroke layer as "Wave 1" and duplicate the layer. Go to filter > Distort > Wave and apply filter with these settings:

This will give an extra wavy look to the stroke.

Step 14:

Create some more waves by following the steps 12 & 13 and arrange them around the text. Apply a light gussian blur to some waves to give them a sense of depth. If everything is done correctly then it will look like this:

Step 15:

As an optional step, we can add some stars to our text. Press "U" to select the custom shape tool and select 5 point star.

Make a new document of size 100 x 100 px and make a star with the 5 point star shape. Fill it with black and then ctrl + click the same layer to get selection of star. Go to Edit > Define Brush Preset, create the brush and name it star brush.

Step 16:

Press F5 to access the brush panel and apply these settings:

Brush tip shape – spacing 30%
Shape Dynemics – size jitter & angle jitter 100%
Scattering – 578% on both axis
Other Dynemics – opacity 100%.

Step 17:

Select this star brush and keep its size to 15 px. Set foreground color to "#ff62ad". Create another path with the pen tool, right click to select "stroke path". Turn on stimulate pressure and create a wave of stars. Name this new layer something like “Star Wave”.

Step 18:

Now we just need to hide this star wave layer from some places to make it seem as if it is passing through layers. I prefer to use a mask, and manually filling in the areas I want to hide.

Download the PSD (or source files)


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl