GIMP tutorial: Final Product in GIMP:

Transcription

1 Disclaimer: There are many, many ways to approach web design. This tutorial is neither the most cutting-edge nor most efficient. Instead, this tutorial is set-up to show you as many functions in GIMP and Sea Monkey without being unnecessarily overwhelming. GIMP is available for free at and Sea Monkey, also free, is found at Save early and save often. Please me with comments or concerns GIMP tutorial: A good way to begin a new web design project is by sketching thumbnails of your page design. Recall the lessons from class where we analyzed components of web and document design. In this example I model the portfolio page seen below on the structure of a very basic approach to web design and usability. It is a classic design that works well for a beginning a portfolio page. Final Product in GIMP: The page is 800 pixels wide by 600 pixels high. The light blue, dashed lines that you see in the picture are not part of the final design but guides that help us with the layout. Let s launch GIMP and get started GIMP Tutorial 1

2 Tool Bar: When GIMP launches you will see the Tool Bar below. The design above only requires basic knowledge of these tools. We can cover others if there is time/interest but these will get you through. GIMP Tutorial 2

3 Getting Started: Click on the File menu in the upper-left corner of the Tool Bar. Select New from the options. This menu appears: Since we are designing for 800 x 600 pixels make sure that the Width and Height are correct and that they are measured in Pixels not Inches or other measurements. Leave all of the other settings alone. To make additional changes you will need to click on the Advanced Options plus-sign. Click OK. GIMP Tutorial 3

4 The View Menu for showing Rulers and other adjustments: When your new page loads the Rulers around the boarder of the page may or may not be showing as in the partial screenshot below. If they are NOT showing, click on the View menu and select Show Rulers. Also, select Snap to Canvas Edges as below. GIMP Tutorial 4

5 Guides: The light blue, dashed lines mentioned on page 1 are guides that we can manually put in place to make certain that we are precise with our layout. Place your cursor over the top or horizontal ruler and click-hold-and-drag downward (it doesn t matter what tool you have selected). A dark line should appear that you can place anywhere on your new page. Line-up the guide with the 100 pixel mark on the vertical ruler and release the mouse button. Repeat the process with the vertical ruler but this time line-up the guide with the 100 pixel mark from the horizontal ruler. A partial screen shot of the final product is below. GIMP Tutorial 5

6 Zoom Tool & Double-Checking the Guides: Even though we are viewing our canvas at actual size or 100% it can be a challenge to place the guides exactly on the 100 pixel marks. Select the Zoom Tool from the Tool Bar. Click several times in the area where your guides intersect at the top left of the screen to zoom-in. Verify that your horizontal and vertical guides are both on the 100 pixel marks. If they are not, select the Move Tool to Pick a Layer or Guide. and make sure that its property value is set Use the Move Tool to click-hold-and-drag the guide to the correct position. Return your canvas viewing setting to 100% by using the selection box in the lower left corner of the screen (pictured on page 4). GIMP Tutorial 6

7 Layer Dialog: Layers are a critical feature in GIMP (as well as applications like Photoshop) because they allow us to keep the different design elements we create separate from each other. This allows us to change, say, the color of our name in this design without altering the rest of image. Think of layers as stacked pieces of transparent paper where the order of the stack matters. That is, graphics on the top layer can obscure graphics on the layers below. First we need to make sure that the layer dialog box is showing. From the File menu in the Tool Bar select Dialogs and then find the Layers selection. GIMP Tutorial 7

8 Layer Dialog (continued): The layer dialog on the left (below) is what you see now when you open the layer dialog. We have only just created a new page in GIMP. There is only one layer and it is labeled as Background. The layer dialog on the right is a screen shot from the final product seen on page 1. Each layer contains a different graphical element from the design. Again, think of the layers as individual sheets of transparent paper stacked on top of one another. GIMP lets you control each design element separately so we can make modifications to the design as we go. Type or text layers are automatically created for us when we use the Text Tool. Other design elements such as the red rectangle side, and the lines layer need to be created manually. Let s use the Text Tool to add our name to the canvas. GIMP Tutorial 8

9 Text Tool: Select a type face you like and increase the type size. GIMP Tutorial 9

