Urlearn Photoshop Tutorials

Photoshop Free Tutorials

Create A professional  Web Site: PART [1]
  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  here  to view the final web page.
Top Tutorial
Create a realistic stony text using Photoshop by the easiest way. you will get fine  end.
The final result is:

Click to view the complete 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.

Jump to PART 2
The End   

               Dr Smith

free Photoshop tutorials

Learn How to use Photoshop :: Photoshop tutorials



Home | Site map | Autoplay | Photoshop | Dreamweaver | Swishmax | Web design | Contact | Privacy P