: Making parts of a shape transparent I'm building a website. For part of this website I want to have a picture that has rounded corners. If I insert the picture normally then it will remain
I'm building a website. For part of this website I want to have a picture that has rounded corners.
If I insert the picture normally then it will remain rectangular- the rounded corners being ugly white corners around the image that show up really obviously against the web page's background.
I could of course use some simple css and do border-radius: x;.
But this is graphic design, not web design. I'm wondering whether it is possible to do something within my graphics program to create truly transparent corners?
Following the cheat route of simply painting the corners the colour of my background is also not an option (assume I have a gaudy multi coloured background where the position of the image is open to change).
Unfortunately I only have illustrator and not photoshop which may limit my options here but I do wonder whether it is possible at all?
More posts by @Barnes313
2 Comments
Sorted by latest first Latest Oldest Best
Try exporting the ai file as .css through File > Export and select the save as type to be CSS and then you'll receive a .css file with all of the code that you can use for your website! :)
Draw a rounded rectangle over your image, with the corners set to the radius you want, in the position you want.
Select the image and the rectangle and go to Object → Clipping Mask → Make
Export as a 24-bit PNG.
It should be noted that PNG isn't best suited to photographs and you will probably end up with a much bigger file than a JPG.
What you should really be doing is using a JPG and CSS for the round corners (as you said).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.