How to Create a Custom Mockup in Photoshop

HOW TO create easy webpage mockups with your own photos

Web mockups are sooo useful for online entrepreneurs & bloggers.  It gives us a way to share what our online space looks like.  Sure you can screen shot your website, but when sending out a media kit, sharing site updates or launching new features or courses, it's not cutting it.  

There are 101+ ways to create a mock up & you can certainly hire a designer (eh em) to do it for you, but it's really simple to do yourself as well.  All you need is a picture to work from.  

 

OH NO!  You don't have a perfectly styled stock image of a screen or device?  

I got you, babe... download the image I used for this tutorial here.  

 

Let's get started

HOW TO create easy webpage mockups with your own photos

1.  Open any image with a screen in photoshop (or any program of the like).

2. Screen shot your webpage in the orientation of your mockup (vertical or horizontal). & open in photoshop.

HOW TO create easy webpage mockups with your own photos

3. On the 'mockup' image, use the lasso tool to create a box just inside the borders of your screen. Using the paint bucket, fill in the area with black.  (If you downloaded my demo picture from above, I've already done his for you <3 )

HOW TO create easy webpage mockups with your own photos

4. Drag your screenshot onto your mockup image (make sure its on a new layer).  Then rotate & scale to match the dimensions of your screen. 

5. If the screen in your mockup is not flat, you may need to work with the perspective tool to create a realistic effect.

6. Duplicate the layer with your perfectly fitting screenshot.  (you can do this by dragging the layer onto the new layer button at the bottom of the layers window)

HOW TO create easy webpage mockups with your own photos

7. On the first screenshot layer (should be BENEATH the other), use the eraser on a low opacity & no hardness to fade the outer edges of the image.  You'll want to take a bit more at the corners.

HOW TO create easy webpage mockups with your own photos

8.  On the top screenshot layer (on top of the one done in step 7), change the layer mode to lighten & lessen the opacity until it looks just right.  I used 66% in this case.

9.  TADA!  Save that shit!  

HOW TO create easy webpage mockups with your own photos
 
design for bloggers & creative entrepreneurs

DON't forget to download your free stock image

(also available in the secret subscriber library)