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

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

August 15 2011

17:04

[Requested Illustrator Tip] Edit Styles in Multiple Text Boxes at Once

This Illustrator quick tip was requested by Chris. Chris asks, “I want to make a global change to the FONT or STYLE of a bunch of text boxes (each with different text inside them) at once. Is there a way to do this?” As a matter of fact, there are a couple different solutions, both of which take no time at all, however, graphic styles must be applied differently, but we can take care of all of the font formatting with ease. Let’s get started.

Step 1:

Ok, let’s say for example, you have all of the different text boxes like in this image, and you want to change all of the, sizes, and fonts, and colors to match the text box on the bottom right. In that case, step 1 would be to fine tune your text formatting in the bottom right text box and get it exactly the way you want it.

Step 2:

Shift + Select all of the text boxes except for the one you want to match.

Step 3:

Select your Eyedropper Tool, or hit (I).

Step 4:

Click your Eyedropper Tool on the text box on the bottom right. (The one you want to copy, font and size, etc. from) and it applies the formatting from that text box to all of the other selected text boxes! And Done :) It won’t change the actual TEXT in the boxes, only the font, color, and size, etc. Basically, anything you can control in the Type Panel, including letter spacing, leading, etc. Styles (effects) must be applied manually, which you can do easily by Shift + Selecting and then applying a graphic style, or drop shadow, or whatever you need.

Alternate Method:

Shift + Select all of the text boxes and the adjust your settings in the Type (Character Panel). It’s as simple as that.

June 20 2011

17:44

The Simple Guide to Text Effects using Layer Styles

Typography plays a key part in many kinds of design. Some would even say it’s the most important element of web design, in order to correctly portray your message you have to invite the user to read what you have to say. So how do you make your type stand out? In today’s tutorial I want to cover some of the basics of modifying text using Layer Styles in Photoshop. We’ll learn how to create the “letterpress” look, how to overlay textures and patterns, and how to use tools like Stroke and Bevel. Let’s get things started.

Preview:



We’ll be creating three separate kinds of text styles:

  • Creating Letterpress Text
  • Overlaying Patterns on Text
  • Creating Retro Type using the Stroke Tool

1.) How to create letterpress text.

Letterpress style text has been a staple of web design for a number of years now, and for good reason… it’s slick, stylish, and easy to create.

Step 1

Create a new document sized 485px x 350px and fill it with the color #205175. Add some noise to the background using Filter > Noise > Add Noise using the settings below.

Step 2

Add a white radial gradient to the background before adding your text. Here I’ve use the font Bitstream Serif and the color is #554639.

Step 3

Now it’s time to start styling the text. Open up the Layer Styles window by double clicking on your text layer. Firstly we’ll add a black to white gradient with an opacity of 47% and a the blend mode set to Soft Light.

Step 4

Next we’ll start on the letterpress look by adding an inner shadow. Set the distance to 2px and the size to 4px.

Step 5

To finish off the text we’ll add a light drop shadow that helps complete the letterpress feeling by adding a highlight. Here I’ve used the color #95bcd6, set the distance to 1 pixel, and used an opacity of 78%. And that’s it! See how easy it is to make good looking text?

2.) Overlaying patterns on text.

Overlaying patterns and textures on top of your text can help give some extra visual style to your work and helps to draw the reader in.

Step 1

I’ve created a new document and imported one of these paper textures to use as a background. The font used here is called ChunkFive set to 18pt.

Step 2

Open up the Layer Styles window and select Pattern Overlay. With this tool you can overlay and seamless patterns or textures on top of your text. Here I’ve chosen a seamless wood texture.

Step 3

Next we’ll add a small gradient overlay to the text to help give it a bit more of a three dimensional look. Set the blend mode to overlay and the opacity to 34%.

Step 4

Next we’ll add a drop shadow with a distance of 2px and a size of 2px, with an opacity of 53%.

Step 5

Adding a 1px white inner shadow helps give the text a small highlist and really makes it pop.

Step 6

Lastly we’ll use the Bevel and Emboss tool. I know a lot of designers look down on this particular tool, but I think if it’s used subtly enough it looks pretty good… just don’t overdo it. I’ve set the depth to 1%, the size to 3px, and the shading angle to 90*.

And that completes the wood text! See how easy it is? Hopefully you’re getting the hang of it now.

3.) Creating retro type using the stroke tool.

For the last part of this tut we’ll combine a number of different layer style tools to create text that has a nice retro feel to it.

Step 1

