Create a Education Web Design In Photoshop

8:50 PM

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

Create a Education Web Design In Photoshop

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.

Create a Education Web Design In Photoshop

Step 2
Select Rectangle Tool to create a navigation menu set the background of fixed size 1200 * 200 pixels. Add gradient overlay.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 3
Next to background wrapper set of fixed size 1100 * 1200 pixels and white background color.

Create a Education Web Design In Photoshop

Step 4
Now we will design a web title, select Rounded Rectangle Tool to create a background.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 5
Activate Rectangle Tool create a box with a size of 200 * 150 pixels and add a Gradient Overlay, Inner Shadow.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 6
Create slideshows. We will make two layouts left to right to put a picture and writing.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 7
Activate Rounded Rectangle Tool to make the Continue Reading.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

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.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 9
Make a circle with the Ellipse Tool to change the fill to 0% and add a stroke.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Step 10
Activate Rounded Rectangle Tool 3px radius tool for making button read more.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

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.

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

Create a Education Web Design In Photoshop

You Might Also Like

0 comments

Google+ Followers