Let's get started with creating your website in Dreamweaver.

The final and most

important step!

1. Open Dreamweaver.
2. Go to File>Site>New site. A big screen named Site definition will open where
you have to give all the instructions for your site.

Site Definition Screen.

o In the first screen you need to give a name to your site. Click Next.
o Select No, I do not want to use a server technology. Click Next.
o In the third screen, Editing Files Part 3, select your website folder using
the folder icon. Click Next. This is the folder that contains your site
images and .psd file.
o In the next screen, "How do you connect to the remote server?" choose
None from the drop-down menu. Click Next.
o You will be able to view your site summary. Click on Done.
3. Now you are ready to work on your site. Create a file called my-layout.html in
Dreamweaver by clicking on File/New.

Important : You need to visualize and organize your layout in such a way that
you should be able to put them into rows and columns in a table in Dreamweaver.
4. Open my-layout.html. Click on Insert/Table to insert a table in your web page.
Enter The following :
Rows : 7
Columns : 1
Table Width : 750 pixels
Border Thickness : 0
Cell Padding : 0
Cell Spacing : 0
5. Now follow these steps :

• Select the table and give 750 px and background as black in the Properties panel.

• Keep your cursor in the first row and set the height as 21 pixels and choose Right
from the Horz drop-down menu in the properties instructor. Enter the text Home
| Sitemap | News | Downloads. Select the text and choose font Verdana size 10
pixels and color white in the Properties panel. Dreamweaver will automatically
create a style called style 1. We will use this style for the rest of the links also.
We have entered 5 spaces between the links and the vertical bar. Tip: You can
enter spaces by clicking on shift+Ctrl+Space.

• For the thin line effect in Dreamweaver, keep your cursor in the second row and
set the height 1 pixel and insert a spacer by choosing it from your images folder
(Insert/Image). If you don't have a spacer image, you can get one here. Save it in
your images folder. Give a gray background color #808080.
• Bring your cursor to the third row and enter a height of 78 pixels in the properties
panel. Now we will insert another table (Insert/Table) with 1 row and 3 columns
so that the logo is inserted in the left and the navigation links are inserted on the
right.
Column 1: Give a width of 12 pixels. This is so that the logo does not stick to the
edge of the page.
Column 2: Insert the logo image by clicking on Insert/Image and selecting
logo.jpg from the images folder.
Column 3: Enter About Us | Services | Products | Clientele | Contact Us. Select
the text and choose style 1 from the style drop-down menu. You should get the
same style as the top navigation links - Verdana size 11 pixels and color white.
 • Bring your cursor to row 4 and give a height of 103px. Select Insert/Image and
choose banner.jpg from the images folder and click on ok. Your banner will be
inserted here.
• Bring your cursor to row 5 and insert a table with 1 Row and 2 Columns.
Column 1: Insert a table with cell padding of 20 pixels. Your content will be
inserted here. Give a font style for the content - Font: Verdana Size : 12 pixels
Color : white.
Column 2: Give a width of 167 px and insert the graphics on the right by clicking
on Insert/Image and choosing pic_right.jpg from the images folder.
• Row 6: Repeat steps of row 2 to get the thin gray line.
• Last and final row : Give the background color as #303030 and height as 21
pixels. Enter your copyright text and choose style 1 from the style drop-down
menu in the Properties instructor.

We have designed a layout with a black background with an area for the logo, an eye-
catching graphical header, navigation links, content and images.

Remember while designing your layout, you need to define spaces for the following :

• Header - This could be a graphic banner

• Logo
• Buttons - Links for home, about us, contact us etc.
• Pictures
• Content area
• Copyright Information

Follow the following steps to design your website layout in Photoshop:

1. Open a new file in Photoshop by clicking on File/New and enter a width of

750pixels and height of 450px.
2. Color the background with Black by choosing black in the foreground color

and selecting the paint bucket tool and click on the canvas. Your
background will now be black.
3. Add a new layer by clicking on the Add Layer icon in the Layers panel. If your
Layers panel is not open then go to Window/Layers. Name the new layer
copyright . Select Rectangle Marquee Tool and drag to make the bottom
 banner with a width of 750pixels by 21 pixels. Color this banner with color
