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.

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.

• 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.

Nobody is born knowing how to use Photoshop. Good designers spend time playing with Photoshop and trying new things, but tutorials can also be a critical learning tool. The community of Photoshop users will always know more than any individual designer. Writing a tutorial is easy. Writing a good tutorial takes time and skill.

Evaluate Tutorials by Others

• If you like a tutorial, ask yourself why you like it. Try to apply these attributes to your own tutorials when practical.
• If you do not like a tutorial, what are the problems? Do the tutorials you write also have these weaknesses?
• What tutorials have already been made by other people? If there are already 20 (or 100) tutorials posted on major sites that are almost identical to yours consider whether you are really contributing by posting your tutorial.

Before you Start Writing the Tutorial

• Trying to remember what you did after you have finished can be difficult. Maybe you know you used curves, but you don’t remember the exact settings. Perhaps you know you tried a multiply layer, but you can’t remember whether you later deleted it. Do not overestimate how much you will remember.
• Keep the PSD file. Even if you decide not to write a tutorial this will make it easier for you to create something similar in the future.
• Make adjustments using a separate Adjustment Layer rather than by adjusting the layer itself. This also makes it easier if you decide later in your design process that want to change or get rid of that adjustment.

Writing and Testing the Tutorial

• Explain each step clearly. Make it look good is not a step. Add noise is not helpful unless you give your readers information about how much noise to add. A better alternate is I used #00033. Depending on your photo you may need to choose a lighter color.
• Remember to explain why you are doing each step. The picture looked washed out so I increased the saturation by 10.
• If a step requires a certain program and version, but there is an alternate method for achieving a similar effect including this alternate will increase the number of people who find your tutorial useful.
• It is better to error on the side of explaining too much than to explain too little. Someone can always skim past the part they already know. They cannot read your mind to learn the information you did not include.
• Proofread your tutorial. Most people will forgive the occasional typo, but make sure that the tutorial is readable.
• Check that the images load and the links work. If you are posting the tutorial to your own site validating your pages and checking them on Browsershots or a similar site will help ensure that the most people can use your tutorial.
• Humor doesn’t always translate well in written form especially when it is being read by a stranger. Insulting your reader is not an encouragement for them to come back to your site (or even finish reading the tutorial).
• If you are using Photoshop decide whether to provide a PSD file. Providing one may increase people’s interest in your tutorial, but it is likely that at least one person will take the PSD and simply paste a picture into it. If you do provide a PSD provide the terms for using it just as you would for any other resource.
• The internet is international. If you are posting in English be aware of regional variations. Making a Flat in Photoshop is going to confuse some Americans and other English speakers for whom the term is apartment.
• After you have written your tutorial follow it to ensure you get the expected result. Minor typos can have a major effect and often they are not as easy to catch as coding or general typos. The difference between Teh and The is obvious. The fact you meant 3, 16, 8 and accidentally typed 3, 26, 8 on your color balance settings may not be as apparent.

The Practicalities of Posting

• Choose a title that helps someone quickly figure out what the tutorial will teach them. Creating A Dark and Stormy Night is a much more helpful title than Scary Tutorial.
• Mention what resources people will need at the beginning of the tutorial. Having to track down a texture in the middle of a tutorial can be frustrating.
• Labeling your tutorial based on the level of expected knowledge is a good idea.
  Mention the program and version. Let someone using Photoshop 7 or Paint Shop Pro X know whether your tutorial will work for them.
• If you use other people’s resources credit them. Check their terms of use and do not make their resources available for download if it goes against their terms of use.
• Take advantage of social networking. If you have a Twitter account, Tweet your new tutorial. If you have a del.icio.us account, bookmark it.
• While promotion is good, spam is not. Do not comment on someone else’s tutorial for drawing birds with the comment, Nice. Check out my tutorial for making planets. Commenting on other sites or tutorials can increase how many people see your tutorial, but excessive self-promotion tends to backfire.
• Submit your tutorial to tutorial collection sites. Make sure you submit them to the best category and think carefully about your description. This is a time for concise accuracy rather sounding like sounding like the subject line of a spam email.
• If your tutorial is posted somewhere that allows for comments check them and respond to questions. Be honest about your skills and experience. I have never used that program so I don’t know is an acceptable response.
• Being on the internet sometimes means dealing with spam, rude people with entitlement issues, and outright trolls. Chances are that a particular tutorial will attract any of these people, but it is always a possibility.

Photoshop Tutorial Links

• Good Tutorial: Photoshop
• Photoshop Tutorials.us a large collection of quality tutorials
• Planet Photoshop This site includes a huge collection of Photoshop Tutorials
• PSDFan
• Psdtuts+
• PSDVault
• PSD Vibe
• PSlover a large collection of user submitted Photoshop Tutorials
• Tutorial Garden
• Tutorialshere thousands of user submitted tutorials
• Total Tutorials A collection of user submitted tutorials

This is a heavy edited version of the list I initially posted on Literary Spring.