By:Adam Pash

So you've learned the basics of HTML, brushed up on styling and CSS, and taken your web page design idea from concept to reality. Now it's time to find a host and launch your site.

Today's lesson is probably the easiest part of the whole make-a-web-site process (at least for the kind of site we're making), and it involves two simple steps:

1. Find and register with a web host
2. Upload your files to your host

Once you've done that, anyone with access to that wacky world wide web can see your site. Google can find it. Potential employees can see how talented you are. All the work you put into making it is now paying off!

But I'm getting ahead of myself. Let's talk a little bit about each step.

Step 1: Find and register with a web host

You can hem and haw all day about what web host to choose if you want. Choosing a host is like buying anything online: You do some research, find a few hosts that meet your needs, and maybe consider the recommendations of your peers before you commit. For a good starting point, take a look at our list of the five best personal web hosts. The reader-voted favorite of the bunch is DreamHost, and it's what I use for hosting various simple sites. I've tried a few alternatives over the years. Some were awful (Globat), some were just fine (Bluehost), but DreamHost has always been my favorite for simple hosting needs. That said, at something like $9/month DreamHost is more expensive than a lot of other cheap hosting plans. (I've also set up full web servers from scratch on virtual private servers at Slicehost and been very happy with them. Setting up a server on something like Slicehost is well beyond the scope of this guide.)

Whatever service you choose, you'll need two basic things from your host:

1. A domain name: This, as you probably know, is the human-friendly URL for your site. For example, when you visit http://lifehacker.com, that domain actually points to an IP address, which is a much less friendly string of numbers and dots. You want a friendly domain name.
2. A hosting plan: This is the service that provides you with the disk space and bandwidth for your site. It hosts your files and transfers your web page to the computers that visit your site.

Notes on choosing a domain name

If you're putting together your nameplate site, consider trying to snag yourname.com. Whether it's based on your name or not, your luck securing the domain you want will vary depending on how unusual the name of the domain you'd like is. When I'm searching for domains, I've always liked using Instant Domain Search, a tool that returns availability of domains as you type. If you want to get clever with your name (del.icio.us-style), consider the Domain Hacks search tool. Finally, if you can't seem to secure anything, give Bust a Name a look. It suggests open domains based on synonyms of a few base words.

If you've never tried it before, here's an advanced warning: If you're not flexible, or you don't have a very unique domain name, finding an available domain name can be extremely frustrating. Be patient and play around, and eventually you'll find something you're happy with. (Remember, it doesn't have to be a .com domain—it's really up to your preference.) Once you've found an available domain you like, you're ready to proceed.

Buying your domain and hosting plan

You've got a choice at this point: You can either register your domain name with a domain registrar (like the popular Namcheap or another popular option) or you can simply register your domain when you buy your hosting plan. Many hosts—including DreamHost—give you a free domain registration when you register for hosting.

The catch with tying your domain name to your hosting plan is that often hosts aren't as good as registrars when it comes to easily managing, transferring, and handling your domains. To that point, I've been happy with DreamHost, and I'm sure most good hosts work fine as registrars, especially if you never have to transfer to another service. I was, by comparison, very unhappy with my first host, Globat, and how difficult it was to do anything with the domain I registered through them.

So make your domain and hosting choices. Once you have, you're ready to deploy your site.

Step 2: Deploy Your Web Site

This is the incredibly easy part. Since I have a DreamHost account, I used that in the video above, but whatever you decide on, the process should be nearly identical. Here's the broad version:

1. Sign into your web host.
2. Find the FTP (or for better security, SFTP) credentials. Basically you need an FTP, SFTP, or SSH username and password. On DreamHost, my first FTP user was created automatically; you can view, edit, or create new users here. If your host didn't create a user for you by default, you should be able to create one somewhere in your host's dashboard.
3. Now open up your FTP client of choice. The free, open source Cyberduck (available for Windows and Mac) is a great choice if you're looking for something free and don't already have a favorite.
4. Click the Open Connection button, choose the connection type (FTP or SFTP), enter your domain name, username, and password, and click Connect. If all your credentials were entered correctly, you should see a directory listing of files or folders, for your domain, on your host.
5. For the sake of this tutorial, I'm assuming you want your site in the root directory of your server so that when someone visits, for example, yourname.com, it will load the site you created. To do that, you need to find the root folder of your domain. On DreamHost, your initial directory listing will show all the domains you're hosting, so the root of, for example, my adampash.com domain is inside the adampash.com folder.
6. Now that you've found your root, all that's left is to upload your site from your local computer to your server! There's not much to this part: Just drag the files from your desktop to the root folder you've opened in Cyberduck (or whatever FTP client you're using). Since your site is likely pretty lightweight, everything should upload in just a few seconds, and your site should be live for the visiting!

Congratulations! Believe it or not, that's all there is to it. You've successfully deployed your first web site.

By:Adam Dachis

 Now that you've got the basics of HTML and CSS down, we're going to take a look at how to actually use that knowledge to make a real web site. Today, we'll take you through the process of creating a site from start to finish.

This lesson presumes you know how to put together a site layout in Photoshop (or some other application). If you don't, fortunately we've covered that already so you can catch up.

Creating a web site isn't just about coding. You (or someone else) needs to have some basic design skills. You need to know how to prepare graphics for the web. You also need to know a few basic things about web servers to deploy your finished site. We've broken it all up into the four big tasks and take you through the entire process.

By the way, if you want to play around with the source code for our demo web site, you can download it here.

Design

We're not going to get into how to design a web site, technically or artistically. (We've sort of done that already.) You should have your site design figured out already, but there are a few things we do need to talk about before you start figuring out how to translate it into code.

First, the most important thing to know is that your font choices are sort of restricted online. While you can use the @font-face rule in CSS to externally load fonts, this isn't supported by older browsers. You also may need rights to use certain typefaces with this tag. That said, you can use @font-face to solve the problem of limited font choices on the web, but if you're not ready to jump into that world quite yet you should either use a web fonts service like WebType (which can be free depending on your use) or limit yourself to web-safe fonts. Which fonts are web-safe? Times New Roman and Arial are the most common options, but most operating systems come with several other built-in fonts that are considered web-safe. These include fonts like Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New, and Georgia. Do a search for web-safe fonts if you're looking for additional options.

Second, you need to consider what is going to be an image and what isn't. Nowadays you don't really need to use images for much more than complex graphics and photos as HTML and CSS can handle many of the complex things that we used to do with images. Menus, for example, can be created very easily in CSS with an unordered list. Generally you do not need text to be rendered as an image, but there may be some circumstances where you will need to do that (e.g. if the text is combined with a graphic).

Finally, you need to consider which images are going to be displayed as actual images or as backgrounds for one of your DIVs. How do you determine this? If you have text that's going to go on top of an image (e.g. with a menu), then you have your answer: your image will be a background. The reason this is important to know is because you need to export it unadorned with any text, images, or anything you're going to add later in the code. Once you've got that figured out, head on to the next step ("Preparation") where we discuss preparing your layout for coding and exporting any necessary images.

Preparation

First, you want to measure your design. This is something you generally want to do before you begin your layout, but you need those specific measurements to start coding so you definitely need to know them now. You don't need to know every little measurement, but you need to know the measurements of your main layout structure. For example, if you have a left side of the page and a right side of the page, you should know the width (and height, if it doesn't vary) of each. You should also know the width of the spacing between them and the total width of everything combined. If your design is very much based on a grid and lines up with everything nicely, chances are your site's header will be this width as well. Basically, you need to know the dimensions of every major element on the site. You'll need to know the minor ones, too, but that's not really information you need to get started.

