1,760 Breathtaking PSD Designs
300 HTML + PSD Templates
19 Flash Templates
Unique Logo Designs
Business cards Designs
Combo
Super Combo
Custom Web Design
  http://www.layoutbank.com
CONTACT US | TEST DRIVE | MY ACCOUNT HOME
KNOW MORE | JOIN NOW
ABOUT US |PRODUCTS | ORDER | FAQ's | TUTORIALS
Featured PSD Templates
more ...
1760 Designs

Retails at $399

Now $29



Add to cart
Featured Flash Templates
more ...

19 Flash
Templates


Retails at $195

Now $15



Add to cart

Technical Document

Welcome to layoutbank.com!

Here you will find the answers to all your technical questions concerning our  1760 Breathtaking PSD Designs! This technical documentation covers the aspects of designing fast-loading, great looking websites easily and most important Ė quickly!


Software:

Each software package has its own advantages and disadvantages. Various software such as Corel Photo Paint, Macromedia Fireworks, JASCís Paint Shop Pro and others support the opening of a PSD file which is the type of file included in our layout package. PhotoShop source (PSD) files provide you total flexibility for making stunning web sites. 


Changing the web layout:

The PSD files from Layout Bank are fully customizable. First you open the .psd file in PhotoShop and proceed with the following steps:

1) Install Font for Changing Text.

2) Change the Company Name.com Layer

3) Change the Color

4) Replace any Images

5) Insert Extra Images

6) Hide the Extra Navigation Button

7) Hide a portion of the Layer


1) Install Font for Changing Text

Please, follow the instructions in this step to edit text in your .psd template.

  1. Select Start>Settings>Control Panel>Fonts to open the needed system folder.
     
  2. Select File->Install Font to open a browse dialog.
     
  3. In the dialog, locate your downloaded FONTS folder.
     
  4. Click Select All button and then OK.
     
  5. Close the window displaying ...\WINDOWS\FONTS folder.

2) Change the CompanyName.com Layer

In this step you will learn what layers are and how to find the one that you need. You will edit text on the layer and change its position.

  1. Double-click on TEMPLATE.PSD to open it with Photoshop.
     
  2. Make sure the toolbox and tool options bar are visible. If not, select Window > Tools and Window > Options respectively to display them.
     
  3.  The image might appear too big or too small. To adjust the magnification, select Zoom Tool   from the toolbox. The options bar changes to reflect zooming options. Turn on Resize Windows To Fit checkbox and click Actual Pixels button.
     
  4. Make sure the Layers Tab is visible. If not, select Windows>Layers to display it.
     
  5. Select Move Tool  and right-click the word "company" in the upper left corner. In the drop-down menu of layer names choose COMPANY. This layer will get selected in the Layers Tab. You may think of layers as of transparent films with images and text placed on them. You can edit the contents of films independently; change the order in which they are stacked, and lots of other things.
     
  6. To make sure you selected correct layer try making it invisible for a while by clicking an eye icon  from the left of the layer name in the Layers Tab. The text should disappear.
     
  7. Double-click "capital T" in the Layers Tab. This switches you to Type Tool and highlights the text. Go ahead and replace "company" with "Acme Software" or your company name if you are not working in the tutorial.
     
  8. Highlight the text you just typed in order to edit font, size, style, and color. Use drop-down boxes in the options bar to change font to Arial, size to 24pt, and style to Bold Italic. Then press the green rectangle in the options bar to display the color dialog. Your mouse pointer turns into a snippet. There are many ways in Photoshop to specify color but for now just pick the white color from the upper left corner of colors field and click OK.
     
  9. Drag the layer with edited text a little more to the left with a Move Tool . You will notice that other layers move as well. This is because the layers are linked. You can tell which layers are linked to the currently selected one by a link icon from the left of layer names. Turn off linking by clicking the icons and move "Acme Software" text independently. You may want to restore linking in order to handle company name and logo as a whole some time later.

3)Change the Color

