How to accurately color image?

I have attached an image that I'd like to color gray:

R 187
G 197
B 212
hex# bbc5d4

The problem is it if use the paint bucket, it creates jagged edges.  I've included the original white and my low quality gray.  Any suggestions how I can paint it so the edges aren't jagged?
up.png
upgray.png
brettrAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
MadkhaliConnect With a Mentor Commented:

  1. select the Pen Tool
  2. from option select the Shape layers
  3. click three times to draw the shape, the last one must close your shape
or
  1. select the Custom Shape Tool
  2. from Shape select any arrow
  3. draw
  4. selcet Direct Selection Tool
  5. click the edge of the object
  6. select the Pen Tool
  7. hold alt key
  8. click on any anchor point to delete it.
0
 
MadkhaliCommented:
it is better to create it again, the problem your pic is anti-aias, so when coloring it again it color the somothing pixels
use the pen tool to createagain, or use any one of custom shapes to draw the an arrow and delete the extra points.
0
 
brettrAuthor Commented:
I'm using the line tool.  I create three lines then fill with the paint bucket.  The problem I keep having is a little thread of white keeps whisking out of one point.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
MadkhaliCommented:
this why i told you to use the custom shape :)
it is a vector based drawing
you wil get clean shape :)
0
 
MadkhaliCommented:
you can apply to it anyting
stroke, gradient and so on
0
 
brettrAuthor Commented:
Ok.  I'm a newbie.  Can you provide steps on how to draw a triangle and then shade it?
0
 
brettrAuthor Commented:
I tried the first option you mentioned.  Had a some minor problems with the second line always ending outside of the image.  I'm guessing because of the small image size.  I used the transform to size it back into the image then closed the shape.   Overall, very easy.  Thanks.

One last thing: Do you know how I can get a grid to display on such a small image?  It will help with aligning.
0
 
MadkhaliCommented:
you can use the arrow tool

or

if you mean align in to the center of the scene:
  1. highlight the bacground then the layer or link them
  2. choose move tool
  3. from the option click align vertically and horizontally
0
 
brettrAuthor Commented:
Which is the arrow tool and how does that help?
0
 
cystoConnect With a Mentor Commented:
The arrow tool is a shape from the "Custom Shapes Tool".

Is this what are you looking for? (The attached image)
arrow2.png
0
 
brettrAuthor Commented:
Yes but I was able to follow Madkhali's instructions and get the shape I need.  How does the arrow tool put a grid on the image at such a small size?
0
 
BinylkumarConnect With a Mentor Commented:
Hi brettr,

The easiest and good method to draw perfect up arrow like this, also to avoid the jagged effect follow my steps.
In this example I have choosen grey color to draw the up arrow. you can change the color for your wish.

check the attached image to get the clear view of my steps.
 
1. Create a new document. For Example 75x75 with white background.
2. Create a new layer.
3. Zoom it to 100% and choose pencil tool with single pixel size.
4. Choose the foreground color as #999999
4. Draw a line by clicking with the pencil. That is, by single click you will get a single dot, right? now adjustent to that put one more dot and so on....upto 7 dots. This will give you a line.
5. Now draw another line in the same manner above that line. This line should have two pixel less than bottom layer, one at each end. So this line will be less than in length of bottom line.
6. In the same manner draw lines one by one above that by reducing two pixels at each end till you get one pixel at the top.
7. Now Choose the foreground color as #CCCCCC
8. Now put dots at each line begining and end from bottom to top.
9. Now reduce the zoom to actual pixels.
10. You can see the up arrow image without any jagged effect.
11. Depends upon the size you have to draw the line.

design-steps.gif
0
 
MadkhaliCommented:
sorry i was mistaken
press V key to switch to the Move tool
sorry to reply late :(
0
 
MadkhaliCommented:
look to this tutorial to learn this perfect tool

http://www.melissaclifton.com/tutorial-pentool.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.