Myriad Pro: Create a Minimal WordPress Theme in Photoshop

Posted in Tutorials, Web Interface • Posted on 28 Comments

In this tutorial we are going to create a minimal WordPress theme in Photoshop. Don’t worry if you are new with using Photoshop, any skill level will do. I’ll try my best for you to follow this tutorial from start to finish. Also, you will learn how to create simple patterns to add more texture to our WordPress theme.

This is a simple design created in Photoshop. The working demo will soon follow, which will involve converting the PSD file to a working HTML/CSS. So, are you excited? Open your Photoshop now and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Open up Photoshop and create a 1200 px x 1850 px document.

Make sure that you have turn on Rulers and Guides

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

This is 960 grid base layout for this tutorial we will not download it. Let’s simply create our own guide. Go to ViewNew Guide 120px Vertical Repeat the step and change the value to 1080px.

Step 2: Working with Background

Duplicate the the background layer and fill it with #f8f8f8. Next we will create a simple dotted pattern. Create a new document 15px x 15px. Zoom in by pressing Ctrl + . Uncheck the background layer and create another layer, using Pencil Tool create a dot at the top left of our canvas.

Go to EditDefine Pattern name it dotted. Now back to our layout. Create new layer above the background using the Paint Bucket Tool switch from Foreground to Pattern select the dotted pattern and make the layer Opacity to 15%. Group all the layers we have just created and name it Background.

Using the Rectangle Tool with a fill color of #363636 create a rectangle with a height of 10px starting from the top left of the canvas to the right.

Step 3: Working with Logo

Start by placing a 38pxx 38px using the Rounded Rectangle Tool with a fill of #f7941d. Using Text Tool select Myriad Pro Bold font with a size of 36pt. Place it as shown in the screenshot below.

Add a Layer Mask to the shape we have just created by pressing the button beside the fx button in the layers panel.

Select the Layer Mask then Ctrl + Click to the Text layer to make a selection, fill it with #000000. This will be applied to the layer mask and make the selection transparent into the shape.

Using Text Tool select Myriad Pro.

  • Myriad Pro: Font Size 24pt, Color #363636
  • Best choice of font: Font Size 12pt, Color #959595

Step 4: Working with Social Icons

Open up the social icons, change the image size to 19px x 19px by pressing Ctrl + Ctrl + I and change the values of height and width. Place the icons in our canvas with in a new folder named, Social Icons, Refer to the screenshot below for the positioning and colors.

Step 5: Working with Navigation

Create a new group and name it Navigation. As you can see in the screenshot above there is a rectangular shape with a stroke, start by using the Rectangle Tool with a height of 90px.

Add this Blending Option:

  • Gradient Overlay: #f8f8f8, #fcfcfc

  • Stroke: #c2c2c2

Open up the Navigation Icons and resize them to 22px x 22px. Make a new group inside the navigation group, name it Icons and place it there. Now that we have our icons, it’s time to put up our navigation links. Follow the screenshot below for the formatting and color of the text.

Merge all the lines you have made by pressing Ctrl + E. Duplicate the merge layer and move it 1px to the right by pressing the right arrow key on the keyboard.

Step 6: Working with Search

Create a new group above Navigation and name it Search. Using the Rectangle Tool color #ffffff create a shape as shown in the screenshot below.

Add this Blending Option:

  • Stroke: #c2c2c2

Let’s create a search button, using the Rectangular Marquee Tool create a 40px x 35px rectangle and fill it with any color.

Add this Blending Option:

  • Gradient Overlay: #f8f8f8, #fcfcfc

  • Stroke: #ffffff

Add this line with a color #c2c2c2, then place the icon 19 px x 19px.

Using the Text Tool add this text in the search field area.

Step 7: Working with Slider

Select the Rectangle Tool with a fill color #ffffff, create a shape 630px x 340px.

Add this Blending Option:

  • Stroke: #c2c2c2

Select the shape by pressing Ctrl + Click on the shape layer. Go to SelectModifyContract 10px.

Fill the selection with any color and place a sample image that’s the same size.

Below the shape layer create a new layer and name it Shadow. Using the Pen Tool create a shape as shown in the screenshot below and fill it with #000000.

Apply a Gaussian Blur with a Radius of 2px. Set the Layer Opacity to 40%.

Using the Ellipse Tool create four shapes as shown in the screenshot below. Make sure it is aligned to the center.

Add this Blending Option:

  • Color Overlay: #c2c2c2

  • Inner Shadow: #000000

The color #c2c2c2 will serve as the normal state of our slider, for our active state change the color to #f7941d

Step 8: Working with Posts

To start, create a new group and name it Posts. Using the Rectangle Tool with a fill color of #ffffff create a 630px x 300px rectangle.

Add this Blending Option:

  • Stroke: #c2c2c2

Create another 200px x 200px shape using Rectangle Tool and add the same blending option.

Ctrl + Click the layer to make a selection. Go to SelectModifyContract 10px

Fill the selection with any color and place a sample thumbnail image. Using the Text Tool put up the Title of the post, content, author etc.

Lets make a read more button for our post. Create a new group inside Posts and name it more. Using the Rectangle Tool create a 88px x 30px shape.

Add this Blending Option:

  • Inner Glow: #ffffff

  • Gradient Overlay: #f1f1f1, #fbf9f9

  • Stroke: #c2c2c2


I just took a screenshot of Digg, Tweet and Facebook and paste it in the bottom left side of the post.

Duplicate Posts folder and place it as shown in the screenshot below.

Step 9: Working with Pages

Create a new group and name it Pages. Create a 26px x 26px shape using the Rectangle Tool. For the inactive pages apply a blending option with a Stroke of #c2c2c2. For the active page just copy the layer styles we applied on the read more button and apply it to the shape.

Step 10: Working with Advertisements

Create a new group and name it Sidebar. Create another group inside Sidebar and name it Advertisement. Using the Rectangle Tool with a fill color of #ebebeb create a 145px x 145px shape. Then set the Layer Opacity to 50%.

Ctrl + Click the layer to make a selection. Go to SelectModifyContract 10px. Fill it with #ffffff and add a 1px #c2c2c2 stroke.

Duplicate it four times as shown in the screenshot below.

Step 11: Working with Tabs

Create new group inside Sidebar and name it Tabs. Now select the Rectangle Tool with a fill color of #ebebeb create a 300px x 500 box with a distance 35px below advertisement. Set the layer Opacity to 50%.

This part is just the same as we did in our advertisement, just refer to Step 10.

Create tabs using Line Tool and Text Tool.

Create a new layer below the tabs layers. Using the Rectangle Tool create a shape as shown in the screenshot below.

Add this Blending Option:

  • Gradient Overlay: #f1f1f1, fbf9f9


Time to create a sample post. Start by grabbing a 60px x 60px sample thumbnail. Also, we will add title of the post, when it is published and in what category.

Group all the layers we have created in our sample post and duplicate it four times.

I also added a sample 300px x 300px advertisement.

Step 12: Working with the Footer

Create new group and name it Footer. Using Rectangle Tool with a fill color of #363636 create a 1200px x 485px shape.

Lets create a new pattern. Create a 6px x 6px file. Unlock the background layer and create a new layer. Set the foreground color to #363636, using Pencil Tool create a pattern as shown in the screenshot below.

Using the Rectangular Marquee Tool make a selection about 3px height starting from left to right and fill it with the pattern we made.

Lets create another pattern. Create a 12px x 12px file. Change the foreground color to #303030. Using Pencil Tool create a pattern as shown in the screenshot below.

In a new layer fill the whole footer with the pattern we have made.

In our footer we will be placing our tweets, popular posts and about, so create a group for each. First we will work on in tweets, using the Text Tool fill in with text the same as shown in the screenshot below.

Next in popular just duplicate the sample posts we have made in our tabs, then we will match the color as we did in our tweets.

Lets proceed to about. Grab some Lorem Ipsum text and place it as shown in the screenshot below. Also I merge the layers of our logo and add a color overlay with a fill color of #6d6e71.

For our final step using the Rectangle Tool with a fill color of #252525 create a 40px high shape, then using Text Tool add a copyright text color #616264.

Finally we’re done! I really hope that you followed and learned something from this tutorial. If you have questions feel free to ask them below. Cheers to all!

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

