Design-Notes » Feature Articles

19 fresh text effect tutorials

alexandra — Wed, 29 Apr 2009 07:35:14 +0000

Follow up our recent popular post on making movie posters, I would like to share a few nice tutorials on how to make text effects using Photoshop and Illustrator including making same text effects as we see in The Chronicles of Narnia, Star Wars, Bee Movie and Matrix. Most of theses tutorials are fairly new to us. And let’s enjoy!

The Chronicles of Narnia Logo

Trick highlight: pattern overlay, gradient overlay, stroke

Star Wars text effect

Trick highlight: gold layer+noise

‘Bee Movie’ Text Effect

Trick highlight:

Drop Shadow
Inner Shadow
Inner Glow
Bevel and Emboss
Bevel and Emboss — Contour
Gradient Overlay

Colors used were:

Inner Glow: #7f7f51.
Gradient Overlay: #f86503 and #fbe432.

Matrix text effect

Trick highlight: Palatino at 48 pixels+gaussian blur+ motion blur

Candy Coated Photoshop Tutorial

Trick highlight: “Creampuff” font+color overlay+ pattern overlay

Diamond text effect in photoshop

Trick highlight: Bevel and Emboss+inner glow+pattern overlay

How To Create A Gold Text Effect In Photoshop

Trick highlight: gradient overlay+drop shadow+stroke

How To Create a Realistic Golden “Bling” Text Effect

Trick highlight: blending option+outer glow

Create Realistic Stencil Graffiti

Trick highlight: Gaussian Blur+blending:overlay

Create a Simple, Professional Typographical Design

Trick highlight: blending:softlight

Scrabble Text

Trick highlight: wooden pattern+inner shadow

Bullet Holes on a Wanted Sign text effect

Trick highlight:

Set the Fill of the layer to 90%. (If you’re not sure what Fill is, it’s right below Opacity. Opacity controls how transparent everything on the layer is, while Fill controls how transparent only the layer and not the layer styles are)
Set the layer blending mode to Multiply

Patch on Clothe text effect

Trick highlight: Brush Tool (soft round brush, size of 3 px) and draw the stitches

Patriotic Text Effect Using Displacement Masks

Trick highlight: Clipping Mask+Bevel And Emboss

Illustrator Tutorial – 3D lighted text effect

Trick highlight: cutting out the lines that we don’t need+mesh

Shining and Glossy Text Effect in Photoshop

Trick highlight: Color Balance+Filter > Render > Fibers+soft brush with colour of your choice and simply paint over the layer.

Text Effect with Leaves and Stone Texture

Trick highlight: Gaussian Blur+texture+render cloud

Letterpress/Inset/Debossed Text

Trick highlight: inner shadow+ gradient overlay

Create a Bright Floral Text Effect

Trick highlight: gradient overlay+inner shadow

ADD TO If this helps, why not tell your friends?

Flashy intro with jQuery animation

alexandra — Sun, 26 Apr 2009 08:37:45 +0000

Remember those days which almost every website has a Flash intro or header that makes you wait un… forever. Now more and more people are using jQuery’s animation function to make their sites interesting. Let’s see how we do it.

Try the demo.

Header:

link jquery and jQuery color plugin

The HTML:

I used a list of links, like a menu, because I want to be able to make them to real links in the future. For now the links are empty. Each link has a class of “c+number” which stands for the color number in the color list we make later in the JavaScript.



	Design-Notes
	Likes to be
	Creative

CSS

This part is pretty standard, dark background goes well with this intro.#navigator li a’s position has to be defined. It can either be absolute or relative. Each will give you a different result of animation.

body{
background:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#container{
width:600px;
margin: 100px auto;
}
#navigator li{
display:inline;
}
#navigator li a{
position:relative;
padding:2px 5px;}

JavaScript

A litter harder than my previous post on the cost estimator with UI but still quite short.

Using animation:

