XHTML 1.0 Strict Template

Just a little template I like to use every time I create a new HTML page. The DOCTYPE does make a difference as to how the page is rendered.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>

</body>
</html>

Edit: And here’s a 1.1 template. Ready for Django flatpages, but easily modifyable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>{{ flatpage.title }}</title>
        <link rel="stylesheet" type="text/css" href="/media/css/style.css" />
</head>
<body>
    <h1>{{ flatpage.title }}</h1>
    {{ flatpage.content }}
</body>
</html>

How To Create a Database and Install WordPress

This tutorial isn’t just about installing WordPress. It will cover how to set up a database using cpanel, and optionally, how to unzip files directly on your web server.

WordPress has documentation on their site about installation too, but I’m going to share with you how I like to do it.

The Easy Way

Estimated Time: 15 minutes
Skill Level Required: Beginner
Requirements:

  • Access to a web server (FTP and cpanel)
  • An FTP client

Steps:

  1. Download WordPress. Go to wordpress.org/download and click Download WordPress. Save the zip file to somewhere on your computer. The desktop works well (you can delete it in a minute).
  2. Unzip it. Find the file on your computer, right-click it and click “extract here”. If you don’t have an option like that, you might need a file (un)archiver. I like WinRar, but 7-Zip is free. This will create a folder called “wordpress” on your desktop.
  3. Upload it. Open your FTP client (FileZilla is free if you need one), and connect to your web server. You will need a server address (your domain), a username, and password to do this. After you’ve connected, upload all the files inside the WordPress folder (don’t upload the folder itself unless you want WordPress to be located at yoursite.com/wordpress). You probably want to put these files inside the “www” or “public_html” folder on your web server. If there are a bunch of files in there already, they might conflict with WordPress; consider deleting them or moving them to a subfolder.
    Note:
    I’m not responsible if your web server explodes or anything else bad happens.
  4. Create a configuration file. Go to yoursite.com. You should be presented with a screen that looks something like this (from WordPress 2.7)
    wp-create-config-fileIgnore the warning and click the big round “Create a Configuration File” button. It should work for most setups (if it doesn’t, you’d better follow their instructions, not mine).
  5. Next. Ignore the pretty text on the next page, and click “Let’s go!”
    wp-lets-go
  6. Setup the database. Now it’s going to ask you for a bunch of info. If you don’t know what to put here, I can tell you how to set it up if your web host is using cpanel. Open yoursite.com/cpanel in a new tab/window. If you get a 404 or something like that, talk to someone else :) If it asks you for your username and password, enter it. Depending on the version of cpanel, you should be presented with a bunch of icons. Find the one that says “MySQL Databases” and click it. We’re going to create a new database for WordPress so that we don’t accidentally muck anything else up. Near the top of the page there should an area to “create a new database”. Enter something clever like “wordpress” or “mysite” and create the database.
    cpanel-new-database
    Scroll down to where it says “add new user”. Choose a username and password, and create a user. You might as well make your password a bunch of random upper and lowercase letters, numbers, and symbols. You should only need to enter this password once after it’s created. Now, scroll past “add new user” to “add user to database”. Choose the username and database you just created, then click “add”. If the username and database have another username before it, make note of this; you will need to enter these into the WordPress installation form.
    cpanel-add-user
  7. Fill in the WordPress form. Great, your database is set up. Now you can fill in that old form. Enter the database name, user name and password you just chose (with the prefixes if it added them). You shouldn’t need to change the database host or table prefix. Click “Submit”.
    wp-database-connection-details
  8. You’re done. You can listen to WordPress now :) It will guide you through the rest.

The Faster Way

WordPress 2.7 is 1.76 MB compressed, or 5.38 MB uncompressed with 603 files. I find it considerably faster to upload just the zip file.

Estimated Time: 10 minutes
Skill Level Required: Novice
Requirements:

  • Access to a web server (FTP, cpanel, and shell)
  • An FTP client

Assumptions:

  • You can follow the steps above
  • You’re on a linux server, but have no knowledge of linux

