Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

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?

Link to comment
Share on other sites

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.

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

Which app are you using? Affinity Photo or Affinity Designer 

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  
B| (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

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. 

Link to comment
Share on other sites

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

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  
B| (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

@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.)

414325078_ScreenShot2018-07-29at16_41_20.thumb.png.0afd85db9c621281d559aec0516f01f2.png

After typing each letter separately and doing a small resizing of each letter.
1190806456_ScreenShot2018-07-29at16_45_23.png.62c0898484ec1ae262c7c5222bb03672.png

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  
B| (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

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.)

414325078_ScreenShot2018-07-29at16_41_20.thumb.png.0afd85db9c621281d559aec0516f01f2.png

After typing each letter separately and doing a small resizing of each letter.
1190806456_ScreenShot2018-07-29at16_45_23.png.62c0898484ec1ae262c7c5222bb03672.png

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...

Link to comment
Share on other sites

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:

  1. From the View menu, select Guides Manager.
  2. 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.

 

 

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  
B| (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

You're welcome.

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  
B| (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

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.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | 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.