Subscribe to blog
Filed under Creative Cloud , CSS3 , Illustrator , Web Design
This video reviews some of the new web workflows available in Illustrator CC.
May29
Filed under Web Design
I'm sure you're familiar with the term "Retina display" and probably most of you already know what it means. In case you've missed it, I'll explain it to you. A Retina display is nothing more than a high-resolution display found on Apple products. The images look a lot sharper on such displays (Apple claims that the pixels are invisible to the naked eye from a typical viewing distance, and they are probably right). To get an idea, the iPhone 3GS has a resolution of 320 x 480 pixels, while the iPhone 4 has a resolution of 640 x 960 pixels, and both phones have the same display size (3.5 inches). That means the iPhone 4 has two times the pixel density of the 3GS. The former has 330 pixels per inch, while the latter has 165 pixels per inch. Of course, Apple is not the only one using high-resolution displays. Most of the high-end smartphones and tablets use such displays as well (for example, the latest flagship from Samsung, the Galaxy S4 has a display with the resolution 1080 x 1920 pixels and the pixel density of 441 ppi).
You are probably wondering, why do you need to treat these displays differently? After all, a pixel is a pixel. Well, yes and no. I know this sounds weird, but I'll explain it right away. First, let's consider two displays with the same size, but with different resolutions (and therefore different pixel densities). Some good examples are the previously mentioned iPhones: the 3GS and the iPhone 4. Now, let's consider an image with the resolution of 320 x 480 pixels. Displayed on the 3GS screen, the image will occupy the whole screen, because it has the same resolution as the display. On the iPhone 4's screen, which has a much higher resolution, the image will occupy only a quarter of the screen. So, on a screen with the same size, the same image will appear much smaller. Well, if that happens to an image, imagine what would happen to the fonts on a web page. Most websites use font sizes ranging from 10 pixels to 16 pixels for regular paragraphs (not titles and headings). Even a 16 pixels font would be almost unreadable on a Retina display.
So, how does the browser of your smartphone avoids that? Well, the smartphone reports to the browers a different width than the actual width (in pixels) of the device. For example, the iPhone 4 has a 960 pixels wide display (in landscape mode), but it will report to the browser that its width is only 480 pixels. So, when the page zoom is at 100%, because the browser "thinks" that the device has the width of 480 pixels, it will display only half of a 960 pixels wide website. Basically, when the page zoom is 100%, the actual zoom will be 200%, so the page can have the same physical size as on a regular display. One pixel of the web page (called a CSS pixel) will be displayed as four device pixels. A text with the size of 16 pixels will actually have the size of 32 device pixels. But what will happen to an image? Like any other element from the page, it will be zoomed in. One pixel of the image will be displayed as four pixels on the device's screen. That means the image will appear blurry or pixelated, and that's what were trying to avoid.
The principle here is quite simple: create an image which is two times higher and wider than the one you need, and declare the height and width that you need. For example, if you need 200 x 300 px image, create one which is 400px wide and 600px tall and declare the dimensions that you want. You can do that with HTML:
<img src="image@2x.jpg" width="200px" height="300px">
This can also be done with CSS, by defining a class for the image:
.image { background: url (image@2x.png); background-size: 200px 300px; width: 200px; height: 300px; }
Defining styles and setting dimensions for multiple images can be quite painful if you're using only HTML/CSS. You can use jQuery to reduce the dimensions of every image from the page (script by Paula Borowska):
$(window).load(function() { var images = $('img'); images.each(function() { $(this).width($(this).width() / 2); $(this).height($(this).height() / 2); )}; )};
Using high resolution images for everything on the page may sound like a good idea, but that wouldn't bring any benefit for visitors who use devices with regular screens. It will just make the website load a lot slower. A better solution is to use regular images for normal displays and high resolution images only for devices with high resolution displays. That means you will have two versions for each image. You can do that by targeting those devices with media-queries and use different CSS styles for them:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina styles here */ }
Again, using CSS can be frustrating here. For every element, you will need to use different background images (the high-res images). A better way is to use JavaScript. I recommend this easy to use jQuery plugin: Retinise.js. Basically, on Retina devices, it will replace the regular images with the high resolution ones.
SVG images are different from raster images formats like JPEG, PNG or GIF, which are pixel dependent images. SVG images are made from basic shapes (like lines, curves etc.) which are based on mathematical expressions, so no matter how much you scale them up or dow n, they will maintain their quality. They won't look blurry or pixelated, because the pixels don't matter, the images being "described" by mathematical functions. So, they solve both of the previous problems: the bandwidth problem and the effort of uploading two versions for each images. So, why aren't we using them more often? Because the browser support is still not good enough and they can't display complex images, like a photo.
You can create SVG images directly by writing code, or you can use a dedicated vector graphics editor, like Adobe Illustrator and Inkscape.
Another solution for displaying basic images (like social icons, menu icons, search icons etc) is to use icon fonts. The browser support is good, they are also scalable and they don't take much bandwidth. You can use a custom icon font in your website with the help of the @font-face CSS rule. Be careful though, even if this is supported by all browsers, not all of them support the same font format. So, you have to be careful to include as many formats as you can. You can use this generator by FontSquirrel: Webfont Generator. This is a "bulletproof" syntax for the @font-face rule, provided by Paul Irish:
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('?'), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.otf") format("opentype"), url("GraublauWeb.svg#grablau") format("svg"); font-weight: normal; font-style: normal; }
Here are some links to a few awesome icon fonts and tools for creating your own (make sure you read the licences before using them in your projects):
May24
Filed under Creative Cloud , Web Design
Adobe CC was announced today at the Max conference is Los Angeles. This marks a shift on how Adobe plans to deliver their products to their customers. Moreover, there have been several enhancements and updates to Adobe's most popular software applications. We're busy at work creating training for theses new products, but in the meantime, you can views some new features by visiting our Adobe CC sneak peek course available on our website.
May06
Filed under CSS3 , Web Design
Improving performance is a constant concern for web designers and developers. Think about how the web has evolved. We stopped using tables, spacer gifs, and inline markup such as the <font> element in favor of CSS, which ultimately reduces page load times. Separating style from layout has all sorts of performance benefits. Next we became more aware of our DNS requests, caching, and the total number of files being sent to the browser. This of course forced us to use CSS sprites, moving many small images out of the HTML and into a single background image.
Now we find ourselves using a another time and space saving technique, Symbol Fonts. Below is a list of free resources for using symbol fonts. Not sure how to implement them? Check out our CSS3 Typography course.
http://kudakurage.com/ligature_symbols/
http://genericons.com/
Brandico
Hydonworks
Mar21
Filed under Fireworks , Mobile Design
With all the different mobile devices available, and wide range of screen resolutions, you have to create several app icons at various sizes. Let's just focus on iOS for simplicity sake. With iOS, as of this writing, having the iPad (retina), iPad, and iPad mini, as well as iPhone, and iPhone retina you have some work to do. Again, we're just dealing with icons here not splash screens or "launch images" as Apple would have it.
So for the icons, you need a wide range of sizes, documented in Apple's Developer portal under the iOS Human Interface Guidelines. We need the following:
And that's if you don't have to deal with a Newsstand cover icon. So there is a bit of a challenge. Sure you can create the icon at the largest possible size, and scale it down for each size that you need, but that has issues. For example, the artwork in the largest icon size could contain more artwork or text, that a smaller icon just can't support. Of course you do need to maintain a consistent look, so the styling changes between the sizes shouldn't be all that dramatic, but tweaks can be made to make each icon size look it's best. I recently went through this while building our latest app, PSD to HTML with Adobe Photoshop CS6.
The Authorized Training Center badge looks nice at the higher resolutions, but had to go in the smaller versions. So what I did is setup a Fireworks file, with spaces for all the required and optional icon sizes. The sizes we need are as follows:
Phew! Now granted some of those sizes are optional, but if you're going to do it, do it. Also remember, when iOS displays your app icon on the Home screen of a device, it automatically adds the following visual effects:
You can download the template here:
ios_app_template.fw.png (85.20 kb)
When using this template you can easily modify the design to be suit the needs of the icon size. In my case, I had to lose text and the Adobe badge, but I kept the main graphic treatment of the scissors. Since Fireworks works nicely with vector graphics, I'm able to preserve nice crisp edges for the artwork.
Finally, you can use web slices to isolate all of the images and export them quickly. Just click on all of the rectangles, not all of the artwork like text and graphics, but the background rectangles. Then, right-click or ctrl+click and choose Insert Rectangular Slice.
Once you do that, you should take the time to name each slice in the Properties panel. This will save you time from having to rename all the files that Fireworks will create.
Once you have all the slices, de-select them all. Then open the Optimize panel under the Window menu and optimize the image to your heart's content. I suggest PNG-24. Once you're happy go to the file menu and choose export. In the export dialog box, make sure that Images Only is selected from the Export menu. Also, de-select the include area without slices.
And when you're done... all your icons will be exported!
To learn more about Fireworks, check out our Fireworks CS6 Fundamentals course.
Jan11