Tuesday, October 21, 2008

23 Most Incredible Photoshop Tutorials

Paired with yesterday’s 24 Perfect Vectors, I wanted to list off some incredible Photoshop tutorials I’ve found on the web that will help you utilize those resources. I’ve done my best to select a wide variety of tutorials from web graphics, to photo enhancement, to just plain incredible.

Remember, its not about the destination, instead its all about the journey. Don’t neglect a tutorial because you aren’t interested in the final product. Instead, follow each one, step by step. I can personally attest that the knowledge you will gain about the various tools and functions that are available for you to use in Photoshop will be much more beneficial than the final image.

Further Reading:

25 More Most Incredible Photoshop Tutorials
How To Master Photoshop In Just One Week
75 Insane Hi-Res Photoshop Brushes
You Know You’re Addicted To Photoshop If…
21 Best Photoshop Text Effects

The Ultimate Wood Texture Tutorial

Hot Chick On A Muscle Car

How To Create A Stunning Vista Inspired Menu

Badass Bling Effect In Photoshop

Create A Slick Black iMac In Photoshop

Glass Ball Tutorial

Create A Spectacular Flaming Meteor Effect On Text

Creating Smoke

Making A Print Ready Business Card Using Only Photoshop

Slow Shutter Text Effect

Creating A Mac Type Background In Photoshop

Exploding Planet

The Pen Tool

Awesome Underwater Scenery

himg src=”http://i260.photobucket.com/albums/ii1/elitebydesign/macbookair.png” alt=”" />
Draw A Macbook Air Ad From Scratch

3D Tentacles

Gritty HDR

Add Texture To Improve Artwork

Ornate Lettering Process

Abstract Reflective Bubbles

Making Grunge Brushes

Realistic Water

Create An iPod Shuffle

via :elitebydesign

Labels: ,

How to Create a Grungy Poster in Photoshop

In this tutorial, I will show you how to create a sort of grunge poster. We will learn how to make some elements look a bit dirty, create textures, and add some depths to the elements using shadows and blend modes - Fabio

read more | digg story

27 Places To Get Incredible Web Design Inspiration

This list is not long in numbers but I promise you that when you start browsing them in details it will must boost your creative web design ideas and motivate you for design your web design something which people will never forget that you have made it!

read more | digg story

Monday, October 20, 2008

56 Fresh Tips on Getting More Traffic to Your Website

1. Write and submit articles to the article directories.

2. Leave comments on other people's blogs with a backlink to your site.

3. Answer people's questions on www.answers.yahoo.com.

4. Post in forums and have a link to your site in your signature.

5. Write a press release and submit it to PRWeb::The Online Visibility Company.

6. Advertise your website in the appropriate category on 302 Found.

7. Give an unbiased testimonial on a product/service that you have used in exchange for a backlink to your site.

8. Start a blog and submit it to the 100's of free blog directories.

9. Manually submit your website to the major search engines.

10. Optimize each page of your website for a particular keyword or search phrase.

11. Add a link in your email signature to your website. It's a free and easy way to get a little more traffic.

12. Make a custom 404 error page for your website redirecting people to your home page.

13. Use PPC search engine advertising.

14. Add a "bookmark this site" link to your webpages.

15. Have a tell-a-friend form on your site.

16. Send articles to ezine publishers that includes a link to your website.

17. Hold a crazy content and make it go viral.

18. Give away a freebie (ebook, report, e-course) to keep people coming back to your site.

19. Add an RSS feed to your blog.

20. Submit your site to any related niche directories on the net.

21. Participate in a banner or link exchange program.

22. Create a software program and give it away for free.

23. Purchase the misspellings or variations of your domain name, or those of your competitors.

24. Buy a domain name related to your niche that is already receiving traffic and forward it to your site.

25. Pass out business cards with your domain on them everywhere you go.

26. Start and affiliate program and let your affiliates send you visitors.

27. Start a page on social bookmarking sites such as www.MySpace.com.

28. Submit a viral video to www.YouTube.com

29. Conduct and publish surveys to your website.

30. Find joint venture partners that will send you traffic.

31. Start your own newsletter or ezine.

