I want to create my own node icons for jsTree application. A jsTree sample could be found here
I want to know what specification the new icon has to have
size
transparent?
could you recommend any program (mac or pc)
anything else I forgot
Bit of a weird question, but anyway:
The icons are individually 16x16.
All the icons are inside one .png using alpha transparency (the background).
The CSS Sprites technique is being utilized:
http://static.jstree.com/v.1.0pre/themes/default/d.png
Which image editor to use?
I'd use Photoshop, but any image editor that can handle .png's alpha transparency will work.
Try: https://superuser.com/questions/25451/looking-for-a-good-free-image-editor
Related
I've been using icon-fonts created at IcoMoon and they are fantastic. For this I import an SVG Illistrator output (or use premade icons) and create font files that are attached using CSS #Font-Face. These are only ever one color.
I've been reading about SVG Sprites like here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
I've tried uploading illistrator SVG files with different colors into IcoMoon (as explained at the bottom of the link above) and then creating a SVG Sprite but the color never comes through (always just one color).
Am I doing something wrong with IcoMoon? How can I create a color SVG Sprite using a site like IcoMoon that can be used to display icons where required?
thankyou
Note: i need multiple colors in each image. (not just one color styled via CSS).
I am creating a template for my company that will be used down the road on a variety of different clients sites, and they will all range in color. I have created icons for this template that are currently black (or white) and I want to be able to control the color of these icons via css. They are one simple color and in photoshop if you do a blending option of color overlay and choose 1 color, they look great. Is this possible to do in css so when someone is editing this template for future clients that they can control the icon colors in css instead of having to edit every icon in photoshop every time?
It's possible to change the color of a logo in CSS, but not to solve the problem you are talking about. To make a changeable logo you would make a PNG with transparency where the logo is and background color (of the webpage) in the negative space. Then put it over a P or div that has the logo color you want as its background color.
Trouble is, you have just exchanged having a flexible logo color for an inflexible "background" color.
Better to just include both colors of logo, white and black, as part of a "package" that is put up with all websites. Just call the one you want in CSS where you want it.
If your icon is a shape you can make in css, it could work, but I have never heard of anybody doing what you are talking about before.
Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc
Not possible via CSS. You can use some dynamic technologies like Canvas, but it's not good way. I would rather create tool to create icon sets in desired color. You can do it with PHP (phpGD or ImageMagick here is example of similiar problem).
You can do this with images (as long as the background colour is consistent) but it requires thinking outside the box a bit. Open the icon's image file in Photoshop (or similar). Edit it so that the "icon" part (i.e. the bit that is currently black) is transparent, and the background (i.e. the bit that isn't what the icon depicts) is filled white (or whatever the background colour of the site is). Essentially you've "reversed the polarity" of the image. Put the image in the web page, then use CSS to specify it's background-color. Your icon should appear in that colour. Edit: Something like this: http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/
A [potentially] much simpler approach would be to use an icon font like http://pictos.cc/. That's just text really, so you can colour it with CSS as usual.
You can do this with CSS pseudo elements and translucent overlays. You can follow the instructions here: http://www.impressivewebs.com/image-tint-blend-css/
If you have a vector logo, you can do this with SVG logos even easier (by altering your SVG colors).
If you make the icon images into a font, then you have full control over both size and color via CSS. Check out the very popular Font-Awesome font, designed to compliment Twitter Bootstrap.
I'm no font expert, but if this approach sounds like a fit, you'll do something like:
create vector graphics from your icons
load them into a font editor, like FontLab Studio
add the new font to your favorite web application. If you need a guide for this, FontSquirrel.com generates great #font-face markup to include their library of free fonts.
It can be done and works well with Firefox and Chrome as far as I know. Example below.
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
I would say the best/easiest answer is to use SVG. The logo should probably be in a vector format to start with so that it can be scaled without detail loss from business cards to billboards.
SVG 'images' are based on shapes. Give the shape you want to change a name, and then address it in CSS to change it's colour.
This article:
http://css-tricks.com/using-svg/
and this example:
http://codepen.io/chriscoyier/pen/evcBu
Do an excellent job of explaining how to achieve this and also show off other possibilities.
SVG at least the basics are now widely supported, ie8 is the only browser holding it back and even so there are ways around this via rendering SVG as an image on the fly.
I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.
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.
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole