Dave Woods - Freelance Web Design Warwickshire

Blank browser windows for Photoshop mockups

When creating mockups for websites, it’s useful to use a blank browser window within Photoshop so that you get a good feel for how the design will look when it’s actually rendered as a web page.

To make this process slightly easier, I’ve put together a collection of blank browser windows for Firefox, Internet Explorer, Google Chrome, Opera and Safari at 800×600 and 1024×768 which are now available to download.

Within the above zip file, you’ll find two PSDs, 1024×768.psd and 800×600.psd. These are fairly self explanatory and then within each document are five layers, one for each of the browser windows at that resolution. Simply hide or delete the layers that you don’t want to use and you’re ready to go.

5 comments on “Blank browser windows for Photoshop mockups

  1. Dave Woods Post author

    Yeah I’ve seen people that work like that but for quite graphic heavy designs or for complex user interfaces then I still find it best to mock them up in Photoshop first 🙂

    (I’m also looking at putting together a collection of browser elements, input fields, checkboxes, radio buttons etc in Photoshop format so it’s easier to create mockups)

  2. Johny Favourite

    I’ve got to admin I used to do everything in Photoshop first and I agree it has it’s benefits. Then certain people mentioned about designing in the browser and I could never imagine it.

    However my Blog has been designed in this way. Well paper first for general element placement/wireframing and then in to the browser. I then know that the layout looks fine with just text.

    I guess it all boils down to the customer in the end. I like mininal style as you can see from my dj site. That isn’t always going to be the best way to go for all clients.

  3. Dave Woods Post author

    I agree, for simple or minimilistic designs then I’d probably jump into a browser after working on paper but for complex designs then I’d want to work in Photoshop first.

    For really complex web apps though, I might jump in a browser first just to create a wireframe so that the client can see how the forms click through from one to the next and once they’re happy with that use Photoshop to create the design elements which once approved can easily be applied to the wireframe.