You get back either a string containing an error or a hash that contains the results for each command, where the command is the key.

In this tutorial I will show you how to create the image above, together with the puffy clouds, paper airplanes and stars and whistles. Note that the final effect will be better if you use a pen tablet. So, let’s get started.

Open a new document

1. Choose File>New…
2. Type in the following Width and Height dimensions and press OK.

Draw the gradient

1. Select the Gradient Tool (Shortcut G) .
2. Select Radial Gradient  from the upper left Gradient Options.
3. Click the gradient in order to open the gradient editor. Set the following colors in the Gradient Editor:

RGB (111, 223, 235) for the Dark Blue

RGB (13,53,108) for the Light Blue

Then move the sliders as shown in the picture. Leave everything else as shown.

4. Draw the gradient as shown in the picture, with the centered of the circle outside of the working area, for a nice, delicate effect.

Create the Rays of Light

1. Select the Gradient Tool (Shortcut G) .
2. Select Angle Gradient from the upper left Gradient Options.
3. Click the gradient in order to open the gradient editor. Select Noise as gradient type and click the “Randomize” button to get a balanced gradient (any hue does the trick). Try to match the gradient below as closely as possible.

4. Create a new layer on top of the one with the radial gradient.

5. Now draw the gradient so as to look similar to the one below:

6. Select Image>Adjustments>Desaturate  (Shortcut: Shift+Ctrl+U)

7. Choose the Soft Light blending mode for the Light layer. Use Overlay mode for a stronger effect.

8. Apply Gaussian Blur for an even more delicate effect.

Creating the Clouds

1. Select the Brush Tool (shortcut B)
2. Choose the Brush Tip Shape to be . Use a spacing of 17% and leave the Opacity and Flow at 100%
3. Open the Brushes Palette (Window>Brushes or Shortcut: F5)
4. Tick the Scattering checkbox. If you have a pen tablet, let the scattering and count jitter be controlled by the pen pressure. Otherwise choose some values that best suit your intended effect.
5. Create new layers for the clouds (as many as you wish), then draw the clouds shape with the color RGB (111, 223, 235) or darker. Using a pen tablet would guarantee a unique shape and feel. The secret here is to use small brush sizes (1 and 2). It takes more time to create the composition this way, but it will give the composition that intended sketchy feeling, with a lot of lines composing the cloud shape.

NOTE: for a more dramatic effect you could also use a texture.

Tick the Texture checkbox and the click on the word Texture to configure the options. The use texture is “Wax Crayon on Charcoal Paper” , which can be found in the Artist Surfaces Library which comes with Adobe Photoshop. (To access it click the drop-down arrow for Contents, then the dropdown arrow to the top right and choose Artist Surfaces.)

Choose the Brush Tip Shape to be Sampled Tip 58. Use a spacing of 17% and leave the Opacity and Flow at 100%.

6. Experiment with the opacity of the cloud layers until you are satisfied with the effect

7. Create a new layer under the cloud layers, and call it White. Using a solid brush this time, paint under the clouds with white, wherever you want to highlight them. Crosshatch the clouds with the pen if you want to dim out the whiteness.

Creating the Airplanes

1. Select the line tool (Shortcut U). Give it a weight of 2 px.
2. Use the line tool to create the following shape.
3. Once satisfied with the shape, merge down the line layers.
4. Create a new layer under the airplane layer. Paint it with white, with the brush tool.
5. Convert the Airplane Layer and the White layer into a smart object.
6. Copy the smart object layer 6 times. Rotate and scale each airplane until the image looks like below

Final touches: The stars

1. Create a new layer. Call it Stars.
2. Using the same brush as for the clouds, start drawing stars across the canvas, wherever you think the composition is not consistent enough.

Setup IPTables

Your server will initially have all ports blocked so you need to edit /etc/iptables and add

-A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 443 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 10000 -j ACCEPT

Setup MySQL

aptitude update
aptitude upgrade
aptitude dist-upgrade
shutdown -r now
aptitude install build-essential -y
aptitude install mysql-server mysql-client libmysqlclient15-dev libmysql-ruby -y
mysqladmin -u root password yourpassword

Setup Ruby

aptitude install ruby1.8-dev ruby1.8 ri1.8 rdoc1.8 irb1.8 libreadline-ruby1.8 libruby1.8 libopenssl-ruby -y
ruby -v
ln -s /usr/bin/ruby1.8 /usr/local/bin/ruby
ln -s /usr/bin/ri1.8 /usr/local/bin/ri
ln -s /usr/bin/rdoc1.8 /usr/local/bin/rdoc
ln -s /usr/bin/irb1.8 /usr/local/bin/irb
mkdir sources
cd sources/
wget http://rubyforge.org/frs/download.php/38646/rubygems-1.2.0.tgz
tar xzvf rubygems-1.2.0.tgz
cd  rubygems-1.2.0
ruby setup.rb
ln -s /usr/bin/gem1.8 /usr/bin/gem
gem -v
gem update
aptitude install imagemagick librmagick-ruby1.8 librmagick-ruby-doc libfreetype6-dev xml-core -y

Update RubyGems to 1.3+

gem install rubygems-update -v=1.3.4
update_rubygems

Install Rails

bc. gem install rails

Apache

aptitude install apache2 apache2-mpm-prefork apache2-utils libexpat1 ssl-cert

Phusion Passenger

gem install passenger
passenger-install-apache2-module
apt-get install apache2-prefork-dev
apt-get install libapr1-dev
passenger-install-apache2-module

Add the following to /etc/apache2/httpd.conf

LoadModule passenger_module /usr/lib/ruby/gems/1.8/gems/passenger-2.2.5/ext/apache2/mod_passenger.so
PassengerRoot /usr/lib/ruby/gems/1.8/gems/passenger-2.2.5
PassengerRuby /usr/bin/ruby1.8

Configure a site into Apache

Create a file in /etc/apache2/sites-available such as

<VirtualHost *>
ServerName serverpulsehq.com
ServerAlias www.serverpulsehq.com
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www
RewriteRule (.*) http://www.%{HTTP_HOST}/$1 [L,R=301]
DocumentRoot /home/serverpulsehq.com/application/public
RailsEnv    development
</VirtualHost>

To switch rewrite on and enable a site

a2ensite serverpulsehq.com
a2enmod reload

Webmin

apt-get install perl libnet-ssleay-perl openssl libauthen-pam-perl libpam-runtime libio-pty-perl libmd5-perl
wget http://prdownloads.sourceforge.net/webadmin/webmin_1.470_all.deb
dpkg --install webmin_1.470_all.deb

Webmin via proxy

Need to be able to switch off SSL for webmin this is done via the UI.

Enable some apache modules

a2enmod proxy
a2enmod proxy_http

Add the following directives to the Apache configuration file: /etc/apache2/httpd.conf

ProxyRequests Off
ProxyPreserveHost On
<Proxy *>
Allow from all
</Proxy>
ProxyPass /webmin/ http://localhost:10000/
ProxyPassReverse /webmin/ http://localhost:10000/

Add the following lines to /etc/webmin/config

webprefix=/webmin
webprefixnoredir=1
referer=apachehost

Switch off SSL

Edit /etc/webmin/miniserv.conf and disable ssl redirect ssl_redirect=0 and ssl=0

/etc/init.d/apache2 reload

Astrails-safe (For backups to S3)

Create the astrails conf file in /root.

apt-get install libxml2-dev
apt-get install libxslt-dev

gem install aws-s3
gem install archive-tar-minitar
gem install nokogiri
gem install hoe
gem install rcov
gem install net-sftp
gem install astrails-safe --source http://gems.github.com/

PHP5

aptitude install libapache2-mod-php5 php5 php5-common php5-curl php5-dev php5-gd php5-imagick php5-mcrypt php5-memcache php5-mhash php5-mysql php5-pspell php5-snmp php5-sqlite php5-xmlrpc php5-xsl php5-cli

Install Git

aptitude install build-essential libcurl3-gnutls-dev gettext
wget http://kernel.org/pub/software/scm/git/git-1.6.5.1.tar.gz
tar xvzf git-1.6.5.1.tar.gz
cd git-1.6.5.1
./configure
make prefix=/usr
make install prefix=/usr

Zip and Unzip

apt-get install zip
apt-get install unzip

Configure Email

aptitude install exim4
/etc/init.d/exim4 restart
dpkg-reconfigure exim4-config

Use the following options

No
internet site; mail is sent and received directly using SMTP
OK
Take all the default

I recently purchased Status2k on a sitepoint auction. It’s the first time I’ve ever bought a site and it’s definately a learning experience. After my winning bid was excepted the sale proceeded very rapidly (a lot quicker than I was expecting) over msn chat.

Getting some reassurance

Before sending $10,000 to someone I’d never met I wanted to get a feel for who the seller was and that they were genuine. This explains the first part of the interaction.

Ian: Hi.
Vlad: Hello Ian
Ian: So how do you think we should do this ?
Vlad: Well i did a lot of similar deals and it's pretty easy
Vlad: You pay us 50% we transfer the files
Vlad: Pay the other 50% and we transfer the domain
Vlad: So this way you are protected and we are too
Ian: OK, that seems fair...
Vlad: Great
...
Ian: I would also like to get contact details so that I know where
my money is
going i.e. a telephone no.
Vlad: You will pay via paypal right ?
Ian: If I can, I don't know what there upper limit is.
Vlad: Doesn't have for me , but depends from account to account yeah
Ian: I'll take a look, can you provide contact details ?
Vlad: what kind of details you need ?
Ian: I'll need your address and a phone number, if that's ok ?
Vlad: I'm not sure i d enjoy giving out the personal stuff online
Ian: I can't send that kind of money without knowing exactly
who it's going too.
Vlad: I understand
Vlad: But take it like this
Vlad: How could you verify
Vlad: If i wanted to scam you, I'd get a prepaid card, invent an address and
how could you verify if it's legit or not
...
Ian: Let me have a think about it, not feeling comfortable sending the money.
...
Vlad: Would you like to see my trader profile
...
Ian: It would be good to see trader profiles, yes. Sorry Vlad
but I just need to be sure.
Vlad: I perfectly understand you Ian .
...
Vlad: here hxxp://
Vlad: one of them
Ian: I'm feeling a bit better about this now, a good profile.
Vlad: Thank you
Vlad: I'm a member of hxxp:// too
Vlad: You can type in my email to lookup for my profile
Vlad: Or at
...
Vlad: Feeling more comfortable now Ian ?
Ian: Definately, shall I make paypal payment to <removed>

Sending the first half of the payment and receiving the files

As a buyer this is a difficult part as you’re just receiving a bunch of files without really knowing if they’re going to work when you get them. However Vlad offers to keep the site hosted whilst I get set up, so the sale proceeds.

Vlad: No
Vlad: My paypal is <removed>
Vlad: Yeah only thing is we have to pay fees
Vlad: Usually buyer pays fees
Vlad: but we can do 50/50 i guess
...
Ian: OK, I'll pay fees this time you next ?
Vlad: Yeah
Vlad: Let me know when you paid i'll transfer you the files and
then the domain
Ian: It'll take me a while to get the site up and running is that ok ?
Vlad: Well i'll give you everything, you can take your time
we'll still host it
Ian: payment has been sent.
...
Vlad: Great
Vlad: Okay
Vlad: You have a server with cPanel ?
Ian: I use webmin, put I'm pretty techy so getting it
setup shouldn't be a problem.
Vlad: Okay
Vlad: So if i provide cPanel logins and ftp you can handle ?
Ian: I think so yes.
Ian: What's the url for cpanel ?
...
Ian: OK, how do domains get sent ?
Vlad: Create an domainsite account
Ian: creating it now.
Ian: OK, account is created.
...
Vlad: Uploading now the archieve
Ian: Thanks.
Vlad: Meanwhile get your Account Code from your domainsite account
Ian: <domain site account code removed>
Vlad: Sweet
Ian: How's it going ?
Vlad: it's done
...
Ian: OK, I'll send the money now.
Vlad: Nice
Ian: Sent.
Vlad: Received
Vlad: Domain has been sent
Ian: Cool, will it just appear, let me check.
Vlad: Yah
Ian: Will it still point to the same ip ?
...
Ian: Right.
Ian: Lot's for me to do.
Vlad: Yep
Ian: I hope not to bother you too much in the next couple of days.
Vlad: It's okay
Vlad: I don't mind helping
...

And the good news

In part 2 I’ll write up more of my experiences of transferring the site to another server, email problems, dns problems and a few other suprises I wasn’t expecting. However the screenshot below shows the sales coming in, a huge sigh of relief.

Urban Commuting

To get to work a cycle along the Regents Canal. There’s a lot of graffit most of it pretty unsightly, but I like some of the new Banksy inspired art that’s appearing. I’ve collected a few examples and put them into a regents canal flickr set.

To add gravatar functionality to PunBB you need to edit your viewtopic.php and look for the following line.

And replace it with..

This will automatically slect the graviatar based on the users email address.

Based on my SEO Wordpress Sandbox Theme I’ve created a minimal gray theme.

Features

1. Supports widgets
2. Has an embedded digg this button
3. Includes gravatar support

Download

Below are the old style buttons.

And next are the new buttons.

Basically all I’m doing is adding a relevant icon against the link and pushing the text a little more to the left.

The HTML Markup

The HTML markup is similar to oscars with the addition of an image tag pointing to a famfamfam icon.

The CSS Styling

This is directly copied over from Oscar’s implementation with a couple of changes.

Sitepoint

As far as I know catfish pop-ups were first implemented on Sitepoint and detailed in The Catfish—Part 1 and Set Us Up The Catfish—Part 2: SlideMe articles.

My Implementation

I’ve enhanced (re-written) the implementation to use an iframe so instead of embedding the promotion within your main content (The Sitepoint implementation uses a div at the bottom of the markup), you can place the promotion code in a separate HTML file.

An iframe will also help the page load faster and the javascript is light at <5kb (<3kb for non IE6) not including the size of your iframe content.

The iframe will allow you to use forms within your promotion which will act independently of your main content; your promotion could be on another site altogether.

Usage

The download (zip) contains the examples from above and implementing your own catfish should be fairly straight forward. I’ve tried to make the amount of markup you need to add to a page as lightweight as possible but the minimum I’ve been able to get it down to is the code example below. IE6 does not support the CSS style position:fixed, so a workaround had to be introduced.

The Markup

Place the following between your <head> tags.

There’s some conditional code here to get it to work in IE also note the use of the script defer which is a way of getting IE to delay script execution until the DOM has formed.

Calling catfish()

You can call catfish and configure all the options (from the 4th line in the markup above).

or, allow the script to default the scrolling speed and delay for you.

Closing options

You have two options when allowing the user to close the catfish temporary or permanent, temporary will re-open the catfish when the user refreshes the page or goes to another page with a catfish.

Permanent will set a cookie and not re-open the catfish for that user (unless they clean out their cookies).

Temporary close markup for your catfish :-

Permanent close markup :-

And Finally

I’ve only been able to test the implementation on IE6 and Firefox, if someone could let me know how well it runs on Safari and Opera that would be great.

If you do implement some catfish pop-ups please let me know so I can add a few more examples to this article.

Add the following to your application_helper.rb.

To show all messages place this code in your view (rhtml).

Also here’s some CSS to style the messages.