JonathanBowen Posted March 16, 2016 Share Posted March 16, 2016 And then I exported it at 400 x 400 pixels and 150 x 150 pixels in order to resize it but the 1201 x 1201 pixels looks, by far, the best. What did I do wrong? Help! Quote Link to comment Share on other sites More sharing options...
R C-R Posted March 17, 2016 Share Posted March 17, 2016 You did nothing wrong, other than maybe expecting the smaller versions to look as good as the large one. What's happening is when you reduce the number of pixels, you reduce the amount of detail the image can contain. That's because a pixel is the smallest possible unit of color information in an image -- you can't shrink pixels, only add or (in this case) remove them to change the image size. If that still seems unclear, imagine designing your logo on a piece of graph paper. Draw a square box around 1201 x 1201 grid divisions, & fill in each of the grid's little boxes in it with any color you want. That represents how your largest version would look in pixels. Now do the same thing, but inside a box only 400 x 400 grid divisions & again in one 150 x 150 divisions. You can't half-fill any of the little boxes -- they can only be completely filled with one color or empty. See the problem? There just are not enough grid squares to show everything in the large version in the smaller ones, so they can never look as good. JonathanBowen 1 Quote All 3 1.10.8, & all 3 V2.5.5 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 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...
JonathanBowen Posted March 17, 2016 Author Share Posted March 17, 2016 Understood. Would it have looked better if I created it at 150 x 150 pixels and then enlarged it? Are there any techniques I can use to maximize the smoothness of the smaller images? I appreciate your insight. Quote Link to comment Share on other sites More sharing options...
R C-R Posted March 17, 2016 Share Posted March 17, 2016 It usually won't help much to create a smaller version & then scale it up. To maximize the smoothness of the smaller versions, about all you can do is try to avoid diagonals & curves that would partially fill a pixel if that was possible, & possibly to use colors along edges that don't contrast so much that the characteristic stair-step effect (known as the jaggies) is not too noticeable. Basically, for best results each version needs to be designed separately, adding no more detail to each one than looks good when viewed at its actual size. That often requires beginning with a simple design containing only the most important & largest thematic elements, & adding details sparingly so all the sizes look enough alike that your logo is recognizable for what it is in all of them. It isn't easy to begin with & gets progressively harder as the size decreases. JonathanBowen 1 Quote All 3 1.10.8, & all 3 V2.5.5 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 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...
JonathanBowen Posted March 17, 2016 Author Share Posted March 17, 2016 So you're saying that I've violated two of the most basic rules by creating a perfectly round logo using only black and white. Sigh... Quote Link to comment Share on other sites More sharing options...
R C-R Posted March 17, 2016 Share Posted March 17, 2016 Well, not exactly violated anything, but you have chosen to try something that is not easy to do well. For example, look at what Apple's icons look like at small sizes in Finder windows or on the Dock. Even with all their expertise (& money) the small versions are relatively crude approximations of the large ones. Quote All 3 1.10.8, & all 3 V2.5.5 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 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...
Oval Posted March 17, 2016 Share Posted March 17, 2016 rules by creating a perfectly round logo We don’t know the concept, but logos should mostly be created vectorially as basis. Of course, designing with only 1201 x 1201 pixels is possible but very special. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted March 17, 2016 Staff Share Posted March 17, 2016 Hi JonathanBowen, Welcome to Affinity Forums :) You haven't violated any rules. It Ok and desirable to work on a logo in black and white and also use whatever forms you think better represent the image/brand you're looking for. What you do have to be aware is that it will be used in different medias and should be legible and easily identifiable at all sizes. When this involves screens and just a few pixels wide, they will lose legibility if they are too complex or use an elaborated colour schemes (gradients, unnecessary effects etc) because it's hard to fit all those details in a limited square grid. In those cases (small sizes) you should work at a 1:1 scale and carefully place (and simplify if needed and possible) the elements so they fit inside the grid structure at whole pixels or half pixels rather than at random, to keep them as sharp and legible as possible. Simply resizing from a large image/logo will never give you the best results because the boundaries of the elements will end up placed at random on the pixel grid blurring the details and blending the colours. Take a look at the example below. It's for an 20x20 px icon but it shows why working at a pixel level on such small sizes help to keep the sharpness. On the left it's the optimised version where the elements where placed taking in account the pixel grid. On the right example they were left at random. The version on the left looks much more sharper than the one on the right. The same type of issues happen when logos need to be scaled down to small sizes. They must be carefully optimised to look at their best. For large sizes this isn't obviously a problem because there's enough pixels to render all detail perfectly. Quote A Guide to Learning Affinity Software 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.