Incrediably funny comic strip about how a Web Design project can go straight to hell… The only thing it’s missing is how to control the situation and keep it from going out of control.

Great for a laugh though – check it out: How a Web Design goes straight to Hell

I got a new camera recently and decided to take a few minutes and play with a vase of flowers and a nice backdrop. I have 5 photos of Spring Flowers in bloom for you to download. Please comment and retweet if you like these.

All Photos are 3872 x 2176 pixels (16:9 aspect ratio), at 350 dpi (in sRGB).

Download: 5 Spring Flowers Photos (42) (ZIP file 9.2MB)

Freelance Folder has a great article this morning about how to never miss a deadline. Head on over and check it out; I highly recommend these folks for a daily read!

One of the most common complaints that client’s have about freelancers is that they’re not reliable. What is this complaint based on? You can bet that missed deadlines had something to do with it. The project took twice as long to complete. Or you met the deadline, but it wasn’t tested for bugs. Perhaps this complaint was due something simple like failing to reply to an email in a timely fashion. These are all variations on the same key element of reliability. That is the ability to deliver a finished product, on time, every time.

One of the best things you can do when planning a site is to get the client involved. Forcing them to confront, and iterate, their expectations can save you time (and money) down the road. The best way to do that is to listen to them. The following is designed not to be a hard-and-fast checklist, but a tool to stimulate thought, and, from that, to stimulate conversation.

You can either give it to the client to fill out in advance of a meeting or simply use it as a guide while you talk to them. It is best for small- to medium-sized projects.

Website Planning Checklist:

1. What is the primary goal of your web site? (generate sales, give information, etc.)
2. Who is your target audience or demographic?
3. What do you think your audience will be trying to achieve or receive from your site?
4. Please list the names of five other sites that you like. Why are they attractive to you?
5. What is the deadline for a new site? Why?
6. Who are your competitors?
7. From visiting your competitors’ websites, or those in a similar field, what are some aspects you like and would like included on your site?
8. What type of content would you like to include?
   • Text
   • Images
   • Audio
   • Video
   • Blogs or Forums
9. Is the content already created? If not, who will create the content?
10. For describing your company on the web, what sets you apart from your competition—what makes you special?
11. What content will need to be updated and how often? Who’s going to do the updating?
12. Do you have existing brand elements (logo, business cards, letterhead, etc.) that need to be incorporated or that can be provided as brand representation?
13. Will you be using existing brand colors? Do you have a color scheme you’d like to use?
14. In addition to the Home Page, what will be your other content pages? (About Us, Services, Products, Press Release, Blog, Links, Location, Contact Us, Directions, Site Map, etc.)
15. When someone looks at your Website, what words would you like people to associate with it? (fun, funky, conservative, trustworthy, informative, etc)
16. Is there a theme you’d like to use?
17. Do you have a specific style of design in mind?
18. Would you like a search engine on your website?
19. Would you like to sell products on your website? If so, are you already set up to accept credit card payments?
20. List the words your target audience will use to find you on the web.

If you’d like a printable version of this list, you can download the Word file here:
Website Planning Checklist (39)

About the Author:

Stuart Phillips is the Business Development Director and Project Manager at Bravo Web Solutions, a full-service web development company in Eugene, Oregon. He specializes in putting the internet into human-speak, so clients can grok it. www.bravoweb.com (888) 772-7286

Today I’m going to walk you through the steps to create a StickyNote paper with realistic shadow using Photoshop CS3. This tutorial will work with any version of the Creative Suite too, you’re tools may be located slightly different however. I also have the Photoshop CS3 file for download at the end if you’d prefer to work on the original.

Steps to create StickyNote:

Step One: Creating the Document
1. Create a new document (File -> New), make the dimensions 800×600 pixels (72 dpi is fine for this tutorial).
2. Create a second layer, fill the first layer with white, and in the second layer create a rectangle as shown.
3. I used #f9f498 for the Sticky Note color.

