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 »

Here is an easy way to make a nice CSS menu for your website that will also keep the current page highlighted in the menu. First we need a background for the menu and a mouse-over background or highlight which will also act as the current page highlight. If you want to use your own colors or pattern you can replace the link in the CSS with your own. Here are the two background images I made with Photoshop. The size of these particular images are width:15px height:40px.

Up state Down state

Click here to see the final.

Read the rest of this entry »

By: Brian McGregor

I wonder if you knew that visitors to your website form an instant opinion? And they form it about you and your offer. This instant opinion is created subconsciously. It happens automatically within the visitors mind. It happens automatically. Your site visitors can’t help themselves. It matters not a jot how clever the text is on your page. You can have paid an expensive professional to produce your copy for you. The visitor need not read a single word, and yet they will form their instant opinion.

The quality of the images on your web page won’t make any difference. Their quality doesn’t affect in this instant opinion. You might think if you make an unrepeatable offer, that your visitor is bound to be swayed by that! I’m sorry, the instant opinion clicks in, and your brilliant offer lies unseen. This is because the instant opinion is made when your web page is displayed to your visitor. You may have guessed there is something subliminal at work here. In a way, that is right. Immediate opinions are formed by visitors to every single website. You may have already worked out that the answer is colors. When your web page appears to your visitor, the colors you’ve used go to work on the subconscious of your visitors.

Read the rest of this entry »

On an earlier tutorial I wrote about how to create and send an email form using html and a basic php script. Today I’ll take it up a level and re-write that script using the if, else conditional and empty() function to include form validation.

Using an if, else conditional: if (condition) {do something} else { do this} , we can make certain fields of our form required that they be filled out. Let’s start by making a basic form with first name, last name, email and comments as our text inputs. Copy the following code into a text document then save and name it form.html:

Read the rest of this entry »