Here’s a quick tutorial on how to add your design to my product mock-ups using photoshop.

First you’ll need to file with the .psd extension in the file name. If your purchase didn’t not come with this file contact me so I can get it to you. When you open your file it will look like this in Photoshop. You’ll see there are two layers. One with the photo of the scene & one layer labeled screen mask.

My files are delivered to you at full resolution of 300dpi. All web files should be 72dpi so you will probably need to reduce the image size to 72dpi before adding your own design. To do this, go to “Image” in the top menu, then “Image Size”. A box will pop up with the image dimensions. Change the resolution to 72dpi. You can also change the pixel width here to match the width of your website to save time later.

Once your file is the correct size you’ll want to open your design in Photoshop. In this example I did a screen shot of one of my web designs in my internet browser then opened that file in Photoshop. Now you’ll need to copy this image so you can paste it into the main mock-up image. I did this by using the short keys for Select All (“command + a” for mac or “ctrl + a” for pc) then the short keys for Copy (“command + c” for mac or “ctrl + c” for pc).

Now paste your design into the main mock-up image. I use short keys for Paste (“command + p” for mac or “ctrl + p” for pc). You’ll see that your design adds a new layer to the image, however it probably covers up more of the image then just the screen.

To get your design image to fill  just the imac screen you’ll need to create a clipping mask. Make sure your design image layer is above the screen mask layer then right click on your design layer. You should see a menu pop up. Select “Create a Clipping Mask” from the menu.

Now your design should be constrained by the imac screen shape but it probably looks a little weird… not centered & too big. To arrange your design on the screen the way you like it you’ll need to resize your design to fit. I do this with the “Free Transform” tool using short keys (“command + t” for mac or “ctrl + t” for pc). You’ll see an outline of your design & boxes in the corners & on the side of the image. Now grab on to one of the corners of your design with your mouse while holding down the “shift” key on your keyboard & begin bringing in the corner of the design to where you want it. Keep doing this by grabbing different corners & dragging the image around until you get it perfect. It’s important to hold the “shift” key while resizing to constrain the aspect ratio and prevent you from distorting the original shape.

Once you’re done resizing your final design should look like this.

From here I usually resize the image if I need to so it fits my blog or whatever media I intend to post it on then save the image for web as a .jpg file.

Hope this all makes sense! Please don’t hesitate to contact me if you have more questions about using my files.