FREELessons: 14Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Setting Up KDE for Web Design Workflows

In the previous lesson, we talked about the option of using a Linux distro with the KDE desktop environment. In this lesson, we’ll go over how to set up KDE as an awesome web design environment, with a monochrome UI to prevent color pollution, a powerful file manager, an easy access inline terminal, titlebar actions, hot corners, and a bunch more super useful features.

Related Links

2.3 Setting Up KDE for Web Design Workflows

Hey welcome back to Linux for web design. In the video after this, we're gonna actually get into installing the right software to use for web design on Linux. But before we do that, I just wanna take some time to show you through one of the desktop environments for Linux called KDE. Now even though this isn't directly related to web design specific tools, I think it's still worth checking out. Because for me, one of the things that makes Linux such a great environment for doing web design is the ability to really streamline all of your workspace and allow you to move really quickly between Windows, to work with the terminal easier. And to get your colors all set up so that they're working well with your design software. So, if you're not really interested in this, feel free to go ahead and skip to the next lesson. Otherwise, what I'm gonna do is take you through how I set up my own desktop environment. Now you can do what I do, or you can take what you see here, go into the type of settings and configurations that you see here and just do anything you want to set up your own workspace the way you like it. So right now, what you're seeing here is just a second profile that I've created on my Ubuntu setup, which is Ubuntu with KDE over the top. And this is what KDE looks like on this system out of the box. And we're gonna turn it into how I have my main profile looking. Right now, this is a bit Windows like. We have a task bar along the bottom. You can see, I've got my little recording software running here. And there's sort of a start menu type of a thing over here. The first thing I'm gonna do is clear out this desktop. I like to have a blank desktop. So I'm just going to delete both of those things. And I'm gonna get rid of this little widget up here, because you can get most of the same options that gives you by just right clicking on the desktop. So I'm going to Configure Desktop, and I'm gonna go to Tweaks, and I'm going to get rid of that little toolbox up here. So now that's gone, and the desktop is clear. Now the next thing that I wanna do is change the wallpaper. I can use one of the ones that's already here or if I want, I can add some extras. Now I actually really love the desktop images that come with elementary OS. And you can get all of these of GitHub repo. They were really, really nice. I'm gonna grab this one, and I'm gonna set that as my desktop wallpaper. I'm gonna move through this fairily quickly cuz there's quite a lot that you could do with KDE. So I'm gonna through it pretty fast so we don't get bogged down. Now, what I'm gonna do is change this over from a Start menu type of the thing to a full screen dashboard. So here, we have an application launcher that we can switch out for a different kind. So I'm gonna right-click on it and choose alternatives. And I'm gonna switch it over to the full-screen application dashboard. Now if I hit the Windows key on my keyboard, I have a full-screen app launcher. I can just start typing to find whatever program I wanna run. So let's say Firefox. And there it is. And then I can just press enter to run that program. And then I can also right-click on it, add it to favorites, will show up here. Or I can go through all of my software by category. From here, we can also log out, reboot, shut down and what have you. Next, I'm gonna set up Hot Corners, and this is one of the things that allows me to move around my system really quickly. So you can set things up so that when you push your mouse up into a corner, or onto the edge of your screen, you can trigger a specified action. And what I want is when I push my mouse up into the top left, I open up this launcher. Now that makes it super quick and easy to find and run programs. So to do that, I'm gonna open up the System Settings. So if you don't see those on your application dashboard, just search for system, and it'll come up there. We're gonna go into Desktop Behavior > Screen Edges. Now here, I can attach an action to any edge of my screen. The top left I'm gonna set to application Launcher. And I'm actually gonna remove this action from the top right, because that's where I like to have my close button and my minify and maximize buttons. And if you have a hot corner up there, you're gonna always be accidentally triggering it. So we'll just apply that and I'll show you the effect. So there now pushing up in the top left, opens our application launcher and doing it again closes it down. I'm also going to attach actions to the bottom left corner and the bottom right. And right now, I have two virtual desktops running. Now you can actually use virtual desktops in Mac or in Windows. They’re here in Linux as well and it's a really great system. Right now I've got OBS, my recording software, is running on a second desktop. This is a little switcher that I have to toggle between my currently open virtual desktops. I can also just put my mouse anywhere on a desktop that isn't over the top of a program window and I can scroll, and I can easily just move in between these open desktops. But I also want to be able to push my mouse down in the bottom right corner and see all of my desktops. So I'm gonna click and choose desktop grid. So now, I get the ability to easily browse my desktops. I can add new desktops or I can remove unused desktops. And now for the bottom left corner, I wanna add the ability to minimize all of my currently open windows. If you're anything like me and probably every other web designer, when you're working on an object you have a ton of windows open at once. And sometimes, you just need to clear that all away so that you can do something on the desktop, for example. By default, there isn't an option in this list to minimize all the currently visible windows. So what we're actually gonna do is activate a custom script. So we're gonna go into Window Management and Kwin script. KWin is the library that controls all of your windows in KDE. And I'm just gonna check this box here, next to Minimize All. And that just activates that Minimize All as an option. So I'm gonna apply that, and then go back into Desktop Behavior and Screen Edges, and now in our list we have, MinimizeAll. So let's say we've got a couple of programs open. And I need to get them all out of the way. Now I can just push my mouse down in the bottom left corner, oops, forgot to apply it. Now, I can just push my mouse down in the bottom left corner. Everything minimizes, and then if I wanna bring them back again, I just push down on that bottom left corner as well. So you can see already, just with that scrolling, and these hot corners, it's already very fast and streamlined to move around this system and we've only just got started. And you might have seen something there, we have this little blue globe when you're approaching the corner. I personally don't really like that, so I remove that. In desktop effects, you have full control over all the visual effects that take place in your desktop environment. So to get rid of that little blue glow, all we have to do is uncheck screen edge. And you can get in here and mess around with all these settings. This is kind of a web designer's delight actually getting in here and playing around with all the different visuals, apply that. And now when we approach the corner, there's no longer a blue glow. I'm just gonna shut down these extra programs. All right, next up, we're gonna set up some title bar actions, so I can control what happens to my window when I click on the title bar, or scroll on the title bar, for example. If ever you're not exactly sure where a setting is, you can go up into this search bar and I wanna find the title bar settings. So I am just going to search for title bar and there we go. That's isolated this window management section for us. So we're gonna go in here, and here on a second tab is our title bar actions. So you've got a bunch of different settings here that you can use to control how you're going to interact with your windows. I like double-clicking on the title bar to minimize the window. And my favorite thing is setting the wheel event to maximize and restore. I'm just gonna apply that. So now if I put my mouse over the top of this title bar and I scroll, the window fully maximizes. And to bring it back down, I just scroll the other way. Now that's just a little thing, but when you're doing something like working on a responsive design and you have a window that's shrunk down to a narrow width and then you want to quickly look at it full size. That's just one of those things, it just takes seconds out of each individual action that you need to do throughout the day. Now I'm gonna make some modifications to these buttons up here in the Title bar. Now, pretty much when you're on Windows, all your buttons are on the right whether you like it or not, and when you're on Mac, all your buttons are on the left, whether you like it or not. But with something, like KDE you can set things up however you please. So we are gonna go back again and clear the search. Gonna go into Application Style > Window Decorations, and then choose Buttons. So for example, I'm gonna take this contextual help button and I'm gonna drag it over to the left side. And if I want, I can put all these buttons on the left side. I can swap them around, have them however I choose. And I'm also gonna add this button here, Keep Above. And that's something I find really useful. I'll just apply that so I can show you how it works. So if we start Firefox, let's say, for example, that I really want to be able to keep paying attention to this window while I'm doing something in Firefox. Then I can click this button to activate Keep Above. And now, even with Firefox maximized and in focus, this window is gonna stay on top. I find that is really useful, for example, when you want to, say, have a YouTube video up here that you're watching, say a tutorial for example, while you're following the instructions over here in the main window of the software that you're trying to learn. Right, so I"ll just turn that off for you and for now we'll just close down Firefox. And the next thing I'm gonna show you is how to set up a dark monochrome UI. I personally like working with a dark desktop, just less eye strain. But I need that to be monochrome so I don't have color pollution coming in to any design software that I'm using. So gonna go back to All Settings > WorkSpace Theme and I'm gonna choose Breeze Dark. Now, this is a look and feel theme that changes a whole bunch of stuff. It changes your color scheme and your cursor and your icons. So I'm gonna hit Apply. So then right away everything has gone dark, but this default dark color scheme has a tinge of blue in it, so that wasn't quite right for me. But like pretty much everything in KDE, and in most of Linux platforms, if you don't like it you can change it. So we'll go back into All Settings. I'm gonna choose Colors. Now these are the color schemes that control most of how your desktop looks. So say for example, I chose this color scheme and applied it. Then you can see the difference that that's made. So if you want to take an existing color scheme and modify it, all you have to do is select it, press Edit Scheme. Go into Colors, and here you've got a whole bunch of color pickers that you can use. So this is like themeing your whole desktop environment, it's awesome. So I'm just gonna close out of that for now. Because what you can also do, once you've made your own color scheme that you really like, you can upload it into the community repositories, and then you can access it again on any new system. So if you click get new scheme, I took that default.colorscheme and I just desaturated all of the colors. So, I called it unsaturated, so if we search for that, you can install it. And now there it is, and I can apply it. And now we've got our dark unsaturated color scheme, all monochrome. So now I'm just gonna set another couple of things to go with the unsaturated color scheme. In desktop theme I'm gonna switch to Breeze. So this is gonna make this look a bit more in keeping the color scheme so everything is nice and consistent. In the cursor theme, I'm gonna switch to a light colored cursor so we have a bit of contrast. So now we've got our white cursor. So then there's one more thing to finalize our monochrome color scheme and that is getting our terminal to match. The terminal in KDE is called console, so I'm gonna run that. And I'm just gonna move this out of the way. If we go into Settings > Edit Current Profile, we have an Appearance tab. And here, you can choose any color scheme that you want and you can also edit these color schemes in the same way if you wanna create something custom of your own. So this to go with the rest of my system, I like to use dark pastels. So I'm gonna apply that. And now we have a really nice consistent color scheme throughout all of our windows. All right, now let me show you through a couple of the default applications in KDE that make working with web design really awesome. So the first one I wanna show you is Dolphin, the file manager, which is fantastic. So you've got three views that you can work with here, you have a thumbnail view, a list view and a tree view. It's fairly easy to switch between those. And with this little dragger here you can also change the size of the icons that you're looking at. There's also this button up here, which is Preview. So if we go into the pictures folder, by default when Preview is off, you'll just see that static thumbnail. Or if you turn on Preview, now you get an actual preview of all the files. You can zoom those up quite large and this makes going through your files to try to find the appropriate image you want to put into a web deign, it makes it so much quicker and easier. So just turn that off for now. Now this is not all you have to work with though. If you right-click here and she has configured toolbars. Then you can also add all of these extra buttons to your file explorer if you like as well. One of the things I most love is the ability to open a terminal inline, so I am going to add the Terminal button here. And I am also gonna add the Open Terminal button. So now if I hit this first one, I get a terminal right here inline in a file manager, and this is so helpful. So for example, say there is a project that I want to work with on GitHub like a jQuery slider or something for example. I can browse into the folder that I wanna have that jQuery library cloned into and then I can just type that git clone and put in the address of the Repo and it will be put directly into the correct folder. And then if I need to do something else, and I don't wanna keep this inline terminal here, then I can click Open Terminal. So that's great for things like starting a gulp or Grunt task runner for example. Then we've also got a New Tab button. So now, we can have multiple tabs all pointing at different locations if we want. We have a Hidden Files button. So let me just go into a folder that has some hidden files in it. Scroll down and when I hit Hidden Files, you can see that it's changed the files that I'm viewing here and I can just toggle that on and off. So for example, if you need to work on an HD access file and it makes it very easy to show or hide it on demand. And speaking of easy access to terminals, another thing that's really useful is setting up a keyboard shortcut to open up your terminal whenever you need it. So I'm gonna go into Shortcuts > Custom Shortcuts. And here, I'm gonna select New > Global Shortcut > Command. And I'm gonna call this Terminal. Now I hit the Trigger tab here. And I'm gonna set the keyboard shortcut Ctrl+Alt+T. And then in the Action, I'm just gonna type in the name of the paragraph which is console, and Apply. Now when I hit Ctr;+Alt+T, there's my terminal. So, you can set up short cuts for opening a terminal in Mac and Windows, but this is a really straight forward method for doing it. And of course, you can set up as many keyboard short cuts as you want to open up any application that you often use. All right, so that's everything that I wanted to show you about working with KDE. In the next video, we're gonna start going through the actual process of installing software into your Linux machine that you need to work with web design. From here, we're actually gonna be switching over to elementary OS. Even though I've just been singing the praises of KDE, I pretty much have my KDE based system already set up with all the software that I need installed. So what I'm gonna do is show you through this whole process on a different operating system on a fairly fresh install of elementary OS instead. Then you get to see some other desktop environments and versions of Linux as well so we'll get a bit of variety in there. So we're gonna start with what every web designer needs more than any other piece of software and that is browsers. So a couple of the browsers that you need for testing, browsers that have enhanced privacy and security. For those of you that are getting into Linux because you want more privacy and security. And while we're at it, we're also going to cover a couple of alternative search engines that you can use in these browsers, again, for enhanced privacy. So we'll go through all that in the next video. I'll see you there.

Back to the top