32. Use a autoresponder or email campaign to keep people coming back to your site.

33. Purchase ads on other sites.

34. Send a free copy of your product to other site owners in exchange for a product review.

35. Sell or place classified ads on eBay - New & used electronics, cars, apparel, collectibles, sporting goods & more at low prices with a link to your site.

36. Post free classified ads on any of the sites that allow them with a link to your site.

37. Exchange reciprocal links with other related websites.

38. Network with other people at seminars or other live events.

39. Purchase advertising in popular newsletters or ezines.

40. Advertise on other product's "thank you" pages.

41. Create a free ebook and list in on the "free ebook" sites.

42. Buy and use a memorable domain name.

43. Do something controversial.

44. Create an Amazon profile and submit reviews for books and other products that you have read.

45. Start a lens on Squidoo Homepage.

46. Use a traffic exchange (low quality traffic, but can sometimes be worthwhile).

47. Get referrals form similar but non-competing sites.

48. Create and sell a product with resell or giveaway rights and include a link to your site in it o others pass it around for you.

49. Email your list. If you don't have one, get one.

50. Buy a pair of sandals; get your website engraved on the bottom and walk on the beach, stomp in the mud or play in the snow.

51. Get T-Shirts with your URL printed on it. Wear it everywhere.

52. Tattoo the url or your site on your face. That would bring in a few visitors. Must be in permanent ink to get the best results.

53. Find a crazy woman on eBay who is willing to sell space on her body for money. Make some bids. These type of auctions usually get CRAZY amounts of traffic.

54. Rent out one of those moving advertising billboard vehicles. Get your site URL on it and drive to the most busiest part of the city. Start honking the horn.

55. Buy a month of space on one of those giant bilboards in town, create a good advertisement for your site and host it for a month. People have a hard time missing these since they're so big. can try this two links too

56. Upload video's related to your site on www.youtube.com or a other video site and add your link in the description

Labels: ,

Google’s Geo-targeted Results and Ranking Analysis

As most of us know, Google is fond of tailoring its results for the target audience and returning results applicable to the user’s location and various attributes, where as Live and Yahoo are slowly following suit. This poses a problem when collating a ranking analysis or trend for search engine optimisation (Search Engine Optimization). Let’s take a closer look at Google for example, China has a huge censorship issue of returned results that measures 2MB as a text document, however these results are left in for Europe as is many other countries. This has been shown by recent studies by both Jonathan Zittrain and Benjamin Edelman and pose an issue when performing analysis as the analysis itself is irrelevant unless you take into account geo-targeting.

Additional complication can be added by the fact that you can set preferences on what you want Google to return to you on a search including Google Base results for products, Maps for locations and local business searches writing any sort of automation is almost impossible. Google’s AUP and T&C’s state that any crawler or automated system is in violation of there acceptable use policy and should not be done, in this case and in tune with Google’s guidelines lets hypothesise on what obstacles you could encounter and ways in which to overcome these problems.

One way is proxied traffic for lookups to force geo-targeting to work for you and your query. It is very easy to write automation to manipulate network settings in a Windows environment forcing lookups via a proxy server in say, America. By then performing simple server side queries and utilizing the returned response from the search engine query you can obtain the listings. It’s simply a case then of iterating through the returned code to obtain the results. The easiest way for this is to load the returned query as a model or an object that can be analysed. Older software used delimiters to carve the code into an array/list of data and looked at each piece to find the given URL of a site. This however, is not accurate and should a site change its layout etc this method is rendered useless costing man-hours regular updates and delimiter checks.

So why does Google and others tailor result data and is it accurate?

There are many reasons for this but the most of all being to improve a users experience and to make the results more accurate for that individual. However even this cannot be treated as the law. Recent investigation by colleagues and me even shows that queries to Google at the same location and broadcast address, results can differ from machine to machine. “Settings and preferences” I hear you say, these machines are configured exactly the same so that is not a factor…

In Google’s case this is caused by Google’s load balancing on their network and which node you happen to hit that returns a result of this balancing act. Not every Google server does a Database lookup every time on every query, this would require a super powered database platform, these servers on the cluster cache the results to increase speed, each server holds its own temporary index and cache. Using this theory each server can return a different result, although these are often very similar, but not exact. To explain this in English here is a quick list of possible addresses at Google’s datacentre; although they do not broadcast these addresses, a simple network discovery yields these results