I’ve create a new document, added a simple striped pattern and gradient to the background. The font used here is ABTS Milk and is available through Jay’s FontDeals. The color is #9feef5.

Step 2

Next open up the Layer Styles window and we’ll start off by adding a gradient stroke to the text. Set the size of the stroke to 5px and use a gradient similar to below.

Here is a preview of the gradient that I’ve used:

Step 3

Next we’ll add a subtle gradient to the text. I’ve set the opacity to 70% with a blending mode of screen.

Step 4

Next we’ll use the Inner Glow tool to add a little more detail. I’ve set the color to #eef3ff, the size to 2px, and an opacity of 79%.

Step 5

Use the Bevel and Emboss tool too add a little more depth to the text. I’ve set the size to 2px, depth to 1%, and shading angle to 160*.

Step 6

Lastly we’ll add a heavy drop shadow to help the entire thing “pop” from the background a little bit. Set the distance to 9px, size to 16px, and opacity to 21%.

And that’s it! Now you have a nice looking, basic retro logo that can be made in less than 5 minutes.

Conclusion

This tutorial was intended to touch on just the basics of what you can do with Layer Styles. If you enjoyed it and felt like you learned something new please let me know. I’d love to make some more in depth tutorials about modifying text in Photoshop in the near future.

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!

June 16 2011

10:00

A Simple Guide to Improving Web Typography

With the advent of much improved browsers, text rendering and high-resolution screens, technology is no longer an excuse for poor typography. In many ways typography can be elegant and an expression of the designer’s ideas when chosen wisely.

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

 

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

  • It allows the reader to adjust to the right setting and encapsulates the information conceptually.
  • The evaluation of picking the right font should start at this level and then break down into technical bits.
  • Keep the nature of content in mind during this process and see if and how the type reflects that content.
  • Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

 

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

  • Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
  • By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

  • Long lines of text may require extra leading.
  • Bold face or sans-serif type require more leading.
  • Type set at very small sizes, say 8 point or below, may require extra leading.
  • Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
  • Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

  • Contrasting colors stand out more, so use them for main section headings.
  • It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
  • The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
  • Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

 

 

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.

May 21 2011

10:00

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials

CSS3 with it’s possibilities is a revolution in web development. The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. What’s more, almost all of the major browsers now support most of the CSS3 features so that’s another reason for mastering the new techniques. One of the spheres CSS3 has changed dramatically is web typography. Text styling and neat effects can now be achieved without using any Javascript or images at all. This article presents 30 useful and cutting edge CSS3 text effect and web typography tutorials that will take your designs to the next level.

1. How to Create Inset Text With CSS3

Inset-css3-text-effect-tutorials

In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

2. 3D Text

3d-css3-text-effect-tutorials

This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

3. Cool Text Effects Using CSS3 Text-Shadow

Shadow-css3-text-effect-tutorials

This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.

4. Letterpress Effect with CSS Text-Shadow

Pure-letterpress-css3-text-effect-tutorials

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

5. Letterpress Text Effect Using Photoshop and CSS

Letterpress-photoshop-css3-text-effect-tutorials

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.

6. Text Embossing Technique With CSS

Text-embossing-css3-text-effect-tutorials

Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.

7. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Subtle-typography-css3-text-effect-tutorials

Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.

8. Outline Your Text Using the CSS3 text-stroke Property

Outline-css3-text-effect-tutorials

This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

9. How to Create a Cool Anaglyphic Text Effect with CSS

Cool-anaglyphic-css3-text-effect-tutorials

In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in  web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.

10. CSS3 Tutorial: How To Change Default Text Selection Colour

Change-selection-color-css3-text-effect-tutorials

Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.

11. 8 CSS3 Text Shadow Effects

Shadow-cool-css3-text-effect-tutorials

This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .

12. Text Rotation with CSS

Rotate-css3-text-effect-tutorials

In this tutorial you’ll learn to rotate text without images using the transform property.

13. CSS3 Shining Text, CSS2 Flaming Text

Shining-css3-text-effect-tutorials

Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.

14. Create Beautiful CSS3 Typography

Beautiful-typography-css3-text-effect-tutorials

This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

15. CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

Cookbook-css3-text-effect-tutorials

In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.

16. 3D Text Hover

3d-hover-css3-text-effect-tutorials

Learn how to create multiple text shadows using CSS3 text shadow property.

17. Adding Stroke to Web Text

Stroke-css3-text-effect-tutorials

Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.

18. CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

Shadow-ie-css3-text-effect-tutorials

IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.

19. I Heart Blur

Blur-css3-text-effect-tutorials

It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.

20. How to Create Inset Typography with CSS3

Inset-typography-css3-text-effect-tutorials

In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.

21. Quick Tip: Pure CSS Text Gradients

Pure-gradients-css3-text-effect-tutorials

In this short video tutorial you’ll learn how to apply gradients to texts using webkit.

22. CSS3 Background-Clip: Text

Selectable-css3-text-effect-tutorials

Learn to apply CSS transition on a selectable text.

23. How to Use Text Shadow /w CSS3

Shadow-use-css3-text-effect-tutorials

CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.

24. CSS3 Poster With No Images

Poster-css3-text-effect-tutorials

An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.

25. Creating a True Inset Text Effect Using CSS3

Inset-text-css3-text-effect-tutorials

This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.

26. 3D CSS Shadow Text Tutorial

3d-shadow-text-effect-tutorials

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

27. How To Create 3D Text Using CSS3

3d-using-text-effect-tutorials

Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

28. Font Sizing With Rem

Font-sizing-text-effect-tutorials

CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.

29. Create Attractive Web Typography with CSS3 and Lettering.js

Attractive-web-typography-css3-text-effect-tutorials

In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.

30. CSS Text Shadow

Shadow-2-css3-text-effect-tutorials

Another tutorial taking you through all the advantages CSS3 text-shadow can give.

March 24 2011

18:20

Illustrator: Edit Multiple Text Boxes at Once (Requested) [HD Video]

In this (requested) video tutorial, I will go over how to edit multiple text boxes across a multi-artboard Illustrator document. This allows you to edit the text once and change it on all corresponding artboards in your Illustrator document, saving you loads of time. :)

Illustrator: Edit Multiple Text Boxes at Once from Jay Hilgert on Vimeo.

September 25 2010

00:56

Typography Inspiration: Text Art from DeviantART

Here we showcase some of the best digital artworks which principally use text art and typography as the main theme to create works of true inspiration.

View and Vote


September 23 2010

10:17

Line Break Removal Tool

With the Line Break Removal Tool you can remove line breaks from blocks of text but preserve paragraph breaks with this tool. If you've ever received text that was formatted in a skinny column with line breaks at the end of each line, like text from an email or copy and pasted text from a [...]

View and Vote


June 26 2010

11:00

Become Master of Text Effects With 40 Adobe Fireworks Tutorials

Adobe Fireworks is a bitmap and vector graphics editor. It is aimed at web designers for rapidly creating website prototypes and application interfaces. It is designed to integrate easily with other former Macromedia products, such as Dreamweaver and Flash.
While Fireworks CS5 packs a lot of new features, it is still possible to achieve completion of these tutorials listed below.

From my own experience, it’s hard to get started learning this program because you will face some obstacles. But take your time and be patient and you will master Fireworks in no time.

1. 3D Water Text Effect in Photoshop CS5

3d-water-text-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to create realistic water text effect in Fireworks CS5.

2. Awesome Floral Type in Fireworks and Photoshop

floral-type-fireworks-photoshop-fireworks-tutorials-text-effects

Make your text look better with floral effect.

3. Creating an amazing Palm Pre icon on Fireworks

palm-icon-fireworks-tutorials-text-effects

Create realistic looking Palm Pre icon in Fireworks.

4. LED Cinema Display in Fireworks

led-cinema-display-fireworks-tutorials-text-effects

Create the new Apple Cinema Display 24 the easy way.

5. Fireworks Quick Tips – How to use QuickMask

quickmask-fireworks-tutorials-text-effects

Learn how to use one of the best functions in Fireworks – QuickMask.

6. Awesome Light Effects in Fireworks

awesome-light-effect-fireworks-tutorials-text-effects

Learn how to create this amazing effect you see in the image.

7. Abduzeedo Job Board banner in Fireworks

job-board-banner-fireworks-tutorials-text-effects

Create job board banner in Fireworks.

8. Colored Lights Header

colored-lights-header-fireworks-tutorials-text-effects

Learn how to create this stylish looking header.

9. Classy personal portfolio in Fireworks

classy-personal-portfolio-fireworks-tutorials-text-effects

10. Grooveshark design style in Fireworks

grooveshark-design-style-fireworks-tutorials-text-effects

11. Amazing Neon Lights on Fireworks

amazing-neon-lights-fireworks-tutorials-text-effects

Title says it all. I followed this tutorial and ended up with a nice looking neon glow text.

