There are a lot of ways to go about creating your logo, but one thing is for certain: you want it to be distinct and eye-grabbing. In other words, you want people to notice it, gather an impression, and remember it later. A great way to make your logo stand out is by making it 3D, and while there is a craze for flat design at the moment in the design community, 3D elements still have their place among the rest.

In today’s tutorial, I am going to show you how to create a simple but stunning 3D logo by using only Photoshop. So, let’s get started.

Step 1

To start on our logo, we first need to create a new file. Set up your canvas so that it is 600px wide and 400px tall. You can leave the resolution at 72dpi.

Step 2

Make a new layer and name this layer “Orb”. Select your circular marquee tool and create a fairly large circle in the middle of your canvas. Fill your selection with color #77d7ff and, once you’re done, deselect your image.

Step 3

Change your background color to #000000 and keep your foreground color as #77d7ff. Double-click on your “Orb” layer to access the “Blending Options” menu. Select the box for “Gradient Overlay,” and then change the settings to reflect the image below.

Step 4

To continue giving our orb a more round shape, go back to “Blending Options” once more and select the box for “Inner Shadow.” Enter the same same settings as shown below and press OK for the changes to take effect.

Step 5

Create a new layer and with the pen tool and make a curved arc across the surface of the orb. Look below for clarity.

Fill the new path with color #008aff.

Make sure you are on the orb layer and select the white space around it. Go back to your newly-created curve and delete the excess that hangs off past the orb.

Step 6

With your curved layer selected, access the “Blending Options” menu once again. Check the box for “Bevel and Emboss” and use the settings shown in the image below. Press OK when you’re finished.

Step 7

On a new layer and create another curved shape, but this time with a rounded tip. Make sure this new shape is placed on the right side of the orb.

Fill your new path with color #008aff and, just like before, select the outside of your orb layer and then delete the excess of your newly-created shape. Look below for clarity.

Step 8

Access the “Blending Options” menu to add “Bevel and Emboss” to your larger curved shape. Change the settings so that they match the following.

This is what your image should now look like.

Step 9

We need to add a gradient to this portion of the curve, so after making sure your foreground is color #008aff and your background is #00000, once again go to your “Blending Options” menu, but this time select “Gradient Overlay.” Use the settings shown below and press OK.

The curved portion of your orb will now look more round.

Step 10

Create a new layer and with the circular marquee tool, and create a small circle in the middle of your orb. Make sure it does not touch the edges of the curves. Fill the circle with color #77d7ff. This will be your indent.

Next, add “Bevel and Emboss” to your circular shape by entering the values in the image below. Press OK when finished.

This is what your image should now look like.

Step 11

On a new layer directly on top of your “Indent” layer, and use the circular marquee tool once more to create a smaller circle in the middle. Make sure that you can see a good amount of your indent. Fill your selection with color #ff6c00.

Step 12

Change the background color to #ffbb03 and leave the foreground color as is. Go to the “Blending Options” menu and apply “Gradient Layer.” Make sure that your gradient reflects your chosen foreground and background colors. Use the settings shown in the image below. Press OK once you’re finished.

This is how the mini orb should now look.

Step 13

To continue giving our mini orb a round look, go back to the “Blending Options” on the same layer and select the “Inner Shadow” box. Use the following settings.

Now, check the “Drop Shadow” box and use the settings below.

Your mini orb should now look 3D like this.

Step 14

Begin working on the orb’s platform by first making a new layer and using the rectangular marquee tool to draw a skinny rectangle underneath the orb. Make sure to leave adequate space between the two elements. Fill the rectangle in with color #ffbb03.

Next go to “File” > “Transform” > “Distort” and change the perspective of your rectangle to give it the appearance that it is the top of the box. Press Enter when finished so that changes take effect.

Step 15

Make a new layer and with your foreground color set to #ffcb17, use the polygonal lasso tool to create the front of the box.

Step 16

Use the same method as above to create the side, but this time make sure the color is #ffc600.

Step 17

So that the orb appears to be floating over the platform, create an oval in a new layer and fill it with color #000000.

Change the opacity to 50% and create a Gaussian Blur on the new oval with an 8px blur.

Step 18

You will need to create a shadow for the platform as well. Make sure you use the rectangular marquee tool and place this new layer below the box layer elements. Use the distort tool as needed and, just like before, change the opacity to 50% and apply an 8px Gaussian Blur to the shadow.

Step 19

Create a new layer and make a small ring in the center of the mini orb. Add a 2px stroke it to using color #ff6305.

Then, add a white circle to overlap the top-left part of the ring.

Step 20

Finish your logo up by adding a white glow behind the orb to make it pop. You can now then resize and move your logo as well as add in your desired text and a colorful gradient background.

Download the PSD File

Conclusion

As long as businesses and companies still exist, the need for logos will stay constant. Designing the perfect logo is far from a walk in the park, but once you learn several design techniques, the task will become easier the more you practice. When designing your logo, you should take into consideration your business’ or company’s name, the target audience, and the services offered. Then, see if you can perhaps implement those ideas and connotations into your design. You’ll want to make sure your logo isn’t too busy though. Get your creative juices flowing and remember to always scribble down those unexpected logo ideas just in case.

I’m not going to discuss the definition of typography here, but I’ll show you what we can do with it. Yes, I’m talking about making text effects. And, what else can be more promising than our very own Photoshop to achieve this noble goal? This amazing design tool let you play with unlimited design options, so every time you seek a special theme, it is there to assist you all the way. With little time and effort, you can turn almost anything plain into a beautiful design piece.

So, today I am going to show you how to create a fabric text effect in Photoshop. We will learn how to use and manipulate interesting tools and techniques to achieve our desired fabric text effect. We will employ a variety of patterns, bushes, and blending options. Let’s start designing!

Resources:

Fabric patterns by webtreats

Lace Brushes by Merrypranxter

Let’s have a look ahead at our final result: (Download the finished, layered, PSD file.)

Step 1

Open Photoshop and create a new file with an 800px width and a 600px height.

Step 2

Now, we will start with the background, so select the paint bucket tool and fill the background with color #95cde0.

Step 3

Select the background layer and click on “Layer” > “Layer styles” > “Pattern overlay” and add one of the fabric patterns from the set mentioned above. Change the blending mode to overlay and set the pattern opacity to 65%.

Step 4

Create a new layer by clicking “Layer” > “New” > “Layer,” then select hard round brush and use it randomly with different colors and sizes. Now, change the blending mode of the above layer to “Color Burn.”

Step 5

Now, let’s start with the type. First, we will create the shadow text, so click on the type tool and add text using color #313131.

Step 6

Select the text layer and click on “Layer” > “Layer styles” >“Pattern Overlay.” Now, select another fabric pattern and adjust the opacity to 12%.

Step 7

Now click on “Layer” > “Layer Styles” > Drop Shadow,” using the settings below to add some drop shadow to our text.