#303030.
4. Choose Horizontal Type Tool. A text layer is created automatically. Now
enter the text for Copyright, e.g. "Copyright © 2005 www.YourWebBusiness.com.
All Rights Reserved.
5. Choose Horizontal Type Tool. A text layer appears automatically. Enter the button
text on the top banner too: "home l sitemap l news l downloads".
6. Add a new layer. Now make the gray horizontal line color #808080 with single
Marquee tool.Go to Edit>Stroke. Choose Stroke width 1 pixel. Color #808080.
Location Center. Click OK.

7. Right click on the layer and select duplicate layer 3 times, because you have 4
lines. Put the lines in their corresponding place: in bottom, middle, top.
8. Now you can enter the button text on the second top banner in a new layer e.g.
About us l services l products l clientele l contact us.
9. Now define the logo area with the rectangular marquee tool. Go to
Edit>Stroke. Choose Stroke width 1 pixel. Color is #808080. Location Center. Fill
inside with Black color with Paint tool. Name it Logo area.
10. Choose the Horizontal Type Tool and write your company name or website
name.
11. Choose the Horizontal Type Tool and enter content in the middle.
12. Insert your header (See our tutorial on creating an eye-catching header). This
could also be any image you choose. The image needs to be a horizontal banner.
Open your image file. Go to move tool. Drag from your image file to this layout
in the middle of the layout.
13. Draw the boxes seen on the right with the Polygonal Lasso Tool.

Go to Edit>Stroke. Choose Stroke width 1 pixel.

Color is #808080. Location Center.
Name your layer borderpics. Make two more Boxes. Adjust them equally in the
right side of the layout. Insert the images by dragging them to your layout and
naming the layers.
14. Drag the layer borderpics on top of the 3 pic layers. The edges of the pictures
have to be cut according to the design of the box.
15. Now create the white bands with text at the bottom of each of the right graphics
with the rectangle marquee tool. Fill the box with white color with Paint tool.
 Name it "whitebandpics". Choose the Horizontal Type Tool. A text layer is created
automatically. Now enter the text for Gifts. Follow the same for the rest of the
pictures. You can click here for the images - pic1, pic2, pic3. You can drag these
images to your layout.

Now when your design is ready, you can go to the next step to creating your
website which is to make slices.

Rain Effect
Learn how to create an artificial rain effect. Follow this
simple tutorial that gives a rain effect to any image
using Photoshop CS.

Step 1

Open an image and on the layers panel add a new layer by clicking on the fifth icon
below the layers panel. A new layer is created with the name 'layer 1' and your previous
layer would have the name 'background' These names can be changed by you. For now
we'll leave them as they are.

Step 2

With the new layer selected click on Filter>Render>Clouds. Change the Opacity to 63.
(This is present on the top right of the layers panel)

Step 3

Click on Filter>Noise>Add Noise. Your image looks grainy! Don't panic. We'll turn
these grains to rain drops in a
moment. Give the settings as in
the image on the left.

Amount - 60

Distribution - Gaussian

Check Monochromatic

Step 4

Click on Filter>Blur>Motion blur.

The Motion blur window appears.
Give the values Angle - 73 and
Distance 10 as seen in the
snapshot below. You can try
varying the values and when a
suitable image appears you can
click OK.

Step 5

With 'layer 1' still selected, move your mouse over the Layers panel. There is a drop
down menu on the top left of the panel, this is used to set the blending mode for the layer,
now set the blend mode to 'screen'. Check your image now.
Can you make out the difference now!
Here is my result with the artificial rain effect!

Retouch an image using photoshop

Photoshop is a very powerful image editing package. With the use of the Healing Brush
Tool and the Stamp Tool you can remove patches, dots, pimples from a face. Transform
your photo. Learn how to repair a photo.

Here we are going to remove all the red patches in this man's face. We recommend using
an easier photograph with less patches.

Step 1 : Open your photo which needs to be retouched by clicking on File>Open.

Step 2

Use Healing Brush Tool.

Click to select. A top aligned window will appear.

Choose your brush size to 24px. Then to use the Healing Brush Tool:
press alt+click to select the area you want to clone (1) and
then go to the area where you want to copy (2) and click or drag.
A plus sign will show you the previous area. View the demonstration below.

Move your mouse to the area you want to clone(1). Here we want to use the skin on the
man's nose to replace the red patches on his face(2).

Now press alt+click on the area(1). The above sign will appear.

We want to clone the skin where the red patch appears(2).

