This collection of amazing 3D characters is especially for you. I hope that you will get a real pleasure viewing these creative works. Let’s start!

* * *

Title: Little Cute Girl
Author: Eduardo Martin Julve
Software: Maya, mental ray, Photoshop
Portfolio here

This cute little girl is having fun and it is seen from her face that is shining. Her face expression, bright color scheme and the background of the picture are definitely great. Nice composition!

* * *

Title: Jack Stern
Author: Patrick Beaulieu
Software: 3ds max, Photoshop
Portfolio here

This stern guy knows exactly what he wants and knows precisely how to achieve it. He is brave, self-confident and half seas over. This image is a little bit ironic in its tone and so cute. I like it!

* * *

Title: Adorable Alien
Author: Michael Dashow
Software: 3ds max, Photoshop
Portfolio here

It is so interesting to look at this image in details. It is full of good humor and positive mood. The funny characters that are pictured here make the image so expressive and adorable. All the details are amazing.

* * *

Title: Max and Milton
Author: Jason Baldwin
Software: Maya
Portfolio here

They are so different: thin and fat, tall and short, but together they create a cute image. The modelling of these 3D characters is perfect and I like the way in which the creator has rendered them. The great work full of humour and positive mood!

* * *

Title: A Bee
Author: Smoke
Portfolio here

So nice 3D model of a bee that is perfectly rendered by the author. It looks like the character from some funny book for children. Amazing illustration!

* * *

Title: Microworld
Author: Eugene Dranov
Software: 3ds max, Photoshop, VRay
Portfolio here

Have you ever seen such a wonderful scenery? This very composition is definitely great: nice and so lovely characters, fresh colors and bright idea. Original and nice work!

* * *

Title: Fairy Tales
Author: Kei Acedera
Software: Painter, Photoshop
Portfolio here

I like this extremely positive image, full of charming creatures and such a splendid mood. This evening wood, fairy on the mushroom with captivating book and all the funny characters around her are adorable. What a nice image!

* * *

Title: Looking for Love
Author: Eric Provan
Software: Maya, mental ray, Photoshop, ZBrush
Portfolio here

You will be a little bit puzzled when you look at this picture. Yeah, it can’t evoke a smile, it looks more like a creepy one. But still, it is here for the maturity of its author and perfectly done 3D characters. The absent expression of the woman’s face, the serpent in front of her and this cute little pet – all these characters are awesome. The incredible work!

* * *

Title: Sausage Dog
Author: Michael van den Bosch
Software: Lightwave 3D
Portfolio here

I have never seen such a bright 3D character. It would be my favorite one! This dog is as long as dachshund, but much more pretty. It’s really a sausage dog!

* * *

Title: Thought Guy! Yip Yip Yip
Author: Jesse Winchester Schmidt
Software: Photoshop
Portfolio here

This image will certainly make you laugh. This amazing style is really cool! Two dogs are depicted in a funny opposition: the little monster and the big one, full of dignity.

* * *

Title: Monkey Character
Author: Michael van den Bosch
Software: Lightwave 3D, Maya, ZBrush
Portfolio here

The author has brilliantly rendered the monkey character in movement. It seems that he has done his best and depicted the main figure of the image quite well. Well-done background, great colors and cute character!

* * *

Title: Gorilla’s Day
Author: Luis Arizaga Rico
Software: 3ds max, mental ray, Photoshop
Portfolio here

What a nice character with so cute face expression and cool posture. The environment and the whole tone of the image are great. Amazing 3D jungle animal!

* * *

Title: 3D Model
Author: Renderboy
Software: 3Ds Max 8+, VRay 1.5 RC3
Portfolio here

I am not sure about the nature of this cute creature, but I definitely like the way in which it is presented by the author. Nice work!

* * *

Title: Banana Dog
Author: Smoke
Software: 3Ds Max 8+, VRay 1.5 RC3
Portfolio here

The author has succeeded in the rendering of this funny banana dog. You will never find this one in the reality, but it is so amusing. Everything is so cute about this image!

* * *

If you want more interesting posts, subscribe to Blog.Templates.com and find plenty of useful stuff.

* * *

Title: Send
Author: Joerg Warda
Software: Painter, Photoshop
Portfolio here

