{"id":50709,"date":"2018-10-08T09:27:57","date_gmt":"2018-10-08T16:27:57","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=50709"},"modified":"2024-04-17T06:38:57","modified_gmt":"2024-04-17T13:38:57","slug":"design-hero-image-scene-creators","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators","title":{"rendered":"How to Design a Stunning Hero Image with Scene Creator Kits"},"content":{"rendered":"

Hero images (or headers) are often the first things your users will focus on when loading up your website. It’s important for your hero image to be useful and engaging, as it’s the best shot you have at convincing a visitor to take a certain action or stick around on your site. Your best approach is to create a hero image that is visually appealing while communicating your message. One practical way of achieving this is by using scene creator kits to create your hero images.\n

<\/span>What are Scene Creator Kits?<\/span><\/h2>

\nSimply put, scene creator kits<\/a> give you all the ingredients you need to make your own stunning graphics. It’s just a case of piecing everything together the way you want. The kits are essentially a big collection of graphical elements all based around a certain theme, that have been meticulously ‘cut out’ and set up in a consistent style allowing you to just drag and drop them into your work. Shadows are often preserved on transparent layers so the elements keep a level of realism wherever you place them.\n

<\/figure>\n \nScene Creator Kits are incredibly simple to use. You simply open a PSD file, select the individual elements you want to use, and drag them into your own canvas.<\/strong> Beyond that, it’s completely up to you. The elements contained within a kit are all shot at the same view (in most cases) so you can mix and match elements as you see fit to build beautifully vivid graphics of your own very quickly.\nThese kits can be used in a number of ways, but they are particularly useful for creating impressive hero images <\/strong>without a lot of time or effort. With this in mind, we are going to explore some simple ways to design stunning hero images using scene creator kits so that you can do something similar for your website.\n<\/p>

<\/span>Using Scene Creators to Improve Hero Images — Design Challenge #1:<\/span><\/h2>

\nI set myself the challenge of creating a few hero images using a single scene maker kit. I’ll start with designing a custom hero image for a fictional Bakery, and we will see how easy it is to create an impactful hero image simply by using scene creators.\n\"\"\n<\/p>

<\/span>Before: Bakery Example<\/span><\/h3>

\nIn this ‘before’<\/strong> mockup I’ve made, we start off at a good point — the hero area is not bad by any means, there is a nice and clear explanation of what the website site does and a simple call to action button.\n\"\"\nThere is nothing too wrong with this at all, it’s just not very interesting or compelling, and while it certainly looks nice, we can still make some very quick edits to help make better use of the hero background and create something that is a bit more visually interesting while providing clear context about the service offered.\n<\/p>

<\/span>After: Bakery Example<\/span><\/h3>

\nAfter a few small edits, mostly just dropping in pre-made elements we have a completely different vibe and we’ve got something far more compelling for our hero image. In almost no time we’ve added texture, depth, and a lot of helpful context to our hero image. As long as you pick the right kit, and use the right elements, it’s very easy to achieve a similar result just like this.\n\"\"\nLet’s take a quick look at how each improvement was made one by one:\n<\/p>

<\/span>Tips for Effectively Using Scene Creator Kits<\/span><\/h3>1. Find The Right Scene Creator Kit<\/strong>

\nFinding the right scene creator kit to fit your needs is important for your final result, luckily there are a lot to choose from, but you’ll have to search around a little and choose one or more kits that are relevant for your hero image. I went for one simply called Scene Creator<\/a> by Ceacle for my example, as it offers a variety of different ‘scenes’ across a number of different niches which will come in handy for a number of different hero images, but also has the key bakery items we were using for our example mockup.\n

<\/figure>\n \n2. Make Use of Background Textures<\/strong>\nScene creator kits include a variety of background textures for you to use — so I took advantage of this in my example by adding a very subtle wood texture as one of my first improvements. This step helps to ‘set the scene’ and add a hint of realism and gives you a great starting point on which to start building your scene. This is not always necessary, but it’s worth exploring the background textures.\n3. Pick The Right Elements<\/strong>\nMost kits come with a huge variety of different items, some of which you can customize too, editing elements like colors or shadows. More often than not, the items won’t need any alterations and you can just use them right out of the box. You want to experiment using different scene elements in your hero image and just discover what works for you. Try to add variety by using elements with different colors, sizes, and shapes and focus on pulling in the most relevant items first so you don’t over-crowd your hero area.\nYou can, of course, skip the ‘selection’ process altogether to save even more time, and just use the pre-made scenes. But it’s always a good idea to try and create your own unique compositions by picking and choosing specific items and even combining those with other resources along the way.\n4. Position Your Elements — Framing & Spacing<\/strong>\nThe way you compose the individual elements in your hero image is the main challenge, you have full creative freedom, but one quick suggestion if you are stuck for ideas is to simply place your main content\/hero title in the center and use the scene kit items to frame your message. This also helps draw focus to your content, using the scene elements to draw the eye towards your title and call to action.\nKeep a good amount of white space throughout, so your graphic doesn’t feel too cluttered, and just place your scene elements around the outside edges. Having parts of the image running off the page is completely fine and just adds to the look we are going for in our case.\nMost scene creator kits are made at a very high resolution, which means you get high quality, crisp images which are versatile enough for a lot of different uses, but when working on hero images for the web you may need to scale down your images before deciding exactly where they go. Some rotation may also be required along the way to help frame your content.\nMy best advice is to bring in a number of relevant items on to your canvas and just play with different placements until it starts to feel right. The kits will happily save you a lot of time, but if you want something unique you will still have to dedicate a little time to experiment with placement until you find your groove.\n5. Finding Balance & Consistency<\/strong>\nRemember it’s not necessary to try and show everything at once, or use too many items from the kit — we are not looking to display the full range of products in a single hero image, we are simply creating visuals that reinforce our message with some relevant imagery.\nMixing elements from different kits can sometimes be a good idea too, but not always, be careful not to use kits with different styles, most kits are focused around the popular ‘top-down’ view, which is great, but there will be variety in the way those items were lit and processed, so making something with a consistent look is key to creating believable and pleasing graphics from your scene kits. The best way to ensure consistency is to find a kit that contains a large number of elements: these will usually all be created in a very similar way.\n<\/p>

<\/span>Design Challenge #2<\/span><\/h2>

\nHere’s another quick mockup I made using the same Scene Creator kit. The theme of the website in this example is web design services, so this time we pick out design-related objects. As before we’re aiming to draw attention to the content block by framing it with the relevant elements, and as you can see we achieve a similar result as before in no time at all.\n\"\"\n<\/p>

<\/span>Before: Design Services Example<\/span><\/h3>

\nAgain this is a fine hero image by itself, in some cases it might be exactly the sort of thing you want to use, but the abstract shapes and flat background don’t do a lot to provide any context, by using another ‘scene’ from the same kit we can instead populate the hero image with items relating to design to help re-enforce what it is this fictional company provides.\n\"\"\n<\/p>

<\/span>After: Design Services Example<\/span><\/h3>

\nAgain we make use of some subtle background texture, we frame our call to action and keep lots of white space between the elements we drop onto the scene. In just a few minutes we’ve injected a lot of character and depth to the hero image and as you can see from the video below it was only a case of dropping in a few elements and seeing what worked where.\n\"\"\n<\/p>

<\/span>Video Timelapse<\/span><\/h3>

\nAs you can see the process is pretty straightforward and we get beautiful hero images as a result. There are a lot of different styles you can achieve with these kits, but something as simple as this can work very well for a number of different uses. It’s something we see used in web design very frequently because it does such a good job of catching and guiding attention.\n<\/p>

<\/span>Using Gradient Maps with Scene Creator Kits — Challenge #3<\/span><\/h2>

\nOne final method I wanted to explore for using Scene Creator kits was the effective way of combining them with Gradient Maps<\/a>. This method allows you to fill your hero area with more items, as we will later introduce contrast between the foreground content and background visuals with the gradient maps and some other fills & adjustment layers.\n\"\"\nFor this final design challenge we will reused the same hero image from before, then we introduced a lot more scene elements to fill the space more fully. Once we do this we then need to look at how to remedy the busy background and flatten it out.\n<\/p>

<\/span>Basic Steps to Achieve This Style<\/span><\/h3>

\nIn this process GIF you can see how the busy and crowded scene transforms into a fun and usable background once we add some important layer adjustments. It’s also an effective way of injecting your brand colors into the hero area. Here’s how I achieved this look.\n\"\"\n1. Lighten Text & Content<\/strong>\nThe first step I took was changing the text and button to white, as I knew I wanted to make the background darker.\n2. Darken Background & Add Colour with Layer Adjustments<\/strong>\nAfter that, we added some basic layer adjustments to achieve the final look. If you wish to do the same, navigate to your layers panel, and look at the small toolbar at the bottom for an Icon labelled “Add New Fill or Adjustment Layer†bottom right of the panel and look for “Levels†— then also add “Gradient Map†and “Gradient†fills with the same icon.\n\"\"\n2a. Levels<\/strong>\nOnce you’ve added these adjustments, we need first create contrast by darkening everything in the background. One effective way of doing this is by simply editing the Output levels via your properties panel (with the Levels adjustment selected) — In my case, I simply moved the slider to around 80. This darkened the entire image and gives us lots of contrast.\n\"\"\n2b. Gradient Map<\/strong>\nThere aren’t any set values here that you can use. These colors are going to need to vary based on the style you want, but the image below shows the values that I was working with, as you can see a simple duotone approach works fine, using two colors from the existing branding. Explained: The gradient map essentially replaces dark and light values in your image with the colors selected in your gradient map. Shadows become the color on the left, and highlights transform into the color on the right.\n\"\"\n2c. Gradient Overlay<\/strong>\nOnce we’ve got our gradient map applied everything should be looking nice and you might be good to go, if things do begin to look a little flat you can lower the opacity of your effects ever so slightly and introduce a gradient overlay. I added this overlay with a lighter blue and pink color and set it at a slight diagonal angle and set the blend mode to ‘Soft Light.’\nThe best thing you can do to get a similar style working for you is to experiment with colors, contrast and layer opacity to achieve different results following a similar method, and hopefully you can find something that fits.\n\"\"\n<\/p>

<\/span>Explore More Scene Creator Kits<\/span><\/h2>

\nHopefully, these little design exercises provided an insight into just how simple it can be to build compelling hero images (and other graphics) just by using a simple kit scene making kit. Every example I created for this post was pieced together just using 4 scenes of the available 50 scenes in the Scene Creator kit that we used, but many other great kits are out there with an equally impressive set of ready-made elements, here are just a few of my favorites:\n<\/p>

<\/div>

Powered by Creative Market<\/a><\/p>

Products Seen In This Post:<\/strong><\/p>
<\/figure>\n
<\/figure>\n \n","protected":false},"excerpt":{"rendered":"

Hero images (or headers) are often the first things your users will focus on when loading up your website. It’s important for your hero image to be useful and engaging, as it’s the best shot you have at convincing a visitor to take a certain action or stick around on your site. Your best approach […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[102,305],"topics":[],"class_list":["post-50709","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-templates","tag-web-design"],"acf":[],"yoast_head":"\nHow to Design a Stunning Hero Image with Scene Creator Kits - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a Stunning Hero Image with Scene Creator Kits\" \/>\n<meta property=\"og:description\" content=\"Hero images (or headers) are often the first things your users will focus on when loading up your website. It’s important for your hero\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-08T16:27:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T13:38:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/10\/17040119\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp\" \/>\n<meta name=\"author\" content=\"Liam McKay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam McKay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators\",\"name\":\"How to Design a Stunning Hero Image with Scene Creator Kits - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/10\\\/17040119\\\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp\",\"datePublished\":\"2018-10-08T16:27:57+00:00\",\"dateModified\":\"2024-04-17T13:38:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f036ce9811d3c3773dbb7e5a0da2af1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/10\\\/17040119\\\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2018\\\/10\\\/17040119\\\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/design-hero-image-scene-creators#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Design a Stunning Hero Image with Scene Creator Kits\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Design a Stunning Hero Image with Scene Creator Kits - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators","og_locale":"en_US","og_type":"article","og_title":"How to Design a Stunning Hero Image with Scene Creator Kits","og_description":"Hero images (or headers) are often the first things your users will focus on when loading up your website. It’s important for your hero","og_url":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2018-10-08T16:27:57+00:00","article_modified_time":"2024-04-17T13:38:57+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/10\/17040119\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp","type":"","width":"","height":""}],"author":"Liam McKay","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Liam McKay","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators","url":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators","name":"How to Design a Stunning Hero Image with Scene Creator Kits - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/10\/17040119\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp","datePublished":"2018-10-08T16:27:57+00:00","dateModified":"2024-04-17T13:38:57+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/6f036ce9811d3c3773dbb7e5a0da2af1"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/10\/17040119\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2018\/10\/17040119\/Hero-Image-Scene-Creator-example-bakery-process-optimized.gif.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/design-hero-image-scene-creators#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Design a Stunning Hero Image with Scene Creator Kits"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/50709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=50709"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/50709\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=50709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=50709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=50709"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=50709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}