Follow this step by step guide to giving your photos a cool vintage Polaroid style effect in Photoshop. Well adjust the colours of the image with adjustment layers then use Photoshop brushes to distress the photograph for an aged appearance.
Archive for the Category »Do It Your Self «
Create a Daft Punk Inspired Text Effect
25
Dec 2010
Learn how to emulate the text effect used on Daft Punks famous album cover for Discovery. You will create a chrome text effect using layer styles, and incorporate other filters/lighting effects.
Category: Do It Your Self
7 Comments
This Free Texture Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.
The kind folks at TextureQuality.com have worked with us to release an exclusive texture pack for Tutorial9 viewers. In this texture pack are 12 super high resolution textures (4252x2835px) for use in your commercial and personal projects. Some textures released in this pack are exclusive to Tutorial9.
Download Texture Pack (67MB)
Category: Do It Your Self
7 Comments
This tutorial teaches you how to create a unique 3D download folder icon with textures. Learn some useful techniques for creating more visually impressive 3D icons.
Materials Needed:
- Grunge Texture
Step 1: Setting Up The Document
We’ll start with a canvas size of 512×512 pixel. Keep the background transparent. You can give it any title you want, I chose "Download" since it’s a download folder icon.
Fill (G) the first layer with #e6e6e6 and name it "Background" or "BG".
Icon Resolutions
Icons have standard resolution going in a pattern like so 512×512, 256×256, 128×128… Each time it will be divided or multiplied by 2. OSX can support up to 512×512 but Windows can only support up to 256×256.
Step 2: Laying The Foundation
Let’s start by drawing important sections of the icon to make sure it fills the space well. Create two groups called "Top" and "Bottom", placing "Top" above the other. Create a new layer inside "Top" and draw a rectangle in the bottom two thirds of the canvas using the Marquee Tool (M) and Fill it with #fae129. Name it "Face" for reference later. Center this layer by ctrl+A and clicking on the "Align horizontal center" button on the Tools Options Bar while the Move Tool (V) is active.
Create another layer inside the other group and draw a rectangle below the previous one and Fill it with this color #fbec93. Call this "Front". Create a new layer below and call it "Front Bottom". Draw a smaller rectangle below it with this color #5c5c5c.
Once you’re done, it’s a good practice to place guides at important areas. In this case it would be the edges of the drawing. Enable it by displaying Rulers ctrl+R.
Guides and Marquee Tool
Using guides can help you easily snap your drawings to the same place every time so it becomes more consistent and efficient. Marquee Tool is great for icons because it helps to create crisp edges.
Step 3: Starting From The Top
Go to the "Top" layer and enter Free Transform ctrl+T > Perspective then drag the top corners in. Apply the Layer Styles above.
Step 4: Drawing Stripes
Use the Line Tool (U) at 40px Weight to draw a diagonal line across the canvas. Then Duplicate ctrl+J it and move it evenly to the side so that it forms the following pattern. Try to space them evenly by using shift+arrow key, but it doesn’t matter that much. If you want to be precise, you can create a custom pattern (not covered in this tutorial).
Enter Free Transform and transform it, like below, by scaling and using Perspective. Delete the unwanted part by ctrl+clicking the thumbnail of "Face" and duplicate it ctrl+J, then deleting the previous layers. You can also use other techniques like simply Selecting Inverse ctrl+shift+I of the selection and deleting, or using layer mask. But the one I’m using also removes the part of the images which is not visible on canvas (outside the canvas area). Set the Blending mode to Multiply and Opacity to 80%.
Step 5: Adding Grunge
For this step you need the grunge pack I found on Tutorial9. The link is above. We need something a bit rusty and metallic so let’s go for "dirtygrungecement08". Import it to Photoshop and choose a small area, somewhere below the center is my favorite part. Make sure it’s big enough. Copy ctrl+C and paste ctrl+V it into the icon document.
We’ll prepare the texture by Desaturating ctrl+shift+U it then go to Levels ctrl+L and push the sliders inward, like above. This will be our stock texture for later use, so I placed it outside the group and called it "Texture Stock".
Use the selection (ctrl+click thumbnail) of "Face" and Duplicate the texture layer and bring it above that layer. Set Opacity to 10% and Blending mode to Multiply. You can hide the stock texture layer.
Step 6: Adding Details
Create a new layer and get the selection of "Face" then Fill it with white. Nudge it up by 4px the press delete. Nudge the image down by 2px. The reason why the edge needs to be so thick is because the icon is very big, so when scaled down the edge needs to be thick to be visible.
Use the Eraser Tool (E) at 0% Hardness and about 500px in diameter to erase both sides of the edge. Use the tip of the Eraser and keep the edge fully visible. You may need to zoom out and vary the Eraser size.
Edges
Adding edges, black or white, helps to add contrast between different areas and make the image more realistic.
Create a new layer and get the selection of "Face". Use a soft Brush of a varying diameter of 400px to brush around the sides with black and white. Press D to reset the foreground and background color to black and white, pressing X to swap the two colors. Bring down the Opacity to 20%.
Step 7: Styles For The Bottom
Go to "Front" layer in the "Bottom" group and apply the above Layer Styles. Then apply the following Layer Style to the "Front Bottom" layer.
Step 8: More Stripes
Create a new layer. Use the Marquee Tool (M) and draw the stripes with black. Zoom in to make sure the stripes are aligned. Use the selection of "Front " to remove excess stripes. Set Opacity to 60%.
Step 9: Shading and Textures
Create a new layer and Brush within the selection of "Front" at the sides with black. Make the right side darker than the left. Set Blending Mode to Overlay and Opacity to 40%.
Use the process I taught above to create a texture for "Front" with the stock texture. Set Opacity to 20% and Blending Mode to Overlay.
Create a new layer. Get the selection of "Front" and Fill it with black. Nudge the selection down by 2px and delete, then apply a 2px Gaussian Blur, Filter > Blur > Gaussian Blur. Nudge it down by 1px and set Opacity to 20%.
This is a technique used to make edges pop and look more contrasting even though the effect is subtle.
Step 10: Creating The Hole
Create a new group called "Inside". Create a new layer inside and select the Line Tool (U) with 2px Weight and black in color. Draw a Diagonal line from one corner to the other end. When drawing the inside, make the corners intersect with the line.
Create a new layer and draw a rectangle with #b7b7b7 in the center. After this I’ve place two guides above and below the rectangle for convenience. Draw one triangle on the left using the Polygonal Lasso Tool (L) and Fill it with #848484. Duplicate that layer and increase the Lightness by 80 ctrl+U. Flip it Horizontally by Free Transform > Flip Horizontal and place it on the right.
Name those layers according to their position i.e. "Left", "Center", "Right".
Copy the following Layer Styles to the three layers.
Apply the following Layer Style to "Center".
Step 11: Shading The Inside
Create a new layer and get the selection of all three previous layers. Do this by holding down Shift while getting a new selection. Use a black soft brush with 30px diameter and brush the two corners of the inside. Set Opacity to 10%.
Step 12: Adding Details
Create a new layer called "Left Corner". Get the selection of "Center" and Fill it with black. Nudge it 2px to the right and press delete. Apply a 2px Gaussian Blur and set Opacity to 30%. Create a new layer called "Right Corner" and do the same thing to get a white line on the right side. But this time use 1px Gaussian Blur and leave Opacity at 100%.
Get the selection of "Left, Center, Right" and Select Inverse ctrl+shift+I. Then use it to delete extra pixels on "Left Corner" and "Right Corner". From now on when I refer to the three layers, I’m referring to "Left, Center, Right".
Create a new layer and get the selection of the three layers then Fill it with white. Go Select > Modify > Contract and key in 3px and hit enter. Press delete and shift the selection down by 3px then delete again. Set Opacity to 50%.
Create a new layer and get the selection of the three layers then Fill it with black. Shift the selection up by 3px and delete. Nudge it down by 1px and set Opacity to 10%.
Create a new layer. Use the Polygonal Lasso Tool (L) to draw the shape above and Fill it with black. Use the Blur Tool and brush the area as shown above using 100% Strength. Remove the area outside the three layers using the process we used above then set Opacity to 16%.
Step 13: Giving More Impact
Create a new layer and use the Polygon Tool (U) to draw an upside-down triangle. Resize and position it in the center like show above. Use the selection of the triangle to delete a portion (about 20px above) of the triangle. Duplicate it and move it about 40px away. Merge ctrl+E the layers together and set Opacity to 40%. Use the three layers to remove the area that is outside it.
Create a new layer, get the selection of the three layers and brush the top center with a soft white Brush at 200px diameter. Set Opacity to 20%.
Use the three layers selection to Duplicate the Texture Stock and put it above the previous layers we were working on. Set Blending Mode to Luminosity and Opacity to 5%.
Step 14: Drawing The Board
Create a group called "Board" and a new layer inside called "Board". Draw a Round Rectangle (U) with 10px radius in #f5e14b at the center. Then apply the following Layer Styles to it.
Create a new layer and get the selection of "Board". Select > Contract by 15px then Fill it with black. Contract it again by 10px and delete. Set Opacity to 80%.
Step 15: Refining The Board
Create a new layer and get the selection of the Board. Fill it with white then shift the selection down and right by 2px each. Delete and set Opacity to 60%. Create another layer and get the selection of the Board. Fill it with black then shift the selection up and left by 1px. Set Opacity to 40%.
Create a new layer for the arrow. Use the same process we used earlier to draw the arrows. Center it and set Opacity to 80%. Try to make it big so it will be visible on smaller resolution.
Create a new layer and get the selection of "Board". Use a soft Brush with black and white to paint the edges like above. Set Opacity to 20% and Blending Mode to Pin Light.
Shadings
Even on flat surface, applying a subtle shade can give the subject more interest.
Create a new layer and use the Pen Tool (P) to draw the shape above. Fill it by right-click > Fill Path with white. Then remove the area outside the board and set Opacity to 20% and Blending Mode to Soft Light,
Step 16: Grunge For The Board
Duplicate two Grunge texture from the stock and place one above the other. Set Blending Mode to Hard Light and Opacity to 10% for the bottom layer. Apply Filter > Stylize > Emboss for the second layer with 90 degree, 1px Height and 100% Amount. Set Blending Mode to Overlay and Opacity to 40%.
Nicer Textures
Using Emboss on textures can reduce the flatness of the surface.
Step 17: Drawing Screws
Create a new layer and draw one Ellipse (U) on the left with #d7d7d7. Duplicate and mirror it on the right then Merge ctrl+E the two layers together. Apply the Layer Styles below.
Create a new layer and Zoom (Z) in on one screw. Use either the Marquee Tool or Line Tool to draw the cross of 2px with black. Set the Opacity to 40%. Then create another layer and draw a 1px edge on the bottom right with white. Set Opacity to 80%.
Step 18: Creating The Shadow
Create a new layer. Get the selection of "Face" and Fill it with black. Bring the layer just above the background layer. Convert it to Smart Object and resize it like seen above. Name it "Small Shadow". Create another layer and do the same thing, except without resizing. Nudge it 10px to the right. Call it "Big Shadow".
Smart Objects
Using Smart Objects you can easily experiment with different transformation and filters without destroying the original copy.
Apply a 3px Gaussian Blur to "Small Shadow" and set Opacity to 70%. Apply a 7px Gaussian Blur to "Big Shadow" and set Opacity to 30%. Now you’re done!
Category: Do It Your Self
7 Comments
Creative Bookmarks: Best of September 2010
02
Oct 2010
Summer had to end eventually. However, with the coming of Fall comes an all new month with great new tutorials, articles and freebies! This is Creative Bookmarks September!
Quick Nav:
- Photoshop Tutorials
- Illustrator Tutorials
- Web/Blogging Tutorials
- Freebies, Inspiration, & Resources
Photoshop Tutorials
Nature-Themed Girl Composition in Photoshop
This great tutorial teaches you how to have some fun with vectors, custom brushes, and stock images to create a colorful and eye-catching nature themed girl composition.
Create a Detailed Ornate Heraldic Design in Photoshop
In this tutorial, by Chris Spooner, you’ll learn how to use some manipulation techniques combined with some Photoshop tricks to create an impressive Heraldic style emblem.
How to Create a Fantasy Banana Ship in Photoshop
In this great tutorial, from PsdTuts+, you’ll learn how to use a combination of photo to create a fantasy flying ship from a banana.
Create a Fantasy Girlbird Illustration in Photoshop
This great tutorial shows you how to create a make believe bird girl illustration with some Photoshop painting and photo manipulation techniques.
Create a Motorola Droid Style Phone in Photoshop
This tutorial teaches you how to use various tricks and techniques to create a realistic Motorola Droid phone.
The creation of A Life Of Aquatic Sounds
This great tutorial, from WeGraphics, combines the use of blending modes, Photoshop filters, and other tricks and techniques to create this beautiful aquatic manipulation.
Photoshop For Beginners: Creating Buttons for Web
In this tutorial, youll learn how to use blending modes and layer masks to create beautiful buttons for the web.
See Also: Part Two
Design a Grunge Vintage Poster in Photoshop
Another great tutorial, from WeGraphics, in which you’ll learn how to use a grid, patterns, layers styles and textures to create a vintage looking poster.
Playing with Custom Brushes to Create Magical Scenes
This tutorial teaches you how to create a custom brush and will walk you through the options of the brush to create a nice composition.
Harnessing the Power of Geometry for a Creative Nike Shoe Design
In this great tutorial, you’ll learn how to make geometric shaped brushes and apply them to create a Nike advertisement.
Make a Stylish Futuristic Textured Wallpaper in Photoshop
In this tutorial, from Design Instruct, you’ll learn how to use blending modes and textures to create a wallpaper that has outerspace-futuristic look to it.
A Perfect Lie in Photoshop #2
Too many photo retouching tutorials use techniques that make the skin look fake. This tutorial, from Abduzeedo, does the opposite, presenting a tutorial that achieves a beautiful and real effect.
Illustrator Tutorials
Create an Elegant Patterned Vector Owl in Illustrator
This brilliant tutorial, by Chris Spooner, will teach you how to create an owl illustration using basic shapes and the clever use of patterns and shading.
How To Create a Gothic Blackletter Typographic Design
This hybrid tutorial utilizes Illustrator to create and modify type, then uses Photoshop to create a grungy metalic piece of blackletter type.
Creating Seamless Textures
This great tutorial shows you how to creat clean, crisp textures and patterns using the newly improved appearance panel in Illustrator CS5.
How to Create an Adobe Illustrator Brush
In contrast to Photoshop, there aren’t many blogs that publish quality tutorials on how to create Illustrator brushes. This tutorial fills exactly that need.
Create Amazing Patterns using Adobe Illustrator
In this tutorial, you’ll learn how to use the Pattern Brush in Illustrator. But wait there is more! You’ll also create your own pattern brushes and learn the right way of using them.
Create a Graffiti-Inspired Illustration Using Photoshop and Illustrator
This great intermediate-level tutorial, combines the power of Photoshop and Ilustrator to create a graffiti inspired drawing and then, bring it to life with color.
Design An Angry Vector Turtle Character In Illustrator
This excellent tutorial, from Spyre Studios, walks you through creating a vector turtle based on a photo; a technique that can be useful in the future.
Web Tutorials
Basic Beginners Guide to Installing a jQuery Lightbox
This is a great tutorial, from Line25, that gives you a crash course on how to setup a lightbox gallery on your website; perfect for the Javascript coding noob.
A Crash-Course in CSS Media Queries
This great screencast, on Nettuts+, show’s how easy it is to create browser width dependant layouts with CSS media queries.
An Analysis of Typography on the Web
Most designers will agree that typography is the most important part of a design. Unfortunately, it’s usually neglected online. This article/tutorial contains some very useful information on the topic.
Converting a clean magazine-style PSD template to HTML/CSS
This great tutorial, from WeGraphics, isn’t very step-by-step, however, it sheds light on the process and gives great tips and advice.
The WordPress Loop
I always love the screencast’s of Chris Coyier. In his latest he does a great job in explaining the WordPress loop and the different ways to use it.
On Designing Tumblr Themes: 7 Ways to Design a Useful & Customizable Tumblr Theme
This is an excellent article, by the great folks from A Good Company, that gives some great advice on what to think about when designing a Tumblr theme.
Professional Structure and Documentation in Web Design
As creative people, we usually don’t think about structure or organization. However, structure is needed in our projects. This article, from Specky Boy, explains why.
Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites
The beauty of CSS and Jquery, is the ability to make a boring static web page into a rich user experience. This article, on Smashing Magazine, shows you how to do it.
The Look That Says Book
This great article was pointed out to my by Doug Neiner. Hyphenation is always seen in print design and I’m one to believe it should be on the web too. This article, on A List Apart, talks more about the topic.
Freebies, Inspiration & Resources
Piron
This beautiful typeface called Piron is great for both text and display use and at the moment, the regular and italic weights are free.
Social Media Sleek Icons: Icon Pack
This is a beautiful set of 25 icons that come in two different sizes that are free for your personal and commercial projects. As always, be sure to check the requirements for use.
Massive iPad Vector GUI Elements
This amazing freebie comes with every possible iPad element that you can think of. It includes not only the iPad, it also comes with buttons, alert boxes, tabs, the keyboard and more.
Weekly Vector Inspiration #88
Vectips publishes a collection of vector inpiration every week. Of the ones published, it was tough to only pick one of these. I strongly recommend you view the other showcases as well.
Creative Examples of Infographics
This is a great showcase, on Noupe, that is all about infographics. It’s the prettiest data you’ll ever see. I guarantee it.
50 Fresh and Inspiring Dark Web Designs
People liked the first collection of dark websites so much, that ,Web Design Ledger, decided it’d be a good idea to publish another. I disagree, it was a great idea.
40 Inspiring Portfolio Designs
This collection proves that a designers creativity and artistry aren’t confined to the “Portfolio” page. The whole site design can act as a showcase of one’s work.
Weekly Web Design and Development Inspiration N.58
This great showcase, from Specky Boy has some beautifully designed websites. Also, I’m honored to say that my site forms part of the list.
Finding Success as a Self-Employed Designer
Being self-employed is tough. This great article, on Logo Design Love, gives some practical advice on how to be a successful self-employed designer.
Get Featured in Creative Bookmarks
If you’d like to be featured in the next volume of Creative Bookmarks, simply send us your tutorial, resource, or article link before the end of the month. If we think it’s a top notch link, we’ll be sure to share it with all of our readers!
Email & Other Subscription Options
Category: Do It Your Self
3 Comments