10 Text Tool Text Editor: Once you click on the canvas with the text tool GIMP s Text Editor appears. As you enter your name it will display on your canvas. Close the Text Editor when you are finished. You can re-open it by double-clicking on the type layer in the layer dialog box. New Layer Added in the Layer Dialog: GIMP Tutorial 10

11 Re-Position Text Layer: With the text layer selected from the Layer Dialog box, use the Move Tool to position your name layer where you want it on your canvas. I find it easier to switch the Move Tool s setting from Pick a layer or guide to Move the active layer. In order for this to work you must have your name or type layer selected in the dialog box. At any point in the design process you can come back to this text layer by double-clicking on the T in the Layer Dialog and the Text Editor will re-activate. GIMP Tutorial 11

12 Foreground and Background Color Palette/Swatches: Click on your Foreground color swatch in the Tool Bar and you will see the Change Foreground Color as below: Manually move the arrows up and down the color bar (middle or top) to find the color you want. Click OK. GIMP Tutorial 12

13 Add a Layer: Before using the Rectangular Selection Tool, (next step) manually create a new layer for the red rectangle you are about to create at the top of the page. Inside of the Layer Dialog box, click the Create New Layer icon. When the New Layer box appears, name the layer Red Rectangle Top or something else you will remember and click OK.. GIMP Tutorial 13

14 Rectangle Selection Tool: Now we are getting ready to draw the red rectangle on the canvas but first we need to select the area we want to draw on. Select the Rectangle Selection Tool from the Tool Bar and set the cross hairs in the upper left corner of the canvas. Click-hold-and drag over the area you wish to select using your guides. You should feel the Rectangle Selection Tool snap to the guides when you get close enough to them. If this does not occur, see page 4 on how to use the View menu and the Snap To settings. When you release the Selection Tool, confirm that the area you have selected is in fact 800 x 100 by looking at the properties below the Tool Bar. GIMP Tutorial 14

15 Blend Tool: Select the Blend Tool from the Tool bar. This tool creates a gradient beginning with your foreground color and blends into your background color. BEFORE you use the tool double-check to make sure that the layer you just created (Red Rectangle Top) is 1) selected and 2) below your type or name layer. If it is not, click, hold, and drag the layer below the type layer in the Layer Dialog box. To use the tool, simply click where you want the blend to begin (for this example toward the left of your selected area), hold, and drag. As you drag you ll see a line form from your beginning point. Keep the line straight and release the mouse button where you want the gradient to end (become white). The result is shown below: GIMP Tutorial 15

16 Add Monogram Letter: Once again select the Text Tool and place the cursor over the red rectangle. Click to activate the Text Editor and type your initial. If your type is still set to the same color as the color of the rectangle (in this case red) you will need to change the color to white and possibly the font and size. To change the font color, face, or size, simply change the Text Tool properties showing below the Tool Bar. I changed to a script font (Bickham Script Pro Bold) for this example. GIMP Tutorial 16

17 Add Drop Shadow to Monogram Letter: GIMP comes pre-loaded with a number of filters that allow you to add stylistic attributes and designs to your graphics and text. With the new letter (in this case B ) text layer selected in the Layer Dialog box, find the Filters menu at the top of your canvas page. Find the Light and Shadow menu and then the Drop Shadow sub menu. Feel free to experiment with the drop shadow settings (box show below) or just click OK. Notice that GIMP automatically adds another layer below your letter to accommodate the shadow. GIMP Tutorial 17

18 Add Menus and Guides for Menus: Once again activate the Text Tool. Place the cursor underneath the monogram initial and click. Type in the menu items you wish to have in your web site in the Text Editor and hit the Return key after each. Use the Text Tool properties to make proper adjustments to font style and color: Once you have the buttons in place, drag guides between all of the buttons. You do not have to worry about the exact height of the guides. GIMP Tutorial 18

19 Adding the Vertical Blend behind the Menu: Just as we did on pages 14 and 15, we are going to use the Rectangle Selection Tool and the Blend Tool to create a red to white gradient. First, add a new layer in the Layer Dialog box and name it (here it is named Red Rectangle Side ). Remember to make sure that this layer is BELOW the text layer for you menus otherwise your gradient will cover that text. Next, use the Rectangle Selection Tool to encompass the area in which you wish to draw the gradient. Select the Blend Tool and click, hold, and drag it over the appropriate area. The result should appear as below. GIMP Tutorial 19

