We created a file by making Rotoscope in After effect. Then we auto-trace the Rotoscope made file and exported vector. Then we colored the layers by adding fill. We were planning to use it in our application.
When we tried to save it as a dotLottie file, the exports appeared as white in iOS but they were rendering fine in lottifiles.com. Another layer of white was added on top of fill inside the lottie. We repainted the color of the added white layers with the same color as fill we added, and then exported it as dotLottie.
Here you can see the screenshots:
enter image description here
enter image description here
When we added it to the application, we saw that some layers disappeared while others are rendering OK. There is no set number of layers missing and they all appear to be identical in the way they are created.
Related
<img src="img.pdf"> doesn't work due to it being a pdf. I don't like the embed and iframe environments either, since they add the pdf viewer options, the scroll etc. I tried converting the pdf to an image with the convert and pdftoppm commands on Linux, but these result in the image having extra white space on top and bottom to fit A4 format, and/or makes the background black (instead of white or transparent).
Any ideas?
"Img" is in effect an iFrame of an embedded binary object, but it is borderless since it is statically scaled to one non zoomable size. Note the img above this text is framed as https://i.stack.imgur.com/xpw2l.png
Yes there are ways to make it more dynamic but vanilla binary PNG/JPG/ETC are imbedded, and part of the binary HTML viewer renders those fixed areas. You can switch them off if you wish, or they don't display if badly served.
So why is PDF not simply treated like an image as per your question?
The answer is simple they are a different type of binary that requires a different html viewing binary extension. One frequent complaint is why use "menus and scrollbars if not needed for a simple file?"
The answer to that is those controls need to be in the extension, for zoom pan etc. So how comes the FireFox viewer above has none?, that's because as a user I switched them OFF.
another quick question. I've seen this multiple times now in different code sets. Someone calls for an image from the css
HTML:
<i class="icon-map-marker2"></i>
CSS
.icon-map-marker2:before {
content: "\e6f9";
}
Which gives the output of this:
As you can see the picture isn't transparent background. I was looking to edit it to give it transparency, but can't seem to find out how. I've also tried things with the CSS like:
style="background-color:rgba(0, 0, 0, 0.5);"
// Changing the last value's number though and stuff like that
opacity: 1;
// etc
I want to keep the gold color, but have a transparent background! Thanks for the assistance!
An example is on Canvas' live preview - Hover Home -> One Page: http://preview.themeforest.net/item/canvas-the-multipurpose-html5-template/full_screen_preview/9228123?_ga=2.252490057.1116575863.1496646725-686174233.1494200798
Try adding css for a tag for background color:
a{
background:transparent;
}
Background coming form .fbox-icon this div.. just add css for that
.feature-box.fbox-bg.fbox-center .fbox-icon {
background-color:transparent;
}
An option... Download the photo and save it as a png with a transparent BG.
Personally I use Photoshop though there is a free software called Gimp - Free & Open Source Image Editor that will allow you to format transparent photos and then save them as .png.
Typical method involved saving an image locally, editing and
exporting as transparent png.
Right click the hosted photo in your browser and then choose Open Image In New Tab
Right click on the image within the newly opened tab and select Save link as, then choose your destination folder.
Open your image editor software, see my link below for GIMP if needed.
Typically, if you have a good contrast between the BG and the
image or the background is one solid color, as is in your case. You can pull the image out of the background by using the Magic Wand tool.
You can also use the lasso tool to make the selection, where you sort of draw around the selection. However, this method is a bit more tedious and time consuming.
Once you have your image selected apart from the background you wish to remove, simply hit the delete button to delete the selected pixels. *MAKE SURE YOU HAVE THE BACKGROUND SELECTED AND NOT THE IMAGE WHEN YOU DELETE!
Only need feather if you have soft edges, if not skip feathering.
Feather: Feather the selection. Under Select->Modify->Feather. Enter a low number like .5 though you may need to experiment to find the right amount
to feather your softer edges, when needed. Then select the inversion and delete the selected inversion to apply the feather and soften your edge.
Now export your image as a .png file and host it so you can link to the new transparent image.
In PhotoShop, you would choose File->Save For Web Choose PNG-24 and select Transparent
Note the size, preview if needed, then save.
Now re-host within your websites image file structure or online at imgur or other img site and link to the newly posted
transparent pic.
I'm building an email and for some reason a specific image URL is not working in Outlook.com
This image (hosted on Constant Contact), is a blue diamond that we are using as a fancy bullet point.
https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/5ddaa2d3-668a-4e54-b5e7-72d76accf641.png?ver=1480354054000
When I view it in Outlook.com, the diamonds appear red and the URL has changed entirely to this link:
http://data:image/png;base64,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
Where this red diamond is coming from is beyond me. Any ideas?
Could be due to caching on your broadcast platform. Filename could be the same as something from a previous build and the platform is selecting the red one instead. Changing filename of image would be my first fix
I have a bundled and minified file and a source map. I added this source map in the chrome dev tools by right clicking in the source and selecting Add Source Map.... That seems to work (although I suspect that something is getting mixed up). The original files now appear in the devtools. But now some of the lines have a gray background (e.g. line 17 in the screenshot below). What does this mean?
The gray background indicates that the source map doesn't include those lines. Sometimes source map generators only supply source mapping for lines that differ or have the potential to differ from the underlying code. In these cases, unmodified lines will have a gray background.
See https://github.com/babel/babel/issues/1318 for an example of this.
Also see What are these grey lines in the Chrome sources panel? for a similar question.
Doing a big part of work around html image maps and suddenly I am not able to edit image maps:
- when clicking on an image with map edit tool, it adds the first point, but then focus is lost and 'multiple CSS p-elements' are selected, so I am not able to create any shapes, but adding single points only.
Dreamweaver can only make image maps for images with position:static