Megatutorials: April 2007

Apr 24, 2007

Plastic menu for a website

Adobe Photoshop Tutorial

click on images to see their real size

Learn how to create a plastic menu buttons for a website.

Let’s start with creating a new document, with 300px by 200px with a #2e2e2e background color:

Select a Rounded Rectangle Tool with a following settings:

And draw this shape:

Now apply to our shape the following effects:

That is what you should get:

The next step is to select our shape by Ctrl+Click on a layer icon, select a gradient tool with a following settings, create a new layer (let’s name it “gradient_layer”) and fill it with a gradient as it is shown below:

Press Ctrl+D to deselect. You must see something like that:

Now, select a Move Tool (V) and drag our “gradient_layer” to the middle of the shape:

Select the bottom of our “gradient_layer” and delete it. like here:

The button is ready. Now duplicate it, and apply to second button the following Gradient Overlay settings (other settings remain the same):

That’s how one of our buttons is going to look like when it is selected:

Now, write the menu entries. I did it with a white 22 pt Myriad Pro font and with the following effect:

That is how our plastic menu can look like:

Apr 17, 2007

Stylish search bar.

Adobe Photoshop Tutorial

click on images to see their real size

In this tutorial, you will learn to create a stylish search bar for a website.

Let’s start with creating a new document, with 450px by 200px. As a background I used a gradiend from # 808080 to # 616161.

Select Rounded Rectangle Shape Tool with the following settings, and draw a shape:

Name that layer as “Shape 1”. Duplicate it by pressing Ctrl+J and name duplicated layer “Shape 2”. “Shape 2” layer must be above “Shape 1” layer. Now, apply to “Shape 2” layer following settings:

That is how it must look like:

Now, apply the following settings to the “Shape 1” layer:

Rasterize “Shape 2” layer, select a part of it with a Elliptical Marquee Tool (as it is shown below), press Ctrl+I to invert the selection, press the Delete button and after that – Ctrl+D to deselect:

Select the “Shape 1” layer by Ctrl+Click on it, and with a Rectangular Marquee Tool – cut the bottom of the selection, like this:

Create a new layer (above the “Shape 1” layer), fill our selection with white color and set the layer transparency to 30%. Press Ctrl+D to deselect:

Now, with a Rectangular Shape Tool draw a shape where the input field should be. And with a Arial font 17 pt write a “search” word in a button. Here is the result

Apr 9, 2007

Stylish website navigation.

Adobe Photoshop Tutorial

click on images to see their real size

In this tutorial, you will learn to create a stylish website navigation design in Photoshop.

Let’s start with creating a new document, with160px by 220px, background is not important. Now, select your Rectangular Shape Tool and create a rectangle that is 40px tall, and about 160px wide. Color doesn’t matter, because we will apply the following settings:

Create a new document with 6 px by 5 px, clear the background, select a Pencil Tool (Master Diameter is 1px) with a color # 939393, and draw two points as it is shown:

Now go to Edit > Define Pattern, name it for example as “new_pattern” and click OK. After that, return to previous document, select our rectangle by Ctrl + click on a layer icon in a layer palette, create a new layer (name it also for example new_pattern), and than go to Edit > Fill:

After filling, go to Filter > Blur > Gaussian Blur with radius 0,3px and click OK. The result must look like this:

Now, create a new layer, select a Pencil Tool (Master Diameter is 2px) with a color # 696969 and draw a line at the bottom of rectangle. Change color to # 808080 and draw a line at the top of our rectangle. Like here:

Select our three layers, and group them by pressing Ctrl + G. Clone them by Alt + Drag to make 5 groups and arrange them as on the following picture:

Select the rectangular in the second group and apply this settings.

In the same group select the layer “new_pattern” and apply the following settings: color overlay # ffffff and set the layer opacity to 25%.

That is how one of our buttons is going to look like when it is selected, but that is not all:

It the same group #2 create a new layer, select a Pencil Tool (Master Diameter is 1px) with a color # ffffff and draw some kind of an arrow, and place it as it is shown below:

Now, select a strict pixel font (I’ve used the Alaska font) and write down your menu. That's it!

Apr 5, 2007

Toxic text effect.

Adobe Photoshop Tutorial

click on images to see their real size

Creating a text effect as like a toxic waste was split on an asphalt.

