This Exclusive
Tutorial will show you
how to create a Professional
Web site using
Photoshop And Image Ready.
You will learn new techniques about
designing web pages .You will
learn how to
create web page header, page
footer, content box,
navigation menu, Slicing
images, optimizing images for
web and how to create a web
menu button with
rollover state for each button
.That site will be created by using
nothing but Photoshop and
ImageReady. This tutorial consists
from 40 image
Click
hereto
view the final web page.
STEP 1
: create anew project
(760X600) with white background
then choose a nice
photo and use it to create a nice header. u can use
the following 2 images to create the header .Put the
2 images beside each other.
STEP 2:
Create a new
layer and then use the rectangular
marquee tool and then draw a long
rectangle under the header And fill
it with #cccccc :
Then Apply this
settings to the rectangle layer style
STEP 3: Now we need
to create navigation menu so we need to create
buttons .To do that go to the bottom of the layer
palette and then press create a new layer set button
and then double click on the created set and name it
" Button" . And in the set Create a new layer and
draw a rectangle and fill it with white
Now Apply The
Following Layer Style To that layer
The Gradient
setting is:
Create anew layer
and then put the text on it use Arial font and
strong Anti-aliasing method and apply then apply the
following settings to the text style:
The final result
is:
Create a new layer
and change the foreground color to white then
choose
the custom shape tool and then change its
setting as you see in the image
Then choose the following shape
then draw that
shape on the left side of the button
and then apply the following
settings:
the final result is:
Now You should copy the button set to create
multiple button and change each text of each button
to create the navigation menu :The final result should be:
Creating The Rollover State using
ImageReady:
Now we want to add a rollover state
to each button, The rollover state
means "changing
the state of the button when
the user positions the mouse over
the button". In this tutorial we
want to change the color of the
arrow that in the button to yellow.
choose any button layer and then
choose Layer >> new layer based
slice . you will found boundaries a
appear around the button then go to
ImageReady by choosing File >> edit
in ImageReady.
In Image ready Open the "web content
palette" And the "Layer palette"
At the bottom of the web content
palette press the create Rollover
state button [
] then
select
the over slice that will appear And
Then Go to the layer palette and
change the settings of the layer of
the arrow "I changed the color
to yellow"
You can test your work by by
pressing the "Preview Document"
button in the tool bar or press (Y)
you will find that when you move the
mouse on the button ,the color of
the arrow change immediately to
yellow.
Click again on the preview button to
escape from view mode.
to create navigation menu so we need to create
buttons .To do that go to the bottom of the layer
palette and then press create a new layer set button
and then double click on the created set and name it
" Button" . And in the set Create a new layer and
draw a rectangle and fill it with white 
choose
the custom shape tool and then change its
setting as you see in the image
select
the over slice that will appear And
Then Go to the layer palette and
change the settings of the layer of
the arrow "I changed the color
to yellow"
button in the tool bar or press (Y)
you will find that when you move the
mouse on the button ,the color of
the arrow change immediately to
yellow.