Today we are going to show you how to create a simple home page design for a web site using Adobe Photoshop.
The web page is simple but yet cool so it’s good to start to create some web pages of your own.
You Should Read and Agree to the Terms of Service Before Purchase!
- Open Adobe Photoshop and create a new document of 1600px x3000px, and make it a Landscape mode save it as Homepage.psd. Make sure you will always keep the Ps grid on ( Ctrl+” ) in order to make the webpage in pixel perfect. Do not mind the height of the document yet because if the height is more than the design that we are doing then we can crop it in the end of the design.
- Now we have to use a background image for the web site. We have used an image called Bg_image and placed it as the background of the web page as shown in the next reference image.
- Now in the top, there is an empty part where the background color can be seen. So we will fill it up with a light grey color that has been picked from the top area of the background image and use it to fill that blank space ( #e3e3e3). Now drag the layer below the layer with background image and erase off the top area of the background image. Now it looks like the background image is filling the whole area.
- Now select the background image and the layer with the gray color, fill and merge them in to a single layer and duplicate it. Then make the blending option in to multiply, this will make the background of the web page more eye catchy.
- Now for the next step we are going to add the logo of the site design optimal .com, for this I used the font called Roboto. It’s a stylish and elegant font that can be used in most of the designs. The font size is going to be 75px. When you are adding this logo make sure that you keep a 50px gap from the starting point of the document, and do the same of the end point of the document when you are adding the content to the web page.