Six Revisions » Tutorials

How to Make a Light Textured Web Design in Photoshop

Jacob Gube — Thu, 29 Sep 2011 10:00:15 +0000

This web page design tutorial on Design Instruct (our other website) will show you how to create a beautiful, modern and subtly textured web page layout in Photoshop.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

How to Make a Modern UI Web Button Using Photoshop

Jacob Gube — Fri, 24 Dec 2010 21:55:37 +0000

Advertise here with BSA

This step-by-step design tutorial on Design Instruct (our other website) will show you how to create a slick web button in Photoshop, and also how to make it functional using HTML and CSS.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

About the Author

How to Build a Vibrant Professional HTML5 Web Design

Jacob Gube — Fri, 10 Dec 2010 12:00:08 +0000

Advertise here with BSA

This 2-part tutorial on Design Instruct, our other site, will walk you through the creation of a Photoshop mock-up as well as provide you with a detailed guide on how to convert the design into an HTML5 template.

Final Result

Click the preview image below to go to Part 1 of the tutorial series on Design Instruct (or go to Part 2 instead).

Other Things to Do

Subscribe to the Design Instruct RSS feed
Follow @designinstruct on Twitter

About the Author

How to Make an Elegant Patterned Web Design Using Photoshop

Jacob Gube — Wed, 01 Dec 2010 14:00:42 +0000

Advertise here with BSA

This web design tutorial on Design Instruct (our other website) walks the learner through the creation of a beautiful and trendy web layout using Photoshop. The web design is best used on a personal portfolio site.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

Subscribe to the Design Instruct RSS feed
Follow @designinstruct on Twitter

About the Author

How to Create a Web App’s Site Web Design in Photoshop

Jacob Gube — Mon, 22 Nov 2010 12:45:13 +0000

Advertise here with BSA

This web design Photoshop tutorial on Design Instruct, our other site, outlines techniques for making a layout comp that will work well for the sites of web apps, startup companies, SaaSs, and other modern, "Web 2.0"-themed, product-centric sites.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

Subscribe to the Design Instruct RSS feed
Follow @designinstruct on Twitter

About the Author

PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Jacob Gube — Sun, 29 Aug 2010 13:00:10 +0000

Advertise here with BSA

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Final Result

Click on the final result preview below to see a live demo. Since we are using some CSS3, this demo might not look exactly the same in all browsers.

View Demo

Create the Basic Files

1 The first thing we’ll do is set up the files and folders. Create a new folder in your computer and name it letterpress. This will be our working directory.

2 Create 2 folders inside the letterpress folder and name them images and styles.

3 Open up your favorite HTML/CSS editor (such as Dreamweaver or Notepad++) and create an HTML document. Name it index.html or some other preferred file name. Save this HTML document inside the letterpress folder.

4 Create a stylesheet document and name it style.css (or any other name you want). Save this file inside the styles folder.

Basic HTML

5 The code below goes in index.html. The code represents common HTML markup.



  
  Letterpress

Slice the Bookmark from the PSD

6 Now open up Photoshop and open the PSD we created together from Part 1 of this tutorial series.

7 Hide all except all Photoshop layers except these layers:

Datebg and shadow
Headerdivider
Navbarbg
Logo
Sidebar
Sidebar divider
Background
Widgetbg
Footerbg
Image
imagebg

8 Use the Rectangular Marquee Tool (M) to select the bookmark that indicates the active page.

9 Copy the selection by going to Edit > Copy Merged (Ctrl/Cmd + Shift + C).

10 Open a new Photoshop document (Ctrl/Cmd +N); don’t change the canvas size because it will have automatically set it to the dimensions of the most current thing on your clipboard (the bookmark, in this case).

11 press Ctrl/Cmd + V (the keyboard shortcut for Edit > Paste) to paste the copied selection in the new Photoshop document.

12 Go to Edit > Save for the Web and save the new document as a JPG in the images folder.

Write the HTML Markup

I usually code the HTML (with the classes and ids) first, and then write the CSS to style the site afterwards. This way I don’t have to switch back and forth and can keep my workflow compartmentalized. We’ll start writing the code for all the different sections of our design first, then style them later.

Container

13 Create a div with the ID of container; It will be used as a wrapper for all the elements except the footer. We’re doing this so that we can easily center the layout later on.

14 Create a div for the logo and insert the image of the site’s logo inside it. You can slice the logo from the PSD mockup using the same process as discussed earlier, or insert your own logo (preferred).

Navigation Bar

15 Next, we’ll create the navigation bar. Use an unordered list and add each navigation bar link as a list item. Add the ID of firstlink to the first list item; this way you can add a background-image to the current link (which is the bookmark that we sliced out of the PSD). Also add a divider.



  
    Home
    About
    Archives
    Contact

Sidebar

16 Create another div and give it the ID of sidebar.

17 Insert a form with an input type="text" element.

18 Change the default value of the input element to Search, the size attribute should be set to 29 (for 29 characters), and give it a JavaScript event listener so that when the user focuses or leaves the input element, it calls a function called clearText().

Note: It’s highly advised to write JavaScript unobtrusively. Since we are going to gloss over JavaScript in this tutorial, I’ve decided to have this functionality inline. Please use unobtrusive JavaScript.

onFocus="clearText(this)" onBlur="clearText(this);

This is the function that will handle the hiding/showing of the “Search” text inside the search input.

Here is our HTML markup for the sidebar and the search form.

Sidebar Web Banners

Every blog has advertising zones these days, why shouldn’t ours?

21 Inside the #sidebar div, add another div that will contain our web banners.

22 The first two web banners need to have the ID of adrightfirst (for right one) and adleftfirst (for the left one). Since we only have enough space for two ads in one row, you have to add a line break for every row.

Posts

Onto the markup for the blog posts.

23 Create a date1, datetext1 and post1 div.

24 Add the date (day using

, month in
), the title (using

), metadata of the post (using

) and some content (in

‘s).

25 Copy the entire post div, and paste it beneath (to create another blog post entry). Insert a divider between both posts. Don’t forget to change the numbers (date1 to date2).



  
    13
    apr
  



  I enjoy reading Six Revisions
  By Eric Hoffman  ·  1223 Comments 
  
   "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Continue Reading...


  
    
      12
      apr
    
  

  
    Who likes Obama?
    By George Bush  ·  0 Comments 
    
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Continue Reading...

Footer Widgets

26 Create another div and give it an ID of footerwidgets. Place a div with the ID footerwidgettext inside this div. Insert three divs with different ids. For example: footerwidgettextfirst, footerwidgettextmiddle, and so forth. The reason for having unique IDs is each one will have different margins, so we can’t use a class.



  

    
      Widget title 
      Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...
    

    
      Widget title 
    Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...
    

    
      Widget title 
      Karl Aloys zu Fürstenberg (1760-1799) was a soldier in the Austrian service. He achieved the rank of Field Marshal, and died at the Battle of Stockach. The third son of a cadet branch of the Fürstenberg, at his birth his chances of inheriting the family title of Fürst zu Fürstenberg ...

Footer

We’re going to use a simple footer section.

27 Just as the #footerwidgets div, the #footer div will be 100% width, but the text will be aligned with the rest of the content (centered). That’s why we’ll create another div inside it with the ID of footertext. Add the footer content inside #footertext.



  
    © 2010 Eric Hoffman. All rights reserved.

That’s all for the markup; let’s move on to CSS.

Write the CSS

So, we’re done with our HTML. Now we’ll tackle our styles.

28 First thing’s first: open up the style.css file you created at the beginning. Make sure your HTML file links to it correctly.

CSS Reset

29 First, we’ll use a simple CSS reset to zero out our styles. I encourage you to read more about CSS reset to fully understand the importance of it; this article on CSS Reset is a good place to start. For berevity, I just used the * selector here.

* {
  margin:0;
  padding:0;
}

Body Background and @font-face

30 Next, change the body background to the image of the blue background with noise in our PSD mockup. Slice it out of the PSD mockup for practice (I’ve also included it in the downloadable source file below as background.jpg).

31 Also, we’ll add the CSS3 text-shadow element.0 is the x-offset, 1px is the y-offset, 2px is the blur and #555 is the color of the shadow. @font-face allows us to embed non-websafe fonts so that all the viewers can see the site the way we do. You can read all about @font-face through this guide titled The Essential Guide to @font-face.

body {
  background:url("../images/background.jpg") repeat;
  text-shadow:0 1px 2px #555;
}

@font-face {
  font-family:"Museo Slab 500";
  src:url("http://hatchergraphics.com/MuseoSlab-500.otf");
}

Wrapper/Navigation

32 We’ll now create a container as a wrapper so that we can center our design easily. I like creating pixel-perfect designs, so I chose a fixed-width layout. If you want to see other layout types, check out this guide titled A Guide on Layout Types in Web Design. To center the container, just use margin: 0 auto; (thanks to the Smashing Book and its chapter on layout types, which coincidentally was co-written by Six Revisions founder, Jacob Gube).

33 Add styles to the navigation bar. #firstlink is the current link. If you wish to expand the design and add all four pages, you’ll have to change the ID of the list. For example, if I’m on the "About" page, the About list item should have the ID of firstlink. To center the background image, use background-position: center;.

#container {
  height: 1000px;
  margin:0 auto;
  width:890px;
}

#navigationbar {
  height:auto;
  margin:50px 0 80px 390px;
  width:650px;
}

#navigationbar ul li {
  display:inline;
  font-family:"Museo Slab 500";
  font-size:15px;
}

#navigationbar ul li a {
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}

#navigationbar ul li a:hover {
  color:#DBDBDB;
  text-decoration:none;
}

#firstlink {
  background:url("../images/linkbg.jpg") no-repeat;
  background-position:center;
  color:#FFF;
  padding:74px 30px;
  text-decoration:none;
}

Logo/Divider

34 The logo height and width depends on your website name. It turns out that "Letterpress" at 65pt (in Photoshop) is 60px high and 348px wide.

35 Next style the divider. Here you can use a 2px-high empty div, a span, or style your header to have a 2px-high border at the bottom. I used the same background image as I we’ll use with the post divider.

#logo {
  float:left;
  height:60px;
  width:348px;
}

#dividerheader {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  width:890px;
}

Sidebar

36 Next, we will style the sidebar. Since the post divs are going to be 500px wide and I’d like a little margin between the posts and the sidebar, I chose 250px for the width of the sidebar.

37 Style the divider, the recentposts and latestcomments and the search bar. Here we’re going to use another CSS3 property called border-radius. This means we can create rounded corners using only CSS. Unfortunately this feature isn’t supported by all browsers, so it will not look rounded in all browsers (such as IE8 and below).

38 Style all the ad elements and make sure the math is correct (together, they can’t be wider than 250px).

#sidecolumn {
  background-color:#2c7c88;
  border:1px solid #116678;
  float:right;
  height:240px;
  padding:25px 0;
  width:250px;
}

#dividersidebar {
  background:url("../images/dividersidebar.jpg");
  height:2px;
  margin-bottom:10px;
  margin-left:25px;
  margin-top:10px;
  width:200px;
}

#recentposts,#latestcomments {
  margin-bottom:10px;
  margin-left:25px;
  width:200px;
  word-wrap:break-word;
}

#recentposts ul a,#latestcomments ul a {
  color:#FFF;
  display:block;
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
  list-style-type:none;
  text-decoration:none;
}

#searchform {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  background-color:#FFF;
  border:0;
  font-family:"Trebuchet MS";
  font-size:13px;
  margin-left:25px;
  padding:2px 6px;
}

#adrightfirst {
  float:right;
  margin-right:-1px;
  margin-top:31px;
}

#adleftfirst {
  float:left;
  margin-left:-1px;
  margin-top:31px;
}

#adright {
  float:right;
  margin-right:-1px;
  margin-top:16px;
}

#adleft {
  float:left;
  margin-left:-1px;
  margin-top:16px;
}

#adright,#adleft,#adrightfirst,#adleftfirst {
  background-color:#f6f6f6;
  border:1px solid #e7e7e7;
  height:117px;
  width:117px;
}

#adright:hover,#adleft:hover,#adrightfirst:hover,#adleftfirst:hover {
  background-color:#e7e7e7;
  border:1px solid #dbdbdb;
}

Posts

39 Next up: the posts. We’ll create two post divs: one named post1, and the other we’ll call post2.

40 We’ll do the same with the date. As I mentioned before, both post divs should be 500px wide. Position them both with margin, and add a padding-left of -90px. The position property should be set to absolute.

41 Create another divider, but this time, it should be as wide as the post.

#post1 {
  color:#FFF;
  float:left;
  height:auto;
  margin:10px 0 0 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}

#post2 {
  color:#FFF;
  float:left;
  height:auto;
  margin:525px 0 20px 10px;
  padding-left:90px;
  position:absolute;
  width:500px;
}

#dividerpost {
  background:url("../images/dividerpost.jpg") repeat-x;
  height:2px;
  margin-bottom:20px;
  margin-top:16px;
  width:495px;
}

#date1 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  width:90px;
}

#date2 {
  background:url("../images/datebg.jpg")no-repeat;
  float:left;
  height:123px;
  margin-left:-90px;
  margin-top:500px;
  width:90px;
}

#datetext {
  height:46px;
  margin:0 auto;
  padding-top:38.5px;
  width:31px;
}

#datetext p {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:20px;
  text-transform:uppercase;
}

#datetext h1 {
  color:#FFF;
  font-family:"Museo Slab 500";
  font-size:35px;
  line-height:22px;
}

Footer Widgets

Almost done!

42 Footer widgets: As you saw with the HTML, the footer and the footer widgets are placed outside of the container so that they aren’t restricted by the 890px width of our wrapper. Both should be 100% wide.

43 Add the background, height (240px), and the top margin. I created a #footerwidget div, a text div, and then three more divs for the separate widgets. Add the same styles to all of them — the only differences being the borders and the margins.

#footerwidget {
  background:url("../images/widgetbg.jpg");
  height:240px;
  margin-top:110px;
  width:100%;
}

#footerwidgettext {
  height:240px;
  margin:0 auto;
  width:890px;
}

#footerwidgettextfirst {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

#footerwidgettextlast {
  float:left;
  height:165px;
  line-height:22px;
  margin-left:594px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

#footerwidgettextmiddle {
  border-right:1px dotted #FFF;
  float:left;
  height:165px;
  line-height:22px;
  margin-left:297px;
  margin-top:15px;
  padding:10px 10px 20px;
  position:absolute;
  width:276px;
}

Footer

44 The footer’s height is 44px. Add a background. The position should be absolute so that it is always at the bottom. Similar to the footer widgets, I created another div for the text so I can center it and align it to the main content area. Here I used the margin: auto 0; CSS property to center it. The 10px are the top-margin.

#footer {
  background:url("../images/footer.jpg") repeat-x;
  height:44px;
  position:absolute;
  width:100%;
}

#footertext {
  height:44px;
  margin:10px auto 0;
  width:890px;
}

45 The following styles apply to various elements; I just grouped them together.

#recentposts h1,#latestcomments h1,#footerwidgettextfirst h1,#footerwidgettextmiddle h1,#footerwidgettextlast h1 {
  color:#FFF;
  font-family:"Georgia";
  font-size:18px;
}

#post1 h1,#post2 h1 {
  font-family:"Georgia";
  font-size:30px;
}

#post1 h2,#post2 h2 {
  font-family:"Trajan Pro";
  font-size:18px;
}

#post1 p,#post2 p {
  font-family:"Trebuchet MS";
  font-size:13px;
  line-height:22px;
}

#post1 a,#post2 a {
  color:#FFF;
  text-decoration:none;
}

#post1 a:hover,#post2 a:hover {
  border-bottom:1px dotted #FFF;
}

#footerwidgettextfirst p,#footerwidgettextmiddle p,#footerwidgettextlast p,#footertext p {
  color:#FFF;
  font-family:"Trebuchet MS";
  font-size:13px;
}

We’re Done!

I hope you enjoyed following along with this tutorial. Please pose your questions and thoughts in the comments below.

