Pixel-perfect icons for web design – tutorial | CharliMarieTV


A tutorial for making your icons pixel perfect for using online, and why that’s important! Please remember to subscribe http://bit.ly/1aE5UOT This is a walkthrough …



  1. I would like to hear about any considerations that you may need to account for when applying or creating icons for say 2x 3x 4x. Is it as simple as recreating or scaling the icons up (if they scale up perfectly to the pixel) for each size up or is there more to consider?

  2. Hi! I'm wondering what should we do when the icons don't have just horizontal and vertical edges? Very often icons consist of oblique lines. In that case should we just turn on the pixel visualization and drag it to see where to put the anchor dots?

  3. Well, I watched this video 2.5 times. The first time I tried to focus on what you said but instead I couldn't think of any thing else than how beautiful you are. I mean, heartbreaking beautiful. The second time I watched this is to actually listen carefully to what you said – and it was very productive! So thanks a lot for this. The last half was to just see again how beautiful you are:) Any how, hope I didn't crossed the line here. Keep it up, your videos are great!

  4. I too am a seasoned old-school graphic designer and your tutorials are making me feel motivated again. I watched several tonight and loved them all, however this one seems to speed up right around the part where you move the lines. I couldn't watch the numbers and see the results all at once 🙂 Very good stuff though! Thank you for all the great, clear advice.

  5. Does Sketch not have an 'Align to Pixel Grid' function, as in Illustrator? Looks like a lot of work in Sketch to modify it?! With Illustrator, there is a choice within the initial document setup for this perfect alignment. I always make sure this is checked from the start. Its amazing what difference a tiny shift can make to your design – even 1/2 a pixel!

  6. I'm so glad I came by your tutorials on web design. I'm an old school graphic designer who needs to know more about digital design. So about this Sketch application are you able to import the layout as layers into photoshop for the developer?

  7. You rock Charli! Keep it up! Could you do a video on how to use the different features of the vector tool? Maybe designing an app icon or a logo or something? I'm a developer and when I design websites for people, quite often they also want a new logo and I'm not a great graphic designer, I really don't want to tell my clients to check out fiverr because it'll make me look bad. I'm quite comfortable with Sketch but maybe you could show us how a brand-image could be part of the Sketch workflow?? Would be much appreciated 🙂

  8. As a student so far all I've used is Illustrator, and I had no idea why there was an option to view pixel view when it just made my shapes look blurry. Well now I know they were blurry because they weren't aligned properly. This was extremely educational!

  9. I don't know why, but watching this tutorial, I clearly see you speaking at conferences. At lots of conferences! 😜 You're very confident in front of the camera, and confident in general, speaking on a certain topic. And you're always very interesting to listen to, Charli!👈👍👏🏻 I look at you, and once again I see, that practice is the best teacher! And speaking of conferences, I am very sorry, that I won't be able to see you at Vidcon this year, because I won't be there. But one day, DEFINITELY!!! 😍 But I wish you to have a great time there! And to be closer to the subject of the video, this is a great tutorial! Keep up the great work! 👍😉 (the longest comment ever?? too many emojis? sorry 😅)

  10. I listened to your podcast the other day on coding – I'm sorry if I missed it, or if you've covered it before but how did you learn coding? Loving the podcasts.. really informative and helpful for a newb 🙂

  11. +1 Great video! I hope to see more videos like this. A topic I would love to see your take on is the use of (nested) symbols in webdesign. It's a feature I use a lot and I think others would really benefit of knowing a bit more about it and how powerful it is. Personally I use symbols a lot in headers/navs and blogs.