Upon the explosion of Myspace in early 2000, a slew of myspace graphics sites spewed up. Several of them made hundreds of thousands of dollars in ad revenue, as their popularity via search engines drove an insanely high amount of traffic. One of the major issues with myspace layouts were users given the ability to highly customize the appearance of their personal myspace page. Some pages were so cluttered with unnecessary graphics, both JPG’s and also animated GIF’s, that it became nearly impossible to navigate.
It’s safe to say that myspace will have learned from this mistake, as facebook did. Facebook only allows a limited amount of customization via a cover photo and main profile image. While the “new myspace” isn’t operational yet, one can wonder exactly what type of opportunities will arise for webmasters who wish to capitalize on the myspace customization front. In the end, let’s hope it doesn’t become so insane that it negatively impacts usability.
1. Create a new document by going to File->New. Enter 850×600 for width and height.
2. Select a light blue foreground color for the foreground (#d0e5f1), create a new layer above the background layer. Select the gradient tool and while holding shift, drag from the top of the document to the bottom to create the gradient background as shown above.
3. Change the foreground color to a darker blue (#0589d5), select the ellipse tool. Hold ALT + SHIFT and left click to drag out a sphere like above. This will serve as the 3D shape layer.
4. With the ellipse layer selected, go to 3D -> New 3D Extrusion from Selected Path. Click on the new 3d object in the middle, and in the properties window, choose the Inflate shape preset (shown above).
5. With the object still selected, choose “Roll the 3D Object” for the 3D Mode: located on the upper right portion of the screen. Roll the shape upwards along the X-Axis.
6. Under the properties panel, choose the Deform icon at the top, and change Taper to 160%, and Extrusion Depth to 173. Then choose the Cap icon and change Angle to 23 degrees and Strength to 42%.
7. In the 3D tab to the left of Layers, select Environment and use the “Rotate the 3D object” and move mode to adjust the scene as shown above.
8. Click on the white circular “Infinite light source 1″ icon and adjust the light source by dragging the smaller sphere around to match the image above. Also click on “Environment” in the 3D panel and change the Shadows opacity to 20%.
9. Click on the Layers tab, and double click on the “Ellipse 1 Extrusion Material”. A new document will open. Go to “Image -> Canvas Size” and change the width to 1000px. Hit OK. Go to View -> Show -> Grid. Change the foreground color to red (#ff0000). Select the Rectangle tool and draw out a single long rectangle as show above.
10. Duplicate the layers. Then click back to the original document. Your 3d object should match the one shown above.
11. Click on the 3d object, then the 3d tab. Click on the Ellipse 1 Extrusion Material under the Ellipse group and under properties, change the Diffuse color to white.
12. Go to 3d -> Render. It may take a few minutes to render completely.
13. Right click on the 3d ellipse layer and rasterize it. This will remove the ability to edit the layer in 3d mode. Select the pen tool and change the mode from Shape to Path. Draw out 4 points starting just beneath the tent to create a door shape. Right click and select Make Selection and hit OK. Then hit the delete key.
14. Select the brush tool, change the radius to 193. Change the foreground color to a near black. Create a new layer underneath the tent. Left click and drag a bit to create a shadow inside of the door as shown above. Use the lasso tool to select and delete any of the shadow that extended outside of the tent, you can also use the eraser tool.
15. Download this free grass texture located here. Right click and copy image, then paste it just beneath the background gradient layer. Use a large feathered eraser to create an image similar to the one shown above. Select the tent shadow layer we created and change the mode to Hard Light.
16. Select the pen tool and change back to Shape mode. Use the eyedropper tool to select the red color just above a red stripe above the door opening. With the pen tool, draw out a shape similar to the one shown above to serve as the door.
17. Create a new layer and check the checkbox to make it a clipping mask. With the pen tool, draw out lines to serve as the continuation of the red stripes of the door. Make them appear natural and flow with the windy door. Use the eyedropper tool to closely match up the colors of stripes.
18. Change the foreground color to a near black and select the brush tool and change the radius to around 38. Create a new layer mask at the top and draw out a shadow to match image above. Change the layer’s blend mode to Multiply and the opacity to around 46%.
19. Select the tent layer, and create a new layer mask above. Select the brush tool with a radius of around 94. Change the foreground color to a near black. Draw along the bottom edge of the tent and change the layer to Multiply with an opacity of 50%.
20. Select the grass layer and create a new layer mask. With the brush tool, draw along the bottom edge of the tent. Change it to multiply and 52% opacity.
21. Create a new layer at the very top. Change the foreground color to white. Starting with a larger brush size, left click once several times to draw a few randomly placed sphere’s. Then drop down the brush size about 20%, and draw a few more. Do this so that your image roughly matches the one above.
And that’s it! As you can see, it’s fairly easy to create basic 3d shapes and make them look great within Photoshop.
I’ve gone ahead and played around with the background a little more to create a more full scene as seen here. You can do anything you want with yours. Share it here in the comments!
Below is both a video tutorial and a written tutorial that shows the design of the iOS app icon below.
iOS App Icon Video Tutorial:
iOS App Icon Written Tutorial:
Learn how to design the iOS Camera Icon shown above in Adobe Illustrator CS6 and then in Adobe Photoshop CS6 for some touch-ups. Let’s get started.
1. Create a new document (File / New). Make sure the settings match as shown above. 512px by 512px.
2. Make sure show grid and snap to grid are on in the View menu.
3. Select the Rounded Rectangle Tool from the menu (Select the Rectangle Tool, left click, and drag out to access the rounded tool).
4. Go to Edit -> Preferences -> General and change the Corner Radius to 80px. (Note: 80px on a 512x512px document size is the preferred corner radius for iOS icon designs.)
5. Start by clicking the at the very top left corner of the document space and dragging out the rounded rectangle, and end at the very bottom right corner.
6. Go to View -> Hide Grid. Then change Stroke to 0 in the top bar to remove the stroke applied to the rectangle.
7. Give the foreground color of the rectangle a radial gradiant.
8. Adjust the gradient colors as shown above.
9. Hit the “G” key to bring up the gradient tool and double click inside the upper left corner of the gradient circle. This will give it the spotlight effect as shown above.
10. Select the Ellipse Tool. While holding SHIFT and ALT, drag out a perfect circle in roughly the same size and location as shown above.
11. Re-adjust the gradient in the center as shown above. Give the ellipse a 6pt stroke. Click the orange “Stroke” button and change the “Align Stroke” to inside. Roughly match the gradient colors and options as shown in the screenshot.
12. Hit CTRL-C and CTRL-F to duplicate the ellipse. While holding SHIFT and ALT together, drag the new ellipse in.
13. Change the Stroke to 14pt and adjust the gradient slightly as shown in the screenshot.
14. CTRL-C and CTRL-F again to duplicate this ellipse. Drag it in a lot and then change the stroke to 4pt. Remove the background color and adjust the gradient colors to match the screenshot above.
15. Select the Pen Tool. Change the stroke to 0 in the top toolbar, and change the foreground color to radial (adjust the colors after the shape is drawn). Draw a shape roughly equal to the screenshot shown above. Change the gradient to match the screenshot. The inner color is white, and the outter color is a dark gray, the opacity is set to 0%. Also click the transparency tab and change the opacity of this glare to 70%.
16. Select the Ellipse tool and draw out a new ellipse in the center holding ALT and SHIFT. Drag it to the size of the lense. Change the opacity to 70%, and slightly adjust the gradient as shown above.
17. CTRL-C and CTRL-F to duplicate the ellipse. Resize it and position it to match the screenshot. Change the opacity (in the transparency tab) to 10% and adjust the gradient settings to match the screenshot above.
18. Select the first ellipse we created and duplicate it. Scale it down and position it to match the screenshot above. Adjust the foreground gradient colors to light and dark red. Also change the stroke to 4 pt.
19. Select the glare we created and duplicate it. Move it and scale it down above the new red lense. You can also adjust the gradient colors to both white, and select G to resize the gradient.
That’s it for the design in Illustrator. To present the icon better, you can go to File -> Document Setup, and click “Adjust Artboard”. You can then drag out the artboard to create for some padding between the icon as shown above.
Further Steps in Photoshop:
21. You can take this design a step further by bringing it into Photoshop. In Illustrator, go to File -> Export and save it as a PSD. In the PSD options box, make sure Write Layers is selected with a resolution of 72.
22. In Photoshop, open the PSD. Go to Image -> Image Size and change both 512′s to 800. Hit OK. Create a new layer and drag it to the bottom of the layer 1 group. Fill it with white.
24. With the first layer we created in Illustrator selected in Photoshop (named <Path>), create a new layer (CTRL-SHIFT-N) and make sure “Use previous layer to create clipping mask” is selected. Hit OK.
25. CTRL-V to paste the copied leather texture. Hit CTRL-T, then hold SHIFT+ALT and drag in to scale the size of the leather texture more consistent with the size of our icon.
26. Change the layer’s blend mode from “Normal” to “Difference”.
That’s it! You can obviously play around a lot more than I did and add more to this icon; but don’t add too much detail, you don’t want it to scale down badly and become hard to decipher.
If you want to save this image and present it with the multiple sizes, follow the steps below:
27. Select the “Layer 1″ layer group and hit CTRL-E to merge the group (First, make sure to move the background layer we created beneath the group).
28. This will give you two layers, the background layer and the actual icon layer. Let’s adjust the canvas size by going to Image -> Canvas Size and changing width to 1300px. (Note, if you’re working on a different resolution, use what works for you).
29. Use the bucket tool to fill in the side areas with white on the background layer.
30. Move the icon layer over to the left, and hit CTRL-A and then CTRL-C. Go to File -> New, Hit OK and then hit CTRL-V. Go to Image -> Image Size and change it to 50%. Then hit CTRL-A and CTRL-C to copy the new smaller sized layer.
31. Go back to our original document and CTRL-V to paste. Position the new icon as shown above.
32. Repeat the above steps two more times.
I’ve also added some shadows to give it some depth. Hope you enjoyed this tutorial!
Developing the icon further..
I decided to work a little more with the icon by adding color on the lens (a simple blue shape created with the pen tool in Photoshop, rasterizing the layer, giving it a gaussian blur and adjusting the blend mode). I also added a sparkle (a shape created with the pen tool with opacity), and some reflections with reduced opacity.
Adobe just announced Adobe Creative Suite 6 and Creative Cloud. What exactly is Creative Cloud?
“Adobe® Creative Cloud™ is the digital hub that lets you download and install every Adobe Creative Suite® 6 application; access online services for file sharing, collaboration, and publishing; and benefit from new apps and features as soon as they’re released — giving you the freedom to create anything you can imagine.”
Storage and Sharing. Members content can be automatically synchronized across of their PCs, mobile devices and the cloud. The files are accessible from anywhere, on any device and easily shared with colleagues or clients.
Publishing Web Sites and Apps. Members are able to host up to five websites for free and will be able to create and deploy digital brochures and catalogues to the iPad and iPhone.
I’m a little disappointed though they’re favoring iPad and iPhone and not also android!
This is my first icon set, which is honestly long over due. There are 13 social icons here for Youtube, Aim, Twitter, Dribbble, Facebook, Flickr, G+, LinkedIN, Reddit, Skype, Pinterest and Behance. Each icon is available as a PNG in the sizes: 256×256, 128×128, 64×64 and 32×32.
You can use these free social icons for personal or commercial projects, free of charge! A link would be appreciated but not required.
Adobe Photoshop CS6 is about to release shortly and sure enough, there will be plenty of tutorials available. There are already tutorials available as they recently released a Photoshop CS6 Beta. I’ve created a couple tutorials myself even, which I’ll list at the top because yes, I’m that bias! Below is the list, enjoy.
That’s it for now. I will update this page a few times a month to keep it fresh, right now there’s not many tutorials being the software isn’t released yet. If you made a photoshop cs6 tutorial you want me to add, let me know through the comments. Thanks.
I was recently drafted into the social design community Dribbble, and found it common practice to make your first shot (your first posted graphic) a thank you to the person who drafted you. I made mine which is shown in the previous post. I thought it would be cool to sift through previous “dribbble thank you” graphics and showcase the ones I thought were either well designed and/or unique. Below is a list of 25 that I handpicked.
I just got an invite into Dribbble, a very popular site in which designers can post progress and finished work alike. Others can review it, like it, make it popular etc.. It’s also a great site to both find design related jobs and recruit designers. It also serves as an excellent way to seek inspiration from some of the top designers. Just use their search to type a tag and you’ll get plenty of results.
With that said, it’s somewhat of a dribbble trend to make your first “dribbble” a thank you to the person who gave you the invite. I chose to do the same with a custom basketball icon. You can see the graphic I designed here:
I decided to remove the gift wrapping and release the basketball itself as a 100% free basketball icon for others to use however they wish. Click the graphic below to download a zip file which contains 3 24-bit PNG’s.