In the silence of the desolated church, in the semidarkness of the stained glass window the divine beauty of the girl is added with the weird shapes of splendid wings. In this pouring light the girl gains the illusion of the fascinating bronze sculpture – the sculpture that is cold only from the first sight, but is done from flesh and blood.

* * *

Title: Bloodstone
Author: Lauren K.Cannon
Software: Photoshop
Portfolio here

This captivating seductive image of a weird girl that is tippy-toeing in scarlet liquid blood is awesome. She is wrapped into the elusive cloth that is merging with blood and wears a scull on her head. She teeters awkwardly and it seems that she will fall the next moment. Sensitive and fascinating pallette.

* * *

Title: Dream
Author: Yamato
The image is take from Fantasyartdesign.com

The charming piece of painting. The splendid Chinese motives that are to be displayed on the wall create a beautiful panoramic view. These shadows create the illusion of tattoos on the graceful figure of the girl standing close to the wall. Delicate colors and so intriguing atmosphere!

* * *

Title: Dancer
Author: Andres Perez
Software: Painter, Photoshop
Portfolio here

To be a good dancer you have to feel the music with the slightest stirs of your being, let it flow through your soul. Only when you feel each beat of it and your body is completely relaxed the music leads you, you dip yourself in the stirring rhythms and nothing can get in your way.

* * *

Title: Birth
Author: Vivien Hulbert
Software: Photoshop
Portfolio here

The author with the gracile technique renders the birth of beauty in her work. The magnificent inflections of the woman’s figure that is postured against the silence waters of the lost lake appeal to our sense of beauty, to aesthetic feelings. The awesome piece of art!

* * *

Title: Evening Mood
Author: Lauren K.Cannon
Software: Painter, Photoshop
Portfolio here

This heroine looks like the one who has descendent from the canvas of the notorious Flemish artist. The unsurpassed schematic rendering of the tone and the mood of a woman is done with the proper arrangement of tints and the shadows. The exquisite piece of work.

* * *

Title: Honey Fairy
Author: Rusovich Helen
Software: Painter
Portfolio here

The sparkling image that is as sweet as honey. The soft warm tints suit eminently the idea of this brilliant painting. The luxuries representing of the female beauty is done with maturity and emotion. This woman looks like the one from the sweet dreams that occur during velvet summer nights.

* * *

Title: Mhoiishi
Author: Lauren K.Cannon
Software: Photoshop
Portfolio here

This refinement style of this illustration celebrates the gracefulness of a woman and her silence beauty. To obtain the understanding of this very work you don’t need a lot of time, just observe its brilliant style and the fluent technique and you will certainly admire it.

* * *

Title: Mythologic Women
Author: Dani Garcia
Software: 3ds max, Brazil r/s
Portfolio here

This fascinating illustration is created in high-spirited tone. The light seems to come from this illustration: from the blazing beam of light in the hands of the girl, from her candid breath-taking wings and the feathers that are flying everywhere. Any harsh strokes, anything that can lay in ashes the whole integrity of this image.

* * *

Title: Soothe/eucatastrophe
Author: Jihoon Hong
Software: Painter, Photoshop
Portfolio here

The flight of angels can come to an end unexpectedly. The heavens are no more the synonym for a freedom and the light, the earth becomes the grave for such serene souls. The wings are broken and torn to ribbons and there is no way back. The world is cruel sometimes, but such are the rules of our existence.

* * *

Title: Wall
Author: Henning Ludvigsen
Software: Photoshop
Portfolio here

When you come to the understanding of the fact that you can not do anything to make the things come true, in hopelessness you feel yourself at the abyss of despair. Nothing can charm away your grief and the is no way out. The only thing that is left – to scratch in rage the cold wall with the hope that someone will hear your silent cry.

* * *

Title: Unfallen
Author: Lauren K.Cannon
Software: Photoshop
Portfolio here

In the twilight of old and thick-set woods, in the sullen mists of sloughs of woods emerges the spirit of unquiet soul that is lost and can not find the right way to heaven. Who knows, perhaps the stairway to light was broken when the time to get there came and this soul was left in the sublunar realm.

* * *

Title: The Chalice
Author: Aly Fell
Software: Photoshop
Portfolio here

