9 Replies Latest reply on Feb 27, 2013 1:06 PM by redbourn

    crop image with a 10px radius corner

    redbourn Level 1

      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-ta bs.html

       

      and I want to make the navigation tabs.

       

      Many thanks for any help,

       

      Michael

       


        • 1. Re: crop image with a 10px radius corner
          Semaphoric Adobe Community Professional

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

          • 2. Re: crop image with a 10px radius corner
            redbourn Level 1

            Thanks.

             

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

             

            Michael

            • 3. Re: crop image with a 10px radius corner
              Silkrooster Adobe Community Professional & MVP

              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.

              • 4. Re: crop image with a 10px radius corner
                redbourn Level 1

                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

                • 5. Re: crop image with a 10px radius corner
                  JJMack Most Valuable Participant

                  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 ]

                  • 6. Re: crop image with a 10px radius corner
                    Semaphoric Adobe Community Professional

                    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.

                    • 7. Re: crop image with a 10px radius corner
                      JJMack Most Valuable Participant

                      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

                      • 8. Re: crop image with a 10px radius corner
                        JJMack Most Valuable Participant

                        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

                        • 9. Re: crop image with a 10px radius corner
                          redbourn Level 1

                          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