In this tutorial, you will learn how to create a simple mailbox icon in Photoshop.

This tutorial is aimed or beginners. We are going to use simple tools like the pen tool and layer styles so it’s important to have a basic grasp of Photoshop’s key features.

This lesson will show you how to put them to work and create a practical outcome.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new file and gather some reference images from Google.

Step 2

Create a new layer, from reference image, start creating the base of the top part, pick up the pen tool (P), click and drag to create curved surface and draw the outline like screenshot below.

Step 3

While using the pen tool, right click and choose Fill Path.

Step 4

Choose color in fill window and choose some basic grey color.

Step 5

Double click the layer in layer panel to open layer style, check gradient overlay, click on gradient to open gradient editor, on top right corner, click the gear like button to open preset types, choose Metals.

Step 6

Apply settings from the screenshot below and then modify the gradient a little bit, making the second white mark a little longer by extending it using a third white marker.

Step 7

Use move tool (V) while layer style is open to place the gradient as shown below.

Step 8

Create a new Layer, Pick up the brush tool (B) and set it to sharp 4 pixel with grey color, then choose pen tool and draw an outline at the right end of the drawing, right click and choose stroke this time instead of fill. Choose brush in stroke option and click ok.

Step 9

Double click on layer to open layer style, and set bevel and emboss from the screenshot.

Step 10

Same way, stroke a line with pen tool on left side, and apply gradient overlay instead of bevel. In gradient, choose same silver metal preset. Use move tool to position it to match with lighting.

Step 11

Keep things organize, create a new group in layer panel, select layers and drag and drop them on group icon to group them.

Step 12

Create the shape with pen tool in new layer, and feel it with color.

Step 13

Apply simple gradient overlay to match the lighting.

Step 14

Like we did previously, stroke outline with pen tool with brush of 4 pixels in grey color. Apply these settings.

Step 15

Set the Blending option to soft light for more shiny effect. Group these layers.

Step 16

With pen tool, draw and fill shape of the base in a new layer. Keep the layers of this base below the layers we have drawn before.

Step 17

Apply gradient overlay setting like before we did, change angle and scale to match like in screenshot, change position with move tool to match.

Step 18

Draw and fill base circle with pen tool or Elliptical marquee tool (M), click and hold on rectangular marquee tool to open it.

Step 19

Apply basic gradient overlay settings, use move tool to match the lighting.

Step 20

Create similar layer below the 1st layer, and apply these settings. Use move tool to match gradient with lighting as usual. We are using same silver preset in gradient.

Step 21

In a new layer, draw a line with pen tool on the edge of the circular base, stroke it with 2 pixel white brush, and apply this gradient overlay setting to match the lighting. Group these layers.

Step 22

Between the groups we have created, draw the remaining part of the box with the pen tool and fill it with dark grey color. Apply gradient overlay to match the lighting. Notice that reverse box is checked, and also the right side of the gradient is darker. Use move tool for the best look.

Step 23

Grab or create a letter, I have this letter graphics, hit CTRL+T to transform, or go to edit menu > Transform. Move corners to create the perspective look. Duplicate the layer by right clicking and choosing duplicate layer in layer panel.

Step 24

Place them in between the top and base layers, or erase the unwanted part to make it look like it is inside the box. Apply these settings to match the lighting and shadows.

Step 25

Draw the shape of base of the handle with pen tool and feel it with grey.

Step 26

With pen tool, stroke the shape of edges using brush of white color with 2 pixel. Duplicate the layer, select the original bottom layer and go to menu bar, choose Filter > Blur > Gaussian Blur.

Step 27

On the base handle layer, apply these settings to match lighting and perspective.

Step 28

Draw two shape for handle with pen tool and fill them with red color. Apply Bevel to them. Notice that we are keeping opacity of shadow low here.

Step 29

With elliptical marquee tool, feel a circle with grey to create bolt, and apply this setting.

Step 30

With similar method, create this joint. Draw shape, fill it with grey, apply bevel. Duplicate bolt layer and move it here.

Step 31

Mailbox is now ready, but we can refine the highlights and shadow for better look. Pickup dodge tool and scratch some area you think need more light.

