Glass effect - semi transparent image

Has anyone seen any tutorials or know how to make an image, say a rectangular image, into a coloured glass effect, semi transparent image.
I tend to use images as navigation links in sites and am looking at ways to jazz up the look.
I have had some helpful suggestions on making glass buttons but I'm not getting the hang of doing this with images.
Thank you.

Similar Messages

How to make a semi-transparent layer?

Hello everyone,
I am making my own website with Dreamwaver. I am a totally
new user and have no IT background. So could anyone here kindly
help me with my question:
In the main page I would like to use two layers with images
inserted. The second one will be a semi-transparent image which is
made in Fireworks. I would like to let this layer cover the first
one. Because it's semi-transparent, so i should still be able to
see the underlying image... I did all this, but finally in the IE
the second layer is NOT transparent at all.
I don't know where the problem is. Please, if anyone knows
the solutions or have any suggestion, let me know!
Thanks!
Inca

I'll show it to you my way:
1. Type the text and click the layer mask icon. The layer mask should be all white and have a small border. That indicates the mask ist active.
The foreground color should be black and the background color white.
2. Choose the gradient tool. Open the gradient window. Choose the first gradient, "foreground to background" = black to white.
Change the white color to gray.
3. Check the layer mask > is it active?
Apply the gradient from right to left over your text.
See the thin line in the screenshot.
4. On your layer mask appears the gradient, left starting with gray and right ending with black.
The advantage of this method is that you can change your text without modifying the gradient.
The black color on the layer mask hides the text, the gray color makes the text more or less visible and white color means full visible.
Hope it helps.
miss marple

An Image JPanel, A semi-transparent JPanel, and non-opaque components

This is a more intelligent re-asking of the question I posed here: http://forum.java.sun.com/thread.jspa?threadID=579298&tstart=50.
I have a class called ImagePane, which is basically a JPanel with an image background. The code is much like the ImagePanel posted by camickr, discussed in this topic: http://forum.java.sun.com/thread.jspa?forumID=57&threadID=316074 (except mine only draws the image, it does not tile or scale it).
On top of my ImagePane, I can place another component, TransparentContainer. This again extends JPanel, only a color is specified in the constructor, and it is drawn at about 70% opacity. This component is meant to help increase the readability of text components that blend with the background image, without blocking out the background image completely.
This works very well, until I need to add a component, like, say, a non-opaque JRadioButton in a ButtonGroup. When you select a new JRadioButton at runtime, the semi-transparent JPanel fills with a combination of a completely opaque color (the one specifies to the TransparentContainer) and garbage from the non-opaque component being redrawn.
I have noticed that the UI is restored to being non-messed up if you place another application window on top of it and then move it. So apparently, one solution is to redraw the entire UI, or just the part that has the JRadioButton on it, every time the radio button is clicked. However, this seems unnecessarily complicated. It seems to me that I am missing something in my TransparentContainer's paintComponent() method. Does anyone have any ideas?
Here is my TransparentContainer code, if it will help:
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import javax.swing.JPanel;
public final class TransparentContainer extends JPanel
     /* Private Fields: For use only by this class.
      * These fields hold information needed by more
      * than one method of this class.
     private boolean fullTransparencyEnabled;
     private Color baseColor;
     private Color outerBorderColor;
     private Color innerBorderColor;
     private int obw;
     private int ibw;
     private int cbw;
     /* -- START OF METHODS -- */
     /* public TransparentContainer(Color color, boolean fullTrans)
      *   Initiallizes the transparent container object
      *   with 'color' as its base color.
     public TransparentContainer(Color color, boolean fullTrans)
          fullTransparencyEnabled = fullTrans;
          baseColor = color;
          Color borders[] = findBorderColors();
          outerBorderColor = borders[0];
          innerBorderColor = borders[1];
          obw = 3;
          ibw = 1;
          cbw = obw + ibw;
     /* private Color[] findBorderColors(Color base)
      *   Calculates the colors for the outer and inner
      *   borders of the object based on the base color.
     private Color[] findBorderColors()
          Color borders[] = new Color[2];
          int colorData[] = new int[9];
          colorData[0] = getBaseColor().getRed();
          colorData[1] = getBaseColor().getGreen();
          colorData[2] = getBaseColor().getBlue();
          colorData[3] = colorData[0] - 50;          // outerBorder red
          colorData[4] = colorData[1] - 45;          // outerBorder green
          colorData[5] = colorData[2] - 35;          // outerBorder blue
          colorData[6] = colorData[0] + 30;          // innerBorder red
          colorData[7] = colorData[1] + 30;          // innerBorder green
          colorData[8] = colorData[2] + 20;          // innerBorder blue
          /* Make sure the new color data is not out of bounds: */
          for (int i = 3; i < colorData.length; i++)
               if (colorData[i] > 255)
                    colorData[i] = 255;
               else if (colorData[i] < 0)
                    colorData[i] = 0;
          borders[0] = new Color(colorData[3], colorData[4], colorData[5]);
          borders[1] = new Color(colorData[6], colorData[7], colorData[8]);
          return borders;
     /* public Color getBaseColor()
      *   Returns the baseColor of this object.
     public Color getBaseColor()
          return baseColor;
     /* public Color getOuterColor()
      *   Returns the outerBorderColor of this object.
     public Color getOuterColor()
          return outerBorderColor;
     /* public Color getInnerColor()
      *   Returns the innerBorderColor of this object.
     public Color getInnerColor()
          return innerBorderColor;
     /* public boolean getFullTransEnabled()
      *   Returns whether or not this object will render
      *   with all of its transparency effects.
     public boolean getFullTransEnabled()
          return fullTransparencyEnabled;
     /* protected void paintComponent(Graphics g)
      *   Paints the component with the borders and colors
      *   that were set up in above methods.
     protected void paintComponent(Graphics g)
          Graphics2D g2d = (Graphics2D) g;
          AlphaComposite alphaComp;
          g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
          g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
          g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION,
                                        RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
          g2d.setColor(getBaseColor());
          /* Draw the main body of the component */
          if (getFullTransEnabled())
               alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
               g2d.setComposite(alphaComp);
          else
               alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
               g2d.setComposite(alphaComp);
          g2d.fillRect(cbw, cbw, super.getWidth() - 2 * cbw, super.getHeight() - 2 * cbw);
          alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
          g2d.setComposite(alphaComp);
          /* Draw the inner border: */
          g2d.setColor(getInnerColor());
          g2d.fillRect(obw, obw, ibw, super.getHeight() - obw * 2); // left border
          g2d.fillRect(obw, obw, super.getWidth() - obw, ibw); // top border
          g2d.fillRect(super.getWidth() - cbw, obw, ibw, super.getHeight() - obw * 2); // right border
          g2d.fillRect(obw, super.getHeight() - cbw, super.getWidth() - obw * 2, ibw); // bottom border
          /* Draw the outer border: */
          g2d.setColor(getOuterColor());
          g2d.fillRect(0, 0, obw, super.getHeight()); // left border
          g2d.fillRect(0, 0, super.getWidth() + obw, obw); // top border
          g2d.fillRect(super.getWidth() - obw, 0, obw, super.getHeight()); // right border
          g2d.fillRect(0, super.getHeight() - obw, super.getWidth(), obw); // bottom border
          alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
          g2d.setComposite(alphaComp);
          g2d.dispose();
}

