In this lesson video, we are going to discuss the basics of creating user interface. After we have a document opened, by default, we will have something like this. If for some reason your UI is not like what I have here, then you need to refer it back to the default by going to the workspace pull down list in here, and then choose default. Let's just start with greatest default layout. So we have exactly the same UI layout to begin with. Okay, the top area is called the menu, which is pretty standard in almost all desktop software in the world.

Usually, it is start with the File menu at the left and ends up with the help menu at the right side. Below it, we have the toolbar area. In this area, we can see common commands such as New File, Open, save, and then undo and redo. We also have brush settings for the currently Select brush. At the left side, we can see a bunch of tool icons. This is called the toolbox.

So again, this one is the toolbar, and this one is the toolbox. Within the toolbox, we can access different type of tools that creator has to offer. At the center, we can see the view, which is the largest area of the UI. Essentially, a view is like a window where we can see our image documents, we can have multiple views in a single Krita session. So for example, if I click this, create a new document button in here, and then just click the Create button down here. We now have two documents opened, we can switch between document views by clicking on it up here.

Down here we have the status bar where we can see the name of the active brush, the documents, settings and the size of it. And we also have this document zooms slider. Now if you don't see this status bar, you may need to go to the View menu and click on this check box show status bar in here. At the right side, we can see so for all Dockers advanced color selector blocker. They use Docker, and brush presets Docker. Now in other software, these individual components might be called Windows or panels or palette, but in Krita, it is called Dockers.

Okay, now you may already notice that we do have a menu up here called window. So what is the difference between window and dock or then to make things simple, the term window in Krita is actually another session of Krita. We can see this in action. If we go to Window menu up here, and then choose new window. Now, we actually have two instances of Krita application running So yes, we can have multiple Krita running at the same time. Okay, so that is window.

And the term Dockers in critters UI are essentially these individual UI components that can be arranged as we like. And each of these components feature a specific task. Advanced color selector. Docker, for example, is used to select collars. Layers Docker is for managing layers, and brush presets Docker is for accessing and tagging brushes. There are many other Dockers in Krita and we will cover some of them eventually, inshallah, we can customize critters UI by simply hiding, showing and moving around the Dockers.

There are several ways to show and hide the Dockers. The quick way to show and hide the Dockers is by right clicking on the toolbar. By doing that Krita will display all of the Dockers available. The ones that have a checkbox means that it is currently active or shown. So for example, we can hide the advanced color selector darker by clicking on its name in here. To show it again, we can do the exact thing because it is essentially a toggle function.

So right click again and then choose advanced color selector again, we can see the doctor will show up again in here. Another way to hide the Dockers is to click the Close button exists on each of the darker. For example, you can see in the advanced color selector darker, we have this small close button. If we click on it, the darker will be closed. To show it again, we can use the right click method on the toolbar like before, or another alternative is to go to Settings menu and then Dockers and click on the Advanced color selector option in here. Okay, now Dockers can be grouped and arranged like tab like this, it can also be moved around to other area of the UI.

But in order to do that the doctor needs to be undock. First. It needs to be in floating mode. This what makes krytus ui concept a bit different from most software is that when you try to drag a doctor like this, it won't go into floating mode automatically. Okay, to make it float, we can click this small button at the left side of the close button. As we can see, this advanced color selected darker is now in floating mode.

And in this mode, we can place this darker on the top area, for example, or on the left area, or bottom area, etc. Let's bring this back to the right top area like this. And this will make it grouped with these two other Dockers, okay, what I want to change now in The UI is removing these two cores, the Brush Preset and the Brush Preset history. I need to do this because I'm recording this video in 720 pixel resolution, which makes the UI feels too crowded. Also, because this brush presets darker in here is kind of redundant, as we already have Brush Preset up here. So let's close this Brush Preset darker by clicking on the close button.

And we also don't need to use the Brush Preset history darker as we are going to use the pop up palette later for quickly accessing brush presets. So let's close this one also by clicking on the close button in here. Next, we can adjust the size of the color selector darker by clicking and dragging this dotted line in here up and down. This is so we can be color easier later. Okay, now after we customize the why and we like what We have currently, we can save the UI layout so we can easily load it later. Ui layouts are called workspace in Krita.

To save the workspace, you can click on this pulldown list up here. You can give the workspace a name in here, then click the Save button on a mine weedy but you can name yours with your own name or any custom name you like. Then click this Save button later or custom workspace name will show up in here in this list. This way, we can switch between different workspaces easier. Okay. Now, you may notice that down here we also have another preset manager for window layout.

Mostly you need this if you are working with multiple windows of Krita. For example, if you have multi monitor setup, we are not going to use this because we'll be using only a single window throughout the course but essentially It works like the workspace preset manager up here.