Jump to content
  • Village University

  • Design Your Own Scroll Saw Patterns

  • Lessons:
    User Interface Tour

    User Interface Tour

     

    Welcome back, folks. In this lesson, we're doing a tour of the user interface and talking about customizing our tools. There's a lot to cover, so let's get started.

    When you first launch GIMP, 2 or 3 (or more) windows will open. First, you have the main screen. This is the big gray box that holds your picture. A small window will also open with a bunch of icons. This is your Tool Box (If you don't see it, go to Windows>Toolbox). And finally, one or more windows will also open. These are dockable dialog boxes that contain various functions. We'll cover each of these in the sections below.

    One unique thing about GIMP is that it uses floating windows. (GIMP 2.8.6 now offers Single-Window Mode, which is similar to the way most Windows programs operate. You can turn on/off this mode at Windows>Single-Window Mode. For this tutorial, it would be easiest to have it turned off so your screen looks similar to mine.) If you notice, none of the screens maximize to cover your full screen. As PC users, we are used to an application to fill the whole screen. GIMP uses floating windows instead, very similar to the way Mac and Linux systems work. It is a little strange to get used to at first, but once you do, you'll learn to love this way of working. It allows you to move your tools around the screen and make a nice work area. The main window does have an option to maximize the screen, but I don't recommend it. The reason is that if you are working on an image with the main window maximized and you zoom in, all of a sudden your toolbox and dialog boxes start covering areas you want to work in. It really messes up your workflow. So, instead, re-size the main window to a size you're comfortable working with that still leaves room for your toolbox and dialog boxes.

     

    Main Screen

    mainWindow.jpgThe main screen functions much the same way as any other application. Across the top, you'll see the menu (File, Edit, Select, View, etc). This menu holds all of the functions within the program. Whenever I learn a new program, I'll go through the menus and see what options I have. Also, note where your options reside and how they are categorized. Once you figure out the organizational structure of the program, you shouldn't have too much trouble finding the options you need.

    Go ahead and open an image in your main window (File>Open). Once you find an image, you'll notice the picture opens so you can see the entire image. You may want to re-size the window so that you have plenty of room for your toolbox and dialog boxes.

    One of the first things you'll notice, other than your picture, is a ruler that goes across the top and left of your screen. When you move your mouse around the image, you'll see a black triangle that shows you where your mouse is relative to the ruler. In the lower-left corner of the window, you'll see the coordinates of your mouse as well. Notice it changes when you move your mouse. These coordinates correspond to the black arrows on the rulers. This is very handy when you're trying to dial in a specific measurement. Next to the coordinates, you'll find a drop-down box. It defaults to pixels (px) when you first launch the program. We won't be using pixels in this class. Instead, we'd rather work with inches. So click the drop-down box and choose inches (in). You'll notice the rulers change from pixel measurements to inches measurements. The coordinates also indicate inches. You'll find the ruler pretty handy when scaling images or aligning items. We'll be using the ruler in the next lesson when we create our work area.

    To the right of the measurement drop-down box (lower left), you'll see another drop-down box. This contains percentages of zoom. You can select whichever preset you'd like to see as much or as little detail as you'd like. This is convenient if you want to see the image at 100%. But I usually will use keyboard shortcuts to zoom in and out of the image as I'm working. I'll cover the keyboard shortcuts in the Navigating The Image section below.

    To the right of the zoom drop-down box, you'll see an area that contains text (hover over the image). These are tool-tips associated with whichever tool you have selected in the toolbox. It will give you basic information on how to use that tool.

    One last section on the bottom left corner. Next to the scroll bar, you'll see a box with a dotted outline. This is a painted mask tool. When you click this icon, your image turns red. From here, you can use your paintbrush to paint on a mask. A mask is a way to make a selection (we'll cover this in Lesson 5). Using white creates the mask, using black removes the mask. When you're done creating your mask, click the icon again and the red disappears. But in its place, you'll see the selection in which you painted on. Don't worry, we'll explain what this is later and how to use it.

    OK. Let's move over to the bottom right. In the corner, you'll find a triangle made up of dots. This is your window resizing tool. Click and drag the dotted triangle and you can re-size your window. Just above this is a cross with arrows. If you click that, a thumbnail image of your document pops up and you'll see a white box (you have to be zoomed in on your main image). Drag your mouse around this thumbnail and you'll notice you're panning your main image. This is an easy way to navigate your image without zooming back out.

    In the upper left corner, you'll see a little arrow above the side ruler. This is a flyout menu and is basically the same thing as the main menu across the top. Flyout menus are all over the place in GIMP, so be sure to look for them because they offer easier access to many of your options.

    Lastly, let's look at the top of the screen. You'll find a lot of text. The first part is the file name of the document you have open. You may also notice an asterisk before the file name. The asterisk indicates the image has changes made to it but has not been saved yet. Next to the file name, you see parenthesis. Inside you'll notice it says RGB. This is the color profile of the image. Basically, we use Red, Green, and Blue to make up our images. We'll be working with RGB exclusively. If you don't say RGB, you'll have to change the color profile so that it is RGB (Image>Mode>RGB). Next to RGB, you'll see how many layers your project contains. It really doesn't make much difference. The more layers you have, the larger the file is, but we won't worry about that. It's not that important. Right after the parenthesis, we'll see the resolution of the image. In the last couple of lessons, we talked about the importance of resolution. The resolution is noted in pixels. Then at the end of all of this is the program name...GIMP.

     

    Tool Box & Options

    options.jpgLet's look at the toolbox. As you can imagine, this is the section that holds all of the tools you have available. This can be customized to suit your own needs and we'll cover that in another section. Each icon indicates each tool. If you hold your mouse over the icon, a tool-tip will pop up and let you know what the tool is.

    Below the tools is a box on top of another box. This is your color selectors. By default, the boxes are black and white. The top box is the foreground color, and the bottom box is the background color. You can switch the order of these boxes by clicking the arrow button and the colors will swap places. If you have color in the boxes, you can go back to black and white by clicking the tiny black/white box icon to the bottom left of the color selector. To select a color, click either the foreground or background color. This will pop up a color selector. The foreground color is the color most of your tools will use (paintbrush, paint bucket, etc.). Some tools will use both foreground and background color (gradient fill).

    Below all of this is a dockable dialog area. By default, the tool options is docked. Whenever you click a tool, this window will change to offer you additional options for that particular tool. If you don't see the Tool Options dialog box, you can open the dialog box by going to Windows>Dockable-Dialogs>Tool Options. You can dock the dialog box to the tool palette (see Dockable Dialogs below). Take some time and look at the options each tool offers.

     

     

    Dockable Dialogs

    docking.jpgDialog boxes offer options for tools and provide other information. We'll be using several dialog boxes while creating our scroll saw patterns. You can find different dialog boxes under Windows>Dockable Dialogs. Just select the dialog box you wish to open and it will pop up the window. Since having a bunch of dialog boxes open at once will quickly clutter up the screen, GIMP lets you dock the dialog boxes so several windows can reside in one main window. Each docked dialog will be separated by a tab. So selecting one tab will display the options of that particular dialog box. Clicking the next tab will show that dialog box's options, etc. Docking a dialog box is easy. Just select the dialog box name in the window and drag it over to another dialog box. You'll notice a black outline around the information area of the other dialog box. That tells you that you're about to dock the dialog box into another. When you release the mouse button, your dialog box will have its own tab.

    To remove the dialog box from the dock, grab the dialog box tab icon and drag it outside the containing dialog box. This will create a lone dialog box. You can either dock it to another set of dialog boxes or close it altogether.

    You can re-arrange the tabs of a docked dialog box by grabbing the tab icon and drag it over to the top of another tab. This will put you selected tab in front of the tab you just hovered over.

    Another way to add tabs is to select the little triangle flyout menu on each set of dialog boxes. Choose Add Tab and that will give you the same list as Windows>Dockable Dialogs.

    Remember that the section below the toolbox is also a dockable area. I like having my brushes dialog box docked into this area.

    Here are some of the dialog boxes I like having open. Tool Options and Brushes are both docked under the toolbar. I like having Layers, Channels, Undo History in its own dock. You may also want the Tools dialog box docked somewhere too for convenience while you're learning (we'll talk about that in the next section)

     

     

    Customizing The Tool Box

    toolbox.jpgNow that we have our dialog boxes customized, let's customize our toolbox. As you can see we have a lot of tools at our disposal. As scroll saw pattern makers, we have very specific needs and really don't need all of the tools offered. So instead of having those tools clutter up our toolbox, we can display only the tools we want. To do this, we need to open up the Tools dialog box (Windows>Dockable Dialogs>Tools). To do this, go to Edit>Preferences then select the Toolbox section (Updated for GIMP 2.86). You'll see a list of all of the tools available. Next to each tool is an eye. This controls the visibility of that tool in your toolbox. Click a couple and watch your Toolbox. You'll see the tool appear or disappear. This is nice to remove tools you'll never use.

    Customize.jpgYou can also change the order of the tools by selecting the tool in the Tools dialog box and dragging it up or down. A little line will show you where you're putting the tool in relation to the other tools. Give this a try and watch your toolbox. You can immediately see that the tool order changes.

    So go through the tools and choose which ones you prefer. I'd recommend:  Rectangle Select, Ellipse Select, Free Select, Fuzzy Select, Scissors, Color Picker, Zoom, Measure, Move, Align, Crop, Rotate, Scale, Flip, Text, Bucket Fill, Blend, Eraser, Clone, Dodge/Burn. We won't use some of these options, but these are the tools that I might use when creating a scroll saw pattern. There are other tools you might want to turn on, namely the color manipulation tools. I don't have them turned on. I'll use the menu at the top of the screen instead. But feel free to turn those on if you want easy access.

     

     

     

    Navigating The Image

    We'll be zooming in and out of the image all of the time. So we'll need to find an easy way to navigate the image. There are a number of ways to do this. You can find the option that works best for you.

    Zooming in and out can be easily be done with the + and - keys. You can use the number pad + and - keys or the ones on the keyboard (remember, the plus on the keyboard is Shift and =). You can also use the magnifying glass in the toolbar. Drag a box around what you want to zoom in, or just click to zoom in incrementally. Holding the Ctrl and clicking will zoom out. You can also use the zoom pull-down menu on the bottom of the screen. I personally like using the roller wheel on my mouse. Ctrl+mouse wheel will either zoom in (roll-up) or out (roll down).

    Panning can be done with the scroll bars at the bottom and right of the image. Just drag those around and you'll easily pan the image. The dotted box in the lower right corner will also help you pan the image (see Main Screen section above). Hovering your mouse over the image and pressing the space bar will allow you to pan the image while dragging the mouse. You can use the roller wheel to pan the image up and down. Holding the shift button while using the mouse wheel will pan the image left and right. The method I prefer is using the button on the mouse roller wheel to pan around the image. Just click the button, then drag the mouse to pan the image.

     

    Keyboard Shortcuts

    Keyboard shortcuts will make your life much easier and the pattern-making process goes that much quicker. It is much easier to type 'P' to get the paintbrush as opposed to moving over to the toolbox and selecting the icon. We'll be working with black and white, so to switch the foreground color with the background color (black and white), we hit the 'X' key. That way we can paint the black areas then hit 'X' to switch from black to white and paint in the white areas.

    Keyboard.jpgIn the tool palette, you can hover over an icon to get a tooltip. A the end of the tool-tip, you'll find the shortcut key in bold. Hover over the paintbrush tool and you'll notice that the letter 'P' is the shortcut key. Hover over the other tools. What shortcut keys do you see?

    In the menu, you'll also see shortcut keys assigned to various functions. The shortcut is on the right of the option. For example, look in the Select menu. Next to None you'll see the shortcut as Shift+Ctrl+A. Pressing this combination of keys will deselect your mask from the image.

    You can create custom shortcut keys too. Go to Edit>Keyboard Shortcuts. This will pop up a dialog box that has all of the options within GIMP. Find the function you wish to assign. When you want to assign the shortcut, just click the shortcut column next to the function. Then press your combination of keys. If the combination of keys isn't used by any other function, your shortcut key will automatically be saved. If the shortcut keys you chose are being used by another function, it will pop up a warning message asking if you want to reassign the shortcut. You can say yes, or decide to select a different combination of keys.

    Customizing your shortcut keys is a very powerful option. I like to have my shortcut keys within reach of my left hand so I can switch between tools/functions with my left hand and still control the mouse with my right hand. This works well for me. Create a work area that works well for you.

    One last note. If you right-click on various icons or on the image itself, it often pops up additional options for that tool or section of the program.

     

     

    Assignments:

     

    • Browse through the menu options and tool options.
    • Customize your toolbox and dialog boxes.
    • Look at the shortcut keys. Reassign them if you prefer.
    • Practice navigating through an image. The better you get at it, the quicker you can work.

    I'm sure you have plenty of questions. Just fire away and I'll do my best to expand on some of these concepts. We're getting there! Next lesson we'll be importing our pictures and setting up our work area. Then we're off to the real pattern-making. smile.png




    User Feedback

    Recommended Comments

     Travis, I am now going to go through this lessons on portrait patterns and learn this. The trouble I am having here is the newer GIMP program that I really dislike and find it more difficult to understand and maneuver in. What is the GIMP program you are using in this instructions and is it  possible to download this version instead of the one they are offering now? If so what is the version you are using in your tutorial and how can I download it?

    Dick

    heppnerguy 

    Link to comment
    Share on other sites

    21 minutes ago, heppnerguy said:

     Travis, I am now going to go through this lessons on portrait patterns and learn this. The trouble I am having here is the newer GIMP program that I really dislike and find it more difficult to understand and maneuver in. What is the GIMP program you are using in this instructions and is it  possible to download this version instead of the one they are offering now? If so what is the version you are using in your tutorial and how can I download it?

    Dick

    heppnerguy 

    I believe this is GIMP 2.6.  You can download it off my Google Drive here:  https://drive.google.com/file/d/1T-_ULc2gNWmFMx5MIHTnTReM-4Vh1f4f/view?usp=sharing

    Link to comment
    Share on other sites



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


  •  

     

    Level Up Your Design Skills!

    Are you looking for more instruction beyond SSV's basic design tutorials?  Logos By Nick has some fantastic classes dedicated to GIMP and Inkscape.  

    These are advanced classes to teach you everything you need to know about GIMP and Inkscape.  While they are not specifically scroll saw or pattern-making related classes, they are in-depth tutorials on using all of the tools in these free programs.  Once you are done with the lessons, you'll have all the knowledge you need for all of your design needs. 

    Save even more with his Mega Bundle Deal, which includes GIMP, Inkscape, Illustrator, Affinity & more!

×
×
  • Create New...