Once you've got your measurements we can start exporting images. In many cases you will not need to export very many images because you can recreate most of your design with HTML and CSS (and JavaScript, if you want to go there). For the few images you do need to export, however, you're going to need to choose between JPEG and PNG. When your images are complex—like photos, or illustrations with many colors and a wide tonal range—you're generally going to be better off with JPEG from a file size standpoint. If you have simple images, or require that your images have a transparent background, you're going to need to save them as 24-bit PNG files.

If you're saving a 24-bit PNG from Photoshop, you'll need to hide the background layer before choosing "Save for Web" from the File menu so Photoshop knows to ignore it.

When you save your images you're going to need somewhere to put them. For this reason, and because you're going to have a bunch of other files once you start developing, you should start organizing your site now. If you were making a more complex site, I'd recommend structuring everything using the Model View Controller (MVC) architecture, but since we're just dealing with a simple site I'd recommend creating the following directories in your site's root directory:

• css
• images
• scripts

If it isn't obvious, you'll save your images in to the images directory and your CSS stylesheets in the css directory. The scripts directory is where you can store JavaScript files and other scripts you may end up using when developing your site.

In the root directory, you'll also want to make an index.html file in preparation for development. What is index.html? Let's say you only had one HTML file and it was called mydoc.html. If you uploaded that to your web server, which was hosting your site mywebsite.com, anytime someone visited mywebsite.com they would either get a directory listing of the files you've uploaded or possibly nothing at all. Using index.html as a file name tells the web server that it should display that file if someone goes to that specific directory. If you put an index.html file in your images directory, anytime somebody visited http://mywebsite.com/images they'd see a rendering of the HTML contained in that index.html. Basically, an index.html file is the default HTML to display so you're always going to need one.

Development

Now you develop your site using the skills you learned in the past two lessons and the additional HTML and CSS skills you'll acquire as you continue to learn web development. Since we've pretty much covered the basics of HTML and CSS, there isn't much else to say here. Rather than rehash the first two lessons, we're going to go over a couple of extra things you should know before you start developing your site for real and also provide you with the source code for the demo site we created for this lesson.

DocType

When creating your HTML document in lesson one, we focused on the basics of HTML structure but not some of the best practices. One thing you want to want to add to the very top of your HTML document is its DocType. You can learn a lot more about DocType on Wikipedia, but it basically is a document type declaration that says "these are the rules I'm following in my HTML document." This is important if you need to validate your code (to see if you made any mistakes), as the rules are a bit different for each DocType, but it also tells the browser what elements and structure to look for when rendering your HTML page. If you don't adhere to the DocType, it can cause problems, so this is something you'll want to explore further. For now, here's a quick look at what a DocType declaration looks like:

Check Out the Source Code

As you can see in the video, we used a lot of fun CSS techniques like drop shadows and rounder corners. If you want to explore these techniques further, download the demo site's source code and look around in the CSS. Once you have a grasp on the basics of HTML and CSS, the best way to learn new things is to look at the source code of other web sites. While you can't look at server-side code that was created in a server-side programming language like PHP, you can view HTML source code simply by browsing to a web page and choosing "View Source" from your browser's "View" menu (unless it's in another menu, but it's generally in "View"). Big sites that have lots of content, such as Lifehacker, are not necessarily good models to look at. Much of the HTML code you see here is generated by server-side PHP code. Generally you'll learn more by looking at smaller sites, as the code is often static and/or the site is small enough that the amount of source code isn't horribly overwhelming.

Once you're done developing your site, it's time to deploy it.

Deployment

Once your web site is finished, you need to deploy it. This often doesn't involve much more than uploading it to your web server. You'll generally accomplish this with FTP or SFTP, so you're going to need an application to do that. We're using Transmit in the video, but Cyberduck is a free file transfer app that runs on both Mac and Windows. All you need to do is use your file transfer application of choice to connect to your web server via FTP. From there, you just copy the files over to the web server and they should be immediately viewable on your web site.

Of course you're going to need a web host to do this, but we'll help you with that tomorrow night. Stay tuned!

By:Adam Dachis — Everyone lives at least a little bit of their life on the web, and whether you develop web pages for a living, want to create a nameplate web site, or simply want more control over how your comments show up on web sites, having an understanding of HTML at your command is invaluable. With that in mind, in our first lesson on how to make a web site, we're covering the top-level basics of HTML—the predominant markup language of the web.

Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actuallymake your own web site you're going to need to learn HTML and CSS. Fortunately, we can help.

What You'll Need

• A plain text editor to write your HTML
• Your web browser of choice to test your HTML
• A desire to beef up your knowledge of how the web works

As you can see, you really don't need much to get started.

Getting a Plain Text Editor

In order to write HTML, you need a plain text editor. This video uses a plain text editor calledTextmate, but that'll cost you. If you want something free, you've got a lot of great options, including Notepad++ (Windows), Kod (Mac), or Sublime Text for either Windows and Mac. There are several other text editors out there, so you can use whatever you want so long as it is a plain text editor. While the term plain text is kind of a misnomer (here's why), it's basically used to describe text that doesn't have any style and is simply letters, numbers, and symbols. This means no bold, no italics, no different sizes, etc. While your plain text editor may have syntax highlighting—a feature that changes colors of the text based on what you type to make your code easier to read—this is just something you'll see in your text editor and something that is not saved into the file. Basically, you need a text editor that doesn't save anything but the text (which means you don't want to use something like Microsoft Word).

What Is an HTML Document?

If you read the above section, you may have guessed that HTML—which stands for HyperText Markup Language—is just a bunch of text saved as a document type that your browser identifies as using HTML. If you see an image on a web page, it's simply referenced in the text of an HTML document and not physically included as part of the file. All an HTML document really does is provide a set of text-based instructions that a web browser can interpret. It does this by encapsulating the page's text in tags, which we'll learn more about in a minute. It also uses these tags to tell the web browser to do things like display images, add line breaks, and more. Going further, HTML can be styled using CSS—which stands for cascading stylesheets—which we'll learn about in the next lesson. For now, just understand that HTML is a set of instructions for your browser that you are going to write.

What Are Tags?

Tags are used in HTML to specify certain elements on the page so the web browser knows how to render them. Here's what a set of tags look like:

The above tags are the HTML tags. Your entire HTML document goes inside of those tags. All tags start with a less than symbol and end with a greater than symbol. They're called tags, in part, because those symbols make them look like tags. The starting tag simply has the term HTML inside of it, but you'll notice that the ending tag has a / before the term HTML. The / is what designates it is the closing tag. This tag tells your web browser that the first HTML tag is the start of the HTML document and the second /HTML closing tag is the end. Most tags look like this. For example, if you want to make text bold you might see this:

Note: There are other ways to make text bold, too, so be sure to watch the video for a full explanation as these differences can sometimes be very important.

You'll also see tags that look like this:

The above tag is an image tag. You've probably figured this out already, but its job is to display an image. There are two noteworthy things that are different about this tag. First, it doesn't have an ending tag. This is because the img tag is a self-closing tag. It doesn't need an ending tag because there is nothing that would go between a starting tag and an ending tag. You'll notice a / at the end of the img tag, however, and that's to designate the end. Back in the early days of HTML you didn't need to add that / to an image tag, and technically you still don't, but it's proper form. The other difference you'll notice is that the tag has a bunch of attributes. Attributes are things like src="" and height="", and they contain information describing more about the tag; in the case of the img tag, the source (src) attribute is always necessary.

The src attribute specifies that the image file we want to display is image.jpg. Because we're just listing the file name, the browser will assume we're keeping that image file in the exact same location as our HTML document. If you had a folder called images in the same place as your HTML document and kept the image in there, you'd set src to "images/image.jpg" because the / designates that we're going into a folder. If you wanted to load an image from an external web site, you could just but the full URL to the image (e.g. http://website.com/image.jpg). The other attributes simply specify the height and width of your image. Only the src attribute is required for the image tag, but if you don't specify the height and width of your image the browser won't know how much space to leave and it'll keep readjusting the page as it load. This looks kind of weird, so it's always better to specify the height and width in your img tags.

The Structure of a Basic HTML Document

Now that you've got basic tag structure down, let's take a look at a basic HTML document's structure. You should know this is a very basic look and doesn't include absolutely everything you'll probably find in a fully developed HTML document, but it works just fine and keeps things nice and simple. Here's the very basic structure:

You'll notice that inside the HTML tags are HEAD and BODY tags. The HEAD tag encapsulates information that's not necessarily going to directly display on the page, such as the page title (which shows up as the window or tab title on your web browser), CSS styles, and other metadata. The BODY tag encapsulates information that will display on the page—your text, images, and rich media. The resulting HTML document opened in your web browser (just double-click the saved file or drag it into a browser window) will look like this:

As you can see from the example, the body tag has a few things inside of it. First there's a DIV tag with an ID of header. DIV tags are used to contain bits of content so you can style them and move them around with CSS. You'll learn more about this when we dive into CSS in the next lesson.

Inside the header DIV tag is some text. The first part of the text is inside an H1 tag. H1, H2, H3, H4, H5, and H6 tags are all used to create header text. H1 is the largest and H6 is the smallest. By default they result in bold, larger text, but you can style them however you like using CSS. Because this HTML document has no CSS style information, the H1 tag will make the text My Page look bold. This effect is very similar to the big section title text you see in this post.

Below the H1 text is just some regular, un-styled text. Most browsers render un-styled text in the Times New Roman font at a size of 12pt. When you start adding CSS styles you'll be able to style this text however you like by setting a default style.

When Alexey Ivanov and his future wife, Marina Kiseleva, were dating, she gave him a memorable gift: a photograph of himself that looked as if it were hanging in the Tate Modern in London.

To create the image, she used a simple photo-editing program. And it gave the couple the idea for their Web site, Photofunia.com, which allows users to upload a photograph, select an image from dozens of templates showing a scene, and then merge the two photographs. It is just one of many Web sites for enhancing photographs that are becoming easier than ever to use.

The Web sites cater to novices, unlike sophisticated software packages like Photoshop, making it possible to create a greeting card, make photo collages, design new images for a Web site and tweak personal photographs without doing much more than clicking a button.

Some sites, like Photofunia, which is based in Ukraine, merge or mash up images. Others are aimed at transforming pictures to look as if they come from another time or place. Some sites have a more commercial aspect, selling products like lipstick by letting you try it by painting a virtual copy of the makeup on a photo of yourself.

Photofunia contains dozens of templates — of art galleries, urban scenes and locations like the Sphinx in Egypt. For example, users can put a picture of themselves into a scene from Times Square so that it looks as if the user’s image is on a billboard. The site also has tools to digitally detect a person’s face, extract it from a picture and graft it onto the head and body of another image, like Santa Claus or the Mona Lisa.

A similar site, based in Russia, is Photo505.com. It offers a wide array of templates, and can place a face in a wanted poster or the cover of a magazine like Cosmopolitan.

“We experiment and realize every idea we have in mind,” said the site’s founder, Vasily Giharev. “Even the most insane ones.”

Mr. Giharev said he was inspired to create the site after seeing the film “Forrest Gump,” which sliced film of the actor Tom Hanks into historical images from the 1960s, making it seem as if the character was present at the important events of that era.

Other sites — like Aviary.com, Pixlr.com, Splashup.com, and Citrify.com — are competing to offer simple tools for cropping an image, fixing red eye or making other tweaks to an image.

“The typical user is not a professional, but a step below, a beginner,” said Ola Sevandersson, the Stockholm-based founder of Pixlr.

While Pixlr itself is meant to be easy to use, Mr. Sevandersson also created an even simpler version that does most of the work with the push of a button.

Pixlr includes another feature that allows users to modify the colors in a photo. For example, effects named Melissa, Sophie or Tony (to make them easier to remember) will mute colors and change the focus to imitate the film and lenses commonly used in different eras. The vintage ’60s effect, for instance, amplifies the red tones and mutes the blues, effectively producing more yellows and purples, and imitating the way that films and photographic paper of that time reproduced light from the scene.

Other sites take photo editing into different realms. Taaz.com, for instance, allows people to test various colors of makeup.

“Our main positioning is not as a photo modification site,” said Deepu John, vice president of marketing at Taaz, which is based in San Diego. “It’s a site where women can try on thousands of different makeup colors on themselves.”

Users upload a photo of themselves and can then modify it by trying on foundation, lip gloss, blush and other cosmetics. Cosmetic companies pay fees to the company to include their products. Making the images look realistic was a challenge for the company’s software designers, Mr. John said. “We have to focus on light interacting with surface. That’s part of the key to realism.”

The makeup test is licensed by Taaz to other Web sites like People.com and Esteelauder.com.

Mr. John said more than a quarter of a billion tests of makeup products were performed each month on all the sites.

Yet another site is Bighugelabs.com, where users create badges, jigsaw puzzles and art work meant to emulate the styles of Andy Warhol or David Hockney. John Watson, the site’s founder, said it had almost a half million registered users.

The most popular service, he said, produces images that imitate a popular line of black-matted, motivational posters often found in office hallways. The site matches a picture with a caption and produces an image with the correct typeface. Many of the people visit the site to produce posters that are sarcastic, not inspirational.

“I think most people can be creative but not everyone is going to learn to play guitar,” Mr. Watson said. “But there are other ways for people to be creative. You can give them tools that allow themselves to express themselves in ways they couldn’t before.”

By:  Adam Dachis

Photoshop is an incredibly powerful but also intimidating application. If you've wanted to start using Photoshop but didn't know where to start, we'll be teaching you the basics all week long.

The video above is your lesson. It's short considering how much it covers and long considering it's on the internet. In the video, we take a look at every tool in the toolbar, your palettes on the right side of the screen, and what you'll find in the menus. Below you'll find a reference for this lesson. Once the lessons are over, we'll provide everything all in one place and a downloadable PDF file containing references for each lesson.

Wait! I don't have Photoshop!

Are you not currently a Photoshop user? Adobe offers a Photoshop 30-day trial that you can download right now and it will provide you with plenty of time to learn how it works. If you don't want to eventually purchase Photoshop because it's too expensive, much of what we're going to discuss in these lessons will apply to not just to Photoshop but pretty much most of the standard photo-editing and design tools you'll find (Pixelmator is a great $30 alternative on the Mac, and GIMP is a free, open-source cross-platform option). We've chosen Photoshop because it's the most commonly used, but you're welcome to follow along using other software as well. Today's lesson is pretty Photoshop-specific, but as we move along you should be able to use other software to do most of what we discuss.

Ready? Let's get started.

The Toolbar

We're not going to take a look at every single tool but we are going to look at almost every one of them. While this overview will give you an idea of what each tool does, go find yourself a photo and start playing around with them.

Move Tool (Keyboard: V)

The move tool simply lets you move objects in a given layer around the Photoshop canvas. To use it, click anywhere on the canvas and drag. As you drag, the Photoshop layer will move with your mouse.

Marquee (Keyboard: M)

The marquee lets you select part of the canvas in a specific shape. By default you get a rectangular (or perfect square if you hold down shift while selecting), but you can also select in the shape of an ellipse (or a perfect circle if you hold down shift while selecting).

Lasso (Keyboard: L)

The lasso is a free-form selection tool that lets you drag around the canvas and select anything the lasso'd area covers. Within this tool you also have access to the polygonal lasso, which lets you create a selection by clicking around on the canvas and creating points, and the magnetic lasso, which works the same as the regular lasso but attempts to detect edges for you and automatically snap to them.

Magic Wand (Keyboard: W)

Clicking an area with the magic wand will tell Photoshop to select the spot you clicked on and anything around it that's similar. This tool can be used as a crude way to remove backgrounds from photos.

Crop Tool (Keyboard: C)

The crop tool is used to (surprise!) crop your pictures. You can specify the exact size and constrain the crop tool to those proportions, or you can just crop to any size you please.

Eyedropper (Keyboard: I)

The eyedropper tool lets you click on any part of the canvas and sample the color at that exact point. The eyedropper will change your foreground color to whatever color it sampled from the canvas.

Healing Brush (Keyboard: J)

The healing brush lets you sample part of the photograph and use it to paint over another part. Once you're finished, Photoshop will examine surrounding areas and try to blend what you painted in with the rest of the picture.

Paintbrush and Pencil (Keyboard: B)

The paintbrush is a tool that emulates a paintbrush and the pencil is a tool that emulates a pencil. The paintbrush, however, can be set to many different kinds of brushes. You can paint with standard paintbrush and airbrush styles, or even paint with leaves and other shapes as well.

Clone Stamp (Keyboard: S)

Like the healing brush, the clone stamp lets you sample part of the photograph and use it to paint over another part. With the clone stamp, however, that's it. Photoshop doesn't do anything beyond painting one area over a new area.

History Brush (Keyboard: Y)

The history brush lets you paint back in time. Photoshop keeps track of all the moves you make (well, 50 by default) and the history brush lets you paint the past back into the current photo. Say you brightened up the entire photo but you wanted to make a certain area look like it did before you brightened it, you can take the history brush and paint that area to bring back the previous darkness.

Eraser Tool (Keyboard: E)

The erase tool is almost identical to the paintbrush, except it erases instead of paints.

Paint Can and Gradient Tools (Keyboard: G)

The paint can tool lets you fill in a specific area with the current foreground color. The gradient tool will, by default, create a gradient that blends the foreground and background tool (though you can load and create preset gradients as well, some of which use than two colors).

Blur, Sharpen, and Smudge Tools (Keyboard: None)

All three of these tools act like paintbrushes, but each has a different impact on your picture. The blur tool will blur the area where you paint, the sharpen tool will sharpen it, and the smudge tool will smudge the area all around the canvas. The smudge tool is very useful in drawing for creating nicely blended colors or for creating wisps and smoke that you can add to your photos.

Burn, Dodge, and Sponge Tools (Keyboard: O)

The burn, dodge, and sponge tools are paintbrush-like tools that manipulate light and color intensity. The burn tool can make areas in your photo darker. The dodge tool can make them lighter. The sponge tool can saturate or desaturate color in the area you paint with it. These are all very useful tools for photo touch ups.

Pen Tool (Keyboard: P)

The pen tool is used for drawing vector graphics. It can also be used to create paths that can be used for various things that we'll discuss in a later lesson (although if you watch the video you can see a type path being created).

Type Tool (Keyboard: T)

The type tool lets you type horizontally. Tools hidden beneath the horizontal type tool will let you type vertically and also create horizontal and vertical text masks.

Path Tool (Keyboard: A)

The path tool lets you move any created paths around. It's like the move tool, but for paths.

Shape Tool (Keyboard: U)

The shape tool lets you create vector rectangles, rounded rectangles, circles, polygons, lines, and custom shapes. These tools are very useful when designing or when creating shape masks for photos.

3D Tools

These are the 3D tools. We're not going to be dealing with 3D stuff in these lessons so all you really need to know is that these exist. If you're curious, this video will give you an idea of what these tools can do.

Hand Tool (Keyboard: H)

The hand tool allows you to click and drag around the Photoshop canvas. If the entire canvas currently fits on the screen, this tool won't do anything. This tool is for easily navigating around when you're zoomed in, or a picture is simple too big to fit on the screen at 100%.

Zoom Tool (Keyboard: Z)

The zoom tool lets you zoom in and out of the Photoshop canvas by clicking on a given area. By default, the zoom tool only zooms in. To zoom out, hold down the option key and use the zoom tool as you normally would.

Color Selection Tools (Keyboard: D for defaults, X to switch foreground and background colors)

These tools let you manage the colors you're using. The color on top is the foreground color and the color in back is the background color. The foreground color is what your brushes will use. The background color is what will be used if you delete something from the background or extend it (although now, Photoshop CS5 will give you the option for using your foreground color instead in some circumstances). The two smaller icons up top are shortcut functions. The left one, showing a black square on a white square, will set your foreground and background colors to the defaults (Keyboard: D). The double-headed curved arrow will swap your foreground and background color (Keyboard: X). Clicking on either the foreground or background color will bring up a color picker so you can set them to precisely the color you want.

Palettes

Palettes are the things that you see sitting over on the right side of your screen. They make it easy for you to navigate through your document, add adjustments, switch modes, and other things.

Layers

The layers palette lets you see all the layers in your document. As you start getting to know Photoshop, you'll find yourself in this palette more than any other. It'll let you organize and arrange your layers, set blending modes, set visibility and opacity of layers, group and merge layers, and a bunch of other neat things we'll learn about in future lessons.

Adjustments

Your adjustments panel is where you can easily create and edit adjustment layers. Adjustment layers are non-destructive image alterations that affect all the layers below them and can easily be turned on and off. Their most common use is for color correction (namely the Levels and Curves adjustments, but there are many different kinds of adjustments you can perform that can dramatically alter the look of your image.

Color Channels

The color channels palette will let you look at the specific colors that make up your picture. If you're in RGB mode you'll get red, green, and blue. These color channels will differ if you're in a different color space (such as CMYK or LAB). When you choose a specific color, you'll notice you'll be shown your image in different versions of black and white. This is because each color channel is simply a monochromatic images representing the light in each channel (e.g. the red channel is just a look at the red light in your photo). Switching between these different channels is useful for making color channel-specific touch ups, overall contrast enhancements, and also for converting your photo to black and white in a compelling way. This will be discussed in greater detail in a later lesson about color correction and photo enhancements.

Color Picker

This palette will let you easily alter your foreground and background colors using sliders.

Color Swatches

The color swatches palette is a set of pre-defined colors you can quickly choose from. You can load in several other pre-made swatch collections or create your own, too.

History

The history palette lets you go back in time to undo any previous alterations. The standard undo command (in the edit menu) will simply toggle between undoing and redoing the latest action performed on your image. The history panel is where you can go back much further (50 actions by default).

Text

The text palette, and the paragraph palette below it, let you make all sorts of adjustments to any text you create with the type tool. These options are very similar to what you'll find in a word processing, but you can also specify things like character width and spacing which are more useful in design.

Menus

Most of what you'll find in Photoshop's menus can be found using the previously discussed tools. Nonetheless, we're going to take a quick look at some notable items in each of the menus.

File

File, as usual, handles opening, saving, and closing operations. Towards the end of these lessons we'll be taking a look at your different saving options (namely Save for Web).

Edit

Edit, as usual, brings you copy, cut, and paste. In Photoshop, it's also where you transform layers and set your color spaces.

Image

Image brings you canvas and image adjustments, including destructive effects that you'll also find in your adjustments palette. Options in this menu are designed to affect the image as a whole, although many adjustments are applied to only a single layer.

Layer

Layer lets you do all of the things you can do in the layer palette with a few more options. This menu also lets you create adjustment layers and smart objects (a group of layers treated as a single object).

Select

While the marquee and lasso tools will be your main means of selecting things, the select menu can help you refine that selection or create entirely new selections based on certain criteria (such as color range and luminosity).

Filter

Filter brings you a wealth of built-in (and, if installed, third-party) Photoshop filters that can blur, sharpen, distort, and alter your image (or layers of the image) in many different and unique ways. The best way to get acquainted with these filters is to try them all. That can take a little time, but it's fun to play around with them and see what they do. We'll be getting into the specifics in subsequent lessons, but only looking at a few commonly useful filters.

Analysis

Analysis provides you with measurement tools. There will be times when you need them to make accurate alterations to your images. We will not be covering anything in this menu in these basic lessons.

3D

As previously noted, we're not covering 3D. If you decide to learn more about 3D later, you may want to explore this menu on your own at some point.

View

View provides you with various view options, lets you hide and show line guides you've created (see video for an example), and make Photoshop snap (or not snap) to corners, edges, and to the grid on the canvas. Viewing of this invisible grid can also be turned on and off in the View menu.

Window

Window lets you hide and show certain windows and palettes. You can also arrange your Photoshop windows and palettes however you want and save them as a window preset.

via:mashable

Jonathan Goldford is a partner at JG Visual, an Internet strategy company that works with organizations to develop and implement their online presence. You can connect with Jonathan on the JG Visual Facebook Page.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million “Likes” and are growing rapidly.

While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page

Actually designing a Facebook Page is very similar to designing any website, except for a few considerations:

• Design for a 520px Width — Facebook Pages must fit within a width of 520px. Since we can’t use abody tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px.
• Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up.
• Account for the Width of the Company’s Name -– Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name. The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Once you take a screenshot of your Facebook Page, pull it into a design program like Photoshop and design over it. Here is a look at a piece of our final Facebook Page design.

Programming Your Company’s Facebook Page

Now that we have a design we’ll walk through how to program our landing page to use on Facebook.

Begin Programming Outside of Facebook

There are a number of reasons why we should start programming our Facebook landing page outside of Facebook.

Program the Page Without FBML

Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML). In order to account for how Facebook will handle our code, we will adjust our code to follow these rules as we build our page.

• Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS. 90% of the code will act exactly the same way. The rest you can adjust when you move the code onto Facebook.
• Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal style sheets on Facebook Pages.
• Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Facebook will not host any files for you.
• Make All Paths Absolute — All paths to external files must be absolute. Write an image link like
  
  . Don’t write images/pictures.jpg.
• Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. Use a class with the style display:block to remove the space. In our code, we use the class “nospace” to implement this style.

To start, create one HTML and one CSS file. The HTML file will hold the HTML and eventually the FBML. The CSS file will hold all of your styles. We’ll call them facebook.html and facebook-styles.css.

Start by linking to the CSS file and creating a div with an ID of container. Give the container a width of 520px in the CSS. Also, if you want to brand your landing page a little better, you can choose a font. To override Facebook’s default paragraph style, we added a font-family style for #container p. Finally, Facebook uses a default font size of 11px and a font color of #333. To best imitate Facebook while testing, we included the 11px font size and also set the container text color to black to match our company colors.

facebook.html

facebook-styles.css

Create the remaining HTML and CSS for your Facebook landing page. Here is the code we have after finishing our page. At this point our landing page should look exactly how we presented it in the design instructions before.

facebook.html

facebook-styles.css

Test the landing page in all the browsers at this point to make sure it appears correctly. You really should test the page throughout building, but this serves as a good reminder.

Add in the Necessary FBML

The page looks exactly as we expected it to, but right now if someone already Likes our page, they will still see the call to action for them to Like at the top. Let’s put in a conditional statement using FBML that only shows the action image when you aren’t logged in or haven’t Liked the page. This way, once someone Likes the page, they won’t be prompted to do so again.

Regular HTML

HTML with the FBML Conditional Statement

Let me explain the code:

• fb:visible-connection — This code checks to see if the user has Liked the page before. If the user has Liked the page then the content inside will appear.
• fb:else — In this case fb:else will display only to users who haven’t Liked the page. That is why we put the call to action inside the else statement. Also, unlike typical else statements, fb:else is placed inside the other conditional.
  • Click “Edit Page” on your Facebook Page.
  • Click “Apps” on the left side of the page.
  • Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page.
  • Copy and paste your HTML code into the FBML box.
  • Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top. We used “Who We Are.” Hopefully you can think of something more creative.
  • Click “Save Changes.”
  • Go view your Facebook landing page.
    • Click “Edit Page” on your Facebook Page.
    • Click “Manage Permissions” on the left side of the page.
    • Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page.
    • Click “Save Changes.”

  ---

  Make Your New Landing Page the Default Landing Tab

  ---

  Now that you’ve put in all of this time programming your custom landing page, you probably want to make it your default landing page. This way, when someone that has not Liked your page comes to it, they will be taken to your custom landing page instead of your wall. Here’s how to do it:

  Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Check with someone who has Liked your page and is not an admin to make sure they only see the content that’s meant for them.

  ---

  Congrats, You’re Finished!

  ---

  Nice work. You’re done. In case you need it, here are the final HTML, FBML, and CSS we used for our Facebook landing page.

  HTML and FBML

   

  <link href="http://www.jgvisual.com/wp-content/uploads/facebook/facebook-styles.css?v=1.00" rel="stylesheet" type="text/css" />

  <div id="container">

  <fb:visible-to-connection>

  <fb:else>

  <img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/like-text.gif?v=1.0" class="nospace" />

        </fb:else>

  </fb:visible-to-connection>

      <div id="service-areas">

      <p>

      Web Design &#8226; Web Development &#8226; Photography &#8226; Video Production &#8226; Copywriting &#8226; Social Media &#8226; Search Engine Optimization &#8226; Search Engine Marketing

      </p>

      </div><!-- service-areas -->

      <div id="service-area-links">

       <div class="service-area"><p>web design</p><a href="http://www.jgvisual.com/web-design/">

  <img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/website-design.jpg?v=1.0" class="nospace" /></a></div>

          <div class="service-area"><p>portraits</p><a href="http://www.jgvisual.com/st-louis-portrait-photographers/">

  <img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/portraits.jpg?v=1.0" class="nospace" /></a></div>

          <div class="service-area"><p>locations</p><a href="http://www.jgvisual.com/st-louis-location-photographers/">

  <img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/locations.jpg?v=1.0" class="nospace" /></a></div>

          <div class="service-area"><p>events</p><a href="http://www.jgvisual.com/st-louis-event-photographers/">

  <img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/events.jpg?v=1.0" class="nospace" /></a></div>

      </div><!-- service-area-links -->

      <div id="testimonials">

      <h2>Testimonials:</h2>

      <p>"JG Visual delivered exactly what they promised, a website that was appealing, user friendly and informative. Coincidentally those were our goals when we began looking for a website designer. <strong>JG Visual was very easy to work with and they kept us on schedule with little bloodshed.</strong> I would recommend this team whole-heartedly."

      <em>- Tim Brown, Vice President/General Manager, Zip Mail Services, Inc.</em>

      </p>

      <p>"JG visual made the process of editing and launching a website easy and seamless. <strong>In addition to delivering everything on time and on budget, they found innovative ways to improve the site we hadn't found ourselves.</strong> We hope to have the occasion to work with the JG Visual team again soon."

      <em>- Max Slavkin, Partner, Big New Ideas</em>

      </p>

      <p>"I hired JG Visual to develop my website and they far exceeded my expectations. <strong>After an exhaustive search for the right web designer, I found JG Visual to be a breath of fresh air.</strong> They were organized, professional and very personable as we jointly developed my website. There were often times throughout the process that they made recommendations that positively impacted the overall design. Quite simply, they "get it"! I would definitely hire JG Visual again and plan to continue growing my online presence with the firm."

      <em>- Lorie Burkemper, Founder, iSymplify</em>

      </p>

      <p>"From our first meeting, the staff at JG Visual was professional, organized, and prepared to work with us as a team. Hearing our own vision, they helped us achieve it in a timely, efficient manner. <strong>Their warmth and approachability resulted in excellent customer service skills, and I would strongly encourage colleagues and also friends to use their services.</strong> JG Visual made the process of building a website actually fun and enjoyable."

      <em>- Christan Perona, Director of Admissions, Central Christian School</em>

      </p>

      </div><!-- testimonials -->

      <div id="awards">

      <h2>Awarded:</h2>

      

      </div><!-- awards -->

  </div><!-- container -->

  view rawgistfile1.txtThis Gist brought to you by GitHub.

   

  CSS

   

  @charset "utf-8";

  #container {

  width: 520px;

  font: 11px Arial, Helvetica, sans-serif;

  color: #000;

  }

  #container p { font-family: Arial, Helvetica, sans-serif; }

  a img { border: none; }

  .nospace { display: block; }

  .image { margin: 0 auto; }

  h2 {

  font-size: 1.6em;

  font-weight: bold;

  color: #ff9200;

  font-family: Georgia, Arial, Helvetica, san-serif;

  }

  strong {

  color: #ff9200;

  font-weight: bold;

  }

  em { font-style: italic; }

  #service-areas {

  background-color: #000000;

  padding: 20px 57px 97px 17px;

  }

  #service-area-links {

  margin: -102px 0 0 0;

  height: 1%;

  }

  .service-area {

  float: left;

  margin: 0 7px;

  display: inline;

  }

  .service-area p { font-size: 1.25em; }

  .service-area p a {

  color: #ff9200;

  text-decoration: underline;

  }

  .service-area p a:hover { text-decoration: underline; }

  #service-areas p { color: #ffffff; font-size: 1.5em; }

  #testimonials p, #awards p { font-size: 1.2em; }

  #testimonials em {display: block; }

  view rawgistfile1.txtThis Gist brought to you by GitHub.

