Newest Tutorials

Outdoors Textured Outdoors Website Design
In part one of this website build project we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.

Photoshop Dexter Poster Design
In this tutorial we’ll learn how to Design a Poster for the awesome show Dexter! 1. Open a new document that’s 600×800 pixels. Get the dexter image and open it up in Photoshop.

Trading Game Cards Tutorial
Trading Game Cards, they come in many different themes. But one thing that is common amongst them is there popularity! From Pokemon cards through to Football cards, you would be sure there will be collectors. So this rightly has gained itself its very own Photoshop tutorial. This a Photoshop tutorial is aimed at those who are beginner-mid skill level, though this should not be your first time using Photoshop and shows that with the right elements, you are able to make something that is easily recognisable.

The most convenient vector triangulator from Concept Art
Until today I used a couple of vector triangulators and can assure you that Image Triangulator App from Concept Art is the most convenient from all. You have an opportunity to work in three active modes. You can add points to an original image, work with mesh and with colored polygons. As a result, you export a pdf file which could be easily edited in Adobe Illustrator. Read about how to get the excellent result in polygonal art style in minimal time period.

Create realistic waterdrops
Photoshop create realistic waterdrops. How to create realistic waterdrops in adobe photoshop using layers and brush effect.

How to create a metal plate effect
In this video tutorial we go through the steps needed to create a realistic metal plate from scratch using adobe photoshop. The concepts in this video tutorial are aplicable to all the diferent versions of adobe photoshop, including cs2, cs3 and cs4.

A Complete Guide to Grid
The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren't really designed for page layout.

Device adaptation
As a web (or Windows Store app using JavaScript) developer, you are faced with a dilemma: Code your site to work with as many devices, sizes, and resolutions as possible; or risk alienating users by potentially allowing your content to be either clipped (in fixed layouts) or jumbled confusingly (in fluid layouts). The @-ms-viewport rule, in combination with Cascading Style Sheets (CSS) Media Queries, attempts to solve this dilemma by enabling web developers and developers of Windows Store apps using JavaScript for Windows 8 to optimize the layout of sites and apps for different devices with minimal effort.

Windows Phone 8 Viewport Fix
I wanted to post the code I’ll be using to get responsive layouts to render properly in IE10 for both Snap Mode and Windows Phone 8. Tim Kadlec and Matt Stow have documented & championed the cause better than I ever could, so read their posts if you want the full story.

15+ techniques and tools for cross browser CSS coding
Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coder life easier, here is 15+ tools and techniques for crossbrowser CSS development. Of course, efficient crossbrowser CSS development starts with techniques and good practices. In the first part of the article, I’ll show you X techniques that will make your crossbrowser development easier.

A simple guide to responsive typography
The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don’t talk about is typography. And yet, for the majority of websites the text, the content, is the most important element. Granted, for sites where images or video are the primary content, responsive type is a bit less important, but it still shouldn’t be overlooked.

Fluid typography for responsive websites
Responsive design is a very popular topic nowadays, and currently most designers are adopting this new concept in web design. A responsive layout includes both flexible grids and images able to adapt to the screen’s width. But what about typography? Shouldn’t font size automatically adjust to different devices and resolutions too? This article aims to show how to achieve fluid type, making your site even more flexible.

Techniques for responsive typography
When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive. One of the most important aspects of responsive web design is responsive typography. When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. From choosing a font type and color, to achieving legible font sizes, line heights, and line lengths on different screen sizes, there are several ways to go about achieving fluid and truly responsive text on the web.

Viewport Sized Typography
There is a such thing as a comfortable line length for reading text on screens. I don't want to kick a hornet's nest, but let's say its around 80 characters. These units allow you to get it feeling perfect and then have that experience scale to any size screen.

A Beginner's Guide to HTTP Cache Headers
This article offers an exploration into HTTP caching headers and associated CDN behaviour. If you're looking to understand how caching headers fit into the modern web, or are just curious about what everyone is talking about around you, this resource is for you. Simply put, caching allows you to store your web assets on remote points along the way to your visitors’ browsers. Of course the browser itself also maintains an aggressive cache, which keeps clients from having to continually ask your server for a resource each time it comes up.

Best Practices for Using the Vary Header
Vary is one of the most powerful HTTP response headers. Used correctly, it can do wonderful things. Unfortunately, this header is frequently used incorrectly, which can lead to abysmal hit ratios. Worse still, if it's not used when it should be, the wrong content could be delivered. Normally, when a request comes into one of Fastly's caches, only two parts of the request are used to find an object in the cache: the path (and query string, if present), and the Host header.

Responsive Web Design · An A List Apart Article
Working on the web, however, is a wholly different matter. Our work is defined by its transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.

Responsive typography with chained media queries
In the first two articles of this series, we established a technical foundation for a scalable typographic system. I'll briefly recap: if you're designing websites, your first order of business is to stop using pixels and train yourself to think and code using relative units, in particular REMs. With pixels out of the picture, you can define meaningful relationships between the size of your type and other design elements using a modular scale.

Create meaningful proportions in your design using SASS
Create meaningful proportions in your design using SASS. In our previous article, we explored the use of REMs and media queries to implement a scalable typographic foundation using fluid typography. With the techniques of scalable type under our belt, we're going to take a look at an open source sass design tool that takes the guesswork out of setting beautiful sizes for your design elements — Modular Scale.

Responsive typography with REMs
How to build a scalable typographic foundation in three steps. To date, the practice of responsive web design has been centered on two key techniques. Unfortunately, with only these two techniques, responsive sites struggle to maintain the integrity of their design the further you adjust your screen resolution from a set of defined width breakpoints.