Safari Templates for Designers: iPhone Safari, Vector Safari and Photoshop Safari Template

Safari I do a lot of design work, you know, ’cause I’m a designer and all. I often need to display web pages within the context of a browser, and I typically use Safari to display those pages. Why? Because Safari is very minimalist, and allows my designs to show through, not a bunch of Fox-flavored bright blue windows or whatever.

Therefore, I’ve created templates to quicken my workflow, and I thought I’d share those templates with everyone. The following three Photoshop files are free for the downloading, here’s some more info:

  • Safari Photoshop Template. A simple PSD template that includes different layers for just about all of the elements in a Safari browser.
  • iPhone / iPod Touch Safari Browser Template. This PSD focuses on the mobile version of Safari, for those of you who might need to display your iPhone specific site designs. Includes default font sizes for this browser as well.
  • Safari Vector Template. This is also a Photoshop file, but everything in the file is built using shapes and styles, so it’s completely scalable and vector based, for all of your large format display needs.
  • Update! The folks over at Say Yeah! have built an Adobe Illustrator template for Safari 4, for those of you who prefer to do your designing with a more vector approach.

The Peanut Gallery

  1. Nathan,
    Try Google Chrome ASAP.
    Steve M

    Steven Martin:

  2. Hey Steve!

    I actually use Firefox and am quite happy with it, mostly because the plugin architecture allows me to integrate Remember the Milk into Gmail, Calendar, Reader, etc., a service I use everyday, more than email even.

    And I don’t think Chrome is available for Macs yet… though once it is I’ll definitely give it a whirl!

    I recommend Safari for screenshots because, though it isn’t the best browser, it’s the most minimalistic in my opinion, leaving the design to stand out, not the GUI.

    nathan:

  3. So You are a saafri fan or you like it for your convinience?

    http://www.safaribrowserwindows.com

    Anamilia:

  4. I used to use Safari, Anamilia, though I’m using Firefox these days.

    I’ve modded my FF installation, however, to look as similar to Safari as possible, though, as I do think the default Mac browser is the sleekest.

    I prefer a browser that works and doesn’t do anything to detract from the website I’m viewing.

    nathan:

  5. Hey Nathan.

    Respect for making these templates available. We do all our web design in Illustrator and have made an AI of Safari 4 available here, if that’s helpful to you (just scroll down).

    http://yousayyeah.com/post/781530208/yes-we-use-illustrator-when-designing-websites

    Lee Dale:

  6. You seem to be the only one on the Internet with a decent Safari GUI template. Thanks you!!

    Charlie:

  7. Thanks for the templates !!!!

    Thy:

  8. Hi )

    Vector template is not-so-vector, and the second one (@ yousayyeah) can’t be downloaded.

    Shu:

  9. What’s not vector about it? It’s a Photoshop file but all contents are indeed shapes, as opposed to raster images. Seeing something else?

    nathan:

  10. I just prefer Illustrator :)

    Shu:

  11. Right on Stu. Illustrator has it’s place in the hearts and minds of the crazy. :)

    I’ll check with Say Yeah to see if they have an updated link.

    nathan:

  12. Great :)
    Tnx )

    Shu:

  13. Yeah, sorry about that. We moved our corporate site to Tumblr and it exploded all of our links.

    We did update the blog article so the link there is correct, but here’s a direct link:
    http://media.yousayyeah.com/files/safari_v4.zip

    Have fun!

    Lee Dale:

  14. wow :)

    Great!
    Comes handy )

    Shu:

  15. Thanks – these are just what I needed.

    Ben:

Have a go!

Next at bat? Well that'd be you! Swing away...

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>