Software GUI Design: Browser

Need a screenshot of a website/web browser, but you don’t want to use Internet Explorer, Opera, Firefix, or Safari? No problem, just make your own directly in Photoshop. You see it all the time on TV and in movies: fake operating systems running fake browsers. It’s actually extraordinarily simple to do. Here, let me illustrate those techniques for you, and ou’ll be well on your way to your own fictionalized browser for use in your TVs and movies… well, more like your websites and ads.
To start off, let’s make a new document at 1024×768 px:

Next, let’s use the Rounded Rectangle tool to create our browser’s main window. We’ll use a grey color overlay, as well as 1 px black stroke and an inner glow set to white:

Next, let’s select the Custom Shape tool, and then load all the custom shapes. We’ll be using the web buttons such as these:

Now we just need to create those shapes using the custom shape tool. For the Earth symbol I used a green color overlay, for the arrows I used a blue, for the stop shape I used red, and for the home I used white. I then made two boxes, both with a 1px black stroke. The top box simulates the address bar, and the bottom the web browser main area. Once those were created, it was time to put a URL in the address box, as well as a title for the window:

Finally, I took a screenshot of a website by hitting Print Screen, and then I pasted it into our document. The last step is simply to cut down the size of the screenshot to fit within our new web browser. Simply as that. Here’s the final result:
