Make an Elegant and Simple Blog Web Layout Using Photoshop

Jul 11 2010 by Eric Hoffman | 41 Comments

Make an Elegant and Simple Blog Web Layout Using Photoshop

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.

Final Result

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

Final Result

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 a New Photoshop Document

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.

Create the Background

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.

Add the Blog Name

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

Add the Blog Name

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

Add the Blog Name

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.

Add Main Navigation Menu Links

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 > 90o 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.

Create the Active Navigation Menu Link Background

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).

Create the Active Navigation Menu Link Background

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.

Create the Active Navigation Menu Link Background

The stroke color should be black (#000000).

Create the Active Navigation Menu Link Background

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

Create the Active Navigation Menu Link Background

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").

Stylize and Position the Navigation Menu Links

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.

Stylize and Position the Navigation Menu Links

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).

Create a Horizontal Inset Divider

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).

Create a Horizontal Inset Divider

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.

Create a Horizontal Inset Divider

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).

Designing the Post Date Background

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

Designing the Post Date BackgroundDesigning the Post Date Background

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.

Designing the Post Date Background

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.

Designing the Post Date Background

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%.

Designing the Post Date Background

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.

Designing the Post Date Background

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

Designing the Post Date Background

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).

Designing the Post Date Background

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.

Designing the Post Date Background

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.

Designing the Post Date Background

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

Designing the Post Date Background

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.

Designing the Post Date Background

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).

Build the Sidebar's Background

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

Build the Sidebar's Background

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.

Create the Search Feature

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.

Add the Sidebar Text

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.

Design the Sidebar Ad Units

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

Design the Sidebar Ad Units

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.

Sidebar Housekeeping

Sidebar Housekeeping

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.

Create the Main Blog Footer Column Dividers

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".

Create the Main Blog Footer Column Dividers

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.

Create the Main Blog Footer Column Dividers

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 Main Blog Footer Column Dividers

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?

Final Result

Elegant and Simple Blog Web Layout Tutorial Series

Download Source Files

Related Content

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.

41 Comments

Kimcool

July 11th, 2010

Powerful website tutorials.Maybe I’ll change a colorful design

Lauren

July 11th, 2010

Nice tutorial, very easy to follow. Not to mention the blog layout is cute. Thanks for sharing.

pynouch

July 11th, 2010

Great tutorial. thx

Sergei Tatarinov

July 11th, 2010

Really simple and absolutely nothing new, letterpress-style is today’s worst cliche. Just my two cents.

Oh and one wise man wrote in his tweet today:

“soft gradients, 1px lines, rounded corners, little noise, 1px bevel, letterpressed text = 90% of today’s web design”

(http://twitter.com/austoni/status/18266668595)

As designers, we must set new trends but not follow them for eternity…

richard carpenter

July 11th, 2010

not feeling this design at all. theres nothing there to make it stand out. all the text colors are the same and the font sizes have no variety.

alot can be done to improve this design.
- make use of some gradients
- justify the text
- change colors of the main titles
- use a slightly smaller font size for the example paragraph text

its a well written tutorial and well done to the author, just dont like the outcome.

Marcell Purham

July 11th, 2010

@sergei It is fairly simple but respect the man for writing a tutorial for the six revisons community. Maybe its not valuable to you but to someone else it is. When I write tutorials for Webdevtuts.net I always focus on beginners and people who are new to the design world

Great tutorial. I enjoyed it

Sergei Tatarinov

July 11th, 2010

@Marcell

I do respect the author for writing this tut and it truly is an honour for designers to be published on blogs like Six Revisions. One day I will try to send in an application for an article or a tutorial too.

I was talking about the outcome itself, not about narration style or author’s professionalism. As for beginners,

Alberto

July 11th, 2010

Great, now how do you get it into HTML format?

John

July 11th, 2010

I totally agree with Marcell.

It’s exactly what it is, a tutorial with a simple design. Some comments just make me laugh! Remember, it wasn’t made for a client, so relax =D

Techy

July 12th, 2010

@sergei The tutorials are not meant to be actual themes, its to teach people how to use photoshop to make website designs… So its not that big of a deal…

erkan

July 12th, 2010

Very detailed and informative tutorial. thanks

David

July 12th, 2010

Thanks for posting this tutorial. You’ve got some nice depth to the design with the shadows and soft gradients. Of course, it could be improved but i like the simplicity.Enjoyed the tutorial…

putragaluh

July 12th, 2010

nice tutorial, take a few more touches, such as favorite colors, images and other. warm greetings from Indonesia. thx

iPJ

July 12th, 2010

I used blogger template designer, and it works pretty well. Still have to go into the html to fix a few things that are limited in the display mode.

rod rodriguez

July 12th, 2010

nice tutorial and cool concept if I may add, sometimes less is really more. It doesn’t always work but this one is an exception. I like it very much. Thanks for posting.

david

July 12th, 2010

I like it a lot too. I think it isn’t necessary to use use gradients, to many diferent colors or justify a text to get a good design. Thanx.

James Scott

July 12th, 2010

This is a really great simple design.

Farid Hadi

July 13th, 2010

Thanks for the tut. You just taught me a couple of new effects and gave me inspiration that I can use in future projects.

Nottingham

July 13th, 2010

This is a great tutorial, will forward this around the studio :-)

