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

Exporting Icon For Web Use, Coming Out Blurry...


Recommended Posts

I am trying to export an icon I designed for use on the web I am trying to export in PNG format but whenever I export the image comes out super blurry any ideas why? The icon is small but needing this to be high res as will be going on my website, and to be the exact size of the icon!

FREEShipping.afdesign

Link to comment
Share on other sites

Welcome to the Affinity forums @MPBCO!

Looking at your design I found the lines to be too thin. 0,1px should be crisp on what display? ;)

So I tried to change all to 1 px stroke width, but there were still too much details (for my taste). So I removed some extra lines. To get sharp results keep an eye on width, height and position to be on full pixels.

 

FREEShipping.png

FREEShipping-2.png

FREEShipping-3.png

------
Windows 10 | i5-8500 CPU | Intel UHD 630 Graphics | 32 GB RAM | Latest Retail and Beta versions of complete Affinity range installed

Link to comment
Share on other sites

5 hours ago, MPBCO said:

designed for use on the web

View menu > View Mode > Pixels or Pixels (Retina)

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

 "Confused" @Pšenda?
Proč?

The pixel preview will show you exactly how the path will look like on export. Before exporting. Which was @MPBCO's question.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

9 hours ago, loukash said:

The pixel preview will show you exactly how the path will look like on export. Before exporting. Which was @MPBCO's question.

No she was not.
The question of OP is - "Why" is my export blurred? ("...but whenever I export the image comes out super blurry any ideas why?").

I really don't understand, how the way to display (View Mode) would explain "why" the exported image is blurred, unlike Joachim post.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

30 minutes ago, Pšenda said:

I really don't understand, how the way to display (View Mode) would explain "why" the exported image is blurred

Read which part of the original post I've quoted.
Context matters.™ ;)

32 minutes ago, Pšenda said:

unlike Joachim post

And that's all fine and well. I was expanding on @Joachim_L's reply.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

48 minutes ago, loukash said:

I was expanding on @Joachim_L's reply.

 

11 hours ago, loukash said:

The pixel preview will show you exactly how the path will look like on export. Before exporting. Which was @MPBCO's question.

??? Hmm.

P.S. If you want to provide the OP with some additional information, but it is not related to its original question at all, then I think it is necessary to mention it explicitly in your contribution. Otherwise, the OP, which is obviously not very familiar with the issue, will only be confused.

I hope I have explained enough to your original question "Proč?".

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

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.