IP Ranges consist of 44 ranges and up to 20 broadcast IP addresses on each, this equates to 880 possible IP addresses or put another way a whole lot of possible servers even if you take into account non-server IP allocation. Now no one knows how many nodes sit behind these addresses other than Google themselves, but the possibilities are huge, want to test it for yourself take a look at http://www.seocritique.com/datacentertool/ and query for yourself. This returns a whole lot of data, all geo-targeted and all different on each lookup and server truly mind-boggling. The only way to calculate positioning is to take an average across the array, of course unless you target a node for your particular query region. Again, network discovery and IP Assignment lookups can help with this to establish the region of the range/IP or device.

So we know the network for Google, its impossible to query everything manually.

Again hypothetically automated according to Google’s anti flood would appear to be queries that hit the address with a higher frequency than 1 per 2 seconds per node. Google’s API will allow nowhere near the queries and results you need to obtain the Top 100 positioning of a domain on a phrase. So doing a query, obtaining the results by simulating a manual search, as long as it’s within these limits, will do the same job as a manual search. As there are so many nodes, you can query them all at the same time and stagger your queries per node to stay within these limits. Once data is obtained, you can analyse this to obtain an average.

What about other search engines, Live, Yahoo?

Yes the other search engines like Live and Yahoo don’t get as much usage as the giant that is Google but its worth knowing how you rank on these due to Microsoft’s ongoing development and integration with its operating systems. By default Live is the search engine of choice for Vista and other MS Operating systems and with IM clients such as Live Messenger and Yahoo Messenger both using their counterpart search engines usage is on the increase of these underdogs. Live uses a similar type of result model so the same logical process as above is still applicable but Yahoo is a completely new spin on this methodology. All Yahoo results are stepped via a Yahoo address making the analysis of the returned request useless. However, the good people of Yahoo offer a very good API to allow you to obtain the data. With their openness and willing to aid the developer development of tools and SERP’s for Yahoo is quick and easy. If only others would take the example on board.

Google’s future

Google is always changing and developing new technologies, the latest being Chrome. This is basically Google’s answer to internet explorer, breaking into the browser market or simply broadening horizons you make the choice, but one thing is for sure if Microsoft make Live the default search engine on Internet Explorer you can bet Google is the default on Chrome….

Final thought….

Of course, all this is hypothetical but it offers answers to some of the questions by SEO (Search Engine Optimisation) professionals on how to illustrate the result/benefit of SEO and organic targeted marketing. Also, it opens new and exciting question about the industry, its direction and how it continues to evolve…

Labels: , ,

Friday, October 17, 2008

Java Script dynamic Title

This javascript causes the message in the title bar to change every 10 seconds. 

javascript code :