Let’s start with opening a new document with a size 400x200 px. Fill it with a #505662 color:

Apply to it the following Noise settings, and our asphalt background is ready:

Now, create a new layer, and write a word “TOXIC” or whatever you want. I’ve used the Impact font with these settings:

Rasterize it, and set background color to #30ff00 and foreground color doesn’t matter, like here:

After that, go to Filter > Brush Strokes > Spatter, and apply there the following settings – Spray Radius: 15, and Smoothness: 5, then click OK. You should see something like that:

Now add this layer style:

And right click on an “Indicates layer effects” icon, then choose “Create layer”

Duplicate the Stroke layer:

Now apply to our “toxic's Outer Stroke copy” layer these settings:

And to our “toxic's Outer Stroke” layer – these settings:

Voila:

Apr 3, 2007

Stylish “login form” design.

Adobe Photoshop Tutorial

click on images to see their real size

In this tutorial, you will learn to create a stylish "login form" design in Photoshop.

Let’s start with creating a Rounded Rectangle with a Rounded Rectangle tool (the settings are shown below and the color doesn’t matter) and applying to it the following gradient overlay settings:

Now create two new layers, draw in each of them white Rectangle with a Rectangle tool and apply to them the following stroke settings. They are going to be our fields to fill.

Write the words “Login:” and “Password” using the following settings and place them as it is seen on the picture:

Now select our Rounded Rectangle (Ctrl + click on the layer) and with a Rectangular marquee tool (M) – cut the selection as it is shown below. Don’t forget to apply these settings to Rectangular marquee tool (M):

Create a new layer, fill our selection with any color, and apply to it these settings:

Deselect (Ctrl + D), and create a new layer. Draw an Ellipse with an Ellipse tool (the settings are shown below and the color doesn’t matter) and apply to it the following gradient overlay settings:

Now select our Ellipse (Ctrl + click on the layer), go to menu Select > Transform selection and transform it like on this picture:

Press enter, create a new layer, and paint inside our selection with a gradient tool as it is shown:

Press Ctrl + D to deselect.

Now, duplicate our Ellipse. Paint the previous one in white color, and transform it as it is shown here:

It must look like this now:

The next step is to select the white Ellipse (Ctrl + click on the layer) and with a Rectangular marquee tool (M) cut its bottom. Only the upper part must remain selected:

Now create this gradient:

Create a new layer (right next to the white Ellipse), and paint with a gradient inside our selection, to obtain this result:

Select a Custom Shape Tool, choose an arrow, with the following settings, and draw it on our orb-button:

Apply these settings to our arrow, to make it shine:

So, here is the result:

Apr 1, 2007

Creating an icon "about company" in Illustrator

Adobe Illustrator Tutorial

click on images to see their real size

In this tutorial, you will learn to create an “about company” icon in Illustrator. After a little treatment in Photoshop, the result can be like this:

Well, lets start with opening in Adobe Illustrator a new document (A4 size or whatever you like), and using a “Pen tool”(P) – draw this simple shape:

It is going to be our first wall. Now apply to this shape a gradient, as it is seen below. And remember, that the angle is important.

Again with a “Pen tool”(P) – draw next shape, that is going to be our roof.

Also apply to this shape a gradient, as it is seen below, and don’t forget about angle.

Draw next shape that is going to be the front wall.

And to this shape we will also apply the gradient as it is seen below. The angle is important, remember? :)

Now, duplicate our front wall (Ctrl+C and Ctrl+V), and resize it, as it is seen here:

Apply to the duplicated shape this gradient (angle is still important)

The window (I forgot to tell you, that it going to be our window :)) is not ready, without next two steps:

So, select the window, that is ready now, and clone it on the front wall (Alt and drag).

The next shape that we draw (using a “Pen tool”(P) is going to be our door

Apply this gradient and don’t forget the angle:

And don’t forget to separate doors and draw a door-handle.

Now, you can take your company logotype, and put it on the front wall. Let’s imagine that this circle with the same gradient as doors - is our logotype:

We have to make it lying in the same plane as doors and a front wall. So go to menu Filter > Distort > Free Distort and transform your logo by dragging the angles of the frame with your cursor. Like this:

It looks much better now:

Our next step is creating the small room on the roof, where the lift engines are. For that, we are going to duplicate our building’s three walls and transform it like on this picture: