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

Gaussian Blur Over Image – iOS 8 – Photoshop

I have a moving background image and I want to blur the bottom part of it out. I would do it with just photoshop but since the image moves, it wouldn’t work very well.

Here is what I mean (look at the bottom of the image) :

http://i.imgur.com/OT3vpeQ.png

So basically like the effect the dock has on the iPhone. I’m using iOS 8 but not Swift.

Tags:

2

Answers


  1. 0

    I have done a small example based on the photo you have there. My algorithm is as follows:

    • Extract a portion of image from bottom.
    • Apply gaussian filter to it and blur it.
    • Then, create a new image context, draw original image on it.
    • Then, draw the blurred portion of the image to place it exactly over the original image.
    • Extract the new image from the context.

    Here is a source code for doing so,

     @implementation ViewController


- (void)viewDidLoad{

  [super viewDidLoad];
  UIImageView *imageView = [[UIImageView alloc] init];
  imageView.frame = self.view.bounds;
  [self.view  addSubview:imageView];
  imageView.contentMode = UIViewContentModeScaleAspectFit;
  UIImage *image = [UIImage imageNamed:@"monogram.jpg"];
  imageView.image = [self imageWithBlurredImageWithImage: image andBlurInsetFromBottom: 200 withBlurRadius:3];
}

- (UIImage*)imageWithBlurredImageWithImage:(UIImage*)image andBlurInsetFromBottom:(CGFloat)bottom withBlurRadius:(CGFloat)blurRadius{
  UIGraphicsBeginImageContext(image.size);
  CGContextRef context =  UIGraphicsGetCurrentContext();
  CGContextScaleCTM(context, 1, -1);
  CGContextTranslateCTM(context, 0, -image.size.height);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, bottom), [self blurImage: image withBottomInset: bottom blurRadius: blurRadius].CGImage);
  image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return image;
}

- (UIImage*)blurImage:(UIImage*)image withBottomInset:(CGFloat)inset blurRadius:(CGFloat)radius{

  image =  [UIImage imageWithCGImage: CGImageCreateWithImageInRect(image.CGImage, CGRectMake(0, image.size.height - inset, image.size.width,inset))];

  CIImage *ciImage = [CIImage imageWithCGImage:image.CGImage];
  CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(radius) forKey:kCIInputRadiusKey];

  CIImage *outputCIImage = filter.outputImage;
  CIContext *context = [CIContext contextWithOptions:nil];

  return [UIImage imageWithCGImage: [context createCGImage:outputCIImage fromRect:ciImage.extent]];

}
@end

    And here is the screenshot of the result.

    enter image description here

    Login or Signup to reply.
  2. 0

    Apple has a UIView for this. It’s called UIVisualEffectView. In the below example, I just simply dragged in a UIVisualEffectView in interface builder.

    Here is my ViewController Code.

    import UIKit

class ViewController: UIViewController {

    @IBOutlet var blurView: UIVisualEffectView!

    override func viewDidLoad() {
        super.viewDidLoad()
        blurView.layer.cornerRadius = 30
        blurView.clipsToBounds = true
    }
}

    enter image description here

    Here is my Storyboard source code:

    <?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="InToOut" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" image="FujiImage" translatesAutoresizingMaskIntoConstraints="NO" id="GYq-6X-DmU">
                                <rect key="frame" x="0.0" y="30" width="414" height="832"/>
                            </imageView>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2U4-G5-MnJ">
                                <rect key="frame" x="87" y="384" width="280" height="168"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="a76-IV-MdK">
                                        <rect key="frame" x="0.0" y="0.0" width="280" height="168"/>
                                        <subviews>
                                            <visualEffectView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="GMM-QK-Qmi">
                                                <rect key="frame" x="20" y="20" width="240" height="128"/>
                                                <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="hNU-PM-AUc">
                                                    <rect key="frame" x="0.0" y="0.0" width="240" height="128"/>
                                                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                </view>
                                                <blurEffect style="regular"/>
                                                <userDefinedRuntimeAttributes>
                                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                                        <integer key="value" value="14"/>
                                                    </userDefinedRuntimeAttribute>
                                                </userDefinedRuntimeAttributes>
                                            </visualEffectView>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="280" id="6d8-um-POm"/>
                                            <constraint firstAttribute="height" constant="168" id="GL8-8m-cDd"/>
                                        </constraints>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="168" id="0ob-cA-8hH"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="centerY" secondItem="2U4-G5-MnJ" secondAttribute="centerY" id="2yc-38-IUg"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="top" secondItem="2U4-G5-MnJ" secondAttribute="top" id="42X-Qf-aYe"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="centerX" secondItem="2U4-G5-MnJ" secondAttribute="centerX" id="7Rw-Ll-smB"/>
                                    <constraint firstAttribute="bottom" secondItem="a76-IV-MdK" secondAttribute="bottom" id="Dxd-Z8-6kU"/>
                                    <constraint firstAttribute="trailing" secondItem="a76-IV-MdK" secondAttribute="trailing" id="OT3-3x-zEO"/>
                                    <constraint firstAttribute="width" constant="280" id="qHu-Je-7HQ"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="leading" secondItem="2U4-G5-MnJ" secondAttribute="leading" id="tu4-dC-sdn"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="GYq-6X-DmU" secondAttribute="bottom" id="71W-6Z-DKH"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="GYq-6X-DmU" secondAttribute="trailing" id="K6b-6G-j9N"/>
                            <constraint firstItem="GYq-6X-DmU" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="Nw1-qO-cc2"/>
                            <constraint firstItem="2U4-G5-MnJ" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="QJ8-2m-dH8"/>
                            <constraint firstItem="GYq-6X-DmU" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="oQd-Bi-jeL"/>
                            <constraint firstItem="2U4-G5-MnJ" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="snX-1a-TU4"/>
                        </constraints>
                    </view>
                    <connections>
                        <outlet property="blurView" destination="GMM-QK-Qmi" id="SUt-LU-NTu"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="234.78260869565219" y="-27.455357142857142"/>
        </scene>
    </scenes>
    <resources>
        <image name="FujiImage" width="248" height="214"/>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search