Line25

14 Mockup Templates for Easy Website Hero Images

Read the full post

Hero header images containing various office peripherals and everyday objects are becoming increasingly popular, particularly for design agencies and portfolio websites.

Following this trend can be time-consuming and requires some pretty swish photography equipment, but there are some shortcuts in the form of PSD mockup templates.

In today’s post, we round up a mixture of free and premium mockup templates with ready made tabletop scenes that can be customized to quickly produce cool website hero images.

Free Hero Image Mockup Templates

Everybody loves freebies! These mockup templates are all available for free, but the selection is pretty limited. This might be because the trend is still quite new, or that these templates take considerable time to create. If you can’t find a style you like, there’s plenty of premium templates available.

Designer Desk Essentials

This PSD mockup lets you create custom hero images for your portfolio page, profile cover and more. All objects, shadows, and backgrounds are separated on different layers, for easy customization.

Designer Desk Essentials

Flat MockUps

This is a collection of desk items to help you create great hero images for your projects. Comes in both PSD and AI formats.

Flat MockUps

Workstation Mock Up V2

This fully-layered desk mockup includes the following: iMac Screen Mockup, iPad Screen Mockup, iPhone Screen Mockup, and Leather Stamping Logo MockUp.

Workstation Mock Up V2

2 Vintage Hero Header Images

Here are 2 vintage hero images with replaceable surfaces via smart objects in Photoshop. Images are featured in High resolution (3000×2000) and 300 DPI.

2 Vintage Hero Header Images

Free Creativity Bundle

These PSD mockups are easy to use and customize in Adobe Photoshop. It includes plenty of high-quality objects you can use to construct your scenes.

Free Creativity Bundle

Hero and Header Scene MockUp

This is a set of three mockup templates that can be easily customized and you can also add your own designs with the help of smart-object layers.

1 Hero and Header Scene MockUp

Flat Hero Header Kit – Designer Essentials

This is a pack of illustrated vector tools and desk items that are fully layered and can be edited with the help of smart objects to create unique hero images.

8 Flat Hero Header Kit - Designer Essentials

Hero Header Scene Mockup PSD Templates

These PSDs are ideal for creating hero or header images and can be easily customized.  They also include smart-object layers.

11 Hero Header Scene Mockup PSD Design

Premium Hero Image Mockup Templates

If none of the free templates take your fancy, there’s a nice range of affordable premium mockups available. These premium alternatives often come with many more options than the freebies, so they’re great value for money. Plus, it’s nice to know you’re supporting fellow designers with a little passive income!

87 Hero/Header Images Mega Bundle

This mega bundle contains 87 hero/header images and mockups including 5 collections of still and animated series.

87 Hero/Header Images Mega Bundle

8 Customizable Hero Header Templates

This set contains 8 PSD templates with distinct themes. Download these realistic desk set ups today to create your own hero image for your brand.

8 Customizable Hero Header Templates

Custom Scene – Feminine Edition

Each object in this scene is split into separated layers and has its own unique shadow which will change its direction depending upon the object’s rotation.

Custom Scene - Feminine Edition

12 Headline Images (Dark Edition)

Here are 12 hero images for your next project. The image sizes are 4500x3000px. They are easy to customize with the help of smart objects.

12 Headline Images (Dark Edition)

25 Header/Hero Images – Wood Series

Grab these 25 hero scenes! All the digital devices used in the photos (iPhone, iPad, MacBook Pro and Kindle) have replaceable Smart Object screens, for easy customization.

25 Header/Hero Images - Wood Series

8 Designer Essentials Hero Images

This hero images set contains 8 images with designer essential objects. The screens of the iPhone, iPad, Kindle, business cards and notebook used are all Photoshop smart objects.

8 Designer Essentials Hero Images

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

30 Comments

  1. تور دبی says:

    thanks man i will share it

  2. David Albert says:

    Inspiring article. Thanks for sharing such a great check list of website templates. These mockup are really attractive. I hope you will be adding more interesting articles in the future.

  3. ترجمه تخصصی says:

    tnx a lot..

  4. شركة كشف تسربات says:

    Good and useful post. thanks

  5. Brian says:

    Hi Chris,

    Great round up thank you for sharing it I use to have the “Workstation Mock Up V2” on my main slider. Now I’m planning to use thw Header/Hero Images – Wood Series love the wood concept.

  6. Fernando Castillo says:

    An excellent list of templates to go through. Recently the branding and marketing strategies have given a flight to attractive templates so that traffic gets attracted to these. Excellent!!

  7. IBR InfoTech says:

    Amazing templates you have shared for web designing. Designing is the best thing in any web development work.

  8. Robert Broley says:

    Some really great hero images. Its definitely saved me some time. Thanks for sharing them

  9. Ana says:

    Guys, visit https://placeit.net/ to generate mockups in seconds without Photoshop!

  10. Web development company says:

    Again a very nice post, I like Free Creativity Bundle, it’s really awesome but other all are also good.

  11. Derek says:

    Awesome, that’s exactly what I was looking for a website project!

  12. Sam says:

    Another way to do this is to find an image gallery that supports HTML 5 / CSS 3 which allows you to dynamically place items on the image. Almost like you’re moving items on the image. It’s a very nice effect.

  13. تور کیش says:

    Very useful post.thnx a lot line25

  14. Dynamic Dreamz says:

    Thanks for sharing great post.

  15. John @ pnr status says:

    Flat MockUps are so amazing
    thanks

  16. Cathy Mayhue says:

    As usual very nice art work and my favorite is workstation mockup.

  17. دیزل ژنراتور says:

    the first design is so good

    thank you

  18. Dave says:

    Some really nice hero images there Chris. I’m more of a fan of designing your own, but if you haven’t got the time or equipment this is a great alternative way.

    • Chris Spooner says:

      It’s definitely a time saver!

    • Andrew Areoff says:

      Yes, I designed my own hero image that truly reflects who I am as a creative and the tools I use.

      It took about a couple of hours to set everything up and get it all straight and then to be able to shoot without a high-end studio setup so it looks half-decent.

      Don’t want to just to post a link to the image here as it’s naked self promotion but if anybody is interested in having a look please email me – unless Chris wants me to post it here of course.

Leave a response