20 Adding Horizontal and Vertical Lines: Create a new layer and name it Lines. Select the Rectangle Selection Tool and place the cross-hairs over your original guides that intersect at 100 x 100 pixels. Click, hold, and drag with the tool toward the lower-right of the canvas until your selected area extends past your name and your menu. GIMP Tutorial 20

21 Stroke or Paint the Rectangle selection: First, change your foreground color to something darker (I used black in this example to contrast with the red). The stroke function in GIMP will default to using the foreground color. Once again make sure that you have the appropriate layer selected. Under the Edit menu at the top of the canvas screen select Stroke Selection and you will see this window: The width represents how thick the line will be. For this example I selected 3 pixels and clicked Stroke. GIMP Tutorial 21

22 Erasing Lines: After hitting OK the rectangle selection should be traced or stroked by a 3 pixel black line as below. To de-activate the Rectangle Selection Tool simply click anywhere outside of the canvas. Select the Eraser Tool from the Tool Bar and notice its properties. GIMP Tutorial 22

23 Erasing Lines (continued): Select a large Fuzzy brush and increase the scale for a bigger brush. GIMP Tutorial 23

24 Erasing Lines (continued): Keep clicking with the erase tool over your lines to create the desired effect. Remember that you can Undo your actions with the Edit menu. The first option Undo. Remember that the Erase Tool will only work on the layer that is selected in the Layer Dialog box. GIMP Tutorial 24

25 Save! It is always a good idea to save your work as you go. Select the File menu and then Save. Decide on the folder or directory where you want to build your website. You may want to create a new directory for this. As with most file types for the web, your life will be much easier if you do NOT use spaces when naming any folder or file. Alternate suggestions include: myfolder, my-folder, my.folder. In GIMP - you will be asked to name the file so pick something intuitive. Notice that the file format says.xcf which is GIMP s native format that allows you keep all of your layers for editing later. Leave this setting. Other formats, jpg and gif for example, will flatten and compress the image and you will not be able to make edits to the layers. GIMP Tutorial 25

26 Cropping and Saving Now we must take the image apart and save individual pieces as compressed files that will render in a web browser. We will then put those images back together in Sea Monkey (next tutotrial). We are going to be exporting or saving these parts as JPGs. Using the Rectangular Selection Tool, select the top red rectangle area and your name by starting in the upper-left corner of the image. You will be capturing the top portion of the graphic that is 800 pixels wide and 100 pixels high. Use the guides and the snap to function to make certain you have that area selected as below: Select the Image menu and then find Crop to Selection. Your graphic will now be reduced to the 800 by 100 area you selected. (Don t worry, we can get the rest of the graphic to return.) GIMP Tutorial 26

27 Cropping and Saving (continued): Now you are ready to Save. Under the File menu select Save a Copy. A new screen appears asking you to select the file where you wish to save the image. It is up to you to name and change the extension of this file. Locate an existing file on your computer or create a new one with the Create Folder button. GIMP Tutorial 27

28 Cropping and Saving (continued): After you have named your file and appended a.jpg extension, GIMP will inform you that JPGs do not support transparency or the layers you ve created. As the layers are not usable in a web browser this is fine. GIMP asks you if you wish to export the image as a JPG. Click export. The next window asks you for the quality of the JPG you are exporting. I usually leave the default setting of 85. Hit Save. GIMP Tutorial 28

29 Cropping the Buttons After you have successfully saved your first cropped image, use the Edit and Undo feature to bring back your original file. Next we have to select and crop out each of our buttons. (Please note again that this is only one way to make links or buttons for web pages. There is nothing wrong with using plain HTML text to make links in Sea Monkey.) Using the Rectangle Selection Tool, line up with the 100 pixel vertical guide and crop each button. I would recommend naming them something obvious like home.jpg drafts.jpg etc. Below is the cropped button finals.jpg. GIMP Tutorial 29

30 Finished! Repeat this process for each of your buttons. If you have been following this tutorial when you are finished you should a total of 6 JPG images. 5 for your buttons and 1 for the top graphic containing your name. Remember never to save over your original XCF or layered file as you may need to come back and make changes. Now that we have all of these pieces, it is time to reassemble them in Sea Monkey for the web. GIMP Tutorial 30