Designer at our company has provided me an icon set as a series of .png files (1x and 2x per icon) that I'd really like to switch over to be a webfont instead.
Is there a best practice for doing this sort of thing?
If your png's are of good quality you can open them in Adobe Illustrator.
Click on an image. On the top bar, a button 'Image Trace' ('Bildnachzeichner' in german) appears. Click on small arrow next to 'Image Trace' box for drop down menu.
Select ‘High Fidelity Photo’ to begin image trace, if the result doesn't fit try other options from the drowndown menu.
Next you will see an 'Expand'-Button at the top ('Umwandeln' in german).
Click it. Vercotr paths and fills are created.
You can adjust them if you need and save it to a svg file.
Then import to icomoon.io ...
I've used icomoon.io in the past. I think with only .png files though you can only make an image sprite. You'll need the files in .svg format to make an icon font.
DON'T DO IT.
Use a sprite sheet instead.
Related
When I try open file in Photoshop color change, the color mode is cmyk/8:
Click on the Image Menu, Mode, then change it to whatever you want.
You mention Illustrator in the tags, maybe you saved an image from illustrator? If Illustrator is set to CMYK, it will output CMYK files whenever possible, and opening these files in photoshop will put photoshop in that mode as well. Use document color more in the file menu to change the mode in Illustrator.
I am currently using Adobe Photoshop CS5. I have a png file with some signatures and their texts (names of the persons). I have to change font of the text, but I haven't seen any of Text Layers, only Background that seems is locked. How can I change the font of the text? Thank you in advance for any help.
If it's a .PNG file most likely its a flat image, and has no Photoshop layer data in it, therefore the text and all the other elements in the image are rasterized.
The only way to edit the text is to remove it and retype it again using the font you want.
There is a tiny chance that the .PNG was saved in Adobe Fireworks.
Try opening it in Adobe Fireworks, there is a slight chance it might contain Fireworks layer data.
For a touchscreen I need to increase the height of my buttons in a ABAP WebDynpro Application.
Because there's no attribute for the height I read that it should be possible to add an image to the MIME Repository and then add this image to the button.
I also read that it might be possible to create a own theme with a .css file.
The last one sounds a little bit better to me. Does anyone know how I can create such a theme and apply it to my application?
Thanks for your help!
The simpliest way of resizing height is using MIME image, which I want to describe here:
Create your image with exactly those height that you need. The image could be opaque, transparent or whatever. Image format doesn't matter, as most common formats (jpg, gif, png) are supported.
Import it to your Webdyn Pro component like this: right click on component in repository tree, then -> Create -> MIME object -> Import
After image was successfully imported, just select it using imageSource property of button element, where you can find it on Component images tab.
Voilá! The button adopted the dimensions of the image.
We use Icon Overlays to show a state to the users. All but one of our icons are shown sharp.
This unsharpness only happens when we set the explorer to the large icon view.
We can't figure out why this happens.
We tried different tools to create th icon file.
This is the result :
And we started from this image:
You can find the source files (png's) and the ico file here
Does anyone knows how to fix this or what is causing this?
It looks like a specific of Windows resize engine.
In large icons mode shell uses 48x48x32 icon. I created icon with grid:
And shell draws this icon without any interpolation:
And it looks like there is no solution of your problem.
I recently purchased Drew Wilson's Pictos icon library. It is a library of flat, monochromatic icons for use on the web and elsewhere. The only issue is: they're vectors. I know my way around Illustrator a little bit, but ultimately I want to import these icons into Photoshop CS4 and resize to various dimensions.
When I import an icon and resize it to, say, 20x20 pixels, I notice that there is a fair bit of aliasing around the edges of the icon. I'm sure there is some magic number where the edges of these icons will remain crisp, but I can't find any option or setting that will allow me to size these icons properly.
How can I snap these icons to the closest size that removes or minimizes the aliasing?
The aliasing / pixelating is because vectors export out of illustator # whatever size they're copied #
Try opening the icons in illustrator... scaling them waaay up
And then just keep a copy of the huge ones in a separate layer
Copy that layer when you want to scale it down ..annnd that way you'll have a copy to work with..and u won't have to re
Open the file every time u need to make an edit
And a good rule of thumb for pixelation is
You can always size down.. but sizing up will create pixelating in bitmaps
Chances are, you have your logo in .eps format. If you do, open your .eps file in Photoshop. A dialog box will pop up asking the size you want to import. Be sure to select RGB color if this will display on the web. Select the Anti-aliasing checkbox. When your file opens up, zoom in, and you'll notice that Photoshop has neatly anti-aliased all of your edges for you.