Step 32

Click and hold on dodge tool to select burn tool, apply it where you need things darker.

Step 33

You can also create a new adjustment layer from layer menu, and choose curves. Click anywhere and drag to create point, adjust it like screenshot to get some contrast between highlight and shadows. Congrats, now you have the icon!

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.

Today we’re going to take a look at an essential piece of any serious web designer’s skill-set: wireframes.

You’ll learn why wireframes are so important, how to use them correctly, and the differences between wireframes and mockups/prototypes.

By the end of this article you should be persuaded to use wireframes in your next web design projects, and understand the benefits of doing so.

Let’s get started!

What are Wireframes?

Wireframes are black and white layouts that web designers use to outline the specific site features, size and page elements placement, navigation, and conversion areas of a web site.

In layman’s terms, we can say that a wireframe is more or less like a blueprint of the site which enables you to view the structured placement of components without any design treatments.

Today, the majority of web designers are using wireframes in their designs in differing ways. Wireframing plays an important role in the website design process, especially if the project is more complex. Web design freelancers usually find wireframes to be very useful, especially when communicating with their clients as they enable them to view their ideas more easily.

Not all wireframes have to be super neat! Just get your layouts down on paper. (Image source: schhen – Deviantart)

Importance of Wireframes in Web Design

Any web design process relies heavily on Wireframing.

Creating a more complex web site requires wireframes to help in clarifying the exact requirements of each page type of the site. Wireframes form an important part of a designer’s documentation to provide visual conceptualization to the client that can never be captured in a text-only document.

The following are some of the most important reasons why web designers need to use wireframes:

Wireframes show the web site architecture visually

A site map is more theoretical, especially a larger one, compared to wireframes.

Using wireframes instead of site maps is seen as the best way to start the real concrete visual process of a web design project.

With wireframes, the web designer is able to turn the abstract flow chart into something more tangible and real without distractions.

Wireframes enable the clarification of web site elements

Many clients find it hard to understand what designers mean when they say “light boxes”, ”product filtering”, ”Google map integration”, ”news feeds”, ”dynamic slide show”, among other features. Wireframes allows you to communicate clearly with your client, showing him/her where these site features will be on the specific pages, how they will function, and their usefulness to the site. This will enable the client to focus on other useful elements of the project.

Wireframes identify ease of updates

Wireframes are considered to be very useful to clients who may want to purchase a content-managed site. They normally enable the client to find out how well their sites will handle content growth. For instance, if right now you have only 20 products being offered but you want to offer over 100 in the next six months, you will require your website to have the ability to accommodate such growth without leading to some deformities in the site design and usability.

Wireframes save time on the project process

Wireframing plays a big role when it comes to saving time in the web design process. With wireframes, the designer’s designs are well-calculated and the team knows exactly what they are building. As a result, creating site content becomes much clearer and easier.

Additionally, the designer avoids hacks in the later stages of the process.

Experience shows wireframes work

Since designing and creating a web site is a complex process, Wireframing is one of the most important parts of the web design that should not be overlooked.

Wireframes are very cost-effective as they enable you to save a lot of time that might have been lost as a result of revising a high-fidelity comp; they are easily revised or discarded. Wireframes serve to give your page layouts a wonderful starting point, as well as a concrete foundation.

This search engine web site wireframe shows a more traditional approach to wireframing. (Image credit: Blazeeboy – Deviantart)

The differences between Wireframes, Prototypes, and Mockups

Although wireframes, prototypes, and mockups are totally different things, they are often used interchangeably. The reason why many people think that they are one thing is that there sometimes exists some overlap between them. They basically serve a slightly different purpose when it comes to the web site design process.

What are wireframes?

Wireframes refer to the fundamental illustrations of the components and the structure of a web page; this basically defines the first stage in the web design process.

What are mockups?

Mockups basically define the visual design components of the web site; they closely resemble the actually final web site design. They generally include all the page elements such as the graphics, and typography, among others. Simply put, mockups are image files.

What are prototypes?

