Create a Education Web Design In Photoshop

In this tutorial I will show how to create a education web design in Photoshop. In navigation menu I made a big and the color Gradations of blue sky for background color. We use a white background color for the slideshow and contents, because the bright background we can uses the soft colors for font and button.
Book used in this tutorial

Step 1
Create a new document sized 1200 * 1600 pixels with background color code #ebebeb then select the menu View -> Niew Guide. Horizontal 50px, 200px, 600px, 800px, 1400px. Vertical 50px, 300px, 500px, 700px, 1150px.

Step 2
Select Rectangle Tool to create a navigation menu set the background of fixed size 1200 * 200 pixels. Add gradient overlay.
.jpg)
Step 3
Next to background wrapper set of fixed size 1100 * 1200 pixels and white background color.
Step 4
Now we will design a web title, select Rounded Rectangle Tool to create a background.
.jpg)
.jpg)
.jpg)
Step 5
Activate Rectangle Tool create a box with a size of 200 * 150 pixels and add a Gradient Overlay, Inner Shadow.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Step 6
Create slideshows. We will make two layouts left to right to put a picture and writing.
.jpg)
.jpg)
.jpg)
.jpg)
Step 7
Activate Rounded Rectangle Tool to make the Continue Reading.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Step 8
Activate Rectangle Tool set fixed size 366 * 200 pixels. We will make the same design on the navigation menu so you can copy the layer style and duplicate twice.
.jpg)
.jpg)
Step 9
Make a circle with the Ellipse Tool to change the fill to 0% and add a stroke.
.jpg)
.jpg)
.jpg)
.jpg)
Step 10
Activate Rounded Rectangle Tool 3px radius tool for making button read more.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Step 11
The final step makes the text in the footer activate the Horizontal Type Tool and set the font, color, and size as in the picture below.
.jpg)

We offers Professional, High quality, Web Design Karachi we are a company based in Karachi, to offering high-quality and professional web site designs.
ReplyDelete