12. Creating a cool website header in fireworks

cool-website-header-fireworks-tutorials-text-effects

13. Creating the iPhone Frame on Fireworks

iphone-frame-fireworks-tutorials-text-effects

Create a realistic looking iPhone from scratch.

14. Creating the iPhone Interface on Fireworks

These two tutorials are not same. In the first one you will learn how to create iPhone frame and in this one – iPhone interface.

15. Light Painting in Fireworks

light-painting-fireworks-tutorials-text-effects

16. Apple Air Banner in Fireworks

apple-air-banner-fireworks-tutorials-text-effects

A must tutorial for every apple fan.

17. Creating the IE7 logo effect in Fireworks

internet-explorer-logo-effect-fireworks-tutorials-text-effects

In this tutorial you will learn how to make IE7 logo effect for any letter.

18. Twist and Fade Technique

twist-fade-fireworks-tutorials-text-effects

19. Highway Sign

highway-sign-fireworks-tutorials-text-effects

20. Create a Night Scene

night-scene-fireworks-tutorials-text-effects

21. Page Curl in Fireworks

page-curl-fireworks-tutorials-text-effects

22. Create a Digital Collage

digital-collage-fireworks-tutorials-text-effects

23. Scotch Tape Tutorial

scotch-tape-fireworks-tutorials-text-effects

24. Dot Matrix Effect

matrix-effect-fireworks-tutorials-text-effects

25. Gel Cap / Plastic Button

plastic-button-fireworks-tutorials-text-effects

26. Circular Shadows and Highlights

circual-shadows-highlights-fireworks-tutorials-text-effects

27. Reflective Glass Effect in Fireworks/Photoshop

reflective-glass-effect-fireworks-tutorials-text-effects

This is a simple tutorial showing you how to add reflective effect to any text by using Fireworks or Photoshop.

28. Creating Grunge Text Using Adobe Fireworks

grunge-fireworks-tutorials-text-effects

29. Barcode tutorial

barcode-fireworks-tutorials-text-effects

30. Transparent Text

transparent-text-fireworks-tutorials-text-effects

31. Danger sign

danger-sign-fireworks-tutorials-text-effects

32. Crystal buttons

buttons-fireworks-tutorials-text-effects

33. Glossy Web 2.0 button

glossy-web-button-fireworks-tutorials-text-effects

34. Glossy Badge

glossy-badge-fireworks-tutorials-text-effects

35. One Dollar Coin Tutorial

dollar-coin-fireworks-tutorials-text-effects

36. Human Iris

human-iris-fireworks-tutorials-text-effects

37. Simple Orbs Tutorial

simple-orb-fireworks-tutorials-text-effects

38. Text Wrapping

text-wrapping-fireworks-tutorials-text-effects

39. Canned Pineapple Slice

canned-pineapple-fireworks-tutorials-text-effects

40. Recycling Button

recycling-icon-fireworks-tutorials-text-effects

February 18 2010

20:43

35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

By Angel Wardriver

jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let’s take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects.

Also consider our previous articles:

jQuery Galleries and Slideshows

GalleryView jQuery Plugin
GalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. It comes with lots of many options for customization. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.

GalleryView-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Jquery Plugin MopSlider 2.4
MopSlider is the slider box can contain any item that is set height and width. From 2.2, MopSlider can be put 2 in the page. A CSS file isn’t necessary.

125-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery Image Scroller
Making use of jQuery’s excellent animation features, this image scroller will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser compatible and perform as expected in the latest versions of all of the most common browsers. The tutorial helps build in some interaction by adding controls that allow the visitor to change the direction of the animation.

JQueryImageScroller-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my CSS) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

Slidingbox-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Create Beautiful jQuery sliders tutorial
With this tutorial, you can develop a beautiful jQuery slider that has an added image description and name. The final result is a smooth and visually pleasing slideshow which could be easily integrated into any site.

Beautifuljquery-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Full Screen Image Gallery Using jQuery and Flickr
By using jQuery, this full screen image gallery automatically scales the image while using Flickr as the search engine. It comes with thumbnail preview, preloader, captions, and more. The results are extremely impressive.

Fullscreen-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

71-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Galleriffic | A jQuery plugin for rendering fast-performing photo galleries
Galleriffic offers fantastic performance in delivering a high volume of photos. This is a useful jQuery plugin that will render fast photo galleries, while both impressing and improving your user’s experience.

