I’ve been making templates to sell lately, and in the template I mention that you can space photos by adding a spacer strip to them in your graphics program. I thought it would be a good time to put a little tutorial in here about that.

I’ve got a nice little thumbnail photo of a chocolate waffle which I decided to post to a couple of blogs of mine. I like to have blog posts start with a thumbnail photo at the upper left with the text running down the right and wrapping around the photo.

I also like to have photos and other images alternate with text wrapping around them, which you can do by adding ‘align=”left”‘ or ‘align=”right”‘ to your image tag, like so:

<img src="http://myimagehost.com/image.gif" align="left">

Unfortunately, as you can see up there, the text touches the photo. That’s the default in html. There are a lot of different ways to fix this, depending on the circumstances. But if I’m editing the photo for a blog of mine or for Niteflirt, I often just add a spacer strip to save code.

Open up the photo in Paintshop Pro. Click ‘Layers/Promote background layer’ so you can work on the background layer. Now click ‘Image/Canvas size’. The following dialog box comes up.

Your image will now have a transparent margin on its right and lower sides, which will show as a checkerboard background in PSP.

Now click ‘Layers/New raster layer’. Accept the defaults in the dialog box that pops up.

Paintshop Pro has helpfully put a new transparent raster layer on top of the current layer. This is going to be our new background, so we want it beneath the current layer. Look at the Layers palette in the right sidebar. (If you don’t have your layers palette showing, go to ‘View/Palettes/Layers’ to make it appear.) Click on the transparent layer and drag it beneath the layer with your image one it.

Now, with the transparent layer still selected, click ‘Layers/Duplicate’. I said I’m going to be putting this in two blogs. One has a white background and one has a black background. I’m going to be making two different images, one with a white spacer and one with a black spacer.

I’m going to give the image a drop shadow. Click on the image layer, then click ‘Effects/3D Effects/Drop Shadow…’ The following dialog box will come up.

The window at the left shows your original. The one at the right shows what the drop shadow will look like at the current settings. You can’t see the new drop shadow here. You have to drag the picture over to see it if it’s bigger than a small button.

I generally choose a shade of gray for a drop shadow on a white background, rather than black. 7 pixels of vertical and horizontal offset is good for a photo like this. I tick the box ‘Shadow on a new layer’ because I want to be able to control whether the gray shadow shows up on my black background coming up.

Now I select white in the Materials palette and floodfill (the bucket on the toolbar) one of the background layers. Then I fill the other with black.

If you have a different background color to match, you can use a color picker to select the background color for proper matching.

If you don’t have a solid color background, you can save the image as a .png file, but older versions of IE will not display the transparency properly. It’s a tradeoff.

Select ‘Edit/Copy merged’ then ‘Edit/Paste as new image’ to create a new image with a spacer. Save the original as a .psp file to preserve its layers, and the new one as a .gif or .jpg. Note that the background is white here because the black background is hidden beneath the white background.

Now I’m going to click the little eye next to the gray shadow layer and the white background layer. This will make these two layers invisible, and the black layer will show. Again, select ‘Edit/Copy merged’ and ‘Edit/Paste as new image’.

You can’t see it here, but this image with the black background will look perfect in the blog I have with a black background.

So you want a slideshow, but you’ll be happy to get one of those ones where the pictures scroll from right to left? I will show you how to do that. It’s fast and simple.

There are a lot of different things you can do with marquees. If you want to learn more, you can look them up on the internet. But for now, because it’s the most useful and the easiest, I’m just going to show you the one on top.

Note: Firefox does not display this post properly within the main page. To see all the effects, click the entry title and view it as a single post.

Marquees for Niteflirt

It’s really pretty easy. The marquee tags to make images scroll from right to left are <marquee></marquee>
To make one image scroll, put one image between like this:
<marquee><img src="http://myimagesource.com/image.gif"></marquee>

To make two images scroll, put two images between them like this:
<marquee><img src="http://myimagesource.com/Image1.gif"><img src="http://myimagesource.com/Image2.gif"></marquee>

You can put a space between the images if you like
<marquee><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

You can even scroll text.
<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p><marquee><</marquee>

I want everybody to read my message as it scrolls across the screen.

You can even reverse direction by adding a ‘direction=”right”‘ to the first tag.
<marquee direction="right"><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

