Below I’ve compiled a list of seven of my favorite NetNewsWire “styles”, which are basically just different looks that you can give to it.

Feast your eyes on this goodness, and choose the one(s) you want to install!

Default

For reference, here is the default NetNewsWire style that comes pre-loaded with every installation:

JetReader

Bullit

Serif Black

Serif White

ReadLight

Hardcover

Daring Serif

The Problem

Everything went well with YAPB until I decided to upload my first photo to my blog. I created a new post, added a title, image, and description, and pressed submit. Then I waited. And waited. And waited. After quite a while, the web page decided to load for me and it spewed a rather cryptic error that went along the lines of “Warning: unlink() [function.unlink]: No such file or directory”. Below that it simply said “Error: file does not exist!” My super-geeky brain didn’t seem to be working well that day, so I couldn’t seem to decipher the error until I turned to my extra-super-geeky friend Google and asked him what I should do.

A quick search showed that many other people seemed to be having the same problem, and when I searched a bit deeper, I managed to trace the solution.

The Solution

It’s quite simple, really:

1. Login to your WordPress admin area.
2. Navigate to Settings > Miscellaneous.
3. In the Store uploads in this folder text box, enter “wp-content/uploads”.
4. Click the Save Changes button.

That’s it! For some reason, when WordPress says that the default upload folder is wp-content/uploads, it’s really lying. Either that, or YAPB is holding a knife to its back and making it lie. Either way, the above steps should solve your problem once and for all. You can now upload photos to your photoblog happily ever after.

Let me know in the comments if this solution works for you!

Final Result

Here is what we will be creating:

Step 1

Let’s get started! First of all, open up Photoshop and create a new document of the dimensions 800 by 800 pixels (the size isn’t too important here). Set your foreground color to #6c8000 and press Alt + Backspace to fill the Background layer with an olive green:

Step 2

Grab the Rounded Rectangle Tool (U) from the Tools palette, and in the top toolbar, enter these settings:

Notice that the radius is set to 200px, the width is 309px, and the height is 147px.

Now click somewhere in your document and you should get a nice oval shape. Make sure the oval shape layer is selected, press Ctrl + A to select the entire document, and then in the top toolbar (with the Move Tool selected) press the Align Vertical Centers and Align Horizontal Centers buttons. This is what those buttons look like:

Press Ctrl + D to deselect everything, and now you should have your rounded rectangle centered to the document nicely like this:

Step 3

Fill the rounded rectangle with #6c7f00 by double clicking on the layer’s color thumbnail. Onto the layer effects! Double click on the rounded rectangle layer, and enter these settings:

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Result

That should give you this:

Step 4

Now it’s time to spruce up our design a bit by adding some light “whisps” to the background. Go to this page on QBrushes and download the Radial brushes featured there. Unzip the brushes and add them to Photoshop.

Create a new layer below the rounded rectangle layer, and select the tenth brush in the downloaded set (pictured below):

Press D and then X to reset your colors, and paint the brush behind your rectangle in this position:

Now create a new layer above the brush layer but still below the rounded rectangle layer, and select the 12th brush in the set:

Paint the brush anywhere on the document, and then go to Edit > Transform > Flip Horizontal. Press Ctrl + T, and resize and position the brush to about this place in the image:

Set the blending mode of both of the brush layers you just created to Color Dodge, and set the opacity to 60%, and you should get this:

Step 5

Now all that remains is to add the text to the image. Take the Type Tool (T), and make a new type layer in the middle of your oval. Type in two lines of text (you can say whatever you like, but I chose to say the truth: “TutWow – rocking your world” ), and in the Paragraph palette, set them to Center Justify.

I used the font “Gotham ExtraLight” for the first line of text, and “Gotham Light” for the second, but any thin font will work for this, like Helvetica Neue. I set the first line to 48pt size, the second to 18pt, and the color to white. Play around with the settings until you get the look you want.

Center the text to the oval, and you’re done!

Final Result

Ok, down to business.  We got some interesting responses to the question, as you can see yourself below.

Results

It’s interesting to see that the minimalistic style, which is usually plain and straightforward, is very close to web 2.0, which is usually more cluttered and visually diverse.  Interpret that how you like, but all I know is that now I’m going to have to work hard to find out what exactly my clients will look for in my designs.

New Poll

Today I am releasing a new poll entitled “Do you use a WYSIWYG editor, or do you code in a simple text editor?” If you don’t know what a WYSIWYG editor is, never fear – Wikipedia always has an answer.

You can find the new poll in the sidebar – be sure to vote!

1. Evernote – Free or $5/month

Whenever you get a new gadget, there is always the initial scramble to find the easiest and best way to do important tasks, whether it be viewing photos or checking email. One such task, note taking, is on the top of the list, and I personally think the best note taking app of all time is Evernote. It has both iPhone and desktop apps, and it syncs between both, so you can make notes on your desktop and view/edit them on your phone. The interface is easy, and you can make text, photo and audio notes to capture anything that comes your way. The free version of Evernote has a 40MB/month limit, which is plenty for me and my simple note taking, but if you need more space, you can pay $5/month and get 500MB.

2. Facebook – Free

Who doesn’t have Facebook? Almost everyone you know has it, and that’s what makes it so powerful. Their official app does an amazing job of simulating the full website, so you can do virtually everything on your iPhone that you can do on your desktop.

3. 2Do – $6.99 or Lite

In the current GTD craze, todo apps are becoming more and more popular. I’ve tried many iPhone apps, but the best I’ve found is one called 2Do. It has a beautiful interface, it’s simple to use, and it syncs with a server for extra backup security.  If you don’t want to pay $7 for it, they have a free version that is almost as good as the full one (it doesn’t have sync or themes).

4. Dictionary! – Free

I’m always scrambling around looking for a dictionary to look up unknown words, so I thought I would see if I could find something for the iPhone.  As the saying goes, “There’s an app for that!”  Enter Dictionary! – the fastest, light-weight English dictionary on the iPhone.  Why should you try it?  Well, it’s free.

5. myLite – Free

When I first downloaded myLite (the pocket flashlight), I thought that it was going to be some extremely pointless app with only a white screen.  However, as it turns out, myLite has a wide array of cool effects that you can use in many situations.  Just to give you a few, it has Strobe (basic strobe light), Color in Motion (changes colors when you wave the phone around), Police Car (flashes red and blue), SOS Flash (flashes dit-dit-dit-dah-dah-dah-dit-dit-dit), and, my favorite, Rock Concert (a cigarette lighter that you can flick on and off).

6. Pandora – Free

Everyone has their favorite on-demand-radio service, and mine happens to be Pandora. It is easy to set up, has great song suggestions, and even has an accompanying website for use on your desktop.  One thing I love about Pandora is that it has account support, which means that when you sign up, it tracks every song you like/dislike and customizes the radio accordingly.  So if I was listening to a song I really don’t like, I would just press the “dislike” button and it would never be played again on that station.

7. Momento – $2.99

Have you ever wanted to keep a diary or journal, but could never find the time to write it? I know exactly how you feel, so I went on a quest to find a good quality diary app on the iPhone. I ran into something even better than I had hoped – Momento, a $2.99 app that is worth every cent.

Basically, Momento lets you record little “moments” or “snapshots” of your life whenever you have a minute to spare. If you have a great experience, all you have to do is grab your iPhone and write a few words about it in this app.

Other features include importing twitter and facebook statuses to the “stream” in the app and adding tags, people, ratings, locations, and even photos to your moments.

8. WordPress – Free

For you die-hard WordPress bloggers out there (you know who you are), the WordPress app is a must-have. Inspiration attack on the go? Never fear – open up this app and create a new post draft for your next article.

The new version added many features, so that you can now add/edit posts and pages, sort through and reply to your comments, and even control multiple blogs from the same app.

9. Fring – Free

Not only can you post to your blog from your iPhone, but you can now chat with your friends in real-time. Fring, a slick app with push support, enables you to hook up with your contacts on Skype, Google Talk, MSN, Yahoo, AIM, and more. You can hold multiple conversations at the same time, and even better, you can exit the app and get notifications when someone is chatting with you.

10. Eliminate Pro – Free

What would an iPhone app list be without a game? I have downloaded and tried lots and lots of games on my phone, trying to find the one that both fits my style and has enough gameplay time. I have to admit, there are a lot of good games out there (maybe I will do an article rounding them up sometime), but none of them come close to the replayability (computers create so many instances for making up new words, don’t they?) of Eliminate Pro, the best First Person Shooter on the iPhone. You create a character, battle either robots or other humans around the world to earn “credits”, and then spend those credits on new weapons, armor, and upgrades. The more credits you earn, the higher the level of your character will become, giving the game an endless feel.

Conclusion

These 10 apps are essential for getting the most out of your iPhone. Not only do they increase productivity, but most of them are free, meaning you can delete them with no regrets if they don’t meet your expectations. So what are you waiting for? Go check them out!

Hello, my name is Ryan Boyle and I am a Motion Graphic Artist and Illustrator from sunny Florida.   Currently I create Motion Graphics and Animations for online courses for Full Sail, a local media college.   Basically I am the production pipeline, I take the raw scripts I get from instructors and turn them into visual pieces that are both entertaining and educational.   I am responsible for every aspect of production; filming, light set up, editing, art direction, asset creation, animating, and sound design.   I am responsible for producing about 9 to 12 video pieces each month.

During the beginning years of college, I formed and managed my own company creating unique displays for local store fronts.  From there I began to focus on dramatic black and white illustrations and storyboards that gave birth to many short films.  While attending UCF I was hired as an instructor to help teach the Compositing and Visual Effects course in the Computer Animation Degree at Full Sail.

Since college I’ve freelanced as a Storyboard Artist and Illustrator for several short films and music videos.  On top of storyboarding I have also worked as a freelance Editor, Producer, Compositor, 3D Camera Tracker, and Visual Effects Supervisor.

2. Your Sketchy Tutorials have quickly become some of the hottest tutorials on the net.  How do you come up with the ideas for them?

Well most of the ideas for my tutorials come from projects I’ve worked on, both for clients and personal projects.   As I work I take notes for myself , so I can always recreate the process down the road.  This was so helpful to me that I decided to post them on my site for others to use.   And ever since then I’ve been receiving requests for more tutorials. I’ve even had people send me some of their work that they did using my tutorials – its pretty cool.

3. When creating an illustration, what process do you go through to take it from start to finish?

Well that depends on the illustration – I have adopted many illustration styles and each has it’s own process.   For my most recent series “Giant Mutant Creatures”, I’d usually start by sketching out a few ideas then scanning the images I like into the computer.  Then I would create a very rough layout in Photoshop using simple shapes and colors.   Once I get the composition and colors the way I want them, I go back in and rebuild a lot of the elements like the arms, legs, eyes, etc. on separate layers.   By doing this I can make adjustments to each part of the character separately.

I use a lot of clipping masks on each layer to add color and shading.   The clipping masks in Photoshop allow me to move gradients and textures around without effecting my original shape.  Then  I can continue to make adjustments as I’m working on the illustration.   This really comes in handy when making eyes, I’ll make the pupil and place it in a clipping mask of the eyeball.  I can then change the position of the pupil at any point to make the character look in any direction I want, without having to recreate the entire eye from scratch.

My work tends to use a lot of textures in combination with gradients to create the shading.   I’ve found that by including textures it adds a more abstract and organic shading to my illustrations.  Of course because of this, my final Photoshop files usually end up being 5 or 6 gigs.  Just opening and saving the Photoshop file can take a good 15 – 20 minutes some times.

4. You’re an extremely talented motion graphics and illustration designer.  With all of this knowledge, are you still trying to expand your skills by learning anything new?

Thanks for the kind words.  Yes I’m constantly looking for new ways to build up my skill set – the industry changes so quickly that you have to continually push your skills to keep up with the newest trends and effects.   Plus I enjoy new challenges – projects that take you out of your comfort zone.  They provide the best learning experiences.   Currently I’m working on graphics and designs for a PDA game, which is a format that I’ve never worked with before.  You can imagine all the challenges I’ve run into.

5. I noticed that you like to use a lot of “sketched” or “hand-drawn” effects in your works.  What about this style draws you?  Do you think you’re an expert at it?  Why or why not?

