Reply to thread

Message: <blockquote data-quote="creativeN" data-source="post: 8523251" data-attributes="member: 224119">10.Final Preview Have a look at the layout that we’ll be creating in this tutorial. You can see the final preview of the image below or <a href="http://images.sixrevisions.com/2010/02/22-03_design_smashing_website.jpg" target="_blank">click here for a full size version</a>. <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> Prepare your Photoshop document 1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image. <img src="http://images.sixrevisions.com/2010/02/22-04_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Set the units and rulers settings 2 Make sure that you are working  in pixel units, which is the standard fixed unit for web design. Set up  the following settings for your Rulers from the Preferences dialog  window (Ctrl/Cmd + K); click on Units & Rulers and ensure that you have everything set as shown in the figure below. <img src="http://images.sixrevisions.com/2010/02/22-05_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Add guides to designate the content area 3 Activate Photoshop Rulers from  View > Rulers. Toggle the visibility of the rulers by pressing  "Ctrl/Cmd + R". Also open the Info panel from Window > Info (shortcut  key: F8). The Info panel gives useful information depending on the  selected tool. By pressing "M", choose the Rectangular Marquee Tool and  create a box that is 120px wide from the left corner of  the canvas. You can adjust the size by looking into the Info panel  while making the selection. Now click on the left ruler and drag a guide  to the right of the marquee selection as shown in the image below.  <img src="http://images.sixrevisions.com/2010/02/22-06_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the selection. Your canvas now should look like this: <img src="http://images.sixrevisions.com/2010/02/22-07_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> Creating the logo 5 Now we are going to create the  logo for our website. The logo is going to be very simple and it will  have a color gradient effect. Create a new group (Layer > New >  Group) and name it "logo". 6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital letters. 7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the Options bar when the Type Tool is the active tool. <img src="http://images.sixrevisions.com/2010/02/22-08_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 8 Double-click to open the Layer  Style dialog box. Select Gradient Overlay, click the Gradient Editor  and use the settings as shown below. <img src="http://images.sixrevisions.com/2010/02/22-09_design_smashing_website.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /> 9 Put the "SMASHING" type layer at the distance of 35px from top and 0px  from left guide. You can do this accurately using the Move Tool (V) and  your arrow keys. Duplicate this type layer (Layer > Duplicate  Layer). Move the duplicated layer right next to the "SMASHING" word and  edit the text to "Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color stop: #e5ad27) for the word "Dzine".</blockquote>

Verification: Hathara warak wissa keeyada? (Hathara wadi karanna 20)

Top Bottom