Photoshop Question posted in
The official user guide can be found here.

Set blendmodes on UIImageViews like Photoshop

I’ve been trying to apply blend modes to my UIImageViews to replicate a PSD mock up file (sorry can’t provide). The PSD file has 3 layers, a base color with 60% normal blend, an image layer with 55% multiply blend and a gradient layer with 35% overlay.

I’ve been trying several tutorials over the internet but still could not get the colors/image to be exactly the same.

One thing I noticed is that the color of my iPhone is different from my Mac’s screen.

I found the documentation for Quartz 2D which I think is the right way to go, but I could not get any sample/tutorial about Using Blend Modes with Images.
https://developer.apple.com/library/mac/documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_images/dq_images.html#//apple_ref/doc/uid/TP30001066-CH212-CJBIJEFG

Can anyone provide a good tutorial that does the same as the one in the documentation so I could atleast try to mix things up should nobody provide me a straight forward answer to my question.

Tags:

2

Answers


  1. 0

    Now built-in to iOS. Historic answer:

    You don’t want to use UIImageView for this since it doesn’t really support blend modes.

    Instead, the way to go would be to create a UIView subclass (which will act just like UIImageView). So make a UIView subclass called something like BlendedImageView. It should have an image property, and then in the drawRect: method you can do this:

    - (void)drawRect:(CGRect)rect
{
    //
    // Here you need to calculate a rect based on self.contentMode to replicate UIImageView-behaviour.
    // For example, for UIViewContentModeCenter, you want a rect that goes outside 'rect' and centers with it.
    //
    CGRect actualRect = // ...
    [self.image drawInRect:actualRect blendMode:kCGBlendModeOverlay alpha:0.5];
}

    Replace alpha and blend mode to fit your preference. Good practice would be to let your BlendedImageView save a blendMode property.

    It may be that in your case, you need to do a bit more advanced view that draws all 3 of your images, using the same code as above.

    Login or Signup to reply.
  2. 0

    This question was asked ages ago, but if someone is looking for the same anwser, you can user compositingFilter on the backing layer of your view to get what you want:

    overlayView.layer.compositingFilter = "multiplyBlendMode"

    Suggested by @SeanA, here: https://stackoverflow.com/a/46676507/1147286

    Filters
    Complete list of filters is here
    Or you can print out the compositing filter types with 

    print("Filters:n",CIFilter.filterNames(inCategory: kCICategoryCompositeOperation))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search