133-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery plugin: Wilq32.RotateImage
This is the final product of a Wilq32.PhotoEffect Snippet. You can use this simple and tiny script to get an effect of rotated images directly from client side, such as user generated content, and then animate them using functions.

135-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQZoom Evolution
JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

126-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Resizable Image Grid with jQuery
Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

Resizable Imagegrid-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery plugin: Tooltip
This jQuery plugin tooltip can help you use bodyHandler to display footnotes, an image with a tooltip, or block tooltip. Also is helps links to have no delay with tracking and fading, or with extra content with extra classes. It’s useful for different tooltip styles on a single page like an image map with tooltips and testing repositioning at viewport borders.

103-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Charts and Graphs with jQuery

jqPlot Charts and Graphs for jQuery
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. It’s strongest feature is its pluggability. Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. The plot elements are customizable. The core jqPlot code allows custom event handlers, new plot types, and more.

59-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

JS Charts – Free JavaScript charts
JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts, or simple line graphs.

26-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

moBlur.org – Google Charts GUI with jQuery
This jQuery is a basic frontend GUI to be used with Google’s charts API.

27-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery Text Effect Plugins

Airport – Information board text effect jQuery plugin
Airport is a rather simple text effect plugin for jQuery. It emulates the style of those flickering information boards you sometime find on airports and train stations.

121-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Editable (jQuery Editable Plugin)
This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and …) to text input, password, textarea, or drop-down list. You can easily extend it by adding your own input type using its editableFactory object.

134-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery Plugins
Some of these plugins have been merged into jQuery core in one form or another. These include the ability to batch results into an array, a resolution for IE z-index issues, auto-expand text areas, dynamically create configurable gradient to the background without using images, implement the over label technique, live query and many more helpful plugins.

136-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Jquery Elastic 1.2 Demo
This page contains a couple of demos of the Jquery plugin Elastic. Elastic makes your textarea change its height dynamically.

65-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Stephane Caron – No Margin For Errors ¬ Pretty comments
Here’s a small jQuery plugin that allow textareas to stretch as content is put in. If the content goes over the defined height of the textarea, the textarea will grow as needed.

66-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

ToggleVal
ToggleVal gives you the option to populate the default text of form fields in a few different ways. It will then toggle the default value when the field receives and loses keyboard focus.

74-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery sIFR Plugin
The jQuery sIFR plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR) using the internal jQuery API.

47-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery Spoilers Plugin
Spoilers is a jQuery plugin which implements a feature first seen on the imdb.com web site. The pages using this plugin to show “Spoilers!” text, but when you mouse over that text, "Spoilers” disappear and the underlying text is revealed. The intention is to keep the casual reader from inadvertently reading details which he might not want to know. By mousing over them, he can reveal the details.

Spoilers-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jTruncate – Text Truncation for jQuery
jTruncate allows you to customize nearly every aspect of the truncation operation. It provides simple yet customizable truncation for text entities in your web page.

109-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Further jQuery Resources

List of Useful jQuery Plugins: jQuery, JavaScript
This is a huge masterlist from the jQuery plugins in the jQuery plugins repository. These are some of the best and most practical. The truly exceptional plugins are marked with “EXCELLENT.”

36-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Lazy – The on-demand jQuery plugin loader
This jQuery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all jQuery-plugins, that you might or might not need, Lazy downloads the plugins when you actually use them. The major difference between Lazy and it’s competitors is it’s size.

72-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jQuery Callout Plugin
This jQuery Callout Plugin is based entirely on CSS, so no images are required like in the static text below. The rounded corners come courtesy of the excellent jQuery Rounded Corners plugin.

19-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Guapo – jQuery copy plugin
We all know that in IE we can easily copy text to clipboard. It is, however, not such an easy in FX. This plugin uses a SWF file to achieve this; the SWF file’s default location is the same to the plugin. If you move it to another location, it changes in the plugin source code.

18-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Moousture
Moosture is a mouse gesture library written solely in javascript with power and flexibility. Implemented on Mootools following the Object Oriented standards, the library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.

8-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Gritter for jQuery (Growl) (Demo)
A jQuery Growl look-a-like plugin, a notification bubble/popup that appears in the top right of your layout. Think of it as calling the alert() function in JavaScript, only it’s subtle and looks nice.

113-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

jGrowl – Unobtrusive Notification System for jQuery
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works. It has the ability to create multiple container instances, allowing a developer to raise and create various notifications in various location on the user’s screen.