I added the main method to your TransparentContainer class ...
     public static void main(String[] args) {
          JFrame f = new JFrame("test transparent container");
          f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          TransparentContainer tc = new TransparentContainer(Color.RED, true);
          JLabel label = new JLabel("Hello, World!");
          tc.add(label);
          f.getContentPane().add(tc);
          f.setSize(800, 600);
          f.setVisible(true);
     }...using the code you posted the label was not shown. I modified your paintComponent(Graphics g) method and I did this (see the areas in bold):
     /* protected void paintComponent(Graphics g)
      *   Paints the component with the borders and colors
      *   that were set up in above methods.
     protected void paintComponent(Graphics g)
          // Call super so components added to this panel are visible
          super.paintComponent(g);
          Graphics2D g2d = (Graphics2D) g;
          AlphaComposite alphaComp;
          g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
          g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
          g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION,
                                        RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
          g2d.setColor(getBaseColor());
          /* Draw the main body of the component */
          if (getFullTransEnabled())
               alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
               g2d.setComposite(alphaComp);
          else
               alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
               g2d.setComposite(alphaComp);
          g2d.fillRect(cbw, cbw, super.getWidth() - 2 * cbw, super.getHeight() - 2 * cbw);
          alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.6f);
          g2d.setComposite(alphaComp);
          /* Draw the inner border: */
          g2d.setColor(getInnerColor());
          g2d.fillRect(obw, obw, ibw, super.getHeight() - obw * 2); // left border
          g2d.fillRect(obw, obw, super.getWidth() - obw, ibw); // top border
          g2d.fillRect(super.getWidth() - cbw, obw, ibw, super.getHeight() - obw * 2); // right border
          g2d.fillRect(obw, super.getHeight() - cbw, super.getWidth() - obw * 2, ibw); // bottom border
          /* Draw the outer border: */
          g2d.setColor(getOuterColor());
          g2d.fillRect(0, 0, obw, super.getHeight()); // left border
          g2d.fillRect(0, 0, super.getWidth() + obw, obw); // top border
          g2d.fillRect(super.getWidth() - obw, 0, obw, super.getHeight()); // right border
          g2d.fillRect(0, super.getHeight() - obw, super.getWidth(), obw); // bottom border
          alphaComp = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f);
          g2d.setComposite(alphaComp);
          // Do not dispose the graphics
          // g2d.dispose();
     }...seems to work fine now. Perhaps you should also add methods or additional constructors so the user can easily change the transparency level...and add some javadoc comments to your constructors ...at a first glance I did not know what fullTrans was
public TransparentContainer(Color color, boolean fullTrans)good luck!!

Semi transparent models, using a greyscale image

Hi,
Ive done a few searches on the forum for this. But couldnt
find a specific answer. With regards to textures with alpha
channels, and im not sure if im aiming in the right direction.
I want to have a semi transparent model, of a hair model
actually. I have a grayscale image, which is the alpha channel
information, and i have a number of textures of various hair
colours that work with this greyscale alpha jpg.
I'd like to assign the alpha channel jpg to textureList[1],
to ahieve transparency according to the greyscale image. then apply
the specific hair colour jpg to textureList[2].
Ive played around with blend, blendSource and blendConstant,
and I can get a bit of an effect(streaks in the girls hair), but
not the alpha channel effecting the visibility of the model effect
i'm after.
Is it possible to affect the visibility of a models polys,
through a greyscale texture/jpg being used for alpha channel
information? Is there another way, that ive missed?
Thanks in advance,
Glenno

You could even animate the alpha of the image using imaging
lingo. To set it on a single #fromImageObject texture you will need
to create two images, a 32 bit "host" image and an 8 bit grayscale
image. You can then use setAlpha() to apply the alpha information
to your host image and then create the texture using the 32 bit
imageobject (with the correct texturerenderformat). If either the
host imageobject is not 32 bit or the grayscale image not 8 bit the
setAlpha() operation will fail silently.

Getting a semi-transparent graphic onto a spot plate in InDesign CS6

I'm struggling to get elements of a design onto the fifth colour plate in my InDesign file. Example is shown below. I have made a number of rough-edged strips that retain an element of semi-transparency along their edges (so that the background shows through slightly and gives a brushed/painted on effect). The client needs these elements to be on a fifth plate, Pantone 1385.
I have tried making the graphic as a greyscale psd and as a greyscale tiff with transparency included, but I can't seem to select within InDesign using the content tool and making it on the fifth plate in my ID palette.
Have done it as a CMYK psd for time being on example below just to allow me to show the client as a visual.
Can anyone help me? I have also (briefly) explored channels in Photoshop as well but can't make and headway there too. Is there a simple solution?
Many thanks for any advice.

Thanks for reply, but I think this loses me all transparency?
Make your grayscale file a transparent Monotone like this:
In ID fill the background of the image frame with black:

How to apply a semi-transparent background to a text box

Hi Framers,
The cover of my doc has a full-page .png file on a master page. I want to add the title of the manual on the body page of the cover in a text box. No problem. However, I want to apply a semi-transparent effect to the background of the text box, so the graphic behind it shows in a muted way.
I'm sure this has to do with some combination of the Tint, Fill, and Overprint settings but none of my experiments have produced anything close to the desired effect.
I did RTFM and also searched the Help and the forum. I truly hope I didn't overlook the answer---but if I did, it wasn't for lack of trying!
As always, your expertise is very much appreciated.
TIA,
Gay

