Archive for the ‘Photoshop Tutorials’ Category

 

Creating a Website Design From Scratch

June 4th, 2008

Ok, people, it’s time for revealing some more professional secrets. This means that you are about to read a tutorial about how to create a Flash website design. Now come back to your computer as there is nothing to be afraid of - it may seem very complicated at first but we promise to guide you through the design process and make it all as simple as possible.

 

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

 

result

 

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!

Read the rest of this entry »




 
 

3D Servers Integration Tutorial

April 17th, 2008

Recently we’ve been talking a lot about integrating 3D servers into website designs. We have even illustrated how great it looks at our official blog.

 

Today it’s time for you to find out how to actually integrate our 3D servers into website designs. With this simple tutorial you will know how to do that in several steps. We assure you that there are no special skills or software components needed for that, you only use standard Adobe Photoshop tools. This time we will show you how to make this:

 

final result

 

Ok, here we go.

 

1. Choose a design that you want to apply 3D servers to. It’s recommended that you take a design of a website that is oriented towards hosting or dedicated servers so that servers would be something organic there.

 

step 1

 

2. Choose a server that you want to put into your design. In this particular tutorial this is Model #933

 

Step 2

 

3. Next is the server preparation. Make sure it has transparent background (servers from Templates.com always do have the transparent background), otherwise you will have to manually remove the background. Besides you should fit the server image’s size for your design (or you can do it later when the server is already at the design with the “Free Transform” tool).

 

4. Then you should prepare some space at your website design for a server. Just move the layers with other elements (in this case we move them symmetrically to the right and to the left).

 

Step 3

 

5. Next is you simply drag and drop the server layer to the design with a space prepared. Please mind the layers order as the servers have to be on top of all of the surrounding elements (except for the logo layer in this particular case).

 

Step 4

 

6. Then we duplicate layer and flip it horizontally - this will be the second half of our servers section.

 

Step 5.1

 

7. Move the second part to the proper place. In this example we move it to the left.

 

Step 5

 

The result is several nice servers symmetrically oriented.

 

Step 5 completed

 

8. It would also be great if you add the shadows to the servers, it always looks so impressive! Create a new file and make a vertical line with a Brush tool (Brush radius is about 50-60 pixels, color is #6A6A6A for example)

Step 6

9. Apply Gaussian Blur to it (Filter => Blur => Gaussian Blur, blurring radius is about 25-45 pixels) and select the height that you need.

Step 7

10. Drag the selection to your initial design but be sure to put in UNDER the servers layer. There you go - servers are now at your website design. Voilà!

 

Voila!

 

Well, there it is! You see that the process is indeed really simple and even fun. Enjoy it :)