Create Clean Simple Minimalist Website Design In Photoshop
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnczw-SYm6HJN0nfWM1keBxj19cmYA2Im7jlUYxFUJC7OZfs-nD5UUXAeCgJUnYusJFybFOFLE3uMcXUiX0uYumjs2CEXU13F0lJMHS0e2hUz7g7qTw7YgZ60USQm7Po8Oh8TKOVAxGFeA/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop.jpg)
In this tutorial I will show you how to create a clean, simple minimalist website design using Photoshop. Background bright design with smooth gradient in topography and accents of blue, orange. Let's get started!
Step 1
Open Photoshop 960_grid_12_col you've downloaded activate the Rectangle Tool set 1020px X 130px Fixed Size, create a rectangle as a background field of the header and add a Gradient Overlay.
Open Photoshop 960_grid_12_col you've downloaded activate the Rectangle Tool set 1020px X 130px Fixed Size, create a rectangle as a background field of the header and add a Gradient Overlay.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4idO2-Cy7FpxLw9bNB88t-B6F-BcpIoKy-QwD4bW2FDRTj9ZmufYdTgGiAH9b4U44tAu5rYJKyEuvqTZHh4fFUI_4tUtZdne2CMe4aMREiwYm6ZiqKJHF0ZF8KsJsc0ehIthb6dcutN10/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop1+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVeuAd3xPDd1SD9OSaQbPK_VMIa1dGN77wABX1Lco8NB8pLRR9MkXSOgjj5pXw_yqGMUqobcpBogsQh_MmNI1hgENQWqoGyZhApeghM8bruGsaiA5tyHkzSeCrdo6cGw7cr5_LUo99EJMl/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop1+(2).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-m913pSXJmT4H0vrIgQ9m12P5DIW2KaVsunsnE_EBnDgr0AJnUu3iRNKfGlNkuOCm1PMcaRKS453t7BzL8OdTm1rU8ME1CQWVO90MOB4b0KMb_BJQncU9AacT5UjtuJ6En5ovb4ZxSB4x/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop1+(3).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2jrbJXNgeQ0y9CVsGTqBcXHXwDE8DjgwbY3KHE94oriAMUQbK3lax9m-FKrjDgD_shWjTLaP-ytUOOuyzhMmbVFxPXYp_kCdMUY44hP9GXI6QyW4EMZauHw1q778XZUeEhHZrIx0Q-1A/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop1+(4).jpg)
Step 2
Activate Horizontal Type Tool set font type Arial Rounded MT Bold 29Pt size color - gray #6a5b58.
Activate Horizontal Type Tool set font type Arial Rounded MT Bold 29Pt size color - gray #6a5b58.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0eepQyRb9uEGWhNLssNbKNL3C6L6zrmgxY8_mc6rsgeT4-ZlX6tfg-gx27s6MfB_moTmihUUZAFODAwpxkP5b4eKnysmqihZFXy6ElaCdpqXijbOfO_kx7yX2Xo1_oHXxFBjY_Htb0LP/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop2+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ntDwFgujTsZNA49hyphenhyphenuLD3qhSRBgi-sq45CgajtAqmb78gsSahpaKDSe4Ip_SPgkTQAPidhQVBVcfnM6zLpg7trRASLuvEvGCD8SqLd5t78aMO8TXrP5JHOjLfRzRLEZI813PVISvWd3A/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop2+(2).jpg)
Step 3
Use the Rounded Rectangle Tool to create the header menu design set the value of the radius of 7 pixels and the color orange #ff7d4c.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZk3SjIl0CC25lzsVF2imc4ozC8-9LFOrX9RXXqxvifuK7JK8A9yk9-GKuGsBOwiAiznCneg7iwFc5Z6Iw88aWeRSPAiCetIUcdn_wRwQKtINkgynP-UDIJWerpGqx55rQ3AAqFVkkER8/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop3.jpg)
Step 4
Duplicate three times and change color - gray light #c2b3a8.
![Duplicate three times and change color - gray light #c2b3a8. Duplicate three times and change color - gray light #c2b3a8.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfoTPz1Gu5qVR4sZe-oJvVPQBvFijb04aNeGzmXLVInv5lgNkF_ePqRUCMO-hjaGoMd8bDXvRJcVL-OoKgb2IKs8EYFdApfOFZJJ1ewrSviG75RIUde6gbDsa9cAj5-PkW5eWzbZ-FhxP/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop4+(1).jpg)
![Duplicate three times and change color - gray light #c2b3a8. Duplicate three times and change color - gray light #c2b3a8.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIylG2Qa8UII_pNppsPjl47LwnfYIew1a87a8LIbsgvVYwyRGlil9bQ-Hq5dfRGqSTXyG3Yfod8kv5JorNnk1vGCgCkJBHCOJJXio924fhKZJXZp54JDTmOkCb2vIIPBUV3L1fiUGdJz5/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop4+(2).jpg)
Step 5
Now we will create a second background using the Rectangle Tool size of 1020px x 160px fill with color # f0e8e2.
![Duplicate three times and change color - gray light #c2b3a8. Duplicate three times and change color - gray light #c2b3a8.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjANjLocAjrobhyWVCCfZ0yCyWND00luCiEliJKbKtMVfdexCasLpMjnJyA7Kava8dTEFm2wM6UjpR10qXC9g4GY0A900If-tJibbMvLM29UDHN3CntwXkEfEKpDrCGMCXMWxYBfHGxqBYE/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop5.jpg)
Step 6
Activate Horizontal Type Tool for writing and add a Layer Style: Gradient Overlay. See the picture below!
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoBKlHn9PHSgE2RDgt4w1BA2C2NrzmY-lMA2VwYNWR_vnm7xKxwCNO3StY6QBYQrRPelkFq5l64Mv1Wvs4fJ_oIhkQwTuVszOy8ou_yt_8atvFDMhqdehWzw7G3_gCUkLpHOErm9WpYv2A/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop6+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ardnqWLf1PPy_0NO0AqY9YjvC3ziomP4hpg6CDP8-09uedG4GWnJk6ypcefMRYsq-5CSck-Bu7YVjptvi7YxCmBL2xkv82Dxxw3_5TA8qD6raXWgUyMukthxJjGqM0IMcar2hdk1qUcn/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop6+(2).jpg)
Step 7
Duplicate the shape layer 2 and change the larger size.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGTFuVki_vrBRlU56nqgR9T4vhx9odKsDm0_e7XOuUsQlUNsZT7LPp694oOYdGOnSY-05kKWt4AxeU9RSAF3M9vgAjjHT-ufiPDBR5KePszLxIG3XFCKpM7f8YGoGKwMgFue9mPG24eBk/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop7+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ_OTejvmX5B-pNNtiApvdLE_imEKvUXB13FHWUHQk1qIT7mAHmNUUDQg480DQy3xQOa9TJ4UxBqOYwdNc5UHvvrGvWH_rTQ2u8sgbEnlI9Spvs41q4rvIQl-j77DXR7dXd8g8v4jQi5o9/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop7+(2).jpg)
Step 8
Now we will create slideshow design, use the Ellipse Tool to create a circle to put an image.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgUM3GGzdCkSRXD7KwflpfCJ-gen9Xvrw_enogdmfS-GG2c4_IM6MaJPOI1fOB1M4ptQLXDTHG-ZRGxOMgFGfPCZx9axFDioq2EHAqTdD1y1roNjFuhmzOabZapYL3auK5Z9n7TjGCHLuT/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop8+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkeuNI4nSdE5mYVkD7NzioSIuj-glwHx9geikT5NxRTt2NrqeGqvIbhYtghCFR55XE1T23qeIUC-15B1fCSmVEsgoznPKrjp6kVFi19WFcy0Mf-ucBHTKSudAdT6Lws2Z-PS-78nYtn1-Z/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop8+(2).jpg)
Step 9
Go to the menu File -> Place open the image you want and choose Create Clipping Mask to put pictures in the circle.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3vnWFLJrfWC2Doqt8RsQvT9vcpdzTCExhWgMoR0iQ4OoCL19YeDHBVHxs5L-HmiBuYYYgNUlT-N9JLHfssy1_7Q3auN66L5dMHUs6yEV4wEdRsicbdX6mDhMUIjpB25V_skGRQo8E5aoA/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgClJSEq-HV_0fqTttLQ5CXqsKL_Lu4aGPLENH-9Q2U64f7uCJX8jzK91W8BQhlrVt5lfr83A32YQfGIF8JuSFc3fQi9Fxds31P9zWAKUbxAeCH8UAfORWuOzuVyU3DarptxQiq9wdvf_k9/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(2).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ie7Z30dvrW8u4ztQLk_v5QSbKi5GAXWMg4lODi1ZV7xEjj7A7K42KEHXkjAxMEW8VV1NAbEbHCvCCtAU35sNFpQSghsmvkg3P-gFwVipSnHtV6utIX2ju7ThfnmvWf9lsfam6vXxYCBp/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(3).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9_x4jG_LNHAUCnL1fUQIN31O_1D4pby26xTm4gcV2aze9fo6y5JNwuUcvee2vZugkFvjhyphenhyphenwouCNbi77UTaaYEsrbEtnWXwL-AlXo4tDJngbXTcjtbe5Qx3BPxiPgTLFjBvnzgsR-vJsO/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(4).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgvap5E_lWnmkbim0fDeDbL8eBGBGKyrOuGxWWykLTmBFoPpW3xYqEFCdiWc8SO2-HhrfXS_D1ac0KNhFkIukA3c4jieI-nj9Bzm44NqZhenYiumlfuTSPe5odPHHBFlPT88Rmsc8MRGR/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(6).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEiqAv6Zk_u9FVqmSkJf703IQC_l__lEuRR7LMT1lzxDmMlyCJmNb3B8ShfrMiEktHQazgjzhXVSfpd3_8V3vW00qhyphenhyphen0t-5DdVk_hxfYMXtlVtlvK8kxbYi84JqBIv22twREmeB3eKMrWt/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop9+(7).jpg)
Step 10
Layout of the content is divided into three columns Arial font type used. Use the Brush Tool size 10px color orange to make bullets.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN_GiInXAtTAirb6B3EXd3uTT0ElrO6Lb5Rk-uhXt7d9ZCMPtNWL5uXlfpI4JYomugURAz3CFJqhKP-3VEP-shT89WE1jFD_Ye2IggLAoS6xo53VPnufdGobuGvBvuZ7pCYXPRYG_glWTt/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop10+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvjeMU6hLxJEObw7BuDnrGceokyU4ABqhXeDRVmEkJUS5J9PThNO7z-WaB3f4EiSVih4edk55nrynIzQSlB3psuXH7_0HOXNtI3C3iDFQAk-IRWqPeU8vw2ITcK5UJiA87jFn5cb7iS4r/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop10+(2).jpg)
Step 11
Use Rectangel Tool to create footer background filled with gray - light gray and text 12pt Arial font type.
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-XhrRBesDG7Znpl4AUHLcJv7B2C8i9M2XaaILgGv4QmQU1sOYuW08hQRQKqzdU9cVpEh3trkhQjA0TCav8-TzXP4vDdT2X4TmqDQed1oFwHYhaQ4lJuOo-F3Z50jSm7himNGSkyjwL-8G/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop11+(1).jpg)
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiENnz9XAsVRGF2GMd58UR5dCc1zW-YHKmgM_cD-SBcsGgxe36lDBw7eNqQvaD8KsHJ6fBC1BOIWLkPIaPMehSmyt8LVVmTHIpi9X0AHQwGWQYROCOMJfTELPoYBhUTK2h_CY-9cJ_IDKS/s1600/Create+Clean+Simple+Minimalist+Website+Design+In+Photoshop11+(2).jpg)
The final result
![Create Clean Simple Minimalist Website Design In Photoshop Create Clean Simple Minimalist Website Design In Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7VujFG3TUdoNZlrgmcmL7odIZRMBZ4sKwsQirAd489PCYYFqhO5S1g7VPjtYB6LYK9jAl32oUE02FEyZ4JCBL7Vs5QsWuhlvFPJ3MxtkTW3jNS3OJxjsN67InAM2S-_IADUfap_8tItx/s1600/0.jpg)
Comments
Post a Comment