This powerful figure of a woman reminds me some goddess. Her sublime beauty, proud bearing and imperious glance of cold eyes are astonishing. Her posture, appearance, everything speaks for the inner strength and the aptitude for domination.

* * *

If you want more interesting posts, subscribe to Blog.Templates.com and find plenty of useful stuff.

In case if you’ve missed the first part of the tutorial, these links are for you: Creating a Website Design from Scratch: Part I and Part II and Create a Flash Website on the Basis of a Pre-made Design: Part 1.
You may also get the source files of this design absolutely free of charge here.

* * *

Stage 3. Creation of the animated menu. Animation of content changing and animation of elements appearance.

Step 3.1. Import only one menu button from Photoshop into Flash and place it according to the underlayer. (As you have already know, underlayer is a bitmap design created in Photoshop and saved as one image. Later on we will use it in Flash as a reference design.)

Step 3.2. Then we create the animation for the menu buttons as we did for the link “View All” described in the first part of the tutorial. Please, see steps 2.3 – 2.16.

Step 3.3. With the help of a Selection Tool double click on the menu button to get inside of the movie clip. Then select the button.
It is shown on the screen shot, in the Properties panel that the button is selected.

Step 3.4. Go to Actions > Actions Button and type this script there:
on (rollOver) {
this.gotoAndPlay(”s1″);
}
on (releaseOutside, rollOut) {
this.gotoAndPlay(”s2″);
}
on (release) {
if (_root.anim == true) {
b1.useHandCursor = 0;
_root["but_s"+_root.link].gotoAndPlay(”s2″);
_root.link = 2;
_root["but_s"+_root.link].gotoAndPlay(”s1″);
_root["but_s"+_root.link].b1.useHandCursor = 1;
_root.play();
_root.scroller.gotoAndStop(2);
}
}

But keep in mind that in the line “_root.link = 2;” 2 is variable. It means that the ‘Company’ button links to the second page of the site.

Step 3.5. Go to Edit > Duplicate or press Ctrl + D and duplicate the button five times according to our design. But you may create as many buttons as you wish. Now we have five buttons with the same name and the same properties.
Then select the frame with the button, right click and choose ‘Distribute to Layers’.
The next thing we should do is to arrange menu buttons according to the underlayer.

Step 3.6. Select the second button, right click on it and choose ‘Duplicate Symbol’.

Step 3.7. The Duplicate Symbol dialog box will appear.

Step 3.8. The same actions should be done for the rest of the buttons.

Step 3.9. Then we should create labels for each button. Please, pay attention to the fact that the first button (Company) links to the second subpage, the second button (Services) links to the third subpage and so forth. Reasoning from this, we create labels.
So, select the first button and go to the Properties panel. Note, symbol should be set to Movie Clip. Type below it: “but2″. On the Timeline the red label will appear.

Perform the same actions for the rest of the buttons. Type for the second button “but3″, for the third – “but4″, for the forth – “but5″, for the fifth – “but6″.

Step 3.10. Now it’s time to rename the menu buttons according to the design.
For this purpose with the help of the Selection Tool select the second button. Double click on it to get inside of the Movie Clip.
Then select frame 1 (with the text), right click on it and choose ‘Duplicate Symbol’.
Double click again to get inside of the duplicated symbol.

With the help of the Text Tool write a new button name. You won’t have any problems with fonts and fonts size because this button is a copy of the first one.

Step 3.11. Go back on the level above. Select the next keyframe of the Movie Clip. In the Properties panel press ‘Swap’. The dialog box will appear. Change the current symbol on the duplicated one.

The same should be done for the other keyframes of the Movie Clip.

Step 3.12. Go back to the main scene. And repeat the steps 3.10 and 3.11 for the other buttons.
now each menu button has its own name.

Step 3.13. Now we should change the variables in the script for each button. For this purpose you need to get inside of the Movie Clip for the second button (Services): Actions > Actions Script: _root.link = 3;
For the third button (Solutions): _root.link = 4;
For the forth button (Partners): _root.link = 5;
For the fifth button (Contacts): _root.link = 6;

The button variable is a number of page it links to.

Step 3.14. Run a Test Movie to view how the menu works.

