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.
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 smartphones.
Step 1
Go to placeit.net and choose the device and background.
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 match the 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:
Click “view image” to view the image in its 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.
Step 3
Open the iPhone image, and scale it down slightly so that it 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”.
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 a loss of resolution.
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 it 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.
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.
Step 7
Before saving, adjust the image size either with the menu drop-down or with the shortcut, “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 it as a PNG if you want to maintain the transparent background, on a white background a jpg will be fine.
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.
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, or 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”]
