Web Courses Academy Blog

How to place your image on a Digital Screen

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
ui-design-responsive-2020
Quick jump to topics
Sharing is caring

Say you are working on a project, adding images to an article, or putting an online web or graphic design portfolio together, and you want to put your images onto a virtual screen; a desktop, a laptop, a smartphone, or a tablet. How can you do this without having to take a picture of your work on an ipad with an iphone? You don’t want to lose the resolution of your hard work by taking a picture of a picture. Luckily, there are several simple solutions for you to achieve the desired effects on a virtual screen

wcb-placeit

Say you are working on a project, adding images to an article, or putting an online web or graphic design portfolio together, and you want to put your images onto a virtual screen; a desktop computer, a laptop, a smartphone, or a tablet. How can you do this without having to take a picture of your work on an ipad with an iphone? You don’t want to lose the resolution of your hard work by taking a picture of a picture. Luckily, there are several simple solutions for you to achieve the desired effects on a virtual screen

Virtual Screen Option One: Placeit

The easiest method is to use an online service called Placeit. Placeit handily provides a range of devices in various settings. See your image on a tablet with a park’s green grass as the background. Or, view the website that you just built on a smartphone in a cafe. Placeit also offers standard, straight ahead options for laptops, desktop computers, tablets, and smart phones.

 

Step 1

Go to placeit.net and choose the device and background.

placeit

Step 2

Enter the url of the image you would like to use, or upload an image or screenshot from your computer. As you can see, Placeit will adjust the angle of your image to math the screen.

wcb-screen

Step 3

That’s it, download the image to your computer and use it however you would like. Unfortunately, it’s not free to save a high-resolution version of your image. To download any size larger than 640px by 280px, Placeit charges a fee. 640px by 280px might be just fine for some web applications, but not ideal if you need the final image to be large and remain clear.

[text-blocks id=”59315″]

Virtual Screen Option Two: Photoshop

This option requires a little more work and some very basic Photoshop skills, but it allows for much more creative flexibility on your part.  Also, there are no limitations in size.

Step 1

Do a Google image search for the device you are looking for. For example here I searched for an iphone. Search for a png image file, i.e. type “iphone png” in the search window. Using a png will save you some time in Photoshop as a png will allow you to maintain a transparent background, and an empty screen. 

Google offers some useful tools to filter through the thousands of images that come up in any given search. Often, you want to start with the largest image you can find so that you can scale it to the desired size without losing resolution. On the right side of Google’s menu bar, you will see “search tools”. Click here and more options such as “size”, “color”, and “type” will appear. We want to specify the size of the search results, so click on “size”, and select “large”. This should make it much easier to find what we’re looking for, which in this case is an image like this:

google-iphone

Click “view image” to view the image in it’s true size, then right click, and select “Save Image As”. The image can be saved to your desktop or anywhere else on your computer, just remember where it is.

Step 2

Open Photoshop, and create a new document. Choose the “web” preset and 1024px by 768 px.

virtual screen

Step 3

Open the iphone image, and scale it down slightly so that is fits comfortably on the canvas. Remember to hold down the shift key as you’re re-sizing to keep the image in proportion. It’s also good practice to name your layers. I’ll name this layer “iphone”.

virtual screen

Step 4

Open the image that you would like to place on the device. Make sure to use an image large enough so that you won’t have to increase the size to fill the screen. Increasing the size would cause loss of resolution.

virtual screen

Step 5

Name the new image layer, i.e. “temple”, and click (to the right of the layer name) and drag the layer so that is is below the “iphone” layer. With the “temple” layer still selected, move and/or resize your image so that the desired portion shows on the iphone’s screen.

virtual screen

Step 6

With the “temple” layer still selected, and using the eraser tool, carefully work your way around the image, getting rid of the portion overhanging the outside of the iphone. You can adjust the size of the eraser using the drop down in the upper left hand corner of the screen. Alternatively, you can use the shortcut and adjust the size using the [ ] keys.

virtual screen

virtual screen

Step 7

Before saving, adjust the image size either with the menu drop-down, or with the short-cut, “alt/option>command>i” for a Mac; or “control>command>i” for a PC. For something like a portfolio, you may just want to crop the image and save it. Remember to save as a png if you want to maintain the transparent background, on a white background a jpg will be fine.

virtual screen

However, depending on the project, you might want to place the iphone on a different background. Just keep the size in mind when selecting a background image, and remember to order your layers so that everything is below the “iphone” layer.

virtual screen    

Want to learn More?

Want to learn more than just the basics? Adobe Illustrator: A Complete Course and Compendium of Features is your guide to building vector graphics, whether you’re creating logos, icons, drawings, typography.

Take a look at our course in logo and graphic design, and our one-on-one courses in Illustrator  or Photoshop.  If you have a project and need to sit with our expert instructor, take our “Build it with us course” and have your project done with a professional. Also, check back often with Web Courses Bangkok to find out about the latest workshops and classes.

 

[text-blocks id=”course-ad-online-marketing-articles”]

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities
Promise to only send you useful interesting newsletters once a month.