Download Source

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.

Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

About the Author

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand, Hatcher Graphics. He enjoys reading, playing basketball, and getting plenty of sleep. If you’d like to connect with him, you should follow him on as @hatchergraphics.

Make an Elegant and Simple Blog Web Layout Using Photoshop

Jacob Gube — Sun, 11 Jul 2010 18:38:22 +0000

Advertise here with BSA

This web design tutorial will show you the process of developing a PSD mockup of a clean and simple blog layout. We will be creating the design of the front page of the blog. The next part of this tutorial will walk you through coding the PSD to HTML/CSS.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the first part of a two-part tutorial series. This part (Part 1) deals with how to build the mockup in Photoshop, while in the next tutorial (Part 2) you will be shown how to create an HTML/CSS web template for the PSD design.

Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout (*coming soon)

Final Result

Click on the image below to see the work in full scale.

Create a New Photoshop Document

1 Let’s get straight to work. First, open Adobe Photoshop (quite obviously). I’m using CS4, but other CS versions will work just fine. Begin by creating a new document (Ctrl/Cmd + N); make the document 1046px by 1630px with a white background.

Create the Background

2 The default Background layer of your new Photoshop document will be locked and un-editable; we need to do something about that. Double-click on the Background layer’s thumbnail in the Layers Panel; this will open the New Layer dialog window, just press the OK button to make the layer editable.

3 Now Ctrl/Cmd + click on the Background layer’s thumbnail (by default, Photoshop renames it to Layer 0) in the Layers Panel to place a selection around the canvas.

