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

Transparent background with color of foreground image – Photoshop

Can someone help me with having this sort of transparent background with color of foreground image. Should i use multiple filters of transparent images or how is this achieved i am able to get transparency with #AARRGGBB values but not a texture like that shown in the below images.

I am using same foreground image and same background image now i want to introduce a filter between those two so that only color of image is visible not the image itself. I want to know what value(ARGB) of transparent filter should i use in between those two images to achieve this or is there any other approach.

enter image description hereenter image description hereenter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out that there are few easy options to achieve this on android using libraries like Blurry or Picasso transformations both by developer called wasabeef. I used picasso transformations as it seamlessly integrates with picasso image library if you are already using it in your project. All i did was mention the type of transformation i want in this case a blured tansformation and give optional radius and sampling rate.

                Picasso
            .with(imageView.getContext())
            .load(imgUrl)
            .transform(new BlurTransformation(imageView.getContext(),10,8))
            .fit()
            .placeholder(placeHolder)
            .error(error)
            .into(imageView);

  2. 0

    Perhaps, you are looking for Palette.

    It is a helper class to extract prominent colors from an image. A
    number of colors with different profiles are extracted from the image:

    • Vibrant
    • Vibrant Dark
    • Vibrant Light
    • Muted
    • Muted Dark
    • Muted Light

    Here, how you use it.

     // Synchronous
 Palette p = Palette.from(bitmap).generate();

 // Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 });

    And to retrive the color,

    p.getVibrantColor(int defaultColor)  //return int of RGB

    However, Pallete returns only one Color, not a Gradient as you have shown in the question images. To me, it seems like they have blurred and added transparency to the foreground image and then posted it in the background.

    Login or Signup to reply.
  3. 0

    Here is one simple solution that may achieve what you are looking for just using CSS no plugins required

    .wrapper {
  position: relative;
  width: 300px;
  height: 400px;
  text-align:right;
}
.wrapper div {
  background-image: url("http://www.placecage.com/c/200/300");
  background-repeat: no-repeat;
  background-size: 100%;
}
.blur {
  -webkit-filter: blur(12px);
  -ms-filter: blur(12px);
  filter: blur(12px);
  width: 100%;
  height: 100%;
  z-index: -10; /* place below other items*/
}
.focus {
  z-index: 999;/* make sure to place at a high z-index so it shows up on top*/
  border: 1px solid white;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
}
    <div class="wrapper">
  <div class="blur"></div>
  <div class="focus"></div>
  <a href="https://www.placecage.com/">Place Cage </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search