Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I'm working on my web project and am looking for the way
all the big ones like twitter, facebook, etc. created their icon set.
Did you ever take a look at their sprite?
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/x/4jB4tvIAAbU.png
How do they draw those tiny icons?
Is that technique called pixel art? And where can I hire someone to draw some for me?
I'm sorry if this is not the place to ask, had no idea where to post this.
You can create pixel art using a variety of programs, including Adobe Photoshop, Fireworks, etc, but there are also freeware and inexpensive offerings too.
Check out this one: http://code.google.com/p/grafx2/
If you are not familiar with graphic design, you can hire someone using a freelance service, such as Freelancer.com, Odesk.com, or a variety of others. Just Google it.
Yes, it is called pixel art, and it uses a limited palette of colors (usually 8 or 16 bit) -- where each pixel is represented by one 8-bit byte (maximum colors: 256). As opposed to modern graphics which use a technique of anti-aliasing which blurs the edge to create the illusion of a smooth edge.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am pretty new to front-end development. I wonder what are the disadvantages of vh and vw? I have been always using them because they can adjust the font size based on the screen size. However, I didn't see many people use them as much as I do and saw online that most people prefer to use em. So, it is okay to keep always using vh and vw? What are their disadvantages?
Thank you very much!
The disadvantage is the same as the advantage: it is relative to the screen dimensions.
This is something you probably don't want for a font, since "absolute" units like px and cm already are relative to the perceived size*, which accounts for how distant the observer is from the screen. For example: If a user is using a mobile phone to navigate a web page, you would want the font size to remain constant whether it has a big screen or a small screen.
So I would recommend using an absolute unit like px to set the font size, border thicknesses, etc...
* According to the spec. In practice, the size of px is often synchronized with the OS settings.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm adding a tile to the body tag as a background-image (for noise texture). As far as performance goes, does it matter whether that tile is 50x50, 200x200, etc.?
There doesn't appear to be any recent information regarding this. I found a few similar questions that haven't been updated in years and wasn't sure if browsers have changed the way they handle this.
Short answer: No.
The image only needs to be downloaded once. Instead, worry about how it displays to a user based on the size you choose. Watch out for any pixelation with too big of tile sizes.
This really doesn't matter but can be debated depending on the actual file size of the image . Otherwise of course setting the pixel size to 50x50 depending on the original size of the tile would look smaller but cleaner than 200x200 . At the end of the day I would prefer you to judge mainly on how it looks in this case .
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
In this page here, Compass gives allowance for 4 different types of layouts for sprites - vertical, horizontal, diagonal and smart.
It mentions that the smart layout is the most efficient use of space for a layout, which is very plain to see.
However, Compass defaults to using the vertical layout on Sprites! Why? And why even offer up different types of layouts? Is there any practical reason?
One difference is the generated file size.
Depending on the images that are combined to a sprite, it is advantageous to select the option which fits best the image space without much whitespace. This will result in a smaller image size than using one of the other options.
This may lead to use smart option most of the time. Google uses sprites of that style, too.
The smart sprites are most probably more cpu intensive to generate than simple horizontal or vertical sprites. I do not know if there are other reasons for selecting horizontal/vertical sprites over smart sprites.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a website that pops-up animated icons when you mouseover them
But i think that maybe it could result in poor graphical performance from the browser. I could put animated icons in a sprite, and not-animated icons in another, but what is the point? in that way sprites stop being useful. Do you recommend using a script that animate the icons placed in the sprite manually?
What is your recommendation? Since i need a good performance.
Don’t guess, test! Seriously. As long as the animated gif is of reasonable dimensions, I doubt it’ll be a big problem. However, the best way to find out is to try it. Try using Chrome or Safari’s Web Inspector to profile page load times with the various strategies (no animation, animated icons in a separate file, everything in one image), and see which performs the best. If there’s not much difference, choose the easiest one. You can always change it later if performance becomes an issue.
The gif compression format is a tricky one because all of the blank space isn't treated like it would be in a jpg or png (bitwise). However as the number of animations increases and the number of colors increases, the gif format will begin to break down. What you should do is test the individual sizes against the size of the sprite image. The performance of moving the sprite shouldn't really be an issue at all, but as other answers have said you'll have to test it with different browsers and form factors.
The support for animated GIF is present in all majors browsers since nearly the beginning of the World Wide Web (www); 2 decades ago. I would be very surprised if they were of any concern for any modern browser excerpt for those who don't support graphics like Lynx.
You might have a problem with some browsers if the frame rate is too high but this clearly not the case for these icons that you are showing us.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I build a site I tend to do a bit of graphic design (developer style) in Paint.NET, but how do I know the colors will all display properly on all browsers on different machines? What color depth to you generally code for? 16bit 256 colors etc.
I don't worry about whether the colors will display perfectly everywhere, as even the most basic of cell phones support 16-bit color.
In my opinion, the days of having to worry about 'web-safe' colors is mostly over.
As long as you're not using colors incredibly similar to each other, you should be good.
Another item to consider is:Color Blindness
FYI, when choosing colors you might want to take Color Blindness into account, about 5%
of males are color blind.
This Page describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people.
Here is more info on Color Blindness
On a related note: be aware of using png's.
Different image editors (not sure about Paint.NET) embed the so called gamma correction information in the png. This gamma correction info is used by some browsers and makes the png look different than the rgb colors that you expect.
I have personally encountered this problem on several projects where a png transition to a background color was a perfect match in firefox but not in IE.
Best practice is to remove the gamma correction using pngcrush. Which is a good idea anyway since it reduces overall filesize, even when gamma correction is not an issue at hand.
Here's some more info if you fancy some reading: http://hsivonen.iki.fi/png-gamma
Sorry if this sounds kindof offtopic but I just thought I'd mention it to you when using colors and Paint.NET for use on the web.
I shamelessly steal lots of color styles from here. I haven't had much trouble with the color schemes on most peoples' computers.
I say this noting that I'm not a web designer, but a programmer who is forced to design webpages on occasion, so take that for what it's worth.
According to w3schools only 2% of visitors still have 256-color displays. If you don't use web colors, they'll just see somewhat different colors from what you intended, so there's not really any reason to stick to web-safe colors, which really limit your choices.