Wow, I wish I had Photoshop! I use a less sophisticated image editor, which has always served quite adequately and since it supports layers, I'll try to figure out how to do what you're suggesting.
(I did try a "None" fill and the bottom image does show up, but I wanted it a bit muted, as would happen with perhaps a "half transparency" and that is apparently what I can't achieve in FM.)
If I understand correctly, I need to edit the imported graphic to make a portion of it appear semi-transparent, and then when I bring it back into FM and put my text box on top of it, it will appear the same as if I had been able to put a partial transparency in the fill of the text box...
I really, really, really hate it when I find myself thinking "Word could do this easily, why can't Frame?"
Thanks for your helpful suggestions, guys, you're great. As always!
Gay

Scrolling semi-transparent panels

I have a parent panel that paints a custom background. Within that panel, I embed another panel held by a JScrollPane. My intent is to have the custom background show through on the panel that is being scrolled.
To accomplish this, I set both the scrollpane and the viewport to non-opaque and then I set the panel held by the scrollpane to non-opaque as well.
When I run the program everything works fine and the panel can be scrolled and displayes the background image just as I want it.
Next, I want to set the panel in the scrollpane to be semi-transparent. I set the panel to opaque and give it a semi-transparent background color(ie alpha value or .5). This gives me a see-through effect and when I run the program it initially looks good. However, when I scroll the panel, the refresh is not handled correctly. The problem appears to be that the paint method of the parent panel is not being called.
I think the scrollbar code incorrectly assumes that since the embedded panel is defined as opaque that the parent panels do not need to be painted. However, this assumption is only valid if the background color of the embedded panel has an alpha value of 1.0
Does anyone have a workaround for scrolling semi-transparent panels?

On second thought, that's going to cause a stack overflow. You are going to need a flag to not call it. Something like so:public void paint(Graphics g) {
    if (someflag) {
        someflag=false;
        bgPanel.paint(bgPanel.getGraphics());
        someflag=true;
    // do my painting stuff ... super.paint(g); ???
}Just a thought, I haven't tested it.

Cloning Semi Transparent Areas

Is it possible to clone a semi transparent area of an image without the effect being multiplied?

You could merge a copy of the layer with white and then use
peel off white to make it transparent again when you're done. Seems awkward, but works.

"Glass" Effect Lettering Created In Photoshop Does Not Appear Correctly.

I have made some "glass" effect transparent titles in Photoshop by putting a normal title over a transparent background, adding an inner glow and bevel and then reducing the Fill Opacity to zero.
This is how it should look:-
However, when I import it into FCE/FCP and superimpose it over video the title usually looks solid black - as it did originally before I reduced the Fill Opacity.
I have tried every combination of Composite mode I can find in FCE/FCP to no avail.
Is it possible to show it the way it is intended and if so, can anyone suggest where I am going wrong?
Ian.

Hi(Bonour)!
Start with a transparent background in photoshop. Compose your title document (yopu can put a reference layer at bottom of the stack to see how title will appears on your image clip- if so, pay attention to make this backgroud inactive upon exporting) and save in PNG format (this format save the alpha channel-transparency- with your graphic elements).
Import in FCE, and compose your title over your video clip.
Use normal composite mode.
You can also use Boris title or livetype to achieve the same result.
Michel Boissonneault

Semi-Transparency Blues

Hi—
I’m having problems with semi-transparency in a t-shirt design.
The design includes both a reflection and a satin effect that fade from 0% transparent to 100% transparent. The t-shirt manufacturer’s software, unfortunately, fills the missing area (where there would be a partial image) with a solid color rather than empty space.
Upon speaking with the manufacturer, they recommended “simulating” transparency via dithering, using either a GIF or a PNG converted to an eight-bit paletted file. I understand neither of these concepts, and even the designer who helped me create the shirt in the first place -- awesome guy -- was unable to make much headway.
Would anyone on this forum have any suggestions on how to implement these, please? I’m running out of options, and would hate to have to trash a cool design.
Many thanks,
--Cliff

Mark--
Thank you for weighing in!
Unfortunately I do not: the manufacturer did not send me a picture of what their software did to the image, so I only have my original. And it's a very large file, at over 100MB (for the layered psd). I could separate out the "problem" layers, but I suspect they would look just like any other file that uses semi-transparency. Apparently this issue affects all images using that technique (unless done via dithering).
Apologies,
--Cliff

Semi-transparent GlassPane

How to make a semi-transparent glasspane to cover entire JFrame so all components in contentPane can be saw through?

That's quite easy:
    private class HelpGlassPane extends JComponent {
        public HelpGlassPane() {
        public void paint(Graphics g) {
            Graphics2D g2D = (Graphics2D)g;
            g2D.setColor(Color.black);
            g2D.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER , 0.2f));
            g2D.fillRect(0, 0, getWidth(), getHeight());
   }Could be that you can have the same effect even with less code, but I'm doing a lot more in my glass pane, so this is only part of the code.
Also it might be better to override paintComponent() instead of paint()
Note that cou can even let all mouse events 'fall through' if you override this method to always return false in your glass pane:
boolean JComponent.contains(int x, int y)
Hope it helps,
Stephen

Placing a semi-transparent area on top of a picture

CS3
I need to place some text on a photo, and to make it possible to read the text clearly, I want to place an area with a single colour on top of the picture - and the text on top of the are.
But how can I make this area semi transparent?
Thanks

There is also an action under Text Effects that does a semi-transparent panel for text.
Load the Text Effects actions into your actions panel and then make a selection for
the size of the text panel (rectangular marquee tool) before running the action. After
the action runs you can type your text inside the panel.
You can move the text layer and panel layer to a different part of the image by
selecting both layers and then using the move tool.
MTSTUNER

How to create glass effect??

hi
i wish to creat a mobile phone on screen and wish to know if it is possible to produce a glass screen?
any help would be great
thank
martin

Create an image which shows a glass effect. Then use this image as a transparent texture on a plane which is your glass.

Question about semi-transparent jpgs

Hello again.
I am trying to display a semi-transparent jpg in the Graphics Layer, having a code that seems to be right but the image is not transparent after all..
I am wondering whether my source *jpg.File is the problem..
Is it possible that all input Graphics that are supposed to be transparent need an
alpha, in order to make the effect happen? I am really stuck..
Thank you for helping me out,
Alex.

If you want images to be semi-transparent then you either need to use images that have an alpha channel (e.g. PNGs) or that use a transparent colour.. The only alternative is to use a matte that handles the transparency for you, but this is a more complex solution.
Steve.

Is there a way to create a semi-transparency with Java?

I would like to be able to create a semi transparent form and I was does anyone know how to do this?

import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
public class CompositeTest extends JPanel {
    private BufferedImage backImage, frontImage;
    private float alpha = 1;
    public CompositeTest() throws IOException {
        backImage = ImageIO.read(new URL("http://today.java.net/jag/bio/JagHeadshot-small.jpg"));
        frontImage = ImageIO.read(new URL("http://today.java.net/jag/Image54-small.jpeg"));
    public Dimension getPreferredSize() {
        return new Dimension(backImage.getWidth(), backImage.getHeight());
    public void setAlpha(float alpha) {
        this.alpha = alpha;
        repaint();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        int x = (getWidth() - backImage.getWidth())/2;
        int y = (getHeight()- backImage.getHeight())/2;
        g2.drawRenderedImage(backImage, AffineTransform.getTranslateInstance(x, y));
        Composite old = g2.getComposite();
        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
        x = (getWidth() - frontImage.getWidth())/2;
        y = (getHeight()- frontImage.getHeight())/2;
        g2.drawRenderedImage(frontImage, AffineTransform.getTranslateInstance(x, y));
        g2.setComposite(old);
    public static void main(String[] args) throws IOException {
        final CompositeTest app = new CompositeTest();
        JSlider slider = new JSlider();
        slider.addChangeListener(new ChangeListener(){
            public void stateChanged(ChangeEvent e) {
                JSlider source = (JSlider) e.getSource();
                app.setAlpha(source.getValue()/100f);
        slider.setValue(100);
        JFrame f = new JFrame("CompositeTest");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Container cp = f.getContentPane();
        cp.add(app);
        cp.add(slider, BorderLayout.SOUTH);
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
}

Glass effect - semi transparent image

Similar Messages

Maybe you are looking for