Well I’m a doodler by nature, and I love the raw energy that the “sketched” effect has.   My work has always been quick and energetic.  I’ve found that by just trusting my instincts and keeping a clear mind when drawing I’ve come up with my best ideas.  Of course I create hundreds of concepts in the process, but it’s all worth it when I get that one great idea.

To be honest I’m probably my worst critic, and no matter how good my work becomes I’ll probably never consider myself an expert.   It keeps me in constant competition with myself and wanting to make my work even better.

6. I know that many designers these days are into these “inspirational showcase” sites. When you are in need of inspiration, do you turn to one of these sites or do you look elsewhere?

Well, I keep a huge collection of inspirational images on my computer.  I’m not kidding, the file is huge!  We’re talking gigs and gigs of hard drive space!   Even though I kept them all organized, it became impossible to find specific images quickly.  Recently I purchased  “Little Snapper” by Realmac Software and I’ve been using it to organize my image library. It’s been very helpful in that I can now add tags to each image and create smart folders to better locate certain inspirational images.

7. What advice do you have for anyone just starting out in the design/motion graphics world?

Oh sure – the first would be “don’t be afraid to make mistakes”.  Most of what has helped shape my art is all the mistakes I’ve made in getting to the final product.  Mistakes are the best learning experiences since you tend to remember what you did wrong, because you want to prevent it from happening again.

Networking is also vital – it can often be the key to landing a job in the industry.   If you know someone on the inside and they’re familiar with your work and work ethic, they’re more likely to recommend you when a job position becomes available.   Online forums are great for networking by participating in discussions. It’s also extremely beneficial to attend conferences in your field like Siggraph or the GDC.

8. Thanks again for taking the time to complete this interview.  As a final note, could you list any social networks where we can connect with you?

Sure, you can connect with me in the following social networks:

Twitter, http://twitter.com/sketchypictures
Flickr, http://www.flickr.com/photos/sketchypictures/
LinkedIn; http://www.linkedin.com/in/ryanboyle
Behance, http://www.behance.net/RyanBoyle

You can visit Ryan Boyle’s website/portfolio and see his work at http://www.sketchypictures.com/.

This tutorial will teach you how to set a web page on fire with Photoshop and CSS.  Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect.  If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall.  Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds.  You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog.  Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step.  To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it.  We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it.  If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top.  Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top.  Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection.  This will make the texture fade out like below:

Our fire texture is now complete.  Press Ctrl + S to save the image to your hard drive.  While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial.  Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fire Page</title>
 <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 <body>
 </body>
</html>

All this is doing is setting up the page with all of the necessary tags that every HTML page has.  The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

<div id="fire"></div>

This one line is all we need to set up the fire effect.  The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the <div id=”fire”></div> line.  I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum.  Then I copied the paragraphs into my HTML file and wrapped each one in <p> tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it.  Not much, but the fun is just beginning…

Step 7

Now create a new text file.  This will be the CSS file that styles index.html.  Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white.  This will make our fire texture really stand out from the rest of the page.  After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before.  Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page.  The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result.  Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it.  It’s a very versitile effect that you can use for lots of different effects.

Enjoy!

It just did.

Say hello to WordPress 2.8, or version “Baker” as they call it, named after noted trumpet player and vocalist Chet Baker.  Living up to WordPress standards, there are many new features in this version, as well as over 790 bug fixes from the previous version.

Inline Theme Installation

In WordPress 2.7, a great new feature was released called “One-Click Plugin Installation”.  Now this same idea has come to the themes section!  No more do you need to download a theme, unzip it, upload it to your site, and activate it.  Now you simply browse the theme gallery right from the dashboard, pick the theme you want, and press the “install” button.  Bam – it’s up and running on your server!  No hassle with zip files or uploading.

Syntax Highlighting

Editing template files (via the file editor in the dashboard) used to be dull black and white.  Now, with the new CodePress editor, it comes to life with colorful syntax highlighting.

Widgets Improvement

Previously, editing widgets was a pretty big hassle.  If you had multiple sidebars, there was no easy way to get one widget from one sidebar to the other, and if you deleted a widget, you’d love all of its settings.  If you wanted to use that same widget again, you’d have to reenter all of the settings that you had before.