Step 8

Repeat the same process used above and create the rest of the shadow text. Then, click on “Edit” > “Free Transform” to move and rotate the text a bit. Look below for clarity.

Step 9

Now, select the type tool and add the main text using color #e36111.

Step 10

Select the main text layer and click on “Layer” > “Layer Style” > “Pattern Overlay” and add another fabric pattern to the text.

After adding the pattern, click on “Color Overlay” and use the settings shown below.

Step 11

Now, let’s move on to the stitches. For the main stitches, we will set the foreground color to #FDDFCD. Select a hard round brush and click on the brush panel to adjust its shadow and spacing so that strokes appear as stitches. After this, create a new layer (“Layer” > “New” > “Layer”). Then, select the pen tool and create a path on the main text, then right-click on it and select “Stroke Path.”

Step 12

Select the newly-created layer and click on “Layer” > “Layer Styles” to add bevel & emboss and drop shadow. Make sure to use the following values for each.

Step 13

Now, we will start with the patches, so create a new layer (“Layer” > “New” > “Layer”) and select the pen tool to create a shape. Then, right-click on it and select the “Make Selection” option.

Now, change the foreground color to #ff8439, and then fill the patch with this color using the paint bucket tool.  Repeat the same process to create the rest of the patches.

Step 14

Select the above patch layer and click on “Layer” > “Layer Style” > “Pattern Overlay.” Add a similar pattern to the patch. Change then pattern blending mode to “Overlay” and set opacity to 47%.

Step 15

Now, let’s stitch these patches onto our text. Adjust the brush settings once again in the brush panel and use it on the patches to create stitches. For these stitches, change the foreground color to #05a5f8.

Step 16

Select the above stitches layer and click on “Layer Styles” (“Layer” > “Layer Styles,” or simply double-click on the layer) to add Bevel & Emboss. Keep the settings the same as shown in the image below.

Again, click on the layer styles (“Layer” > “Layer Styles”) and add drop shadow using the settings shown below.

Step 17

Now, create a new layer (“Layer” > “New” > “Layer”) and select one of the lace brushes mentioned in the resources section. For this brush, make sure your foreground color is changed to #64a5c1 and use this brush randomly on our text. Look below for clarity.

To add some depth, we need to add some drop shadow to our lace. So, select the lace layer and click on “Layer Styles” (“Layer” > “Layer Styles,” or simply double-click on the layer) to add some drop shadow with the settings shown below.

Step 18

Now, let’s create the waves. Create a new layer, select the pen tool, and create a path. Then, change the foreground color to #089ee7, right-click on the path, and click on “Stroke Path.”

Select the above layer and click on “Layer Styles” (“Layer” > “Layer Styles” or simply double-click on the layer) to add some drop shadow. Use the following values.

Now, we’ll add some more stitches. Change the foreground color to #ff8439, select the brush tool, and add stitches using the same techniques and adjustments we used above. Now, click on “Layer Styles” (“Layer ” > “Layer Styles” or double-click on the layer) to add Bevel & Emboss and Drop Shadow with the same settings shown in step 12.

Simply repeat the same process to create some more waves. After this, group the layers and then click on “Layer Styles” to add a Drop Shadow to the whole group.

You can also move one or two waves above the text layers. After that finishing touch, we’re done!

Our fabric text typography is complete. I hope you guys enjoyed the tutorial. I’ll be back with some more; until then, take care!

What is flat design? Flat design is a truly flat element with no illusions of depth. That means that there is little or no visible distinction between the flat element and the surface that it is placed upon via drop shadows, beveling, or other common visual design techniques. Design elements that have been given the almost flat design treatment typically boast subtle treatments that delicately distinguish it from the background. Today’s showcase features 20 websites and mobile apps using flat design that will hopefully get you inspired to try the trend in your own designs.

Built by Buffalo

Google Keep

Oak Studios

Rando

Etch Apps

Timeless

Invoisse

Vine

Lorenzo Verzini

Headspace

Spelltower

Bloom.fm

Design Zoom

Wiselist

Iconwerk

oW

Simone Marcarino

Zomato

Ah-Studio

Feedly

In this tutorial, I’ll show you how to create a realistic iPhone 5 mockup in Photoshop. We’ll use various shape tools, filters, and different layer styling techniques to achieve the final result. Hopefully you will learn some useful tips along the way. So, let’s get started.

Resources: (Download the finished, layered PSD file.)

Potigo Chat App By Sencer Bugrahan

Final Result:

Step 1

Create a new document in Photoshop with a 600px width and a 700px height.

Step 2

First, we’ll make the body of the iPhone. Set #000004 as your foreground color. Now, select the rounded rectangle tool, click the canvas, and put the following values into the options window, 285px width, 624px height, and 45px radius.

Step 3

Duplicate this rectangle, label it as “Frame1” and place it below the original body layer. Hide this new copy; we’ll work on the original layer now. Double-click on the body to open the layer style window and apply the following settings for Stroke and Outer Glow.

Step 4

Unhide the “Frame1” layer, and change its color to #767f8f. Slightly increase its size using the free transform tool (Ctrl+ “T”).

Step 5

To make “Frame2”, set #0b0e13 as the foreground color and input the following values for “Create Rounded Rectangle.” Make sure to place this rectangle below the rest of the layers.

Step 6

Next, we’ll make highlights over “Frame2”. Create a new layer above it, and select a 10px soft round brush to draw a straight line in pure white. Press the “Shift” key while applying the brush to get a straight line. After that, go to “Filter” > “Blur” > “Motion Blur” and apply a 30px motion blur filter to this new layer.

Step 7

Now go to “Edit” > “Transform” > “Warp”. Choose Arch with a 30% bend.

Step 8

Position the highlight over top-left corner at an angle using the free transform tool (Ctrl+ “T”). Now, pick the polygonal lasso tool (“L”) and select the triangular area shown below. After that, go to “Edit” > “Clear” to get rid of the lower portion of the highlight.

Duplicate the highlight and position it over the top-right corner using the free transform tool (Ctrl+ “T”). Duplicate both highlight layers and flip horizontally by going to “Edit” > “Transform” > “Flip Horizontal”. Position them over the bottom corners as shown below.

Step 9

Make a small rectangle using color #1b1f22, duplicate it three times, and position them as shown below.

Step 10

To make the iPhone screen, draw another rectangle using the rounded rectangle tool with the following settings.

Step 11

Next, we’ll make a light reflection. Draw a triangle above the rest of the layers.

Now, select the body layer and click on the icon to “Add Layer Mask,” which is found at the bottom of the layers panel. This would confine the reflection to the body. Set the fill of reflection to 0% and apply a white to transparent gradient to it.

Step 12

Next, we’ll make the buttons. Make a rectangle using the rounded rectangle tool with a 5px radius and #242b33 as your color. Now, press Ctrl + <click on the rectangle> to make selection around it. To make highlights, create a new layer above and apply a soft round brush (40–50% opacity) in pure white over the top edge within the selection. After that, apply the brush at the right and left borders.

