|
|
| Author |
Message |
imaginative
Joined: 01 May 2009
Posts: 6
|
 Posted: Fri May 01, 2009 9:42 pm Post subject: How to replicate this simple arrow surrounded by a circle? |
 |
|
Hi everyone.
I took a screenshot of an image I'm trying to replicate in Photoshop. Basically I'd like to learn how to draw this image: http://bit.ly/11UMo9
It's a simple right facing, filled arrow, encampassed in a circle. There's a perfect drop shadow/gradient effect going on to add a 3d effect. I'd like that on a transparent background if possible.
Can anyone give me the steps to replicate this image? Thanks all. I'd like to learn the fundamental steps so I can go forward and further innovate, if possible.
Thanks. |
|
|
|
|
 |
66stang66
Joined: 06 Mar 2009
Posts: 197
|
| Posted: Sat May 02, 2009 1:22 am Post subject: |
|
|
Set Foreground Color to #b7c0c7
Set Background Color to #909eab
Open a new document whatever size you want
Select the gradient tool -Make sure the linear gradient button up top is selected.
Click the gradient pulldown and select the first gradient box (Forground to Background)
Click OK.
Hold down the shift key and click as close to the top of your image as possible and drag to the bottom and release.
Make a new layer
Grab the eliptical marquee tool. In the top quadrant of your image hold down the shift key and click and drag out a circle selection.
Ctrl+Backspace will fill your selection (don't worry about the color just yet)
In the layers pallet, double click the layer with the circle
Layer Styles dialog opens. Select color overlay. Click the color box to open the color chooser. Use #d0d5db. click OK to close the color chooser.
click Bevel and Emboss. Adjust the size to your liking.
Click Drop Shadow. Adjust to your liking. And click OK to close that dialog window.
Create a new layer.
Select the Polygon Shape Tool. Up top, set it to 3 sides.
Click on your drawing (hold Shift down again) and drag out a triangle.
In the layers pallet, double click the triangles layer
Select Color Overlay. Set it to FFFFFF
Select drop shadow and adjust to your liking. Click OK
In the layers pallet, hold Shift key again and click the bottom layer to select all 3 layers.
Select the Move tool
Up top, find the little button (hover over them for names) called "Align Verticle Centers". Click it.
Same thing again. Only Horizontals this time.
Resize image to your liking.
Regards,
Dave |
|
|
|
|
|
66stang66
Joined: 06 Mar 2009
Posts: 197
|
| Posted: Sat May 02, 2009 1:28 am Post subject: |
|
|
OH! And you are better off if you start large. 500x500px. Maybe not that big. Up to you really.
Regards,
Dave |
|
|
|
|
|
imaginative
Joined: 01 May 2009
Posts: 6
|
| Posted: Sat May 02, 2009 9:16 am Post subject: |
|
|
Hi Dave,
Thank you so kindly for such an amazing tutorial. With zero photoshop skills, I was able to replicate the image just following your directions.
I have a question for you -- is there a photoshop book which teaches drawing web graphics such as these? I'm not particularly interested in touching up photos. I'm more interested in drawing simple graphics such as these.
Thanks again Dave, you're a god send! |
|
|
|
|
|
imaginative
Joined: 01 May 2009
Posts: 6
|
| Posted: Sat May 02, 2009 11:10 am Post subject: |
|
|
Dave,
I also have one more question. When I lower the image from say a starting point of 300x300 to 25x25 (using it as an icon), I get a lot of clipping going on with the image. The shadows get clipped off. It's a rather odd effect. here's what my image looks like after your tutorial when lowering the size -> http://bit.ly/zWbDE
Any idea why this is the case? |
|
|
|
|
|
66stang66
Joined: 06 Mar 2009
Posts: 197
|
| Posted: Sat May 02, 2009 8:38 pm Post subject: |
|
|
I'm no expert, but what I have done in the past ( Trust me this doesnt always work) is instead of 25 try 26x26. Sometimes, 1 pixel makes a world of difference.
Regardless, there always be some quality loss when going that small. It's a matter of tweaking this and that until you get results you can live with. That's been my experience with tiny graphics any how.
Regards,
Dave |
|
|
|
|
|
|