Prototypes are generally semi-functional page layouts of the comp/mockup that provides a higher fidelity foretaste of the actual website being created. This phase follows the programming business logic of the web site. They are usually used to enable the clients to click around and get an idea of how the site will work in the end.

So what order are these used in?

In web design, the wireframes come first, followed by either the prototypes or mockup models; what actually follows after wireframes will wholly depend on the type of website the designer is working on.

This wireframe shows how all wireframes don’t need to look identical. As long as the elements on the page are clear then the wireframe is effective! (Image source: Llendowyn – Deviantart)

Creating Wireframes

Before creating a wireframe, you should find out what elements your client wants to include on the web page. Such information is usually obtained during the project interview. The most common elements that are normally included on a web page are the navigation, banner, blog feature, as well as a news section.

After determining the web page elements, sketch the potential layouts of the site. It is highly recommended to try a variety of placements for each element. Come up with the best and optimal decision on what will effectively present the information in a user-friendly way, as well as being aesthetically pleasing.

Scan the sketched layouts into the computer. Even though this step is optional and can be left out, it actually provides you with a great idea from which to start.

Choose and open the best graphic design program that interests you. A majority of web designers use Adobe Illustrator or Photoshop, although any other drawing programs are sufficient to place and label the shapes.

It is good to keep saving the file with explanatory names every few minutes to limit the chances of loss should something happen to the folder while you are working on the wireframe.

Draw boxes equivalent to the size as well as the shape of the boxes in your sketch; in the majority of programs, web designers use the rectangle tool for this step.

Let each box have its own solid fill color. It is recommended that you use monochromatic or neutral colors to ensure that the wireframe is simple with some lighter and darker values to help in illustrating the layout. Move each box to its proposed place in the layout. Before moving the box, remember to select the arrow tool; this will help you avoid drawing a different box over the already existing one.

Label each box the name of the layout’s section that it represents. Ensure that each label has the size in pixels. You may want to add a small description of the section’s function within the label.

Finally, save the wireframe in a format that will enable you to share it with the client. The most commonly used formats are the JPEG or PDF format.

Create Wireframes Easier Using These Web Tools

Web wireframe tools are meant to help the web site designer with the wireframe construction process. The most common web wireframe tools include the following:

Axure

Axure is one the most excellent web wireframe tools and is frequently used by industry professionals such as web designers. It works well on both Windows and Mac operating systems. This tool enables you to create the user interface for an online app. It also allows you to collaboratively create web site designs with other team members. It uses a drag-and-drop interface; this simply means that you only need to select the element you want to use and move it to the correct location. Other useful features of this program include the capability to generate the HTML prototypes from your site wireframe design. Additionally, this tool helps you to save the site documentation in a Microsoft Word document. Although this software program has a free trial download, you will be required to buy its full version for more functionality.

Visit Site

iPlotz

This tool has the ability to enable you to generate completely functional wireframes that will allow you to test how the web site will function when launched. iPlotz offers ways to create prototypes for the software application, as well as the web site. With this software program, you are allowed to create up to 5 frames for free though you must buy it in order to create more web wireframes; it costs $15 per month. Among other features of iPlotz is the ability to invite people to view and leave comments on a wireframe components library and your wireframes. With this tool, you can include commonly used elements without creating them yourself. In addition, it enables you to manage the website development team even after the project is done. This software program is basically meant for industry professionals such as the web designers.

Visit Site

MockupScreens

This software program is meant for industry professionals such as web designers as well as for beginners. It enables you to generate the mockups of the applications, as well as the web site. It uses a graphic user interface (GUI) which enables you to create web sites even if you have no knowledge about coding or programming. It allows you to use simple checkboxes and radio buttons to create the web site. It also enables you to create presentations that you can share with your clients and team members. MockupSceens have the ability to help you determine how well your apps will function in specific scenarios. You can purchase the full version of this program for about $99.95 and there is a one month free trial version.

Visit Site

To wrap up

Wireframing is a widely known process amongst web designers, though only a few of them use it. Although it seems to take a lot of time, it is very helpful in the long run. Wireframing is highly recommended by the most successful web designers and should never be overlooked in the design process to ensure its success.

