MediSpera Posted July 28, 2018 Share Posted July 28, 2018 Hi - I'm trying to create a banner for the homepage of my website larconsultancy.com but when I upload it becomes pixelated. Please tell me what settings to implement (such as document set up) to avoid this. Happy to send a file save in affinity but can I do this privately? Quote Link to comment Share on other sites More sharing options...
R C-R Posted July 28, 2018 Share Posted July 28, 2018 If you export to a raster image format like JPEG, the image will always be at least somewhat pixelated (because a raster image is made of pixels, not resolution independent vectors). The only thing you can do about that is to use more pixels (by making the image larger before you export it), which increases file size & page loading times for visitors to your web site. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
MediSpera Posted July 28, 2018 Author Share Posted July 28, 2018 Thank you R C-R. I'm very new to this so all advice very welcome. Quote Link to comment Share on other sites More sharing options...
firstdefence Posted July 28, 2018 Share Posted July 28, 2018 Which app are you using? Affinity Photo or Affinity Designer 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...
MediSpera Posted July 28, 2018 Author Share Posted July 28, 2018 To create it - Affinity Designer. When I noticed the pixelation on the website I uploaded into Photo and realised it was worse than I thought. It was a good diagnostic though to understand it was the image and not anything in the settings of the element. Quote Link to comment Share on other sites More sharing options...
firstdefence Posted July 28, 2018 Share Posted July 28, 2018 Have you tried exporting as SVG for the web? this comes out at approx 3Kb and the text is crispy, I did a mock up of your home page banner to test. LAR-Top-banner-Split-2-png.svg 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...
MediSpera Posted July 28, 2018 Author Share Posted July 28, 2018 Wow thank you! I will try that tomorrow and let you know how it goes. Really appreciate it! firstdefence 1 Quote Link to comment Share on other sites More sharing options...
MediSpera Posted July 29, 2018 Author Share Posted July 29, 2018 Hi firstdefence - tried exporting via svg for web but came out very blurred. Quote Link to comment Share on other sites More sharing options...
MediSpera Posted July 29, 2018 Author Share Posted July 29, 2018 OK upped the dpi to 600 and tried again but it changes the font of the LAR bit, and it places a gap between the two last letters. LAR Top banner Split svg.svg Quote Link to comment Share on other sites More sharing options...
firstdefence Posted July 29, 2018 Share Posted July 29, 2018 @MediSpera here is the afdesign file: LAR-Top-banner-Split-2.afdesign try exporting to SVG from this file, SVG does have a habit of separating the characters in words, I've modified the file a tad because on zooming in on the word LAR I noticed the letters 'L' & 'R' were slightly off in the vertical, not sure why that would be on a font like Arial Rounded MT Bold, anyway, I typed the 'L' & 'R' separately to get the letters to align to the baseline. (See images for what I mean.) After typing each letter separately and doing a small resizing of each letter. 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...
MikeW Posted July 29, 2018 Share Posted July 29, 2018 As far as the rounded bits overshooting the Ascent and baseline, that is how the font is designed. Most all fonts have rounded letter parts that overshoot. So even in say Times New Roman, the rounded upper parts of letters such as a, e, g, etc., will always be above a letter such as u, y, x, etc. And for a baseline, again, the rounded bottoms of a, e, g, u, etc., sit below the bottom of an h, x, and i, for instance. This is to compensate for the visual perception that letters with rounded parts at the x-height or baseline or Ascent will appear shorter than say an x. This visual effect does begin to minimize or completely disappear as letter increase in vertical height. In the modified LAR, I would still recommend the A & R sit a bit lower below the baseline. Right now they appear to sit a skosh higher that the long horizontal straight line of the L's bottom. Quote Link to comment Share on other sites More sharing options...
MediSpera Posted July 29, 2018 Author Share Posted July 29, 2018 I've redone the whole thing using a mixture of Affinity Photo and Designer - I redid the rings image separately, put circular shapes on top of each ring when resizing didn't help with the pixelation so basically covered, coloured, saved. I did the text of LAR Consultancy in Photo and not in designer. Then imported into designer and played with it. Result: www.larconsultancy.com - much sharper. Thanks for your input - really grateful. Quote Link to comment Share on other sites More sharing options...
MediSpera Posted July 29, 2018 Author Share Posted July 29, 2018 1 hour ago, firstdefence said: @MediSpera here is the afdesign file: LAR-Top-banner-Split-2.afdesign try exporting to SVG from this file, SVG does have a habit of separating the characters in words, I've modified the file a tad because on zooming in on the word LAR I noticed the letters 'L' & 'R' were slightly off in the vertical, not sure why that would be on a font like Arial Rounded MT Bold, anyway, I typed the 'L' & 'R' separately to get the letters to align to the baseline. (See images for what I mean.) After typing each letter separately and doing a small resizing of each letter. Can I ask a stupid question? I'm not great at aligning - how did you get all those lines across to assist with the line up? That looks really useful. I use snap lines but not the same... Quote Link to comment Share on other sites More sharing options...
firstdefence Posted July 29, 2018 Share Posted July 29, 2018 Guides. while the Move tool is selected you can go to the rulers and pull a guide out, you can also use the Guides Manager to place guides exactly where you want them either as a percentage or placed in mm, px, inches etc depending on what your document units are set too. At the moment you can only create guides with the move tool selected but hopefully in the 1.7 update they will allow you to create guides while using the Node Tools and maybe a few others. From the Help files. Guides Guides are non-printing, non-exporting lines that float over page objects and assist with their positioning. They can be created and positioned by dragging from a ruler (for 'by eye' placement) or via the Guides Manager (for precision using the document's units or a percentage). To add a guide: Do one of the following: Drag from either the horizontal or vertical ruler which can be switched on via the Viewmenu. From the View menu, select Guides Manager. Click the Add new guide icon for either horizontal or vertical guides. To move a placed guide: Do one of the following: Drag the guide with the Move Tool when you see the cursor change. From the View menu, select Guides Manager. Double-click on the value for the guide you want to edit and type a new position into the value field. (Note that you do not need to type the units.) To position guides by percentage: From the View menu, select Guides Manager. Select the Percent option. Percentages are calculated from the top-left of the document page. To show or hide guides: From the View menu, select Show Guides. A check mark is displayed next to the menu item when the guides are visible. If guides are hidden, they will automatically become viewable again if a new guide is added by dragging from a ruler. To remove guides: Do one of the following: With the Move Tool selected, drag the guide off the page. From the View menu, select Guides Manager. Click to select the value for the guide you want to delete and then click the Remove guide icon. 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...
MediSpera Posted July 29, 2018 Author Share Posted July 29, 2018 Thank you!!! Will play with it. Bowled over by the help on this forum. Made my w/e! Quote Link to comment Share on other sites More sharing options...
firstdefence Posted July 29, 2018 Share Posted July 29, 2018 You're welcome. 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...
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.