In case you want to add something else besides a call to action for your Like button, below are some examples of other commonly used FBML items.

Adding the User’s Name — fb:name

Fb:name will display the full name of the logged in user. For example, if a user named John Smith comes to your page the code below will display “John Smith”. This can be used to greet a user by name when they come to your landing page.

Adding the User’s Profile Picture — fb:profile-pic

Fb:profile-pic will display a user’s profile picture if they come to your landing page. For example, the code below will display the current user’s profile picture at 64px by 64px.

Adding a Share Button — fb:share-button

Fb:share-button will display a share button that allows users to share a link on their own profiles. For example, the code below will display a basic share button for Mashable.

Adding a YouTube Video or SWF File — fb:swf

Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s YouTube video will automatically play.

Unfortunately, Facebook requires that the image be clicked before the video will play. You can create your own image to show through the imgsrc parameter. We wrapped the FBML in a container div to allow us to style it and added ?autoplay=1 to the end of swfsrc so the user won’t have to click twice to play the video.

If you want to add your own YouTube video, replace the text in the parameters swfsrc and imgsrc where it says “1B95KLmpLR4” with the ID of the YouTube video you want. You can find the ID in the URL of any YouTube video after the text .

Adding an FLV file — fb:flv

Fb:flv will display a video player for FLV files. For example, the code below will display a play button that you click to play the FLV video. fb:flv provides the player and all the controls. All you need is the FLV file.