What’s your opinion? Do you use wireframes for your web design projects? If not why not?

As web designers it can be easy to fall into a rut or a comfort zone in our daily Photoshop work. Today’s article highlights 20 features that are crucial to an effective design workflow in Photoshop. Are you using all of them in your work?

Sometimes, it’s better to stick to the basics. More often than not, web designers go for flash over substance. While it’s true that people are attracted to bright visuals more than bland text, it doesn’t give designers the license to go for overkill. Using the tools available to you can help understanding the fundamentals of web designing.

Adobe Photoshop is one of the best software for web design, but its potential has not been tapped completely by the designers. With this in mind, here are the 20 most overlooked features of Photoshop for web designers.

Start with Sketching

Before you start using Photoshop for a project, take some time to sketch out the design you plan to create. It gives you a solid idea of what you are looking for. Then, scan the sketches and translate them on to Photoshop. Designing becomes that much easier when you have a blueprint in front of you.

Helpful Resources:

Sketching Human Form

Basic Drawing on Photoshop

Video on Sketching

Use Grids

Using grids helps you align and place your sketches perfectly. Often, web designers don’t use grids, looking to use the fancy features to come up with a quick design. There are grids available on Photoshop in various sizes and dimensions. You can select one according to your requirements.

Helpful Resources:

Tips on Using the Grid in Photoshop

How to Setup a Layout Grid in Photoshop

Using Grids

How to Create a Grid Quickly with Photoshop

Snap, Snap

Snaps work very well with grids. They increase the scale of your design, providing easier viewing. You can see your work in a larger size, decreasing the strain on your eyes. As a web designer, sitting in front of the computer is your bread and butter but that doesn’t mean you should ruin your eyesight. By turning the Snapping feature on, you ensure your design is accurate.

Helpful Resources:

Snap on Photoshop

Snapping

Snapping Tips

Organize Your Files

Organizing your PSD files on Photoshop isn’t even a feature in the true sense of the word. It is the most basic of functions, yet most designers feel they are too cool for school. They don’t want to spend their ‘precious’ time organizing their files. God help any designer who has to take over the project from them!

Helpful Resources:

Keeping Photoshop Files Organized

How to Effectively Organize Your Photoshop Layers

How to Organize Your Photos in CS5

Take Shortcuts

If you feel you are wasting your time organizing your files, using the shortcuts available on Photoshop will enable you to save some. Like all computer programs and software, Adobe has provided a number of shortcuts for users on Photoshop. It is a simple matter of finding them out and using the ones you need.

Helpful Resources:

Photoshop CS5 Shortcuts

Photoshop Shortcut Commands

Keyboard Shortcuts

Create Versions

You don’t have to stick to just one design when you are working on Photoshop. You can create multiple versions of the layout you are designing by using the Layer Comps feature. Photoshop has a feature called Smart Objects which will help you keep all the layouts in one place. That way you don’t have to worry about organizing or losing anything.

Helpful Resources:

Create Versions in Photoshop Elements 10 Organizer

Mask Your Folders

‘Masks’ has to be one of the most inconvenient features of Photoshop for a web designer. Yet, you can make it work for you by creating folders in which you save all your files. For instance, you can organize the files and images related to one project and place them in a folder, putting a mask on it. This way, you avoid the hassle of placing a mask on each layer while also getting to know the purpose of each mask.

Helpful Resources:

Clipping Mask to a Layer Group

How to Mask Groups in Photoshop

Using Photoshop Layer Masks

Creating Mask over Multiple Layers

Speed Photoshop Up

This is a goldmine for any web designer. No longer would you have to wait for Photoshop to respond to your action or command. Waiting for an image or file to load is frustrating. You can take care of that once and for all by speeding up Photoshop. You only have to change a couple of settings:

• Change the save option for Image Previews to ‘Never Save’
• Set the Cache Levels to 1

That’s it! You just made Photoshop faster for you.

Helpful Resources:

2 Settings to Speed up Photoshop

Tips to Speed up Photoshop

9 Tips to Speed up Processing Time

Add ‘Subtle Patterns’

