Photoshop Browser Templates

UPDATED: A couple people asked for Windows versions of the templates, so I’ve added Firefox (Windows) and IE7 templates as well.

Download v2 (3.5 MB)

As a web designer, at one time or another, you are going to need these. Either when presenting your work to a client, or working on a high resolution monitor; adding a browser frame around your design will help you (another others) get an idea of what the site will really look like.

Yes I know, anyone with basic photoshop skills can make these, but I found myself remaking these templates for every project I worked on. So what I’ve done is created a .PSD file with three different browser resolutions; all with easily editable titles, address bars, scrollbars, and favicons. Just open the PSD and place the layers on top of the design you are working on, and voila!

There are many of these browser templates out there, but most of them are designed using IE5 or IE6 templates, I figured your browser frame should be as beautiful as your design so I’ve based this template on Firefox 3 (OS X).

If you have any feedback or requests, just let me know via Twitter or feedback[at]piksels.com.

Download v2 (3.5 MB)

Published on November 29, 2008 7:41 pm.
Filed under: General, Visual, internet Tags:

150 Comments »

« Older Comments
  1. 50+ Free High Quality PSD To Download | Themeflash says:
    June 16, 2009 at 10:48 am

    [...] Browser Template [...]

  2. lalpri says:
    July 3, 2009 at 11:25 am

    This is a wonderful opinion.no deposit casino bonus

  3. Скачать PSD исходники и веб элементы #1 | Vanilladesign.ru says:
    July 6, 2009 at 2:39 pm

    [...] Browser Template [...]

  4. DesignersWork // design resources says:
    July 15, 2009 at 4:56 pm

    [...] Designer kannt das nicht? Der Kunde möchte sein Werk als Browservorschau sehen, dann sind diese nützlichen Templates von Joel Laumans für Firefox (Mac), Firefox (Win), Internet Explorer Gold wert. « Online [...]

  5. Free and Useful Downloads for Web Designers - TemplateTuts says:
    August 1, 2009 at 6:51 am

    [...] Photoshop Browser Templates – PSD Seeing how your design will look in a browser is a priceless thing. This PSD will allow you to see how your design will look in a browser without leaving Photoshop! Definitely a time saver! [...]

  6. Templates de Navegadores en .PSD | Area Photoshop says:
    September 6, 2009 at 12:14 am

    [...] Info – Descargar [...]

  7. kingobee says:
    September 14, 2009 at 2:32 am

    thanks. very good! will use asap!

  8. Vegas says:
    September 25, 2009 at 5:51 pm

    Perfect. Just what I needed!

  9. netpats web says:
    October 13, 2009 at 3:07 am

    Great selection of open source images of web browsers.

  10. CoffeeIT.Net » Blog Archive » Design Resource | 30+ Free Quality PSD Files to Download says:
    October 28, 2009 at 8:39 am

    [...] Design Resource | 30+ Free Quality PSD Files to Download Author: Gia Khang | Filed under: Blogmaster, Template Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.1) Browser Template [...]

  11. Photoshop Browser Templates - Techno Trousers says:
    November 2, 2009 at 2:18 am

    [...] Click here for more information. [...]

  12. Basic says:
    November 14, 2009 at 7:40 pm

    There is a lot of spamming in the comments. You should disable comments.
    Anayway thanks for the file. It is really helpful

  13. 30+ Free Quality PSD Files to Download, Photoshop Download | ibuylogos.com says:
    November 15, 2009 at 11:10 am

    [...] 1) Browser Template [...]

  14. A Collection of Useful Web Design Wireframing Resources : Speckyboy Design Magazine says:
    November 23, 2009 at 5:03 pm

    [...] Photoshop Browser Templates from joel laumans [...]

  15. Online Business Management Software and Services » Blog Archive » A Collection of Useful Web Design Wireframing Resources says:
    November 23, 2009 at 8:58 pm

    [...] Photoshop Browser Templates from joel laumans [...]

  16. 30???PSD??????? « Visual Impact says:
    December 5, 2009 at 4:22 pm

    [...] 1)????? [...]

  17. 30???PSD??????? | Visual Impact says:
    December 6, 2009 at 10:51 am

    [...] 1)????? [...]

  18. Dave says:
    December 17, 2009 at 4:32 am

    Wow, very nicely done. Thank you for these templates!

  19. Martyn says:
    December 20, 2009 at 12:28 am

    Very helpful thank you.

  20. Beautiful and High-quality Free Icon Sets « dzinedos says:
    January 4, 2010 at 10:15 am

    [...] 1) Browser Template [...]

  21. Design Resource | 30+ Free Quality PSD Files to Download | Free Downloads Box says:
    January 7, 2010 at 10:23 pm

    [...] 1) Browser Template [...]

  22. ?????????Web?????????Photoshop?? « SOCIUS MIRAiZ????????????????????? says:
    January 20, 2010 at 3:04 am

    [...] ????????Photoshop???Photoshop Browser Templates??? [...]

  23. carlos says:
    January 20, 2010 at 2:08 pm

    thanks!

  24. eagrapho » 35 Exclusive And High Quality PSD Photoshop Resource Sites says:
    January 22, 2010 at 2:26 pm

    [...] 35. Piksels [...]

  25. eagrapho » 35 Exclusive And High Quality PSD Photoshop Resource Sites says:
    January 22, 2010 at 2:26 pm

    [...] 35. Piksels [...]

  26. 35 Exclusive And High Quality PSD Photoshop Resource Sites | Afif Fattouh - Web Specialist says:
    January 23, 2010 at 8:58 am

    [...] 35. Piksels [...]

  27. 35 Exclusive And High Quality PSD Photoshop Resource Sites - PT Web says:
    January 23, 2010 at 9:11 pm

    [...] 35. Piksels [...]

  28. dani says:
    January 28, 2010 at 10:27 pm

    Great man!

  29. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files - Smashing Magazine says:
    February 5, 2010 at 4:07 pm

    [...] for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, [...]

  30. 35 High Quality PSD Photoshop Resource Sites « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates says:
    February 5, 2010 at 9:04 pm

    [...] 35. Piksels [...]

  31. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files « PacmanRetro says:
    February 5, 2010 at 10:29 pm

    [...] Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  32. links for 2010-02-05 « PacmanRetro says:
    February 6, 2010 at 4:08 am

    [...] joel laumans Photoshop Browser Templates adaptive interfaces (tags: ping.fm) [...]

  33. ???? ???????? ?????? ????? | Dizzy Blog says:
    February 6, 2010 at 8:47 am

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  34. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files « Top 10 Web Hosting says:
    February 7, 2010 at 12:36 am

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  35. 35 High Quality PSD Photoshop Resource Sites | Just Design Expression and Full of Freebies says:
    February 8, 2010 at 10:35 am

    [...] 35.Piksels [...]

  36. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files » PTW New says:
    February 8, 2010 at 11:09 am

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  37. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files | In Nicobru mind says:
    February 8, 2010 at 12:26 pm

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  38. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files :: Reflex Stock Photo Blog says:
    February 8, 2010 at 2:40 pm

    [...] Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  39. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files | Web Design Cool says:
    February 9, 2010 at 4:22 am

    [...] Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  40. Danijel Gajan says:
    February 10, 2010 at 1:07 pm

    Thank you for these. They will be put to good use.

    Peace and Love

  41. Mark Tippin says:
    February 10, 2010 at 7:57 pm

    Very useful. I was just about to make a set of these and thought I’d see if the mighty cloud had anything to offer. Thank you for taking the time to make these, and for your generous contribution to us all.

  42. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files « Social-Press says:
    February 10, 2010 at 8:56 pm

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  43. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files | Variedades e Bookmarks says:
    February 12, 2010 at 4:12 am

    [...] Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  44. 50 Free UI and Web Design Wireframing Kits, Resources and Source Files | Elitecreations says:
    February 13, 2010 at 7:26 pm

    [...] Photoshop Browser Templates This layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila! [...]

  45. chris raymond says:
    February 15, 2010 at 6:50 pm

    Thank you very much for this resource!

  46. Wordpress, Webdesign and Design Resource says:
    February 17, 2010 at 7:14 am

    [...] 35.Piksels [...]

  47. 30 Free Quality PSD Files to Download | KSSP says:
    February 20, 2010 at 5:30 pm

    [...] 1) Browser Template [...]

  48. High Quality PSD Photoshop Resource Sites | SEO Tips and Website Designers says:
    March 2, 2010 at 6:26 am

    [...] 35.Piksels [...]

  49. Design Resource | 30+ Free Quality PSD Files to Download | Design Trip Blog says:
    March 8, 2010 at 7:39 am

    [...] 1) Browser Template [...]

  50. 25 Fantásticos archivos en PSD Gratis! | Otro blog de fotografía says:
    March 14, 2010 at 9:33 pm

    [...] Browser Template [...]

« Older Comments

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

UPDATED: A couple people asked for Windows versions of the templates, so I’ve added Firefox (Windows) and IE7 templates as well.

Download v2 (3.5 MB)

As a web designer, at one time or another, you are going to need these. Either when presenting your work to a client, or working on a high resolution monitor; adding a browser frame around your design will help you (another others) get an idea of what the site will really look like.

Yes I know, anyone with basic photoshop skills can make these, but I found myself remaking these templates for every project I worked on. So what I’ve done is created a .PSD file with three different browser resolutions; all with easily editable titles, address bars, scrollbars, and favicons. Just open the PSD and place the layers on top of the design you are working on, and voila!

There are many of these browser templates out there, but most of them are designed using IE5 or IE6 templates, I figured your browser frame should be as beautiful as your design so I’ve based this template on Firefox 3 (OS X).

If you have any feedback or requests, just let me know via Twitter or feedback[at]piksels.com.

Download v2 (3.5 MB)

Photoshop Browser Templates

Published on November 29, 2008 7:41 pm.
Filed under: General, Visual, internet Tags: