1. We’ve going to use the built-in version of the Apache web server. To start/stop the web server, go to System Preferences in OS X and select Sharing > Web Sharing.
2. Move the Apache document root to a more convenient location (my personal ‘Sites’ directory): open /etc/apache2/httpd.conf and change the ‘DocumentRoot’ variable in 2 places (note: the PHP module should be left commented out, as it is by default). Next enable .htaccess by editing /etc/apache2/users/<username>/<username>.conf and specifying Options All and AllowOverride All. Restart Apache.
3. Download and install a more recent version of PHP with more capability than the standard Apple one (GD library, Mcrypt, etc). This installs PHP into the directory /usr/local/php5.
4. Download and install a version of MySQL server that correlates with that version of PHP (so the PHP MySQL library matches). MySQL is installed into /usr/local/mysql-5.0.77-osx10.5-x86 with a symbolic link from /usr/local/mysql.
5. Create or edit ~/.bash_login and add this line to the end: export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:$PATH". This makes it more convenient to interact with MySQL from the command line, as well as pointing our system to our custom software installations in /usr/local.
6. To start MySQL from the command line type sudo mysqld_safe (To stop MySQL type mysqladmin -u root -p shutdown)
7. Set password for MySQL root user: mysqladmin  -u root -p 'mypassword' (Note that the MySQL user is different from the Unix user that the MySQL is running under – usually _mysql).
8. To check current users in MySQL, use: SELECT Host, User, Password FROM mysql.user;. Set passwords for all as necessary. Alternatively, to limit access to your personal machine only, create the file /etc/my.cnf as detailed on this page (‘A Note About Security’).
9. Set passwords for other users/hosts as required – see instructions half way down this page. Create an ‘admin’ user for MySQL so we’re not using root in the various config files etc. Will need to grant privileges.
10. Download and install PHPMyAdmin. Unzip and rename directory, then place in web document root. Make a file called config.inc.php to put in your blowfish password (any random phrase will do). You can copy libraries/config.default.php if you like.
11. Make sure you’ve installed Xcode from the OSX install disk.
12. Add in MySQL C bindings for Ruby, to make Rails faster – instructions near the bottom of this page (you will need to have Xcode Tools installed in OS X to do this – use your OS X installation disk if needed)
13. Follow the instructions on HiveLogic for installing Ruby and Ruby on Rails into /usr/local.

The first thing we want to do is visit the user’s page on YouTube to grab the feed URL for that person. It might be your own account, of course, but there’s no need to log in, and feeds are publically available from anyone’s account. Once on a user’s page, your browser should display an RSS icon: click on it and copy the URL of the feed. It will look something like this:

http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

In this case I’ve grabbed the feed from a channel.

Next open up the WordPress template file for the page you want to display the content on. It might be ’sidebar.php’, for example. Wherever you want the videos to appear, you need to call the fetch_rss() function as described in the WordPress documentation.

<?php
// Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile');
$maxitems = 3; //set number of items to display
$items = array_slice($rss->items, 0, $maxitems);
?>


In order to embed a YouTube Flash movie we could use the nested objects method, so we have valid HTML, and include some appropriate alternative content (in case the Flash fails to load for some reason). To set this up for each item, all we need from the feed is the ID of the video.

If we examine the RSS feed itself, we find that the video ID is contained in the final part of the ‘link’ element. To extract it, we’ll need to use a tiny bit of PHP to break up the URL string.

Of course we need to repeat this for each item in the feed, so we set up a loop like this:


<ul>
<?php if (empty($items)) echo '<li>No items</li>';
else foreach ( $items as $item ) : ?>
<div>
<?php
$youtubeid = strchr($item['link'],'='); //split off the final bit of the URL beginning with '='
$youtubeid = substr($youtubeid,1); //remove that equals sign to get the video ID
//Now embed the flash:
?>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" width="320" height="265">
<!--<![endif]-->
<p><a href="http://www.youtube.com/v/<?php echo $youtubeid ?>">View movie&raquo;</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</li>
<?php endforeach; ?>
</ul>

This method is pretty easy to adapt for any type of RSS feed you might want to use: Vimeo, Slideshare, Twitter, etc. Of course there are loads of WordPress plugins that can help you embed this stuff, but sometimes a plugin doesn’t give you exactly the output you need, and it’s helpful to be able to parse the feed yourself.

Snap to pixel

In Illustrator CS1 and older, getting objects to ‘snap to pixel’ properly was difficult. Even when you set your units to “pixels”, positions on the canvas are very sensitive and tend to end up as fractions of a pixel. This introduces anti-aliasing artifacts when exporting the image so that your web graphics don’t look very ‘crisp’.

To get a ‘snap to pixel’ effect in these older versions of Illustrator, first set up your grid so that you have a grid line every 128px with 128 subdivisions. That in effect gives you a pixel grid, but with a usable number of lines visible. Then turn on “snap to grid” under the “View” menu. This keeps all your movements and transformations locked in to the nearest pixel, and keeps your graphics nice and crisp. (Thanks to Hennning for first showing me this technique).

As of CS2, Adobe introduced a specific ‘snap to pixel’ option, which you can see under the View menu after you select “Pixel preview”. This will keep all your objects snapped to the nearest pixel.

Clean outlines

By default, a stroke line around an object will follow the centre of the outline. This means that a stroke line of 1 pixel will have 0.5 pixels either side of that line, and we’ll end up with anti-aliasing artifacts. To solve this, always select “Align stroke to outside” or “Align stroke to inside” from the Stroke options window.

Unfortunately, even when you do this, and have “snap to pixel” turned on, Illustrator will randomly introduce an extra 1px anti-alias shade below the top edge of a rectangle. This is one of those annoying Illustrator bugs that (almost) makes you wish you’d just stuck with using Photoshop. This bug seems to occur in both CS3 an CS4 versions. The only way around this that I know of, if it is absolutely critical, is to draw the stroke separately as very thin rectangles – see below. [Update: setting the stroke weight to 0.999px solves this problem. Thanks to Benjamin McDowell for posting this in the comments.]

Drawing lines

In theory, the centre of a line lies between two pixels, and hence we get anti-aliasing problems when drawing lines with “snap to pixel” selected. Rather than nudging the centre measurement of a line by 0.5 pixels (which will give you a clean line), I prefer to draw lines as very thin rectangles. For example, a 1px horizontal line can be made up of a 1px high rectangle. In a similar way, controllable shading can be achieved by creating thin rectangles filled with a black to white gradient, setting the blending mode to “multiply”, and then reducing the opacity as required.

Use layers

Unlike Photoshop, by default Illustrator allows any element on the canvas to be selected and moved/modified with a single click. This makes designing more fluid and quicker – resizing an object requires less clicks. It also makes it important to set up a few different layers, so that you can lock some layers while you work on others. I tend to place some example browser chrome on a top layer (to help get an ‘in-context’ preview of the design), a layout grid on a second layer, main content on a third layer, and structural elements like boxes or columns on a ‘ground’ layer. But depending on the complexity of the design, you may want to set up more layers – don’t forget to name them to help you keep track.

Use character and paragraph styles

Another area where Illustrator scores is its ability to define character and paragraph styles. Say you have a full web page design with a fair amount of content: text may appear in different columns, break-out boxes and sidebars. Now say you want to try tweaking the link colour, or changing the font of the headings. Instead of selecting each instance of link text in turn and making the colour adjustment, you can just make a global change to your “link” character style. It takes a little longer to set up, but you can end up saving time, especially if you’re the kind of perfectionist designer who likes to keep fiddling with things.

Working with bitmaps

For some things, like editing photos, you’re going to have to use Photoshop. It’s often worth ‘placing’ PSD files into Illustrator so that transparency works properly. Placing an image (as opposed to just copying and pasting via the clipboard) also means that Illustrator can automatically update the image when you make changes to the file within Photoshop, which can be handy. Note that you can do some quick ‘cropping’ work in Illustrator by making a ‘Clipping Mask’.

Getting help

There are lots of decent books and online tutorials around, although few of them focus on using Illustrator for web work. I’ve always preferred to teach myself, using the Adobe help files. A good place to go if you get really stuck is the official Adobe support forum. There are some knowledgeable power users there, although don’t expect an answer right away. Illustrator does also have the odd strange bug every now and again, so if you really can’t work out what’s going on, it might not be your fault! 99% of the time though, the answer is there somewhere in the help files.

This kind of texture is fairly popular at the moment. You can use it on buttons, navigation bars, and so on. I’ve adapted the technique so that you have a single Group of objects and can easily change the colour of the button with a single click. No need to mess around with gradient sliders

First, draw a rectangle and apply a Round Corner effect. Then apply an Inner Glow effect (Effects > Stylize > Inner Glow). Set the blend mode to Screen and the colour to white. Then select center. Alter the Opacity and Radius settings until you get a fairly subtle glow effect that does not quite reach the edges of the rectangle:

Next, copy this shape and paste in front. Now remove the inner glow effect from the uppermost shape. Using the Scissors tool, carefully click the path of the new shape half-way each vertical side. This will divide it into 2 halves. Use the Direct Selection Tool to select the top half and delete it:

Lastly, group the 2 shapes before adding your text. Because the Inner Glow effect has a blending mode of Screen, you can change the colour of your button very quickly, just by applying a new fill colour to the group. You might need to adjust the opacity of the Inner Glow if you shift from a dark to a light colour.