Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

Photoshop Tutorial: How to Make a Stitched Leather Header

Design trends please us with their variety. Just choose any you like and make the most of it. No boundaries for your creativity. But which one to choose...Well, let's take Skeuomorphism, for example. This trend is not the newest one, still, it hasn't lost its popularity and can be observed on multitude websites. Skeuomorphic elements are easy on the eyes and can add any design some habitual charm.

Still hesitate or just want to learn more about the trend? You are welcome to follow the link – a cool Interactive Infographic will help you clarify all its pros and cons.

And if you have nothing against and want to start your own skeuomorphic experience, let me offer you this tutorial which will show you how to create a leather header with navigational menu.

Final Result

This a starter-intermediate level tutorial that will show you some simple tricks which can lead you to the desired result. So, let's start!

1. First of all, let’s create a new document with a size of 1071×263. The Background color is white.

2. Now we go to our tools and choose a rounded rectangle tool. Set the radius to 15px and create a rectangle similar to the following. The color is set to #f98909.

3. It is time to add some blending options to the layer. Right click the layer with the rounded rectangle and choose Blending Options and insert following:

I've chosen the color #c0bcbc in order not to make the gradient too contrast.

Some nice leather textures you can find following the link. Download them and make the following steps to add them to your patterns set: Edit - Preset Manager - Ctr+5 ( or just choose Patterns)- Load - Done.

And that is the result we got after all these manipulations.

4. Now let’s make our stitches. Take your brush tool (set the radius to 4px, color #c0bcbc). Press Shift and draw your stitch. Choose Blending Options and insert the following:

5. Press Ctrl+T and transfer the stitch.

6. Duplicate the layer and shift it to the right.

7. Merge the two layers and duplicate again. Shift to the right.

Thus merging the layers you increase the number of stitches on the same layer and duplicating it you add the necessary number of stitches to your header.

Finally you'll get the following.

All your stitches are on the same layer.

8. Duplicate the layer with the stitches 2 times. Place the original layer over its copies.

9. Change the color of the first copy to #c08554. Shift it to the right and down.

10. Change the color of the second copy to #010101 and shift it to the right.

You will get the following result:

11. To make our stich elements look more realistic we need to add one more detail.
Let’s draw a stripe using brush tool and #8a695d color. Go to Blending Options and choose the same pattern overlay as we have already done (step 3).

12. Now we will add some text to our navigation bar. I used Georgia 18 for the menu and Lobster 24 for Company Name. White color. Add the following blending options (all buttons except HOME button):

13. To show what our active link will look like we will duplicate the layer with a HOME button, change the color of the copy to the #785641 and add the copy with such blending options:

14. Shift the original layer with the HOME button 1px to the right and down.

15. Choose rounded rectangle tool. Set the radius to 15px and create a search form. Fill it with white color - the Basket Tool (G) - and repeat the same manipulations that we have already done to the Home button (steps 13-14).

16. Add a magnifier custom shape which you can find following the link. Change its color to white.

That's it. Your header is ready. Good work! Hopefully it was quite simple for you to follow the tutorial. Here you can download the PSD file, by the way. Take care!



Ivy Green

Ivy is a creative writer and experienced web designer at TemplateMonster. You can find a lot of awesome templates in the TemplateMonster inventory. Follow her latest updates on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

26 responses to “Photoshop Tutorial: How to Make a Stitched Leather Header”

  1. free cvv says:

    … [Trackback]

    […] Information on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  2. … [Trackback]

    […] Find More Information here to that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  3. … [Trackback]

    […] Here you can find 99750 more Information to that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  4. … [Trackback]

    […] There you will find 56397 more Information on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  5. click now says:

    … [Trackback]

    […] Read More to that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  6. ip stresser says:

    … [Trackback]

    […] There you can find 39047 additional Info on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  7. bergara guns says:

    … [Trackback]

    […] Read More on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  8. … [Trackback]

    […] Read More on on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  9. … [Trackback]

    […] Read More on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  10. … [Trackback]

    […] Read More on to that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  11. … [Trackback]

    […] Find More here to that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  12. … [Trackback]

    […] Information on that Topic: monsterspost.com/how-to-make-stitched-leather-header-photoshop-tutorial/ […]

  13. IvyGr says:

    Thanks) Cool to know that it was useful.

  14. william says:

    this is the best tut on
    Stitches I have seen so far…thank you for sharing

  15. Stacy Summers says:

    wow! cool and easy to follow tutorial) Thanks, Ivy!

  16. IvyGr says:

    Thank you guys @a147011d98cb6c072847447ac544488b:disqus @google-74d1c17afd4973276e15219a4a6bb2f3:disqus @46574cce11e0653644e2f6ea967e7b23:disqus @8235c8c85262872f5dbb887585a4a7f6:disqus @f9c4b50d4b0021c7e560e1e3dd0e323b:disqus @facebook-100001760457504:disqus @d36d5004149e3bb9e9159e13df761e87:disqus @twitter-326175211:disqus! It’s really great to read your comments. Very inspiring!

  17. harish says:

    very nice tutorial to beginers

  18. AJAI KUMAR says:

    HI, Good Tutorial very helpful and your simply words are very helpful for under standing this tutorial we are waiting for next tutorial

  19. tenaj says:

    Seriously…u guys R-O-C-K!!! I’ve yet to come across a blog post or other email from Template Monster that doesn’t contain at least one useful item 🙂

  20. mauro says:

    Muito massa de parabens

  21. Bernster says:

    More like this!!! Bernie in Sydney

  22. Ester Pro says:

    Thanks.

  23. Madhusudan Sharma says:

    Thanks IVY. Nice Tutorial

  24. Michael says:

    very good tutorial…great content

  25. sagar sanan says:

    Hi Ivy, Amazing stuff. Pretty easily explained. Keep up the good work. With conviction nothing is impossible. Cheers. Your true friend. You know who!!!!!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *