Skip navigation
Currently Being Moderated

crop image with a 10px radius corner

Feb 26, 2013 5:21 PM

Tags: #corners #radius

I'm doing a very good Dreamweaver course but it's sometimes a little scant on the PS instructions.

 

The first  instruction is ..

 

"Make a 10 pixel selection as shown in figure 2 - it needs to be a perfect selection, exactly on the top left corner of the tab".

 

I did that .. my-selection.jpg

 

The next instruction is,

 

"Now select:

 

Image/Crop

 

(Need a 10 pixel radius corner.)"

 

His image then looks like this ..

 

his image.jpg

So how do I do it?

 

The course is at http://www.using-dreamweaver.com/building-a-website-using-dreamweaver/ create-navigation-tabs.html

 

and I want to make the navigation tabs.

 

Many thanks for any help,

 

Michael

 


 
Replies
  • Currently Being Moderated
    Feb 26, 2013 3:06 PM   in reply to Michael Redbourn

    Just as it says: from the top Photoshop menu bar, Image > Crop.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 26, 2013 11:36 PM   in reply to Michael Redbourn

    If you are using the above image. After the crop you will have a radius. The radius is on the image, not the crop it self.

     
    |
    Mark as:
  • JJMack
    5,968 posts
    Jan 9, 2006
    Currently Being Moderated
    Feb 27, 2013 5:53 AM   in reply to Michael Redbourn

    Images canvas is always rectangular therefor crop are rectangles.  Some image file formats like PSB, PSD, PNG and GIF support transparency therefore can have transparent corner areas so the visible image has rounded corners.  The image canvas still only has a width and height its rectangular.

     

    In fact an image rectangular image can appear to have any shape you may want.

    [ JJMack ]

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 5:49 AM   in reply to Michael Redbourn

    You're missing something from the instuctions:

     

    "Going back to the layered Photoshop file we created earlier, we need to slice up the corners . . .

    To create the green tab corners, first make sure the Photoshop file is flattened (don’t overwrite the original by mistake…). Next make a 10 pixel selection as shown in figure 2 - it needs to be a perfect selection, exactly on the top left corner of the tab."

     

    Create the rounded rectangle. flatten the file, then crop.

     
    |
    Mark as:
  • JJMack
    5,968 posts
    Jan 9, 2006
    Currently Being Moderated
    Feb 27, 2013 6:17 AM   in reply to Semaphoric

    Crops are always rectangles and if the document has a visible background layer the corners will have the background color.  To get rid of the corners you  make them transparent. The document can not have a visible background layer.  A document need not have a background layer at all.   Given the right conditions corners area can be made transparent by either deleting(clearing) the pixels there or masking the pixels off. Crop will not delete pixels in a rounded area crops are rectangular.

     

    Open new document with transparent background select rounded rectangular tool set to pixels draw out rounded corner rectangle.

    roundC.jpg

     
    |
    Mark as:
  • JJMack
    5,968 posts
    Jan 9, 2006
    Currently Being Moderated
    Feb 27, 2013 7:54 AM   in reply to JJMack

    I also do not do graphics for web pages however when image are diced up into selectable area for web pages. That seems to be done in Photoshop with the slice tool. Slices are saved as images and mouse over html code is use during selection.  I don't know for sure but seem to recall  reading information like that try Photoshop help about slicing.

     

     

    Also to power of Photoshop is in Layers download the psd look at layers at the save alpha selections TabedFolder.jpg

    http://www.mouseprints.net/old/dpr/TabedFolder.psd

     

    Message was edited by: JJMack

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points