90-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Add a favicon near external links with jQuery
External links should always be marked distinctly in order to see them easily. An even better idea is using the favicon.ico of the external site, if it is available of course.

120-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

Oursignal.com used jQuery plugins
OurSignal is a awesome visualization that displays the popular stories from Digg, Delicious, Reddit, Yahoo! Buzz and Hacker News in single page. Developed by Stateless Systems, it is nicely implemented with jQuery Plugins.

33-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

UI.Layout Plug-in
This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

129-jquery in 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects

December 03 2009

21:41

22 Advanced CSS Text Effects And Web Typography Tips

title-css-text-effects-typographyYou definitely should have seen those advanced CSS text effects for now already, they are rapidly getting popular as upcoming and current trend in good webdesign. The best thing about these effects is, it can be achieved with pure CSS, no more image replacements and image heavy web designs. In this article I showcased all the best explained CSS tutorials and typography tips I found and thought you definitely must read! Scroll through or definitely save this article to bookmarks so the next time you create new design in Photoshop with letterpress, shadowed etc. effects – you can create them just with pure code!

Typography takes also very important role in good web designs, so I strongly recommend to read articles I featured there as well! Enjoy and get inspired for your new, advanced web designs!

1. Create a Letterpress Effect with CSS Text-Shadow

letterpress-css-text-effects-typography

View Demo

2. Text Rotation with CSS

snook-rotation-css-text-effects-typography

3. Date Display Technique with Sprites

display-sprites-css-text-effects-typography

4. CSS Gradient Text Effect

gradient-css-text-effects-typography

View Demo

5. CSS Text Gradients

Yet another very similar tutorial about text gradients, but maybe you’ll like both variants trying to explain really how CSS text gradient effects work.

gradient-cssglobe-rotation-css-text-effects-typography

6. Add grunge effect to text using simple CSS

Article is based on the same technique as CSS text gradients using it to add grunge type effect to your typo!

grunge-css-text-effects-typography

View Demo

7. Two simple ways to create text embossing effect

embosing-two-tips-css-text-effects-typography

8. Text Embossing Technique With CSS

Example from AlexBuga homepage.

embossing-technique-css-text-effects-typography

9. Codename Rainbows

Beautiful CSS&Javascript code offered by DragonInteractive teaching how to get two-color gradient text effects, shadows and highlights.

rainbows-css-text-effects-typography

View Demo

10. CSS Drop Shadows

dropshadow-css-text-effects-typography

11. Text-Shadow Exposed

Make cool and clever text effects with css text-shadow. Very detailed article teaching you a lot of hidden tips how to achieve text glowing, embossing,shadowing with just few steps.

cool-clever-shadow-css-text-effects-typography

12. Background gradients and CSS

Pretty cool CSS background effect, which can be applied on hover giving a lot of options use it in creative way!

background-css-text-effects-typography

13. CSS Text-Shadow in Safari, Opera, Firefox and more

multiple-shadows-css-text-effects-typography

14. Text-overflow

overflow-css-text-effects-typography

15. How To Implement sIFR3 Into Your Website

sifr-how-to-css-text-effects-typography

16. How To Use Any Font You Wish With FLIR

flir-css-text-effects-typography

View Demo

For Further Reading – More Typography Tips In Sucessful Web Designs

17. How to use headings in HTML

headings-how-to-css-text-effects-typography

18. Advanced Typography techniques using CSS

advanced-typography-css-text-effects-typography

19. 10 Examples of Beautiful CSS Typography and how they did it…

Beautiful article explaining simple but very effective CSS tricks how to achieve beautiful typography effects with just a few lines of code.

10-typography-tips-css-text-effects-typography

20. Typographic Contrast and Flow

Nick La teaches how to apply right contrasts and flow in your webdesigns explaining why and what works and how to achieve that effect.

typographic-contrast-css-text-effects-typography

View Demo Overview

21. The Elements of Typographic Style applied in Webdesign

elements-typography-css-text-effects-typography

22. 5 Principles And Ideas Of Setting Type On The Web

5-principles-type-css-text-effects-typography

Related posts:

  1. Beautiful Gradient Effects On Web design – Research: Part 2
  2. 30 Logo Designs Using Gradient 3D Effects – Inspiration:Part 3
  3. 2 in 1 – Stunning 3D Ice Text Effect Tutorial
  4. Unique 3D Text – Xara 3D + Photoshop Tutorial
  5. Amazing Illustrator 3D Effects And PS Brush Creation

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.

Don't be the product, buy the product!

Schweinderl