Adding an MP3 File — fb:mp3

Fb:mp3 will display and play an MP3 music file. For example, the code below will display a music player that users can click to play. The player will then rotate through a display of the song title, song artist, and the album name.

Adding a Form

While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages. To do this, copy and paste your form code into the FBML submission box. Make sure you use the following code to start your form:

Adding target="_blank" will open a new window when the form is submitted so the user isn’t taken away from Facebook.

If you want to add a newsletter signup form to Facebook, both MailChimp and CampaignMonitor have tutorials that explain the process. If you don’t use one of those services, you can usually drop in the code from your e-mail marketing company to make this work.

Adding JavaScript

Adding JavaScript is outside the scope of this article, but you can learn more about Facebook JavaScript atdevelopers.facebook.com/docs/fbjs. As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action.

If you haven’t found the FBML you’re looking for, visit Facebook’s Official FBML page.

Publishing Your Company’s New Facebook Page

After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page.

Uploading External Content, Adjusting Links, and Adding a Version Query String

Once we’re done adding all the necessary FBML we need to move all the CSS, images, videos, and other external files to a server. To host your files, we recommend using your website’s server if possible.

Once all of our files are located on a public server, we need to adjust our HTML to make all of our paths absolute and add a version query string. Previously I mentioned that Facebook caches all of your external files. This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page. This happens because Facebook doesn’t know the file has changed and is loading its older saved version. To trick Facebook, we use a query string at the end of our filenames and increase the number whenever we make a change to that external file. Facebook then thinks we’re using a different file and loads it up.

