logo  
 
 
 
 
 
 
 
     
   

Advanced Gimp Exercises

Creating a favicon

1 - In Gimp, File --> New, create 100 x 100 pixel image.

2 - In the GIMP toolbar, double click the foreground color and set it to the desired color. Select the "Fill with a Color or Pattern" tool and apply it to the image.

3 - In the GIMP toolbar, click "Add Text to Image" and select the desired font type and color. Click inside the image and type your initials. Increase the font size until it fills 90% of the window width. Use the "Move Layer and Selection" tool to center your initials. Select File --> Save and name it favicon.gif. Select Flatten Image and Convert to Indexed --> Export --> OK. Close GIMP.

4 - Go to http://tools.dynamicdrive.com/favicon. Select Browse and find favicon.gif. Click the Create Icon, then Download the result called "favicon.ico" to the Desktop.

5 - Open FileZilla, and display the public_html folder contents. Download the index.html file and add the following line inside the head section:

<link rel="icon" href="favicon.ico" type="image/x-icon">

6 - Upload the index.html file and the favicon.ico file to the public_html directory. View the webpage and verify the favicon took effect. Show the results to the instructor.

Creating a 3-D, gradient logo

1 - In Gimp, File --> New, 500 x 200 pixel image, Click Advanced --> Fill with Transparent --> OK. In the Image Window, select View --> Zoom --> 2:1, then resize image window accordingly.

2 - In the GIMP toolbar, select "Add text to image", select font-color as black, font-type as Aerial Black, then click on image. Type in text and close text window. In the toolbar, modify the size to fit 90% of the window width and center the text using the "move layer and selection" tool.

3 - In the Image window, select Dialogs --> Layers. In the layers window, right click the layer with text and choose duplicate layers. Alt click the topmost layer and select Edit layer Attributes. Rename it to "Text" --> OK. Alt-click the second layer and edit the layer attributes. Rename it to "Shadow" --> OK. Click the Eye Icon next to the Shadow to toggle the visibility to Off, then select the Text layer. Put a check next to the "Keep Transparent" Button. This is very important. Step 4 will not work correctly if you do not do this.

4 - In the GIMP toolbar, double click the foreground color and set it to red, then double click the background color and set it to blue. Select the "Fill with Color Gradient" tool. Draw a diagonal line inside the image.

5 - In the Image window, select Filters --> Map --> Bump Map. Increase both the Elevation and Depth values. Select OK.

6 - In the Layer window, select the Shadow layer. In the image window, select Filters --> Blur --> Gaussian Blur. Set the radius to 6 pixels and Method = IIR --> OK. Next select Layer --> Transform --> Offset and set x=4px and y=4px --> OK.

7 - Save the result as logo1.gif to the Desktop. Select Merge Visible Layers and Convert to Indexed --> Export --> OK.

8 - Display the resulting GIF inside an html file. Modify the HTML background color to verify the transparent portion of the GIF is working. Show the result to the instructor.

BACK