Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Jeremy Frimond
Jeremy Frimond
14,470 Points
Posted by Jeremy Frimond
Jeremy Frimond
14,470 Points

Suggestions On How to Make Iphone or Computer bordered Image

I need to make images for websites that look like the website. The following [link is a good example]: (http://ednainteractive.net/portfolio/whale-watch-south-africa/)

Is there a template generating site or code snippet for this? if not any recommendations?

Preferably after both desktop and iphone

cheers

2 Answers

Nathan F.
Nathan F.
30,773 Points
Nathan F.
Nathan F.
30,773 Points

Christopher's CSS suggestion is a good one. If you want to stick to plain ol' images, there's a lovely photo generator at PlaceIt. It's pretty simple, but takes a few steps. You'll either need to generate a screencap/image of your own that you want to use (if you're bringing a design from Photoshop for example), or you can grab a preview from a url using Placeit's tools. It'll then generate a nice stock photo with your app/site displayed on a screen.

You'll need to pay attention to the licensing on the photos, though, as it looks like Placeit has moved to a commercial model. They offer a few freebies, but others you need to purchase.

Christopher Hall
Christopher Hall
9,052 Points
Christopher Hall
Christopher Hall
9,052 Points

If you're going to have multiple screenshots like that on the page that you want to share the same border, you can give the wrapper class around the image a margin and background image to show something like a computer screen. This way the background image only has to load once, and won't be included with each screenshot.

<a href="#" class="computer-screen"><img src="screenshot01.jpg" width="600" height="400"></a>

.computer-screen {
  background: url('/path/to/your/background/image.jpg') no-repeat scroll 0 0 #FFFFFF;
  display: block;
  margin: 20px 20px 40px 20px;
  width:640px;
  height:460px;
}