Step 13

Make the side buttons using the same technique explained in step 12.

Step 14

Next, we’ll make the camera. Draw an ellipse using color #1e1e1e. To make a highlight, press ctrl + <click on the ellipse> to make selection around it. Create a new layer and apply a soft round brush on it with 20–30% opacity in white color shown below. Draw a smaller ellipse above it using #14171c color and make highlight over it.

Step 15

Make a smaller ellipse using color #0e1377 . Add some shading to it on a new layer using a black and white hard round brush. Reduce its opacity to 50%.

Step 16

Next, we’ll make the receiver. Draw a rectangle using the rounded rectangle tool with a 20px radius and color #191919. Make highlights over it on a new layer using the same technique, and reduce its opacity to 50%.

Step 17

Duplicate the rounded rectangle of the receiver, bring it above the highlights layer, and reduce its size. You can see it below in blue. Set its fill color to 0% and apply the following layer style settings to it.

You can make the pattern used here by creating a new 2px by 2px document with a transparent background. Fully magnify it using the zoom tool (“Z”) and draw the two white pixels shown below. After that, go to “Edit” > “Define Pattern” and save it.

Step 18

Next, we’ll make the home button. Draw an ellipse using color #1b1b1d. Duplicate it, change its color to #000004, and drag it one step downwards. To make a half-moon shaped highlight over it, duplicate the top ellipse and change its color to a lighter gray (#4f5259). Make an elongated ellipse covering its top as shown below. Now, select both the ellipses and go to “Layer” > “Combine shapes” > “Subtract Front Shape”.

Step 19

Apply the following gradient on half-moon shape.

Set #676767 as your foreground color and select the rounded rectangle tool (Tool mode: Shape) with an 8px radius. Set its fill color to “none” and set a stroke of around 1.50-2pt in the top options bar to make a rectangular stroke.

Step 20

Next, we’ll make the shadow. Press “D” to pick the default colors and draw a straight line below the rest of the layers using a 14px Soft round brush. After that, apply a 35px motion blur filter on it to get the effect shown below.

Final result:

That’s it! The iPhone mockup is ready to display your app. I hope you enjoyed the tutorial and learned something interesting. Do share your thoughts!

//

More and more I’m finding that a 960 pixel width works for every design situation that I encounter. As I’ll discuss in this article, there are lots of great reasons to work with 960 grids, and once you have a system in place, you’ll be off and running.

I use this system for rapid prototyping designs. With a quick flick of the wrist, I can have a layout in place that is easy to use in both graphic design software and web design software. Just tell (or set up) a file in Photoshop with a grid of twelve 80px guides. You can easily cut the design up and lay it out in very little time, getting client approval faster and getting more consistent design to development implementation.

Another reason to work with a system like this is that — as I will demonstrate — you can make this design responsive later very easily.

Why 960?

First and foremost, in the last 10 years I have yet to sit down at a desktop or laptop with a screen resolution under 960. While I know older monitors maxed out at 800px, the 960 grid adapts to this size without a problem. How?

960 is evenly divisible in about a dozen ways:

• 2 x 480
• 3 x 320
• 4 x 240
• 5 x 192
• 6 x 160
• 8 x 120
• 10 x 96
• 12 x 80
• 15 x 64
• 16 x 60
• 20 x 48
• 24 x 40
• 30 x 32

What does this mean? You can create a grid system that adapts to the screen layout of any screen size. I don’t use most of the above column widths (I just can’t think of too many scenarios where I would want 30 columns of 32 pixels each). You can make a pretty good system with just a few.

12 Columns to Rule Them All

Now I don’t really think that 12 columns is the ultimate grid system. In fact, I regularly work with 16 columns and 24 columns, but 12 is a really great place to start. Here are some layout scenarios with a 12 column grid system built on a 960px grid system:

(Click to see the full size version)

There are other ways to slice and dice this up, but you should get an idea here that with a few CSS definitions, you can lay out your grid very easily and effectively. I just reach for 12 columns as the default because it covers 99% of what I need. In extreme scenarios where I need a 16, 20, 24, or even 30 column design, it’s easy enough to accommodate with the design I’m about to show you.

Staging the Layout

For this article, I am going to settle on a simplified layout. Since I usually only need a few of the above layout scenarios, I like to settle on

1. Full width
2. Half width
3. 1/3 width
4. 2/3 width
5. 1/4 width
6. 3/4 width

Again, there are lots more, but I’m also thinking long-term to responsive design. If you break the design into too many small parts, responsive design becomes more awkward and clunky.

With the above layout, you have all the column widths you need for most design scenarios. Full width covers banners and navigation. 3/4 and 1/4 covers articles with a sidebar. The others are great for callout boxes and other design elements.

The CSS

With our above column widths, we can now set up our CSS. Because we want some space between elements, we’re going to add a 10px margin to everything, so you’ll see the widths change to reflect this.

So let’s take a look at the beginnings of the CSS model:

body {
min-width: 960px;
margin:auto;
}
/* Wrapper */
.row {
width:960px;
margin:auto;
}

To begin, we simply lock down the body width at 960 pixels. We’re going to want to wrap each row of our column in a wrapper that keeps everything where it should be, although there are several good reasons not to have this — like portfolio layouts where you want elements moving around each other.

Now we stage the “gutters” — the widths between the columns so that our text or other design elements aren’t sitting on top of each other.

/* Column margins */
.col_12, /* full width */
.col_9, /* 3/4 width */
.col_8, /* 2/3 width */
.col_6, /* half width */
.col_4, /* 1/3 width */
.col_3 /* 1/4 width */
{
margin-left: 10px;
margin-right: 10px;
display: inline;
float: left;
}

I labeled each of the column numbers for easy reference in case you forget which column is which. It happens.

Next, we need a way to make sure the left-most columns goes to the left and the right-most columns sticks to the right.

/* First and Last */
.first {
margin-left:0;
}
.last {
margin-right:0;
}

Then, we stage our actual widths for each column type.

/* Column widths taking into account the margins */
.col_12 {width:940px;}
.col_9 {width:620px;}
.col_8 {width:700px;}
.col_6 {width:460px;}
.col_4 {width:220px;}
.col_3 {width:300px;}

Now, let’s put it all together in a seamless CSS package that you can save and put to use right away:

/* Fix the width of the body */
body {
min-width: 960px;
margin:auto;
}
/* Wrapper */
.row {
width:960px;
margin:auto;
}
/* Column margins */
.col_12, /* full width */
.col_9, /* 3/4 width */
.col_8, /* 2/3 width */
.col_6, /* half width */
.col_4, /* 1/3 width */
.col_3 /* 1/4 width */
{
margin-left: 10px;
margin-right: 10px;
display: inline;
float: left;
}
/* First and Last */
.first {
margin-left:0;
}
.last {
margin-right:0;
}
/* Column widths taking into account the margins */
.col_12 {width:940px;}
.col_9 {width:620px;}
.col_8 {width:700px;}
.col_6 {width:460px;}
.col_4 {width:220px;}
.col_3 {width:300px;}

