Create a Education Web Design In Photoshop
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIs8YQxbrnO8NwFANgj5AocJY7Nck1GUA7BZK-uAKabxcYwvX0QljkteJFHbEsbY4KDW0UNh3LX_WoSslniuOpuTk6yPdgVAGplyIedVp2av-mn86M30ViaGPa1KYxGCOuFaKaN6VTFhI/s1600/Create+a+Education+Web+Design+In+Photoshop0.jpg)
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 Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjEEw3fS_7vrAzsCB0GUPcho8YykvKtM0lcUEAo0rGXLNg6ICgDrjcKnJSqpe0CqwDv8-gipRT6ALzvNdM-ihk9mxiqOPQxKDc6Go8JJTGzf2AdmpRBW3GOqxbI20TrcoW_pqUenYTkyz/s1600/Create+a+Education+Web+Design+In+Photoshop.jpg)
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 Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMFo9YaOyVpVABhI7B5qi54vxVjA2Om8vyCxFTMvVn3mz3IDa1vlOjnLAyK2bMUz1c_hwBn1GTf4wSQ-6Z0OSbwtVA8pH-n-ST1PzCIXfVG9EXD1XZm6aHWXm02x9I41NPY9K_iHpQfBy/s1600/Create+a+Education+Web+Design+In+Photoshop1.jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWYdCfOvCsshzndm9eJ_2V7WRh9_jAdnjHkmhBEqbFBW45dfL-yTsHFV-4rPqsJGTgo_EII32FbU-InDK5NOD3h4vLQoUfdi5hNr07CUVGud6RpCX1fMYROUWjqBNMEgzui5ifga5_QgCg/s1600/Create+a+Education+Web+Design+In+Photoshop2+(1).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.
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFdNAMKfAK27PzsLcik0d2Z9QQPsXhoNtZihzSYLTb8rBBPnl0abXBqbDouMhG5tFFhu7uh63x_cZD5Wc3Pe55XK6wFmVUVQUIxC4VbQgsXstqTVjkvQzwsyAK5yN2xYNLBzp4LmbRKM_/s1600/Create+a+Education+Web+Design+In+Photoshop4+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCCxAacHuCp1-OJbjZJaszqg0giZWIWI7rhWzwfyJBx9vo7kHNyWBkFdWFqQ9D0OtB7-Tgg9G2JeL3dG6hco33ahHNDVePugG-3-8Jhm2PUT1Lfs9LXwRot_6vxaw5lSoah5i8JIR4lCRs/s1600/Create+a+Education+Web+Design+In+Photoshop4+(2).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDb6HiXwMpy0fKIN2KZetBJmujBr-jUKoqmCMn7U9ItSCNd0mhXAAMs4l8b-KPyQZxZ8Y4goPEftjlmixrBJq1CyT1ig-R7VGBojBvjsyhnnGCQZ7h3Ax1AjQlU43Y8ZfXWFSoQxAU5K8/s1600/Create+a+Education+Web+Design+In+Photoshop4+(4).jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtycssb_rccMqelGl_-NiFZStYAV5rMjrM1LMS8Etoah_2WkzSPMjl6XTHbQq75s92okvC8pCUTjHMr16J0AccYO6AOfdzMseBNbJzbrMwguOPLOzHjvHIvLimXT5oCoa09USFY1kjnZ5H/s1600/Create+a+Education+Web+Design+In+Photoshop5+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTggyGD7Z7a7J4tGTJVMR-V87KLvAkEhm5mmbun-fLEc0au6TQSMl96XYevyztFzTqwTLaLEb8SuywI5iU4bocT_aV_f9-ejYIZtWT1PSB3WzEz6_L5Tmk8mqEITDmWEyi0NQIMkaikV1/s1600/Create+a+Education+Web+Design+In+Photoshop5+(2).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf294sjV7AR-7orSBYKaVYa7j6FUdPbZlpllhNRdvdHXT34X1lhC76CcTb74LizCnXiZ1wP_QKTuilkewHY4iBapfJF7RObd1XsG2DRUl8_wUkHy8MRnrM8CElBFmH7QxP5f8ZAQnesS-0/s1600/Create+a+Education+Web+Design+In+Photoshop5+(3).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWwml5SqaaRUb5GdQVF-GrKqNvdbH5cEgWgBbqdf9_p-DPiukcfjdUt_y4TPyGxV7tsy92j4T4lF9EJMGoAIQQNYfox5tZSmLZRAUP4J1CVYsWXV5BGCZmIy5L-tLkbJv0O4MbOy_5T-K/s1600/Create+a+Education+Web+Design+In+Photoshop5+(4).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7xcagpviNBG2gyQP8Lri8fpUFmmhqUaSCnp4Hzo3-gRKwjp1MRL-O7tTmfeEiLNO0S6ARDwABMo3X8DThqJJbsscQFzrzeQPlFqe8tMt7zDbUIx8L6OxYkDVc01SbNnc_IB7mtUiAtS3/s1600/Create+a+Education+Web+Design+In+Photoshop5+(5).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnhxS3cUcmELMNDbeBuYP-zs9ED6RkCUDPFg7n7AQVBdfNhbYZ1mrnpsJK-CwWHcvj7u8QDpdA1V2JP7U1W8Iu7EkGUiD25sULfg1q7I16IDzaL12LpEOODv1iqXUuR3m8AnGLJbcZ2Pho/s1600/Create+a+Education+Web+Design+In+Photoshop5+(6).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OhlTPr6TLR22uHi7M63OvbRafezI81dKxqS9AJiviwrJHicQWoZ0gJFfXe7vCS0bqgfdFxfdCMnTf7uuqo7b6qLiAlFonGdUDlUqygakHD1xlNwvAbKByOhOpM1uEVK2KR64R7iMcwcZ/s1600/Create+a+Education+Web+Design+In+Photoshop5+(8).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibf7-6DSEs-1ixJ3zywpnbzdrQnrZOerwkTKVxsV61eXvBj9Id3VF464e9hi8Ay2xCjaY8JhEdW-HHkHmOMDbiMCcF7_tWBU0mTn9NWQ7QpETIkBZRRS0V673DQraW5gWhRuAK_13dReGJ/s1600/Create+a+Education+Web+Design+In+Photoshop5+(9).jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn_dDGgc1NO24H8ooaqfMFBsVuKZq8hGk5DLvwKjppfnyIIVZawXhh0I9oK_A-CCXf-uKUOEPJAOdCNW1zXZeJUUBEfH1U80KYvJvi_sGZiJVM5G0GyKY1lNr6nB8H0cUvbrjKbzdgUO5q/s1600/Create+a+Education+Web+Design+In+Photoshop6+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vlMqg1HoiKVBAtwa3qlCz2dIvj7eWNsRh-f4v4Kq2ZNkD7X3qEKc8HodqcH4vG2h_Bt6WaQNMSb6UEiU0m9HSwSYwFpzFgEVYPKchPD-pYptp15SL71060gdqOlvDjzqwBRmzBkksMM0/s1600/Create+a+Education+Web+Design+In+Photoshop6+(2).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCsjA9xlmvhlMcjdZt5z7kLtuGhpUX_fTMIgghU9D1_rrB23AlYnwHGW05QmkM0UsEyA2j6_VgzGkpXZJwRgx22xW9qQ-QlcsNYRSkBXbntyuYx2yl3Z8dUSDDQ0gwA4FPbHodplrMTaU/s1600/Create+a+Education+Web+Design+In+Photoshop6+(4).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQu6FQ4SeNhUbDYY9aVhxMCRnpC2bKahjyGqUBIR4vPotZtLYCgSGWizjsVXGuqhePMZqD5z5xHF0znwGXcuabvjBrVZ29fnUjtvexQmZPHVZ6Mw8FXhnbpzLx8nHjMxBqiQccxedQNmG2/s1600/Create+a+Education+Web+Design+In+Photoshop6+(7).jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSiYf862PMaxi84ObuHfjzTRnlqKSKPq4qJq-uKPA26x5SlsmivzEYfPGPV8P1DwrKDdDPuA3nJNT5YDuSU9DTpf2Gj-PNZzdbL4MYnURZDOBjqISN9kMFaF_ergpLYVSqewzYOS4l_tsi/s1600/Create+a+Education+Web+Design+In+Photoshop7+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNveQYBBvZ-85930ZaD2G8G0VnPofq4KQXMHjZYl3citmLP9ESLyOD8pAgBvjZBh_stFAt6P_ge2wVZpZWYY1SciQ6SHVczlfOpOoHB-WhvV6sv2a37UfVWzOU8qrNWaPjYmQn0KsXLGZ-/s1600/Create+a+Education+Web+Design+In+Photoshop7+(2).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOvoqjwuADYH5uhIfKWRcmZEJPWfaunagvZIS0GEQftAnG8pich6rrbnBCgSQ8iUJf2bb2nHSGZ_xG1t2n0aYvdHBhcZf2LyMnKvcnqcoFVgXCTK5sY_w5wCGEaPBOfjOwJRPR-viV0wm/s1600/Create+a+Education+Web+Design+In+Photoshop7+(4).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslTcFBc5MM3VXlu0-7nSRObHj00p9HGUYWMVNCgNtqI8AsBORnl9DbPQMAGBXprDp4cxaxMUbhLfSv-ued4m-vYKvgSuRr5cXLLHij86CiIwS1JlWyzspev6XkGsJD_5JsIXj4zid_EeC/s1600/Create+a+Education+Web+Design+In+Photoshop7+(5).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigugDGdevRJy78XSR6MSDC-3o-dktqKrV0jX7uB20VBOTqQT1dtnIDmTnCDswiT8i98Tp6LmCnQl24ZDk0yvBdKKWM-pSOOhUfK_ZrL0sPXOwo1uSVsUysaoEszSwf4WgEq3pJ_-yI3Rh0/s1600/Create+a+Education+Web+Design+In+Photoshop7+(6).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGJPkuHolVL9tpxdPQAIDIAOoWJpEh3pOLjIjg5MkpJ5zAtqtKokpPlwUOy8Ve17negd_yy6ooG9H_aNe1wG3e1btIKt2PeqlEU_OblZq8zS4c5vqcKBh5CTQ7KHbcpG0XidzDiRBVRwcg/s1600/Create+a+Education+Web+Design+In+Photoshop7+(8).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.
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJsPct6VqY4fiynx7BAMKhhrpLMq-hcy0kCl3WKWlj6Rolp0Z3krn5qRChv5t4MEYbcG8Oxu9Ht0gjPNL-O3H8yfsWLT4kJGb5zMHwcSazlveSpcS07EvrsUGrajX-ZH05djeqbDUfDZ5/s1600/Create+a+Education+Web+Design+In+Photoshop8+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj53gHQWSoL_yha02Akvdjp6C5E75fUK9u9OBMWS_GvmNVkuBouIAwg56e_JCvFvpJFpva0KrktNRHL7oWtb946FYCNJANIDpUxaRCaj6AqO_vqu7HEOlxg8LlQ36U-8s4aGyi3IPo6fqNZ/s1600/Create+a+Education+Web+Design+In+Photoshop8+(3).jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigVWTZziCKqRV9SZaSV3r6wuycir8_wQOXth39YfvURt7IeEz3P9Mqfa1AkQBTlpbTZbiveAX9IugMkldbXG0ykjSBqnmaXgkleTrhs969G_6KEMFNf8tVKhGEHsGNbHfaVnvejPecJIoH/s1600/Create+a+Education+Web+Design+In+Photoshop9+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBufsibHzXAQD3uKm-omQVqds4ZYpmdXCB8BywFxRHqLz3treTgG5zVemS5uB11R__LFklLlmJoNzcGCKVCzYx9IBgm8UC5t6cfcX70GJh160kIq_EPhlTnOmwAzy_pCILYCYm5RqDgDX/s1600/Create+a+Education+Web+Design+In+Photoshop9+(2).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dXgks_Dqsun_XHa_QZvLXpck4q0JMTmM0MaYdYoGYD5uUgpQV_gMyK7zojm9Xk3CNUNvAqYEjGUUGbJKynp6YRMp1PEVNd8Bhn2Jj8ZdrXC3QZkqDk_PsQnZkTclrIuR9mRAwRTo6WB7/s1600/Create+a+Education+Web+Design+In+Photoshop9+(3).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI9Ig5v-8S9HN_nFm_gsw9_lQH_DfORr2tGwnyQKhWFSFdlelagsd1QcVUzhATUU-_HrkVVVtutcDel49PP8aAGBmInnTTE3NAJh6R6zCUMdkzefobLlBZY3VF4MHq8AlWxlIVFmHH7RW/s1600/Create+a+Education+Web+Design+In+Photoshop9+(4).jpg)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7PhiTENhboKlNiWgi9sFFnI_Ez77Rfg_NiHNeHBb-GVd87SlrV4GIYi4gEJPXzMAfFv6YAGYIBWVqkpiXv1FWyaAD90Pk12jKEUL7Q5joMWDJmoUUjAzzYJTfHxOL2r4mVP3RDMGjSb6/s1600/Create+a+Education+Web+Design+In+Photoshop10+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSiQ-cudXJjrrLV8Iwgusil9AFkpdSQm0Zrwpgd2sZ6_1vZ9wPNdM7Xlfp4xw_FflfU2GyFcWWDTs36oHEyAokT1v50vZseklQuzuWiRwh1E727orD_g3S5wrjcPEZ7AtkLuyjgdB7Pp6N/s1600/Create+a+Education+Web+Design+In+Photoshop10+(3).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnalVfKK7vKca8rNXo5roH3hn0Cm-gYNN0JaSFMRBNr7i_UgVlHJH5CLlcfdhxBNHl0Y_E-67KjuFVTupbrArO05gaNtdWzj2wQpCAu-MZjOhCmEHMy2WyduV3NgzeZBKCDcF-GsOaIFM/s1600/Create+a+Education+Web+Design+In+Photoshop10+(4).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYg2vPpjGAKGpqTBrXvaLEee_nkASP740qm2iAuYGLzAnoT25z0bYKt585a4D88oBlXl0ANpMOQo1dwOPRW1u9796ZLuncv6MOIWbhGaU7nsw3hRWkON0kLNal3sTOqdC8S7uJ2o3iSnA/s1600/Create+a+Education+Web+Design+In+Photoshop10+(6).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7RpmkcEXrhhTOLLcU3qCgONEcNglVQJn6-rWwFCYmDEQsSd6zGug2KxbdnluiBDJzibIazqUBKEyPs3SIRCZK7SjFUwLqcnIiocLiSWcFe5QJOUCcl03cbC7x0x3WU_VUwv0zWQWldPN/s1600/Create+a+Education+Web+Design+In+Photoshop10+(7).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.
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUfVZAnfEomMVYXl8F8klk91LBkssbuo2-bNFUcC9jJY3OHNYmhsd2WYQz6-TO5JNr7ZkRbAiwIPh0b2STqTdwTIzSSIKP3Ap_-yoVyL5w8R-voh-59FDpuOAG4BvPkpqFBAzKD6k70p3T/s1600/Create+a+Education+Web+Design+In+Photoshop11+(1).jpg)
![Create a Education Web Design In Photoshop Create a Education Web Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjEEw3fS_7vrAzsCB0GUPcho8YykvKtM0lcUEAo0rGXLNg6ICgDrjcKnJSqpe0CqwDv8-gipRT6ALzvNdM-ihk9mxiqOPQxKDc6Go8JJTGzf2AdmpRBW3GOqxbI20TrcoW_pqUenYTkyz/s1600/Create+a+Education+Web+Design+In+Photoshop.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