In the previous step you edited text color. Now you will change the color of a graphic element of the template.

  1. Select a layer named "news bar" with a green horizontal stripe on it.
     
  2. Select the Paint Bucket  tool. This tool repaints all pixels of similar color on a layer to match foreground color.
     
  3. Set the foreground color by clicking the upper color selection box in the toolbox and picking color from the orange square near company name.
     
  4.  With Paint Bucket tool selected, click the news bar and watch it turn orange.

4) Replacing an Image

In this step you will hide some of the template layers and insert additional ones with a different image.

  1. Select File>Open to display an Open dialog and browse to the "head.jpg" file in your downloaded "04/image" folder.
     
  2. Select Image>Image Size to display Image Size dialog.
     
  3. Make sure the checkboxes Constrain Proportions and Resample Image are on, resample mode is set to Bicubic, and sizes in Pixel Dimensions box display in pixels.
     
  4. Enter "120" in the Width field and click OK.
     
  5. Use Select>All and Edit>Copy to place the entire image in buffer.
     
  6. Close "head.jpg" window. You do not need to save the changes.
     
  7. Select Edit>Paste to insert image in the template. A new layer is automatically created and given default name.
     
  8. Right click the new layer in the Layers Tab and choose Layer Properties... from context menu. Enter "portrait" in the Name field for future reference. Click OK.
     
  9. With "portrait" layer selected use the Move Tool  to place the image on the left of welcome text.
     
  10. Find "man" and "man shadow" layers and make them invisible by clicking the eye icons.

5) Inserting additional image  

In this step you will insert additional graphics in the template by creating a new layer.

  1. Select File>Open to display an open dialog and browse to the "stripe.gif" file in your downloaded "04/images" folder.
     
  2. When the image opens use Select>All and Edit>Copy to place the entire image in buffer.
     
  3. Close "stripe.gif" window.
     
  4. Select Edit>Paste to insert image in the template. A new layer is automatically created and given default name.
     
  5. Right click the new layer in the Layers Tab and choose Layer Properties... from context menu. Enter "stripe" in the Name field for future reference. Click OK.
     
  6.  With "stripe" layer selected use the Move Tool  to place the stripe just under company name in place of "logotype".
     
  7. Find "LOGOTYPE" layer and make it invisible by clicking the eye icon.

Hiding extra navigation buttons

Our templates were designed to suit a number of purposes. It may so happen that you don't need all the elements. In this step you will remove "SOLUTIONS" button from the template's navigation bar.

  1. Locate "SOLUTIONS" layer and make it invisible by clicking the eye icon. Now there is empty space in place of unwanted button. It is better to shift remaining buttons from the right by one position to the left side.
     
  2. Select "SERVICES" layer and unlink it from "COMPANY" and "PRODUCTS" layers by clicking link icons . Note that "SUPPORT" and "CONTACT" layers get unlinked as well.
     
  3. Use Move Tool to shift buttons to the left. You can enlarge the image with Zoom Tool and watch button separators match to make sure you are doing right.
     
  4. Restore links to "COMPANY" and "PRODUCTS" layers for "SERVICES" layer. Note that links for "SUPPORT" and "CONTACT" get restored as well.

 Hiding a portion of a layer

In the previous step you changed visibility of a layer to get rid of extra graphical elements. Sometimes you may want to hide some elements but keep others within the same layer. In this step you will learn how to accomplish this using layer masks. You will hide the end of "Welcome to Company website!" leaving just "Welcome to Company". Of course it is much easier to edit text, but this is just an exercise.

  1. Choose Edit>Deselect to turn off any current selection.

     
  2. Select the Rectangular Marquee tool and draw a box around "website!".
     
  3. Choose Select>Inverse to invert your selection.
     
  4. Press Layer Mask   button in the bottom of the Layers Tab to hide all parts of the layer that aren't selected, i.e. the end of caption that you selected in (2).

If you ever want to get back what you just hid choose Layer>Remove Layer Mask>Discard to delete the mask or Layer>Disable Layer Mask for just turning it off.

 






   

 

sales@layoutbank.com
© LayoutBank.Com 2004
All rights reserved for Web Templates
Psd Templates|  Html Templates | Flash Templates| Logo templates | Business Cards

 Website Builder | Web Templates | Call Center | Businesses for sale | web design company

 INFORMATION PAGES