function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '' . get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'style' => 'float:left; margin:0 15px 15px 0;' ) ) . '' . $content;
}
return $content;
}

add_filter('the_excerpt_rss', 'featuredtoRSS');
add_filter('the_content_feed', 'featuredtoRSS');

While you can work with the pink boxes on in Indesign, they can be annoying. If you want to turn them off, simply hit the W key to change the view of your workspace.

1. Building a Resource Library

You know all those amazing Photoshop textures, brushes, patterns, and backgrounds you see floating around the web? Many of then are made with nothing more than a digital camera and a eye for design. If you are reading this post, I assume you have both. Take your digital camera with you on any outing you go. You never know when you might find a cool texture or something that could make for a useful Photoshop brush. Need a specific hand drawn doodle for your design? Do it DIY style with a pencil, paper, and your camera!

2. Cataloging Colors and Pallets

It seems to me that there are few places to find better color combination than in nature. Of course, if you are trying to build a website full of hot pinks and electric limes, you may need to look elsewhere. That said, I constantly stumble across colors in nature that I think are amazing. Have you ever seen a birch forest? It is an amazing combination of colors. Fall is an especially great time to take your camera out doors to find great colors. Save these photos for reference later or build and save color pallets in Photoshop right away.

3. Ghetto Screenshots

If for whatever reason you can’t get a screen shot of your site in a certain browser or on a computer, use your digital camera to snap a picture. Obviously this won’t be accurate interpretation of the website, but it should convey any major visible problems. This is especially handy when your clients are just to computer illiterate to figure out how to take screen shots. Most people these days at least know how to take a digital picture and upload it.

4. Creating Your Own Stock Photography

Not that good stock photography is really expensive these days, but why pay for something you could create yourself? Obviously you can’t recreate every image on a stock site, otherwise you would probably be a photographer. But even a amateur with a point and shoot digital camera can create some of the pictures I see on stock sites. Being able to say you not only designed a site, but also did the photography for it isn’t something a lot of designers can say.

5. Backup Printed Documents

While many printers these days come with scanners, not everyone has one. If you are one such person, try using your digital camera as an alternative to a scanner. Before I had a scanner, I used my digital camera to photograph contracts, business cards, and other important documents. I would save them on a separate hard drive from the originals as a form of backup. This method also means you can setup an online fax account and move your business into the 1980′s. This is also another great method for getting signed versions of your contract back from clients without a scanner/fax.

My 5 Favorite Digital Cameras

I used to work as a travel writer who reviewed travel gear. As a result, I have seen and tested my fair share of digital cameras. Not to mention that I used to be a professional photographer before I got into design. I have done everything from high volume photography to print magazine work. I bring this up simply because I don’t want you to think I am shamelessly adding some affiliate links for the hell of it. These cameras are really ones that I think are great for designers and creatives.

1. Olympus Stylus Tough-6000 10 MP Waterproof Digital Camera
This is my favorite one for the simple fact that it is waterproof. I do a lot of watersports and outdoor activities, so this is super useful to me. But, even if you aren’t really into outdoor stuff, this is still a great camera. It offers WAY more protection than your basic digital camera. It is shockproof, crushproof, freezeproof, and waterproof. What does that mean? Basically, it means short of dropping it from and extreme height or driving over it, there isn’t much you can do to make it stop working.

Other digital cameras I recommend include:

2. Nikon Coolpix S70 12.1MP Digital Camera
“The Coolpix S70 introduces Nikon’s newly developed 3.5-incg Clear Color OLED Display with refined touch control that offers a new level of intuitive fingertip shooting control and a variety of exciting playback options.”

3. Sony Cyber-shot DSC-TX1/H 10MP
“The sleek DSC-TX1 incorporates the “Exmor R” CMOS sensor and boasts stunning low-light performance, reducing grain by more than 50%, even without a flash. High speed burst captures 10fps without distortion and expansive Sweep Panorama shots are easy to achieve with press and sweep motion. Control it all with its 3-inch touch screen LCD.”

4. Sony Cyber-shot DSC-W290 12.1 MP
“The Sony Cyber-shot DSC-W290 digital camera features Intelligent Auto mode, a 28mm wide-angle lens, automatically detects 8 scene conditions and selects the appropriate camera settings. Face Detection captures faces more naturally and helps prevent blur. Also, now record high-definition videos in 720p HD and enjoy your memories on your HDTV. ”

5. Canon EOS Rebel T1i 15.1 MP
“Canon’s new EOS Rebel T1i is packed with features, both refined and new. In addition to its admirable performance with an all-new 15.1 Megapixel Canon CMOS sensor, DIGIC 4 Image Processor, a 3.0-inch Clear View LCD with anti-reflective and scratch resistant coating, and compatibility with the EOS System of lenses and Speedlites, the EOS Rebel T1i adds remarkable Full HD video capture at resolutions up to 1920 x 1080.”

Digital Photography Resources

Want to learn a little more about digital photography before you invest in a new camera or buy a digital SLR? That is totally understandable. Lucky for you, there are a number of really great sites that teach even the most novice photographer how t create and capture outstanding images. Below is a list of a few of my favorite:

Photo TUTS+ – Nice site full of all kinds of tutorials and a next to no product reviews, which is nice.

Digital Photography School – This website covers every area of digital photography from tutorials, to reviews, to professional advice.

Step 1

Create a new document with the following settings: 8×10 and 72dpi and add your background color to white.

Step 2

Create a red box (#d72323) with a yellow stroke that is 7px wide.

Step 3

Find a nice picture with a lot of action to use for your background silhouette. I used this picture of a witch from ShutterStock.

Cut out the background as you see fit and add to the inside of your red box.

Step 4

Adjust the brightness and contrast to the witch layer. Use the following settings:

Step 5

Add a black color overlay to the image as well.

Step 6

Use a Gaussian Blur and add a slight blur to your image.

Step 7

Find a nice picture with a lot of action to use for your background silhouette. I used this picture of a surprised bride from ShutterStock.

Step 8

Resize your image to fit the design. You will also want to cut out the background as you see fit.

Step 9

Once you have the picture resized, tilt the image just a little bit and get rid of any portion of the image that isn’t inside the red box.

Step 10

Destaurate the the image so that you have a nice back and white version of the photo.

Step 11

Adjust the brightness and contrast to the following settings:

Step 12

A a yellow color overlay that matches the border color of your red box.

Step 13

Create a black box and rotate it slightly. This is where our movie title will go.

Step 14

Add your movie title into the black box. You will need to rotate it slightly to fit the same angle of your box from the previous step. I used a premium font called Calgary Script.

You will also wan to create some additional content for your movie poster.

Step 15

To finish of the poster and give it that vintage touch, we are going to add an image of some old, folded paper. I used this image of folded paper from ShutterStock.

Add the image as your top layer. Set the layer blend mode to multiply.

The reduce the fill of the paper layer to about 50%

Create a new document with the following settings: 8×10 and 72dpi and add your background artwork as needed. I decided to use Starry Night.

Step 2

Add your car image and remove any background portion of the photo as needed. I used this stock photo from Shutterstock.

Step 3

Select your artwork layer and copy the layer. Then select the ground portion of your car image layer.

Step 4

Go to Edit> Paste Into and paste your artwork layer into the ground portion of your car image.

Step 5

You will have to rotate and flip the layer you made in step 4 to create a mirror image of your artwork layer.

Once you have done that, add a gradient fill to the layer.

Step 6

Create a simple black box near the bottom of the page.

Step 7

Add the finishing touches such as text and car companies logo. I used this logo.

Final

Step 1

Find a cool close up picture of a sports player. I used this stock photo from Shutterstock, but there are plenty of free images just like it elsewhere.

Step 2

On your main image, go to Layer > Smart Objects > Convert to Smart Object

Next, go to Image > Adjustments > Shadows and Highlights. Follow the setting below:

Step 3

Next, create a new Levels Adjustment Layer. Change the setting to the following:

Step 4

Now we need to stamp a copy of this layer. Hold down command, ALT, Shift, and then press E.

Next, desaturate the layer by going to Image > Adjustments > Desaturate

Then invert the image

Step 5

Set the blend mode of that layer to Overlay

Step 6

With the inverted layer selected, ad a Gaussian Blur with the following settings:

Step 7

Click on the Levels Adjustment panel and change it to the following settings:

Step 8

To create a more sharper image, add a Unsharp Mask filter. Use the following settings:

Step 9

Create a new layer with the following settings:

Step 10

Get a Brush Tool with a small size and set the Opacity to 10%

Paint over any major creases and facial details to help darken them more.

Step 11

Get a Brush Tool with a small size and set the Opacity to 10% and set the foreground color to white.

Paint over any bright spots to help them stand out, like the eyes or teeth.

Step 12

Select the background of your image.

Step 13

Delete the background of your image and add some sort of storm cloud image to the background.

Set the layer Blend Mode to Overlay.

Step 14

Adjust the Curves of this layer a little to make them a little more stormy looking.

Step 15

Add some Noise using the filter with the following settings:

Step 16

Start adding some text to your poster. I used:

And slight reduced the opacity of the text.

Step 17

Add some finishing touches like the NFL logo and some filler text.

Step 18

I wasn’t liking how the color of the clouds looked with the rest of the image. So I adjusted the Hue/Saturation.

Image > Adjustments > Hue/Saturation to the following settings:

Step 18

Be sure to proof read your designs! I noticed some typos in my design and changed them.

Step 1

Create a new document with the following settings: 10×8 and 72dpi.

Step 2

Find a cool close up picture of a female ninja or something of the like. I used this stock photo from Shutterstock, but there are plenty of free images just like it on Deviant Art.

Step 3

The one color that is associated with Kill Bill posters in yellow. Create a yellow Fill Layer under the image of your main subject.

Step 4

Delete any white space in your image so that the yellow background will show through.

Step 5

Now we want to Desaturate the main image. This is under Image > Adjustments > Desaturate

Step 6

To give the main image a little more punch, we are going adjust the levels to the following settings:

Image > Adjustments > Levels

Step 7

Now we are going to prepare the sword for the blood. Select the blade portion of the sword. Then create a new layer above your main image.

Step 8

For adding the blood you can easily just use some blood or paint Photoshop brushes, but I wanted to use this image from Shutterstock.

If you use a stock image, use the Paste Into Layer function on the layer we created in the last step.

Step 9

To make the blood look more realistic set the layer blending options to Multiply

Step 10

I still felt the main image was lacking as far as movie poster style goes. So I decided to spice it up a bit more by up the contrast:

And adding some noise with the Noise filter:

Step 11

Now Im going to add the main movie title text. I used the following settings:

Step 12

I wanted to make the movie release date look as though it was written in the blood on the sword. So I wrote the date with the following setting and rotated it slightly.

Step 13

Rasterize the the type on the date layer by Control Click on the layer and selecting Rasterize Layer. Next you will Command click on the layer to mask it

Step 14

Withe the text layer still masked, click on the blood layer we created earlier and then hit delete. This should cut out the lettering in the blood layer. You will need to go back and hide/delete the original text layer.

Step 1

Create a new document with the following settings: 8×10 and 72dpi.

Step 2

Find a nice wrinkled paper background to use as the surface for your poster. I used this stock photo from Shutterstock, but there are plenty of free images just like it.

The image was a bit to orange, so I adjusted the images hue and saturation to lighten it up a bit.

Step 4

Find a picture of a soldier that you want to add to your poster. Cut away any background from the picture and paste the image on top of your paper layer.

I am using this image from Shutterstock.

Step 5

Next you will need to desaturate the image. To do this, go to Image > Adjustments > Desaturate

Step 6

To give this photo more of a vintage poster look, we are going to apply a Poster Edges Filter to it.

Step 7

Create a red box behind the layer your soldier is on. To help it blend with the paper better, set the layers blending options to Multiply

Step 8

Now we can start adding some text. It seems like most of the poster of this style have a line of giant text running the length of the poster. Think of something clever for your poster.

I used the Soviet font from dafont.com

Step 9

With the text layer you just created selected, change the Blending Options to Color Dodge.

Step 10

Add some more text to your poster.

Step 11

I added a 3px white stroke around the text that lays on top of the red banner to help make it stand out.

Step 12

Using the rectangle tool, I created some stripes to add a little character to the poster.

Step 13

The poster looked like it needed a touch more color, so I drew a white rectangle above and below the the red stripe.

Step 14

To give the poster that grainy shadow look that so many of these types of posters have I added a Inner Shadow to the white rectangles we just created.

Open the Layer FX box and set the Inner Shadow to the following settings:

Final Image

Letterpress

“One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.”

Photoshop Tutorial: The Letterpress Effect

Easily achieve the trendy LetterPress effect with Photoshop

Ps Letterpress emboss text effect

Create Your Own Letterpress, Inset, Debossed Text

Photoshop CS3+ Letterpress Tutorial

Create a Sleek Pressed Letter Design

Rich User Interfaces

“Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.”

jQuery Plugin: Tokenizing Autocomplete Text Entry

Ajax Tooltip with JQuery

A fancy Apple.com-style search suggestion

Interactive Map with jQuery

jQuery checkbox and Radio button

PNG transparency

“PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance.”

Transparent Glass Lettering in Photoshop

Add Transparent Type To An Image

Transparent Desktop

How to make a Diamond in photoshop.

How to Use Depth of Field to Create Portraits with Blown-Out Backgrounds

HUGE Typography

“We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites.”

Create a Trendy Typographic Poster Design

How to Create High Quality Metal 3D Text in Photoshop

Logo Design Project Step by Step Walkthrough

Creating a Typographic Wallpaper

Typography Wallpaper in Photoshop

Font Replacement

“As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR).”

How To Use Any Font You Wish With FLIR

Fixing Fancy Font Frustrations

Embedding Fonts

Use a custom font on your website

Use Any Font on Your WordPress Blog with AnyFont WordPress Plugin

Modal Boxes (Lightboxes)

“Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website.”

Lightbox Tutorial

Lightbox Gone Wild

Building a Lightbox with jQuery

Create a Photo Admin Site Using PHP and jQuery

Media Blocks

“Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too.”

Adding Movies to Your Web Page

Playing Videos on a Web Site

Embedding Windows Media and QuickTime Video on a Web Page

Putting Video on Your Web Site: The Basics

How to put video on your web site

The Magazine Look

“An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.”

Magazine-style layouts

Creating A Professional Magazine Web Layout

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Grid-Based Design: Six Creative Column Techniques

Carousels (Slideshows)

“Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.”

How to Use noobSlide

Installing a Accessible News Slider

Getting Started with SmoothGallery

Installing jCarousel

Creating a Carousel Slideshow

Ok…I lied about that last part…

Step 1

I added this background image from Shutterstock. But, any image of polished concrete should work pretty well.

Step 2

Find an image of a head shot of a soldier. I used this image from Shutterstock. Get rid of any background that your picture may have.

After you have added your image, you will want to desaturate it. You can do this by going to Image > Adjustments > Desaturate