Step Two: Adding a Drop Shadow
1. Double-Click on the Sticky Note layer to open the “Layer Style” dialog box – Or select the layer and choose Layer -> Layer Style -> Blending Options to open the dialog box.
2. Click on Drop Shodow on left, and make settings similar to image below.

Step Three: Separate shadow from Sticky Note layer
1. On the Layers panel, with the FX expanded, right-click on Drop Shadow and choose Create Layer

Now you will have 3 layers: A background (white) layer, a Shadow layer, and a Sticky Note Layer:

Step Four: Curving the Paper
1. Select the Sticky Note layer in the Layers Panel
2. Choose Edit -> Transform -> Warp
3. Click and drag the individual vertices to pull and push the “mesh” until the bottom two corners look slightly longer and higher than before.

This is about what yours should resemble:

Step Five: Changing the Shadow
1. Select the Shadow layer in the Layers Panel
2. Change the Fill percentage to 40% in the Layers Panel
3. Choose Edit -> Transform -> Warp
4. Click and drag the individual vertices like before to change the shadow slightly.

This is where you should be:

Step Six: Adding a sheen to the paper for the “bend”
1. Double-Click on the Sticky Note layer to open the “Layer Style” dialog box – Or select the layer and choose Layer -> Layer Style -> Blending Options to open the dialog box.
2. Click on Gradient Overlay on the left side
3. Click the default Gradient color (not the drop-down arrow though) to open the Gradient Editor window.
4. In the Gradient Editor window, the Type should be Solid, the Smoothness should be 100% as shown
5. Click in the gradient panel area to create a third keypoint in the gradient
6. The outside 2 keypoints should remain #f9f398
7. Change the color of the middle keypoint to #faf7c1
8. Drag the middle keypoint to the left to Location: 24%
9. The Smoothness Transition diamond should be at Location: 30%

Click Ok, and Ok again to lock in the effects. Here’s how yours should look:

Step Seven: Adding some text
1. Create the text “Buy Milk” – I used Comic Sans in a dark blue color and enlarged it to fill up more of the note paper.
2. Rotate the text slightly so it appears to be hand written. To rotate the text, select the Text Layer in the Layers Panel and either CTRL + T (CMND + T on a Mac), or choose Edit -> Transform -> Free Transform. Then hover the cursor over the corner until the cursor changes into a rotate icon. Simply click and move the mouse until the desired rotation is obtained; let go of the mouse.

You could stop here, but I wanted to make the text look less perfect, like a ballpoint pen with ink issues

Step Eight: Distressing the Text
1. Rasterize the type by clicking the Type Layer in the Layers panel. Either right-Click the layer and choose Rasterize Type, or click Layer -> Rasterize -> Type. This makes the layer a bitmap image rather than an editable type layer.
2. CTRL + Click (CMND + Click on Mac) the icon for the text in the Layers Panel to select all the contents of that layer (in this case it selects around the lettering).
3. Click the Mask icon on the bottom of the Layers Panel, or choose Layer -> Layer Mask -> Reveal Selection.

Step Eight (Continued): Distressing the Text
1. Select the Brush tool
2. Right-Click on the art board – the Brush Tools window will open, I chose the Brush “Dry Brush Tip Light Flow” Leave the size at default of 66.
3. Make sure the foreground color is black.
4. Lightly click, and drag in short lines to create the effect of the ink being thin. You are removing the mask in small scratches, revealing the Sticky Note below. The reason to use this method is that if you don’t like the results, change the foreground color to white and brush again to re-reveal the ink. his is the preferred non-destructive way.

Final Result:

And as promised: Download StickyNote source file (102) – Zip .PSD 400KB

On the way to my kid’s school, there is an abandoned building with a really nice graffiti piece across the front. Today I decided to take some high-res photos of the graf for you to download to use as texture or stock photo.

I started by taking all the images I had taken, and used Photoshop to photo-merge them into a single panorama; the graf art is very wide.

