![]() Name this layer “floor”, double-click on it, and then use the settings shown on the following image. Select the Rectangle Tool (U) and create a rectangle with the height of 100px and the color at #747b81, right underneath the first one. Step 8: Add Another Background for the Featured Area Set the Blend Mode of this layer to Overlay, and reduce its Opacity to 25%. Notice that the selection of the blue rectangle that you made earlier has been used as a mask for this gradient fill layer. While the Gradient Fill window is opened, click on your canvas and move the white gradient at the top of the blue rectangle. Then go to Layer > New Fill Layer > Gradient and use the settings from the image shown below. Hold down the Ctrl/Cmd button and click on the vector mask of the “featured area bg” layer to select it. Step 7: Adding a Gradient at the Top of the Featured Area Then set the Blend Mode of this layer to Overlay and reduce its Opacity to 10%. Then choose the Gradient Tool (G), set it to a black-to-transparent gradient, hold down Shift, and then drag a horizontal gradient at the left side of the texture and another one on the right side (refer to the image below for reference). To make the texture appear only over the featured area, right-click on the texture layer and choose Create Clipping Mask.Ĭlick on the Add layer mask button from the bottom of the Layers Panel. In order to do this, select your entire canvas (Ctrl/Cmd + A), switch to the Move Tool (V) and click on the Align horizontal centers button from the Option Bar. We need to put the texture exactly in the middle of the document. Use the Move Tool (V) to move this layer into your main Photoshop document. Select the two layers, right-click on one of them, and then select Covert to Smart Object. Then go to Layer > New Adjustment Layer > Black & White and use the settings from the following image. Step 6: Adding a Subtle Texture to the Featured Areaĭownload this texture and open it in Photoshop. Name this layer “featured area bg”, double-click on it to open the Layer Style window and use the settings from the following image for Gradient Overlay. Then select the Rectangle Tool (U) and create a rectangle with the height 300px and the color #c0ccd0. ![]() Add a shadow to these layers using the settings from the following image.Ĭreate a new layer group and name it “featured”. I used the font Myriad Pro Regular and the color #c0ccd0. Select the Horizontal Type Tool (T) and write the name for your navigation menu items. ![]() Double-click on the text layer to open the Layer Style window and use the settings from the following image. Below are the character settings (Window > Character) for my text. I used the font Myriad Pro Bold Italic and the color #c0ccd0. Activate the guides to help you align your text. Select the Horizontal Type Tool (T) and write the name for your web application on the left side of the header. Step 3: Adding the Name of the Web Application Select the Rectangle Tool (U) and create a rectangle with a width of 1200px and a height of 80px, using the color #3b3c48. Hold down the Alt/Option key and click on the Create a new layer group icon from the bottom of the Layers Panel. Then go to Image > Canvas Size and set the width to 1200px and the height to 1400px (we will give ourselves some room on the sides so we can see our background better). Make sure that you have the “960_grid_24_col.psd” file open in Photoshop. I prefer this one because it gives me more freedom. Step 1: Setting Up the Photoshop Documentįor this web layout, we will use the 24-column grid. Now we’re ready to start creating the web layout! To see the exact size of a shape or selection while you are creating it, we need to have the Info Panel up toggle its visibility by going to Window > Info. ĭuring this tutorial, you will need to create shapes with specific dimensions. To show the guides, go to View > Show > Guides, or use the keyboard shortcut: Ctrl/Cmd +. psd files already have Photoshop guides set up, which will be very useful to us and will save us a bit of time. Go ahead and open that up in Photoshop now.Īlso, the. Each of these files contains a grid with 12, 16 and 24 columns. After you unzip the file, go to the templates folder and then go to the photoshop folder. We will use this grid system to organize and arrange the different components of our web layout.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |