Reply to thread

Message: <blockquote data-quote="creativeN" data-source="post: 8523265" data-attributes="member: 224119">30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers). <img src="http://images.sixrevisions.com/2010/02/22-25_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" />  Creating the main content area 31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of 300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide. Double-click the layer and use the settings from the following image. <img src="http://images.sixrevisions.com/2010/02/22-26_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text, "About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T), and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change the color to #2f2f2f.  Add a little description and a link text beneath the title. The  following options were used for the title, description and link text.  (You can adjust these options as needed). <img src="http://images.sixrevisions.com/2010/02/22-27_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> For the Title: <ul> <li data-xf-list-type="ul">Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp</li> </ul>For the Description: <ul> <li data-xf-list-type="ul">Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676</li> </ul>For the Link text: <ul> <li data-xf-list-type="ul">Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline</li> </ul>33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings: <img src="http://images.sixrevisions.com/2010/02/22-28_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer. Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group ("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new group "about". <img src="http://images.sixrevisions.com/2010/02/22-29_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Note: The inside grey square box is a place holder for an image and can be replaced with any image of your choosing. 35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it "services". Right-click on the "services" group and select Duplicate Group again and name it "portfolio".  We have three groups now ("about", "services", and "portfolio"). Move  the last group ("portfolio") to the right guide as shown below. <img src="http://images.sixrevisions.com/2010/02/22-30_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 36 Select all three groups in  the Layers panel, and then go to Layer > Distribute > Horizontal  Centers to space them out equally. <a href="http://images.sixrevisions.com/2010/02/22-32_design_smashing_website.jpg" target="_blank">Click here to see the full size image</a> of the following image. <a href="http://images.sixrevisions.com/2010/02/22-32_design_smashing_website.jpg" target="_blank"><img src="http://images.sixrevisions.com/2010/02/22-31_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a> 37 Change the titles for the  "services" group (center) and "portfolio" group (right) as shown below.  (You can change these titles according to your requirement.) <img src="http://images.sixrevisions.com/2010/02/22-33_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the footer 38 Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the size of of 1200px by 100px at the bottom of our design layout. Name this layer "footer bg". Use the same Gradient Overlay style as the "header bg" layer by right-clicking the "header bg" layer and choosing Copy Layer Style. Go back to the footer group, right-click the "footer bg" layer and select Paste Layer Style. <img src="http://images.sixrevisions.com/2010/02/22-34_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd). <img src="http://images.sixrevisions.com/2010/02/22-35_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 40 We are going to add the email subscription section on the right. Create a new group inside the "footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle of 85px by 35px. Name this layer "subscribe btn". 41 Repeat Step 26 for adding the form fields and labels. 42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and size at 13pt. Select both layers ("subscribe btn" and "Subscribe text"). 43 Repeat Step 28 for creating the subscribe button. 44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a text line above "email field". <img src="http://images.sixrevisions.com/2010/02/22-36_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> <img src="http://images.sixrevisions.com/2010/02/22-37_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Final Result OK, that’s it and we are done. Here is the final result. Click on the image below to see the <a href="http://images.sixrevisions.com/2010/02/22-03_design_smashing_website.jpg" target="_blank">full size layout</a>. Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from this tutorial. Kindly leave your comments below  and share your thoughts and opinions, I would love to hear them. You  can also share this design tutorial to your friends if you think it  could be helpful to them! <a href="http://images.sixrevisions.com/2010/02/22-03_design_smashing_website.jpg" target="_blank"><img src="http://images.sixrevisions.com/2010/02/22-02_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></blockquote>

Verification: Payakata winadi keeyak tibeda?

Top Bottom