Step 3.15. Animation of elements appearance
Let’s start from the background.
3.15.1. So, go to the the main scene and select the background layer. On the Timeline drag the first frame to the frame 10. All frames before frame 10 will be for “loading section”.
3.15.2. Then choose frame 40 and insert keyframe.
3.15.3. Select frame 10, go to the Properties panel and set Color to ‘Alpha’.
3.15.4. then by right clicking create Motion Tween.

Step 3.16. The second way of creating the animation: using the workspace borders.
3.16.1. Select layer with the logo image. Again drag the first frame to the frame 15.
3.16.2. Frame 30 > Insert Keyframe.
3.16.3. Frame 15. Select the logo. With the help of ‘Shift’ and ‘up and down’ keys drag the logo over the workspace borders.
3.16.4. Frame 15 > Create Motion Tween.

Step 3.17. Company name, yellow ellipse and house image appear in the same way as the logo.

Step 3.18. The third way of creating the animation: with the help of a mask.
The rope between two holes appears with the help of a mask.
3.18.1. Define the layer with the rope. And create a new layer above it.
3.18.2. Frame 30 > Insert Blank Keyframe.
3.18.3. With the help of the Rectangle Tool create a rectangle as on the screen shot.

3.18.4. Then using the Selection Tool select this rectangle and convert it to symbol.

Step 3.19. While the layer with the rectangle is still selected, right click on it and choose ‘Mask’. Now on the Timeline you see that two layers (the rope layer and the mask) are locked. Unlock them.

Step 3.20. Select the mask layer. Frame 15 > Insert Keyframe. Frame 30 > with the help of ‘Shift’ and up and down keys move the mask as it’s shown on the screen shot.

Step 3.21. Frame 30 > Create Motion Tween.

Step 3.22. Run a Test Movie to view the result.

Step 3.23. Animation of content changing.
When all design elements has appeared, the animation plays and stops on the frame 96 (on frame 96 we typed ‘Stop’ in the Actions script window).
The next thing we are doing is creating a new layer. On frame 96 we insert a blank keyframe. Then we go to Actions and in the script window we type:
_root.anim = true;

root.anim is a variable standing for menu buttons. In our design it is unnecessary, but if you want to place menu buttons on each page of the site, this script is obligatory.

Step 3.24. Insert the same script for the frame 97.

Step 3.25. On a new layer select the frame 74 > Insert Blank Keyframe. Then go to the Properties panel and create a label. Just type Frame: s1.

Step 3.26. Frame 121 > Insert Blank Keyframe. Then go to the Properties panel and create a label. Type Frame: s2.
The same should be done for the frames:
216 – Frame: s3;
315 – Frame: s4;
415 – Frame: s5;
518 – Frame: s6.

Step 3.27. Insert the actions script below for the frames: 120, 215, 314, 414, 517, 615.

label=”s” + _root.link;
gotoAndPlay(label);

So, you see that the variable label takes on a value of “s” + _root.link,
where “s” – is a frame label, and “_root.link” – is a variable denoting the number of page.
This script denotes the following: when you click on ‘Services’ button for example, the animation begins to play from the place where root.link is equal to 3.

Step 3.28. Insert this script “_root.anim = true;” for the frames: 96, 171, 266, 366, 465, 567.

Step 3.29. Insert this script “_root.anim = false;” for the frames: 97, 172, 267, 367, 466, 568.

Step 3.30. frame 97 > Insert Keyframe on the all layers of the elements that will be animated. (except the logo, company name, slogan and footer).
Then choose frame 112 for example > Insert Keyframe. While this frame is still selected, move the design elements over the workspace borders (Shift + up/down keys).

Step 3.31. Starting with the s2 label the new subpage will appear.
For all other pages the animation should be created in the same way as for the page described above.

Step 3.32. At the end run a Test Movie to view what you’ve got.

* * *
And finally… You may download the source files of this website template here.

I hope this tutorial come in handy to you and will help you create a unique and attractive Flash website. As the Shaolin saying goes: “One must face much hardship before he succeeds”. So we wish you persistence and strength to reach your aim!

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.

* * *
This tutorial is the sequel to the first one that consists of two parts: “Creating a Website Design from Scratch” and “Creating a Website Design from Scratch: Part II“. You may also get the source files of this design absolutely free of charge here.

