Check out our new Exotico UI Set. Free and premium versions available.
In this tutorial, I will show you how to draw a notes icon for an iPhone app using Photoshop. We will combine the power of Layer Styles and traditional drawing to achieve a realistic result.
Preview
Here’s a preview of icon we are going to make.
Tutorial Resources
In this tutorial, we will use resources below.
Step 1
Let’s start by making a new file with size 550 px × 550 px. Acivate Rounded Rectangle tool. In the option Bar, set its Radius to 90 px. Click and drag on the canvas to draw a rounded rectangle with size 512 px x 512 px. Make sure the color is #efcb79.
Step 2
Grab Wood and Knot Textures from VandelayPremier. Place the texture on top of the shape and reduce its Opacity to 60%.
Step 3
Alt-drag vector mask from icon base which we have made on Step 1.
Add Layer Style Inner Shadow, Inner Glow, and Gradient Overlay with following settings.
Below is the result after the Layer Styles are added.
Step 4
Paste another wood and knot texture. We are going to use this texture on the lower base. This time rotate the texture a bit, about 10°. We need rotate it so the texture match the wood grain direction.
Step 5
Reduce its Opacity to 50%.
Step 6
Alt-drag the vector mask from the main base layer. Copy and paste the path to duplicate it. Move it up a few pixels and set its path mode to Subtract. By now, we should have extruded the base and get a three dimentional shape.
Below, you can see the result in 100% view.
Step 7
Apply Layer Styles Inner Shadow, Inner Glow, and Gradient Overlay.
Here’s the result. We now have darken the lower base.
Step 8
Ctrl-click lower base and make new layer. Click Edit > Stroke. Select black for its color with Width: 1 px.
Step 9
Soften the stroke line by applying Gaussian Blur filter, Filter > Blur > Gaussian Blur.
Step 10
Activate the Eraser tool. Select a big brush with low Opacity and 0% Hardness. Erase some of the line.
Step 11
Repeat previous step, but this time use white to add highlight.
Erase some of the line using Eraser tool.
Step 12: Add Papers
Draw smaller rounded rectangle shape with radius 60 px. Set its color to #f0e9d9.
Apply Layer Style Inner Glow, Pattern Overlay, and Stroke with following setting.
For the pattern, use one of the pixel pattern from PSDfreemium.
Step 13
Ctrl-click paper shape to make new selection based on its shape. Make new layer under the paper. Fill selection with black.
Step 14
Soften the shadow by applying Gaussian Blur filter.
Step 15
Click Edit > Transform > Warp. Click and drag the boxes to distort shadow shape. We want the shadow to be as natural as possible.
Once you are happy with the shape, hit Enter to accept the transformation.
Step 16
Ctrl-click the paper, make layer, and fill selection with black. Soften it using Gaussian Blur, this time use a bigger Radius.
Reduce its Opacity.
Step 17
Activate the paper shape then hit Ctrl + J to duplicate it. Hit Ctrl + T to transform the new paper. Drag outside the bounding box to rotate the paper a bit.
Step 18
Ctrl-click paper and make new layer underneath it, right above the previous paper. hit Ctrl + Alt + G to convert the layer to Clipping Mask. Fill selection with black.
Step 19
Deselect (Ctrl + D). Soften the shadow by applying Gaussian Blur filter.
Step 20
Keep repeating the same process to add more pages. Duplicate topmost page. Rotate it a bit or modify its lower points. Add new layer underneath it and convert it to Clipping Mask. Paint page shadow. In animation below, you can see progress I did in adding more pages.
Step 21: Add Curled Pages
Duplicate the topmost page. Activate Pen tool. Click its lower right corner to ad new point. Move the new point up to modify the paper shape. We are going to make it not so perfect and make it more realistic. Don’t forget to add some shadow behind the page.
Step 22
Duplicate page and add below path on its corner. Set its Path mode to Intersect. We are going to use this shape as a page curl. Remove active Layer Style and apply only Inner Glow.
Step 23
Make a new layer and convert it to Clipping Mask (Ctrl + Alt + G). Activate Brush tool with low Opacity and 0% Hardness. Paint black for subtle shadow on the shape edge and white for highlight on center of the shape.
Step 24
Make a new layer under the page. Paint a bigger shadow to make it appear more realistic.
So far, this is our result.
Step 25
Let’s add more page curl. Duplicate last page and modify its corner. Let’s move the corner up even further to add bigger page curl.
Step 26
Maker new layer behind the page and as usual paint its shadow.
Step 27
Duplicate page and add another path on its corner. Set its mode to Intersect. Add Layer Style Inner Glow.
Step 28
Ctrl-click shape. Make a new layer above the shape. Click Edit > Stroke with color #c9c4b6.
Step 29
Erase some of the line. Use soft Eraser tool to erase some of the line.
Step 30
Add a new layer above the shape and convert it to Clipping Mask. Paint shadow and highlight on the shape to add lighting and make it appear more realistic.
Step 31
Make new layer under the page curl and paint subtle shadow on the page.
Step 32: Add More Shadow Between Pages
Let’s work on the details. Make a new layer, draw an ellipse selection, fill it with black.
Step 33
Soften the line by applying Gaussian Blur filter.
Step 34
Place the blurry lines between pages by changing its layer order on th Layers Panel.
Step 35
Repeat this to other pages.
Step 36
Below, you can see that the pages stack now appears more realistic. We can see depth between each page.
Step 37: Add Torn Page
Duplicate topmost page and cut it by adding a path with path mode Intersect.
Step 38
Make new layer and convert it to Clipping Mask. paint subtle shadow on the page.
Step 39
Add new layer behind the page and paint some shadows.
Step 40
Use Pen tool to manually draw page curl. Use the same color as the other page.
Add Layer Style Inner Glow, Pattern Overlay, and Stroke.
Step 41
Add a new layer and paint curl shadow on its page.
Step 42: Add Paper Clip
Let’s draw a black rectangle shape. Add Gradient Overlay.
Step 43
Add small rectangle and two triangles paths under the shape. Set its mode to Subtract.
Step 44
Activate the Pen tool and click both vertical sides to add two new points.
Step 45
Alt-click to convert both points to sharp points. Select the points using Direct Selection tool and move them 3 px to the left.
Below is the result in 100%.
Step 46
Make new layer and convert it to Clipping Mask (Ctrl + Alt + G). Paint upper shape with black to add shadow. Add another layer and paint some highlights.
Step 47
Draw a black polygon shape using Pen tool. See picture below for reference. Apply Layer Style Gradient Overlay.
Step 48
Repeat the previous step to draw another polygon shape on each side of the previous shape.
Step 49
Make new layer and paint shadow behind the shapes.
Below is the result in 100% magnification.
Step 50
Activate the Pen tool and draw the paper clip handle. Use #d6cfc7 for its color. Add Layer Style Inner Glow and Bevel and Emboss.
Step 51
Ctrl-click the shape to make new selection based on its shape. Click Select > modify > Contract 1 px.
Step 52
Make new layer and fill selection with black.
Step 53
Deselect (Ctrl + D). Apply Gaussian Blur. Erase unneeded shadow.
Step 54
Again, ctrl-click the shape. Make a new layer behind the shape. Click Edit > Fill, Use: black.
Step 55
Soften the shadow by applying Gaussian Blur.
Move the selection 5 px to the left.
Step 56
Erase upper shadow using soft Eraser tool. Reduce layer’s Opacity if needed.
Step 57
Paint another shadow behind the shape.
Step 58
We’ve only finished drawing front face of the paper clip. We still need to work on the back. Draw a black shape and place it behind the papers.
Step 59
We’re done drawing the paper clip. We can just leave it that way, but it’s too perfect. Let’s make it more realistic by rotating it a bit. Select the paper clip, hit Ctrl + T, and click-drag to rotate it.
Step 60: Scribble
Add some random scribbles on the paper. You can simply write and draw something using the Brush tool.
Add the application name. In this tutorial, I use simple text and apply some Layer Styles.
Step 62
Make sure to place the text behind the paper clip.
Step 63
To make it appears more realistic, let’s rotate the name too.
Step 64
For final touch, I also add a line and a circle shape.
Final Result
Here is the final icon. I hope you learn some new techniques from this tutorial. If you have any question feel free to ask it in the comments below.
Download the PSD file for the icon.
About the Author:
Mohammad Jeprie is an author, blogger, and graphic designer from Indonesia. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.
Follow Mohammad Jeprie: Website | Twitter
Vandelay Design Blog
Check out our new Exotico UI Set. Free and premium versions available.
New freelancers and students who are just coming out of school are often faced with the challenge of gaining exposure for their work. The exposure is often needed for securing new client projects, but it can also be needed to help with landing a job or just building name recognition within the industry.
With so many talented designers out there already it can seem like a daunting task to grab any exposure for yourself. In this article we’ll look at some practical ways that any designer can improve their exposure. Implement a few of these ideas and you will be well on your way to reaching your goals of landing new clients and building name recognition. Several of the suggestions involve social media and/or blogging, so if you don’t already participate in those activities now is the time to start.
1. Design Galleries
One of the best ways to gain exposure and to build a name for yourself is to let your work do the speaking. Your portfolio site is not only a place to show off your work from client projects, the design of your portfolio site itself can lead to loads of exposure. Web design galleries like CSS Mania, Best Web Gallery, and hundreds of others showcase top quality work of designers from all over the world. Being showcased on a few of the leading galleries can provide exposure to thousands of people.
Likewise, design blogs like our own often publish posts for inspiration that showcase brilliant design examples. Being showcased on a few popular blogs can bring an equal amount of exposure, if not more. Many times blogs find sites to showcase by browsing web design galleries, so having your portfolio site approved to the major design galleries can lead to even more exposure through blogs.
In addition, gallery/portfolio sites like Behance, deviantART, and Carbonmade allow you to set up a portfolio and display all kinds of work, not just web designs.
2. Guest Post at Major Design Blogs
In the web and graphic design niche there are countless blogs that accept guest post submissions. In some cases authors are paid, and other times the exposure and a link may be the incentive for the writer. Whether it is paid or not, having guest posts published on leading design blogs is one of the best ways to quickly gain exposure in the industry. This provides the opportunity to display your abilities and your expertise while teaching or discussing a particular topic.
With leading blogs that reach hundreds of thousands, and sometimes millions, of visitors per month, there is plenty of opportunity here. You may think that you would only reach other designers by writing for design blogs, but that is not always the case. One of the longest term clients that we’ve ever had found us through a post published at Smashing Magazine. Those guest posts that you have published will continue to provide exposure into the future as they show up in search results.
3. Release Freebies
By creating and distributing a high-quality freebie you can pick up a lot of links to your site (where it is available for download), leading to visitors and exposure. Freebies aren’t great for directly leading to a lot of client work, but they are effective for building name recognition and for strengthening the quality of your domain through increased links to your site.
The possibilities for freebies are huge. Some popular items include PSD files, WordPress themes, icon sets, vectors, Photoshop brushes, and textures. Readers love to be able to get free items that they can put to good use, and many website owners and bloggers are happy to link to free resources. They also tend to be shared via social media.
If you’re dedicating the time to create something useful for others, you may also need to help get the ball rolling for promotion. If you have a blog with a decent following or social media profiles (like Twitter, Facebook, or Google+) with a large following you may be able to simply publish it on your blog and share it via social media. With a large enough following it should take off from there. But if you are looking for more exposure, chances are you don’t already have a large following. So here are a few things you can do to gain some momentum for your freebie:
- Contact bloggers and send them a link to your free resource
- Contact influential social media users and send them a link to your freebie
- Build a network of friends who will help each other with social media promotion
- Write a guest post for a leading blog and link to your freebie in the author bio
- Write a guest post for a leading blog with a link to your freebie in the post content
- Have the freebie distributed from a popular blog in addition to, or instead of, being distributed from your site
4. Write for Magazines, Newspapers, or Other Publications
While blogs and online publications can be great sources of exposure, offline publications should not be ignored. There are several magazines for designers that accept article submissions. Having an article published in a respected magazine would not only provide exposure for yourself, but it would also help to build your credibility when mentioned in a bio or on your portfolio site.
If you are targeting local clients and looking for exposure to business owners in the area, writing for your newspaper is a great option. Many papers are open to publishing articles in the business section that would provide tips or suggestions for business websites. This can be a great way to get your name out there to potential clients and it helps to build credibility as you will be seen as an expert on the subject.
5. Provide Training (In Person or Webinars)
Teaching others is one of the best ways to brand yourself as an expert and to pick up new clients. In a way, this is what you are doing when publishing guest posts at other blogs and writing for printed publications. Another way of doing that is through live training, either in person or online through webinars. The possible topics are endless. You could either offer training that will help other designers to improve their craft, or you could provide training to people who would fall into your target market for clients.
Offering training for designers can obviously help to improve exposure with the industry and to build your name recognition, although it likely won’t produce as many clients as offering a training session to people who would fall into your target market.
The training could be offered in person at a seminar, conference, or chamber of commerce event. Webinars are relatively easy to setup with services like GoToWebinar and AnyMeeting. If you are using training as a way to gain clients you’ll want to offer valuable information for free during the training, but have some type of extended offer or personalized services that can be purchased for those who want to go beyond the free training. The quality of the free training is then your sales tool to convince attendees that your services will truly be worth the price.
6. Write a Book
Another outstanding way to position yourself as an expert on a subject is to publish a book. Being a published author tends to give you as much or more credibility than just about anything else you can do. While published books are great for this, e-books are also excellent for gaining exposure. Anyone can produce and distribute an e-book, so it might not give you the same type of credibility as having your book picked up by a publisher. But in terms of getting people to your website, an e-book can be extremely valuable.
Free e-books are often linked to on blogs, websites, and social media. Those that are truly valuable often get recommendations and priceless exposure for the author. And the costs associated with producing and distributing an e-book are very small, with the exception of the cost of your time to write it.
7. Dribbble and Forrst
In recent years designers have flocked to new social networking sites like Dribbble and Forrst. These sites are not only great for getting inspiration from the work of other designers, but they also provide opportunities to get exposure for your own work. You’ll need to get an invite to join either of these sites. You can submit a request for an invite, or if you are lucky you may be able to get one from someone you know or from a contest somewhere.
What’s Your Experience?
What methods have you used to gain exposure? If you have advice for our readers please feel free to share it in the comments.
Vandelay Design Blog
