Skip navigation
Michael Redbourn
Michael Redbourn
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

 


458 Views   9 Replies   Latest reply: Michael Redbourn, Feb 27, 2013 1:06 PM
 
Replies
  • Semaphoric
    Currently Being Moderated
    1. Semaphoric,
    Feb 26, 2013 3:06 PM   in reply to Michael Redbourn
    Report

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

     
    |
    Mark as:
  • Michael Redbourn
    Currently Being Moderated
    2. Michael Redbourn,
    Feb 26, 2013 11:06 PM   in reply to Semaphoric
    Report

    Thanks.

     

    But how do I crop it with a 10 radius in the on the top left hand corner?

     

    Michael

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

    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:
  • Michael Redbourn
    Currently Being Moderated
    4. Michael Redbourn,
    Feb 27, 2013 12:39 AM   in reply to Silkrooster
    Report

    I have the top image and the author has the bottom one.

     

    Sorry to be a pain with this; it's an area of PS that I've never used before.

     

    I believe I have to use the rounded rectangular tool in order to get the 10px corner.

     

    But when I do, 'crop' is grayed out when I select 'image'.

     

    Michael

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

    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:
  • Semaphoric
    Currently Being Moderated
    6. Semaphoric,
    Feb 27, 2013 5:49 AM   in reply to Michael Redbourn
    Report

    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
    3,419 posts
    Jan 9, 2006
    Currently Being Moderated
    7. JJMack,
    Feb 27, 2013 6:17 AM   in reply to Semaphoric
    Report

    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
    3,419 posts
    Jan 9, 2006
    Currently Being Moderated
    8. JJMack,
    Feb 27, 2013 7:54 AM   in reply to JJMack
    Report

    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:
  • Michael Redbourn
    Currently Being Moderated
    9. Michael Redbourn,
    Feb 27, 2013 1:06 PM   in reply to JJMack
    Report

    Wow! Thank you all for so much help!

     

    I am gradually limping towards completing the tutorial.

     

    http://www.pcinfo.us/

     

    The left hand box has the curves and I've made the curves for the nav buttons.

     

    I'm obviously doing the tutorial to improve my DW skills but am unexpectedly learning new PS skills at the same time.

     

    I'll almost certainly be back before I finish the site ;-)

     

    Once again, thank you all!

     

    The white corners on the left hand box are OK because the bg will be white.

     

    Michael

     
    |
    Mark as:
Actions

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