Block 1

 Now I'm going to walk through how I would approach this assignment for a menu icon. Now, you know, I've already read the project specification, so I'm going to jump straight into a Penpot file. This is a completely new file, I've just changed the background of the canvas, so it's easy on the eye. Now, how would I start out?

Creating boards

Well, I think about how I'm going to format the icons when I export them. And work towards that. So let's start off by creating two boards for the 16 pixel and 24 pixel sizes. So I want one board that is 16 pixels by 16 pixels, and I want another board that is 24 pixels by 24 pixels, and I will label those accordingly as well.

Zooming for detail

So this is going to be a menu icon and that's 16 pixels. And this will be a menu icon of 24 pixels. And that way I'll know what I'm working towards 'cause they're kind of similar sizes. And let's zoom in so we can see what we're doing. And that will also give us a pixel grid 'cause we are zoomed in pretty far okay, now what do I want to do for my icon? 

Concept

I'm going to go with the convention here and I'm going to draw a menu icon that's represented by lines. Just to quickly show you what I mean, this is the kind of icon you'll recognize it as soon as I do it: three lines together represents a menu. This is because it is representing a list of items stacked vertically and also known as a hamburger menu icon because it looks a little bit like a burger inside a bun. 

Creating the icon

So I'm going to show you how I do that a little slower this time. So I'm gonna use the path tool because I want just single lines. I'll select the path tool and I'll draw the beginning of my line and the end of my line. Now, I don't want to join this into a shape by selecting, going back to the first point. So I'm gonna press Escape to Exit out of editing the path and Escape to exit the Path tool. And now I have a line here. 

Stroke

Now at the moment it's black and it's two pixels thick, which is quite good. One pixel thick lines are very, very difficult to see, particularly when you're zoomed out. So I think two pixels sounds good. The alignment doesn't really matter because this is just a line and it's not a shape that's joined. It won't make a difference whether I select center inside or outside. And now I can think about the ends of my lines. So you can see that these are just cut off at the end. I could always add an arrow or a triangle, rectangle, circle, diamond. But here maybe I'd add a square shape, which will just square off the ends of my line, or I'm going to do round. Round. It kind of softens the shape a little bit. And because I've got it on one side, I want to have round on the other side as well. So it's got some nice symmetry going on there. 

Now I'm going to duplicate that line to create my other lines. And for that I'm just using the keyboard shortcut for duplicate, dragging the copy version of that four times. I could do three. Three is the convention, but I've decided I want to make my concept a little bit different. And it will still be visually identifiable as a menu, but maybe I've got more detail in my lines in this icon. 

Organizing the file

So that's what I'm going to aim for and I'm going to keep my file organized. And so I'm going to name these layers. Because they're all called path at the moment, and that makes it hard to tell. I'm going to number them, so I'm gonna call line four, and because it's at the bottom here visually. What I quite like to do, even in a design like this, where there aren't layers, there's no items in front of other items. I like to have my layers visually line up with the order of the content. So because this line is the bottom of my icon, I'm gonna put it last. And so this is line one. Going to put it at the beginning and line two can't type… and, oh, I've got that the wrong way around. That's line two. And this one is line three. And that way when I select them in the layers panel, I'll easily select the right one without even having to look over here. 

Reviewing the design so far

Now I've got my initial design together. I'm just going to quickly zoom out to see how it looks at a hundred percent, because that's how my icon's going to be used. I'm not gonna be looking at it in this level of detail. So I hit reset to go to a hundred percent. Now what I'm noticing right now, it's very small. I'm just gonna zoom in a little bit more just so that you can see as well. There's not much space around the outside of the icon and it also looks like it's slightly more aligned to the right than it is to the left. It's not centrally aligned to its spacing. I don't mind the distance between the lines. I think that looks okay. It's got that detailed look that I was going for, so let's go in and fix those details. 

Fixing the alignment

Now, I think even if I align these to the center of the canvas, it's still going to look a little crowded because these lines are very wide. So I'm gonna make them a little bit narrower, some sort of funkiness going on there. And let's zoom out and check that again and see how that looks. See that looks a lot more even. That's a lot easier to see as equals sort of roughly equal spacing around the outside. Maybe a little bit more space on the top and the bottom. That works for me. 

Scaling the design

So now I'm going to take this icon, I'm gonna resize it for 16 pixels. Let me first so that I can resize these together consistently. I'm going to group these and just call these menu, and then I'm going to duplicate that menu group, but drag it over into my 16 icon. Now, of course, the lines designed for a 16 pixel icon are gonna be too big for a 24 pixel icon. I have to think about, do I want to make the lines themselves thinner, or do I just want to make the icon smaller? So I could use proportional resizing if I press the K key to switch to proportional mode, and I could scale it down and this would actually make the lines thinner, whilst making the icon smaller. And if I select any one of these lines individually, I can select an object inside of a group by holding down the command or option key. And here you can see that this is actually set… it scaled it down to 1.49 pixels tall, so it's one and a half pixels tall for this.

Sub-pixel rendering

The problem is when you have an icon where the lines are rendering on subpixels or at decimal points of a pixel, it can end up looking a little blurry when you zoom out. So let's zoom out and see how that looks now. It's hard to tell a little bit with the board blurring here, but can you see if I select this board and then I select that board, this is looking a little bit less crisp than that, and it's not just because this icon is bigger than the other one. So let me zoom in again. The other option I have for the icons, I can undo what I did before at the scaling, and I'm gonna turn off proportional scaling and I can just resize it down. So I'm keeping the same thickness of the lines, but I'm just making the lines smaller and shorter. 

Redesigning using filled shapes

