Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Creating A 6 Page Template From Scratch

1. Create a new image that has these properties:

  • 750 wide
  • 450 high
  • RGB
  • 72 ppi
  • White.

2. Use the paint bucket with foreground color set to hex value #333399 to fill the background.

3. Insert a new layer. Insert two new guides by clicking View=> New guide. Set them to 30 pixel and 428 horizontal.

Select your rectangular marquee tool and set the marquee to the style option of fixed size at 750 wide and 20 pixel high. Click at the intersection of the top guide line and the left side of the canvas, placing the cursor crosshair right on the intersection. Select the paint bucket with foreground color set to hex #666699 and fill the selection.

Select your rectangular marquee tool and set the marquee to the style option of fixed size at 750 wide and 14 pixel high. Click at the intersection of the bottom guide line and the left side of the canvas, placing the cursor crosshair right on the intersection. Select the paint bucket with foreground color set to hex #666699 and fill the selection.

4. Click Edit=>Stroke. Set the stroke to the following

  • width = 1 pixel
  • color = hex # CCCCFF
  • location = outside
  • mode= normal
  • opacity = 100%

5. Select your text tool set to the following settings and type in the name of your site (Computer Tech) above the top line.

  • Times New Roman
  • Bold
  • 30 pt
  • smooth
  • white

6. Insert a new layer. Using the text tool set to the following settings, type in your first menu item, home, all lower case, on the furthest right of the menu bar..

  • Verdana
  • bold
  • 12 pt
  • smooth
  • white

7. Insert a new layer and with the same type tool settings type in the second menu item: contact, all lower case just left of the home button. Follow the same procedure for each text item, making a new layer for each of the following:

  • home
  • contact
  • support
  • market place
  • products
  • about
  • what's new

8. Link the menu item text layers together by clicking on the home layer and clicking the link column on each of the text menu item layers.

Select the move tool to eye the menu items up evenly spaced across. then  on the options bar click the icon to align the linked items to the bottom.

9. Right click on the home button Layer and select blending options. Check colorize and set the following:

  • color = hex #CCCC99
  • opacity = 100%

Right click on the home button layer and select copy layer style. Right click again on the home button and select paste layer style to linked.

10. Select the type tool set at 8 pt, white, Verdana and type in the copy right info on the lower right bar. Use the move tool to position it on the right in the middle of the bottom bar.

11. Click on the background layer. Select the rounded rectangle shape tool. Hit your d key followed by your x key to insure your color is white. Draw a rounded rectangle set at 20 pixel corner in the  middle of the solid dark blue space, coming about 10-15 pixels from each side.

12. Right click on the shape layer (layer not the thumbnails on the layer) and select rasterize. Control click on the rasterized shape to select the shape. Click Edit=>Stroke set at:

  • 4 pixels
  • hex #CCCC99
  • inside
  • opacity 100
  • mode normal

13. Insert a layer called picture frame. Insert a vertical guide by clicking view=> new guide. Set it to 150 pixel vertical. Select your rounded rectangle shape. Set the shape options to outline path at 10 pixel radius.

Draw a rounded rectangle path between the left, top, bottom gold border and the guide line.

14. Click on the paths palette. Right click on the work path layer and select make selection; feather = 0, anti alias checked, new selection.

15. Click back on the layers palette. Click Edit=>Stroke set at:

  • 4 pixels
  • hex #CCCC99
  • inside
  • opacity 100
  • mode normal

16. Click the mask button on the bottom of the layers palette.

17. Insert a layer. Insert a horizontal guide by clicking view=> new guide. Set it to horizontal at the top of the previous rounded rectangle. Select your rounded rectangle shape again. Set the shape options to shape layer not outline path at 10 pixel radius. Set foreground color to white. Draw a rounded rectangle that borders the guide and about equidistant from the left rounded rectangle, bottom and right.

Right click on this layer and rasterize the later. Click Edit=>Stroke set at:

  • 4 pixels
  • hex #CCCC99
  • inside
  • opacity 100
  • mode normal

Click back on the shape layer above the background layer.

18, Open your images for this tutorial. Treat each image as follows:

  • Keyboard
    • Click image=> canvas size. set the canvas to 600 wide by 400 high and place the anchor in the lower right.
  • Key
    • Click image=>rotate canvas => 90 degrees ccw.
    • Click image=>image size. Set the height to 400 pixels and constrain proportions.
  • circuit board
    • Click image=>image size. Set constrain proportions. Set ppi to 72, set hweight to 400 pixels.
  • Compact Disk
    • Click image=>image size. Set constrain proportions. Set ppi to 72, set hweight to 400 pixels.
  • laptop
    • Leave it be
  • computer box guts
    • Leave it be.

19. Use the move tool to Drag a copy of each image onto your canvas right above your bottom shape layer. Move and position each image behind the left shape picture frame layer.

Right click on the mask on the picture frame layer and select set mask to selection. Click on your first picture layer and click the add layer mask. Do the same for each of the other 5 picture layers.

20. Click on the top picture layer just under the picture frame layer. Add a layer. Use the paint bucket to fill the new layer with blue, hex #666699. Add the same layer mask to this layer by right clicking the mask on the picture frame and select add to selection. click on this blue layer and hit the mask button. Set this layer to color mode.

Now you are ready to slice this Image in image ready.

Click here to get to part 2, Image ready.



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2010 All Rights Reserved
Privacy and Legal