[TIP] To Photo Merge many files into one, with all the files open inside Photoshop, click File -> Automate -> Photomerge and choose the type of layout, then click “Add open files” … The box will populate with the filenames of all open documents -> Click OK

I have the finished piece available in 300 dpi JPG image at 11,629 x 1,707 pixels, and the rest available in 3 separate sections in 2,500 pix wide, 300 dpi PNG files with transparent backgrounds.

Get Graffiti Wide JPG (106) 3MB
Get Graf 01 PNG (97) 4MB	Get Graf 02 PNG (106) 3MB	Get Graf 03 PNG (99) 3MB

Check out Media Militia for a great Graffiti Brushes/Texture resource.

Say hello to Chubbs!

Chubbs can be a lovable little boy, an officer of the law, a 1970’s prom date, or a ghetto-fabulous teenager! All Chubbs’ costumes are available in transparent PNG files at 512 x 512

Get Chubbs 01 (59)	Get Chubbs 02 (54)	Get Chubbs 03 (58)	Get Chubbs 04 (55)

If you like Chubbs, please ReTweet this – Thanks!

I recently searched for a Polaroid Image template to use for a project and found a tutorial for creating a collage of Polaroid images from one stock image. This gave me an idea on how to integrate their idea within my design.

I quickly lost interest in the tutorial as it was overly complicated and spread across 5 pages with little visual aid. Having lost interest in their way of creating this effect, but still wanting to do the effect myself, I set about figuring out the fastest way of achieving the same result.

Below is the final result of my tutorial; click through after the jump to learn the process and download the final PSD file if you prefer that way.

Create multiple Polaroid collage the simple and easy way:

This tutorial is of an Intermediate skill level in Adobe Photoshop. You should be familiar with the core functionality of Photoshop before beginning this tutorial.

• You will need the Polaroid Image template I use: Polaroid Image template (148)
• And a stock photo to use as the background:  Surfer Stock Photo

Step 1:

Open Photoshop (I use CS3 for this tutorial, however any version CS and newer should work the same).

Create a document 800 px wide x 600 px high

This is your document once created:

Add a new layer and make the bottom layer filled with white:

Step 2:

Open the included Polaroid Image and copy it into your document:

Add your stock image to the document (the surfer image will reduce to 800×600):

Move the stock image down below the Polaroid image, but above the white background layer:

Step 3:

Create a dropshadow for the Polaroid:

With the stock image layer hidden, this is how your shadow looks:

Step 4:

Copy the Polaroid layer several times, moving and turning the images so they appear to be scattered across a surface (you could also resize the images to create a different effect as an alternative).

This is what your image should resemble with the stock image layer un-hidden:

Step 5:

Select all of your Polaroid image layers (don’t select any other layer), and right-click and choose Merge Layers. After this, all of your Polaroid images are on one layer (no longer movable independently). Before you merge the layers you may prefer to duplicate them and turn off visibility of the 2nd set; this will allow you to go back if you want to change the layout of the Polaroid blanks later.

Using the Magic Wand tool Shift click the black areas of the Polaroid blanks:

With only the black areas of the Polaroid layer selected, copy by hitting CTRL+C (CMND+C on a Mac), then CTRL+V (CMND+V on a Mac) to paste:

Step 6:

You now have a layer with both the screen AND border of the Polaroid, and a layer with just the screens of the Polaroid. You will want to drag the layer which contains both below your stock image. Top to bottom in layers you will now have Polaroid Screen layer, stock image, Polaroid screen/border layer:

Select the Polaroid screen layer (the top layer) and CTRL+Click (CMND+Click on a Mac) the window icon in the Layers panel (This selects everything on the currently selected layer):

Click the stock image layer in the Layers Panel -> click the Mask icon in the lower section of the Layers Panel -> Turn off visibility to the top layer as shown in the image:

And that’s it! Your results should like this:

I hope you find this tutorial useful; if you have any questions please comment below and I’ll be happy to answer them!

