How to Create a Clean Website Layout in Photoshop Part 2.

  • Published on
    30-Dec-2015

  • View
    215

  • Download
    0

Embed Size (px)

Transcript

<p>How to Create a Clean Website Layout in Photoshop</p> <p>How to Create a Clean Website Layout in PhotoshopPart 2Step 9 Create a new shape: width 940px, height 372px. Ensure you fill it otherwise next slide will not work</p> <p>As always, add some shadow:</p> <p>And a border:Blending Options-&gt; Stroke(20px, color- #6bafff)</p> <p>Step 10To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.</p> <p>Step 11 add additional icons Add them to our design</p> <p>Step 12Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px</p> <p>Play with Blending Options: add a white shadow, colour overlay ( #6aaefd) and an inner shadow.</p> <p>Copy the styles of this layer and add it to all your icons:</p> <p>Step 13Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.</p> <p>Step 14Create a Read More button with the help of the tools that we've used before.Blending options-&gt; Inner Shadow, Drop Shadow, Colour Overlay(#919392).</p> <p>Step 15Add the "Read more" text to our button.</p> <p>Step 16Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.</p> <p>Step 17</p> <p>Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.Use the Rounded Rectangle tool to create a square (hold down the Shift button).Radius - 3px, width and height - 138px.</p> <p>Go toBlending options -&gt; Stroketo create a border with the settings below:Size- 20px, colour #919392</p> <p>Copy and paste this element 5 times :) Place these squares with the interval of 20px.</p> <p>Step 18With the help of a clipping mask, insert the image into the square.</p> <p>As you can see, you really can use this block for all sorts of purposes. Result:</p> <p>Step 19</p> <p>The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.Now it is time to design a cool footer for our cute website layout. Let's make it bright :)Add some gradient, for example #3a8df1 - #6bafff, and inner shadow</p> <p>Step 20</p> <p>We'll add three blocks into our footer: Quick links, About Us and Follow UsUse the Arial Regular font for titles (30px) and add styles as on the screenshots below:</p> <p>Use the Arial Regular font for the text in the About Us section (12px).</p> <p>The text for the Quick Links section - 22px.</p> <p>Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter</p>