See the 960, 12 Column Grid in Action!

Now, let’s put it into practice. Save the above code as a CSS document and call it “960–12-col.css”. In the same folder, copy and paste the following HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
<title>Sample 960, 12 Column Grid Layout</title>
<link rel=“stylesheet” type=“text/css” href=“960–12-col.css” />
<style>
/* Column margins */
.col_12, /* full width */
.col_9, /* 3/4 width */
.col_8, /* 2/3 width */
.col_6, /* half width */
.col_4, /* 1/3 width */
.col_3 /* 1/4 width */
{
height:50px;
margin-top:10px;
margin-bottom:10px;
text-align:center;
display:table-cell;
vertical-align:central;
}
</style>
</head>

<body>
<div class=“row”>
<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width column</p></div>
</div>
<div class=“row”>
<div class=“col_9 first” style=“background-color:#3F6”><p>Here’s a 3/4 width column</p></div>
<div class=“col_3 last” style=“background-color:#6CC”><p>And it’s 1/4 width counterpart</p></div>
</div>
<div class=“row”>
<div class=“col_8 first” style=“background-color:#CF0”><p>Here’s a 2/3 width column</p></div>
<div class=“col_4 last” style=“background-color:#9CC”><p>And it’s 1/3 width counterpart</p></div>
</div>
<div class=“row”>
<div class=“col_4 first” style=“background-color:#9CC”><p>I’m a 1/3 width first</p></div>
<div class=“col_8 last” style=“background-color:#CF0”><p>And I’m a 2/3 width last</p></div>
</div>
<div class=“row”>
<div class=“col_6 first” style=“background-color:#9CC”><p>Want to go halfsies?</p></div>
<div class=“col_6 last” style=“background-color:#CF0”><p>Sure, I’ll go halfsies!</p></div>
</div>
<div class=“row”>
<div class=“col_3 first” style=“background-color:#CF0”><p>Here’s a 1/3 width column</p></div>
<div class=“col_3” style=“background-color:#9CC”><p>I’m a 1/3 width column, too!</p></div>
<div class=“col_3 last” style=“background-color:#9CC”><p>I’m the last 1/3 width :^(</p></div>
</div>
<div class=“row”>
<div class=“col_4 first” style=“background-color:#CF0”><p>Can we do 1/4 column</p></div>
<div class=“col_4” style=“background-color:#9CC”><p>Sure we can do 1/4!</p></div>
<div class=“col_4” style=“background-color:#9CC”><p>I echo that sentiment!</p></div>
<div class=“col_4 last” style=“background-color:#9CC”><p>Why am I always last? :^(</p></div>
</div>
<div class=“row”>
<div class=“col_12 first” style=“background-color:#936″><p>Here’s a full width footer column</p></div>
</div>
</body>
</html>

Make sure the stylesheet in line 7 is the same as the CSS file you saved. Open it up in a browser and you’ll see the grid in action:

(Click to see the full size version)

The markup in the HTML above adds a few things just to make the grid easy to see. You can delete or comment out the <style> section in the header.

Graphic Design with the 960, 12 Column Grid

So, I couldn’t leave you with just a CSS template. I went ahead and handed you my Photoshop template as well. Download it, save it, and give it a look. Each of the standard column layouts are in there so you can see how each fits together.

The guides will help you lock your design down and make it very easy to translate your graphic design into workable code later. I design the layout in Photoshop and then send to the client for review. Once we go through the umpteenth approval review board and have a final design, Then I’ll finally chop it up into code and translate it to the page.

Depending upon the project, I may skip straight to the CSS design and send them a link for review, but the more complex the design, the more I tend to start with a graphic I can send them and get approval first.

Enjoy and let me know what you think!

One of the easiest ways to give your site a near-instant facelift is to bring CSS3 transitions to the table (pun intended). As users interact with various elements on your page, transitions allow for a delayed response that is far more natural and engaging than a jarring, instant response. Case in point, hover over these two boxes and tell me which is more interesting to you.

Drop this into an HTML document and check it out:

<html>
<head>
<style>
#box-static {width:250px; height:170px; background-color:#999; background-color:#999; float:left; margin:10px;}
#box-static:hover {background-color:#333;}
#box-dynamic {width:250px; height:170px; background-color:#999; background-color:#999; float:left; margin:10px; transition:all 1s;}
#box-dynamic:hover {background-color:#333;}
</style>
</head>
<body>
<div id="box-container" style="width:600px;height:200px;display:block;">
<div id="box-static"></div><div id="box-dynamic"></div>
</div>
</body>
</html>

Yeah, I know gray boxes aren’t all that exciting, but the point is that the transitions on the box to the right are more interesting and give the design a more polished feel.

Pseudo-Classes for CSS Transitions

The key to making CSS transitions work is through the use of pseudo-classes. You’ve seen these before, even if you didn’t know what they were called. The most common example is probably the a:hover pseudo-class.

a {
color:#CCC;
background-color:#333;
}
a:hover {
color:#333;
background-color:#CCC;
}

Here we have the CSS element for a link and the pseudo-class “hover” for when the mouse is over the link. Pseudo-classes are subsets of a class. They take on the parent CSS automagically and apply new or different CSS upon interacting.

Some other important pseudo-classes you need to know for CSS transitions include:

• hover: obviously.
• active: when an element gets clicked
• focus: for tab-based selection (accessibility and forms)
• target: for matching an on-page ID with a link target

I won’t address the target pseudo-class in this article because it’s rare and is still buggy across browsers. But hover, active, and focus are fully functional (IE10+) and easy to implement.

Introducing CSS Transitions

With all that background out of the way, we can have a more thorough discussion of CSS transitions. They are simply a CSS property that allows you to make the differences between two different CSS elements to change slowly instead of instantly. When you hover your mouse over a button that has a pseudo-class of hover with different color of text and background, the button immediately changes. Transitions allow you to make the change occur more slowly, giving your designs a far more interactive feel.

You can use transitions on just about any CSS element using pseudo-classes: divs, paragraphs, spans, tables and sub-elements of tables, images. Just apply the appropriate pseudo-class and define the CSS change. I stick with background-color for the most part as it creates an interesting effect.

Properties of the CSS Transition

To be thorough, the above example is simply consolidating several CSS Transition properties:

• Transition-property: the CSS you want to target for the transition, like color, background-color, width, height, etc
• Transition-duration: how long in seconds or milliseconds you want the transition to take.
  • For seconds, use an ‘s’ like 2s
  • for milliseconds, use ‘ms’ like 2000ms
