Photoshop Tutorials

Design a Screenshop for a Web Browser

Design a Screen­shot of a Website directly in Pho­to­shop. Follow this FREE Photoshop Tutorial to Design Your Own Fic­tion­al­ized Browser.

062.jpg

Need a screen­shot of a website/web browser, but you don’t want to use Inter­net Explorer, Opera, Fire­fox, or Safari? No prob­lem, just make your own directly through this Pho­to­shop Tuto­r­ial.¬† You see it all the time on TV and in movies: fake oper­at­ing sys­tems run­ning fake browsers.  It is actu­ally extra­or­di­nar­ily sim­ple to do. Here, let me illus­trate those tech­niques for you, and you will be well on your way to your own fic­tion­al­ized browser for use in your TVs and movies …  well, more like your web­sites and ads.

To start off, let’s make a new doc­u­ment at 1024x768 px:
023.jpg

Next, let’s use the Rounded Rec­tan­gle tool to cre­ate our browser’s main win­dow. We will use a grey color over­lay, as well as 1 px black stroke and an inner glow set to white:
033.jpg

Next, let’s select the Cus­tom Shape tool, and then load all the cus­tom shapes.  We will be using the web but­tons such as these:
043.jpg

Now we just need to cre­ate those shapes using the cus­tom shape tool.   For the Earth sym­bol I used a green color over­lay, 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 sim­u­lates the address bar, and the bot­tom the web browser main area.   Once those were cre­ated, it was time to put a URL in the address box, as well as a title for the win­dow:
052.jpg

Finally, I took a screen­shot of a web­site by hit­ting Print Screen, and then I pasted it into our doc­u­ment.   The last step is sim­ply to cut down the size of the screen­shot to fit within our new web browser. Sim­ply as that.  Here is the final result:
062.jpg


No related posts.

, ,

Leave a Reply