If you’d prefer just to snatch the PSD file – I have the PSD file for you here:
Polaroid Collage PSD (76)

Here’s another example of how you can use this effect dramatize an image

Freelance Folder has a great article for Freelancers on how to minimize or even eliminate Scope Creep (work not agreed upon in an original agreement) from their clients.

This article by Laura Spencer offers some great insights, be sure to read the comments after the article for more suggestions and dialog!

The article lists The Five Steps to Controlling Scope:

1. Know how much time you are spending on your project–Far too many freelancers don’t keep good records of how they use their time. You won’t notice scope creep if you don’t really know how much time you are spending on a project…. READ MORE ->

I have noticed that my post a while ago about how frustrating CS4 can be has been one of my most popular articles to date. I took this as you folks have some questions about CS4 and Illustrator in general.

Recently, with the help of Media Militia, I put out a call for your questions to be answered here. I’d like to personally thank everyone who sent in an email with questions. If you have a question that you’d like me to answer then send me a note; I’m happy to add you to the list for Round Two in the future

Illustrator CS4 Questions/Answers Round One

Question One:

What are the most common keyboard shortcuts to know in Illustrator?

Answer:

I probably don’t know all the keyboard shortcuts that there are as there are so many; but I can give you a list of the ones I use the most often, or that I believe are the most important:

This is of course only a small list of shortcuts; if you have a favorite you use often that’s not in my list, please add it to the comments!

Question Two:

This is actually two questions, but they both have the same answer so I’m combining them here.

• My cursor looks like a funny “X” after I select the Pen Tool
• My cursor looks like a “bullsey” or “crosshair” when I select the Eyedropper Tool

Answer:

Check your CAPSLOCK key! Quite a few of the Tools have different “versions” of their cursor icon when the CAPS key is selected. If you’re on a keyboard like mine, there is no indicator light showing you the CAPS key is active so you may be confused if the Tool you selected has a different cursor than expected. Always check to see if your CAPS key is selected first.

Question Three:

How do you make a perfect circle with the pen tool?

Answer:

Well the unfortunate answer is you can’t make a “perfect” circle using the pen tool. It is possible to make a passable circle which though your eye sees as a little “off” is technically a circle.

However, the only method worth using to make a perfect circle is by using the ellipse tool in the Tools panel in Illustrator. It is fast and easy to use. But, I’ll go over how to make a technical circle using the Pen Tool here.

Step 1:
Make a document 800×600.

Step 2:
First off, you’ll need a grid to work on, so with Adobe Illustrator open, click on “Edit -> Preferences -> Guides & Grid…” a dialog box will open that looks like this (click the image to enlarge):

The second set is for the the Grid; these are the settings I chose. Click “OK” and your artboard should resemble this (click the image to enlarge):

Step 3:
Click “View -> Snap to Grid” (the keyboard shortcut is Shift + CTRL + “ )

Step 4:
Select the Pen Tool in the Tools palette. Click on one of the Grid dots -> without letting go of the mouse, hold shift and drag the mouse down the Grid as shown in the diagram (click the image to enlarge):

Step 5:
Let go of the Shift key and the mouse. Hold Shift again and click once with the mouse as shown in the next diagram -> release the mouse after clicking:

Step 6:
Hold Shift and click the mouse where indicated in the diagram -> while still holding Shift and the mouse button, drag up as indicated in the diagram:

Step 7:
Release both the mouse and the shift key again -> Hold Shift once again and click once and release the mouse button where indicated in the diagram:

Step 8:
Hold Shift and Click the mouse where indicated -> keep mouse button and Shift button pressed and drag down as indicated in the diagram:

And there’s your circle; its technically a circle, but it doesn’t look quite right to the human eye… The image below shows the difference between our circle (left) and an Ellipse circle (right):

Thanks again to Media Militia for help in promoting the concept; You rock Jeya!

Thanks FreeIconsDownload.com for the people icons