Babs (babyslime ) wrote in ditl ,

Tips & Tricks

I waited to post this until the voting table had gone up to make sure it didn't get lost in the submissions. I'm going to add it to the 'mod post' tag, and probably find a way to link it off the userinfo page later on. I was thinking of keeping it alive as a basic "tips and tricks" entry, and adding to it as I get ideas and repeated questions, so if anyone has anything to add (or would like me to add) after reading, please do so.

First of all, thank you everyone for your helpful suggestions regarding voting. I've gotten a lot of different and really interesting ideas and I think I'll spend a lot of time mulling them over with Mod#2 in the next few weeks trying to figure out if we can/need to tweak things around to make it easier on you all.
Secondly, a lot of you mentioned you were getting rather sick of the excessive photoshopping on some entries. While it technically isn't rule-breaking to submit entries this way, it does kind of trod on the spirit of the community. DITL is about telling the story of your day with pictures, not with photoshop. Not all of us are blessed with mad skills and they are better saved for a photography contest or a photoshop contest community. I've added a guideline to the userinfo page to reflect this. I'm not going to reject you based on excessive photomanipulation, but I am going to give you a good frowning.

A simple border can be a nice touch. A photo montage, tables or simple highlighting/desaturation can help organize a series of moments and is generally very tasteful - but movies, animated gifs, Andy Warhol impressions and other modern art is a little over the top for a DITL entry.
Some mild effects (like contrast correction) and some HTML organization can really help readability in some entries, particularly those that seem quite random.

But I don't even know the most basic of things! It's not fair!... some will whine. Well, for the clueless, I'll offer a few pointers:


Borders:
A simple black border can be very easily added without any photoshopping at all:
<img src="http://www.myimagehost.com/myimage.jpg" border="1">

"1" refers to the number of pixels. This can go up pretty high, but obviously you don't really need to test that.
Original image:

1, 2, 3, 4 and 5-pixel borders.
       



Borders can help set multiple images apart or make them stand out against the background. The fancier photo borders are usually done with photoshop by way of manually drawing them, using a special plug-in or a stretched image file.
It's not necessary, and sometimes downright annoying, to go all out on borders. As someone who actually sees where all the votes are going, I can say that it isn't going to make you a shoe-in to win. There's no real way to cheat your way to the top except to capture something unique and try new things. Borders aren't exactly "unique" or "new".

Spaces between pictures:
This can be done a couple of ways.
For one, you can make a collage with one giant image file. In your image program (try GIMP for a free alternative to higher end programs like Paintshop Pro or Photoshop) create a new image with appropriate dimensions, you can always crop it down later. Copy and paste each of your other photos and start stacking them on top of each other, or next to each other. This an excellent time to familiarize yourself with the concept of layers if you haven't already.

When you're done arranging make sure to crop your image pretty tight to the edges, and when you save it make sure the file size isn't too high. You don't want people downloading five megs worth of photos in your entry. In any advanced image editing program you should have the option to change the compression of your file as you're saving it, based on quality or loading time. You don't need to make it look like crap, but 300k per image is a bit excessive.
If that's too much work, you can always do it with non-breaking spaces in your HTML. That sounds a lot more complicated than it really is.
<img src="http://www.myimagehost.com/myimage.jpg"> &nbsp; <img src="http://www.myimagehost.com/my2ndimage.jpg">

NBSP stands for "non-breaking space" which means a blank space that does not act like a line break. (A line break does
this
...and can also be done by using the <BR> tag.)

Anyway, the above code will put the equivalent of three space bar spaces between your photos. One before the non-breaking space, then the non-breaking space itself, then one after. To just put one, leave no text spaces between the codes. Just putting multiple space bar spaces isn't going to work because browsers are stupid and don't understand the concept of multiple spaces.
You can also define horizontal space in the image tags themselves. Like this:
<img src="http://www.myimagehost.com/myimage.jpg" hspace="5">

Once again, the "5" is the number of pixels. For example:
No space.

5 pixel spaces between pictures (hspace="5")

Remember, between two photos where each is defined as having 5 pixels of horizontal space, there will be ten pixels. Five on each side, from each photo. If you're really picky and you only want five pixels, only define every other photo with hspace="5".
 

Fancy Fontwork:
This is done with a graphics manipulation program, and the fonts that you have on your computer. You should see a little icon somewhere that has an "A" or "Aa" on it which will either let you create a text box of a particular size, or start a line of text. Within or above this will probably be options for changing the font, the size or the colour of your text.

If you're going for old fashioned captions without the use of programs, it's just a matter of changing the html.
<font face="arial"> looks like this </font>
<font face="courier"> looks like this </font>
<font face="georgia"> looks like this, but I personally prefer it in italics. </font> (italics are done either with the <I>italic</I> tag or the <em>emphasis</em> tag)

<font face="times new roman"> is browser default, and looks like the normal text you're used to. Make sure you remember to close your font tags before you open a different one (or submit your entry) with </font>.
You can't just use any font you have on your computer, because not everyone else has them; there are web standards to adhere to. If you try and use a font that is not standard, it will revert to something else and while you might see nice curly Q's and fancy T's, everyone else is going to see times new roman.
For a list of common usable fonts and what they look like, go here.
 

If you're looking for a specific tip that isn't too fancy, you can always Google it or leave a note on someone's entry asking how they managed it. Really though, don't go all out on the photoshopping. Use your own discretion about what is 'too much', but try not to make it more "shop" than "photo".
Tags: mod post
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 25 comments