Reply to thread

Message: <blockquote data-quote="creativeN" data-source="post: 8523258" data-attributes="member: 224119">10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings. <img src="http://images.sixrevisions.com/2010/02/22-10_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 11 The final logo should look  like the image below. To activate/deactivate the guides, go to View >  Show > Grid or use the shortcut Ctrl/Cmd + ; <img src="http://images.sixrevisions.com/2010/02/22-11_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the navigation bar 12 Create a new group and name it "navigation", it should be above "logo" group. Drag a guide from the top ruler, 150px below the top edge of the canvas. Select the Rectangle Tool (U) and draw a horizontal line of 4px height with a color of #e3ab27, across the canvas. 13 Add navigation links at 12px-high from this horizontal line and 20px to the right of the left guide. Select the Rounded Rectangle Tool (U) and draw a box with the size of 72px by 35px. Move this layer below the text links and name the layer "hover". Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px  margin to make the edges equal to other inner edges at bottom.  Double-click the "hover" layer to open the Layer Style dialog box and  add gradient colors (Left color stop: #e5ad27, Right color stop: #b27625). Select the Horizontal Type Tool (T), select the text, "Home" and change color to #ffffff (white). <img src="http://images.sixrevisions.com/2010/02/22-12_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the "call us" section 14 Next we are going to create the "call us" section at the top-right of our design (exactly opposite side of the logo). <a href="http://downloads.sixrevisions.com/phone-icon.png" target="_blank">Download this phone icon</a> and place this near the right guide. Name this layer "phone icon". Select the Horizontal Type Tool (T). Add a phone number on the left of the phone icon using the font Arial, with the size set at 20pt and the color #292929. Add some related text below the phone number using font Arial, set at Bold, with a size of 11pt and a color of #595959. <img src="http://images.sixrevisions.com/2010/02/22-13_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the header 15 Now we are going to a create the header section. Create a new group and name it "header". 16 Select the Rectangle Tool (U) and create a rectangle shape with the size of 1200px by 440px. Put this rectangle at a distance of 1px below the navigation bar and name this layer "header bg".  Double-click the "header bg" layer, select the Gradient Overlay layer  style and have these two colors in the Gradient Editor (Left color stop:  #2e2226, Right color stop: #7a7556). See the image below for the rectangle position and colors detail. <img src="http://images.sixrevisions.com/2010/02/22-14_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design. <img src="http://images.sixrevisions.com/2010/02/22-15_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the "featured project" section 18 Next we will create the featured project section. Create a new group inside the header group and name it "fp". Select the Rectangle Tool (U) and create a rectangle with the size of 630px by 340px at the distance of 10px from the top and the left of header container. Give this layer color of #000000 and name it "fp container". <img src="http://images.sixrevisions.com/2010/02/22-16_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 19 Open an image  in Photoshop to place here as your featured project. Go to Select >  All (Ctrl/Cmd + A), then Edit > Copy (Ctrl/Cmd + C). Come back to the  our web design. Create a new layer above the "fp container" layer and  go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project  image. Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask.  Now the image is visible only inside the rectangle ("fp container").  Make adjustments so that your featured project image is similar to the  one shown below. <img src="http://images.sixrevisions.com/2010/02/22-17_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></blockquote>

Verification: Winadiyakata thappara keeyak tibeda?

Top Bottom