<!-- Begin
function settitle() {
var a = "You can find every thing you need here. ";
var b = "Best collection of scripts";
var c = "Easy to use through cut & paste";
var t = new Date();
s = t.getSeconds();
if (s == 10) {
document.title = a;}
else if (s == 20) {
document.title = b;}
else if (s == 30) {
document.title = c;}
else if (s == 40) {
document.title = a;}
else if (s == 50) {
document.title = b;}
else if (s == 00) {
document.title = c;}
setTimeout("settitle()", 1000);
// End -->

Html code :
Click&nbsp;<input type="button" onClick="settitle()" value="Start">

Labels: ,

Unobtrusive JavaScript Dynamic Clock

In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in..

Step 1: The JavaScript

Place the following code into a JavaScript file called “xClock.js” (or whatever) and upload to your server:

// Unobtrusive JavaScript Dynamic Clock
// http://perishablepress.com/press/2008/03/04/unobtrusive-javascript-dynamic-clock/

function xClock() {
xC = new Date;
xV = vClock(xC.getHours()) + ":" + vClock(xC.getMinutes()) + ":" + vClock(xC.getSeconds());
document.getElementById("xClock").innerHTML = xV;
setTimeout("xClock()", 1000);
function vClock(v) {
return (v > 9) ? "" + v : "0" + v;

// addLoadEvent @ http://simonwillison.net/2004/May/26/addLoadEvent/

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {

The first portion of the code comprises the dynamic clock, while the second portion is an extremely useful “addLoadEvent” function provided by Simon Willison. After the web page has loaded, the addLoadEvent function will execute the xClock function. Next, let’s add some markup..

Step 2: The Markup

This specifics of this step will vary depending on your desired page layout, but essentially we want to create an empty <span> or <div> (or whatever) and give it an id="xClock", like so:

<span id="xClock"></span> will output this: (after completion of step #3)

Simply place an empty <span> with an id="xClock" wherever you would like the dynamic clock to be displayed. For example, you could place the target element in your sidebar using something similar to the following:

<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span></h4>

This code does a couple of things. In the first line, we begin by wrapping the clock output in warm & fuzzy <h4> heading. We then use PHP to echo the date, which is formatted as “Weekday, Month Day, Year”. The date information is then proceeded by the required element for the dynamic xClock itself (i.e., <span id="xClock"></span>). The end result would present todays date and current time as:

Tuesday, March 4, 2008 ~

Of course, as completely unobtrusive code, the xClock functionality degrades gracefully when JavaScript is unavailable — the clock simply disappears! This is why echoing the date via PHP is good idea. It ensures that some chronological information is displayed even when the dynamic clock is unavailable. Of course, if you wanted to get really fancy, you could use a little <noscript> action to echo a static instance of the hour, minute and second that the page was created. Adding this to our previous example, we get:

<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span>
<noscript><?php echo date("h:i:s", time(); ?></noscript></h4>

..which, when JavaScript is unavailable, will output the following static date and time:

Tuesday, March 4, 2008 ~ 11:33:07

The only difference between this non-JS output and the previous, JS-enabled output is the dynamic property of the clock. Not too shabby!

Step 3: Call the Script

Finally, we need to call the xClock.js script itself by placing the following element into the <head> or footer section of your document:

<script src="http://domain.tld/js/xClock.js" type="text/javascript" ></script>

Once this is in place, load the target page in a browser and check that everything is working. If everything went according to plan, your site should now be sporting a new dynamic clock for all the world to see. You may also want to disable JavaScript in your browser and check the formatting of the static timestamp. If needed, it is also possible to adjust the default “timeout” setting, which is currently set at 1000 ms. With a little imagination, the layout/design possibilities for adding a sense of time to your blog are endless!

via :perishablepress

Labels: ,

Free CSS Menus

Exploding Boy offers free CSS navigation menus that are created using the Sliding Doors technique. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.







CSS Play For those who use this on a personal web site a link back to CSSplay is required. If you are using this on a commercial web site then email for permission.

  • A drop-down theme by CSS Play is a variation on the CSS only drop-down menu system. This works in IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Safari though not Mac IE5.x. It does not have the extra sublevel items but these can easily be added.


  • CSS only dropdown menu is an example of a flexible width top level list that expands to fit the text.
    It has a fixed height and uses a background image that stretches the full width of the outer div, in this case 750px, and a background div in each top level link to mark the right hand edge of the link.




  • CSS only flyout menu with transparency works in Internet Explorer, Firefox and Opera. The semi-transparency is done using a background png image for Firefox and Opera 9 (which supports png transparency) and IE’s own transparency filter.


  • CSS only vertical sliding menu does require that all the sublevel lists are the same height irrespective of the number of submenu items. If they were different heights than the top level items would jump around with no control as each top level was selected. It works in IE6, Firefox, Opera 9, can be made to work in IE5.5 with a couple of hacks.


  • Professional centered sliding doors dropline menu The top level links use the ’sliding doors’ technique so that they can accommodate any length text (within reason) and are centered in the menu. The drop line links use changing background images, can have text of any length and are also centered in the menu.


ADxMenu 4 menu examples at aPlus: horizontal (top to bottom and bottom to top), and vertical (left to right and right to left)

Bulletproof Slants consist of the following ingredients: lean, valid markup, CSS-based design, consideration for accessibility and flexibility.

CSS: Double Lists This experiment uses some simple mark-up and a small amount of CSS to cleverly create a single, semantically proper, unordered list appearing in two columns.

CSS Tabs without using any images or hacks and with as little CSS as possible.

CSS tabs - an example of CSS-driven tabs.

Listamatic : various vertical and horizontal lists.

Listamatic2 : CSS background images for bullets, simple nested rollover list, CSS3 Vertigo Fun, subtle box list, indented list, parallel lines, blue boxes, classic greys, pop-open list, borders and indents, purple list, slate and steel buttons.

Light Weight Multi Level Menu : is a multi level light weight drop down menu example based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart.

CSS menus gallery is a gallery of CSS web menus created with CSS style sheets and without tables.

Intelligent Menus : using some very simple PHP and CSS you can create intelligent menus that are easy to use and maintain.

Multiple Column Lists :CSS3 has the promise of allowing text to flow into multiple columns.


Bookend Lists: Using CSS to Float a Masthead - an article that shows how to create a "bookend" look with elements on either end of a box using CSS-styled lists. This CSS-layout technique saves a significant amount of HTML code over table-based techniques. Tests with working code yielded savings in page size ranging from 30% overall to over 73% for the HTML code alone.

Sliding Doors of CSS by Douglas Bowman

Centered Tabs with CSS by Ethan Marcotte - add a bit more flexibility, place your navigation in the center.

cssMenus - 4 Level Deep List Menu. The idea was borrowed from the Suckerfish Dropdowns.

CSS and Round Corners build accessible menu tabs, created through HTML and CSS — not an tag in sight.

CSS-Based Tabbed Menu a simple method of implementing a CSS-based tabbed menu. The basic features of this method are: it uses a graphical background, tab width automatically adjusts to text width, handles text resizing elegantly, no meaningless HTML elements required.

CSS Swag: Multi-Column Lists by Paul Novitski at A List Apart. Find out how to produce a single, semantically logical ordered list that wraps into vertical columns.

CSS Tabs - the page demonstrates a pure CSS method to generate a ‘Tab’ style interface. The code is very simple, the CSS is embedded to let you see ‘under the hood’. Most of the action occurs in the list styling. If the tabs don’t ‘align’ properly to the top of the box, alter the font-size and line-height of the li element to suit. Changing font will require finding the ’sweet’ spot at which different browsers render identically.

Definition lists What are definition lists? When are they appropriate? And how to style them to look like tables, image galleries, calendar of events and more.

How to Style a Definition List with CSS - a tutorial that demonstrates how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.

Drop-Down Menus, Horizontal Style how to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer.

CSS tabs with Submenus - is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists. The list markup doesn’t change from page to page. The highlighted tab is determined from the ID of the body element, not by changing the IDs of each tab.

Multiple Column Lists method to make a list display as multiple columns of list items, rather than as a single column or horizontal row. This can be a big space saver in some page designs, while still retaining the vertical ordering of a list. This new method gives the ability to provide screen readers with a source order that runs down each column instead of across each row.

How to Style an Unordered List with CSS the article shows how to style an unordered navigation list using CSS, and how to add a pop-up information box for each link item so that your visitors will get an indication of the content for the page link.

How to Use CSS to Position Horizontal Unordered Lists - a way to style your horizontal unordered list so that it can be easily positioned where you want it.

A Navbar Using Lists : how to build your navbar as a collection of

elements with a million different class attributes.

Rounding Tab Corners how to round the corners on a "navbar" created from an unordered list.

Tabtastic provides a library that is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.

via : technotarget

Labels: ,

Thursday, October 16, 2008

Basic Select Menus Modifications

Select menus, also known as drop down menus, are one of the elements in HTML that most people don’t modify at all. I know that some select menus can be confusing as they get longer. One of the things that I like to do is to alternate the colors of the selections. This gives the select element a little bit of style especially when you have more then one choice showing, and can be use as color combination to blend into your site’s theme.

This modification is very simple, and can be very effective. We are going to apply this to a select element that has more then one option showing to take advantage of the effect. If you only have one option showing, as in a true drop down menu, then the change is not as effective. If you don’t remember how to show more then one option in a select element, just add a size attribute inside the select element’s opening tags. Here is how the select element should appear.

<select size=”4″>

<option class=”odd”>Option 1</option>

<option class=”even”>Option 2</option>

<option class=”odd”>Option 3</option>

<option class=”even”>Option 4</option>

<option class=”odd”>Option 5</option>

<option class=”even”>Option 6</option>


The code should look similar to you if you have used the select tag before, only thing that we have done to this HTML code is to add a class attribute to each of the options, and set a size of five to the select menu. We see that the classes alternate as either odd or even. Now all we need to do is create the CSS to apply to the classes.

The CSS will be basic, just like the HTML. For the even class we are going to have a gray background with a white foreground color, and the opposite for the odd classes.


select .even{

background-color: gray;

color: white;


select .odd {

background-color: white;

color: gray;


That is all we need. We now have a more professional looking select menu, which can be changed to blend into the style of our website. You can view the example above, and another example that uses other alternating colors here.

Labels: ,

Wednesday, October 15, 2008

Simple text effect using the mask

See this lesson and learn how to create a cool text effect, using the mask and alpha in flash. You will also learn how to design a text, how to animate it and more. To create this lesson, you don’t have to use action script.This lesson is so simple to create, but in the same time so useful.

Step 1

Create a new flash document. Choose Modify > Document (Shortcut key: Ctrl+J) and set the width of your document to 200 pixels and the height to 70 pixels. Select #131313 as background color. Set your Flash movie’s frame rate to 24 and click ok.

Step 2

Take the Rectangle Too (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #D22C00 and draw a “rectangle” about 160×25px. See the picture below.

Step 3

While the rectangle is still selected, go to the Align Panel (Ctrl+K) and do the following.

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Now you have aligned a rectangle with the background.

Step 4

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field
2. Select a Tw Cen MT Condensed Extra Bold font,
3. Choose 20 as font size and bold it.
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.

Then, type any text on the rectangle. See the picture below.

Step 5

Double click on layer 1 to rename its name in rectangle. After that, take the Selection Tool (V), select only the text and press Ctrl+X key (Cut). Then, create a new layer above the rectangle layer and name it text. Select it and press Ctrl+Shift+V key (Paste in Place).

Step 6

Create again a new layer above the rectangle layer and name it effect. Then, take the Rectangle Tool (R) again. In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #E99A85 and draw a “rectangle” about 60×80px and place it on the position like it is shown on the picture below.

Step 7

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Movie Clip Symbol.

Step 8

After that, while the new made Movie Clip (rectangle) is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 92%. See the picture below.

Step 9

Take the Free Transform Tool (Q), select the rectangle and do the following:

Step 10

Click on frame 20 and press F6 key. After that, move the rectangle on the right side using the mouse or by arrows key. See the picture below.

Step 11

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 12

Go back on frame 1 and press Ctrl+C key (Copy) to copy a rectangle.

Step 13

After that, create a new layer above the effect layer and below the text layer and name it effect 1. See the picture below.

Then, click on frame 15, press F6 key (Keyframe) and after that Ctrl+Shift+V key (Paste in Place).

Step 14

Take again the Free Transform Tool (Q), select the rectangle that you have just copied, press and hold down Shift key and do the following:

Step 15

After that, duplicate the rectangle that you just decreased (Take the Selection Tool (V), press and hold down Alt+Shift key, select the rectangle and duplicate it) like it is shown on the picture below.

Step 16

Click on frame 35 and press F6 key. Then, place the rectangles that you just copied on the right side. See the picture below.

Step 17

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 18

Create a new layer above the effect 1 layer and name it mask.

Step 19

Go back on the rectangle layer, take the Selection Tool (V) and select the rectangle. Then, press Ctrl+C key (Copy), click on the first frame of layer mask and press Ctrl+Shift+V key (Paste in Place).

Step 20

Select mask area layer and convert it to a mask by right-clicking on the mask area layer and selecting Mask. See the picture below.

Step 21

Take the Selection Tool (V) and using the drag and drop technique, move the effect layer above the effect 1 layer. See the picture below.

Test your movie (Ctrl+Enter).

We're done!


Download example

via :flashperfection

Labels: , ,