Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, designed on a 128px grid…
from GraphicBurger http://ift.tt/2c7VhYN
Today we have for you a set of 20 icons available in 2 styles: colored flat and line version, designed on a 128px grid…
from GraphicBurger http://ift.tt/2c7VhYN
If you make a copy of a copy of a copy, the quality will deteriorate with each subsequent version in a phenomenon called “generation loss.” It’s easy to understand why this happens with actual copier machines. Scanning and printing are based on noisy sensors and physical paper and ink, and the resulting noise will tend to accumulate.
Digital images should not suffer generation loss. In theory, a file can be copied over and over again, and it should be bit-for-bit identical to the original. However, lossy image formats, such as JPG, can behave like photocopiers. If you simply copy a JPG file, nothing changes. But if you open a JPG file in an image editor and then save it, you will get a different JPG file. Some information can be lost in the process, and compression artifacts will start to accumulate. Do this often enough, and the image will eventually degrade beyond use.
In this video, you can see what happens to image quality when you re-encode a JPG image many times.
JPG offers quality settings that result in a trade-off between compression and visual quality.
But if you just save the JPG at a high enough quality setting, there won’t be a problem, right? Not exactly. Information that is lost when JPGs are re-saved cannot be magically recovered. So if you take a JPG image that was saved with a quality of 70, then re-saving it with a quality of 90 will, of course, not make the image look any better. In fact, it will even be worse. Every additional JPG encoding will introduce additional loss, even if it is done at a higher quality setting than the original JPG.
To understand this problem, we have to appreciate how this format uses several mechanisms to reduce the file size of an image, some of which don’t accumulate while others do.
The first is a color space transformation. Digital images are typically represented as pixels containing three separate 8-bit RGB (red, green, blue) values, which are statistically correlated in most images. For example, in a grayscale image, the three channels are completely identical. So if image compression is the goal, RGB is not the best representation. Instead, JPG uses the YCbCr color space. The Y channel is called luma (the intensity of the light, i.e. the grayscale image), the two other channels, Cb and Cr, are called chroma (the color components). Besides decorrelating the pixel information, this color transformation has another advantage: The human eye is more sensitive to luma than it is to chroma, so in lossy compression, you can get away with more loss in the chroma channels than in the luma channel.
The color space transformation itself already introduces some loss, due to rounding errors and limited precision. If you transform an image containing all 16.7 million different colors from RGB to YCbCr and back, and then count the number of different colors, you’ll end up with only about 4 million different colors; most of the loss is in the red and blue channels.
The YCbCr color transformation by itself does not result in generation loss. It’s a relatively small, one-time loss in color precision, but it does not accumulate. JPG also does “chroma subsampling”—sometimes called “4:2:0”—that results in only the Y channel being encoded at full resolution; while the Cb and Cr channel resolutions are cut in half both horizontally and vertically. As a result, chroma channels are reduced to one third of the total.
Chroma subsampling contributes to generation loss and can lead to color bleeding or color drifting. The chroma channels become increasingly blurry with each iteration of subsampling/upsampling. For example, this is what happens if you take an image and save it with a JPG quality of 100 with 4:2:0 chroma subsampling:
While color space transformation and chroma subsampling can lead to generation loss, it isn’t the cause of real loss in JPGs, though.
The core of JPG compression is quantization, which is a very simple yet effective mechanism. If you want to compress some sequence of numbers—it doesn’t actually matter whether these numbers represent pixel values, DCT coefficients or something else—the amount of space you need to encode them depends on how large the numbers are. For smaller numbers, less bits are needed.
To make those numbers smaller, you divide them by some number—called a quantization constant—in the encoder, and then multiply it again by that same number in the decoder. The larger this quantization constant, the smaller the encoded values will become. But the image becomes more lossy because we’re rounding everything to integers here (otherwise the numbers wouldn’t really become smaller).
This also explains why re-saving a JPG file at a higher quality setting than the original is always a bad idea: you’ll get a larger file with more loss than if you would re-save it at the exact same quality setting.
You might expect that JPG suffers from generation loss because it is a 25-year-old file format, and newer formats are better. But that’s not so. Modern image formats, such as WebP (released in 2010) or BPG (released in 2014) suffer even more from generation loss than JPG. WebP and BPG use variable-sized, larger macroblocks, which is good for compression, but can result in an error in one part of the image more easily propagating to other parts of the image. This does not mean that WebP and BPG are bad image formats, you just have to be careful in how you use them.
FLIF is a lossless image format that outperforms other lossless image formats. FLIF also has a lossy encoder that modifies the image so that the lossless compression works better on it. It is much less sensitive to generation loss because the format itself is lossless. Generation loss commonly occurs when you significantly modify the image between generations, for example by performing a rotation or resizing.
The color space of FLIF is YCoCg, which does not introduce loss, and there is no chroma subsampling, nor transformation to DCT that introduces rounding errors. Instead of using quantization, FLIF rounds small values to zero and discards a number of bits. This works because the values it encodes are differences (between predicted pixel values and actual pixel values), not absolute values (of DCT coefficients).
There are only two ways to avoid generation loss:
Cloudinary can help with minimizing the photocopier effect. You can upload the highest resolution, highest quality original image you have available (lossless if possible), especially if you’re using automatic format selection. Cloudinary always keeps your original image as is (adding zero generation loss) and each derived image is encoded directly from the original (adding one generation, which is inevitable). With that approach, you can ensure that your image assets are futureproof. When in the future, higher image qualities and/or resolutions are required or desired, or new image formats become available, it will be an effortless change.
[— This is a sponsored post on behalf of Cloudinary –]
|Mighty Deals Exclusive! 500+ Linear Vector Elements & Icons – only $14!||
from Webdesigner Depot http://ift.tt/2byLY5F
Color and layers. This pair of design elements has been the driving force behind many of the year’s trends. While we haven’t seen anything take over, like flat design a few years ago or more recently Material Design, elements of both styles are pushing designers to explore new things.
Both color choices and layering seem to have roots in those bigger trends and are being used in design schemes even without totally flat or material aesthetics. Here’s what’s trending in design this month:
Layered elements and three-dimensional effects are the must-have technique in the 2D web space. Thanks to the fun techniques, and even better how-tos, introduced primarily by Material Design, layered elements are popping up in projects of all types.
What’s particularly nice is it gives a website a more realistic feel. The user can almost reach out and grab the elements on the screen. (And that’s a good thing!) The trick is that every layer should look real and light, and layers look natural.
Here are a couple of ways to start experimenting with layers in your design projects:
For a while it seemed like every website was a minimalist ideal, including a stark white background. That trend has shifted as more dark color schemes are emerging as the design favorite.
And for good reason. A nice dark color scheme can be attention-grabbing and isn’t as harsh on the eyes of some users as bright white. On the flip side, dark aesthetics can be a little more troublesome if text is small or on smaller screens (so make sure to pay particular care to how elements render on mobile devices).
Elements that really stand out on dark color schemes include the use of cool video and animation, even if it is hardly recognizable; bold white typography, pops of bright color to accent calls-to-action or important information and the appropriate overall mood.
Remember as well, that dark doesn’t always mean black. Dark color schemes can be rooted in a variety of hues from reds to blues to greens. While black options are the most common, it is important to choose a rich black that is made from various color combinations. A flat black (or “K black” as print designers call it) will leave something to be desired in website design.
When working with dark color schemes take special care to make sure there is proper contrast between elements and that colors and images don’t get lost inside the dark nature of the design. White can be a good option as well as other primary colors with a lot of brightness or saturation. Remember to think of size contrast as well. Consider bumping up the size of all text elements by 10 to 20 percent when working with a dark framework to ensure readability.
The gradient—one of the techniques shunned by flat design—is making a comeback. (And it’s even being used in mostly flat design patterns.)
Gradients work because they do something that many people thought flat design lacked, which is to help create and establish depth. What’s new about gradients this time around is that they are not used to mimic textures or without purpose. Today’s trend focuses on bright-colored gradients that emphasize the content. From full-screen gradient overlays to backgrounds, almost anything goes when it comes to the technique… as long as it is bold.
Designers are making the most of the gradient comeback in a few distinct ways:
There are still a few gradient don’ts to consider as well. (Since you don’t want that design to looking like it jumped right out of 2012!)
There’s nothing more fun than color when it comes to design. Trends in color are nice because they are elements that you can add to almost any style of design without a full-scale overhaul. The same is true of layered elements. This is a technique that can be added to an existing design to give it a more modern feel.
What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.
|Mockup Scene Generator Bundle: I Am Creator Perspective Edition – only $14!||
from Webdesigner Depot http://ift.tt/2bxhdv5
Get a set of 18 geometric line art objects in vector format. Give your design project a perfectly calculated geometrical touch with these beautiful illustrations in 3 styles: solid and grungy.
from Pixel Buddha http://ift.tt/2bCRG51
The freebie of the day is an inviting collection of 6 top view photos of various savory foods on a dark textured background…
from GraphicBurger http://ift.tt/2c29Exp
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
|LAST DAY: Exclusive Mighty Deals Summer Font Bundle – 30 Fonts with Extended Licenses – only $29!||
from Webdesigner Depot http://ift.tt/2bXBuvW
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Can you relate to these situations? Please share your funny stories and comments below…
|eBook: Marketing for Developers Guide – only $14!||
from Webdesigner Depot http://ift.tt/2bouysd
Twitter wants to be your everything. In the grand tradition of social networks since time immemorial (read: the mid-‘90s?), Twitter is putting a greater emphasis on its messaging feature, and trying to become your primary “portal” in the process. It wants to be the way you talk to people, and not just your colleagues.
Amongst the many different Twitter-related buttons that you can put on your site, you can now also use a button that takes people to a dialog that allows them to send a Direct Message (DM) on Twitter. It’s already being tested on the customer support accounts of a few different brands, and that’s an indicator of this feature’s target audience.
Announcing our new Message button. Now people can easily slide into your DMs from your website. Get yours now! https://t.co/ash9ouvgzu
— TwitterDev (@TwitterDev) August 24, 2016
Twitter is already, in many ways, the place to go when you want some online support, or just want to complain about how it’s been a week and your new router/microwave/cellphone still isn’t working. While Facebook’s business pages are often used for much the same thing, tweets are “doubly public”, which is great for someone who really wants to complain. This messaging feature, however, gives brands a way to funnel people straight into a somewhat more private conversation, while still communicating with them on a platform that they already use.
It is also reasonable to assume that Twitter is using this feature to compete with Facebook. While nearly all Facebook users use the chat feature to talk to friends, Facebook has been pushing for brands and businesses to use the chat as well. They’ve redesigned their business pages to emphasize messaging, the integrated chat bots for businesses, and more.
For many people who actually use both services, Facebook is how they talk to friends and family, Twitter is how they talk to the world. Now both services are angling to be the way people do business online.
Man, LinkedIn had an opportunity there, and they really dropped the ball.
|Corpo Font Family, 24 Sans & Serif Typefaces – only $15!||
from Webdesigner Depot http://ift.tt/2boQBLX
Make your typography look stunning with this new hand-lettered brush font! Zeyk Brush is a bold and wild typeface designed to catch the eye. Use it in multiple design projects to stand out of the crowd.
from Pixel Buddha http://ift.tt/2bIGHt7
Brutalism in web design is raw, rough, unpolished and everything that today’s standard of the aesthetically beautiful website isn’t. It goes way beyond minimalism (which will still be beautiful when designed properly) into a bare-knuckle and extremely stripped-down design that’s been called downright ugly by some.
In short, it’s a design trend that just isn’t supposed to do well in today’s best practice of usable-meets-modern…yet it is. At the very least, brutalism is making designers and everyone else take note in a way that’s very unexpected, given the irony of how this purposeful design choice is a throwback to the brutish design that did well in post-World War II Europe, where the need to rebuild inexpensively lead to cold, stark buildings that stood out like a sore thumb.
The fact that brutalism in web design is on many people’s radars now is also indicative of pushback from some design circles against today’s pretty web that’s obsessed with the harmony of colors, shapes, lines and design elements.
To fully understand brutalism in web design, we have to realize that its roots go back decades, to architecture and industrial design. It was very popular from the 1950s to approximately the mid-1970s and was popular with both institutional and government buildings, which is perhaps no surprise given that both types of buildings are sometimes associated with harshness, coldness and a certain kind of ugliness that’s far from comforting and easy on the eyes.
In fact, brutalism as a word comes from the French for “raw,” which is another apt way of describing sites that are stripped-down and have no frills or aesthetic concern.
Some people may call Brutalism a design trend, others consider it anti-design. The concept applied to web design only came to the fore recently, with the popularity of brutalistwebsites.com, a site devoted to showcasing the movement.
The trend was first picked up by Hacker News, but was quickly taken up by news sites including the Washington Post and CBC.
Pascal Deville, creative director at a Zurich ad agency, started brutalistwebsites.com to show that designers and developers can still create engaging sites without having to use the long list of design best practices that many want to follow in today’s web. From this philosophy, we glean another insight into the approach of brutalism: It’s a sort of rebellion against the conventional way many designers approach designing for the web today.
Interestingly, Deville makes the point that brutalism doesn’t just apply to the design of a site—it also applies to the backend work. In other words, to him, brutalism is just as much about the way a site is built, so if a site is a rougher, handmade, HTML site, that qualifies as brutalism, too.
Brutalism is therefore a design and development approach that touches on all aspects of the site-creation process. Your site’s not really brutalist if it just has a really rough and raw look, but its code uses dozens of libraries. Similarly, your site can’t qualify as brutalist if it was handmade, but it has a very polished and attractive look that promotes all the best practices of corporate design.
It might seem that Brutalism in web design is a relatively new trend, but actually it’s been a thing all along; it’s just that design journalists have now started taking it seriously. There are actually some well-known sites that have been proud standard bearers of this design choice for quite some time.
The website for Apple’s 2016 Developers’ Conference had what some would argue is a brutalist design scheme. This represents a further distancing from the old excesses of skeuomorphism. The site features:
Serge Khineika is a UX and web designer whose professional website has a very raw and crude appearance. Interestingly, it as a very neat scrolling effect that reveals more edits, doodles and page elements as you scroll down. His site has the following brutalist elements:
Basecamp is a web-application company that used to be known as 37signals. The 37signals site is another memorable example of brutalism in web design since it was so stripped-down and bare-bones that it went way beyond minimalism just to the very bare necessities. Here’s what made its old site a study in brutalism. It features:
It’s highly appropriate that the site that caused the brutalism in web design trend to go viral, is also a brutalist site in and of itself! Hacker News is a no-frills, no-gimmicks site that delivers a raw, line-by-line page of trending topics with barely any color or consideration to aesthetics:
Brutalism in web design has been around for a long time, but it’s really exploded into the public eye in recent months. If we broaden things past web design and go into architecture, then this design approach has been around since the 1950s.
What the body of evidence around brutalism makes clear, though, is that it is a design choice, above all else. It’s a knowing rejection of everything that’s attractive, easy on the eyes, and comfortable; and instead supports stark, raw ugliness in a sort of rebellion against design best practices that are meant to make us feel at ease and gives us something aesthetically pleasing.
As a result, brutalism is compelling, if for nothing else than to provide an alternative to the safe confines of design conventionalism.
|LAST DAY: 22 Powerpoint Templates (7600+ slides) – only $27!||
from Webdesigner Depot http://ift.tt/2bzqN3P