animate( Hash params, String|Number speed, String easing, Function callback (optional) A function to be executed whenever the animation completes. )
You can use fontSize,color, backgroundColor, width and borderWidth etc. Then define the speed of your animation. You can use strings like slow, fast or integers in milliseconds (1000 =1 second).
here is a simple example:

 $("#myDiv").animate({ color: "pink" }, 500);

Here is our code:

Line 1:choose the colors you wan to use, put them in an array called menu_over_color
Line 3:The object I will animate is a under navigator, so select all of them with each:

Each: Execute a function within the context of every matched element.
Line 4:point the class attribute to our color list in line1. substring(start,stop)for example: the substring(1,3)’s result of “hello” is “hel”. I originally had fifteen colors listed. Here is a more detailed explanation on attr
Lin5 to 13: animation sequence: change color>font size>position>background color> then settle down to white text and their own background color. This is not the only option, play around with it. You could surprise yourself.
Last 8 lines are optional. They deal with hover.

Finally, I suggest you read about chained animation and unqueued animation animation.

/* the colors */
var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator > li > a").each(function(){
var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];
   $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/
  $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/
 $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/
  $("#navigator li a").animate({left: '50px',}, 300)
  .animate({fontSize: '1.5em'}, 300)
  .animate({ backgroundColor:over_color }, 500, 
function() {var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/
$(this).animate({color:'white',backgroundColor:over_color},300);});
});/* animate all text again with callback function*/
	$("#navigator > li > a").hover(
		function(){//over
			var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];
			$(this).animate({ color: over_color }, 500 );
			$(this).animate({ backgroundColor:over_color }, 500 );
		},
		function(){//out
			$(this).animate({color: menu_over_colors[0]},500);
		}); 
});

ADD TO If this helps, why not tell your friends?

How to create a Feature Article slide show with thumbnails and indicator

alexandra — Tue, 14 Apr 2009 08:02:54 +0000

I am a regular visitor of tutorial 9 among other popular design sites. I really love their gallery on the front page so I tried to figure out how they did it or How I can do it maybe in some other ways. I also like watch football (soccer to Americans) so Goal.com is my favorite site too. They also got a news slide show on front page even with better features than tutorial9’s. You can also check out previous post about currently available slide show/gallery scripts .

slideshow on Goal.com

Divs Explained

Here is how I do the slide show similar to theirs.Two jQury plugins are needed: jCarousel and jQuery cycle

First of all, the features I want to have:

Not to manually resize thumbnails
Be able to display photos with different size and ratio
Auto scroll with thumbnail indication
Manually scroll though thumbnails
Sliding effect with easing animation instead of fading

Here is the Demo

You can also download it

This is how I did it:

Header:





//your future js file

Slide show with jQuery cycle. According to JQuery cycle’s intermedia level 2 tutorial, having a slide show with pager and auto scroll is easy. Here is the HTML code:
- Use DIV to hold your images.
- Give your gallery a name- featured gallery.
- Give images class ‘change’ for resizing with CSS
1 2 3 4 5 6 7 8 9 10 11 12

The JavaScript for jQuery Cycle:

Wrapall bigimgs.
Prepend ul named feature_gallery_pager before all bigimgs.
Define scroll effect and time

$('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
 
slideExpr: '.bigimg', //slide name
pager:      '#feature_gallery_pager'//pager name
}
 
});ul>
div>

I also want to have the caption or related text displayed. Then we need a call back function. There are two choices. You can use onBefore or onAfter. There isn’t too much difference.

Thebefore option specifies the name of the callback function to be invoked
immediately before a slide transition. The after option specifies the name
of the callback method to be invoked at the end of a slide transition.