Now let's zoom out and see how that looks… central-align it. You see these little pink guidelines help tell me when I'm center aligned to the board. Now you see as I lay out it doesn't look like the same kind of icon. This looks very chunky. Whereas this looks a lot looser and more spacious. So, you know, I have a solution for that. And that is, instead of using strokes, I'm actually going to use fills to create this icon. So I'm just gonna duplicate these boards so that we've already kept what we've uh, worked on already. And I'm just going to add the word stroke to these board names, so I remember which ones are stroke and which ones are fill. And this will be our fill board. And this will also be a fill board. I won't share this with the customer or client when I export them. I won't export them at all, or when I share the file. I don't want to be misleading, but I'll just keep it for reference for now. And if I zoom in. I want to recreate these shapes, but using shapes instead. 

Creating shapes

So if you look at this and how, what the shape looks like without thinking about the path, it's kind of a rounded rectangle. It's just a very short one. So I'm going to create this using a rounded rectangle. So I'm to draw this out and I'm going to make it two pixels high, like the stroke width was. And I'm going to make sure it's landing on whole pixels. When you can't drag it accurately, it's easier to just type it in. And I'm going to add a border radius to the outside of that. Now, if I add a border radius of one pixel, you see that adds that nicely rounded edge that I want. And so then I can delete this menu icon 'cause I've already got my new line… gonna align that centrally. I actually think I'm going to make this an even number because what that means is I can then center, align it whilst using whole pixels for the positioning as well. And so this will be my line one, then I can duplicate to create my line two and duplicate to create my line. Three and again, oh, this one's line four, and let's drag these into position. I'll show you some other ways to do positioning later as well. Now. About two pixels between each line, I think that will look good 'cause it's the same as the width of the strokes. And this is all center aligned. I will group those together, call that menu, and let's change the color of all of the objects at once using the group fill. And there we go. We have black.

Scaling the new design down

I'm going to zoom out and see how that looks. See that's looking pretty similar to the previous design, and let's see how that works. If I scale this menu icon down to 16 pixels, so I'm going to delete what was in there, paste it in, and now I'm going to, I could skirt it down. Just dragging it like that. Or I can use proportional scaling. It will have the same effect because these are fills. So I want to leave a bit of space around each, up each, uh, the outside of each line. And so to do it like that and make sure it's center aligned. 

Does that look about right? It's not quite center aligned, is it? There we go. Oh, no, no. It's not horizontally centered. I think it has to be, we'll make it a little bit wider so that it can be then be horizontally centered on whole pixels. And now if I zoom out now, while this is lying on some subpixels, because of the distance between the lines, it is looking a lot neater. You can see there's a lot more spacing on the 24 pixel version of the icon, but that's quite normal to have a slightly different spacing in order to maximize the use of those 16 pixels on that smaller icon. 

Testing in different color modes

Now, to test it, I want to make sure that it works in different formats, so, so that I can keep that original version of the icon. I'm going to duplicate it. A couple of times again, and I'm going to make sure I label these as well, and I'm gonna say dark for these ones because I'm gonna test how they look when they're in dark mode. So if I change the background color to black. And the menu icon lines to white, and we see how that looks. How does that look? A hundred percent. Is that readable? Yeah, that still looks good. That still works. I mean, black and white is quite an extreme version of dark mode, but you get the idea.

Testing with different colors

And how about color? So let's select these and make sure we name them as well, help distinguish them. And I'm going to keep a white background, but I'm going to change the color of all of the objects, um, inside this group. And I'm gonna make them a sort of a blue color. Let's copy that hex color. And do the same for this 16 pixel one. And let me zoom out and see how that works. And that's still working. I actually quite like it at that kind of middling blue color. It's, uh, a little less jarring. Um, slightly lower contrast, a bit more aesthetically pleasing as I would say that that is working now.

Naming boards

Now I'm gonna check each thing is labeled correctly because that was part of the project requirements was that my Penpot file was labeled well. In fact, what I'm going to do is there's a lot of the, labels, the layers here don't quite align with the boards. Like fill color is at the top, but then it's followed by fill dark, so I'm actually gonna pop them in their own boards. Just remove the fill on that board. And use that as a way of organizing these layers. So stroke, and I'm gonna put, don't use. So that's a way of reminding myself not to use that. And I'll do another board here with no fill. And this is final. It's dangerous calling things final because then you end up needing final, final, maybe I won't call it final.

I'm going to call this version one, and in fact I'm going to call this version naught 0.1, and so that tells me that version one is the latest version. I think that's helpful and a board for. And these ones here, you can see as I'm putting them on boards, it's organizing the boards that are inside, like grouping them inside the layers list, it makes it much easier to navigate. This will be version one, dark mode. Take the fill away, although the fill worked for that one. And finally we have the bottom. Version one color mode and take that fill away. And then maybe I want to order these so they are, as they are laid out on the canvas corresponding, easy to read, well organized. 

Tidying up the file

Perhaps I wanna make sure that these are all the same size. That's kind of good practice, isn't it? So right now this board is 76 by 41. If I just make that 70 by 40, round numbers are always a lot easier, I'll select all these boards and make them also 70 by 40 and try to just space them a little bit evenly. There we go. Now, I want to think about exporting those because I have to provide not just the Penpot file, but the exported SVGs. So how am I going to do that?

Exporting the icons

And I'll zoom into my version that I actually want to export and select each of the boards. And if I scroll down to the bottom of the design panel, I have the option to export my selection, and I'm going to export them as SVG. And then I can just hit export the two elements. And you can see here it's going to export menu 24 as a 24 by 24 pixel, SVG and menu 16 fill. This should say fill as well. It's just hidden behind the ellipsis, 16 by 16 pixel SVG and exports. And that will download both of those SVGs to my computer. 

And that is how I would complete the menu icon assignment. I'd love to see how you do yours and please let me know in the Penpot community.