Portfolio and Resource Blog

Where do I start?

2020-01-01T00:00:00.020+08:00

There's a menu (points on top) for you to start navigating around the blog.
Have fun taking a look at my portfolio or downloading the resources. Please visit again. ;)

Notice

22/12/10:

fivepointsapart has moved to pauserepeat.

Updates

20/06/09: 4 pattern sets and 1 texture set added in "Resources".
19/06/09: 1 pattern set added in "Resources".
18/06/09: 8 fonts added in "Resources".
10/12/08: 1 brush set and 6 fonts added in "Resources".
05/12/08: Blog has been started with 2 HTML tutorials in "Tutorials".

Resources: Fonts

2008-12-06T14:04:00.000+08:00

Credit for using the fonts in your artwork, projects, etc. would be great for referencing purposes, but it's not entirely necessary as I did not make them.

Do take note that all the fonts displayed below are for Windows users to download only. They have not been formatted to be used on a Mac.

Instructions on installing your downloaded fonts:

Click on the "Download" link and download the file.
After completing the download, go to the location where you have saved your font(s).
Unzip the folders from their compressed .zip folders.
Select the fonts and copy them, and follow the sets instructions below.

The following steps are for Windows XP users to follow only:

From the "Start" menu select "Control Panel", then select the "Appearance and Themes" category.
Select "Fonts" from the "See Also" panel at the left of your screen.
Paste your copied fonts into the "Fonts" folder.

The following steps are for Windows Vista users to follow only:

From the "Start" menu select "Control Panel", then select the "Appearance and Personalization" category.
Select "Fonts" from the listed categories.
Paste your copied fonts into the "Fonts" folder.

Download | 124.5 KB | 6 files

Download | 110.9 KB | 5 files

Download | 308.8 KB | 1 file

Download | 16.0 KB | 1 file

Download | 144.1 KB | 1 file

Download | 259.5 KB | 8 files

Download | 91.3 KB | 2 files

Download | 11.4 KB | 1 file

Download | 12.5 KB | 1 file

Download | 22.7 KB | 1 file

Resources: Patterns

2008-12-06T14:03:00.003+08:00

Credit for using the patterns in your artwork, projects, etc. would be great for referencing purposes, but it's not entirely necessary as I did not make them.

Download | 278.0 KB | 9 files

Download | 398.0 KB | 9 files

Download | 1.9 MB | 9 files

Download | 399.5 KB | 9 files

Download | 1.2 MB | 9 files

Resources: Textures

2008-12-06T14:02:00.000+08:00

Credit for using the textures in your artwork, projects, etc. is necessary.

Download | 1.2 MB | 8 files

Resources: Brushes

2008-12-06T14:01:00.000+08:00

Do take note that the files which can be downloaded are for Adobe Photoshop CS2 and above users only.
Those who are using older versions of the program or an entirely different one (e.g. Corel Paint Shop Pro, GIMP, Microsoft Paint etc.) should obtain the brushes from the image packs.

Instructions on installing the brushes:

Click on "Download" to download and save the brushes into your computer.
Open Adobe Photoshop CS2/CS3/CS3 Extended, and press "B" on your keyboard.
On the top menu, under the "Brush" category click on the arrow to display the drop-down menu.
Click on the arrow on the right hand corner of the menu and select "Load Brushes...".
Locate the folder where you have saved your downloaded brushes in and click on "Load" to load them into the program.

Hand-drawn Doodles

Download | Image Pack | 108.8 KB | 1 file

Resources

2008-12-06T14:00:00.002+08:00

The resources have been categorised for easier navigation:

Brushes
Textures
Stocks
Scans
Patterns
Fonts

HTML: Tables

2008-12-05T14:02:00.005+08:00

You'll be learning how to code and use tables in this tutorial.
Tables are generally made to organise your data, but sometimes it is a useful tool in creating grid and column layouts.
However, tables usually take a longer time to load than DIV layers, so if you are experienced in coding DIV layers, it is better to use that method to code grid and column layouts instead of using tables to do so.
For this example, we will make a layout with a header and two columns with tables, with a total width of "400 pixels" (400px)".

We'll start by coding the base of the table. The format of a table is slightly more complicated than a DIV layer.
Here's how the code looks like:

<table border="0" cellpadding="0" cellspacing="0" width="400px"> <tr> <td valign="top"> Your content here! </td> </tr> </table>