So click and drag the circle which appears to the area where you want to copy(2). The +
sign is showing you the area(1) which is being copied. The + sign will come along with
the circle.
Repeat the same method as many times as required to make the face look clear.

Step 3

Use the Clone Stamp Tool.

Click to select. A top aligned window will appear.

Select the brush size according to the area you want to retouch. Here we have chosen 24
pixels.

Now to use the Stamp tool press alt+click to select the area you want to clone (1) and
then go to the area where you want to copy (2) and click or drag. A plus sign will show
you the previous area.

Both the Stamp tool and Healing Brush tool will give you the same result as seen above.

Repeat the same method as many times as required to make the face look clear.

Congratulations! Your image is ready without any patches.

This set of tutorial will show on how to create a very basic mouse over effect in html/css.
Therefore this tutorial will spilt into 2 parts:
 1. Orb Button Effect - Photoshop Part : which will show how the button is made
2. Orb Button Effect - Dreamweaver Part : which will show on how to make a
simple basic mouse over effect with html/css

**note** this is a very basic tutorial

1.
Start by creating a document of any size that you want, as later on we are going to
crop it to the desire size. Here for this tutorial, I’ll be using 200×200 px. Fill the
background with white color. Create a new layer, name this layer as - orb-bg,
with the Eclipse Tool, draw a perfect circle of size similar as shown as the above
picture. Give the circle a gradient color of #2a2a2a on top and #3e3e3e at the
bottom.

