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)

150 Comments »

  1. lalpri says:

    This is a wonderful opinion.no deposit casino bonus

  2. [...] 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 [...]

  3. [...] 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! [...]

  4. kingobee says:

    thanks. very good! will use asap!

  5. Vegas says:

    Perfect. Just what I needed!

  6. netpats web says:

    Great selection of open source images of web browsers.

  7. [...] 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 [...]

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

  9. Basic says:

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

  10. Dave says:

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

  11. Martyn says:

    Very helpful thank you.

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

  13. carlos says:

    thanks!

  14. [...] 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, [...]

  15. [...] 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! [...]

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

  17. [...] 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! [...]

  18. [...] 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! [...]

  19. [...] 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! [...]

  20. [...] 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! [...]

  21. [...] 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! [...]

  22. [...] 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! [...]

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

    Peace and Love

  24. Mark Tippin says:

    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.

  25. [...] 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! [...]

  26. [...] 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! [...]

  27. [...] 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! [...]

  28. Thank you very much for this resource!

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