Jump to content
Juan T

How to Create Background Images for Websites' Hero Banners

Recommended Posts

Hi Juan, They are quite simple to do.

The actual image doesn’t have a green background, it is also an SVG file on the site and it’s size is 2667 x 840, the green gradient background is created in CSS I believe and the actual image doesn’t have the gradient background.
 

Take a look at this file to see how it was built: fontawesome hero.afdesign

This is how the banner was built for the Brave site: Brave.afdesign 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Hi Juan, there isn’t really a best preset or even a best size, it really depends on the application of the image, the website it’s going to be placed on etc. Keep it simple, text can be added with HTML and or CSS but be mindful of where the text will sit, you can add text to the image to visually see where and how it affects the image so you can place elements in the right places you don’t have to export the text with the image.

Some examples of hero banners can be seen here: https://dribbble.com/tags/hero_banner 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Having read this thread, and followed the links, I still had no idea what a hero banner was, so I resorted to wikipedia, and found that:

Quote

In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center.[1] The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site's most important content. A hero image often consists of image and text, and can be static or dynamic (e.g. a rotating list of images and/or topics).

John


Windows 10, Affinity Photo 1.8,3 Designer 1.8.3 and Publisher 1.8.3 (mainly Photo), now ex-Adobe CC

CPU: AMD A6-3670. RAM: 16 GB DDR3 @ 666MHz, Graphics: 2047MB NVIDIA GeForce GT 630

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.