WordPress 2.8 fixes both of these issues.  Now you can see all of your sidebars on the same page (no need to edit, save, switch sidebars, edit, save) and drag and drop widgets between them.  Also, if you set up a widget just the way you like it, and want to save it for later use, you can drag it to the “Inactive Widgets” area.  If you need it again in the future, just drag it out from that area and into one of your sidebars.

Screen Options

The great new interface that was added in WordPress 2.7 gave you the option to drag and drop sections in the dashboard to suit your needs.  Now, WordPress 2.8 gives you many more options for customization.  Here are a few of them:

• You can specify if you want 1, 2, 3, or 4 columns on the dashboard.
• In the Posts and Pages sections, you can specify what info you want to be displayed, such as Author, Categories, Tags, etc.
• Also in the Posts and Pages sections, you can specify how many items you want to display per page.

Speed Optimization

According to the WordPress.org blog, WordPress 2.8 is even faster than 2.7 due to optimized javascript and behind-the-scenes tweaks.  This means that the everyday actions such as approving comments, switching pages, and editing posts are even faster than before.

Conclusion

Taking into account the new features in WordPress 2.8 Baker, I would strongly encourage you to download it and give it a spin yourself.  If you already have 2.7, it’s as easy as pressing “Automatic Upgrade” in the admin.

As always, if you’re looking for information on the next version of WordPress (version 2.9), you can simply change the URL of the documentation from http://codex.wordpress.org/Version_2.8 to http://codex.wordpress.org/Version_2.9.  There’s not much there yet, but there will be pretty soon!

And be good, find the best hosting for your needs. I love 1&1 but there’s something for everyone.

In today’s tutorial, we’ll be creating a slick folder icon with a 3D glossy backdrop. Here’s a preview of the final result:

Step 1

Let’s get started! To begin, open up Photoshop and make a new document. Size doesn’t matter that much here, but I’ve used my favorite dimensions of 1680 x 1050 for this tutorial. Fill the background with #004d96, get the Pen Tool (P), and turn on the grid by going to View > Show > Grid or by pressing Ctrl + ‘ (single quote).

Step 2

If you don’t have “snap to grid” enabled, go to View > Snap To > Grid to enable it. This ensures that the Pen Tool snaps to the grid lines for precise drawing.

Now that snapping is enabled, click and hold on one of the grid cross sections to create a new anchor point. Without letting go of the mouse, drag up one grid section until the bezier handles snap into place. Finally, click up and over two grid sections and drag to the right one square. See the image below for reference:

Step 3

Count out about 14 squares to the right of that last point, click, and drag to the right one square.  Go over three and down two squares, and click again.

Step 4

Count out another 14 squares to the right of the last point, click, and drag to the right one square.  Go down and over two squares, click, and drag down one square.

Step 5

Count down 18 squares, click, and drag down one square. Go down and to the left two squares, click and drag left one square.

Step 6

Count left seven squares and click to make a new anchor point.  Go up four squares, click and hold the mouse, hold down the alt/option key, and drag to the right one square.  Count up two squares, click, and drag to the left one section.  Here’s a reference:

Step 7

Go two squares to the left, click, and drag over one square.  Count down two squares and click.  Without letting go, drag to the right two squares, press and hold the alt/option key, and drag down and left one square.  Finally, count four squares down and click again.

Step 8

Count six squares to the left, and repeat steps 6 and 7.

After completing those steps, go left seven squares, click, and drag to the left one square.  Then go up and to the left two squares, click, and drag up one square.  Finally, finish off the entire shape we’ve been creating by clicking on the first point, 20 squares up.

Step 9

Fill the shape you just created with #bcc1c5, and apply the following layer styles to it:

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

Drag Gradient

Still in the Gradient Overlay dialog, click outside of the layer styles window and drag upward, like the image below.  This moves the gradient up so it’s not in the center of the icon.

Result

You should now have this:

Step 10

Now we’ll create the silhouette of a person for the middle of the folder.  To make sure that both sides are equal, we will create the left half first and then mirror it for the right half.  I can’t be as precise with the position of the Pen Tool anchors here, but it is fairly easy to make the shape below.  You don’t have to be exact, just make something that resembles a human being.

Step 11

