Pixel-perfect icons for web design - tutorial | CharliMarieTV
Вставка
- Опубліковано 11 лип 2024
- A tutorial for making your icons pixel perfect for using online, and why that's important! Please remember to subscribe bit.ly/1aE5UOT
This is a walkthrough for an essential part of my web design process: making the icons I've created sit perfectly on the pixel grid so that they appear sharp and look great when they're used in the build. Design is all about the details and it's important to pay attention to things like this! I hope you like seeing my process. Give this video a thumbs up if you do :)
// LINKS
Sketch 101 tutorial: • Introduction to Sketch...
Download Sketch: www.sketchapp.com/
The Noun Project: thenounproject.com/
Geometric Coasters: • DIY geometric hexagon ...
-----------------------------------------------
// ENJOY MY VIDEOS?
My videos no longer have pre-roll ads because I think ads are annoying. That means you don't have to sit through ads, and it also means I don't earn anything from the content I put on UA-cam. If you want to support me and my channel the best thing you can do is order something from my online store! I make t-shirts and printed products and you're bound to find something you like :)
Check it out at: linernotekids.storenvy.com
-----------------------------------------------
// ABOUT ME
Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting videos every Saturday about design, fashion/beauty and DIYs and vlogs every Tuesday here on CharliMarieTV. Please subscribe and say hi in the comments so we can be friends :)
-----------------------------------------------
// MORE
Blog: www.charlimarie.com
Online apparel store: linernotekids.com/
Design portfolio: charlimarie.com/portfolio
Podcast: designlife.fm
// SOCIAL
Twitter: / charliprangley
Instagram: / charliprangley
Facebook: / charlimarietv
Snapchat: charlimarietv
My sister SmayJay's channel: / frangisamme
-----------------------------------------------
// MUSIC
Hackbeat by Kevin MacLeod is licensed under a Creative Commons Attribution licence (creativecommons.org/licenses/...)
Source: incompetech.com/music/royalty-...
Artist: incompetech.com/ - Навчання та стиль
this was very helpful! i'd love to know more about these small details of your design process :)
i love your youtube account, so helpful and its hard to find pure tutorials like these
+judeflyn I'm so glad you like them!
this is great very informative. Subbed and going to binge watch your vids.
Love your design tutorials Charlie! More sketch tutorials would be great :)
+amber jean yay glad you like them :)
LOVE your tutorials!
+Preeti Menon thank you! Glad you like them :)
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!
+GalaxyofSophie there you go! Glad I could help :)
Thank you so much! I used to think this was all my front-end developer's fault blurring my perfect icons :D Turns out, it's MINE!
haha hopefully now you'll be able to get them all sharp and shiny! :)
@@charlimarieTV i love your smile
Love it! Great job.
+Stewart Hines thanks for watching :)
The beauty of icons :)
+justBorja 👌👌
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.
thank you for the feedback! I'm always worried about the video getting too long/boring but when it's a tutorial I need to remember that it'll be whatever length it needs to be to teach properly! I'll remember your comment next time I'm editing one and make sure I don't speed up too much :)
Ahh you help me so much (Im working on a business) and I take classes for it and also classes on coding but your so much more helpful :)
that's so great! I'm also learning coding at the moment :)
yay
Thanks Marie. I am Freelancer, I m developer of Websites, Windows Software and Mobile Applications. This video
is really helpful to me.
+prathamesh shende glad it's useful!
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 😅)
+Anna Anna no such thing as too many emojis 🎉👌😝💜👊🏻 thanks so much for your kind words! I still struggle with feeling a bit like an imposter in tutorials, like I don't know enough to be teaching other people. But I'll build confidence over time I hope! Especially with lovely supportive people like you encouraging me :)
Great video! Really interesting :-)
Really good video!
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?
+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.
+Koen Westendorp symbols in sketch do you mean? I definitely need to get into the habit of using them more!
+CharliMarieTV I am planning on starting a blog this summer where I talk about design, Sketch, front-end dev, my opinions on random topics and products I love/dislike. I want to do this to improve my english writing skills and to record my thoughts, proces and tools I use to look at later and reflect on my improvements. In an article I'm currently working on I dig into my proces of using nested symbols in Sketch. I could send it (via twitter (@koen__w)) to you when It's ready for you to take a look at (and maybe give your opinions on).
love it. thank you! Would you say for achieving a rounded corner appearance it might be better to make the main icon lines 3 pixels wide?
not necessarily, it depends if you want your icon to have a thicker look overall!
i love your lighting here charli..
+Auie The Black Stilettos thanks! I filmed in the morning and think that made a big difference :)
ooh it does.. somehow it looks softer. :d love it
very interesting charli thank you
+555capricorn you're welcome :)
Thanks! How would you go about making animated icons? I've made some in After Effects and saved them in Photoshop as gifs, but is there another way?
+Nancy Palm another way could be to export them as an svg and animate them using CSS :)
Helpful! 💪
+Waqas Ahmed I'm so glad!
Thank you for making this video!!! 🙏🏻 Is there a way to do this in Illustrator/Photoshop or do you have to use sketch?
I'm not familiar with a similar way to do it in Illustrator, but in Photoshop you can definitely zoom in to see individual pixels and check everything is aligned! That's how I used to do it before I switched to Sketch :)
I know Illustrator does have a pixel preview under view > pixel preview.
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 :)
+Kevin Crisps glad you're liking the podcast! I mostly taught myself to code just though trying things and googling!
This is so interesting! I didn't even know this was a thing lol oh my ignorance...
+Lucia Montes haha don't feel ignorant! I wouldn't expect anyone who's not a designer to know about this! Even some designers don't 😆
nice detailing will keep in mind.
what software can be used for linux system since sketch software is not available.
which one would you recommend
+JYOTIRMOY GOSWAMI I don't know any design software for Linux sorry!
CharliMarieTV no issues... thanks for tutorial...
What is your opinion about the new upcoming subscription based payment for Sketch?
+Newecreator I think it's a better way of doing it than just paying monthly, and if it's what they need to support the business and keep making great software, then I'm all for it 👍🏻
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 :)
+bellsboiler yes for sure! Have written these ideas down :)
You are awesome.
+Ankit Rawat no you are! :)
What's your opinion of Inkscape? Particularly for stroke or line type icons
I've not used it sorry!
Great video! Can this be done on Illustrator or is it just Sketch?
+KFERNANDESIGN I haven't used illustrator for this before but I'm told there is a view pixels option! :)
+CharliMarieTV Thanks for you help, will check it out!
+CharliMarieTV Thanks for you help, will check it out!
another fantastic video! I'm gonna be filming in London soon, any places about filming or Internet that you subject I should go? thanks! - cull
+CullanAndTravis walk along southbank and you can do some great people watching!
+CharliMarieTV thanks! :D
Useful video! What about "Material Design Icons" used as a webfont? Are they pixel perfect?
+Kowal web fonts generally aren't pixel perfect because of the way you can increase or decrease the size. I like to create my icons at the size they will appear in the browser!
However i love your videos. This is a nice peek. I saw you used sketch. Is this a software to create prototipes. Can i code something in it for a web page? can i add javascripts objetcs?
+OCTAVIO JOSE Arrieche Love Sketch! it's design software. You can export the CSS attributes of something you've designed in it, but it's not code-based. I use it in conjunction with invision for prototypes.
thanks for your answer. i would like to exchange with you experiences in web design and ides. thank you.
Спасибо))
FYI you can simply select "Round to full pixels edges" while editing the path to avoid misplaced points in between pixels. it will be faster than manually edit each point :)
thanks for the tip! Generally I use this technique when editing icons I've dropped in from The Noun Project or similar.
Makes sense, unfortunately sketch still has a long path ahead until we can work and export clean svg like illustrator, but we'll get there.
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!
+Stella Q it does! But if you drag in a premade icon from Noun Project or something you need to manually align it so it's a useful skill to have :)
+CharliMarieTV Fair call! Cheers 🙋
In edit mode, select the option, "Round: full pixel" in the editing panel that is on the right, that works for me
+Nicolás Correa Hi, You must be referring to Sketch? (I know that may sound like a dumb question but as I am still on Illustrator CS5 I was really just checking on whether its a feature within Ill CC or if indeed, you meant Sketch).
Yes! I mean Sketch, not long ago also had the same doubts, and now I do not change to Sketch for anything in which Interfaces design, only occupied illustrator only for the Illustrations haha.
Any questions, just ask me, regards
Ugh when is sketch coming out for PC users!!?
+soakedbootcuts i don't think it ever will unfortunately because it makes use of a lot of integrated Mac things like color and typography management.
remind me of flash back in the days...
oh gosh no not at all!
hi
charlie got a better camera
nope still the same camera! haha
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!
lol thanks for the compliment but I prefer to focus on my design skills! 🙌
Why do some men feel the need to comment on a woman's looks when she's clearly teaching something that has nothing to do with her looks?? It's creepy.