Boon

July 13th, 2010

Great tutorial on this! I am so gonna try it myself real soon.
But how do I put it up on blogger tho? I’m not a website designer tho.

CAP

July 14th, 2010

Looks nice, but i feel the design uses a single color. Other than that it’s absolutely great work.

biley

July 16th, 2010

i can’t wait for the html conversion!

v1dz

July 20th, 2010

Amazing part 1. Waiting for the Part 2.

Eric Hoffman

July 20th, 2010

Thanks for the support guys! I’m really glad my tutorial got published!

wvss

July 21st, 2010

Very nice webdesign!Well explained and to the point.

tdtcm

July 23rd, 2010

Wow, that was a really great tutorial on making a cool template. It looks so clean!

That makes me redesign my blog. :)

Elgart

August 20th, 2010

Really great tutorial! I will apply some of your design techniques. Very fascinating.,you did well.

Lex Fitz

August 29th, 2010

Great tutorial, Eric. I really like the layout too. Simplicity definitely has its place.

Best Regards,
Lex Fitz

Lisa

August 30th, 2010

Thanks for an easy-to-follow tutorial! I learned at least five new PS skills after completing this and am thrilled to put a few of them to use today.

Debbie

September 27th, 2010

Thanks for posting and sharing your time for FREE. It always amazes me why someone complains ( at any level ) about someone else posting something they don’t feel is up to par. While the internet has brought to us a wealth of knowledge at our finger tips, it’s also worked against us in developing manners.

Debbie

nadeem

October 31st, 2010

very good tutorial really very easy to understand thanks for your effort… i am working on college website if anyone can help me in creating form and tell me the method i shall be very thankful… my email is [EMAIL REMOVED BY ADMIN]

Renan

November 21st, 2010

Godnes!

Some people really like to complain! This is a Great tutorial, and like Rod Rodrigues said “sometimes less is more”, which I totally agree! The other guy complaining about not having gradients? Are you serious? Just my two cents, I think it looks good! Also, this is obviously more of a blog layout, which this design fits right on!

Thanks for the tutorial Eric!

Patty

December 5th, 2010

@ Sergei: your first comment was incredibly mean supposedly proving your opinion by some “wise man on twitter”… I can quote anybody from anywhere and pretend the person is God, if your comment is mean, we do not care about its source. And please, stop pretending this “wise” person is someone else than you (or then, post the link so we can confirm what you say is not fake). Your second comment showed how actually you are jealous of Eric for making it to a published Six Revisions author. Just apply if you want to be published (and usually people who apply somewhere do not put nasty comments on their future colleague’s posts) and save the tutorials from the written expression of your frustration.

Ok now to Eric: this was one of best tutorials I got to read, especially as I can’t imagine how tough it is to translate your ideas into a tutorial and then to beginners. I do also greatly appreciate the time you spent on it for FREE, as many stated above.

An other thing, while many people comment here that the tutorial was great, nobody pointed out this little mistake, on step #88 of the tutorial:

“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.”

The pic that illustrates this step do actually shows Width:1px and Height: 2px. It got me confused as well as I tend to stick to text and I had to check this twice.

Overall an excellent free tutorial, thank you again Eric.

Rahul Verma

March 10th, 2011

I am facing some problems in the implementation of the point no.18….

turntablejoe

April 1st, 2011

I think this tutorial is wonderful, just ignore the whiners. It is perfect for newbies to practice.

fettabachi

April 22nd, 2011

Excellent tutorial! Thanks for taking the time to share your techniques. Pay no mind to those who look to criticize. Your contribution was valuable to me as well as to a lot of others who will never leave a comment.

Imriel

May 10th, 2011

Thank you for this tutorial! I found it very useful and have in fact used it as a basis for a uni assignment. Very detailed and step by step, easy to follow instructions :) – was a great introduction into designing for the web using Photoshop!

Alex

June 8th, 2011

Very good tutorial, clear, simple and very well organized. Thank’s

James

August 2nd, 2011

the tutorial is about photoshop. did photoshop have magic button to generate html code? I really want to build my own theme because its hard to find the right one ( for you taste)

Mark

November 7th, 2011

If I could get a little help. Step #23. Once I delete the arrow layer, it leaves a ghosted selection. So, when I change the linkbg properties to add a stroke or inner glow, it adds the stroke and inner glow to the rectangle and the arrow selection. These tutorials can be very helpful to us newbies. Thank you for any help getting me past this step :)

Leave a Comment

Subscribe to the comments on this article.