Videos in category Graphics

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let's do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!

This screencast describes a way to ‘funkify’ some text using Inkscape. by Richard Querin

Many sites do not use any fancy Content Managment System (CMS) to generate their pages, they are just just good ol' static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a homepage, about page, and contact page. Each of these pages has different main content, but much of it stays exactly the same, like the header, navigation, and footer. Th...

This tutorial illustrates the use of manual text kerning in Inkscape v0.45. by heathenx

Summary In this InfoQ interview, Erik Saltwell talks about Expression Web and the role of professional designers in the application development process. Erik shares insights into the development process his team utilizes, trends in the web development world and more. Bio Erik is the Development Manager of Expression Web where he manages, and generally randomizes, the developers working there. H...

Creating a thumbtacked polaroid look using Inkscape. by Richard Querin

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True "fixed width" sites will be a thing of the past when the modern browsers of today take hold in greater number...

This tutorial illustrates the steps needed to create a reminder note with Scotch tape in Inkscape v0.45. by heathenx

Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start to finish. Since Internet Explorer 6 and under do not support alpha transparency in PNG's, this screencase also covers how to create a warning message that will display only in those browsers.

In this multi-part series we will build a small and simple guest book application. In this final video, we make use of the htmlspecialchars() function to remove HTML formatting from our messages, and also add just a bit of CSS to make the comments easier on the eyes.