Duplicate the shape layer you just created by selecting it in the Layers palette and pressing Ctrl/Cmd + J.  With the new layer selected, hit Ctrl + T to transform it, right click on it, and select Flip Horizontal from the context menu.  Click and drag it to the right so it’s just barely overlapping the other half of the silhouette we created before.

To merge the two halves together, make sure the Vector Mask of the current layer is selected (see below).  Press Ctrl + C to copy it, select the Vector Mask of the other half of the silhouette, and press Ctrl + V to paste it.

You can delete the single half shape layer that you created now, which should give you this:

Step 12

Center the silhouette to the folder by Ctrl + clicking on the folder layer’s icon, getting the move tool, and pressing “Align Horizontal Centers”.  Move it vertically to a position that looks good to you.

Now we’ll apply some layer styles to the silhouette to make it pop off the screen (or sink into the folder).  Use these settings:

Drop Shadow

Gradient Overlay

Gradient

Stroke

Result

And that should give you this:

Step 13

Now that we’re done with the folder icon itself, we can give it a cool 3D background to sit on.  Before we do this, let’s center the icon to the document.  Select all the layers above the Background layer (there should be two layers – the folder and the silhouette), and press Ctrl + G to put them into a group.  With this group selected, press Ctrl + A to make a selection of the whole document.  Take the Move Tool (V), and in the toolbar at the top of the screen, press both “Align Vertical Centers” and “Align Horizontal Centers” like below:

Now that the icon’s centered, you can deselect everything by pressing Ctrl + D.  Make a new layer below the group we just created, get the Rectangular Marquee Tool (M), and drag out a selection like this:

Step 14

Press D and then X to reset the foreground/background colors and then swap them.  Get the Gradient Tool (G), and in the toolbar, modify it to this:

Starting from above the document, drag out a gradient to almost the bottom of the image like this:

If you deselect everything (Ctrl + D), you should now have this:

Step 15

It’s looking pretty good!  However, the icon looks a bit like it’s floating up and not sitting on the 3D shelf.  To fix this, we’ll add both a reflection and a shadow to it.

Let’s start with the reflection.  Duplicate the group we created by dragging it down to the “New Layer” icon in the Layers palette.  Merge all the layers in the new group together by selecting it and pressing Ctrl + E.  Move the created layer below the original group, but above the gradient layer.  Press Ctrl + T to transform the layer, right click, select Flip Vertical, and drag it down so it’s just below the original folder icon:

With the new layer still selected, press the “Add Layer Mask” button at the bottom of the Layers Palette (third button from the left).  Get the Gradient Tool (G), set it to a linear black-to-white gradient, and drag out a gradient like this:

Finally, fade out the opacity of the layer to about 50%.  You should have this:

Step 16

Now we’ll make the folder shadow.  Duplicate and merge the folder group once again to make another layer.  Move this layer below the original group, but above the reflection, and go to Image > Adjustments > Hue/Saturation.  Move the lightness slider all the way to the left (-100) to make the layer totally black, and press enter.

Press Ctrl + T to transform the layer, and squash it way down like this:

Not right click on the transformation, and select perspective from the context menu.  Drag out the top right handle a bit to make the shadow look like it’s spreading out from the folder:

Press enter to complete the transformation, then go to Filter > Blur > Gaussian Blur and set the Blue Amount to 8 pixels.  Press ok in the dialog, set the layer’s Blending Mode to “Soft Light”, and lower its opacity to around 30%.

Final Result

And that’s it!  You’ve just created a stunning folder icon with added backdrop, shadow, and reflection.  Here’s the final result:

The Winner…

Congratulations to Mikah Sargent! Here is the winning comment:

Wow, I’ve seen Uprinting’s cards in “the wild” and they really do have fantastic quality. I’m trying to get my graphic design business off of the ground, and 500 cards would be a huge help. I’ve just recently designed a business card, and I was wondering who to go to for my print job. My goodness, five hundred cards isn’t cheap. I’d love to win.

I’ll be sending an email to him shortly with information about how he can claim his prize.

Thanks for everyone who participated in this giveaway! Make sure you subscribe to the RSS feed – I’m sure to be posting more giveaways as time goes on.