For you convenience we divided this tutorial into three main stages:

1. Working with .PSD files. Importation of design element from Photoshop into Flash. Preparing for creating an animation.
2. Creating sub pages (here we also will concentrate on the creation of the animated buttons or links; Motion Tween).
3. Creation of the animated menu. Animation of content changing and animation of elements appearance.

During all this time we will be using two programs simultaneously: Adobe Photoshop and Macromedia Flash 8. So, be ready to switch between them.

Stage 1. Working with .PSD files. Import of initial materials into Flash. Preparing for creating an animation.

Step 1.1. Open a pre-made design in Photoshop. If you have read the first two parts of this tutorial and replicated all steps described there, you should have a design ready to be animated. So, open the first .PSD file.

Step 1.2. Creating an underlayer. Underlayer is a bitmap design created in Photoshop and saved as one image. Later on we will use it in Flash as a reference design.

1.2.1. Now choose Select > All (or Ctrl + A)
1.2.2. Then choose Edit > Copy Merged.
1.2.3. Create new Photoshop file (Ctrl + N) with transparent background and paste the selected elements (Ctrl + V)
The underlayer has been created.

Step 1.3. Select all. Then choose File > Save for Web and Devices.

Step 1.4. Open Macromedia Flash 8. Choose now File > Import > Import to Stage and import just saved files into a flash stage.

Step 1.5. Click on the Properties > Size or press Ctrl+J key on the keyboard. Set the width and height of your document to 800 pixels. Select white color as background color. Set your Flash movie’s frame rate to 40 and click ok.

Step 1.6. While the image is still selected, go to the Align Panel (Ctrl+K) and do the following:
1.6.1. Make sure that the Align/Distribute to Stage button is turned on,
1.6.2. Click on the Align horizontal center button,
1.6.3. Click the Align vertical center button.

Step 1.7. Go back to Photoshop document. The design for your web site still should be opened there. Right now it’s time to save each separate design element for web. Let’s start form the house image.
1.7.1. First of all merge all layers of the image into one group,
1.7.2. Then select the group, choose Edit > Copy Merged.
1.7.3. Create new Photoshop file (Ctrl + N) with transparent background and paste the selected elements (Ctrl + V).
1.7.4. Add 2 pixels to the image weight and height (Image > Canvas Size or Alt + Ctrl + C). Adding 2 pixels makes the edges more accurate and smoother.
1.7.5. Save for web. Press File > Save for Web and Devices.

All these actions should be repeated for all other design elements (ellipse, the rope, background layer and logo disregarding only the text and menu buttons).

Then go back to Macromedia Flash, choose Import > Import to Stage. When it’s done, all necessary design elements will appear in the Library (on the right).
The Flash stage will be looking like this:

Step 1.8. Select all design elements and by mouse right clicking choose ‘Distribute to Layers’.

Step 1.9. In the Timeline section select the underlayer. Right click and choose ‘Guide’. Then set a frame to 500. Right click again > Insert Frame.

Step 1.10. Insert a new layer (Insert > Timeline > Layer). When the new layer is created, select it and right click on frame 96. Choose ‘Insert Blank Keyframe’.

Step 1.11. Then go to Actions – Frame. The script window will open. Type there: “stop();” – without quotation marks.

Step 1.12. Then it’s time to define the quality of our images. Go to the Library, right click on the image there, select ‘Properties’. Bitmap Properties window will appear. Uncheck ‘Allow Smoothing’. Choose compression Lossless (PNG/GIF) – for images and Photo (JPEG) – for photographs.

Step 1.13. Now we reached the most complicated part of working with Flash. We need to arrange all design elements according to the underlayer that actually represents our design. Flash developers says that this work resembles jeweller’s art, because the accuracy and neatness are above all here. (Note: for your convenience you may change frames of the elements in the Timeline).
The screen shot presents the design with already arranged elements.

Step 1.14. Next thing we are doing is copying text of the header and footer. For this purpose we insert a new layer for the text (Insert > Timeline > Layer). Then copy the text from Photoshop document and paste it into Macromedia Flash. You may switch between uppercase and lowercase manually.

In our case the text properties are the following: the Font Family: Myriad, Font Style: Roman, Font Size: 30.

