these pictures in the right
Does anybody know the best way to make up these pictures adaptive?
I tried to use position absolute, width 100%, top40px, left 350px (for instance). it didn't help. Pictures start to decrease only when the imag is already in the right side and we can see it...
Related
I want to realize the following. Let's imagine 6 company logos vertically placed on desktop view. When I watch the site on tablet (or shrink the browser manually), 2 company logos jump to the next line, but I want them to be centered. And not floated to left, as all grid systems do. Is it possible somehow? Especially with Bootstrap?
My theory is, if I could know which images are in the second row, I could count then the offset from left, and move the images with js to a centered position. But only, if it is needed, so if 3 images jump to the new row, it's okay, nothing to do with them. Am I right?
Didn't found any solution or plugin knowing this specific feature.
It is possible to use Javascript to do this but it would be better most of the time to do this using responsive breakpoints. So if your desktop grid classes are col-md-2 and when going to a tablet size, two jump down, it would usually be better just to make the logos col-sm-4, making 3 logos on each row.
If you notice only 2 images jump down on tablet, you could also add col-sm-6 to just the last two to potentially center those images on the next row.
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.
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..
It's easy to resize images so that they all have the same height while maintaining the aspect ratio, but how did they fit them all on a row such that every row has the same width? Did they crop some of the images or what?
Remember in google images (apart from cropping) -
Spacing between images are not always exactly same.
Height of all images in a row are also not always same.
Using above 2 techniques i.e. tweaking the spaces between images and changing size of image little bit by compromising height you can achieve this. In fact the the justify paragraph option in the text editor also use the spacing technique. They evenly distribute the extra spacing between all word.
You don't always get a good spacing in google image search. See this -
alt text http://dailycoding.com/filesharing/Google_image_search.jpg
they actually figure it out through an algorithm to put images next to eachother so with the padding and everything they end up being the same width then they cache that page for the keyword you searched for!
I found a very interesting article while looking for the same thing. If you look at google images you can see not all of the rows have the same height. but all the images in a row have the same height. So what you want to do is calculate the right height you need for the row so the images will fit (the images stretch if they get higher or lower). This article will possible help
http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html