علومي
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Make a Web site with Photoshop and Dreamweaver

2 posters

Go down

 Make a Web site with Photoshop and Dreamweaver Empty Make a Web site with Photoshop and Dreamweaver

Post by 3loomi Fri Nov 12, 2010 2:16 am

Part 1 on How to Make a Web site with Photoshop and Dreamweaver


Make a Web site with Photoshop and Dreamweaver


This tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop and Dreamweaver.


Tutorial 1 : Creating a unique website header
Tutorial 2 : Designing your website layout in Photoshop
Tutorial 3 : Slicing your layout in Photoshop
Tutorial 4 : Creating your web site in Dreamweaver


This header design is used in the layout in the tutorial

How to make a website layout in Photoshop.

Click here to view the finished Photoshop layout.


We are going to make a header like the banner below:

 Make a Web site with Photoshop and Dreamweaver Layout_12


Steps to Follow :


  1. Click here to open and save the candle image. Right click on the image to save the picture. Save the picture in a website folder.
  2. Open Photoshop and click on File/Open and select the header image from your website folder.
  3. Name the layer header in the layers panel. Right click on the layer and select Duplicate Layer. Name the second layer candle.
     Make a Web site with Photoshop and Dreamweaver Layout_8
  4. Click on layer header and press shift+ctrl+u todesaturate the picture. You won't be able to see the desaturation asthe layer is behind the candle layer. You can close the eye of thecandle layer in the layers panel if you would like to view the effectof the desaturation.
     Make a Web site with Photoshop and Dreamweaver Layout_9
  5. Now work on the candle layer. Select Elliptical marquee tool. Drag it to the candle. Select feather radius as 15.
     Make a Web site with Photoshop and Dreamweaver Elliptical_dropdown_tool

     Make a Web site with Photoshop and Dreamweaver Layout_10
  6. Now click on Select>Inverse from the top menu and then delete.
     Make a Web site with Photoshop and Dreamweaver Layout_11
  7. Now press ctrl+D to deselect the candle. Make a new layer called candleborder on top of the candle layer. Use the line tool to create a vertical line on the left and on the right of the lit candle.


  8.  Make a Web site with Photoshop and Dreamweaver Line_dropdown_tool
     Make a Web site with Photoshop and Dreamweaver Layout_12

The above is the final effect you will create.
Ifyou would like to use this header in the next tutorial on creating awebsite layout, You have to merge the layers to create a singlegraphic. You need to do the following steps :

  1. Click on the link icon next to the eye icon in the layers panel for all the layers.
     Make a Web site with Photoshop and Dreamweaver Header_1
  2. Go to Layers>Merge Linked.

Your header is ready to insert in the layout. Click here to learn how to create a website layout using this header in Photoshop.



This tutorial is part of a 4 page tutorial on how to create a simple website using Photoshop.
Tutorial 1 : Creating a unique website header
Tutorial 2 : Designing your website layout in Photoshop
Tutorial 3 : Slicing your layout in Photoshop
Tutorial 4 : Creating your web site in Dreamweaver
Recommended Resources





Last edited by 3loomi on Sat Nov 13, 2010 2:50 am; edited 1 time in total
3loomi
3loomi

الجنس : Female

عدد المساهمات : 826
النقاط : 52009
التقييم : 10
تاريخ التسجيل : 2010-09-01

Back to top Go down

 Make a Web site with Photoshop and Dreamweaver Empty Re: Make a Web site with Photoshop and Dreamweaver

Post by river songs Fri Nov 19, 2010 3:26 am

wow , than a lot
river songs
river songs

الجنس : Female

عدد المساهمات : 203
النقاط : 49535
التقييم : 6
تاريخ التسجيل : 2010-11-03

Back to top Go down

 Make a Web site with Photoshop and Dreamweaver Empty Re: Make a Web site with Photoshop and Dreamweaver

Post by Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum