Quick Tip: Stitch up Your Layout
videos

Quick Tip: Stitch up Your Layout

on Mar 6th 2012 with 56 comments
Tutorial Details
  • Topic: Photoshop
  • Difficulty: Beginner
  • Screencast duration: 9 mins

Final Product What You'll Be Creating

Download Source Files

In this Quick Tip we’re going to create a cool stitching effect in Photoshop. We won’t be using brushes, we won’t be relying on patterns – we’re going to use a really simple and fast alternative.

View Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube!

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • GorillaWma

    Adi you are great. Your tips and screencasts help me alot and I really appreciate it. Thank you and pls don’t stop doing this ! :)

  • Eric Oboite

    This is exactly what I have been looking for

  • Matt27

    Great tutorial. I’ve always used paths but never thought to use text! So simple!

    Minor complaint on the quality of the video, even in HD I was struggling to make out some of the details. Minor niggle though, over all was a great tutorial and I’m sure it will save me some time!

  • Muhammad Raza Ali Khan

    Really cool tip. I love your teaching style – very casual and relaxed :)

  • Bartosz Kaszewczuk

    That was really clever usage of type tool. Thanks!

    I asked about it earlier but never got any answer regarding it, so here it goes again. When you drag a layer with move tool it shows these relative guides that allow you to quickly snap your element to it. How do you achieve that? I had a look at pref pane in PS but never found anything like that. Thanks in advance.

    • Frank

      Well Bartosz, i can help with that. Adi has pointed at that earlier. Go to view-show and select smart guides.
      its a wonderfull tool.

      Adi, keep up the good work. Have a good one.

      Frank

      • Bartosz Kaszewczuk

        Thanks Frank! That worked like a charm.

  • http://www.xhtmlmaster.com XHTML master

    Very nice! Keep it up!

  • Pingback: Quick Tip: Stitch up Your Layout | Shadowtek | Hosting and Design Solutions

  • Victor

    I used to do it playing with custom brushes. This way is a lot quicker and easy.

    Thanks a lot!

  • supprof

    as always all the excelent tutorials are made by this gay adi purdila
    thank you very mutch adi
    u r the perfection of this site

    • http://www.snaptin.com Ian Yates

      You might want to proof read your comments before hitting enter :)

      • supprof

        r u jealous!!

        adi is the reason for which i show up
        he is teaching the profesional tricks for free and he made this site better
        so thank you adi
        adi is the best

        • http://rockingthepjs.com/ Trisha Cupra

          No, I don’t think he’s jealous. I think he’s wondering what ‘gay’ has to do with anything… I’m sure he’s a great guy…

        • http://abrightconcept.com Gabriel

          He is commenting regarding the fact that you wrote “this gay adi” as opposed to what you probably meant, which was “this *guy* adi.” :)

      • Dougieladd

        Classic! :)

        • ivascu

          epic!!!

  • http://Tinyurl.com/nathanielalbrecht Nathaniel Albrecht

    Really awesome Adi!!! You are really helpful! By no doubt my FAV author here on Webdesign tuts or any web design blog for that matter!!!

    You are so much more clever than I, I was like ohh… Can do that for this what’s he gonna do…. But you always had a great souloution!!!

    Thanks!!!!!!

  • http://twenstudio MAHDI

    Hahah!, He was trying to say check the words you’re typing before you hit enter that’s because you called Adi “Gay” :=)

    • http://www.adipurdila.com AdiPurdila
      Author

      Haha, GAY, GUY, I understood what he meant, but it would be great to double check the comment before posting :D

      And thanks for all your comments, glad you liked it :)

      • http://hanafitile.com MAHDI

        Ouch! He’s really one of your biggest fans Adi :=)

        • http://www.adipurdila.com AdiPurdila
          Author

          Oh I’m not bashing at him, don’t misunderstand me. I understand when people don’t speak English very well and it’s fine, it doesn’t bother me. I appreciate all the support he and everyone else is giving me :)

          I’m just saying double checking comments is a good practice :)

          • http://hanafitile.com MAHDI

            You don’t have to explain this buddy i know what do you mean and glad you’re here with us :=)

  • http://www.cyberillusions.net Nick Satoria

    Yeah! Let’s stitch it, boys and girls… ;-)

  • http://www.pixelglow.ro Silviu Stefu

    Great tips man. Thank you. I think this is the easiest way to do dashed lines.

  • http://davidleuliette.com WebDesignInc.

    Amazing tips !
    I wonder why I’ve never thought… no brain xD!

  • http://dave-mate.com Muhammad Asif

    Hi, Nice Effect could you tell me how did you make background of your navigation it’s also looking good.

    • http://www.adipurdila.com AdiPurdila
      Author

      You can grab the texture from here: http://subtlepatterns.com/?p=907

      Great site, lots of beautiful textures in there.

      • http://dave-mate.com Muhammad Asif

        Thanks Really Appreciated for the site!

  • trkiwp

    Nice tut i like it a lot :)

  • http://ahmedly.com Ahmed bouhuolia

    Great tutorial and very nice design Thank you

  • zupulido

    Hi, I appreciate your work because I learn something new everytime. Thank you

  • http://drummerboyhosting.com Atlante Avila

    Wonderful tip! I’ve been doing it like this, but with the shadows you applied it looks much better!

  • http://www.lublin-fotografia-slubna.pl Fotograf Lublin

    Great tutorial – amazing how simply & smart this is. I was using the brush tool before for stitching effect. The text tool makes this so much easier!! Once again big thank you Adi.

  • http://rockingthepjs.com/ Trisha Cupra

    I’ve never tried stitching because it looked way too hard. This was truly a “Duh, why didn’t I think of that?!” revelation. Awesome! :)

  • http://godsofart.com S3bY

    Lately, I love all layouts with a retro feeling! So congrats on really nice looking result!

  • http://www.StevenVu.com Steven

    Never thought of this. Thank you!

  • Terry

    I’ve been looking for a simple way to do this – thanks for sharing :)

  • dizeyner

    magnificent! thanks for sharing this!

  • http://markroe.me RoEy

    Super tip! Going to put this into practice now.

  • http://www.raddy.co.uk Raddy

    Really good tip! Thanks!

  • jarod

    wow man this was really helpful. I’ve been trying to figure out how to do the stitch technique for months, and couldn’t only find this done in illustrator. Thanks for the tip.

  • http://ahmadyunus.info Ahmad Yunus

    I always do this before it was cool..

  • http://www.webmentor.cr/ Marco Berrocal

    This tutorial reminded me of “only the dumbest mouse would hide in a cat’s house but only the smartest cat would look in there”….

    TEXT!!!! So simple!!!!

  • Pingback: Best of Tuts+ in March 2012 - Milk-Break

  • Pingback: Best of Tuts+ in March 2012 | CS5 Design

  • Pingback: Best of Tuts+ in March 2012 | DigitalMofo

  • Pingback: Best of Tuts+ in March 2012 | Clixto7

  • http://www.webtemplates-creare.com/ Paul Weston

    Thought this was a great little tutorial. I see this type of graphic in a lot of sites I look at and have been wanting to create something like this for a while. I thought the tutorial had great detail, very easy to follow and quick to produce. The final effect looks great and this will be a great resource for me and something I can use and experiment with in my design work. Great tutorial and I look forward to more from yourself.

  • http://digiartes.net Juan

    So simple, its genius.

  • Pingback: Best of Tuts+ in March 2012 | linuxin.ro

  • Pingback: Best of Tuts+ in March 2012 – blog

  • Pingback: Best of Tuts+ in March 2012 | Shadowtek Hosting and Design Solutions

  • http://www.jassibacha.com/ Jassi

    Great tutorial, this is a much more time-efficient way to produce these effects & I’ll definitely be using it in the future. Thanks! :)

  • Pingback: Best of Tuts+ in March 2012 | GMancer

  • Pingback: | Graphfucker

  • http://twetw.com aisin

    beautiful tips, thx

  • Pingback: Best of Tuts+ in March 2012 | PHP Developer Resource

  • http://cajunpygmy.com Cajun Pygmy

    After watching how easy this is and how logical, it almost makes me feel dumb for not figuring this out on my own. Awesome job, appreciate the lesson.

  • https://twitter.com/#!/chetena Chetena

    Thank You!
    I have been looking for a tutorial like this for ages :)

  • Pingback: Adobe Photoshop CS6: Improvements for Web and UI Designers | Webdesigntuts+

  • Pingback: Adobe Photoshop CS6: Improvements for Web and UI Designers |

  • Pingback: My Stream | Adobe Photoshop CS6: Improvements for Web and UI Designers | My Stream

  • Pingback: Adobe Photoshop CS6: Improvements for Web and UI Designers | How to Web

  • Pingback: | Graphfucker

  • http://www.menacedesign.pl Artbeard

    No brush on path, just type on path. Clever! ;)

  • captain cor

    Good tut :) on a slightly unrelated note – could anyone point me in the direction of a tutorial or simply tell me how to create the textures for the objects? The green and orange object seem to have a “felt” type of fabric texture, which I would love to be able to reproduce, but cannot find a tutorial anywhere (or be able to replicate nicely). And the dark grey stripe has a great looking texture as well.

    Any help would be hugely appreciated!

    • http://www.snaptin.com Ian Yates

      Hey there – Brandon ran a short series on background patterns a while back, you might want to check that out. Otherwise, this is exactly the sort of thing Adi is good at teaching. I’ll put it on the todo list :)

      • captain cor

        Superb response! Thank you so much for that link, I look forward to going through that series!

  • http://www.benjaminedwardswebdesign.co.uk Web Design Warwick

    Now this is a lovely tut!

    I do love stitching but you can do this in CSS3 now, I have seen a few tuts!

    Cheers!

  • http://www.ishadeed.com Ahmad Shadeed

    Thank you!
    Like the idea of using dashs :)

  • Abdelhamid

    it is a good job man ! thank you very much.

  • Pingback: Best of Tuts+ in March 2012 | Envato Notes