Adobe Photoshop CS6 Extended is packed with an all-new 3D interface and tons of new features. In this tutorial, Ekaterina Chepikova will explain how to use those new features to create an autumn-themed 3D text effect. Let’s get started!
Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. Of course, when designers get a taste of high-resolution displays, they’re hooked. And they all want their websites (and the websites of their clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes out.
The percentage of all web usage that comes from smartphones and other mobile devices is growing, and it won’t be long before mobile internet users overtake desktop and laptop users in terms of web traffic. So it’s a cardinal sin to ignore mobile users when you’re developing a website. One of the most important things you can do to make a website mobile-friendly is to test it on multiple smartphone and tablet platforms. Luckily, mobile emulators make it easy to do this.
It goes without saying that SVG isn’t as widely used as many people in the web development community might believe it should be. Setting the debate aside, in this tutorial, Sue Smith will demonstrate how to use inline SVGs, covering a range of techniques and exploring the interaction between web page and graphic. When used in conjunction with other emerging standards in HTML5, JavaScript and CSS3, inline SVGs can significantly add to the user experience.
Since the release of iPhone 4 and the iPad 3, Apple has doubled the resolution of the displays, which are now 640 x 960 pixels (iPhone 4 and 4s), 1536 x 2048 pixels (iPad 3), and 640 x 1136 pixels (iPhone 5). To keep a good-looking user interface for both the old as well as the Retina resolution, Apple decided not to resize all graphics or make use of scalable image formats (such as SVG), but instead it now requires two sets of graphics for each device. When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in.
In this tutorial Mary Lou is going to experiment with perspective and use a radio input trick to create a fun css-only timeline-like structure. The idea is to show a teaser of an item and when clicking on the associated radio input, the content will expand and rotate in 3D, giving some depth to the whole thing. She’ll be using CSS 3D transform, transitions and sibling selectors. Note that the 3D effect looks best in WebKit browsers. Unfortunately, Firefox does not play along very nicely.
Cinemagraphs are great fun - a surprising blend between a static photograph and a video. They engage website visitors explicitly because they initially appear to be a regular photograph, but then they catch the viewer by surprise by moving subtly, and for a moment your visitor is fully engaged with your page. First and foremost, cinemagraphs use the animated GIF format to capture the frames within the animation. This is a simple, portable and flexible way to create an animation, but as GIFs are strictly 8bit, the palette that can be reproduced is extremely limited.
Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is made thinner or desaturated so that the color is diluted and what is behind it shows through. The effect can be quite stunning when executed properly – creating a great place for text or as a way to bring focus to a certain part of an image. Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.
Maybe you’re one of those who haven’t updated their Twitter headers yet, or maybe you’ve heard it already but you’re not just into creating your own design due to a lack of inspiration? Well, that’s not a problem at all now, this tutorial is for you. Michael John Burns is going to show you how to create your own, and showcase some Twitter headers for your inspiration.