Herself’s Webtools

Way back when, any ‘cool’ website had a black background and lots of animation. We’ve gone through several designs along the way. Web 2.0 design involves drop shadows, 3d gradients, rounded corners, lots of white space and grayed out pastel colors.

The rounded corner backgrounds are very easy to create in GIMP. The CSS code is not difficult either. Both of these examples have a rounded corner background with a drop shadow. Then each has an image behind the title. TimesToCome has a drop shadow image behind the title which is not a link. TimesToCome Blog has an image with a border and the title is a link.

Rounded corners in GIMP:
- Use a slightly smaller image than you need, rounding the corners will increase your image size.

- Select Script-Fu -> Decor -> Round Corners { if that is grayed out be sure your image is Image -> Mode -> RGB, and be sure to click Layer -> Anchor Layer }

- Choose a reasonable Edge Radius, Shadow X Offset etc for your image. You may have to experiment a bit. I usually tell it to work on a copy, add a background if you choose or leave it unchecked for a transparent background.

* That’s it.
I used the rounded corners for both background images and the title image on TimesToCome.

Border Image in GIMP:
- Again use a little smaller image, adding borders will increase the image size by the amount of the borders.

- Choose Script-Fu -> Decor -> Add Border

- Select your border size, color and delta. The higher the delta the larger the difference between sides and the more of a 3d effect you’ll get.

* That’s it for adding the border

Layering the image:
- On the TimesToCome main page the title is not a link, we’re already at the home page. So I created a logo in GIMP and rounded the corners and added a drop shadow.

- I rounded the corners and added a drop shadow with a background to the main background image. We’re using a white background there anyhow.

- This looks like several layers but is only one image. I used Layer -> New Layer with Transparent fill on the main background image. I then pasted the logo image into the new layer. Then I went to Dialogs -> Layer and opened up the layer dialog. I changed the opacity of the new layer so you can see a little bit of the main background through the title image. When everything is as you like Layer -> Flatten Image.

- The CSS for TimesToCome main page:
body {
background-color: #ffffff;
}

#container {
background: url( images/background.jpg ) no-repeat #ffffff;
height: 600px;
width: 800px;
margin: auto auto auto auto;
}

#menu {
float: right;
margin: 150px 30px auto auto;
}

The CSS for the TimesToCome Blog header is a bit more complex:

#blogtitle
{
width: 980px;
height: 230px;
display: block;
color: #786;
margin: 0px auto 0 auto;
padding: 5px 0 0 0;
background: #fff url(img/header.jpg) no-repeat;
text-align: left;
}

h1.blogtitle
{
font-size: 32px;
margin-top: 10px;
margin-left: 15px;
background: url(img/headingbg.gif) no-repeat top left;
background-position: -10px -1px;
}

You will have to adjust the padding and background-position to center your title on the background image properly.

If you are looking for cool images, try My flickr account. These are all CC attribution copyright. There are also many CC attribution images there if nothing I’ve added interests you. Just drag and drop the images you wish to work with to your desktop and fire up The Gimp.

You Tube Tutorial, Gimp for image stacking

You can post picture mail to your blog using your Flickr account.

You log onto your Flickr account.
Go to You->Your account

and set up which blog to post to from Flickr. Be sure to set your message body to post. That will be the text of the post. Your subject line in your picture mail will be your blog post title. Set the layout to a style you like and to the correct picture size for that blog.

In your account information you’ll see two email addresses. One is to email pictures to Flickr. One is to email a picture to Flickr and automatically post it to the blog you set up. Be sure to have those stored and handy in your cell phone.

Flickr Test Post

I’ve been hearing lots of stories about people being harassed while taking pictures in public. Bert P Krages, an attorney in Oregon put together a very nice flyer of photographer’s rights.

An excellent sight on digital photography is The Digital Photography School Blog I check it daily and I’m learning lots of good things.

To clean up, adjust color and generally have some fun with your photos, you’ll want to download Gimp. Don’t forget the user manual - GUM.

You can store photos online for use in webpages or just to share using Flickr

First you have to set up a Flickr account. Follow the directions and upload some photos.

Then you need to create a Flickr badge. Follow the directions to choose the pictures, background, layout etc. Flickr will then give you the code which you just cut and past into your blog.

On blogger go to Layout->Add a page element->html/javascript->and paste the code you copied from flickr.

Example: