Getting the Perfect Screenshot for Placeit

For those of you who are living in a cave and building websites using stones, Placeit is a new service that allows you to super-easily create real-life prototype images with just a screenshot, for free! SWEET!

Of course, the easiest way to use Placeit is to "Grab Screenshot from URL" button, but what if you don't have the website uploaded to a server yet, or you just want it more customized? Then you have to use your own image.

The difficult part is getting the screenshots to the perfect dimensions. For this task, I turned to Xcode's iOS Simulator.

The iOS simulator is fairly easy, though you can't completely get rid of the browser chrome. Also, as I'm sure you already expected, it only works for the iDevices in Placeit. You can get Xcode free off the Mac App Store.

It's really quite simple:
  1. You'll have to start with Xcode in your dock. With Xcode running simply control-click on the icon. A little ballon with pop up. Move your cursor over Open Developer Tool, the click on iOS Simulator. An iPhone should appear on your screen!
  2. Chose your device from the hardware menu. This should be the save device that you are going to frame it with.
  3. Launch Mobile Safari, and navigate to your page. When you have everything to you liking, in the top bar go to File > Take Screenshot. It will save to your desktop.
  4. Tada! Drag-n-drop it into the frame of you're choosing, and you're done!
Enjoy showing off your project!

No comments:

Post a Comment

I'm Caleb Grove

Yep, that's me. I'm a 17 year old web unicorn and own OnRamp Web Design. My skill base is quite broad, though my real focus lies in UX and UI design for the web. When it comes to designs, I'm a perfectionist, scooting 1 pixel at a time.

My main blog captures all my web-related thoughts that exceed 140 characters. Anson S is my personal blog, where I pander in politics and religion. You can tweet me on Twitter at @SirCalebGrove, circle me on , or friend me on Facebook.

About this site

This is my playground. CalebGrove.com harnesses the power of HTML5 and CSS3. It was built using my web design weapon of choice, Freeway Pro, using a inline flexible system. Responsiveness was hand-coded. The blogs are hosted by Blogger, whose template code was generated by the Blogger actions. Website hosted by GJX Hosting. Creativity provided a disturbed mind, and not much else.

No unicorns where harmed in the making of this website, except through caffeine overdose.