Chrome Extensions for Designers - Speed up your workflow with these extensions | Rino De Boer | Skillshare

Chrome Extensions for Designers - Speed up your workflow with these extensions

Rino De Boer, Designer & Content creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (9m)
    • 1. The 8 best Chrome Extensions for Designers

      0:58
    • 2. Picking colors

      0:49
    • 3. Get to know the font

      1:00
    • 4. Change the style temporary

      1:10
    • 5. Generate Lorem Ipsum text

      0:51
    • 6. Full page screen captures

      1:49
    • 7. Download Website Images

      0:23
    • 8. Easy Screen recording extension

      0:58
    • 9. Bonus: Change your New Tab background

      0:54
    • 10. Do you want more?

      0:22

About This Class

He guys. Because I get a lot of questions about what extensions I use on Google Chrome, I thought why not make a short class about it. So here are the best Chrome Extensions / Plugins for designers, graphic designers, webdesigners. I hope you like this short class!

Rino,

Transcripts

1. The 8 best Chrome Extensions for Designers: in the short class, I'm going to show you the eight best growth extensions for designers. As a designer, we don't want to be blocked when we're creating where we're designing something. So, for example, where you're designing a website and you want to know a phone, did you see on a website where you want to know a collar? You can do that with chrome extensions. Or, for example, if you quickly want to generate a Laura Ipsum text or you want to make a screen guest of your screen. How do you do that? This M or is all possible with the free extensions that I'm gonna show you in this short class If you don't know me? My name is Reno. I'm designing myself, and I used these chrome extensions. When I'm working on clients websites or I'm creating these videos, I think they're very handy. So that's a little background about me at the shirt glasses divided into eight simple videos. For every extension there is a video, and then, after ever video, you can decide what you want to use the extension or not. So I hope to see you in the next video 2. Picking colors: All right. So the first extension that I want to show you is the color picker. Very easy to use extension and its gold color pick eye dropper. If you're on a website is, for example, my own portfolio website, and you want to know what the caller is off this button? So where you gonna do is you're gonna click on it, and I will just create a little color pick with a very big soon, which is really nice because sometimes you want to see the color of a little icon, for example, and you can really zoom in on a specific point. And then if you click somewhere, you're gonna get the hex code. And you could just copy this already. Archie, Peacoat and Andrews go to your adobe X'd and paste that collar wherever you want. So yeah, that's it. And by the way, all of the links for these extensions I will put them down in the description. So all of the links are dare 3. Get to know the font: all right, so let's go to number two and number two is called What's Fonds? It's kind of similar, but then you can see what kind of funds there is on the website. So if you if you hover over the phones, you can already see the main front. And then if you click on a specific funds, you will get a lot of information about death phones. So, for example, the weight, which is something you can use in a lot off page builders or in your coat or the size in pixels. The line heights, for example. And this is this is nice, the collar because number one, the color picker, is nice for buttons and backgrounds and all of that. But for text, some sometimes is heart to a bigger color because the text is so light or it's very small. So you will also solve that collar problem for text with Disa plugging over here. But I mainly uses to check what kind of phones website is using on this website as you can see his only months threats, and then, if you want to get out, you just press escape and then is gone. So Super NYSE super quick 4. Change the style temporary: Okay, so the next extension is also pretty nice. It's called Stell bought, and it has his little CSS Aiken over here. Sometimes you are on a website, and you just want to see how it looks when you make the text a little bit bigger or your James the Line heights on. This is a nice plug in for that, because if you click on the CIA's as I can over here, it needs to load a few seconds. And then if you click on open style Bart, you can click on any item on the websites of, for example, on this title text. And then, for example, just just press these phone size and press the up or down arrow to see how it looks. If the phone size is bigger over example, when it's from bolts to normal, or when it's italic or italic and bolts or maybe in caps, for example, because otherwise you would have to go in to inspect, inspect element and find the actual piece and then change it and you have to know sees as effort is Blufgan. You don't have to know that you can even change things like the background collar. Over here, you can change the borders and also the margins and dependents off a specific item. So it was much more convenient than going into inspect elements. 5. Generate Lorem Ipsum text: Okay, so the next extension is also super nice. Every designer uses a Florham Ipsum text that back in the day, I used to go to a website like this Laura Ipsum. And then I would copy a bit of text and gob. You'd like that and then go Teoh my Adobe X'd, for example, and then paste that Dex. But there's a faster way to do this, and that is Fiat display gin. But it is his big l lip Laura Ipsum generator it's got, and if you click, it will just create a big Laura Ipsen text with in the tap that you're working. You can even select worse, for example, So if you only want 20 boards, for example, that's really easy to Dio you just selected. You copy it and you can even click HTML over here, and it will create a B tech and also has a nice Aiken over here little detail of. But it's nice 6. Full page screen captures: Okay, so the next one is also super nice, and I used It's almost every day and it's gold. Full page screen capture. It's this Aiken. It's a camera I can. So if you're on a website, you can click on this Aiken, and it will give you this nice Pechman animation, and it will create a big screen shot off the whole website. And this works and most off the times for some reps eyes where there's a lot of animation, it doesn't work that well before most websites. It works really well, and you can create full page screen shells off a website, and then what I always do. I just copy the image, and I just go to my design. Phil and I based a bunch off websites that I like As for inspiration. So that's what I also did, for example, for my portfolio website just went to people again, generated a picture like this, you can save it, or you can copy it. You can go to your favorite designed to, and you could just base it over here, and then it generates a very big screen shots. You can re sites then, in this way you can just created a very nice art boards with a lot of difference about pages for your inspiration if you're designing a website, but it's also a good tool. Tutors download your whole website after it's made, because for some projects, of course, you don't creates the whole website in a tool like Adobe X'd you just start, for example, in WordPress, maybe declined has that much budget right. But after all, you just want to see if the whole website is in one style. It's an is a very massive. So what you can do is download all of your pages like this with this plug in and then baste them into Adobe X'd. Then you can clearly see like Oh, it's this. It's the design still consistent. So there's also one of the plug ins. It's also in the description 7. Download Website Images: The next one is image downloader and it has this little I can over here. And if you click on image downloader, it will generate links. Donald links for all off the individual images off a website. You can also select all of them and then click on downers and it will generate a zip fell that you can save on your computer. Also a pretty nice one. 8. Easy Screen recording extension: and then for number seven. Uh, this is also a super nice one, and it's called Loom. So this is a recording software, so if you click on Loom, it will open your camera. You need to sign in with Google one time, and then you can make a recording off your screen, including your your face cam witty camera. So that is really nice, because a lot of times you created something on the computer that you want to share your process. You want to show how it works, or you wanna explain to them how were press work, something that you could just make a quick little record. Over here, it's absolutely free to use. You can even only record your screen if you want your microphone audio, and then it will generate a link and you can even download it and then send it to your client or uploaded on YouTube and send a unlisted link, for example, as they were pretty nice extension. So, yeah, I use loom all the time. I love it, And let's continue with the last extension 9. Bonus: Change your New Tab background: and let's continue with the last extension, and that is called mo mentum. I get a lot of questions about this. How do you get this super nice starting screen when you open a new tab in Google? Chrome? Ah, lot of people see this inside of my videos, and then I get questions about it. It's gold mo mentum. It doesn't help you with design, but it just looks nice. And it's also good for when you're in a meeting, for example, on you open a new tab that you don't see the previous websites that you've opened. It's just a very clean thing to do. You can even type in something like a task in here, and it will give your reminder that you can check off. It has a new quote every day and sometimes is pretty cool to see you have some settings over here. But I've set it up like this. It doesn't make you a better designer, but it looks nice, and designers like things that look nice. Don't we 10. Do you want more?: so I hope you learn something new, and I hope you've insult a few of those extensions. And now, if you want to learn more about design, click on my profile. I have a few more skilled share classes, thinks about building a website in WordPress or creating a transparent header. You can find them at my profile, so thank you for watching. And maybe until next time.