2torial Blog|photoshop tutorials, website design tutorials and graphic design articles and tutorials

This is a two part tutorial. First we’ll make some alien looking text in photoshop then in part 2 we’ll import it into After Effects and apply an expression to make it look similar to jello when it drops. If your not interested in making the text effect, just move on to part 2 (see the end of part 2 for the final).

Part one – the text effect:

Open a new document in photoshop with a size of 720×480 and make the background black.  Type in your text and make it white for now. Name the new text layer “alien text” in the layers palette, .

Read the rest of this entry »

Import the alien.psd we made in part 1 into After Effects as a composition.  Double click on the alien comp and it will open up a new timeline with all of the Photoshop layers visible.

Go to Composition>Composition Settings and make the duration of the comp 5 seconds. In the timeline select the two text layers and hit A on your keyboard to expose the anchor property. Adjust the values so the anchor point is at the bottom of the text, then you’ll have to re-position the text back to the middle and move it just below center. To prevent the text layer from jiggling all the way down, we’ll split the layer in two and add the expression at the split (time of impact when the text drops).  Move the timeline indicator to 0;00;00;08 , Lock Layer 1 and select the two text layers then to go edit>split layer.

Read the rest of this entry »

Check out this great text effect tutorial for Photoshop over at Flash Game Design on how to make metal text wrapped in a chain.  Find the tutorial here: Chained text

-

Dreamweaver is a sophisticated web design program that is simply the best tool available (in my opinion) then anything else out there.  If your new to Dreamweaver there is much to learn – CSS tools, Ajax components for building dynamic user interfaces, and integration with other Adobe software. But have we have to start with the basics.  Here are 3 really good tutorials to give you a good foundation and get you going on the right path.

Tutorial one – setup and define your site

This is a two part video by Stefan Mischook at Killersites.com and shows you how to setup and define a new website in Dreamweaver. (hint: if you already know how to create your folders that will contain your website on your hard drive skip to part 2 of the tutorial).

Setting up your website Part 1 runtime: 5:19

Setting up your website Part 2 runtime: 7:23

Read the rest of this entry »

Here’s an nice text effect using the layer mask in Photoshop to turn an image into text background.  This effect is very easy to do and works great on logos, web page headers or print ads.

If your following along with me, download the music background I’m using here: Sheet Music

Here’s the final:

Read the rest of this entry »

Here is a simple yet effective image effect that is often used in print ads. An image’s main object extends out into the white area so it appears as if it is popping out of the picture and the ad text is placed in the white section. Obviously this effect can be used with almost any object in a picture but seems to work best on less “busy” images with one or two objects that really stand out. I’m going to use a hot air balloon for this tutorial. If you want to follow along with me, you can download the image I’m using here: Hot air balloon.

Here’s the final:

Read the rest of this entry »

In this tutorial, we’ll make a cool chrome text effect in Photoshop then import the .psd into After Effects as a composition and customize the built-in Shatter effect to make the text appear as if its crumbling apart. A very cool effect that can be used on pictures and video as well.

Here’s the final:

-
Read the rest of this entry »