Tumblr is a microblogging platform that is excellent for short posts. Just as television has not displaced listening to music, Tumblr does not displace the need for WordPress or other blogging platforms, but for some types of posts it is the better choice.

It is Free

While you can pay for custom themes or extras such as promoting your blog, Tumblr can be fully utilized for free.

It is Easy

For many users the biggest advantages of Tumblr is its ease-of-use. There are a wide variety of free themes most of which allow for some customization. There are also a variety of apps along with the ability to post by email or phone making it easy to update your Tumblr even when you are away from your computer. The Tumblr user interface is simple. There are seven buttons with one for each type of post. The buttons are logically labeled in non-technical language and the rules are clear. Tumblr also includes an optimized layout for viewing on a mobile device. Unlike many sites, Tumblr makes it easy to delete your blog.

There are numerous free Tumblr themes. Choosing and customizing themes is easy. The customization options for themes varies radically. If you are using a free theme it is good to check the customization options as well as the look of the theme. The Theme Customization options are listed under Appearance.

Tumblr allows a user to create multiple Tumblr blogs under the same account. Thus, you can create a blog for your photography, one for your love of reading, and one for sharing silly stories about your pet.

Just a Quick Post…

Tumblr is particularly suited for the times when Twitter is not enough, but WordPress, Moveable Type, or another full blogging platform are more than you need. Whether it is the link you wanted to share, but which you also wanted to include your thoughts beyond the Twitter character limit, the one picture or texture you wanted to post, the long quote you wanted to share, or the video you just posted on YouTube, Tumblr provides a good platform.

Tumblr also allows for pages separate from posts. Many layouts automatically include these pages in the menu. These are good for “About” pages and for providing more information about the subject of the blog.

The Social Side

One of the challenges of having a blog is getting people to visit it. Tumblr makes it easy to “Like” a post or reblog a post. Following a blog only requires clicking the Follow button. The posts will then appear in a feed. As with Twitter, there is a search function to find posts and others who have similar interests. You can promote your blog for free by being recommended or you can pay to have your blog featured in the Directory.

The Customizations for the social side of Tumblr can be found under “Community” and “Advanced”. Tumblr has good integration with Twitter. Your Tweets can be imported into Tulmblr and you can have send your Tumblr posts to Twitter. Tumblr also has Facebook integration. Tumblr includes several additional options for promoting your Tumblr blog and RSS customization options.

Tumblr allows for group blogging with multiple Tumblr users able to submit posts which can them be approved or denied.

Can I have some privacy, please?

Tumblr is primarily intended for public posts and your primarily blog is public. However, you can create a password protected blog using the same account.

Category Options and Rules

All categories include options for tags, publication date in case you do not want to publish immediately or wish to initially publish privately for editing purposes, the option for a custom URL, and a box to check if you wish to allow Photo replies.

A Text post is similar in format to a blog post with an optional title and the content of the post. A photo post gives you the ability to upload a photo and include an optional caption. A quote post has separate boxes for the quote and the source, thus, easily allowing quotes to be formatted differently than regular text. A link post can include just the URL or also include a title and caption. A chat post works similar to a quote post in that it allows a chat to be formatted differently than a regular text post. The audio post is similar to the photo post with the option to upload an audio file or use an externally hosted audio file and an optional description. Audio files have extra rules and only allow MP3s, one audio post per day, and have a limit of 10 MB. Video posts can be embedded from external sources (ie YouTube) in which case you simply paste the Embed tag. There is also room for an optional caption. Alternately, you can upload five minutes worth of video a day with each file being less than 100 MB.

Advanced Use

While Tumblr is excellent for those with limited or no design and programming knowledge, it also has enough options for those who are more comfortable with design.

Tumblr blogs can easily be embedded in your blog simply by copying and pasting the available code. This allows for additional control over the layout. It also allows you to keep a blog on Tumblr for the social networking and other advantages while easily having it integrate into your website. Tumblr offers additional API information.

Helpful Links

• Tumblr Help
• Creating a Custom HTML Theme
• API
• Themes
• Content Policy
• Privacy Policy

My Tumblr Blog Knot of Light is focused mobile device resources particularly app reviews and iPhone wallpapers.

• Level: Beginner
• Goal: To improve a poorly lit photograph by using it as a base for a painting design.
• Translatable: Yes
• Steps: 6