4 Set your Background color in the Tools panel to a blue color (#45a0ac) and press Ctrl/Cmd + Backspace, which is the keyboard shortcut for filling a selection with the Background color.

5 Your background layer should now be a dark shade of blue. Choose Filter > Noise > Add Noise while the Background layer is still selected. Change the Amount to 2% and then apply the filter.

Set Some Initial Photoshop Guides

6 To help keep our work aligned, set three vertical guides (View > New Guide) at the following locations: 60.5px, 505px and 955px.

Tip: Toggle the visibility of your Photoshop guides on and off by pressing Ctrl/Cmd + ;.

7 Also set a horizontal guide at 40px.

Add the Blog Name

8 Select the Horizontal Type Tool (T) in the Tools Panel, then type your blog’s name on the top left side. In this case, I used the Museo Slab 500 sized big at 65pt. The text color should be a dark gray (#252525) to create a good but subtle contrast with our dark blue background. By the way, you can set all these type options in the Options Bar when you have selected the Horizontal Type Tool.

9 Double-click on the type layer of your blog’s name in the Layers Panel to access the Layer Styles dialog window. Apply a Drop Shadow layer style and Inner Shadow layer style to give the text a letterpress/inset typography look.

Change the drop shadow’s color to light blue (#3f9cb0), the Blend Mode to Screen, and the Distance and Size to 1px.

Change the Inner Shadow’s Distance and Size to 2px.

10 Align the text to the guides as I have done using the Move Tool (V) to position your text.

Add Main Navigation Menu Links

11 Using the Horizontal Type Tool again, create four (separate) navigation bar links using the same font as before, but this time, reduce the font size to 20pt. Type them out in separate layers. In this tutorial, the menu items are "Home", "About", "Archives", and "Contact".

12 Align the 4th navigation bar link ("Contact") with the guide to the far right, and the first navigation bar link ("Home") with the guide right of the blog name. The other two links should be somewhere in between them.

13 To align them perfectly, select all 4 layers in the Layers Panel. Then choose Layer > Align > Vertical.

14 To make the navigation bar links have equal spacing in between them, select all 4 layers in the Layers Panel and then choose Layer > Distribute > Horizontal Centers.

15 Add a Horizontal guide (View > New Guide) at 88px and move the links with the Move Tool (V) so that the text rests on the guide.

Create the Active Navigation Menu Link Background

16 We will highlight the page the user is on with a different background, text color, and shape. The background will be shaped sort of like a "bookmark" (which gives our layout some form of visual semantics). I’ll show you how to create this "bookmark" shape. First, create a new layer (name the layer as "linkbg"). Select the Rectangular Marquee Tool (M) from the Tools Panel. In the Options Bar of the Rectangular Marquee Tool, change the Style option to Fixed Size and then set the Width option to 100px and Height option 148px. Place your marquee selection on the canvas somewhere around our navigation menu bar.

17 Change your Background color to our dark gray (#252525) and press Ctrl/Cmd + Backspace to fill the rectangular shape.

18 Now select the Custom Shape Tool (U) and set the Shape option in the Options Bar to Arrow 2 (which is a prepackaged custom shape that comes with Photoshop).

19 Draw the arrow on your canvas with the Custom Shape Tool and then select its layer in the Layers Panel so that you can rotate it to point up (Edit > Transform > 90^o CCW).

20 Right-click on the arrow layer and choose Rasterize Layer to convert it to a normal layer.

21 In the Layers Panel, modify the layer stacking order and make sure that the arrow layer is above the gray "linkbg" layer.

22 Select both the arrow layer and "linkbg" layer in the Layers Panel, then choose Layer > Align > Horizontal Centers.

23 Ctrl/Cmd + click on the thumbnail of the arrow layer in the Layers Panel to place a selection around the arrow, switch to the "linkbg" layer, and then press Backspace or Delete to delete the area below the arrow selection.

After this, you don’t need the arrow layer anymore, so you can delete the layer.

24 Now what you should have is the background for the active navigation menu link, which looks sort of like a bookmark. Let us style this layer to match the look and feel of our logo by applying an Inner Glow, Color Overlay, and Stroke layer style.

The inner glow color should be a dark gray (#2e2e2e2).

The color overlay should be our dark gray again (#252525). You don’t necessarily need this layer style since we already filled it with this color earlier on.

The stroke color should be black (#000000).

This is how our "bookmark" active link indicator should look like now:

Stylize and Position the Navigation Menu Links

25 It’s time to give our menu bar links some styles. First, add a Drop Shadow layer style to the other three non-active links ("About", "Archives", and "Contact").

26 Next, change the text color of the first link ("Home") to white (#ffffff) using the Horizontal Type Tool (T).

27 Align the first link horizontally with the bookmark shape using Layer > Align > Horizontal Centers. I’ve added a little swoosh vector shape that I created in Adobe Illustrator just below the "Home" text, but feel free to skip that.

Create a Horizontal Inset Divider

28 Add another horizontal guide at 160px.

29 Select the Rectangular Marquee Tool (M) and create a 890x1px thin, rectangular selection.

30 Add a new layer (name it "dividertop"), and in the new layer, press Ctrl/Cmd + Backspace to fill the rectangle with any color.

31 Apply a Color Overlay layer style to the "dividertop" layer so that the rectangle is slightly lighter than our dark blue background’s color (#2c7c88).

32 Align the rectangle to the left and the top guide using the Move Tool (V).

33 Duplicate the layer and move it right below the original rectangle. Rename the layer to "dividerbottom".

34 Give it a light blue Color Overlay layer style (#4fbaca).

Link the "dividertop" and "dividerbottom" layers by selecting them simultaneously in the Layers Panel, right-clicking on one of them, and then choosing Link Layers from the contextual menu that shows up. This will keep them together so that if we need to move them, both layers will move together.

Designing the Post Date Background

35 We’re now finished with the header area of our layout. Let’s move on to the main content area, starting with the first blog post entry’s date. First thing’s first: we need to add another horizontal guide at 210px.

36 Select the Rounded Rectangle Tool (U) in the Tools Panel, and in its Option Bar, change the Radius to 10cm.

37 Create a 75x150px rounded rectangle with the Rounded Rectangle Tool.

38 Apply an Inner Shadow layer style to the rounded rectangle shape layer, with the inner shadow’s color set at blue color (#3793a0).

39 Apply a Color Overlay layer style as well that is set at a darker blue than the inner shadow (#2c788).

40 Give the shape a stroke by applying a Stroke layer style with a stroke color a darker blue (#1a5a64) than the inner shadow’s color.

41 Rename the shape layer to "datebg" (which stands for "date background") to keep your work organized, and then Rasterize the layer (right-click on it, then choose Rasterize Layer).

42 Using the Rectangular Marquee Tool, select about 1/3 of the right side of the shape, and then delete that selected area.

43 Still on the "datebg" layer, add a noise filter via Filter > Noise > Add Noise; use 2% for the Amount option.

Create the Vertical Shadow of the Post Date

44 Now create a new layer for the shadow of the date’s background. Using the Elliptical Marquee Tool (M), make an oval about 17px wide and 100px tall; the most accurate way of doing this is to use Fixed Size as the Elliptical Marquee Tool’s Style option and entering the dimensions for the Width and Height.

45 Place the selection on the right side of the date background. Fill the selection (Shift + F5) with black (#000000) and rename the layer to "shadow".

46 Apply a Gaussian blur (Filter > Blur > Gaussian Blur) onto the "shadow" layer, setting the Radius option to 3px.

47 Using the Rectangular Marquee Tool, select the right half of the blurred oval shadow, and then delete that half by pressing Backspace or Delete.

48 Finish off the shadow by lowering the layer’s Opacity to 55%.

Add the Date Text, Blog Post Title, and Metadata

49 With our date background finished, it’s time to add the date of when the blog entry was posted. Get the Horizontal Type Tool (T) from the Tools Panel and write your date using Museo Slab 500. The numerical day should be around 42pt font size, and the month–which is on a new line below the numerical day–should be at 20pt. I chose to write "13 APR" with APR on a new line.

50 Align the half-oval shadow ("shadow" layer), the date background ("datebg" layer) and the date type layer text correctly using the Move Tool and Layer Alignment commands we’ve used earlier on.

51 For the title of the post, I chose the Georgia typeface set at 35pt font size. For the meta data (author, number of comments), I used Trajan Pro at 20pt; you can find the middle dot/Georgian comma that I used to separate the author name and number of comments here–just copy and paste it into Photoshop. Also, adjust the leading/line-height of the text to 28px. You can do this in the Window > Character Panel.

Here’s our date, blog post title, and blog post metadata now.

52 Add a vertical guide at 165px. Align the text with the guide you just created and the date.

Add the Blog Post Lead-In Image

53 Using the Rectangular Marquee Tool (M), create a 480x150px rectangle (the height depends on the image size you will use, but our max width is 480px for this template).

54 Fill your selection with any color on a new layer and then apply a Stroke layer style that will represent our image’s border. The color of the border is a dark gray (#1b1b1b).

Add and Position the Content of the Blog Post Entry

55 Find an image of yours and paste it into your Photoshop document. I used a photo of a snowboarder, but it doesn’t really matter which image you choose; it’s just for eye candy in our PSD mockup. Adjust the size of your image with Free Transform (Ctrl/Cmd + T) so that it fits within our rectangle.

56 Switch to the Horizontal Type Tool (T) and paste in some text below the image. You can use a Lorem Ipsum generator tool like this one to generate some text in a jiffy, but it’s never a bad idea to use real web copy to make the mock-up look as accurate as possible. My font of choice for the text content is Trebuchet MS at 17pt font size and with the leading/line-height at 28pt.

57 Select all the blog post design elements in the Layers Panel and align it with the shadow using the guides we created as reference.

58 Add a new horizontal guide at 450px. Align the text with the left guide and the new guide.

59 Select all the blog post layers in the Layers Panel ("datebg", "shadow", "date", the blog post title text, metadata text, the background of the image, the image, and the blog post text) and group them together by going to Layer > Group Layers (Ctrl/Cmd + G), which will place all of the layers in a folder. Name the layer group "Post 1".

Add an Inset Horizontal Divider at the Bottom of the Blog Post Entry

60 Add another horizontal guide at 700px. Duplicate the divider we created before and rename the layer to "dividerpost".

61 Resize the width of the divider with Free Transform so that it’s the same as the lead-in image’s width. Then move the divider using the Move Tool (V) so that it is placed on the horizontal guide we just created.

Add Anther Blog Post Entry

62 Duplicate the "Post 1" layer group and rename the duplicate as "Post 2".

63 Add a new horizontal guide at 720px and align the shadow of the date box (of Post 2) with the new guide.

64 Change the elements in the "Post 2" layer group so that it looks different from the first blog post; for example, the comment number, the date, and the blog post title can be changed.

Build the Sidebar’s Background

65 Create a 250x350px rectangle using the Rectangular Marquee Tool (fill the rectangular marquee selection with any color on a new layer called "sidebar"). This rectangle is our sidebar’s background.

66 Align the sidebar to the horizontal guide at 210px and the vertical guide at the far right that we created before.

67 Give the sidebar’s background a Color Overlay layer style; the color of the color overlay should be a dark blue (#2c7c88).

68 Also, give the sidebar background a Stroke layer style with the stroke color being a darker blue (#116678).

69 Set up a vertical guide at 730px and one at 930px; we will use these guides to make sure there is some padding inside our sidebar.

Create the Search Feature

70 Use the Rounded Rectangle Tool (U) to draw a rounded rectangle from the left vertical guide (at 730px) to the right vertical guide; the rounded rectangle should be around 25px high. Name this shape layer as "searchbar". Give the rounded rectangle a white (#ffffff) Color Overlay layer style.

71 Find a magnifying glass icon to represent the search button (you can use a web tool like IconFinder to find free icons).

72 Position the icon within the white rounded rectangle (towards its left).

73 Make a horizontal divider just like we’ve done before, spanning from the 730px vertical guide to the 930px vertical guide style. Add a little spacing between it and the search bar.

Add the Sidebar Text

74 Now to the text. I added a sidebar heading ("Recent Posts") using the Horizontal Type Tool (T) set at Georgia font and font-size of 23pt. I’ve listed three of the most recent blog posts using Trebuchet MS font at 17pt and leading/line-height, again, at 28pt. Call this text layer "recent posts".

75 Duplicate the horizontal divider from above and move it so it’s at the bottom of the "recent posts".

76 Create another text layer the same as before, but this time for the recent comments.

77 Align both text blocks to the left guide.

Design the Sidebar Ad Units

78 Draw a couple of 118x118px squares using the Rectangular Marquee Tool. Hold down Shift to keep your box proportionally equal in height and width.

79 Align one square on the right (to the right guide) and the other one on the left (to the left guide).

80 Fill both squares with a gray color (#f6f6f6) using a Color Overlay layer style. This gives us a place to add banner advertisements on our blog.

81 Duplicate the two gray boxes a couple of times or more depending on how much ad space you’d like.

Sidebar Housekeeping

82 Group all the sidebar element layers and name the layer group as "sidebar" to keep our mockup organized (if you work with a front-end developer who has to convert your PSD to HTML/CSS for you, he/she will love you for it).

Lay Out the Main Blog Footer

83 Make two new horizontal guides: one at 1220px and the other at 1550px.

84 Using the Rectangular Marquee Tool (M), draw a rectangle across the whole width of the web layout between the two new guides at the bottom of layout where our footer will be. Fill this rectangle with a dark gray (#2c7c88). This is our footer’s background.

85 Apply a noise filter on our footer’s background (Filter > Noise > Add Noise) using 1% for the Amount value.

86 Apply a black (#000000) Inner Shadow layer style to the footer’s background.

87 Now create three text columns of equal size, all with the same width. In this case, I copied some interesting text off Wikipedia to give me some real web copy for the footer text. The title ("Widget title") is set at 23pt Georgia and the normal text is Trebuchet MS at 17pt. Don’t forget to change the leading/line-height to 28pt!

Create the Main Blog Footer Column Dividers

88 For the white vertical dividers in between the footer text columns, we’ll use patterns. First step is to create a new Photoshop document (Ctrl/Cmd + N) with Width of 1px and Height of 3px.

89 Zoom in really close so you can see you work (using the Zoom Tool).

90 Color the first pixel (top) black (#000000) using the Rectangular Marquee Tool and Edit > Fill.

91 Select around the canvas (Ctrl/Cmd + A) and then choose Edit > Define Pattern. Name your pattern something logical like "Vertical Dots".

92 Switch back to our main Photoshop document.

93 Make vertical rectangular marquee selection (1x280px).

94 Add a new layer and press Shift + F5 to see the Fill dialog window. In the Use option drop-down menu, find the pattern we made ("Vertical Dots") from the list and press OK to fill our rectangular marquee selection with it.

95 Duplicate the layer with the dashed vertical divider and place them between the three footer columns.

96 Group the text columns in their own layer groups. Align the text column layer groups vertically.

97 Add a white Color Overlay layer style to both dashed vertical dividers so that they appear white.

Create the Secondary/Auxiliary Footer

98 Create a short rectangular marquee selection at the very bottom of the layout and fill it with a dark gray (#1f2024).

99 Apply a Noise filter with the Amount set at 1%.

100 Type some text such as your copyright information using the Trebuchet MS font at 17pt font size. Align the text horizontally with the background place it on the far left guide.

Finished!

We’re done! Wasn’t that easy?

Elegant and Simple Blog Web Layout Tutorial Series

Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout (*coming soon)

Download Source Files

simple_elegant_bloglayout-psd (ZIP, 1.61 MB)

About the Author

PSD/HTML Conversion: Code a Clean Business Website Design

Jacob Gube — Wed, 30 Jun 2010 12:08:27 +0000

Advertise here with BSA

In this PSD/HTML conversion tutorial, we will take a PSD web design template that I showed you how to construct in a previous tutorial and turn it into a functional HTML/CSS template.

This is the second part of a tutorial on building a clean business website. This second part will focus on converting and coding the PSD mock-up we created in the first part.

"Clean Business Website" Series

Final Result: Live Demo

Here’s the template that we’re looking to create. Click on the screenshot below to see the live working demonstration of the HTML template.

Live Demonstration of the Final HTML/CSS template

Before Starting

Make sure that you have the Photoshop file (PSD) that we produced in the first tutorial — you’ll need this to extract the images that we’ll be including in the template.

If you haven’t completed the Part 1 tutorial yet, then I’d advise you to go through that first tutorial before starting this one (or at least download the PSD file from that first tutorial).

In this tutorial (Part 2), I’ll be assuming that you have some basic HTML and CSS knowledge — however, if anything is unclear, please leave a comment below and I’ll do my best to help out.

Creating the File Structure

1 Create a new empty folder on your desktop called "template" (or whatever you prefer).

2 Inside of that empty folder, create another folder called "images" — this folder will contain all of the images that we need to display in the template.

3 Then create three new files and name them index.html, style.css, and reset.css.

The index.html file is where we will write all of the HTML for our template, while the style.css file will include all the CSS styling code that will make everything look nice and pretty.

Setting Up reset.css

In the reset.css file, we want to use a reset stylesheet. The primary reason for this is that different browsers tend to have inconsistencies in the way that they display different HTML elements (e.g. font sizes of headings, the size of margins and padding, etc.). Using a reset stylesheet enables us to reduce the impact of these inconsistencies.

4 I’ll be using Eric Meyer’s Reset CSS. Copy the Reset CSS code into your own reset.css file.

Add the Basic HTML Markup

5 Now open up your index.html file using a code editor. I’ll be using Coda (a popular web development IDE for the Mac OS) for this tutorial, but you can use whichever application you prefer. Add a basic structure for a new HTML page — most source code editing applications (like Coda and Adobe Dreamweaver) provide a function for this (or do it automatically for you). Here’s the code block for your basic HTML markup.

	
	
	    
	        
	        My HTML  Website Template

Reference Your Stylesheets

6 Inside the tags of index.html, you need to add the following line of code to reference our main stylesheet.

	href="style.css" media="screen"  />

This tells index.html page where to find your main stylesheet.

7 Now open your style.css file and add the following line of code at the top of the document to also reference our reset.css file.

	@import "reset.css";

This ensures that the reset styling included in the reset.css file is called before any of our other CSS stylesheet (which is important because of the CSS inheritance model).

Excellent! All three files are now connected and talking to each other, so we can start coding up the theme.

The Template Structure

Below, you can see the basic layout structure and main sections of the HTML/CSS template. Study it for a bit to familiarize yourself with the different sections of our web page layout.

Code the Basic Page Section

8 We’ll start by creating the basic structure in our index.html. Add the following code block for the layout sections.

As you can see, we’re holding all of the main sections of the template within the #wrap container to make it easier for us to center our web page.

The main sections of our web layout include #header, #featured-content, #services, #additional-information (which contains #client-testimonials and #featured-project), and the #footer.

Create the Background

9 To create the background of our HTML/CSS template, we initially need to slice out the background image from the PSD file. We will be using the same method for slicing out the different CSS background elements throughout this tutorial, and I’ll just give you a brief summary of the procedure here. First step: in Photoshop, choose the Rectangular Marquee Tool (M) and make a narrow selection that includes the header and white background.

10 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl/Cmd + N), and then paste the selection in the new document (Photoshop should automatically determine the size dimensions of the new document based on the image you have in the clipboard).

11 You then need to go to File > Save for Web & Devices to save the file. Choose the GIF file format and then save it as main-bg.jpg inside your images folder.

12 Now add the following code to your style.css file to set the background.

	/*-----------------GENERAL STYLES-----------------*/ 
	body { background: url(images/main-bg.jpg) repeat-x;  font-family: arial; }
	#wrap { width: 960px; margin: 0 auto; }

Here we’re attaching the background image to the of the HTML document and then repeating it across the page along the x-axis.

We’re also setting the width of page layout and ensuring that it’s centered on the screen (margin: 0 auto; centers the layout).

Adding the Logo

13 We now want to add the logo to the header. To do this, we initially need to extract it from the PSD. Select the layer that the logo is stored on and then right-click the thumbnail next to layer name (circled below).

This will select the logo text for you.

14 Copy this text again, create a new document, and then paste it into the new document.

15 Choose Save for Web & Devices again, choose PNG-24 as the file format and save the file as logo.png in the images folder.

We use the PNG file format here because we want the image to have a transparent background so that it can be easily displayed on any background color.

16 Now add the following HTML to your index.html file to set the markup for our site name/logo.

	
	    Design Studio

17 Then we need to style our markup to set logo.png as the CSS background image of #header h1. Add this code block to the style.css file.

	/*---------------------HEADER---------------------*/ 
	#header { height: 130px; }
	#header h1 { float: left; background: url(images/logo.png)  no-repeat; width: 347px; height: 66px; text-indent: -9999px; margin: 38px 0 0  0; }

We’re initially setting the height of the header container and then attaching the logo image to the h1 element.

We utilize a technique called CSS background image replacement which attaches a background image to an element and then moves the content associated with the element off the screen via the use of text-indent: -9999px attribute/value pair.

The CSS background image replacement approach provides some SEO benefits and also makes it easier for users who are using screen readers to understand the content of your page.

Make the Navigation

18 To create the navigation area, add the following HTML to your index.html file.

	
	    Design Studio
	    
	        Home--
	        About Us--
	        Services--
	        Portfolio--
	        Contact Us

19 Now add the following CSS to your style.css file.

	#header #nav { float: right; margin: 72px 0 0 0; }
	#header #nav li { float: left; font-size: 16px; }
	#header #nav a { color: #eee; text-decoration: none; }
	#header #nav a:hover { color: #00aeef; }
	#header #nav .nav-divider { color: #eee; padding: 0 10px; }

This again is quite simple: We’re initially floating the #nav container to the right of the page and also moving it 72px from the top using the margin attribute. The

elements are then floated to the left to ensure that all page names are displayed next to each other and not on separate rows.

The rest of the code simply styles the links and the "–" characters that is used as a divider between the different page names.

Code the Featured Content Section

20 To create this section, we need to slice several images from our PSD. The first is the title. We want to follow the same process we used previously when slicing out the logo. So, select the layer that the title is stored on in the Layers Panel, right-click the thumbnail on that layer to select the text, copy the text, and then create a new Photoshop document.

21 Paste the text into the new document and then save the title into your images folder via the Save for Web & Devices command (call it featured-content-title.png).

22 Then do exactly the same for the subtitle (name this file featured-content-subtitle.png), the dotted line (name this horizontal-line.png), and the text (featured-content-text.png).

23 Now that we have extracted all the images required, we need to write our HTML. Add the following code block inside the #featured-content container in your index.html file.

	
	    Clean and Professional Web  Design
	    Providing High Quality Web  Solutions
	    
	    We provide first class web  solutions for organizations and small businesses looking to make a big impact  online. Our services include web design, online marketing campaigns, and search  engine optimization.

24 Then add the following code to your style.css file to style our elements.

	/*-----------------Tools-----------------*/ 
	.horizontal-line { background:  url(images/horizontal-line.png) no-repeat; width: 950px; height: 10px; }
	/*------------FEATURED CONTENT SECTION------------*/ 
	#featured-content { margin: 65px 0 0 0; }
	#featured-content h2 { background:  url(images/featured-section-title.png) no-repeat; width: 811px; height: 66px;  text-indent: -9999px; }
	#featured-content h3 { background: url(images/featured-section-subtitle.png)  no-repeat; width: 720px; height: 57px; margin: -8px 0 30px 1px; text-indent:  -9999px; }
	#featured-content p { background:  url(images/featured-section-text.png) no-repeat; width: 957px; height: 126px;  margin: 30px 0 25px 0; text-indent: -9999px; }

In these code blocks, we start by moving the #featured-content section down by 65px using the margin attribute.

We then utilize the CSS image replacement technique again for the h2, h3, and p elements to display the images that we extracted.

The styling for the horizontal line (.horzontal-line) has been written in a separate section (using CSS comments to label the sections), as we’ll be using this in other containers as well. This helps to keep our code clean and organized.

Create the Services Section

25 Let’s first extract the images we require from our PSD. We need the blue Services box background (save it as services-box-bg.png), the large headings in each of the boxes (save it as web-design-title.png, marketing-title.png, and optimization-title.png respectively), the horizontal dotted line (service-dotted-line.png), and the buttons at the bottom of each of the boxes (get-more-details-button.jpg, view-case-studies-button.jpg, and learn-more-button.jpg). Follow the same process for extracting and saving the images as used in previous steps.

26 Now add the following code inside the #services container in your index.html file.

	
	    
	        
	        
	             We provide web design solutions of the very highest order. We’ll  work with you from the start to understand your exact requirements and will continuously  work with you to ensure that you’re happy with the final site that you  purchase.
	             
	    

	    
	        
	        
	        We can help  you promote your business in both the online and offline worlds. We specialize  in a range of fields from viral marketing campaigns to managing paid  advertising accounts for you. Your brand will be in safe hands with  us.
	          
	    
	    
	        
	        
	             Want to drive more traffic to your site? You’ve come the right  place! We can increase traffic to your site in an organic and effective manner  that will ensure more people are aware of your business and the  products/services you offer.

In this code block, we’re adding three new containers which are all assigned a class of .service-box. Inside each of these service boxes is a title, a dotted line, the text content for that box, and a button.

The first service box is also assigned a class of .first (class="service-box first") because we need to slightly change the styling of this container from the others.

27 Now add the following CSS to your main stylesheet for styling our Services section.

	/*--------------------SERVICES--------------------*/ 
	#services { padding: 40px 0; height: 355px;  }
	#services .service-box { float: left; background:  url(images/service-box-bg.png) no-repeat; width: 233px; height: 301px; margin: 0 0 0 46px; padding: 22px 28px 30px 26px; }
	#services .first { margin-left: 0; }
	#services .service-box h2 { margin: 0 auto; }
	.web-design-title { background:  url(images/web-design-title.png) no-repeat; width: 186px; height: 48px; }
	.marketing-title { background:  url(images/marketing-title.png) no-repeat; width: 186px; height: 48px;  }
	.optimization-title {  background: url(images/optimization-title.png)  no-repeat; width: 200px; height: 48px;}
	.service-dotted-line { background:  url(images/service-dotted-line.png) no-repeat; width: 237px; height: 3px;  margin: 10px 0 24px 0;  }
	#services p { font-size: 14px; color: #fff; line-height:  21px; text-align: center; margin: 0 0 24px 0; }
	#services .more-details { display: block; background:  url(images/get-more-details-button.jpg) no-repeat; width: 232px; height: 41px;  }
	#services .view-case-studies-button { display: block;  background: url(images/view-case-studies-button.jpg) no-repeat; width: 232px;  height: 41px; }
	#services .learn-more-button { display: block; background:  url(images/learn-more-button.jpg) no-repeat; width: 232px; height: 41px; }

The above code is again making use of the CSS background image replacement technique where necessary to display the appropriate images.

The rest is generally just setting the padding and margins on the different elements for positioning and spacing of the various elements.

One thing to note is that the left margin on the .service-box class is set to 46px. This is to provide consistent spacing between the different service boxes. However, if the first box has a left margin set to 46px, it will not be on the left side of the template and will look a little odd.

To fix this oddity, we therefore set the left margin for the .first class to 0 to override the original margin attribute value from the .service-box styling, ensuring that the first service box is correctly aligned on the left side of the template.

Make the Client Testimonials Section

28 We need to slice out the title for this section. Use the same process as before and save the file as client-testimonials-title.png.

29 Add the following code inside the #client-testimonials container in index.html.

	
	    Client Testimonials 

	    
	        
	             
	        

	        "Design  studios created a beautiful website and were an absolute pleasure to work  with..."
	        Sarah Johnson
	        Web Design Media
	    

	    
	        
	             
	        

	        "I only  have great things to say - I would highly recommend DS for online promotional  work..."
	        Kate Saunders
	        Software Solutions
	    
 

	    
	        
	             
	        

	        "Design  Studios have increased traffic to my site by over 200% in three months - great  work guys!"
	        Dave Cole
	        Global Web Services

This is fairly straightforward: We’ve got three new .testimonial containers that each contain an image of the testimonial author, the testimonial text, and the name of the author along with their company/organisation’s name.

30 Now add the following CSS to your style.css file.

	/*----------------ADDITIONAL INFO-----------------*/ 
	#additional-info { margin: 38px 0 0 0; height: 420px;   }
	#additional-info #client-testimonials { float: left; width:  425px; padding: 0 45px 0 0; }
	#additional-info #client-testimonials h3 { background: url(images/client-testimonials-title.png)  no-repeat; width: 180px; height: 28px; margin: 0 0 24px -5px; text-indent:  -9999px; }
	.testimonial {  margin: 0 0 32px -5px;  }
	.testimonial .author-img { float: left; background-color:  #ccc; width: 84px; height: 84px; margin: 4px 28px 0 5px; }
	.testimonial img { margin: 3px 0 0 3px;  }
	.testimonial p { color: #555; font-size: 14px; line-height:  21px; margin: 0 0 12px 0; }
	.testimonial p.author-name { font-weight: bold; margin: 0;   }
	.testimonial a { color: #00aeef; font-size: 14px;  text-decoration: none; }
	.testimonial a:hover { color: #555; }

The first three lines in the above code block all deal with the parent container #additional-info — the height of the container is set along with the margins.

One of the key points here is that the width of the #client-testimonials container is set to 425px with 45px of padding on the right. This needs to be the same for both this section and the "Featured Project" section (we’ll talk about this section later down the tutorial) as they both use half of the screen.

31 Between these two containers, we need to add the vertical line and use it as a divider. Slice this image out of the PSD file and save it as vertical-line.png.

32 Now add the following line of code between the #client-testimonials and #featured-project containers in your index.html file.

33 Then include this CSS code block under the .horizontal-line class that we defined earlier.

	.vertical-line { float: left; background:  url(images/vertical-line.png) no-repeat; width: 4px; height: 385px; }

The CSS above ensures that the vertical line is displayed between the two different sections.

Make the "Featured Project" Section

34 As with the client testimonials section, we need to slice out the "Featured Project" heading from our PSD template. Save the file as featured-project-title.png.

35 Now add the following HTML markup code block to your index.html file.

	
	    Featured Project
	    Yoshi Online Marketing  Campaign
	    
	    This project involved organizing  an online marketing campaign to help promote the Yoshi brand. This resulted in  a 200% increase in Yoshi’s sales over a six month period of time. 
	    Click Here  For More Details >>

36 Then add this CSS code block to your style.css file to style the "Featured Project" section.

	/*----------------FEATURED PROJECT----------------*/ 
	#featured-project { float: left; margin: 0 0 0 45px; width: 425px; }
	#featured-project h3 { background:  url(images/featured-project-title.png) no-repeat; width: 160px; height: 32px;  margin: 0 0 16px -5px; text-indent: -9999px; }
	#featured-project h4 { font-size: 20px; color: #888;  font-weight: normal; margin: 0 0 8px 0; }
	#featured-project img { margin: 0 0 7px 0; }
	#featured-project p { font-size: 14px; color: #555;  line-height: 21px; margin-bottom: 7px; }
	#featured-project a { color: #00aeef; font-size: 14px;  text-decoration: none; }

Again, the width of this container is 425px with 45px of left padding. The CSS image replacement technique is used to display the "Featured Project" title with the rest is simply setting the margins, colors, and font sizes of the various elements.

Coding the Last Section: The Footer

37 The footer is very simple to code. Add the following HTML to your index.html file.

	
	    
	    Copyright © 2010 ~  Design Studios ~ All Rights Reserved

In the footer, we’re just displaying another horizontal line to act as a divider between the #additional-info container and the #footer. Some standard copyright text is then included underneath this.

38 Now add this CSS code block to your style.css file for styling our footer section.

	/*--------------------FOOTER----------------------*/
	#footer { height: 70px; padding: 0 0 30px 0; }
	#footer p { font-size: 16px; color: #888; padding: 14px 0 0  0; }

The styling here is quite straightforward: We’re defining the height of the #footer container and then setting the bottom padding to 30px to provide some breathing room at the bottom of the web layout template.

We also set the font size and color of the copyright text and give them some padding at the top to move the text away from the horizontal line.

Finished!

That’s everything done. If everything has gone according to plan, hopefully you have some that looks like the following screenshot.

I hope you found this tutorial useful. Please leave some comments below if you have any questions, suggestions, or feedback.

"Clean Business Website" Series

Download Source Files

clean-business-website-html-css (ZIP, 0.19 MB)

About the Author

Chris Creed is the founder of Voosh Themes, which provides a wide range of Premium and Free WordPress themes. He’s been designing and developing websites for over 10 years and is interested in most things related to design. You can follow him on Twitter at @cpcreed.

How to Design a Clean Business Website with Photoshop

Jacob Gube — Wed, 23 Jun 2010 11:30:33 +0000

Advertise here with BSA

The focus of this template is on a design agency that offers a range of web-based services. The primary aim of the page we’re designing, therefore, is to promote what the business does and what services they provide.

This is the first part of a tutorial on building a clean business website. This first part will focus on creating the design in Photoshop, and in the second part, will focus on converting the PSD outcome to a working XHTML template.

"Clean Business Website" Series

Final Result

Here’s a screenshot of the design we’ll be creating.

Overview

In this tutorial, I’m going to assume that you have a basic understanding of Photoshop and know how to do basic tasks such as adding text, drawing shapes, and resizing/rotating objects.

My goal in this walkthrough is to show that you don’t always need lots of fancy effects in a design to make a nice-looking template. With a couple of fonts and some subtle effects, it’s still possible to create a professional-looking design that will impress your visitors.

The design we’re going to build has a header that contains the name of the company and the navigation area. Below that is an area that highlights what the business does along with some additional details.

Following this, there is a section that describes the specific services in more detail. The section underneath this has some client testimonials and a featured project overview.

We also want to try and build credibility and trust through the use of some client testimonials and an example of a "featured project."

Finally, we have a simple footer at the bottom that contains some fairly standard copyright text.

Create the Document

1 Create a new document with a size of 1100x1100px. Then add some vertical guides at 70px and 1030px — this gives us a width of 960px, which should easily fit on most screens.

Make the Header

2 To create the header, we first need to add the background. Select the Rectangle Tool (U), set your Foreground color to a very dark gray color (#333333), and then draw a box from the left of the document to the right that is around 130px in height.

Add the Site Name/Logo

3 To add the company name, set the font to Myriad Pro. Set the font size to 60px, the color to a light gray (#EEEEEE), and the letter spacing to -40px. You can set all of these options in the Character Panel (Window > Character). With the Horizontal Type Tool (T), type the name and position it against the left guide.

Make the Navigation

4 To add the navigation area, set the font to Arial. The font size to 16px and the color is #EEE. Type some page names (e.g. Home, About, etc.) separated by two hypens (–):

Create the Featured Content Section

5 To create the featured content section, we need to start by adding the headline of the featured content. Set the font to Myriad Pro, the font weight to bold, the font size 60px, the letter spacing to -40px, and the color to #333333. Type the title in with the Horizontal Type Tool (T).

6 To make the headline stand out a little more, we’ll change the color of the ampersand (&) to a nice blue (#00BFF3).

7 Underneath that, we need to add the subtitle. Set the font to Myriad Pro, the font weight to Regular, the size to 50px, and the color to #BBB. Type a subtitle and position it just underneath the title.

8 We now want to add a short overview of what the company does. Pick up the Horizontal Type Tool, set the font size to 30px, the color to #CCCCCC, and type a series of periods (.) from the left guide to the right.

9 Create a copy (choose the text layer in the Layers Panel and then press Ctrl/Cmd + J) of this dotted horizontal line, and then place it about 40px underneath the first line.

10 We now need to add the text between these lines. Set the font to Myriad Pro, the font-size to 34px, the color to #555555, the line spacing to 42px, the letter spacing to -40px, and then type a few lines of text. You can use a lorem ipsum generator just to get some dummy text content in quickly.

11 You may also want to pick out some key words and make their font weight bold to give them more emphasis; I’ve selected the words "first class" and "big impact."

Add the Services Details

12 We now want to add some more specific details about our services. Select the Rectangle Tool from the Tools Panel, set your Foreground color to #00AEEF, and draw a rectangle shape that is around 280x350px in size, positioned against your left guide.

13 To make this box stand out a little more, we’ll add a drop shadow layer style (double-click on the layer’s thumbnail in the Layers Panel to access the Layer Styles dialog window); set the color of the dropshadow where the color is set to a gray color (#AAAAAA).

Your box should now have a little more emphasis.

14 We now need to add a title for our service. Select the Horizontal Type Tool and set the font to Myriad Pro, the font weight to Regular, the font size to 40px, and the text color to white (#FFFFFF). Draw a text box from the left border of the box to the right and set the alignment to Center text. Then, type in a title.

15 Now set the font size to 18px and type a series of periods that will become a dotted line.

16 Following this, set the font size to 15px and draw a text box from the left side of the box, to the right of it. Enter some text describing the services.

17 Finally, we need to add a button at the bottom of this box. Select the Rectangle Tool, set the color to a blue color (#0076A3), and draw a box that is around 230x40px in size.

18 Add an Inner Glow effect to the button where the color is set to a darker shade of blue — I’ve used #235162.

19 Now add a label to the button. Set your font size to 18px and type in uppercase, "GET MORE DETAILS>>".

That’s the first box created.

20 Create two copies of this box by duplicating the first box and everything contained within it. Use the Move Tool (V) to space them out evenly. Also, change the details in each of the boxes.

21 To finish this section of the layout, take a copy of the large dotted line that we created in a previous step and add it at the bottom of the section.

Add the Client Testimonials

22 For the client testimonials section, we initially need to create a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Client Testimonials" with the Horizontal Type Tool (T).

23 Now for the first testimonial author photo, choose the Rectangle Tool, set the the color to a lighter gray color (#CCCCCC), and draw a box that’s around 84x84px.

24 Now add a photo of yours that has slightly smaller dimensions. Add the photo in a layer above the Background layer.

25 Next, we need to add some text next to the photo. Set the font to Arial, the font size to 14px, the color to the dark gray we used for the title of the client testimonials section (#555555), and then type some dummy text (again, you can use lorem ipsum for this).

26 Now, set the font weight to Bold and type the author’s name. On the next line, type the author’s affiliation (i.e. the name of their organisation/company) and set the color to bright blue (#00AEEF).

27 Take all of the elements used to create the first testimonial and create two copies. Place them underneath each other with consistent spacing and change the content and images.

28 We now need to add a vertical divider to the right of the testimonial section. Create a copy of the dotted line we created earlier and delete around half of the periods. Rotate the line about 90^o degrees (Edit > Transform > Rotate 90^o CCW) and place it to the right of client testimonials section.

Create the Featured Project Section

29 To create our featured project area, first we need to add a title. Set the font to Myriad Pro, the size to 24px, the color to a dark gray (#555555), and then type "Featured Project".

30 Now add a title for the featured project. Set the font size to 20px, the color to a gray color (#888888), and type a title.

Below this title, we need a screenshot of the project that is around 430x200px.

31 Then add some text that provides a brief overview of the project. Set the font to Arial, the font size to 14px, the text color to a dark gray (#555555), and type a few lines of content.

32 Also include some text at the bottom that says something like "Click Here For More Details." Change the color of this text to a light blue (#00AEEF).

33 Finally, add another copy of the dotted horizontal line at the bottom of this section.

Make the Footer

34 The footer is very straightforward to complete. Set the font to Arial, the font size to 16px, the color to #888888, and type some footer content.

All Finished

That’s everything done!

Wrapping Up

In this tutorial, I was hoping to illustrate that you don’t always need lots of fancy effects to create a nice design. Sometimes a couple of fonts and colors coupled with some subtle effects can do the job nicely.

Let me know if you have any questions or if anything was unclear and I’ll my best to answer them in the comments. In the next part of this tutorial, I’ll show you how to create an XHTML template from this design.

"Clean Business Website" Series

Download Source Files

clean-business-website-psd (ZIP, 0.53 MB)

About the Author

Create a Social Media Sharing Menu Using CSS and jQuery

Jacob Gube — Fri, 30 Apr 2010 09:55:09 +0000

Advertise here with BSA

In this tutorial, we will show you how to create a social media share menu using CSS and jQuery. We are going to create the menu using basics CSS such as the CSS background-position property and a little jQuery to make the links animated.

Final Result

Click on the image below to view the live demo.

Create the HTML

1 Let’s create the HTML first. Here is our markup.


   Bookmark or Share This Post 
  
    Delicious
    
Facebook
     Stumble
    Twitter

Style the HTML with CSS

This is how our menu looks without any CSS.

Notice that there is a CSS class added to each link in our HTML. For example: delicious, facebook, and so on. We use different classes so that we can give the links their own icons on the left (more on this later).

2 We will make the list items display side by side by using the float property. Also, we have added some padding to the link elements (#social_nav_horizontal ul li a), including 28px padding on the left so that when we add the background, there is enough space for the social media icons.

#social_nav_horizontal {
  margin-left: 100px;
  font-family: Futura, Verdana, Sans-Serif;
  font-size: 18px;
  color: #8e9090;
}
#social_nav_horizontal h3 {
  display:inline;
  padding: 0px 10px;
  border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
  margin: 0;
  padding: 0;
  margin-top:20px;
}
#social_nav_horizontal ul li {
  float: left;
  padding: 5px 0 0 5px;
  margin-left: 5px;
  list-style-type: none;
}
#social_nav_horizontal ul li a {
  padding: 4px 0 0 28px;
  height: 32px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}

Here’s how our menu looks with the above CSS style declarations.

3 After that, we add the CSS background to each class. You can use your own social media icon sets or check out the Freebies section here on Six Revisions to find free social media icons. Note that you will have to adjust the background-position and the left padding of #social_nav_horizontal ul li a depending on the sizes of the social media icons you use.

Here is the CSS for the first social media link (Delicious).

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;
}

Here is the visual representation of this code:

This is how the Delicious icon should display:

4 We add a CSS declaration for each of the social media links.

.delicious {
  background:url(images/delicious.png) no-repeat;
  background-position:0px -1px;
}
.facebook {
  background:url(images/facebook.png) no-repeat;
  background-position:0px -1px;
}
.stumbleupon {
  background:url(images/stumbleupon.png) no-repeat;
  background-position:0px -1px;
}
.twitter {
  background:url(images/twitter.png) no-repeat;
  background-position:0px -1px;
}

If everything is right, here is how it should look.

Another version: Vertical menu

So, if you want to create a CSS only menu, you’re done.

But now, we are going to add a little jQuery and change the menu’s orientation to spice it up a little. This one will be vertical menu.

5 I just took off the CSS float property from the list item declaration (#social_nav_horizontal ul li) to covert it to a vertical menu.

Add animation effects with jQuery

Time to add some jQuery. First, do not forget to add the jQuery library to your HTML page (here’s a guide for that, if you’re not familiar with jQuery).

We will be adding an effect that nudges the link to the right when the user hovers over it.

6 In the first line of our jQuery script, we select the elements we want to apply the effect to: #social_nav_horizontal ul li a.

We apply an event listener method, .hover, which will listen to the event that the user hovers over (and out of) a link item. We feed the .hover method the functions we want to execute when the user hovers over a link item (first function), and also when they hover out of the link (second function).

We use the .animate method on the hovered-over element to move them to the right by modifying its margin-left CSS property.

We also use the .stop method before the .animate method to prevent the animation from queuing it up. Basically, the .stop method will stop any other ongoing animation events on $(this) element.

$(document).ready(function() {
  $('#social_nav_vertical li a').hover(
  // on mouse over move to left
  function() {
    $(this).stop().animate({ marginLeft: '20px' },300);
  },
  // on mouse out, move back to original position
  function() {
    $(this).stop().animate({ marginLeft: '0px' }, 300);
  });
});

Here is how it looks when someone mouses over a link.

You can check out the demo to see it working.

Wrap up

That’s it! Please feel free to add any suggestions to improve this in the comments.

Download Source Files

social-share-css-jquery (ZIP, 0.017 MB)

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

Six Revisions » Tutorials

How to Make a Light Textured Web Design in Photoshop

Final Result

Related Content

About the Author

How to Make a Modern UI Web Button Using Photoshop

Final Result

Related Content

About the Author

How to Build a Vibrant Professional HTML5 Web Design

Final Result

Other Things to Do

Related Content

About the Author

How to Make an Elegant Patterned Web Design Using Photoshop

Final Result

Other Things to Do

Related Content

About the Author

How to Create a Web App’s Site Web Design in Photoshop

Final Result

Other Things to Do

Related Content

About the Author

PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

Elegant and Simple Blog Web Layout Tutorial Series

Final Result

Create the Basic Files

Basic HTML

Slice the Bookmark from the PSD

Write the HTML Markup

Container

Navigation Bar

Sidebar

Recent Posts and Latest Comments

Recent Posts

Latest Comments

Sidebar Web Banners

Posts

, month in ), the title (using

13

I enjoy reading Six Revisions

By Eric Hoffman · 1223 Comments

12

Who likes Obama?

By George Bush · 0 Comments

Footer Widgets

Widget title

Widget title

Widget title

Footer

Write the CSS

CSS Reset

Body Background and @font-face

Wrapper/Navigation

Logo/Divider

Sidebar

Posts

Footer Widgets

Footer

We’re Done!

Elegant and Simple Blog Web Layout Tutorial Series

Related Content

About the Author

Make an Elegant and Simple Blog Web Layout Using Photoshop

Elegant and Simple Blog Web Layout Tutorial Series

Final Result

Create a New Photoshop Document

Create the Background

Set Some Initial Photoshop Guides

Add the Blog Name

Add Main Navigation Menu Links

Create the Active Navigation Menu Link Background

Stylize and Position the Navigation Menu Links

Create a Horizontal Inset Divider

Designing the Post Date Background

Create the Vertical Shadow of the Post Date

Add the Date Text, Blog Post Title, and Metadata

Add the Blog Post Lead-In Image

Add and Position the Content of the Blog Post Entry

, month in
), the title (using