horizon

general forum


You are not connected. Please login or register

Make a Web site with Photoshop and Dreamweaver

View previous topic View next topic Go down  Message [Page 1 of 1]

Admin


Admin
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:




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.

  4. Click on layer header and press shift+ctrl+u todesaturatethe picture. You won't be able to see the desaturation asthe layer isbehind the candle layer. You can close the eye of thecandle layer inthe layers panel if you would like to view the effectof thedesaturation.

  5. Now work on the candle layer. Select Elliptical marquee tool. Drag it to the candle. Select feather radius as 15.



  6. Now click on Select>Inverse from the top menu and then delete.

  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.





The above is the final effect you will create.
Ifyouwould like to use this header in the next tutorial on creating awebsitelayout, You have to merge the layers to create a singlegraphic. Youneed to do the following steps :

  1. Click on the link icon next to the eye icon in the layers panel for all the layers.

  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




  • Learn how to design websites, T-shirts, banners, flyers, ecovers and more using Photoshop!
  • More Great Learning Resources

View user profile http://horizon.4ulike.com

Admin


Admin

  • Creating a Header
  • Designing a Layout
  • Slicing a Layout
  • Creating a Website
  • Simple Logo Design Ideas
  • Web Banner with logo
  • Creating A Collage
  • Backgrounds using Brushes
  • Retouch an Image
  • Photoshop Tips
  • Shape your Text

Effects

  • Cool Photoshop Effects
  • Great Looking Textures
  • 3D Ball
  • Bubbles
  • Rainbow
  • Magazine Image Effect
  • Shiny Starburst Effect
  • Halo Effect
  • Crystal Ball Effect
  • Reflection with Ripple
  • Manipulating Expressions
  • Pop Art Effect
  • Superimpose Image
  • Smarties
  • Glass Effects
  • Smoke Effect
  • Icy Image
  • Torn Paper Edge effect
  • Brick Wall Texture
  • Wood Texture
  • Simple Photo Effects
  • Twirl
  • Glowing Twirl
  • Rain Effect
  • Embossed Image

Free Photoshop Resources

  • Photoshop & HTML Website Templates
  • Fireworks & Photoshop Logos

Other Photoshop Resources

  • Learning Resources
  • Website Templates
  • Logos & Corporate Identity
  • Recommended Books
  • Best Web Design Software

View user profile http://horizon.4ulike.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

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