Salt and Pepper, Pen and Paper, Cookies and Milk, although they are all good on their own, these things work together to bring out the best in each other. Adobe Illustrator and Adobe Photoshop are no exception. Today I will show you how to use Illustrator to design a play button and how to enhance your vectors with the use of Photoshop. This technique is particularly useful for people who want to make icons and UI designs. Let's get started!
Step 1
Start by creating a new document in illustrator (I've made it 800 x 800 px). Select the "Rounded Rectangle Tool" (with the corner radius of 100px) and create a shape that looks like a rounded button. Then select the "Rectangle tool", create a rectangle and center it to the rounded rectangle. This will be for the play button.
Step 2
Work on the second rectangle (the "play" rectangle). Go to Effect > Distort & Transform > Pucker & Bloat to make the rectangle curved. Fill up the box in the window (I've used 6%) and press OK, after that go to Object > Expand Appearance.
Step 3
To create the "play" icon, select the "Star Tool", open the Star Tool dialogue and enter the following settings.
Now create the "next" and "previous" icons. First duplicate the play icon by Option + Click + Drag (anywhere you want), then do the same but this time drag it to the right (you can hold the Shift key to keep move the object in a straight line). Select the two triangles, click on the "Add to Shape Area" button then click "Expand", resize and reposition.
Create the "Previous" icon by going to Object > Transform > Reflect > Vertical and click "Copy". Move it into place and you've just made yourself some player buttons.
Step 4
Add the colors to the buttons. The "Play" button has a fill of # 506670 a stroke of # 2C515E. The "Next" and "Previous" buttons have a fill of # 85D4D6 and a stroke of # 27A0A0.
Step 5
To create the bottom shadow you have to duplicate the button then with the "Rounded Rectangle Tool" (using the same settings) create the same shape but a little bigger. Select this rectangle and the one you duplicated and click on "Subtract from shape area" and " Expand". Make it black and give it 20% opacity and set the blending mode to Overlay.
Use the bottom shadow to create the top shine. Select the bottom shadow, go to Transform > Reflect. After making the settings click "Copy". Move it into place, rearrange the anchor points so it becomes thinner and make it white (leave the opacity and blending modes as they are).
Use the same technique on the play button.
Step 6
After finishing the shape of the player export it as a .PSD to add some details in photoshop.
Step 7
Create a new file in Photoshop (I've used 800 x 800 px) and bring in the file you exported from Illustrator (mini player). Select the "big button" layer, bring up the "Layer Styles" window, by double clicking on the right side of the layer, and start adding the following styles like I did. (you can follow the pictures).
Hide all the layers except the "big button" layer, "bottom shadow" layer and the "top shine" layer. Select the "bottom shadow" layer, go to Filter > Blur > Gaussian Blur, give it a 4 px radius and then click OK. Do the same to the "top shine" layer.
Next, make a new layer, Command + Click on the "big button" layer thumb, to make a selection of that shape, then, with the "Polygonal Lasso Tool", cut out the upper half of the selection. Fill it up with a color (doesn't matter which color as we will give it 0 % fill) and add a Gradient Overlay layer style.
Step 8
Make the "Play Button" visible (including the bottom shadow and top shine). Select the "Play Button" layer and add the two layer styles (Gradient Overlay and Inner Glow). Select "bottom shadow" layer and go to Filter > Blur > Gaussian Blur, give it a 5 px radius and click OK. Repeat this action to the "top shine" layer.
Create a new layer, make a rectangular selection and with the "Gradient Tool" (G) make a gradient. Control + D to deselect. Set the blending mode to "Overlay" and 20 % on the opacity.
Create a new layer under the play button layer and make a selection for the button's shadow. Fill it up with black and go to Filter > Blur > Gaussian Blur and give it a 1.5 px radius. Set the blending mode to "Color Burn" and 40 % on the opacity.
Select the "Eraser Tool" (E), set the diameter to 125 px and the hardness to 25 % and swipe horizontally over the middle of the shadow layer.
Step 9
Select the "next and previous" icons layer and fill them with this color; # 0096A4. After that open up the "Layer Styles" window and start adding the same styles as I did.
Do the same with the "play icon" layer. But this time use this color as the background color: #FFDB94
Step 10
Use the "Line Tool" to create a great shine effect. Position the line under the "Play Button" layer and and create a horizontal line (1 px) at the bottom of the "big button" layer. Make the shape fill 0 % and add an "Gradient Overlay".
Create a new layer behind the "Play Button" layer. Control + Click on the "big button" layer thumb, to make a selection of that shape, then do a simple black gradient on the left. Set "Overlay" as blending mode and 60 % opacity. duplicate the layer, flip it horizontally and move it to the right.
Use the "Ellipse Tool" to create an oval on the left side of the "big button". Rearrange it so it looks like the picture below (should be placed on the upper-left side of the "big button"). Make the fill 0 % and add a "Gradient Overlay" style.
Duplicate the layer and place it on the bottom-right side of the "big button" adding the second "Gradient Overlay" style.
Step 11
Create a new layer above the "Play button" layer. Control + Click on the "Play Button" layer thumb, to make a selection of that shape, then go to Select > Modify > Contract and contract the selection by 3 px. After all this take the "Gradient Tool" and make a small diagonal gradient on the top-left corner. Set the layers blending mode to "Overlay" and the opacity to 40 %.
Make a new layer above the one you just made. Make a selection on the left side of the "Play button" (like in the picture). Fill it up with which color you want as we will set the fill at 0 %. Add the "Gradient Overlay" style and the shine effect is complete. Duplicate this layer, flip it horizontally and move it to the right side.
Select half of the "Play button" and on a new layer, using the "Gradient Tool" (G), make a gradient (using black as color). After that set the blending mode to "Color Burn" and the opacity to 10 %. Use the same technique to the "play icon" (the only thing that changes is the layers placement - above the "play icon" layer - and the opacity of the layer - 20 %).
Step 12
Creating the "Play Button" texture is very simple. After creating a new layer above the "Play Button" layer Control (Command on the Mac) + click on the "Play Button" layer thumb, fill it with black, go to Filter > Noise > Add Noise, make the specified settings and press "Ok".
With the selection still active go to Filter > Blur > Motion Blur and use the settings indicated. Deselect, and set the Blending mode to "Overlay" and the opacity to 45 %.
Add some small detail to the "play icon". On a new layer you will make, with the " Elliptical Marquee Tool" (M), random sized circles inside the "play icon". Make them black, deselect and go to Filter > Blur > Gaussian Blur, after adding your settings simply set the blending mode to "Color Burn" and the opacity to 15 % and you are done.
Create another layer and do exactly the same thing. The only thing to change is the color of the random circles (I've made the circles white).
Step 13
Start creating the background. Select the background layer and fill it with # 363D41 and add a "Gradient Overlay" style. Using the "Elliptical Marquee Tool"(M) create an oval on a new layer and fill it with white. After that go to Filter > Blur > Gaussian Blur, enter your settings and press ok. Change the blend mode to "Overlay" and give it a 65 % opacity.
Start creating the shadow for the mini player. Make a new layer, using the "Elliptical Marquee Tool"(M) create an oval under the player and fill it with black. Go to Filter > Blur > Gaussian Blur and make the necessary settings. Select the "Eraser Tool"(E) and make these settings: Diameter - 150px; Hardness - 0 %; Opacity - 10 %, then use it to erase a small part of the shadow sides. Set the blending mode to "Color Burn" and set the opacity to 60 %.
Make an entire buttons selection. Do that by Command + Click on the "big button" layer then press Command + Shift + Click on the "Play Button". With the active selection create a new layer and fill it with black. Move it up and go to Filter > Blur > Gaussian Blur and make the settings like in the picture. Use the "Free Transform" (Control + T) to distort the back shadow. Use the "Eraser Tool"(E) with the following settings: Diameter - 150px; Hardness - 0 %; Opacity - 10 %, to erase the shadow on the sides. Adjust the opacity to 50 %.
Conclusion
The Mini Player icon is now ready. Many of these techniques can be recreated to be 100% vector, this is just another way to do things that utilizes Photoshop's capabilities. Again, this is a particularly useful tutorial for people who want to make elements for use in web and UI designs as they're often already using Photoshop.
Hope you enjoyed this tutorial and that it was helpful.
Further Resources
- Webdesigntuts+ Tutorials and Articles on Website Elements
- Psdtuts+ Tutorials and Articles on Icon Design
- Vectortuts+ Tutorials and Articles on Icon Design