• Transition-timing-function: how the transition merges, meaning that you can adjust to have an eased transition, stepped, or linear. Default is ease, which works for 99% of what I need, but here are the primary attributes:
  • ease-in starts the transition slowly and finishes at full speed
  • ease-out starts the transition at full speedand finishes slowly
  • ease-in-out starts slowly, gets fastest in the middle of the transition, and finishes slowly.
  • ease is nearly identical to ease-in-out except it’s a little less dramatic towards the middle of the transition
• Transition-delay: also in seconds or milliseconds, defines an amount of time to delay before starting the transition.

Or, you can consolidate all these into a single transition, just keep them in the following order:

transition: property duration timing-function delay;

A complete example would look like this:

a {
color:#CCC;
background-color:#333;
transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
-webkit-transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
}
a:hover {
color:#333;
background-color:#CCC;
}

Notice that you will need to use –webkit-transition to make these work in the vast majority of browsers.

In pseudo-code, this would read something like: transition the color of the link, make the transition take 1 second to complete, gently ease in and out of the transition, and delay for half a second (500ms) before making the transition.

You can use a comma-delimited list with the transition to cover all the target properties you want. I prefer to consolidate my transitions into the single CSS attribute, but if you had some very specific transitions you wanted to craft, you may want to break each down.

Where to Place Transitions

I wondered for awhile if I should place the transition in the parent or the child. After all, the following two examples have the same exact effect:

a {
color:#CCC;
background-color:#333;
transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
-webkit-transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
}
a:hover {
color:#333;
background-color:#CCC;
}

–OR–

a {
color:#CCC;
background-color:#333;
}
a:hover {
color:#333;
background-color:#CCC;
transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
-webkit-transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
}

But here’s what I’ve found, I prefer to put the transition in the parent so that all other child elements get the transition. If you want separate effects based upon the situation, you can always provide a different transition specific to that element. But I find that to be extremely rare. 99% of the time I want a consistent transition effect, so I put the transition in the parent element.

Beyond :hover and Links

Two other really important pseudo-classes need to be discussed for this to be a thorough guide: active and focus.

Active is when an items is actually clicked and can have its own separate transitions. While not critical from a design standpoint, this can add a whole other layer of interactivity to your designs.

Focus is for tab-based browsing. I use it on forms and navigation elements primarily, but should be considered any time you need to make your site more accessible.

My focus typically mirrors my hover, simply because they’re about the same thing from a functionality standpoint. This is where delaying the effect by 250–500 milliseconds can be useful so that you users aren’t tabbing through what may look like a Christmas tree as every tabbed element goes through a transition.

Working Sample

Let’s pull all these concepts together into a complete working sample. I like using transitions on menu items:

<html>
<head>
<style>
/* make the li inline for horizontal menu */
#menu li {
display:inline;
font-size:18px;
margin: 3px 8px 3px 8px;
}
/* initial definitions */
#menu a {
color:#333;
border-bottom: #333 2px solid;
background-color:#fff;
padding:5px;
text-decoration:none;
transition:color 1s ease-out 250ms, background-color 1s ease-out 250ms;
-webkit-transition:color 1s ease-out 250ms, background-color 1s ease-out 250ms;
}
#menu a:hover {
color:#fff;
background-color:#666;
}
#menu a:focus {
color:#fff;
background-color:#666;
}
/* note how I made the transition delay 0ms */
#menu a:active {
color:#333;
background-color:#666;
transition: 1s 0ms;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" tabindex="1">Nav Text 1</a></li>
<li><a href="#" tabindex="2">Nav Text 2</a></li>
<li><a href="#" tabindex="3">Nav Text 3</a></li>
<li><a href="#" tabindex="4">Nav Text 4</a></li>
<li><a href="#" tabindex="5">Nav Text 5</a></li>
</ul>
</div>
</body>
</html>

Do you rely on CSS3 transitions within your designs?. Would you use it for essential functionality, or just an added layer of polish for those who support it with modern browsers?

I’m a big believer in color. I would go so far to say that all colors are beautiful, even the ones I don’t relate to very well. In combination with the right colors, they can be even more appealing and produce the right feelings in a target audience. In combination with the wrong colors, however, or used in the wrong way, all colors have the potential to simply be obnoxious. In fact, some advertisers seem to use bright, neon, abrasive, or even mismatching colors in a lazy attempt to capture attention. The problem is that these colors may initially grab attention but ultimately damage the brand and the credibility of the offer.

The following are some of the worst uses of color in advertising, both online and in print. Glance through and make sure you aren’t using any of the following simply as a short-term strategy to attract attention.

1.) Green, Yellow, or Purple on a Green Background

You would think that putting two colors of almost identical hues on top of one another would be common sense, but apparently it still happens. In this ad, it is understandable what the marketer was trying to accomplish — green and yellow are sensible choices for a landscaping ad. However, using only these colors on an ad makes it highly unreadable, both on print and on the web. The colors are simply too close together.

In fact, the worst colors to use on a green background are most shades of green, yellow, or purple. If done with the exact right shades, purple and green can create an intense design. But purple text on a green background are just that — too intense to be easily read.

2.) Light Colors on a White Background

White is already light, so adding light-colored text such as green or yellow on a white background is going to create readability issues. Thankfully, the website above didn’t go with this original design, probably due to the bad color combo. Bold text helps a little, but not much. It is always best to stick with darker shades of grey or black with white.

3.) Neon or Rainbow Colors

Both neon and rainbow color combinations are definitely eye-catching. But beyond this, they are aversive and very irritating. They tire our eyes very quickly, and mostly just end up causing annoyance instead of more positive feelings that companies want customers to associate with their brand.

4.) Colored, Textured Background with Colored Text

This is another green-on-green example that is could have been better. I’m not sure why this seems like such a common marketing mistake, except that maybe green is just a likeable and versatile color. But, even the best colors can be too much if implemented the wrong way. What I want to point out in this example is just how unreadable colored text is when placed directly on a highly textured background, especially one with a strong color. Turn down the opacity, if you must place text directly on an image. Or, place the text in a box where you have better control of the background.

5.) Red, Blue, or Purple on Black Background

Unless you really want to push the goth look, avoid red on a black background, even with images. Blue and purple are just as bad. Text in these colors on a black background are also completely unreadable. In fact, almost any color of text on a black background is hard to read, even white. Usually, you should use colored or white boxes if you need to put more than a line of text on a black background. Black is simply too strong of a color and overpowers every other color on the page.

6.) White Gradient with White Text

Gradients are terrific when used well, but as a quick trick to draw attention, it usually ends up hurting a design more than helping it — and even more so when you use the same color for both the gradient and text. And, I’d advise that you don’t ever use more than one gradient in a single advertisement.

7.) Multiple Colored Boxes

Too many different colors look bad, no matter which colors are used. Lots of hues confuse the eye, so readers don’t know where to start first. This is why one of the rules for good design is to limit the number of colors to two or three, and on rare occasion, four.

