Juan T Posted April 7, 2020 Share Posted April 7, 2020 Using Affinity Designer (although I also havePhot and Publisher), how do you create hero banner like the background in https://fontawesome.com/, see the icons on the green gradient. And on https://brave.com/brave-rewards/ see the the curved background. ANy help is appreciated. Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 7, 2020 Share Posted April 7, 2020 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 Heitor and Juan T 2 Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Juan T Posted April 7, 2020 Author Share Posted April 7, 2020 Hi @firstdefence what is the best preset or template to use when creating new banners for websites? And what is the best way to export like what file type or size? Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 8, 2020 Share Posted April 8, 2020 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 Juan T 1 Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
John Rostron Posted April 8, 2020 Share Posted April 8, 2020 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 Quote Windows 10, Affinity Photo 1.10.5 Designer 1.10.5 and Publisher 1.10.5 (mainly Photo), now ex-Adobe CC CPU: AMD A6-3670. RAM: 16 GB DDR3 @ 666MHz, Graphics: 2047MB NVIDIA GeForce GT 630 Link to comment Share on other sites More sharing options...
Recommended Posts
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.