That will only give you a row of text. The outcome we are aiming for is a header and two columns. We'll code the columns first.

Columns can simply be made by coding two or more "td"s in one single row ("tr").
For this example, we will have an entries section and a sidebar.
The code will look like this:

<table border="0" cellpadding="0" cellspacing="0" width="400px"> <tr> <td valign="top" width="250px"> Your entries here! </td> <td valign="top" width="150px"> Your sidebar here! </td> </tr> </table>

The codes look pretty complicated, but it is actually very simple if you get the hang of it.

We'll start coding the header next. As the header is a row instead of a column, we will have to add an extra "tr" to place the header.
Your code will now look like this:

<table border="0" cellpadding="0" cellspacing="0" width="400px"> <tr> <td valign="top" width="400px"> Your header here! </td> </tr> <tr> <td valign="top" width="250px"> Your entries here! </td> <td valign="top" width="150px"> Your sidebar here! </td> </tr> </table>

But, wait! It looks a little screwed up, doesn't it? The header is the same width as the entries section only.

Thankfully, there is a solution to this problem. By adding a colspan command to the header, it will take up the total width of the number of columns in its value.
For this example, there are only two columns, so your code will look like this:

<table border="0" cellpadding="0" cellspacing="0" width="400px"> <tr> <td colspan="2" valign="top" width="400px"> Your header here! </td> </tr> <tr> <td valign="top" width="250px"> Your entries here! </td> <td valign="top" width="150px"> Your sidebar here! </td> </tr> </table>

We're finished with the layout! You can obviously style the tables as you wish, it's as customisable as a DIV layer. Have fun coding your tables!

HTML: Creating a layout

2008-12-05T14:01:00.003+08:00

You'll be learning how to create a simple layout with DIV layers in this tutorial.
DIV layers are simply layers that contain your information, but can be changed to suit your needs.

A layout always starts with its base, which is its HTML. Here's a brief walkthrough (which you can copy and paste it in your code if you are unsure of the format):

<HTML> <title>This is the title of your webpage which appears on the top of your browser.<title> <head> </head> <body> </body> </html><-- This is where everything in your webpage ends. -->

So, after you've settled in, it's time to work on a simple CSS stylesheet.
A stylesheet defines how all the elements in your webpage look like - the colour of your text, the size of your headers, the emphasis of your links, and much, much more.
For this tutorial, I would like the text to be in "Arial", with a size of "8 points (8pt)", in "light grey (#999999)".
Your stylesheet will look like this:

<style type="text/css"> body { background-color: #ffffff /* #ffffff is actually white */; font-family: Arial; font-size: 8pt; font-weight: normal /* You can change this to "bold" if you want emphasis */; color: #999999; } </style>

Of course, you can customise your stylesheet however you like. This is only an example.
Place your stylesheet in the "head" section!

This is the fun part, where you get your layout done. DIV layers are very flexible - they can be tweaked to have a different position. So, you won't need to read all your information from the edge of the screen anymore!
For this tutorial, I would like my DIV layer to be positioned "200 pixels (200px)" from the top, "150 pixels (150px)" from the left and have a width of "400 pixels (400px)".
But before you do that, do remember that all these elements are to be done on a stylesheet. First, name your DIV layer. For this tutorial, I will name it "Layer1". Do note that the names cannot start with a number.
So, let's get on to customising the DIV layer! Add this in your CSS stylesheet:

#Layer1 { position: absolute /* This must be included to give the DIV layer a specific position! */; top: 200px; left: 150px; width: 400px; }

Of course, you can add a little padding, fix the margins and give it a border if you'd like! Once again, this is an example.

Now it's time to add the layout in your webpage. It must be added in the "body" section of your HTML!
It will look like this:

<div id="Layer1"> This is where your content comes in! You can add in some headers and images - it is completely customisable! I'll leave it to you to do that! :) </div>

Isn't it simple? Now you've got a layout. If you'd like to add a sidebar or something extra, just create a new DIV layer, and customise it as you wish. Hope you have fun, and do enjoy creating your layout!

HTML

2008-12-05T14:00:00.000+08:00

This is where all the tutorials regarding HTML can be found:

Tutorials

2008-12-05T11:40:00.012+08:00

The tutorials have been categorised for easier navigation:

HTML
CSS
JavaScript
Adobe PhotoShop