I will just use before.Also I stored captions or related texts in id attribute. You can always use somthing else.
```
$('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
fx:'scrollLeft',
easing: 'swing',
inDelay:    250,
drop:       40,
timeout:    5000,
pause:      true,
before:  onBefore,//add call back function
slideExpr: '.bigimg',
pager:      '#feature_gallery_pager'
}
});    function onBefore() {
$('#output').html("Scrolling image:" + this.id);
}ul>
div>
```
Now we need to get thumbnails from bigimgs’ url and shrink them. Add this code after pager name and define width and height for class thumbnail. What it does is to get src from bigimg’s title attribute. Now you understand why I put the image url in title attribute of its div, you can always use other attributes. Why not get it from src? cause it does not work, and I have seen many people stuck here. One guy in a forum used a whole page of code to get thumnail url. I think I just gonna take the shorcut.
```
 pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	+slide.title+'" alt="" />
';
        }
```
Put thumb nails in jCarousel, so we can scroll them.The thumbnails are called feature_gallery_pager in jQuery cycle.
```
$(function() {
jQuery('#feature_gallery_pager').jcarousel({
scroll:1
});
});
```

Style with CSS:

Define bigimg change class with width or height so they are not constrained.
class .jcarousel-item ’s width need to be slightly smaller than it really is.
the active slide is called a.activeSlide

body {
font:12px;
}
a img {
border:none;
}
.jcarousel-container {
position: relative;
clear:both;
width:510px;
margin:10px auto 0 auto;
padding:0 40px;
}
.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
 
width:80px;
}/**
*  Horizontal Buttons
*/
.jcarousel-next-horizontal {
position:absolute;
top:10px;
right:5px;
width: 32px;
height: 32px;
cursor: pointer;
background:  transparent url(jcarousel_next.png) no-repeat 0 0;
}
.jcarousel-next-horizontal:hover{
background-position: -32px 0;
}
.jcarousel-next-horizontal:active{
background-position: -64px 0;
}
.jcarousel-next-disabled-horizontal, .jcarousel-next-disabled-horizontal:hover, .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-prev-horizontal {
position:absolute;
top:10px;
left:5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(jcarousel_prev.png) no-repeat 0 0;
}
.jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-prev-disabled-horizontal, .jcarousel-prev-disabled-horizontal:hover, .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
#feature_gallery{
height:500px;
width:600px;
margin:auto;
display:block;
background-color: #F2F2F2;
padding: 10px;
border: 1px solid #DADADA;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
ul#feature_gallery_pager{
display:block;
margin:auto;
overflow:hidden;
height:65px;
}
#feature_gallery ul.menu li a:hover{//you can define sth here
}
ul#feature_gallery_pager li a{
overflow:hidden;
width:80px;
height:60px;
padding:2px;
float:left;
display:block;
}
ul#feature_gallery_pager li{
margin:0 2px;
padding:0 0 10px 0;
}
#feature_gallery ul.menu a.activeSlide{
background:url(arrow.png) no-repeat;
}
#feature_gallery .bigimgs{
overflow:hidden;
background-color:#000;
height:330px;
width:500px;
border:2px solid #fff;
position:relative;
margin:0 auto;
}
#feature_gallery img.change{
width:500px;
position:relative;
}
#feature_gallery img.thumb{
width:80px;
height:51px;
}
#output{
width:500px;
margin:1em auto;
display:block;
clear:both;}

Make the js external:

// DOM Loaded
$(function(){ 
 
    //init js styles
    $('body').addClass('hasJS'); 
 
    // homepage cycles
    $('#feature_gallery .bigimg').wrapAll('
').parents('#feature_gallery').prepend('
').cycle({
        fx:'scrollLeft',
        easing: 'swing',
        inDelay:    250,
        drop:       40,
        timeout:    5000,
        pause:      true,
		before:  onBefore,
        slideExpr: '.bigimg',
        pager:      '#feature_gallery_pager',
        pagerAnchorBuilder: function(idx, slide) { 
 
            return '
	+slide.title+'" alt="" />
';
        } 
 
    });
 
$(function() {
    jQuery('#feature_gallery_pager').jcarousel({
        scroll:1
    });
});
 
function onBefore() {
    $('#output').html("Scrolling image:
" + this.id);
} 	
 
});ul>
div>

(optional) If your photos’ size are very different you can define the image change class like this

.change{width:600px;//make it bigger than your frame so you can move it position: relative; top:-30px;left-40px}

Next, I will show you how to integrate it with WordPress.

ADD TO If this helps, why not tell your friends?