In Macromedia Flash go to the Properties Panel (Ctrl+F3) below the stage and set letter spacing to -08, choose Text Type: Static Text, Font rendering method: Anti-alias animation, Color: #202020. Please, note the letter spacing index is individual. Adjust this index according to the underlayer (the actual design).

Step 1.15. Creating Movie Clip. Select the background layer, by right clicking choose ‘Convert to Symbol’ or press F8 key to convert this layer into a Movie Clip Symbol.

Step 1.16. Repeat the same actions to the other design elements that will be animated.

Step 1.17. Creating mask. Select the ellipse layer. Create a new layer above the ellipse layer. With the help of Rectangle Tool draw a rectangle along the design contours. The rounded edges are created with the help of a mouse and ‘up and down’ keys.
Then right click on this rectangular and choose ‘Mask’.

Stage 2. Creating sub pages. Creating animated buttons or links. Motion Tween.

Step 2.1. Now we should define frames for subpages on the Timeline. For this purpose create a new layer, right click on frame 96 and choose ‘Insert Blank Keyframe’. Then go to Actions and in the script window type: stop();
The same should be done for the frames 171 and 266. These stop frames were created for our subpages, the animation will play and stop on the stated frames (96, 171, 266).

Step 2.2. Frame 96 was created for our first subpage. Right click frame 96 and choose ‘Convert to Keyframe’.
Now we should import subpage design into Flash. This should be done in the same way as described above.

While the frame 96 is still selected, choose Import > Import to Stage and open the underlayer of the first subpage that was previously created in Photoshop.

Import all design elements of the subpage from Photoshop into Flash (as in steps 1.7 and 1.8).

Select all design elements and by mouse right clicking choose ‘Distribute to Layers’.
Then set the quality of the images, and arrange all design elements according to the underlayer that actually represents subpage design. (See steps 1.12 and 1.13)

Step 2.3. Creating roll-over effect for buttons or web links.

Make sure that frame 96 is still selected. On a new layer with the help of Rectangle Tool create a rectangle on the place where the button should be. This rectangle will be a clicking area for the button. Right click on it and choose ‘Convert to Symbol’ or press F8 key to convert this layer into a Movie Clip Symbol.

Step 2.4. Choose a Selection Tool (V). Then double click on this rectangle to get inside a movie clip.

Step 2.5. As soon as the action is completed, right click the rectangle again > Covert to Symbol > and convert it into a button symbol (Type: Button).

Step 2.6. Choose Selection Tool and double click on this rectangle once again. Now we are inside the button. In the Timeline the button stages will appear: Up | Over | Down | Hit. With the help of mouse set it from Up to Hit.
When everything is completed, go back inside the movie clip.

Step 2.7. Create new layer. Choose frame 27 for both layers > Insert Frame.
On this new layer choose frame 1, go to Actions and type: stop(); in the script window.
The same should be done for the frame 15.

Step 2.7. Choose frame 2. Go to Properties. Type Frame: s1.

On the frame 2 the red label will appear.

Step 2.8. Choose frame 16 > Insert Blank Keyframe (by right clicking). Then go to Properties and type Frame: s2.

Step 2.9. Create a new layer and copy button text “view all” from .PSD file. While this layer is still selected, create a movie clip. (right click on the text, choose ‘Convert to Symbol’).

Step 2.10. On a new layer with the help of Rectangle Tool create a rectangle with rounded edges under the text. (The layer should be placed UNDER the text layer). Set red color as a fill color. Then create a movie clip.

Step 2.11. The next thing we are doing is making animation for the text. So, choose the text layer and frame 27 > Insert Keyframe. Then select frame 15 > Insert Keyframe. Go to Properties panel below the stage. On the right, you will see the Color menu. Select Color: Tint, White.

Step 2.12. Creating Motion Tween. Select any quantity of frames between frames 1 and 27. Then by right clicking choose ‘Create Motion Tween’.

Step 2.13. Creating animation for red rectangle. Select the rectangle layer. Choose frame 15 > Insert Keyframe. Drag the first frame to the second one.

Step 2.14. Using a Free Transform Tool transform this red rectangle into a narrow strip. Then right click > Create Motion Tween.

