Design a Retro Layout in Photoshop: Wrapping Up
videos

Design a Retro Layout in Photoshop: Wrapping Up

on Sep 20th 2012 with 19 comments
Tutorial Details
  • Topic: Photoshop
  • Difficulty: Beginner
  • Screencast duration: 48 mins

Final Product What You'll Be Creating

Download Source Files
This entry is part 2 of 2 in the series Retro Layout in Photoshop

Retro Layout in Photoshop

Let’s finish off our retro Photoshop layout. We’ll continue by looking at the About Us section, then work our way down the page.

About Us


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

Contact Us and Footer


Alternatively, Download the video or subscribe to Webdesigntuts+ screencasts via YouTube!
Series Navigation<< Design a Retro Layout in Photoshop: Starting Out

 
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.

Neil Pearce is a freelance web & UI designer who has over five years experience. Even though Neil started his career has a front-end developer, Neil's passion is design. You can check out more of Neil's work at www.neilrpearce.co.uk  

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

    Two identical video

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

      D’oh! Sorry, I’d embedded the first one as a play list (or something stupid like that). Corrected now :)

  • http://www.danhumphrey.co.uk Dan

    Excellent tutorial! Will you be coding this as well?

  • http://www.cuppawebandgraphics.com Freelance Web Design Kent

    Loving these posts, great content. The about us icons look great :-)

    • http://www.neilrpearce.co.uk Neil Pearce
      Author

      Many thanks! I am glad you like it and hope it’s been useful? ;o)

  • Scott

    Hey this is great.

    Are you going to hit us with a coding tutorial as well on this?

    • http://www.neilrpearce.co.uk Neil Pearce
      Author

      Not at the moment Scott, but it’s something I will consider at a later date!

      Thanks!

  • Danil

    Thank you for the good tutorial!

  • samir

    thank you very mutch
    very cool design
    i hope that we’ll see you very soon in other tutorial and more often
    thank you very mutch

  • Opendept

    Well, your design is very similar to our template on Themeforest: http://themeforest.net/item/retro-portfolio-one-page-vintage-wordpress-theme/1708109 (circle badge, overall typography, about us page, visual hierarchy of the elements, et cetera). I guess you could at least mention us.

    • http://www.neilrpearce.co.uk Neil Pearce
      Author

      Well, I can honestly say I never knew about your design being on Themeforest, I get me inspiration from many places for different page elements and one place I use is dribbble and for the banner I used this http://dribbble.com/shots/450612-A-Wordpress-Retro-Theme?list=53414-Wordpress-Retro-Portfolio

      I had no idea that was your account and a theme design on themeforest. As for my tutorial, I have used similar layout and design elements on other designs of mine: http://www.neilrpearce.co.uk/2012/04/21/creative-studio-design/ so it was completely pot luck this turned out similar (as for the banner and layout) as yours, so I apologize for that. But…..every design element was created by me, you can clearly see that!

      • Opendept

        Well, it doesn’t matter. That means we made a good job! Cheers!

  • http://be.net/willsales Will Sales

    Hey Neil, thank for the great tutorial. its extremely useful for me. Keep goin’ man!

    • http://be.net/willsales Will Sales

      Id like to see the icons too (below the “about us”). Where is this section of the tuto?

  • Rich

    Just to second what Will has already said, what about the rest of the about section?

  • heljoshin

    THNX!!! Did it in 2 days)) Liked the way You do stitches)) Please keep on posting tuts))

  • toby

    the entire about section wasnt finished! text on a path those circles!

  • Dan

    1. This is a GREAT tutorial, thanks for going through everything in great detail, although most of the design is widely understood how to do, it’s god to see some of the finer points that you cover. well done.

    2. I am a bit worried about the design being ripped off of the wordpress theme. I saw that theme a while ago, and I thought this was a tutorial about how to create it. you can’t deny that the design is almost a perfect match. Especially the welcome banner. This is almost undeniably too similar. Any copyright lawyer would inform you that it’s too close to be called your own. If it’s a design based on the wordpress theme, you should give him the credit he deserves.

    3. The part with the circles should have made it in, even if you produced one and then copied it for time reasons.

    4. The main reason i came to the tutorial was to see how you turn this design into a working website, which would make this tutorial much more valuable. Maybe you can make this, or give it to someone who knows how so they can produce that tutorial? I’m not sure, but it’s a great looking design.

    5. Good work! Thanks for this. It is inspiring.

  • mcneela86

    Excellent tutorial! Just finished this and really learned a lot from it. gona have a go at coding it up now :-)

  • Pingback: Web Tasarımcılar İçin 40+ Görsel Öğe

  • Pingback: Web Tasarımcılar İçin 40+ Görsel Öğe « Fatihizm ve Blogizm