Old Relative Path with No Version Query String

New Absolute Path with the Version Query String

Test Your Page Using the JavaScript Test Console

One of the biggest disadvantages of Facebook landing pages is that Facebook provides no place for you to test your code. We have to use the Facebook JavaScript Test Console.

Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action. If everything looks good, you’re ready to publish your finished Facebook landing page. If not, make sure to check the links to your external content. Also, I noticed that the Facebook JavaScript Test Console has trouble loading videos, so you may be forced to test that code directly on your landing page.

Publish Your Finished Facebook Landing Page

Finally, you are ready to publish your HTML file to the Edit FBML screen. Follow these steps:

Does Photoshop fascinates you but the road to master it seems difficult. Don’t worry,everything can be achieved by having a clear sense of purpose and direction. Its well said that beginning is half way done. Thus clearing your basics are utmost important to master this art. Photoshop can do wonders. So today we have come up with some Basic detailed guides to brush up our skills and thus making you confident enough to jump to advanced level with ease.

In this introductory chapter, which has been adapted from The Photoshop Anthology, 101 Web Design Tips, Tricks and Techniques, author will cover some of the basic tools and tasks that we’ll draw on in the later chapters.

Article Link

The Ultimate Guide To Cloning In Photoshop

This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

Article Link

Photoshop Layers Essential Power Shortcuts