28 Comments Best Comments First
  • andrew

    Thursday, July 14th, 2011 23:47

    20

    where’s part 2!!? :P i want to learn how to make a full website :)

    +1
  • Adrian

    Thursday, June 9th, 2011 12:26

    1

    Love texture footer. Good minimalistic design.

    0
  • Sandra

    Saturday, June 11th, 2011 14:18

    11

    I am not a fan of minimalistic but I quite like this one and great tutorial – very clear and detailed.

    0
  • Yuriy

    Monday, June 13th, 2011 01:44

    13

    Yeah! I’m realy like it
    I would more joyfull if you are write about html js coding of these theme for WP. Main question is interesting about slider – how he made? js? how him connect to WP posts? Automaticly?

    ps. sorry for my english – its not my native )

    0
  • Ian

    Sunday, June 12th, 2011 00:11

    12

    This is great. Well, I might have it converted to html for free tumblr theme :)

    0
  • Clayton Rice

    Friday, June 10th, 2011 20:56

    8

    Great tutorial! Photoshop can do some amazing things and you’ve certainly shown some of them here. Cheers for a great wordpress theme.

    0
  • marco

    Friday, June 10th, 2011 00:15

    3

    fantastic guide! You’r good designer!

    0
  • alfred

    Thursday, June 9th, 2011 13:27

    2

    Pretty nice, I like it!
    But I believe the comercial on the right corner, breakes the structure. Squishishing it slightly from both sides would be better. (Just my personal opinion)

    0
  • Renato Alves

    Friday, June 10th, 2011 03:19

    4

    Hello Michael, first I’d like to thank you for creating this awesome template, I’m sure it was a piece of cake for you. But what I really wanted to say is thank you for creating such a good tutorial. You explain with very good details how to make things that even a very freebie in Ps would do so. I’m very new to the web design world and find very often myself stumbling across tutorials websites that put a website tutorial only for advanced users, what it is a shame and at the same time it is good, because one day I’ll get there and won’t like freebie tutorials.

    To finish I’d like to say that I’m looking forward to the HTML/CSS conversion, I’m sure I’ll improve my coding skills too. Below I put the link with the image of the template above that I did myself (would be great a experienced opinion), it is a little different because there was some things I couldn’t do.

    Thanks and Cya!

    0
  • Nanang Gunawan

    Friday, June 10th, 2011 03:56

    5

    it’s long journey for me….
    cause i am new in photoshop… :D

    0
  • Yishan

    Friday, June 10th, 2011 19:52

    7

    Great tutorial! Thanks.
    But I found a question, in step 10, making the inner rectangle area of the advertisement , the “Select – Modify – Contract” value should be 20px or 10px? (145px – 125px)/2 ?

    0
    • Michael Burns

      Saturday, June 11th, 2011 06:52

      9

      Contract it by 10px. Coz 145px by 145px contracted by 10px Photoshop will contract it in all sides of the shape. So therefore -10px in all side that will become 125px by 125px.

      0
      • Michael Burns

        Saturday, June 11th, 2011 06:55

        10

        Oh my bad. I was wrong in the tutorial it should be 10px not 20px :P

        0
  • Jack

    Friday, June 10th, 2011 11:13

    6

    i learned a few new things here concerning web design. Thanks.

    0
  • Puneet

    Monday, June 13th, 2011 18:20

    14

    great tuts. Deprately waiting for conversion tutorial from PSD to Html.

    0
  • Fareed

    Tuesday, June 14th, 2011 11:09

    15

    Excellent Piece of work, very nice…Using Photoshop wordpress theme become clean and minimal…well done..

    0
  • jeff matin

    Saturday, December 3rd, 2011 06:25

    24

    how to config to wordpress themes?

    0
  • Buda

    Tuesday, January 3rd, 2012 13:32

    25

    How to make a working site with this template?? Why nobody want to make a full tutorial, this is just part 1, this is just and picture! :s

    0
  • MsDalfo

    Saturday, January 14th, 2012 00:56

    26

    Buda, they said they were working on that very thing at the beginning of the tut.

    The reason this tutorial exists is because oftentimes the people who create the front-end of a website are not the same people that code the back-end.

    That being said, thanks for the tutorial! I’m still picking up on how to make web graphics with Photoshop, and this is very informative!

    0
  • TaBha

    Thursday, March 1st, 2012 09:34

    28

    i like your tutorial. minimalistic design. i will try follow your tutorial.
    thank you.

    0
  • kchul

    Wednesday, February 15th, 2012 07:09

    27

    i want to do next step.
    psd to html.

    0
  • Kenlore

    Saturday, September 17th, 2011 00:22

    23

    Files?

    0
  • adab

    Wednesday, September 7th, 2011 05:23

    22

    Sry, not a very good tutorial. All these step by step tuts sound as if the tutors don’t have much patience or something, but are just rushing through because they had to. “Do this, then do that”, forgetting details in between. For instance here, the font size of 24 pt makes no sense, as it’s several times larger than the orange logo box itself. Moreover, the tutor didn’t specify the dimensions of the logo box, before giving the logo font sizes.

    The layer mask part is also unclear. Add a layer mask to the layer we just created? The text layer was the one created before that step, but the layer mask doesn’t go onto the text layer. Is it hard to explain “Add a layer mask to the orange icon”, or to show more of the layer panel not just the bottom part with the layer mask icon in the image?
    It also doesn’t say that the text layer should be deleted in order for the layer mask effect below to show. And why pick a specific color for the “M” if it’s only going to be used for selection? If I was a complete beginner, I’d be lost by now, due to all the omitted details that make it seem as if the tutorial targets more experienced users who can fill in the details by themselves.

    And that’s as far as I’ve read this far.

    0
  • andrew

    Thursday, June 16th, 2011 01:24

    16

    could this template become a fluid web page???

    0
  • stramp

    Thursday, June 16th, 2011 13:50

    17

    May be a dumb ques, but how can i convert this pds into a woedpress theme?

    can you tell me please?

    0
  • Shawn

    Friday, June 17th, 2011 06:18

    18

    The most important part of this tutorial is missing! This is an excellent PSD doc, but it’s NOT a WordPress theme, not without the cutting and coding. This is the part I need the help with. I’d love to see how this is done!

    Excellent look. Maybe include a part two: Coding…

    0
  • IRFAN

    Sunday, June 19th, 2011 15:03

    19

    i would love to see it its slicing and css part

    0
  • Nirmal

    Saturday, August 27th, 2011 11:23

    21

    Hello Michael, would you kindly write a tutorial on this template’s PSD to HTML and then to WORDPRESS ? It shall be a huge help for guys like me. This one was great. thank u

    -1
  • TaBha

    Thursday, March 1st, 2012 09:34

    28

    i like your tutorial. minimalistic design. i will try follow your tutorial.
    thank you.

    0
  • kchul

    Wednesday, February 15th, 2012 07:09

    27

    i want to do next step.
    psd to html.

    0
  • MsDalfo

    Saturday, January 14th, 2012 00:56

    26

    Buda, they said they were working on that very thing at the beginning of the tut.

    The reason this tutorial exists is because oftentimes the people who create the front-end of a website are not the same people that code the back-end.

    That being said, thanks for the tutorial! I’m still picking up on how to make web graphics with Photoshop, and this is very informative!

    0
  • Buda

    Tuesday, January 3rd, 2012 13:32

    25

    How to make a working site with this template?? Why nobody want to make a full tutorial, this is just part 1, this is just and picture! :s

    0
  • jeff matin

    Saturday, December 3rd, 2011 06:25

    24

    how to config to wordpress themes?

    0
  • Kenlore

    Saturday, September 17th, 2011 00:22

    23

    Files?

    0
  • adab

    Wednesday, September 7th, 2011 05:23

    22

    Sry, not a very good tutorial. All these step by step tuts sound as if the tutors don’t have much patience or something, but are just rushing through because they had to. “Do this, then do that”, forgetting details in between. For instance here, the font size of 24 pt makes no sense, as it’s several times larger than the orange logo box itself. Moreover, the tutor didn’t specify the dimensions of the logo box, before giving the logo font sizes.

    The layer mask part is also unclear. Add a layer mask to the layer we just created? The text layer was the one created before that step, but the layer mask doesn’t go onto the text layer. Is it hard to explain “Add a layer mask to the orange icon”, or to show more of the layer panel not just the bottom part with the layer mask icon in the image?
    It also doesn’t say that the text layer should be deleted in order for the layer mask effect below to show. And why pick a specific color for the “M” if it’s only going to be used for selection? If I was a complete beginner, I’d be lost by now, due to all the omitted details that make it seem as if the tutorial targets more experienced users who can fill in the details by themselves.

    And that’s as far as I’ve read this far.

    0
  • Nirmal

    Saturday, August 27th, 2011 11:23

    21

    Hello Michael, would you kindly write a tutorial on this template’s PSD to HTML and then to WORDPRESS ? It shall be a huge help for guys like me. This one was great. thank u

    -1
  • andrew

    Thursday, July 14th, 2011 23:47

    20

    where’s part 2!!? :P i want to learn how to make a full website :)

    +1
  • IRFAN

    Sunday, June 19th, 2011 15:03

    19

    i would love to see it its slicing and css part

    0
  • Shawn

    Friday, June 17th, 2011 06:18

    18

    The most important part of this tutorial is missing! This is an excellent PSD doc, but it’s NOT a WordPress theme, not without the cutting and coding. This is the part I need the help with. I’d love to see how this is done!

    Excellent look. Maybe include a part two: Coding…

    0
  • stramp

    Thursday, June 16th, 2011 13:50

    17

    May be a dumb ques, but how can i convert this pds into a woedpress theme?

    can you tell me please?

    0
  • andrew

    Thursday, June 16th, 2011 01:24

    16

    could this template become a fluid web page???

    0
  • Fareed

    Tuesday, June 14th, 2011 11:09

    15

    Excellent Piece of work, very nice…Using Photoshop wordpress theme become clean and minimal…well done..

    0
  • Puneet

    Monday, June 13th, 2011 18:20

    14

    great tuts. Deprately waiting for conversion tutorial from PSD to Html.

    0
  • Yuriy

    Monday, June 13th, 2011 01:44

    13

    Yeah! I’m realy like it
    I would more joyfull if you are write about html js coding of these theme for WP. Main question is interesting about slider – how he made? js? how him connect to WP posts? Automaticly?

    ps. sorry for my english – its not my native )

    0
  • Ian

    Sunday, June 12th, 2011 00:11

    12

    This is great. Well, I might have it converted to html for free tumblr theme :)

    0
  • Sandra

    Saturday, June 11th, 2011 14:18

    11

    I am not a fan of minimalistic but I quite like this one and great tutorial – very clear and detailed.

    0
  • Clayton Rice

    Friday, June 10th, 2011 20:56

    8

    Great tutorial! Photoshop can do some amazing things and you’ve certainly shown some of them here. Cheers for a great wordpress theme.

    0
  • Yishan

    Friday, June 10th, 2011 19:52

    7

    Great tutorial! Thanks.
    But I found a question, in step 10, making the inner rectangle area of the advertisement , the “Select – Modify – Contract” value should be 20px or 10px? (145px – 125px)/2 ?

    0
    • Michael Burns

      Saturday, June 11th, 2011 06:52

      9

      Contract it by 10px. Coz 145px by 145px contracted by 10px Photoshop will contract it in all sides of the shape. So therefore -10px in all side that will become 125px by 125px.

      0
      • Michael Burns

        Saturday, June 11th, 2011 06:55

        10

        Oh my bad. I was wrong in the tutorial it should be 10px not 20px :P

        0
  • Jack

    Friday, June 10th, 2011 11:13

    6

    i learned a few new things here concerning web design. Thanks.

    0
  • Nanang Gunawan

    Friday, June 10th, 2011 03:56

    5

    it’s long journey for me….
    cause i am new in photoshop… :D

    0
  • Renato Alves

    Friday, June 10th, 2011 03:19

    4

    Hello Michael, first I’d like to thank you for creating this awesome template, I’m sure it was a piece of cake for you. But what I really wanted to say is thank you for creating such a good tutorial. You explain with very good details how to make things that even a very freebie in Ps would do so. I’m very new to the web design world and find very often myself stumbling across tutorials websites that put a website tutorial only for advanced users, what it is a shame and at the same time it is good, because one day I’ll get there and won’t like freebie tutorials.

    To finish I’d like to say that I’m looking forward to the HTML/CSS conversion, I’m sure I’ll improve my coding skills too. Below I put the link with the image of the template above that I did myself (would be great a experienced opinion), it is a little different because there was some things I couldn’t do.

    Thanks and Cya!

    0
  • marco

    Friday, June 10th, 2011 00:15

    3

    fantastic guide! You’r good designer!

    0
  • alfred

    Thursday, June 9th, 2011 13:27

    2

    Pretty nice, I like it!
    But I believe the comercial on the right corner, breakes the structure. Squishishing it slightly from both sides would be better. (Just my personal opinion)

    0
  • Adrian

    Thursday, June 9th, 2011 12:26

    1

    Love texture footer. Good minimalistic design.

    0

Comments are closed.

54.87.156.29 - unknown - unknown - US