8.) Yellow, Blue, and Magenta on Red Background

Yes, yellow contrasts well with red. But in the case of a wall of text, yellow and red simply are not an appealing combination. I get a little dizzy looking at the website above, in fact. Not many designers can pull off a red background well. Just as with black, it is very overpowering and hard to balance well with other colors. And, the shade of red in the website above, #ff0000, should never be used in such large amounts.

Most designers know that blue and red are the worst color combinations possible when it comes to text, and especially blue text on a red background. The colors are both too strong and fight to overpower each other, which plays tricks with our eyes. In the example above, they also place a magenta box on the red background…not advisable. Red and magenta get placed together way too often, in my humble opinion. They are two colors that clash terribly and are no-no’s in any use, not just ad design.

9.) Bright Blue Background

Now I’m not saying that all websites with blue backgrounds are bad. In fact, some are quite brilliant. But, bright blue is another color that is just too strong for a background if not designed well. In small amounts or as text on a light background, it can be striking. Or, even just a slightly darker shade of blue works well in large color blocks. The brighter and closer to neon it gets, though, the harder it is to look at for long periods of time. As you can see with the above example, not even black looks good with such a bright background, not to mention a few other obvious improvement areas.

10.) Pale Yellow Background

The shade of yellow used in the above website is great in small amounts used in combination with brown or dark red for, say, a retro look. But, as the entire background, it simply comes across as a very unappealing hue. Yellow is supposed to cause feelings of happiness, childlike bliss, etc. This website certainly doesn’t entice such feelings, nor does the following mock bad website designed in dull orange:

Are there any other colors or color combos that you absolutely abhor? Please help make the world a more beautiful place by exposing these poor design practices in the comments below.

So we’re going to look at how to get the most out of the Flot tools and dive into how to get your Flot charts branded and looking exactly like you want them.

Disclaimer: There are a million things different with your WordPress site when compared to mine. You may want to test the look and feel of your Flot charts on a test server, because all it takes is one forgotten semi-colon and the charts will disappear. So start by backing up your system once it works — make some changes — back it up again, etc.

With that little admonition plainly stated, let’s get into the fun stuff!

The Flot Library

The Flot tools are fairly robust. You can change just about every element of the charts and diagrams. So, if you have a well-defined brand with a specific set of colors and shapes, you’ll be able to get your charts and graphs looking rock solid.

Flot breaks each of the data series up, so each can be individually controlled in terms of colors and shapes. You can change the background color, use gradients, and control where you want the legend to show up, if at all. Even the gridlines themselves can be customized. So, let’s jump into the details of a few of these features so you can see for yourself.

Data Series

Let’s look at how we can control our pushups data series first, and we’ll build on that. Here is one way to control the way the data series looks:

• Label: string. Put the label you want for the data series in quotes
• Lines: these have several attributes. Start with an open bracket and finish with a close bracket, like CSS.
  • show: boolean (true/false) — if you want the lines to show up between the points, set this to true, false if you want to hide the lines
  • lineWidth: number. The number “5” is equal to 5px, as an example. No quotes.
  • fill: boolean (true/false)
  • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000”
• Points: have several attributes
  • Radius: number. The number “5” is equal to 5px, as an example. No quotes.
  • fill: boolean (true/false)
  • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000”
• Bars: have several attributes
  • barWidth: number. In converted time or pixels. No quotes
    • Example 1: Data is by day, so barWidth: 60*60*24*1000. This is because the date is in Unix Timestamp.
    • Example 2: Data that is not in date/time format needs to be a number in pixels = barWidth: 5, equals 5px
  • align: “left”, “right” or “center”. Relative to the X axis
  • horizontal: boolean (true/false), default is false
  • fill: boolean (true/false)
  • fillColor: string. Can be hex or RGB or even RGBA. Use quotes: “#f000”

Colors for Series and Labels

It seemed counter-intuitive at first, but I actually like how Flot assigns color to a series. Instead of defining the color within the lines or bars data, you assign it as part of an options argument that applies to the graph as a whole. What happens is that when you define the color of a series, all connected elements get the same color. In other words, when you give a line a label, the label box automatically gets the same color as well.

If you had three series of data, you would assign them like this:

colors: ["#f7941e","#2935A","#15AF5C"]

The colors get buggy when you try to use RGBA, so stick with hex numbers for your colors.

Grid Colors

The grid is highly customizable. There are nearly two dozen attributes, but here are the ones that most people will want. The documentation lists all of them:

• show: boolean (true/false)
• color: color. Gridlines. Stick with hex as RGB and RGBA get buggy
• backgroundColor: color/gradient. Gradients are defined by multiple colors:
  • [color1, color2]
  • You can also list the level of opacity (alpha) with a separate group

Legend Formatting

I use a CSS doc to define several elements within my Flot charts, and the legend is one that is absolutely necessary to do so. In your CSS document (layout.css in my resources), make sure you include the following

.legend table {width: auto;}

This will make sure all your other formatting works. It’s a bug in Flot and this is the simple fix.

You have about 20 options you can tweak with the legend, but the biggest thing to observe here is that the format is different for legends. There’s only the open and close brackets, but each attribute is only separated by commas:

• show: boolean (true/false)
• labelBoxBorderColor: color. Stick with hex colors.
• position: ‘ne’ or ‘nw’ or ‘se’ or ‘sw’. Make sure to include the quotes.
• margin: number of pixels
• backgroundColor: null or color. Null means it autodetects.
• backgroundOpacity: number between 0 and 1. Default is .85.

A sample would look like this:

legend:
{
show: true,
position: 'nw',
margin: 15,
}
If you're hardcoding using PHP, you'll need to escape the single quotes if you're using the position attribute:
1
echo 'legend: {position: \'nw\',}';

The legends are buggy in Flot. If you find that you’re code isn’t having an affect, you can go straight into the jquery.flot.js file and do a CTRL+F for “legend”. You’ll see all the default values here. It’s totally a hack, but it gets the job done.

Sample Finished Chart

Here’s what mine looks like with minimal coding:

And here’s the JavaScript that you can use for testing purposes:

jQuery(document).ready(function($){
var d1 = [
[1351753200000,31],[1351839600000,33],[1351926000000,43],[1352012400000,54],
[1352098800000,65],[1352185200000,66],[1352271600000,43],[1352358000000,37],
[1352444400000,50],[1352530800000,54],[1352617200000,52],[1352703600000,67],
[1352790000000,75],[1352876400000,72],[1352962800000,75],[1353049200000,78]
];
var d2 = [
[1351753200000,14],[1351839600000,21],[1351926000000,53],[1352012400000,64],
[1352098800000,75],[1352185200000,86],[1352271600000,93],[1352358000000,77],
[1352444400000,65],[1352530800000,51],[1352617200000,48],[1352703600000,44],
[1352790000000,40],[1352876400000,44],[1352962800000,45],[1353049200000,58]
];
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,
[
{
data: d1,
label: "Justyn Pushups",
bars: {
barWidth: 60*60*24*600,
show: true,
align: "center",
},
points: {
show: true,
fill: true,
fillColor: "#ccc",
radius: 5,
},
},
{
data: d2,
label: "Tara Pushups",
lines: {
show: true,
fill: true,
fillColor: "rgba(141, 141, 141, .5)",
lineWidth: 5,
},
points: {
show: true,
fill: true,
fillColor: "#ccc",
radius: 5,
},
}
],
{
xaxis:
{ mode: "time" },
colors:
["#f7941e", "#1db5cb"],
grid:
{
backgroundColor: {colors: ["#ffffff","#c0c0c0"]},
colors: ["#666"],
},
legend:
{
show: true,
position: 'nw',
margin: 15,
},
}
);
}
);

If using in PHP, just wrap the above code like this:

echo '
//all the above code here
';

Critical Tip:

I recommend making very small changes to layout and formatting. The entire chart will disappear on you with one malformed statement. And, with each attribute often having its own syntax, it’s really easy to break your charts.

Other Points

You have lots of different kinds of graphs and charts available: line, pie, and bar. The Pie charts need their own tutorial because there are lots of ways to use them. The example file included with the documentation is really good for showing how to format pie charts.

The best way to really get in there and learn is to look at the big list of example files included in the documentation. They have just about everything, but it’s hard to follow without this primer.

Show off your work! I really want to see lots of big, lovely charts! We have so much data at our disposal and in the past it’s been difficult to display. I hope to see this system take hold as a standard so we can all build on it and create a community around Flot.

Recording Your Photoshop Actions

It isn’t difficult to record your own Photoshop action. I suggest that you write down the steps ahead of time to get the results that you want. This will make it less likely that you’ll make a mistake and have to start over again. The beautiful thing about creating your own actions is that it records each step that you perform and not the time that it takes you to do each one. This is great for recording actions because you can take your time and concentrate on doing each step in the right order.

Practical Uses For Photoshop Actions

For my blog, I need my images and screenshots to be 600px wide. This is fairly common for most blogs. However, the list of articles on the homepage needs to be proportionally 450px tall. I use actions to resize my images quickly. Portrait (vertical) images can be any height, because I don’t use those as my feature images, so the action that I have recorded for portrait images simply resizes the width to 600px, and that is it. However, I had to record a separate action for landscape (horizontal) images. I still have the width set to 600px, but the height is set to 450px via the canvas size setting, so if the image isn’t tall enough, Photoshop adds white canvas space at the top and bottom. I haven’t had to manually resize my photos since.

Creating Photoshop Actions

Download the example image here. The image is of an office, which is something that I might use for one of my articles. The image is 3348px wide, which is way too big for an average blog’s content area. Normally, we would just go to “Image” > “Image Size” and set the width to 600px. This is fine to do, but what if you had 15, 20, or 500 images? Having an action for this is much easier, and you can even assign a hotkey to the action to make it even more automated. Go to “Window” > “Actions”  and the Actions panel will come up.

Click on the icon that looks like a new layer icon and a dialog box will come up. Be sure to name your action something that makes sense. I just use the practical method of naming it something that tells me what it is or what it does. In the example below, I named our action “Width 600px,” and put it in the Actions Set called “Default Actions.” This is the default Actions folder for Photoshop Actions. If you are going to create of Actions related to each other, then it might be a good idea to create a new set of actions and save them in a separate folder. You can also assign a function key to each Action. To keep it from conflicting with Photoshop’s other keyboard shortcuts, you can add the Shift key, the Command key, or both.

The icons at the bottom work just like a normal music player. The square button is for stop, the circle is for record, and the triangle is for play. When you are ready to record your action, click the circle icon, and it will turn red, which means recording is active. For our action, I hit Command/Ctrl + Alt/Option + “I” to bring up image size, and set the width to 600px.

The height is only 400px, which isn’t tall enough for my needs. This will cause content to shift and won’t work for my formatting, so I need to make the height 450px tall after the width has been set to 600px. To do this, I will bring up Canvas Size by hitting Command/Ctrl + Alt/Option + “C”. Where the height says 400px, I change that value to 450. Whatever the background color swatch is will end up being the canvas color at the top and bottom. When I am finished creating my action, I hit the square “Stop” button.

Photoshop will save your Action for later, making this really easy to use when you need it. Now, all I have to do is open an image and hit Command + F8 to size my landscape images accordingly.

CS6: Photoshop Conditional Actions

Just when you thought that actions couldn’t get any better, Adobe sets the bar another step higher. Now in Photoshop CS6, you can set conditional Photoshop actions. In my example, I created an action for setting the width to 600px and then setting the canvas size to 450px. Well, what if my image is portrait? I’d have to use a different Action for that one. Since it doesn’t matter what the height of the image is, as long as it is 600px wide, we’ll use the same method used above to record this action without adjusting the canvas size. Next, click the flyout menu. Make sure the Action that you’d just created for the width being 600px wide (without the canvas height adjustment) is selected. Click on “Insert Conditional.”

You can tell your Photoshop Actions to behave one way if the target image is landscape and another if it isn’t. We will use our two actions together in this single conditional Action. If the image is landscape, make sure that it is 600px wide and at least 450px high. If it isn’t landscape, all you need to do is make it 600px wide. Click “OK”, and Photoshop will update the first action with an “if” statement.

I downloaded the image below here. I ran the conditional Action via its hotkey, and this portrait image was resized without being chopped down to a 450px height. After checking to make sure it worked, I renamed the Action as “Width 600px Conditional.” To rename an Action, just double-click its name within the Actions Panel.

The Beauty of Conditional Photoshop Actions

Now it is possible to run conditional Photoshop Actions as batches, too. Instead of having to run a separate batch for portrait and landscape images, they can all be dumped into a folder and resized via a Photoshop Batch. To run a batch, go to “File” > “Automate” > “Batch.”

Choose the set that your Action belongs to and choose the conditional Photoshop Action that you just created. Choose the source folder where your collection of images are located. Then, choose a destination folder for your processed files to go into. I usually just create a folder inside of the original folder called “processed.” At the bottom, it says “stop for errors”. When I ran this batch, I kept getting a message that the if condition wasn’t available, but it still ran the batch anyway. I just had to click the button telling it to proceed. If you want to avoid this, tell Photoshop to log errors to a file. If you do this, the files that had errors will have to be saved manually to the destination folder. To me, it is much less of a headache to hit Enter/Return a few times than to have to manually save multiple images.

Conclusion

Photoshop Actions are an incredible tool for creating time-saving shortcuts for repetitive tasks. If you have a repetitive task that takes multiple steps, it is easy to just record it once and then have it available as a hotkey. If you have a folder full of images you can run a batch, taking a half an hour of manual work and tuning it into just a minute or two of work can save you tremendous amounts of time in the long term. With the addition of conditional Photoshop Actions, we can now save even more time by telling Photoshop to look for certain parameters. There are other conditions besides the landscape format, such as being square, RGB, being an unsaved document, and more.