Subtle Patterns is available outside Photoshop but you have the option to download the files and import them to Photoshop. It is a collection of patterns and textures which you can add to the background of your designs, albeit ‘subtly’. There are virtually endless combinations you can create and use.

Helpful Resources:

70 Subtle Patterns for Minimal Design

Subtle Pixels

Learn to Use the ‘Pen’

Using the ‘pen’ on Photoshop is akin to learning to write. Web designers in general don’t feel the need to add anything to their existing designs. This is why they avoid making the effort to learn using the ‘pen’. However inconvenient the learning process might prove to be, the ‘pen’ can prove to be very useful in the long run.

Helpful Resources:

How to Use Pen tool

Pen tool Selections

Basics of Photoshop Drawing and Layouts

Pen Tool Comprehensive Guide

Check Color Accuracy

Oftentimes designers have to use the same color several times in a layout or template. To the naked eye, the intensity and shade of the color may appear consistent but you can be mistaken. That is why you should check the color accuracy to ensure the same color has been used.

Helpful Resources:

Accurate Web Colors

Accurate Color Correction Made Easy

Selections

Customize Photoshop’s Settings

Again, this might not be a Photoshop feature but is one thing web designers should be familiar with. You should customize the settings according to your needs. While it is convenient to go with the default settings but they are for elementary users. If you wish to use Photoshop professionally, change the settings.

Helpful Resources:

Photoshop Preferences

Photoshop Color Settings

How to Reset Photoshop Settings

Selection Workflow Basics

Expand Your History

A great reason for changing the default settings is the History States. The History States is set to 20, which means you can only view the previous 20 steps you have performed. For complex designs, you might need to go back 30 or even 50 steps, which is only possible if you change the settings on the History feature to expand it.

Helpful Resources:

Expand Your History

Undoing History

Photoshop History tips

Remove the Blur

If you don’t know how to do this, you need a basic Photoshop tutorial. One of the best features of Photoshop is that you can remove the blur from any image. This is particularly helpful if you have received an image from an external source and it isn’t of the quality you desire. You can simply sharpen it up a little using High Pass.

Helpful Resources:

Correcting Blur

Adjusting Image Sharpness

Removing Blur Video

How to Remove Blur

Select the Font You Want

There are a number of plug-ins and font solutions you can add to your Photoshop. That enables you to select from a wide range of fonts and use the one you feel suits your design the best. Focusing on the design doesn’t mean you should overlook the font to use.

Helpful Resources:

Photoshop Fonts

500 Photoshop Fonts

Troubleshoot Fonts CS5

Vector-ize

How many times have you gone back to change the design and found that the original shape is no longer there? It is a common headache faced by designers. You have to then make some changes to the design to get the shape you are looking for. The solution to that is using Vector Smart Objects. It will retain the shapes of every part of your design.

Helpful Resources:

Vector Smart Objects

Illustrator Smart Objects

Photoshop Smart Objects

Go ‘Pixel Perfect’

Photoshop is a complete all-round tool for web designers. Once you have completed your work, it wouldn’t hurt to spend some time checking for any errors or oversights. With all the features and tools, you can easily clear any blurry edges, shadows or consistency issues.

Helpful Resources:

Fade Pixels

How to Draw Hand Crafted Pixel Art in Photoshop

Troubleshoot Fonts

Be the Boss

Not exactly a feature per se, but you will find that Photoshop becomes easier to use once you have modified it sufficiently. Change the layout and settings of the interface to suit your needs. It will make you feel more at home using the software.

Color Up!

There is an active community by the name of ‘Kuler’ which provides you the answer to any questions you have regarding color themes and how to use colors in Photoshop. An extension is available through Photoshop to access it!

Helpful Resources:

Kuler

Customize Photoshop

With endless features and tools, you can customize Photoshop settings to suit your needs. Remove any features you don’t need and add plug-ins and extensions you have use for. Make Photoshop your one-stop solution and provide great designs to your clients.

Helpful Resources:

How to Customize Photoshop

Customizing Photoshop

A word of warning for web designers: be selective. With so many features, you might be tempted to use all but you have to restrict yourself to only the ones you actually need to use.