Servage Magazine

This is the last article which concludes the example template design, and here at the end you will learn how to add a footer-section to the PSD template. It will consume the remaining area of the canvas below the other content. Start by drawing a rectangular background with the help of the rectangle tool, filling the remaining space. Then select the line tool to draw a line with the dimensions of 940 by 1 pixel. Here the fill of the layer has been set to a darker color so it gives a nice contrast to the white background. Logo Open your logo in Photoshop and press ctrl and T to resize it to fit in ...

In this article you will learn how to add the company logos of your clients as references to potential new customers. Create a new layer group and name it “Clients”. To add each of the client logos, first select the rectangle tool and draw a rectangle in the dimensions of 1400 by 103 pixels. We have kept the background of this rectangle white. Example logos For the example logos we made up four fantasy logos, in your case this should of course reflect your own real clients. Add them to the Photoshop template. Select all the logos and press ctrl and T to transform them. Re-size the logos to a size so they fit ...

In this article you will learn how to add a video portfolio example on the right side of the portfolio section. Start by drawing a layer showing a video of the team where visitors can click and watch the video. Video box For this, select the rectangle layer and draw a rectangle of 320 by 168 pixels. With the help of the move tool align the rectangle in the center of the second half of the section. Here the fill has been set as #eceff2 so that it can have a different color compared to the background of the section. Name this rectangle layer as “Outer rectangle”. Select the rectangle tool again and create ...

In this article we create the left side of the portfolio section. Start by creating another layer group and name it “Portfolio”. Select the rectangle tool and create a rectangle with the dimensions of 1400 by 596 pixels and name this layer  “Background”. Here the fill of the background layer is #f4f7f8. Portfolio quote from customer Select the Line tool and draw a line of 960 pixels by 1 pixel. Use the move tool and place it on the top of the portfolio section. Press shift and down key 4 times to set a margin of 40 pixels in between the horizontal line and top of this section. Select the line tool and draw a ...

In this article, you will get an overview of how to add various plans for the services offered on the website. Box for "Basic Plan" Start by creating a new group and name the group “Plans”. Click on the rectangle tool and draw a rectangle of 1400 by 321 pixels. Use the Move tool to place the rectangular layer below the previous 4 column layer. Here, the colour #3ac162 has been used for the background of the section. Create two new groups inside the Plan group and name them Box 1 and Box 2. Inside box 1, create a rectangle layer by clicking on the rectangle tool. I have kept the dimensions of the rectangle to 300 by ...

In this section, you will learn how to add icons and buttons to the 4 columns. There are different sites available where you can find different types of icons that you may need for your website. In this case the icons are taken from www.iconfinder.com. On this website, you can find different kinds of icons and these are often free to download. We searched for laptop, notepad, iPhone and bulb keywords on the website. Download the PNG format of the icons. Once downloaded, select all four icons and open them in Photoshop. Select all 4 layers of icons in Photoshop and transform them by pressing ctrl and T to a size where ...

In this section you will learn how to add columns showing the services the sample site company provides. Four columns will be created in the template. For this start with selecting the line tool and add a line below the banner in between the grids. Here a distance of 4 pixels is kept in between the banner and the line. The fill of the line has been kept as #bebbb1 and the shape stroke has been set to 1 pixel width with the stroke being set to no color. Increase the height of the line to 5 pixels so that it is completely visible. After this, start with the 4 icons of ...

In this section, you will learn how to add layers to the form in the banner section. For this, start by selecting the rectangle tool to draw a rectangular layer with dimensions of 460 by 304 pixels. Place this layer at the centre bottom of the banner section. This will be the base of the form. Form title Select the rectangle tool and draw a rectangle with a resolution of 460 by 63 pixels. Place the rectangle in upper section of the form. Use the direct selection tool and move the lower points of the rectangle on both lower left and lower right side of the second rectangular layer. Select the text tool and write ...

In this tutorial you will learn how to create a banner in the PSD template we previously started. The banner is the large eye catcher at the top of the page below the header. For this, start by selecting the rectangle tool and draw a layer with a resolution of 1600 by 540 pixels, and place it below the header section. You can select the move tool for moving the layer. Since many different layers will be placed on the header section, it would be best for you to darken the color of the layer. By doing so it will be completely visible. Please see the screenshot given below for better understanding of the ...

In this series of ten articles you will learn how to build an entire website design from scratch. The starting point is a blank page and no prior Photoshop experience is required. The final result will be a finished website design template in Photoshop PSD format. In a later series we will look at building the HTML. We first want to set-up a grid in PSD format for the website. Starting with a grid is good because it gives structure to the design. For this, we will go to 960.gs and download the grid files from their website, because we do not need to reinvent the wheel. Extract the files from the ...