Steps:

  1. Download WordPress.
  2. Don’t unzip it.
  3. Upload the zip file.
  4. Open up PuTTY or your favorite SSH program.
  5. Connect to your web server. If you’re on HostGator like me, you can find the IP Address on the left sidebar of your cpanel, under “Account Information”. The Port is 2222. You may need to ask Tech Support to enable Jailed SSH for you though.
  6. Enter your username and password. If you’re new to this, your password won’t appear as you type (no asterisks, nothing).
  7. Type the following commands. You can use tab to auto-complete folder and filenames. Adjust the file/folder names below as needed. Use the “ls” (list directory contents) and “pwd” (print working directory) commands to figure out where you are, if you get lost. Also, “man <command>” will give you more information about a particular command.
    cd public_html/<folder-where-you-uploaded-wordpress>
    unzip wordpress-2.7.zip
    mv wordpress/* .
    rm wordpress-2.7.zip
    rmdir wordpress
  8. Follow steps 4 onward, above.

That’s it for this tutorial, I hope you enjoyed it!

Cut out an Image w/ Lasso Tool, Layer Masks and Gaussian Blur

There are many ways to remove the background from an image in Photoshop. Today, I am going to show you my favorite method: using the lasso tool, layer masks, and a gaussian blur to soften the edges. This method probably isn’t the best for dealing with fuzzy edges like hair; I’ll cover that in another tutorial.

Estimated Time: 10 minutes
Skill Level Required: Absolute beginner

I will be assuming you’re using a PC/Windows; if you’re using a Mac, I believe you can substitute “Ctrl” for “Option”. I will be teaching you lots of hotkeys which can be a big time-saver in the long run.

Before/After

Before and after images with obligatory ocean beach
Before and after images with obligatory ocean beach

Step 1 – open your image

Open your image in Photoshop. I’ll be using this image of Root Beer flavored vodka in Photoshop CS3.

rock-star-root-beer

Step 2 – change background to normal layer

If the layer says Background (in italics), double click it and just “OK” in the dialog that pops up. Otherwise, you won’t have a transparent background.

dbl-click-background

Step 3 – add a vector mask

Click the Add Vector Mask button under the layers panel. This will allow you to hide parts of the image, but bring them back if you subtract too much (whereas the eraser tool is permanent).

add-vector-mask

Step 4 – reset colors

Press D to reset foreground/background colors to black and white, respectively. This will be important when we start painting on the vector mask. Black means that part of the image is hidden/transparent, white means it’s opaque, and grays represent various degrees of transparency.

Step 5 – select polygonal lasso tool

Select the Polygonal Lasso Tool (L). You may need to click and hold the regular Lasso Tool (near the top of the toolbox) to activate a pop-up menu.

Step 6 – click the layer mask

Click on the layer mask you added earlier. It’s the (black and) white image preview on Layer 0. You don’t want to be painting over your image, just the mask!

Step 7 – start cutting away the image

Zoom in (Ctrl =) a bit if you need to, then use the the polygonal tool to start cutting away small pieces of the image. Click somewhere on edge of your object, then add a few more points, tracing its border. After you’ve added about 10 points, or reach the end of the window, click somewhere away from your object, then double-click to close off your polygon (as shown below).

cut-away-small-pieces

Press Alt Backspace to fill this area in with the foreground color (which should be black – if not, you’ve missed a step, press D). Ctrl Backspace will fill with the background color. Part of your image should now be transparent. Press Ctrl D to get rid of your selection, and repeat the process until you’ve cut out your object.

If you’re trying to cut out a really simple object, it might actually be easier just to select the whole object in one go, then press Ctrl Shift I to invert your selection, then press Alt Backspace and Ctrl D like usual. The downside to this method is that if you misclick, it can be hard to correct (you can’t undo a single point).

Don’t worry about making your selections perfect! I will be teaching you how to touch it up the next step.

cut-out-beer

Step 8 – clean up

Select the Brush Tool (B), and set its hardness near 100%.

brush-settings

Make sure you’re still on the vector mask, and your foreground color is black. Zoom in to the edges of your object, and start painting away the rough bits. If you cut away too much, you can press Ctrl Shift Z to “Step Background”. Photoshop only allows one undo, so repeatedly pressly Ctrl Z won’t do you much good. Alt Ctrl Z is Step Forward. You can also press X to swap your foreground and background colors, and then use white to paint back some of your image.

Step 9 – round the corners, and crisp the edges

If the edges of your object are too crisp, too blurry, the corners are too sharp, or you can still see some background around your object, there’s a way to fix that!

First, click the little chain icon on Layer 0, between the preview and layer mask. This will unlink them so that when we apply a blur to the mask, it won’t affect the image. Make sure the mask is still selected. Ctrl Click the mask to turn it into a selection.

If you can still see some background around your object, go Select > Modify > Contract and choose a small value. Usually 2 or 3 pixels works well, but it depends on how much background you left behind! Press Ctrl Shift I to invert your selection, and fill it with black. This (sub)step can also be compensated for in the next one.

Make sure the vector mask is still highlighted, and you have no selections. Go to Filter > Blur > Gaussian Blur. Depending on the size of your image, and how round you want the corners to be, you may want to use different values, but generally about 5 pixels works well. Don’t worry about how blurry it looks, we’re going to fix that. Press Ctrl L to bring up the Levels dialog. You will see a graph with some sliders under Input Levels, and a black to white gradient Output Levels. Grab the left-most slider under Input Levels and drag it near the middle, then grab the right-most slider and also drag it near the middle. Make sure Preview is checked so that you can see what’s going on. Move them around until you have nice smooth edges around your object. If you want your corners more rounded, you might want to go back and use a bigger blur.

levels

That’s it! You’re done. I hope you learned a thing or two from this tutorial, if only a few hotkeys. Leave a comment below if you liked it. Your comments really mean a lot and will encourage me to write more for you in the future.