Warning! Never scroll text from right to left!
<marquee direction="right"<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p></marquee>

I want everybody to read my message as it scrolls across the screen.

Things to remember:

• A big marquee with a lot of photos in it can take a long time to download. I saw a page yesterday in the top 10 with so many marquees and slideshows on it that I thought none of the links were working. You wouldn’t want a potential caller to go away if he thought something was wrong with your page.
• Limit your marquees to one per screen. That means that the viewer should never see more than one at a time.
• Marquees don’t display properly in all browsers consistently.
• Remember, you want a guy to think, oh, she’s sexy, not did she design my daughter’s myspace page? or worst of all I think I need reading glasses, I’m going blind!

.

Okay, so you want everything about your page to be cool. You’ve got a cool background. You found a cool font. You want cool colors. Maybe you even want one of those cool non-scrolling background photos like you see on MySpace.

Step back. Take a breath. The first rule of text is that you want to make it as readable as possible. This is your message that you’re trying to use to promote yourself, and at least in theory having potential callers read your text will improve your chances of having them call you, right?

The harder you make it to read your text, the greater the likelihood that someone will just go away without reading it. People who wear reading glasses often have the most money to spend on you.

Now I know that may seem hard to believe, when probably you’re yourself attracted to pages that are maximally cool. So I think the best thing to do will be to look at some really bad examples that I’ve collected here and there.

The animated background

Animated backgrounds make it harder to read text. The most readable text has as much contrast as possible.

Believe it or not, there really is text on that twinkly, starry background. Black text. I’ve reduced the size of the animation to make it fit in the column and load more quickly. Click on it to see what you find when you highlight the text on that page. Do you think anybody read her page?

The most readable text is black on white. It’s all downhill from there.

Bad font choice

Now let’s look at another one with contrast issues. The contrast problem is obvious, but this one also has a font selection problem.

The fact is that there are thousands of fonts out there to choose from. Some of them are free to download, others may cost a bit. But a person’s computer will only display a font they have installed. So if I, as my own page designer, find a really cool font that I want on my page, a reader who does not have that font installed will see something very different.

A girl had a question about her page. I was the only one who had this font installed (she didn’t even have it installed herself), so I was the only one who was able to see the page as the designer intended, which was completely illegible. Everyone else was seeing a different font. An ugly one, which was still really hard to read with the black on brown. Click the image to see a larger version.

OK, let’s look at a MySpace background. The site was slow, so I wasn’t able to find one of those pages where the text scrolls over the giant, non-scrolling photo. This is a non-scrolling photo background of someone in my network. I guess.

So what can you do? Use a template where the text background is a solid color, and there is plenty of contrast between the text and the background. If you want to use a high-contrast background, like a photo, use it around the perimeter of the page. And choose fonts that the viewer is likely to have on their computer. Here’s a link to a page with a table showing the fonts that everybody is likely to have installed on their computer. A good designer will use a fancier font to make graphic images, like headers, rather than using an attractive but unusual font for content text. And maybe test out your listing on somebody who hasn’t seen it to see how easy it is to read.

If you’ve never made a banner, there’s a few things you should know. I’m not going to tell you how to make a banner image now. That’s something you would do in your image program, and there are so many options I couldn’t tell you what to do. If you have an image program but don’t know how to use it, I suggest getting a nice, thick book to help you with that.

First of all, a banner is a 468×60 image, in other words, it is 468 pixels wide and 60 pixels high. This is the standard size. Most topsites require you to submit a banner this size to their site and reject any other size or shape.

When designing a banner, keep in mind that this is the advertisement that your potential customer will be seeing when deciding whether to visit your site and/or call you. It needs enough information to give them a reason to click it. If you don’t have a website, you may want to put a phone number on, so that someone who can’t call right now can write it down to call you later.

But you don’t want too much information. The space is small, and it should be the colors and images that catch the attention of the surfer.

It also needs to be attractive and sexy, so most banners have photos and some sort of effect.

Most banners are animated because animated images are more eye-catching and you can put more info on a banner if it is animated in two or three frames. Just make sure you test your banner before putting it out on the web. Someone who reads relatively slowly should still be able to read all text on the banner. If your text goes by too fast, they won’t be able to read it at all! Slow down your animation if you need to. Each frame can be assigned its own speed in a good animation program.