Step 2.15. Choose frame 27 > Insert Keyframe. Go to the Properties Panel below the stage. Select color: Alpha; Alpha amount: 0%.

Then choose any frames between 15 and 27, right click > Create Motion Tween.

Step 2.16. Take the Selection Tool (V) and click once on the clicking area (the first rectangle) to select it.

Go to the Actions panel and in the script window type this script:
on (rollOver) {
gotoAndPlay(”s1″);
}
on (releaseOutside, rollOut) {
gotoAndPlay(”s2″);
}

The process of creating animation for the button is completed now.
Let’s see what we got. Go to Control > Test Movie or press Ctrl + Enter for exporting Flash movie.

* * *
As it was mentioned in the very beginning of this tutorial, you may download the source files of this website template here.

* * *
In the next part of this tutorial you will learn how to create the animated menu, how to create animation of content changing and animation of elements appearance.
Just follow the posts of our blog not to miss interesting and useful things.

TO BE CONTINUED…

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.

1. Create a new Photoshop document with white background. Choose File => New or press “Ctrl+N”.

2. Create a rounded rectangle of proper size and color – basically any size and any color you want. The way we’re doing it is a blue rectangle (color #78c5ef).

3. Create a grey gradient with a Gradient tool and 13% opacity – now the upper part of a website background is slightly darker.

4. Then we create a yellow ellipse and by creating a mask we put the needed section of this ellipse into the rounded rectangle.

5. Apply a proper style to the ellipse layer: a simple 3px Stroke and the Outer Glow like this:

6. Now we draw the lace line. The line with two circles is going to be over the menu buttons and will be something that actually laces this “digital book design”. The lace holes are simple – the circle itself (ellipse shape tool) plus inner shadow.

7. Now the rope itself. The rope line is done by drawing an ellipse and cutting the rest from it (with the help of a mask) leaving only the curve you need.

Then change its color and put it into where it belongs – between the two holes.

8. Add header and footer text (plus a logo if you want). This whole thing is done with a Horizontal Type Tool.

Well… if you have a ready Home page .PSD file, you don’t have to perform all these all over again after doing it all with our first tutorial. Just open the Home page PSD file, then delete all unnecessary elements leaving only the header, footer, two holes with the rope line and yellow ellipse with the applied styles to the ellipse layer: a simple 3px Stroke and the Outer Glow.

Now we set the foreground color. You may select any color you want. In our case it is blue (#78c5ef). Then mark the proper layer as active, and with the help of a Paint Bucket Tool fill it up with the selected color.

Then with the help of the Move Tool drag this ellipse to the desired place.

9. The next step is to create an additional (extra) navigation in the top right corner. For this purpose you should create a new layer. With the help of a Pencil Tool (Master Diameter – 1 px) and Horizontal Type Tool (T) you may easily draw a Home Page icon, arrows and write the text.

10. It’s time to create a left text block, and there are no difficulties with it. Using a Horizontal Type Tool you may write any text and set any font and font style.

11. The next step is to create a vertical scroll bar. For this purpose we choose a Brush Tool with diameter 4px and draw a vertical white line.

Then select another color, yellow for example, and add a scroller.

12. The right text block is created in a similar way that the left one.

13. Next thing we are doing is creating two white squares for images. So, create a new layer, then by using a Rectangular Marquee Tool select a place for an image. Set white as a foreground color and with the help of a Pain Bucket Took paint this square over.

14. Apply a proper style to the square layer: a simple 1px Stroke and the Inner Glow like this:

15. Then duplicate this square layer and place the copy below.

16. Add an image as a new layer and put it ABOVE the square layer. Then by creating a clipping mask we place this image inside the square.

17. The same operations should be done with the second image.

18. Now it’s time to integrate the illustration element. Open the illustration PSD source file and choose layer group 5 (that’s the group that we will be integrating in this design – the one with the businessman).

19. Drag that layer to the design.

20. Place the businessman image and curves to the desired locations by linking the proper layers and moving them together. Merge the curves layers group into one layer – it will be more convenient for you to work. Link the proper layers and press Ctrl+E (or mouse right clicking and selecting Merge Group).

21. Then cut off curves parts along the left edge (Rectangular Marquee Tool + Delete).

Bravo! Your sub page is completely ready. Well done!

All other sub pages are created in the same way, and there is no need to describe the process in details because you are already familiar with this technology. Please see these additional pages below.

The only thing you should pay attention to is a contact form. Firstly we set white as a foreground color and by using Rounded Rectangle Tool we define places for contact form fields. You may create as many fields as you wish. The width and height of the fields are also up to you.

Then by using a Horizontal Type Tool we add fields names and other text.

Well, that’s it for now. But there will be more tutorials from us, we promise. The closest one will be about how to actually make a Flash website out of the .PSD designs that we have made in the first two tutorials.

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.

By the way, this is only a first part of the BIG tutorial as soon we will publish a tutorial on how to design subpages for this website and another tutorial about making a Flash website out of the design you will make. Anyways, this is truly going to be interesting and informative!

This time it is going to be a website homepage design. This particular one is going to be based on a free website template and a free illustration from Templates.com

As you see, it’s a very nice design, with bright colors and yet not overfilled with elements. One of its design features is that it’s composed as a book laced on one side.
Ready, people? We’re starting off!

1. Create a new Photoshop document with white background. Choose File => New or press “Ctrl+N”.

2. Create a rounded rectangle of proper size and color – basically any size and any color you want. The way we’re doing it is a green rectangle.

3. Create a grey gradient with a Gradient tool and 13% opacity – now the upper part of a website background is slightly darker.

4. Then we create a yellow ellipse and by creating a mask we put the needed section of this ellipse into the rounded rectangle.

5. Apply a proper style to the ellipse layer: a simple 3px Stroke and the Outer Glow like this:

6. Next thing we’re doing is creating a menu. Create menu buttons by drawing a rounded rectangle and deleting certain sections from it (select tool and then DEL button). Don’t forget to rasterize layers for that.

7. Duplicate button layers as many times as many buttons you need. Then place a vertical panel in a similar way – a rounded rectangle with a left side deleted. Menu is almost ready.

8. Now add texts to the buttons and some sort of bullets on the right side (bullets are also usual rectangles with a slight outer glow).

9. You may also create a rollover for a button which will show when mouse pointer is on that button, this will be needed for Flash version of website. Simply transform the layer and change its fill color. Don’t forget to change the text and bullet colors in this case.

10. Now we draw the lace line. The line with two circles that is going to be over the menu buttons and will be something that actually laces this “digital book design”. The lace holes are simple – the circle itself (ellipse shape tool) plus inner shadow.

11. Now the rope itself. The rope line is done by drawing an ellipse and cutting the rest from it (with the help of a mask) leaving only the curve you need.

Than change its color and put it into where it belongs – between the two holes.

12. Add header and footer text (plus a logo if you want). This whole thing is done with a simple Text tool.

13. Now it’s time to integrate the illustration element. Open the illustration PSD source file and choose layer group 7 (that’s the group that we will be integrating in this tutorial – the one with the building).

14. Drag that layer to the design and merge layers group into one layer – it will be more convenient for you to work. Select the group and press Ctrl+E.

15. But wait – we’re not done yet. We still have to add nice little shadow to the building, it will look more realistic. Duplicate the illustration layer twice, select one of them and set its Hue and Saturation to “-100″ value (this settings are available through the “Adjustments of Layer” option). This layer later will be the shadow for the building.

16. Then select the upper part of this layer and delete it.

17. Apply “Gaussian Blur” filter (1.7 px) to it and change the layer fill to 33% – now it really looks like a shadow.

18. Apply the same steps to another layer except for cutting the upper part. This layer has to be full-sized shadow. Set its opacity to 22%. This will be a second shadow. You also have to transform and distort this second shadow a little so that it would look more realistic.

19. Now move the illustration layer onto the two shadows – mind the layers order. Shadows obviously have to be UNDER the primary illustration layer.

Voila! This is it – with our tutorial a website design is ready basically in a blink of an eye! Now return to the start of the tutorial and reproduce the whole process step by step.

As I have said earlier all of the source files are available for free at Templates.com – both the free website template and the free illustration. All you have to do to get them is to register at Templates.com (see the instructions on how to download our freebies).

Enjoy!

* * *

Special thanks to Small Business Web Site Design

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.