Free geometric web mockups.

Insert your work.

Double-click the Smart Object thumbnail in the layer called “YOUR DESIGN HERE.” A new file will open, showing the gradient image. Drag and drop your web page design onto the file, use the Move tool to resize it if needed, and hit Return to Place the image. Save it, and head back to the main file to see your work in place. To make any adjustments, make sure to use the Smart Layer file and save it every time to update the mockup.

Change the background.

Find the layer called “Background color.” Double-click the Layer thumbnail. When the Color Picker pops up, choose your new background color. For best results, use the Eyedropper tool to select a color from your own web page design.

Change the object colors.

Each cylinder, cube, and rectangle is fully customizable. Open the Design Elements folder, then toggle the eye next to each object in the Layers panel to identify the shape you want to change. Then click the drop down menu and double-click the color. Use the Color Picker tool to find the right hue.

TIP: Use Adobe Color to create a color scheme that complements your design.