When it comes to getting the most out of Photoshop with the least amount of effort, there’s two things you absolutely need to know – how to use layers and how to get around inside Photoshop using keyboard shortcuts.

Article Link

A Comprehensive Introduction to the Type Tool

Who doesn’t know the Type Tool? This is maybe one of the most powerful and useful tools of Photoshop. We’ve all used it at least once, but do you know all its potential?

Article Link

The Lasso Tool

If you’re a more advanced Photoshop user, you’ll probably head straight for the Pen Tool, the tool of choice for making professional quality form-based selections.

Article Link

A Comprehensive Introduction to Photoshop Selection Techniques

Have you ever had difficulties making selections and thought there was a better way? Let’s review both quick solutions, and on the other side, comprehensive and details techniques for making selections.

Article Link

Layer Styles in Photoshop

Effects can be added to individual layers in Photoshop that automatically change as a layer is modified. The combination of effects on any given layer is called its Layer Style. We’ll teach you how to use and make your own layer styles in this tutorial.

Article Link

Photoshop’s Painting Tools

In Photoshop, the painting tools are used to paint strokes, and fill areas with color or with colors that blend together. Knowing how to use the paint tools is a must for any artist who wishes to use Photoshop.

Article Link

Installing And Managing Brushes And Other Presets

How to install new Photoshop Brushes and also discuss a few techniques that will help you keep your additions organized and safe.

Article Link

Photoshop’s Pen Tool: The Comprehensive Guide

The Pen Tool makes appearances across almost the entire Adobe product range. Its function and behavior varies depending on the application, but by mastering it youll find you work quicker, smoother and with better results. This guide will give you a comprehensive basis for working with the Pen Tool in Photoshop.

Article Link

Photoshop’s Filters

Filters are used to change the appearance of an image, layer or selection in Photoshop. In this tutorial, author will introduce you to some common filters, and show you how to use them.

Article Link

Mastering “Bevel and Emboss” – From Beginner to Pro

How to get the very best out of the “Bevel and Emboss” tool that Photoshop has to offer to make your designs look ultra realistic.

Article Link

Layer Masks

Layer Masks are a very powerful part of Photoshop.

Article Link

Photoshop Actions

We’ll look at what Photoshop actions are and what the difference is between an action and an action set. We’ll explore some of Photoshop’s Default Actions as well as the additional action sets that install for free with Photoshop.

Article Link

Create Your Own Photoshop Custom Shapes

Everything you need to know to create and work with custom shapes in Photoshop.

Article Link

For web designers and developers looking to take on new projects, the Internet offers a great number of online resources that can help them find work. Though the competition for jobs is fierce (and on a few of the sites below, that competition is the whole point), whether you’re looking for a full-time career, a contract project, some quick freelance work, or something else, the web offers designers and developers a wealth of job opportunities — if you know where to look.

Take a look at the 15 services we’ve compiled in the list below. Any one of them could help you find your next project or boss. Have you used any of these services? Let us know in the comments.

1. Job Boards

Job boards are the most traditional way of finding work, and in the past few years, industry-specific job boards have begun to supplant traditional, general classifieds on the web as one of the best ways to find gigs. Many offer freelance options as well as full-time positions.

• Freelance Switch’s Job Board – Freelance Switch offers up jobs for creative freelancers in categories like design, development, illustration and writing. Flipping the script a bit compared to most job boards, postings for employers are free, but applicants must subscribe for $7/month in order to get full access to job details. The idea is that the fee will result in a higher quality applicant pool and thus, higher quality job postings.
• Krop – Krop is searchable by keyword (so you can look up just freelance options) and sharable if you see a vacancy worth shouting about. An impressive list of employers have used Krop over its 10-year history, mostly because the site attracts top-tier creative talent.
• Coroflot – Also used by some of the largest companies in the world, Coroflot is a great place to find both freelance and full-time design employment. Other related creative jobs are also posted on the site.
• Smashing Jobs – Aptly named, this job board is run by super popular web designer resource site Smashing Magazine, and includes both freelance and full-time job opportunities for designers and developers.
• AuthenticJobs – There are categories for both contract and freelance work on Authentic Jobs, which offers it own-branded URL shortener if you want to tweet out vacancies
• Behance JobList – Design and creative network Behance offers a job list that attracts quality opportunities in a wide range of creative fields including web design, advertising, and marketing. Job applications can also be automatically linked to your Behance portfolio (see below).
• The AIGA – The AIGA differentiates its offerings with categories for internships and pro bono work and categories for a broader range of design fields, including advertising and architecture. Because of the AIGA name it tends to attract mostly very high quality employers.
• Mashable’s job board – Though our focus is social media, the Mashable job board is used for a wide variety of web-related creative jobs, including design and development. It offers filters to make it easier to narrow down content to just what you are looking for.

2. Let Employers Find You

Rather than explicitly seeking out and applying for jobs, the services below allow you to post your portfolio and help clients find you.

• Sortfolio – A product of 37signals, Sortfolio offers the most simple scheme to connect clients with designers: an online database of designers ranging from big firms to freelancers. Designers can add themselves for free (or upgrade to a Pro account which gets them a bigger, better listing) and clients can hit up the site to browse by city and budget to find their next designer. 37signals also offers a traditional job board for design and development work.
• Coroflot, Krop and Behance – In addition to the traditional job boards mentioned earlier in this post, Coroflot, Krop and Behance all also gives designers the opportunity to post samples of their work in an online database of creatives. Clients can then search for a designer that is a good fit for their open job or project.
• Upstack – Currently in beta, Upstack works a bit differently than the other sites on this part of our list. Designers do post their portfolio on the site, but they also have to express interest in project briefs from clients in order to get chosen for a job. That makes Upstack sort of a combination job board / portfolio site.

3. Design Contest Sites

The following sites use the concept of contests to match designers and clients. Generally, it works like this: a client posts a brief detailing what they want, designers then post designs based on that brief and iterate based on the client’s feedback. In the end, the client selects a “winner,” who is rewarded with a (usually monetary) prize.

