Add bevel effect to UIView

Question

I want my button to look this.

I asked the designer and he said he has used bevel effect on it and I'm hearing the word bevel for the first time.

I searched Stack Overflow but couldn't find anything helpful.

Answer 1

I believe that the designer meant bevel and emboss effect. Here is a sample extension on UIImage for applying an emboss effect with a shader image.

extension UIImage {
    func applyBevelAndEmboss(shadingImage: UIImage) -> UIImage {
        // Create filters
        guard let heightMapFilter = CIFilter(name: "CIHeightFieldFromMask") else { return self }
        guard let shadedMaterialFilter = CIFilter(name: "CIShadedMaterial") else { return self }
        // Filters chain
        heightMapFilter.setValue(CIImage(image: self),
                                 forKey: kCIInputImageKey)
        guard let heightMapFilterOutput = heightMapFilter.outputImage else { return self }
        shadedMaterialFilter.setValue(heightMapFilterOutput,
                                      forKey: kCIInputImageKey)
        shadedMaterialFilter.setValue(CIImage(image: shadingImage),
                                      forKey: "inputShadingImage")
        // Catch output
        guard let filteredImage = shadedMaterialFilter.outputImage else { return self }
        return UIImage(ciImage: filteredImage)
    }
}

Do ask the designer for the shader image and to apply on the flat image.

My personal opinion is that, it is better to get the processed image from the designer and use it rather than performing all that processing in the app.