2.
Secondly, create another new layer. Name this layer orb-glass. Using the Eclipse
Tool again, draw an oval shape as how it is shown on the above image, with
white(#fffff) color fill of course.
3.
Then use the round marquee tool, draw a marquee selection 1/3 below the orb-
glass which was created on step-2, as shown in the image. Open up the feather
option by going to Select > Feather or with the shortcut key Ctri + Alt + D. Give
it a 30px feather. With the orb-glass layer select, press delete twice.

4.
After the deletion, you will come close to what’s shown in the above image.
Change the opacity of the orb-glass if you wanted to.
5.
Make another new layer in between orb-glass and orb-bg. Name this layer orb-
bottom. Using again the Eclipse Tool, draw a small oval shape at the bottom of
the orb with black(#000000) fill. As how is shown on the above image.

6.
With the orb-bottom layer, selected, bring out the Gaussian Blur window by
going to Filter > Blur > Gaussian Blur. Give a 2.8px of blur.
7.
If everything is on the right path, you will have something like is shown on the
image. However, it is still not done yet as we are goin to make the mouse over
effect glow.

8.
Create another new layer in between orb-bottom and orb-bg. Name this layer
over-glow. With the Eclipse Tool, draw another oval shape like what is shown in
the image. Of course with the fill color of #00c1de
9.
With the over-glow layer selected, bring out the Gaussian Blur window again,
Filter > Blur > Gaussian Blur, this time give a 9.0 px blur to it. Then you will
have the glow effect as what is shown on the above image.

10.
Now, duplicate the orb-bottom layer, name this layer orb-shadow.
11.
Then, shift this orb-shadow layer down, right below orb-bg layer. With the orb-
shadow selected, press the ↓ key around 4 - 5 times to shift the orb-shadow object
4 pixel down. Now you will have the shadow for the orb done.

12.
Ctrl + left click on the orb-bg thumbnail to have a marquee selection over it.
Then Inverse the selection by going Select > Inverse or with the shortcut key
Shift + I. With the over-glow layer selected, press Delete to clear what is outside
the orb button for this layer.
13.
With the marquee selection still active, select the orb-bottom layer and press
Delete again to clear what is outside the orb button for this layer

14.
Now the final step to complete the orb button. Using the round marquee tool,
draw an oval marquee selection as shown in the image. Bring out the Feather
window, Select > Feather or with the shortcut key Ctri + Alt + D. Give again
30px feather. With the orb-bottom layer selected, press Delete twice.
 15.
This will be the mouse over effect for your orb button. You can add any icon on
the orb if you want to, but for here I will just left it blank.

———————————————

Now is time to export the required images to be use during the html progress later on

1.
First , crop the images which was done from the above 15 steps to a smaller size.
Select the Crop Tool (in case you don’t know, the crop tool is at the tool bar with
the logo shown on the small image at the corner. Select the appropriate size to
crop. After the selection is confirmed, double click on the selection.
2.
Now to export the default mouse image, hide the over-glow layer by clicking on
the eye icon.

3.
To Export, go to File > Save For Web or with the shortcut key Ctrl + Alt + Shift
+ S, choose your desire option. In here I will use the .jpg file format with 60%
quality. Save the file as mouse-active.
 4.
Now for the mouse over image. Unhide the over-glow layer by doing the same
thing on how to hide it. Again Export, go to File > Save For Web or with the
shortcut key Ctrl + Alt + Shift + S, with the same option, save the file by the
name of mouse-over.

Create a new file

Create a new layer, Use Elliptical Marquee Tool to draw a circle and fill it:
Layer -> Layer Style -> Blending Option . Check Drop Shadow and set as:

Check Gradient Overlay

Check Stroke

We have image:

Create a new layer, draw a Ellipse and fill it as follow

Layer -> Layer Style -> Blending Option. Check Inner Shadow

Check Outer Glow

Check Gradient Overlay

We have a result:

Use Custom Shape Tool and Draw -> :

Blending Options -> Inner Shadow

Bevel and Emboss

We have:
Create a new layer, Draw a Ellipse like this

Use Gradient Tool, Click to edit the gradient :

Draw like this

Set Optical = 30 percent, We have:

Create a new Layer, Draw a small Ellipse , Fill by White , Set Optical = 18 percent (You
can Turn off indicate layer visibility of some layer)

Edit -> Free Transform -> Skew, pull to right

Next, draw a ellipse like this, then press Delete, we have

Continue with that way, we'll get the result

Final, We have a nice button

1. Make a new document, size 400 x 400

2. Use Pen Tool to make a new shape like this on "roop" layer
3. Duplicate layer "roop", use Gradient Tool with two color

#114374 and #1f8eeb

4. Use Pen Tool to select selections like this

5. Use Dodge Tool and Burn Tool to make shadow, light ..

6. Use Pen make new path and Make Selections

7. Select >> Modify >> Contract with 5 px

8. Select >> Feather.. with 5 px then fill white color

9. You can Inverse Selections ( Ctrl + Shift + I ) and use Dodge and
Burn Tool to make more shadows and light.
10. Then go to Filter >> Blur >> Gaussian Blur with 1.8 px

Result ! This like a cartoon roop, huh

11. Use Pen Tool to make this path and Make Selections, creat
new layer, name it "chimmey" , fill #f0f0f0 color
12. Use Pen Tool again to draw this path, then Right-click and select

Make Selection and ....

13. Use Burn Tool , Dodge Tool to make shadow on chimmey and use
Pen to draw new selection
14. Contract selection with 1 px , then Border selection with 3
px
15. Continue with Dodge and Burn Tool in new selection

16. Filter >> Blur >> Gaussian Blur with 0.7 px

17. Hold Ctrl and click to "chimmey" thumbnail , use Inverse Selection
to creat chimmey's shadows on roop
18. Use Pen Tool, make Selection, creat new layer and name it "wall 1"
19. Fill #f0f0f0 color, then Use Dodge and Burn Tool again
20.
21. Creat new layer, name it "grass"
22. Fill random green color, continue with Dodge and Burn Tool
23. use Smudge Tool ( streng 50 > 60 % ) to make a grass, then use Elipical Marquee
Tool to creat
new circle selection,put it on new layer, use Gradient Tool with black
and white color to fill
Done !!!
Layer Shot !!
Step 1 - Preparation

Today we will be making a glass button. However this is not an ordinary glass button
because well, you probably know because you clicked the link!

Now there are two ways to start this tutorial:

A. You can start making the button in a layout you already have
B. You can create a new image and make the button on that

I would highly suggest choice B because once you learn how to do this, it will be a piece
of cake to do it again.

For reference, steps 1-9 are preparation while step 10 is application of the button.

First, create a new image say 150x50px and Fill ( Edit > Fill ) the background with the
color Black ( Hex #000000 ) You will be able to change this color later so do not worry
about it now.
Step 2 - Creating the Layer Set

Create a new set and name it “glowing glass” You will be making your button in this set.
Create a new layer in the set and name it “glass”

P.S. Don’t know how to make a set? Go Layer > New > Layer Set

Step 3 - Two Circular Selections

Take the Elliptical Marquee Tool and change its settings to what is shown below.

Now make a selection on the left side of your image. You should
notice how the circle does not change size hence the “fixed size”. Fill ( Edit > Fill ) this
circle with White ( Hex #ffffff ). Do not deselect at this point.

While pressing the Shift key, press the right arrow key. You will see the selection move
10 pixels at a time. Move the selection as many times right as you want your button
long. I went for 9 moves.

Fill ( Edit > Fill ) the selection with White ( Hex #ffffff ).
Deselect the selection.

Step 4 - Finalizing the Button Shape

Now comes the fun part, the button is not looking like a buttons shape so we have to
make it look like one.

Take your Rectangular Marquee Tool and change the settings back to the default.

Now what you want to do is create a selection of the buttons insides. You will see what I
mean from the image below:

Image is Zoomed In

Fill the selection with White ( Hex #ffffff ) and deselect.

Step 5 - Applying Blending Options

Yay you have a button looking shape! Time to make it look like a button now!

Right click layer “glass” on your Layer Palette and open the “Blending Options...” for
it.

Insert the following settings:

 Click Images to Enlarge

The Blue I use is #00FFF7

You may be thinking “hey that looks really stupid.” Yes it does. But we can change that!

Invert ( Ctrl-I or Image > Adjustments > Invert ) the colors of the
image. Change the Blending Mode of layer “glass” to "screen".

Step 6 - Adding a Reflection

Time to create the reflection on the top. Create a new layer and name it “reflection”.

While pressing Ctrl, click on layer "glass". Press D to reset the Color Palette and
choose your Gradient Tool. Make sure your settings are the image below.
Using the Gradient tool, while pressing shift, click and drag from the bottom of the
button to the top. Change layer "reflections" Blending Mode to “screen” and turn
down the Opacity to 32%.

Take the Elliptical Marquee Tool and make a selection like the
image to the right. The selection will be a large circle so you may have to zoom out or
make the window larger.

P.S. Need help on this? Start the selection about the width of the image left of the image
and drag down and right until it looks right.

Press delete and deselect.

Step 7 - Adding Text

The button is done and it is time to add the text. You can use any text you want but I
highly recommend using BitDust 2.

BitDust 2 [ DOWNLOAD ]

Take the Horizontal Type Tool and write something on your

button in White ( Hex #ffffff ).

Looking a little blank isn’t it? Let’s add a blending option.

Open up the Blending Options for the text layer. Apply what is shown in the image to
the left.

Yay the button is done. You can skip to part II now if you want but If you want to make
your button even better, keep reading.
Step 8 - Adding a Text Reflection

We are going to add a reflection of the text. Duplicate the text layer and Flip the text
vertically ( Edit > Transform > Flip Vertical ).

Now move it down until it is 1 pixel under the original text

Go layer > add layer mask > reveal all. Take the Gradient Tool and while pressing
shift, drag from the bottom of the text you just made to the top of the right side up
text.

You should have a nifty reflection of your text.

Step 9 - Adding a Divider

Now we are going to add a divider and an arrow to the button. Create a new layer and
call it “divide”.
 Take the Rectangular Marquee Tool and make a 1x18 pixel selection
(in other words make a selection that is 1 pixel wide and goes from 1 pixel away from the
top to 1 pixel away from the bottom of the button).

Now Fill ( Edit > Fill ) this with Black ( Hex #000000 ) and move the selection 1 pixel
over to the right and Fill ( Edit > Fill ) it with White ( Hex #ffffff ) Change the
Blending Mode of layer “divide” to “soft light”.

Create a new layer named “arrow”. Take the Polygonal Lasso Tool and
make a selection of an arrow like the image to the left.

Fill ( Edit > Fill ) it with White ( Hex #ffffff ).

Yay you are done with the button and the extras!

Step 10 - Application

So far you are probably thinking “Why did he say this was a simple button! It is so
many steps!” Well here is a surprise. Making it takes some time but after that it is
really easy to use everywhere. That is why this last steps is the only step necessary for
applying the button.

When you want to use this button somewhere, just drag the layer set “glowing glass"
into any image as many times as you want buttons. It is that easy. If the background of
the image is very bright, change the text to black. If you did the reflection, remember
to change that text too.

To change the text, just use the text tool.

To change the color of the button, just go into the Blending Options of layer “glass”
and change all the colors.

Simple isn’t it? Thank you for following through this tutorial and have a great time using
your new buttons!