There is a good deal of debate in design communities over whether design sites are good for designers or exploitative. Regardless of your opinion on the matter, they appear to be here to stay, and many designers do find value in them (either as a way to make money, a way to gain experience working with real clients, a way to fill in the gaps between jobs, or as a way to potentially meet new clients).

• 99designs – Originally part of the SitePoint forums, 99designs is one of the largest and oldest design contest sites and charges clients $39 to launch a project. The site has run over 40,000 contests and has awarded greater than $10 million in prizes since its inception.
• crowdSPRING – crowdSPRING works on the same basis as the rest of the sites in this list, and charges a client $39 to post a brief. It is one of the largest contests sites on the web, with over 50,000 creative professionals signed up. That’s good news for clients because it means that most projects get an average of 100-plus entries. The good news for designers is that clients pay up front, crowdSPRING suggests minimum budgets for design work, and it’s the client that foots the bill for the 15% commission, not the designer.
• DesignOutpost – One of the oldest design contest sites, DesignOutpost is part of the wider “Outpost” network of contest-based freelance sites and takes a 10% cut. It doesn’t offer a modern interface like 99designs or crowdSPRING, instead relying on a “forum” system, which is how many design contest sites started. However, there are plenty of web-related projects available for those that register.
• DesignContest.net – Another of the original contest-based sites, DesignContest.net has been around since 2003 and specializes in logo design (though web, print, and illustration projects can be found as well).
• DesignCrowd – Formerly known as DesignBay, this site charges clients $30 to post a new project. As a designer you can browse the design contests in the “web design” category, pick projects you’d like to have a crack at, and set a small “participation ‘base’ payment” before you submit a design. Once the client picks the favored design, if you’re the design contest winner, DesignCrowd will pay you your fee via PayPal, minus a 10% commission.
• Hatchwise – Though heavily focused toward logo design, Hatchwise also has a few general web design contests as well, so it is worth checking out no matter what type of design you specialize in.

If you’re using your social media profiles to promote your personal brand or business, chances are that pre-made themes and watermarked templates just won’t cut it. You need a custom design to make your profile stand apart from the rest and convey important information about who you are.

Some of our favorite social networks afford us this customization, but there are a few tricks that may save you some time and frustration when creating a custom profile background. While none of these can replace the eye of a great graphic designer, they should help you get a sense of the layout you’re after.

Choose an Image Editor

---

To start, you’ll need an image editor. Photoshop is probably best suited for the task, but there are plenty of free alternatives on the web.

Gimp is a free, open source image editing and compositing tool that has many of the layering and filtering abilities of Photoshop.

Aviary’s Phoenix is another great free tool that is entirely web based. You can edit and layer images in a Photoshop-like environment right in your web browser, then save the finished product to your desktop.

Photoshop.com also offers a free, “lite,” web-based version of the popular editor.

Once you’ve chosen your tool, it’s time to get to work.

Twitter

---

A great Twitter background makes an impression on potential followers. It should communicate who you are and what people should expect from your tweets. Here are some examples of great Twitter backgrounds:

Dimensions: The column that contains your tweets and profile information will always take up about 760 pixels of screen real estate. What’s left for the background will be determined by the user’s monitor. Everyone viewing your profile will see it a little differently, depending on the resolution of their screen. A safe bet to ensure that your background will not be cut off or tiled at most resolutions is a 1680 x 1200 pixel image. The image resolution should be web standard 72 dpi.

Maximum File Size: 800 KB

Layout: Accounting for the 760 pixel center column, the space left over on either side will depend on the visitor’s resolution. The space at the top for the Twitter logo will remain constant at about 65 pixels, and a good rule of thumb is to leave about 200 pixels at the left for your design. This will accommodate most monitor resolutions.

Twitter aligns the background image to the top left, so it is important to focus your main content in that area as shown. The further to the left an element appears, the least likely it will be cut off on a low resolution monitor.

There are a few tools that may help you determine what your layout will look like at different resolutions. To quickly determine your own resolutions as a reference point, jump over to whatismyscreenresolution.com.

For FireFox users, the Web Developer add-on will resize your browser to fit common monitor resolutions so you can see what your layout might look like for other users.

Screen-resolution.com is also a handy tool for popping URLs into resolution-specific browers windows.

Design Tip: Don’t clutter your background with too much information. Because URLs are not clickable in a background, this space is better suited for logos, photos, or other clean graphic elements that express who you are. If you’re encouraging people to connect with you outside of Twitter, make sure the one URL in your profile links to your contact information.

Also, be sure to choose text and link colors that compliment your background.

How To Add It:

YouTube

---

A branded YouTube channel is a great way to identify yourself to viewers when they land on your video pages. Here are some examples of great YouTube channel designs:

Dimensions: YouTube channel backgrounds work similarly to Twitter backgrounds in that they must account for the fixed width of the channel content. The area that displays your videos and profile information is 960 pixels wide. Note that the top area that displays the YouTube logo and search is not taken into account with regard to your background. Your background image will begin below the white YouTube bar, so all content should be started near the top of your image.

Like Twitter, screen real estate depends on monitor resolution. A good image size to work with is 2000 x 2200 pixels total.

Maximum File Size: 256 KB

Layout: It is important to understand that YouTube will center your background image behind your channel content. This means that your important image content should appear just to the left and right of the 960 pixel center column. It also means that people with large or widescreen monitors will see much more of your image stretching out to the right and left of their screen. This is why it’s good to use a very wide image (2000 pixels, in this example).

Whereas your Twitter background should be focused as far to the left as possible, the content in your YouTube background should be as close to the central 960 pixel column as possible without going behind it. Again, test different resolutions with the tools above to see where viewers might be cropping your image and adjust accordingly to account for variation.

Design Tip: Because widescreen monitors may view much more of your image on the left and right, it may be useful to incorporate a fade to a solid color on each end. Then, make the page background that same color to avoid an unsightly “break” in the design.

Also, be sure to implement complimentary box and text colors.

How To Add It:

MySpace

---

Though MySpace has fallen out of vogue in recent years, it is still a viable platform for younger users and a destination for many bands and music sharers.

If you’re looking to make a statement with your MySpace page, a well-tailored background could do the trick.

Here are some impressive ones:

Dimensions: MySpace’s “Profile 2.0″ customization is actually very flexible and allows a few options. You can change your content size between 960 pixels, 750 pixels, or 100% (which wipes out the background entirely). Decide which layout you like best and build your background to match. The full size should account for large monitors, so something in the neighborhood of 2000 x 2200 pixels should work here as well.

Maximum File Size: Any, but best to keep it under 500K for quick load times.

File hosting: Unlike Twitter and YouTube, Myspace will not host your background file, but simply reference it from a URL. If you don’t own web space, there are plenty of places you can host an image for free, including PhotoBucket and ImageShack. Upload your image to one of these sites and paste the image URL into MySpace’s layout editor.

Layout: Again, MySpace is surprisingly flexible, and the advanced layout editor allows you to align your background against any quadrant of the screen, or center it. It’s up to you how you want to approach the layout. Simply account for your content column (750 or 960 pixels) and design around it. Then position your image accordingly. The best designs fit their graphic elements snugly against the content column so that they’ll be visible at any resolution.

How To Add It:

Others

---

The two other big dogs of social networking, Facebook and LinkedIn, don’t offer background customization options. While this may be a disappointment to some, many would argue that the clean, uniform look of these sites has contributed to their success.