Webtools for Webmasters: Scripts, HowTos, Templates, Plugins, Widgets, Tips and Useful Information
Posted by ljmacphee on May 30, 2007 under blogging, how to, useful sites | 
Be the First to Comment
EFF: Blogger’s Rights is probably the most comprehensive source of legal information for bloggers in the United States. EFF is and has been actively fighting for blogger’s rights and has a comprehensive website covering various problems you may run up against.
Posted by ljmacphee on May 28, 2007 under gimp, graphics, how to | Be the First to Comment
There are all these wonderful how to tutorials for Photoshop all over the net but very few for GIMP it seems.
GIMP has a wonderful collection of built in logo tools. I have about 30 built into my version of GIMP. Each one is customizable further; color, size, font and other options exist.
To use the logo tool in GIMP select Xtns from the main menu. Then select Script-Fu -> Logos and select your logo.
You will want to try out the different logos and then play around and adjust the settings on the logos you like best. You should also make a note of the logo and settings you use. You may want to make several versions of your logo.
Also check The PlugIn registry for more options.
See also How to create gold text in Gimp
Gimp Basics: Beginning
Posted by ljmacphee on May 25, 2007 under HTML, css, how to | Be the First to Comment
Suppose you have a list of links:
TimesToCome Mobile
Herselfs AI
Herself’s Houseplants
And you’d prefer to lay them out horizontally on your page like:
TimesToCome Mobile|Herselfs AI|Herself’s Houseplants
Or better yet, like the 3 social bookmark links at the bottom of this post are laid out.
This is especially useful for the list of social bookmarks at the bottom of your page.
You can in HTML just place the links one after the other with a ‘|’ in between. Or you can use CSS to line them up for you and space them out nicely. The float: left; is what makes your list horizontal instead of vertical.
#socialbookmarks ul
{
margin:0;
padding:0;
}
#socialbookmarks li {
float:left;
margin:0;
padding:0;
list-style-type: none;
white-space: nowrap;
}
#socialbookmarks li a
{
list-style-type: none;
padding: 0 18px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
}
The bookmarks are added in the form of an HTML list to the web page
<div id=”socialbookmarks”>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<br />
You need a break ( br ) tag at the end to prevent the links from wrapping if the next item in your template is also a float item.
Posted by ljmacphee on May 23, 2007 under backgrounds, css, flickr, gimp, graphics, how to | Be the First to Comment
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.