Hello Readers, I am glad you have reached to this part of the tutorial. As you are here I believe you have already read my first article and if not you can still go back and read it first to stay in track of the series. The article may be found here.
Let’s get started…..
As we have already determined on what will be the outlook of the website with the help of the wireframe we did on the previous article, we will proceed according to it.
Today we will be working on the top, menu and the banner section of the site as mentioned in the wireframe.
First of all we will open Photoshop. Now we will hit the button (Ctrl+N) to create a new document to work on. While doing so, a dialog box will open up. We will change those to the following:
a.) Name: Give any name you feel like
b.) Preset: Select the Custom
c.) Width: 1600 pixels (You can take any but more than 960 pixels)
d.) Height: 900 pixels (You can take any according to your needs)
e.) Resolution: 72 pixels/cm
f.) Color mode: RGB Color 8bit
g.) Background contents: White
Here is an image of the settings. You can click on the source url for a bigger view of the image.
Creating a Rectangle Shape for Future Guides
Once done hit the ‘Ok’ button.
Now we have created or workspace on which we will be creating our site.
The next thing we will be doing is to select the rectangle tool (You can also access it by hitting ‘U’ on the keyboard).
Make sure ‘Shape layers’ option is selected. Now we will select the geometry option and set a fixed width of the rectangle we will be creating.
Once all the settings are set, we will be creating a new rectangle of which the width will be fixed and we can choose take height.
Centering the Rectangle Layer
We will than select the rectangle layer and the background layer together. To do so, we will first select the rectangle layer and by holding the ‘Ctrl’ button on the keyboard we will click on the background layer. Once that done, we will select the move tool (You can even select it by hitting the ‘V’ button the keyboard). Now we will center the rectangle on the workspace by clicking the ‘Ailing Horizontals Center’ button. This will bring the rectangle on the center of the workspace and this is where we will be creating our website.
Creating Some Guides of the Workspace
The next thing we will do is to create some guide to be sure of the working space. To do so, we will hit (Ctrl+R) on the keyboard which will bring up the rulers on the top and the sides. We will than, click and hold on the ruler on the left side and then drag a ruler to one side of the rectangle we previously created. We will repeat the process again and drag another guide on the other side of the rectangle. Now as we have our guides, we can either delete or click on the eye icon of the rectangle layer to make it invisible.
Designing the Top Part of the Website
Select the ‘Rectangle Tool’ and create a full width rectangle similar to the one in the image below (Remember to change the Rectangle Option from fixed to Unconstrained). Once done select the rectangle layer and right click on it and select the ‘Blending Option’
Under Blending option select the ‘Gradient Overlay’ option. Next click on the gradient there and select a gradient you like. Once done hit the okay button.
Next we will select the rectangle layer and again right click on it but this time we will select the ‘Duplicate layer’ option. On this new rectangle layer, we will select the ‘Blending Option’ and uncheck the ‘Gradient Overlay’ option and choose the ‘Color overlay’ option and choose a black color and hit okay.
Next we will select this rectangle layer and by selecting the ‘Move Tool’ we will move it upwards as shown in the image below. Once moved, we will than lower the opacity of the layer to 40%.
Next we will write some text and menus to be added this section. To do this we will select the text option on the tools panel and click on the workspace. Once done you can write anything you like and then format the text looks from the character panel according to your needs.
Next we will be inserting our logo. If you have one than you can follow this process. Make sure the logo has a transparent background for better looks.
Select the file option on the left corner and click on the place option. This will bring out a browse option. From this you can browse your logo. After selecting your logo file click on the place button. This will place the logo on the workspace you than have to move the logo and once moved to the desired location you hit the ‘Enter’ button on the Keyboard.
Designing the Menu Part of the Website
In this section, we will be creating the menu for our site. We will be selecting the ‘Rectangle Tool’ and choose the ‘Rounded Rectangle Tool’ and set the radius to 6px.
Once the settings are set, we will now create a rounded rectangle within the guides we previously created and set the color to ‘7a0000’. To set the color, after creating the rounded rectangle we will double click on the ‘Layer Thumbnail’ of the rounded rectangle. This will bring up the color option of the Rounded Rectangle and here we will be setting our colors.
Now as we have the background of our menu ready, we will now be adding the menus of our site.
Designing The Banner of the Site
For this section we will be repeating the same process as of the menu but this time we will be creating it a bit larger on its height. By doing this we will be creating the container of our banner.
Once done, we will be now placing our image for our banner. We will use the exact same process of how we placed our logo.
Now if the image you have placed is larger than the container than, we will have to insert that image in the container. You can watch this tutorial on “How to insert an image inside a shape in Photoshop” to get an idea on how to do so.
This is where we will be concluding our day. On our next day we will be working on the other parts of the site. Till than Good Day and yes do not forget to leave your valuable comments.
ConversionConversion EmoticonEmoticon