I have a site that I have built, with a colour scheme based around the companies graphic. This has a gradient from left to right, fading to white. I use the image at the top of the pages.
To provide the same gradient down the page, I took a pixel or two wide cut from the bottom of this image, which I them repeat down my page. This works perfectly well, giving me the right gradient across my screen.
In firefox, there is no break between the bottom of my header image and the top of my repeated background gradient - which is as expected. The colours match, so they should appear continuous. However, in IE7, the top image appears very slightly lighter than the rest of the background. I initially thought that this was because I think IE does not always render style colours correctly, but then I realised that it is not a style, it is an image. I cannot understand why these two images are being rendered differently.
Unfortunately, because of who my client is, I cannot include pictures, and I accept that this will make it harder for anyone to answer, but if there are any suggestions, I would love to know why this is happening.
Thank you.
Try saving them in a different format. I think this has to do wkth color calibration performed in certain computers (can be set up in Windows fo example, but as I am writing this on the go from my mobile I cant/wont do more research). I think JPEG des not care about this setting and PNG do, or the other way around. Someone else can probably describe it way better..
Related
I have noticed that when I view a image in a browser using either the zoom provided in the setting or on a webpage using style attributes the pixelation is either negligible or un noticable. But when you use programs such as paint or photoshop or windows picture viewer you start to notice pixelation. Does anyone know how the browser zoom its image contents?
Here is a sample image the one on right is from paint while one on left is when viewing in chrome. The zoom is set at 500%.
For fonts, I believe it has to do with font sizing. Okay, so say you are in a word processor and type something up you increase the font size the text gets bigger. A similar thing happens in a web browser when you zoom in.
On the other hand when you take an image the resolution is set so as you zoom in the the pixels become larger and more noticeable this is called aliasing. Many times a program or browser, etc. will try and smooth the edges in the image to make the pixels look less blocky to the eye, this is called anti-aliasing.
As far as the actual algorithms behind behind paint or a web browser go, I am unsure. It may take some more research to find out.
I use the Kupu editor in Plone3 to insert images in the website, automatic scaling images, and make a smaller thumb with a link to the original image.
This is a tutorial of how we do that:
http://www.contentmanagementsoftware.info/plone-book/kupu/insert-image-properties/index_html
Kupu creates a new scaled image (not only scaling with css, but scaling it for real), and the result is that images become a little blurry. I don't know if this issue is related to this document.
The question comes to my mind. Is there anybody who find this issue too? Is there any way to fix it?
I think the only way to achieve a great quality images is scaling them manually with photoshop or some graphic editor. But seems that Kupu doesn't allow to do that. You must swallow with its manners and upload its self-generated images.
Well, a bit too localized, but we find main error. I want to respond in case that any user will be in the same situation...
Kupu scale images to a certain width and height. And later, the css rescaled again a little bigger, making blurry images.
That is the main problem, we reduced an image, then enlarged it browser-side again. We didn't notice until now that there was css behind the kupu implementation and "overriding" (so to speak) our configuration.
I have few thousands of images from our vendors. They are models wearing fashion clothing. I need to take only the clothes part of the images and discard the rest and make them transparent background. All the images has one color background but they are in different colors. Currently we perform the following steps manually and I need suggestion and help if there is a way to do this automatically or is there a way to do the manual process faster. We used Gimps and script-fu for automating some part of this process (see below steps), but still the remaining manual part is very time consuming. Is there any tool or any programming language or script that can make this process faster?
This is the way we are doing now:
We use Gimps script-fu run in batch to make all images background transparent.
Load one by one each image into Gimps manually
Via Free select took, we mark around the clothes
Remove everything outside the marked clothes area
Export and save image into png format.
Run script-fu in batch to auto crop all the image
I haven't figure out a way (code or script) to do the step 3 automatically. Does anyone know if that even possible? If it is not, is there any tool that could combine step 4-6 into one control key so reduce the key strokes and any faster way to finish these images?
Thank you for your suggestions. This is what I am thinking to do for making my step 3 and 4 automated. Do you think if this approach would work. Is there better way to handle it?
All the images will have transparent background via our batch job. So the idea is to remove the body part now.
Auto crop all the images, so the head and feet to be the topmost and bottommost of the image.
Code a PHP program to detect the skin colors from list of database colors for skin.
Then go to each pixel of image and detect where the skin color starts.
Start from topmost of image, the first pixel has skin color must be the head or neck part. I remove everything above the starting first pixel, so I will be able to get rid of hairs if the image has model with full head. Anything below could be the face and neck, I will just replace the color with transparent background. I still don't know how to get rid of hair in right and left side of the face.
Searching from bottom of image pixels by pixel until match to skin color. I remove everything from that pixel to bottom of the page. This way I can get rid of shoes parts as well.
6.Replace remaining skin part with transparent background.
The problem is the hand sometimes cover the clothes and I am not sure how to handle that. Perhaps if the adjacent pixel is not transparent background then leave that part alone.
I also don't know how to handle the the clothes(dress or blouse) that may have the same color as skin?
Step 3 can be semi-automated. That is, done in such a way that it requires far less human interaction than you are currently using. I get the impression from your question, that you are not a programmer. So, I'll point you to a specific off the shelf tool called Power Stroke. It plugs into non-free tools. There may be a GIMP equivalent. I don't know.
In Corel PhotoPaint, when you overlay two images using the "Subtract" mode instead of "Normal", you will get more saturated, "neater" colors in the darker areas from the top image. Does anyone know what the algorithm behind this overlaying method is? For instance, I'm looking into emulating it in Objective-C as well as PHP.
For comparison, I created an overlay image of a blurred black center circle which in the top, uses the Normal overlaying mode, and in the bottom, uses the Subtract mode. The normal mode will cause the resulting darker area to look much more gray.
Normal
Subtract
Exporting this CPT file to PSD and opening in Photoshop, the Subtract mode is not available and is lost, so I'm not even sure what it's called in Photoshop.
Thanks for any help! (Original photo CC-licensed by iPyo.)
When combining two images you will have varying options to do so. The general algorithm for such a combination is
for each pixel in resultImage
resultImage[pixel] = sourceA[pixel] OP sourceB[pixel]
Well and then you choose OP. In your questions case thats a '-' (subtraction).
But it can be also +,*,/, MOD, DIV etc.
Usually you will also want to perform some kind of range checking so the pixel intensities of your result image won't over- or underflow. But well then you also might want to do such a thing intentionally.
In a design that I'm working on, there is a recurring image background shape that appears several times in different sizes throughout the site. For example, one page uses it as a huge background images, where the top and bottom part of this image is cut off by the browser edges.
It's not an easy pattern to create with canvas, but as far as I know it's possible. Here's what it looks like.
Am I better off making several images of this same pattern or is this background image easy to recreate through canvas? If it is appropriate for canvas, how do I go about recreating it in the various sizes? I wish I knew how to begin something like this using canvas but it's above my skillset.
I've converted your shape to an SVG shape here: https://gist.github.com/1321653 — use it as you'd like.
According to caniuse.com, SVG is supported on all common browsers except for IE8 and earlier.
For IE8 and earlier you might be able to combine canvg, a SVG-to-canvas library, with explorercanvas, a canvas emulator for IE8 and earlier. Or you could display a rectangle with a background color — IE users might not miss the splat.
Edit: You could also get creative with CSS3 background gradients, ala http://www.ecsspert.com/ (famous logos created with only CSS), but compatibility is low across browsers.