The last consideration is that many toplists host banners, and some of them - I’m thinking Phone Sex Central here - have a very low filesize they require, in order to keep their site from loading slowly. More frames, images, and effects mean a larger filesize. You may not be able to make your first, second, or third choice and still stay within the limit. Design is an art, and skills come with practice. Good luck.

It looks like Niteflirt has reworked the standard logins so that auto-login no longer works in Internet Explorer, the browser it is optimized for. It seems to still work in other browsers, though in some of them you have to reset the login utility.

Let’s look at the old login on a little login utility I have called “Roboform” which I downloaded way back when:

Now look at the new login. Look at all that garbage in the login window.

Clearly this is something they have done—it’s not an accident where something “broke”—so I guess we’re going to have to learn to work around it.

[rant]It is also inscrutable why the powers that be decided that we should have to relogin every few minutes in order to view our FL stats, or why someone logged in and on the My Account page already would need to be directed to a “Create a new account” page. I’m wondering how annoyed the customers are at having to navigate through a series of registration and login menus every time they attempt to make a call…[/rant]

There are a lot of browsers out there that are based on IE, though they have different interfaces. I have a few of these, and they are all giving the same issue as IE, which confirms my suspicion that this is an IE problem.

But here are my suggestions:

If you don’t mind changing browsers, Firefox, Opera, and K-meleon browsers seem unaffected, or you may need to reset and resave your password. K-meleon has a nice login function that allows you easy access to a great number of different logins, if you need that, although the browser has a learning curve and may need to be customized more than most.

There are other browsers out there which I have not tried, so I can’t comment on them.

There is also Roboform. I seem to recall that they eliminated the free version a while back, but it looks like it’s available now as a 30 day free trial.

In case there’s any question in your mind, here’s one I got today. I used Opera to view it, which gave it those nice little popups.

A while back I downloaded the free Iconico colorpicker. I guess there are a lot of colorpickers around, but I’ve always been satisfied with this this one.

I’m going to give you a few instructions on how to use the colorpicker to help you select colors for your html site—such as Niteflirt—backgrounds and text colors mostly.

A few colors are named in html, and you can use these names in building your site. But there are millions of possible colors, and to use most of them you must find the hexcode for the color and use that instead. A hexcode takes the form “#” plus 6 letters or numerals. So “#ffffff” is the hexcode for white, and “#000000″ is the hexcode for black, both of which are named colors.

Take a look at the color pic window, which sits on top of other windows on your screen.

The red arrow is pointing at the window where you will find the hexcode for the color the mouse pointer is hovering over. Clicking the tabs at the left of the middle window will give you more options to help finding the exact color you want. There are more instructions on the Iconico site.

Now watch color pic in action.

As you mouse over pixels on your screen, a magnified image appears in the window at the bottom, the color appears in a swatch box, and the hexcode appears in the hexcode text box.

When you find a pixel that is the color you want, hit ‘c’ on your keyboard. The hexcode for that color will be copied to your clipboard, and you can paste it into your page code.

will change your text font.

will change the background of your table.

will change the background of your page in normal html. This doesn’t work on Niteflirt pages, though. To put a solid colored background in a Niteflirt page, you will need to make an image of that color to use instead.

I got a ‘Paypal’ phishing email. Hopefully most everyone is familiar with these, but just in case, I’m posting here.

They send you a random email saying there has been suspicious account activity, and helpfully suggest you click the link provided to login and verify your account.

Not always, but often the emails look very official. This one came to the address I actually use for Paypal, but I have also received them at almost every active email account I have ever had.

First of all, notice that nowhere does the email have my account name on it, which official emails do. Also, look at that little yellow box. In Opera, when you move your mouse pointer over a link, a box like that will pop up and tell you where the link actually is going to send you. In other browsers, this link will show up at the bottom of the page.

That link doesn’t look anything like any official Paypal url you have ever seen.

If you were to actually click the link, it would probably take you to an official-looking login page. Were you to login, whoever sent you this would not only have control of your Paypal account, but they would probably also be installing all kinds of malware and viruses on your computer.

If you ever have any question as to your account status at Paypal, Ebay, or anywhere else, type the url into your address bar and go there normally.

Update 02-27-08:
Here’s another Paypal phishing email I just got today. This email said my account had been suspended for endangering all of Paypal. Look where this link would take you!