Step 3

In the Filter Gallery, you will want to apply the Sumi-e filter with the following settings:

You image should look something like this:

Step 4

To make the image blend more naturally with our background, use the layer Blending Options and set it to Multiply

Step 5

Because this is a patriotic poster, it is only natural that it should consist of patriotic colors. To do this, you will use the Layer Options and Color Overlay. Use the setting below:

After you add the color overlay, you will want to reduce the over all fill of they to about 62%

Step 6

Now we will add in our patriotic American who is pumped to be buying war bonds. I used this image from Shutterstock. If you deside to use another image, be sure to cut out and background colors or texture.

Step 7

To give this image the look of the older printer posters, we will apply the Cutout Filter to this image. Open the Filter Gallery and use the following setting with the Cutout Filter:

the result should look something like this:

Step 8

We now need to change Blending Options of this layer as well. Change them to Multiply.

Step 9

Keeping this poster patriotic, will will change the color of this image by adding a color overlay with the following setting:

Step 10

Obviously with all these blending options, our layers are overlapping and not looking so good. You need to get rid of the soldier portrait layer that falls behind our patriotic American. You can use the Erase tool.

Or you can Auto Mask the layer of the man by command clicking on his layer. Next, click on the layer of the soldier portrait and just hit delete. This should make a perfect erase.

Step 11

The layer of the soldier portrait was looking a little bold to me. So I reduced his transparency some. But this step is a bit irrelevant, because I adjust the colors in the next few steps. I simply added this step because I wanted to show you how the image evolved as I made it.

Step 12

A war poster wouldn’t be complete without stars and stripes. While they are easy enough to create in Photoshop. I just ended up buying this image from Shutterstock to save time.

After you add the layer to your document, you will need to use the Blending Options again to set the layer to Multiply. Adjust the Fill to 56%.

You will then need to erase the portion of the layer that overlaps our other main layers. Feel free to use the method from step 10.

Step 13

Now the image is really starting to take shape. But, I dont like how the colors look at this point. So I decide to play with the colors of our two main subjects. First, I adjust the Color Overlay from step 5 again. I changed them to the following:

I also decided to get rid of the color overlay on our patriotic American all together.

Step 14

To give the poster that grainy look of the old war posters, I create a new Fill Layer on top of all my other layers. I use the color #72acb9, set the fill to 20%, and the blend mode to Multiply.

I then use the Layer FX to create a inner glow with the following settings:

Step 15

Under the layer from the previous step, I create a basic rectangle and add some text.