What do you use Photoshop Actions for? Have you tried out the new conditional Photoshop Actions feature? How much time do you think it could save you?

Today, I’ll show you how to create a leather wallet in Photoshop from scratch. We’ll use various shape tools, blending options, and filters to achieve the final result. Hopefully, you will learn some useful tips along the way. So, let’s get started!

Resources:

Leather Texture

Final result: (Download the finished, layered PSD file.)

Step 1

Create a new document in Photoshop with a 1000px width and a 750px height.

Step 2

Set #d97d2b as your foreground color and select the rounded rectangle tool. Click on the canvas, and enter following values for rounded rectangle, and hit “OK”.

Now go to “Edit” > “Transform” > “Skew” and drag the point shown below upwards.

Step 3

Select the pen tool (Tool mode: Shape) to draw the shape below over the top-left corner of the rectangle. After that, select both the rectangle and the new shape layers and go to “Layer” > “Combine shapes” > “Unite Shapes.” Now, label the combined shape as “Wallet front”.

Step 4

Duplicate the wallet front layer, change its color to #79330c, drag it a bit outward, and position it behind the original layer.

Step 5

To create shading, we’ll use the burn and dodge tools. Press Ctrl + <click on the wallet front layer> to make a selection around it. Create a new layer above it and go to “Edit” > “Fill.” Use 50% gray to fill the selection. Now, select the burn tool (Range: Midtones, Exposure: 40–70%), choose varying sizes soft round brushes, and apply them roughly on this layer to darken some areas. Once you are done, select this layer and go to “Filter” > “Blur” > “Gaussian Blur” and apply a 3px value to blend any harsh outlines.

To create highlights, select the dodge tool with the same settings used with burn tool and apply it on the gray layer. Apply a 2-3px Gaussian blur filter on it to blend it in. Change the blending mode of gray layer to “Overlay” and adjust its opacity to 80–90%.

Step 6

Set white as your fill color and select a 5px soft round brush. Now, select the pen tool (Tool mode: Path) to draw the path shown below. After that, right-click the canvas and choose the option of “Stroke path” > “Brush.” Then, hit “Delete” to get rid of the path.

To make another highlight, draw the line shown below using a 16-18px soft round brush and go to “Filter” > “Blur” > “Motion Blur.” Apply the following settings here.

Make few more highlights using the same technique. Collect all of the highlights and gray layer in a single group, and label it as “Shading.”

Step 7

Next, we’ll apply texture on the wallet. Go to “File” > “Place” and choose the desired leather texture. Resize and align it over the wallet using the free transform tool (Ctrl + “T”). Now, press Ctrl + <click on the wallet front layer> and press the “Add layer mask” icon present at the bottom of the layers panel. Change its blending mode to “Soft Light.”

Step 8

Now, we’ll give it stitch effect. Set #e49251 as your fill color and go to “Window” > “Brush Presets.” Load the square brushes. Press “F5” to open the brush panel and apply the following settings for square brush.

Next, we’ll apply this on a new layer in a straight line. Duplicate it and change its color to black using “Color Overlay” with the settings shown below. Drag the black stitches layer a bit to the right and below the original layer.

Step 9

Double-click on the original stitches layer to open the layer style window and apply the following settings.

Select both stitches layer and press Ctrl + “E” to merge them. Now, duplicate it, position near the top edge of wallet using the free transform tool, and erase any unwanted parts. Duplicate it twice and position them over the other sides.

Step 10

Set #c16819 as your foreground color, drag a round rectangle with the same settings as used in step 2 and skew its right border a bit to give it the shape shown below. Label it as “Backside.” Duplicate it and change its color to #59260d. Place it behind the original and drag it slightly outwards.

Apply the following values for inner shadow on the backside layer.

Step 11

Now, make a highlight near the top edge of the wallet backside in the same way as explained in step 6. Select the soft round eraser tool to erase the line at several points to make it realistic. Look below for clarity.

Step 12

Duplicate the backside rectangle, decrease its size, and change its color to #d97d2b. Label it as “Inside.” Duplicate it, change its color to black, place it behind the original layer and drag it outwards as shown below.

Step 13

Apply the leather texture at the backside in the same way that we applied it to the front in step 7. Reduce its opacity to 80–90%.

Step 14

Duplicate the stitches layer few times and arrange them over the backside, as shown below.

Step 15

Next, we’ll make few pockets. Duplicate the inside rectangle and apply the texture on it. Merge both layers and label it as “Pocket.” Apply the following layer style settings to it.

Duplicate the stitch layer, place it near the top edge of pocket, and merge it with pocket layer. Now, duplicate the pocket layer twice and arrange them at some distance over each other. Now, click on the pocket layers one by one, press Ctrl + <click the inside rectangle> to make a selection around it, and add layer mask to them.

Step 16

Select a soft round brush with 50% opacity and apply it on a new layer in black. Change its blending mode to “Overlay.”

To do more shading over the pockets, create a gray fill layer and apply burn and dodge tools over it using the same technique from step 5. After that, change its blending mode to “Overlay” and its opacity to 40–50%.

Step 17

To give the impression of coin in lower pocket, make an ellipse using the ellipse tool.

Set your fill color to 0% and apply the following settings for “Bevel and Emboss.”

Now, apply a 1.5px Gaussian blur filter on it after rasterizing the layer. You can make more coins by simply duplicating the layer.

Step 18

To make the stripe, draw the following shape using the pen tool (Tool mode: Shape) using color #d97d2b. Make a small ellipse below the rest of the layers in #682f08 color and position at the top-right corner of the stripe.

Step 19

I did some shading over the stripe and applied a texture with 40–50% opacity. To make the button, draw an ellipse using color #141414.

Step 20

Now, apply following settings for Bevel and Emboss and Drop Shadow on the button.

Duplicate the stripe layer, change its color to black, and place it below the original layer. Now, position it at an angle using the free transform tool. Finally, change its blending mode to “Multiply” and its opacity to 40%.

Step 21

To make the other half of button, draw an ellipse using color #817282. Slightly compress it using the free transform tool. Then, duplicate it. Apply the following values for Drop Shadow on the original layer.

Apply the following settings for Stroke and Gradient Overlay on the duplicated layer.

Now, make a smaller purple ellipse above and apply the following drop shadow settings on it. Make another ellipse above it using color #e2e0e3.

Step 22

Now, make the shadow using the same technique from step 6, but use a pure black color this time. Duplicate and position your two shadows as shown below.

Step 23

That’s it guys, the leather wallet is ready. However, you can add further enhancements your wallet to make it even more interesting. I’ve add few credit cards and money vectors as an example.

That’s all for now, I’ll be back with some other exciting tutorials for you.