Website design part 4

In fourth lesson I will show you how to create personal photo, which I will add to the front page on my website.

  Website design part 3

Open Gimp application.

Click File and select Open...

Now search for the photo you want to add at your website.

Select Rectangle Select Tool.

Select part of the picture you want to keep.

Now click Image and select Crop to Selection.

Picture is cropped.

Now we will resize it.

Click Image and select Scale Image. Enter the Width you want. You will see that the height changes proportionally to the width.

Click Select and select Rounded Rectangle. In Script-Fu: Rounded Rectangle set radius to 10.

Click OK.

Click Foreground & background colours.

At HTML notation field enter 5f8cbb. This is the same color we have used for the background of our web site in lesson 2.

Click Edit and select Fill with FG Colour. Picture filled with the color we have set earlier.

Click File and select Save as. Select the folder we have created for our website. Save file as picture.jpg.

Click Save. If you are prompted that given filename cannot be used for saving click Take me to the Export dialog...

...and under Select File Type select JPEG image. Click Export.

At Export Image as JPEG window set Quality to 85.

Click Export.

See also:

  Website design part 5