The preview above shows a small portion of the picture in order to show the details. Click on the preview to view the whole picture.

The Original Photograph

The original picture has poor lighting and is not particularly clear. However, despite its flaws it can be manipulated with Photoshop to look like a flower painting.

Step 1

Go to Layer -> Adjustment Layer -> Levels and adjust the levels by moving the slider so that it goes to the point of the edge of the curve. This will improve the lighting and contrast.

Step 2

This picture needs additional help due to the poor lighting so we will also be adding a curves layer. Go to Layer -> Adjustment Layer -> Curves. When you are done click ok.

Step 3

Goal: Get rid of the noise in the picture.

There are a number of methods for solving this problem. You can use the median filter that comes with Photoshop (Filter -> Noise -> Median), but that does not allow for much customization. You can use the Neat Image Reduce Noise plugin, but the free version can only be used for smaller pictures. For this image I used Medhi’s Noise Shampoo plugin. (Available from Medhi’s Plugins). Use the settings Clean 10.5 and check Enhanced.

Step 4

The noise shampoo gets rid of the noise, but it also makes the image less clear so this step helps remove the fuzziness before adding the paint effects.

Duplicated the layer and sharpened it (Filter -> Sharpen -> Sharpen). Duplicating the image is optional, but I like to make changes on a different layer as it makes it possible to later adjust the opacity.

Step 5

Duplicate the layer. Now go to Filter -> Filter Gallery -> Brush Strokes -> Crosshatch. Use the settings Stroke Length 5, Sharpness 6, and Strength 1. Adjust the settings as needed to fit your picture. In general more detailed objects will need a shorter stroke length than large and less detailed objects. When you have the settings you want click ok.

Step 6

This time duplicating the layer is required rather than optional. Go to Filter -> Filter Gallery -> Artistic -> Paint Daubs. Use the Settings Brush Size 2, Sharpness 5, and Brush Type Simple. Click ok. Go to the Layers Palette. Starting with 50% adjust the opacity as needed. If this step works for most of the picture, but makes a small area too sharp or pixelated, erase around that area.

Click on the final image to see the full-sized picture.

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

• CSS for the text color color: #ffc;
• CSS for the font-size: font-size: 3em;
• CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
• CSS for the font-weight: font-weight: bold;
• CSS for aligning text: text-align: center;
• CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
• CSS for the background color for the paragraph: background-color: #300;
• CSS for the border around the paragraph: border: solid 1px #333;
• CSS for the text shadow: text-shadow: 2px 2px 2px #000;
• CSS for the shadow around the paragraph box:
  -moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
• CSS for making rounded edges around the paragraph box
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
• Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

• Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
• Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
• If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
• For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.

Full Layout
View the CSS

About the Layout

This liquid layout does not include any images. Liquid layouts have the advantage that they adjust based on the size of the monitor.

This layout uses css3 extensively. Internet Explorer does not support css3 and while the basic structure works on Internet Explorer 6 and up some of the coloring and other styling elements will be different.

Text Drop-Shadow

#header h1 {font-size: 5em; text-shadow: 2px 2px 2px #000;}
#header h2 {font-size: 1.5em; text-shadow: 1px 1px 1px #999; }

I adjusted the size of the text-shadow based on the size of the font and the comparative importance of emphasizing h1 (Website Title) vs h2 (Website Subtitle, Information, etc). I also adjusted the color of the text shadow. In most designs I use a gray text-shadow (#ccc or #999) rather than black (#000). However in this case the h1 headline benefited from the extra contrast. For h2 I made the text-shadow a similar color to the text color. If your text needs a text-shadow to help it stand out and using #000 does not work try using gray or a color more similar to text color.

Remember that Internet Explorer does not yet support css3 so if the text is completely unreadable without the text shadow you need to make the text stand out using a different method, use a different stylesheet for Internet Explorer, or accept the fact that some people will have trouble reading the text.

Box Shadow

-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
padding: 5px 5px 5px 5px;

I used rgba rather than hex for the box shadow in order to vary the opacity (in this case to .5). Subtly can also be adjusted by choosing a moderate gray. To make it more natural choose a color that has a similar, but lighter warm or cool tone (ie a blue-gray shadow for a blue bordered image).

Gradients

background-image: -moz-linear-gradient(100% 100% 90deg,#8B5742,#5C3317);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8B5742),to(#5C3317));
background-color: #300;

• 90deg sets the direction for the gradient and makes it go from top to bottom.
• background-color: #300 is used as a backup for browsers that do not support css3. I also chose to use a ‘web safe’ color.
• If you want the gradient to be viewable on browsers that do not support css3 gradients you need to add background-image: url(gradient.png). I chose not to and accept that some users will see the layout differently in order to create a layout without using any images.
• You can use RGB instead of Hex for gradients.

Rounded Corners

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Slightly rounded corners are used in the navigation and in the quote in the right column because the more subtle feel of rounded corners fits the more subtle tone of the design.

Layout in Internet Explorer 8

Download the PDF

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.
• You may not repost this post nor distribute the PDF file. Instead please direct people to this post.

Back in the old days of the Internet you had numerous options for free webhosting with only a small number of sites needing their own domain and paid hosting. Today most of the free hosting options, including the once popular Geocities, are no longer available or are so full of ads that they are useless.

Hosting Pictures

If you are only putting pictures online and you are not a photographer or artist it is often best go simply use a photo hosting service rather than create your own website. Flickr is the best known photo hosting solution. Google’s Picasa also has its supporters. If you do not expect a huge amount of traffic Photobucket is a good option. DeviantArt is a social networking site that can be used to showcase your photography as art. Companies such as Shutterfly, Snapfish, and Winkflash are focused more on prints and photo gifts, but also can be used as galleries.

If you only need to post a few pictures ImageShack is an option which does not require an account, but some people have reported problems with images from ImageShack loading. Please be sure to check the Terms of Service and privacy settings available. If you do not want a future employer or anyone surfing the web to be able to potentially see the picture take advantage of the security setting and use password protection.

Hosting a Blog or Journal

Both WordPress.com and Blogger.com provide free and easy to use options for bloggers. Customization choices are more limited, but there are still nice available designs. For a more personal interactive style journal service there is Livejournal.

Hosting Videos

If you need somewhere to post your new video there is the ever popular YouTube. Even if you post your video elsewhere if you are looking for publicity it is often good to also post it on YouTube. Some people have moved on from YouTube to Vimeo, MetaCafe, Daily Motion, and Pandora TV. Flickr, Photobucket, MySpace, Facebook, and ImageShack also provide video hosting.

Things to Look for If You Choose a Shared Webhost

Although the options listed above are sufficient for many people’s needs sometimes you want a fully hosted website. Shared Hosts (Dreamhost, etc) do have Terms of Service. You have a lot of freedom about what you can post on your website, but there are still a few limits. Many shared hosting services ban or limit sexually explicit material, material about cracking software, etc.

• How long has the hosting company been around? If the company goes out of
  business you may lose your website without any warning (as has happened
  to many people I know).
• What is the host company’s reputation? Do they actually
  provide everything they claim? How often do websites go “down” [are temporarily unavailable]?
• If you are more experienced at designing websites what features do they support? Sometimes user-friendly means “impossible to do more than basic customization” or “you can’t do what you need to do because we are protecting you from making a mistake”.
• How much bandwidth do they offer? How much disk storage? What
  happens if you go over your amount? Can you increase your bandwidth and
  storage and how much does it cost to do so?
• How many email accounts come with the account?
• What sort of technical support is available? How competent, professional, and polite are their support people? How much does it
  cost? Does it include third-party software? (ie What if you are using a
  script that wasn’t provided by your webhost?)
• How often do they back-up your website or do you have to do
  the back-ups? Even if they offer back-ups you should keep a copy on
  your computer and other storage media (CD or DVD, flashdrive, etc).
• Do you have access to log files that include information such
  as the number of hits to your website, what websites link to your
  website, etc?
• Can you register your website (in other words register your
  URL such as http://www.mywebsite.com) with the hosting company? Does it
  allow you to use a privacy function.

• Level: Intermediate
• Translatable: One optional step uses Selective Color.
• Steps: 10

Part 1

Goal: To edit the picture of the woman so that it will have a higher contrast and “stand out” enough to still look good with the later edits. In this case the base picture is relatively high quality. If you are using a lower quality photograph you will need additional adjustments.

Step 1: Open the picture of the woman in Photoshop. Duplicate the background layer and set the duplicate to blend mode soft light. If the picture is too dark duplicate the background a second time and set the second duplicate to screen. Adjust the opacity of the screen layer as needed.

Step 2: Go to Select -> All. Then go to Edit -> Copy Merged. Paste as a new layer.

Step 3: There are two methods for step 3. Originally when I made this poster, I used a bleach pass filter from Red Paw Media with Exposure (0), Gamma (0), and Saturation (0) checked. These are the default settings. This is the easier method, but it involves downloading the filter so I have included an alternate method below.

Step 3: Alternate method. Go to Layer -> Adjustment Layer -> Curves. Create a slight S curve. Then add a Saturation Layer with the Saturation settings Reds -20, Yellows -30, Greens -100, Cyans -100, Blues -100 Magentas -100. Now go to Layer -> Adjustment Layer -> Selective Color. Use the settings Red: 0, 0, -25, 75 and Black 0, 0, 0, 30. This is not exactly the same, but is close enough for this tutorial.

Step 4: Go to Edit -> Copy Merged. If you think you may want to go back and make some adjustments also save the psd file.

Part 2: The Poster

Goal: To “blend” different pictures together so that you don’t see jagged edges between the pictures and to even out the coloring and lighting.

Step 5: Create a new document that has the same width as your “face” picture and has a height that is about 30%. Paste the face picture into the new document in a new layer and set this layer to Soft Light. Make sure there is still a background layer behind the face layer.

Step 6: Using the Lasso Tool draw around the bottom of the face picture staying near the edge. Do not try to draw a straight line, but allow the line to “wobble” a bit which can make the blend look more natural. Then go to Select -> Feather and choose 60-80 pixels depending on the size of your picture. Click Delete.

Step 7: Paste a clouds picture in a layer between the background and face picture. I used one of my own clouds pictures, but you can find cloud pictures on most stock photography sites. If the clouds seem to be obscuring the face select the clouds under the face using the lasso tool and go to Filter -> Blur -> Gaussian Blur. Adjust the blur settings as necessary. I used 30.

Step 8: Make a Gradient Adjustment Layer just above the Clouds Layer. Go to Layers -> Adjustment Layer -> Gradient Map. Use color #c6b292 as your foreground layer and black (#000000) your background layer.

Step 9: Open the “City” picture. Paste it between the background layer and the Gradient Map Layer and drag it to the bottom of the image so that most of it is below the face. Use the Lasso Tool to draw along the top part of the city picture and follow Step 6 (draw, feather, delete).

Step 10: Click on some “free space” in the picture and type the title. I used the font OptimusPrinceps size 82. Go to Layer -> Layer Style and add a drop shadow with the settings Distance 2, Size 2. Go to BLevel Emboss and use the default settings except set the size to 1.

Picture credits/sources:

• Woman: Dreamstime free image. Ref #487652
• City Picture (Bermuda): Photovaco (Direct Link)
• Clouds picture: My own.
• I searched IMDb and did not find any films titled “The City Story”.

Level: Easy to Intermediate
Translatable: One optional step uses Selective Color.
Steps: 7
Details can more easily be seen in the tutorial below.

Step 1. Duplicate the picture three times.

Step 2. For the first duplicate go to Filter -> Artistic -> Cutout. Use Settings Number of Levels: 6, Edge Simplicity: 1, and Edge Fidelity 3. Leave the layer set to Normal. This is the most important step.

Step 3. For the second duplicate go to Filer -> Artistic -> Poster Edges. Use Settings Edge Thickness: 2, Edge Intensity: 1, Posterization: 2. Set this layer to soft light. This step helps accent the edges. (Picture below is before it is set to soft light.)

Step 4. For the third duplicate go to Filter -> Sketch -> Halftone. Use Settings Size: 3, Contrast 1, Pattern Type: Dot. Set this layer to soft light. This step is subtle, but adds to the effect. To make the comic effect stronger increase the size of the dots. (Picture below is before it is set to soft light.)

Step 5. (Optional) Go to Layer -> Adjustment Layer -> Selective Color. Under Black decrease the amount of black by 10 and increase the amount of Maroon by 5. There was enough black background that I felt it was a little harsh. This step will not be necessary for some pictures.

Step 6. Go to Custom Shape and choose a thought bubble (or a talk bubble if you prefer) with the forground set to White. Adjust the bubble’s height and width if necessary. In this case I also flipped it horizontally by using Right-Click and then Flip Horizontal.

Step 7. Choose an appropriate font and type what you want your character to say or think. I recommend not using Comic Sans as the hatred of that font is rather strong. I chose Komika Axis.

Notes:

• The screencaps for this tutorial have been resized.
• This tutorial works best with large clear pictures. It is a good use for photographs that have been overly airbrushed.
• The smaller your picture, the lower your settings should be.
• This picture had good contrast. If the contrast is not strong enough consider adding a curves layer before you start the steps listed above. (Layer -> Adjustment Layer -> Curves)
• Dafont has many comic fonts.
• Photo credit: Dreamstimes free image.

Border Properties

• border-width: This is the width of your border (ie 5px)
• border-style: none (no border), solid, dotted, dashed, double, groove, ridge, inset, outset
• border-color: You can use a color name, hex value (ie #369), or RGB value (ie rgb(0,0,255))
• To make a border with different styles on each side use: border-top-style, border-right-style, border-bottom-style, border-left-style

Thick Brown Border

The CSS

img.nameofclass {
border: 3px solid #300;
padding: 5px;
background: #630;
}

The xhtml:

Blue Double Border

The css:

img.nameofclass {
border: 5px double #399;
padding: 3px;
background: #9cc;
}

The xhtml:

Orange Inset Border

The css:

 img.nameofclass {
border: 5px inset #fc6;
padding: 3px;
background: #c30;
}

The xhtml:

Green Ridge Border

The css:

img.nameofclass {
border: 8px ridge #cf9;
padding: 2px 2px;
background: #063;
}

The xhtml:

Blue Variable Border

The css:

img.nameofclass {
border-top: 8px groove #399;
border-right: 5px solid #063;
border-bottom: 8px groove #399;
border-left: 5px solid #063;
padding: 2px;
background: #fff;
}

The xhtml:

How to use the code listed above

• Replace “nameofclass” with whatever name you want to use for the type of images you want to have a particular border. If you wanted a certain border for all pictures of buildings you might use img.buildingpics. It is best not to use the name of the picture (ie TowerofLondon.jpg) unless you will only be using a specific border for one picture.
• “Name of Image” is usually the name of the file or a very brief description of it (ie TowerofLondon)
• The xhtml will be used in the part of your document where you want the image with the border. On this page I used the xhtml in the body of the document in div with the main content just below the h2 heading.
• The CSS portion will go in your stylesheet.

About the Tutorial

This is intended as a beginning level tutorial for INCENDIA. I will only be covering a fraction of the options. Although I list specific settings it is to demonstrate the settings. All settings are highly adjustable. This tutorial is very image heavy.

INCENDIA can be downloaded from Incendia.net

Fractal Type and Baseshapes

Step 1: Choose a Fractal Type. I chose 2.50 IfS (number 7 on the list).

Step 2: Click on Editors.

Step 3: Check the box next to Baseshapes and then click New.

Step 4: You can use the Sphere default, but I want to change it so I clicked on the Cylinder (scroll down).

Step 5: This is a critical step. Increase the Depth. I chose 9. To see the difference the first image has the depth set to 0 and the second has it set to 9.

Step 6: Increase the Radius and/or the Height.

Step 7: Add additional Baseshapes. Click on New for each new shape. I chose Futuristic.

Step 8: Increase the Depth and Radius for the new Futuristic shape.

Preview of current image:

Materials and Other Details

Step 9: I could keep adding Baseshapes, but I want to move on with the explanations. The coloring does not work for this fractal so I will click on Render. You will see two colored circles under Materials.

Step 10: Click on the top circle and other choices will appear. Choose a different material for one or both settings.

Step 11: It is a bit dark. One way to lighten it is to click on Environment and under Options uncheck Enable Fog.

Step 12: You can also change the Shaders. Previously it has been set to Standard. This is the result set to Sine Stripes.

Step 13: To change the resolution go to Camera and check the Resolution you prefer. Then click Change.

Step 14: You can also zoom in and out.

Alternate Fractals

Step 15: You can also go back and change the Fractal Type. (Popcorn, Julia Set z 2+C, Julia Z 3+C vs. IfS)

I added the red rectangles to make it easier to find the settings. Settings are also capitalized.