Pixl Design

Relaunch Date

Nathan Chapman — Sun, 23 Nov 2008 02:37:17 +0000

When is the relaunch going live?

Now.

That’s right. Head on over.

Relaunch Teaser #8

Nathan Chapman — Thu, 20 Nov 2008 02:37:31 +0000

What is this?

Relaunch Teaser #7

Nathan Chapman — Wed, 19 Nov 2008 02:37:39 +0000

What is This?

Relaunch Teaser #6

Nathan Chapman — Tue, 18 Nov 2008 02:37:52 +0000

What is this?

Relaunch Teaser #5

Nathan Chapman — Mon, 17 Nov 2008 03:37:50 +0000

Visual Effects

My skills in After Effects, video compositing and editing.

Relaunch Teaser #4

Nathan Chapman — Sun, 16 Nov 2008 03:37:06 +0000

Dark.

…

Surely that’s self-explanatory? The site is dark.

Relaunch Teaser #3

Nathan Chapman — Sat, 15 Nov 2008 03:37:49 +0000

Photographs.

It’ll be showing off my photography skills.

Relaunch Teaser #2

Nathan Chapman — Fri, 14 Nov 2008 03:37:49 +0000

Big.

It’s going to be big.

Relaunch Teaser #1

Nathan Chapman — Thu, 13 Nov 2008 05:22:48 +0000

Portfolio

It’s so obviously going to be a portfolio.

To Be Launched

Nathan Chapman — Wed, 12 Nov 2008 06:03:11 +0000

Pixl Design is getting a re-branding!
No longer will it be known as what it is!
It will be called… well, that’s a secret. I can’t tell you everything!
So!
Can you tell that I am excited? !!
Well!
It’s now going to focus on all my creative (genius?) !
Maybe I should stop using exclamation marks now!
Maybe!
We will launch soon!
I love you all, thanks for sticking with me!

Stop Motion: A Film?

Nathan Chapman — Fri, 07 Nov 2008 03:37:19 +0000

I’ve started making a stop-motion film. I’ll keep you posted on what happens. As for the plot? Well, that would be telling, wouldn’t it?

When it comes to Images, lose the “e”

Nathan Chapman — Sat, 01 Nov 2008 03:37:31 +0000

Every website needs images. And I’m not referring to the graphics that make up the design of the site, oh no. I’m talking about those in your posts, in your news. These images that have value outside the context of your blog, why not host them somewhere that the people of the internet can see, instead of in some hidden wp-content directory on your server.

I’m talking about Flickr.

Why?

Flickr isn’t really a social networking tool, but it has a huge amount of followers, and especially if you also take photographs (as I do), you’ll be found really quickly. They find you on Flickr, and people will follow your trail back to your website - especially if you place a link to your site in the description of the images.

Flickr is also fun. Honest.

No, really. It is. Flickr is a joy to be on, and it really helps you to be creative. Don’t believe me? This design that you see here was influenced by a photo I saw on Flickr of grass (wheat grass, I think it was…) with some of the dirt it was planted in included.

How?

Head over to Flickr, and sign up. Unfortunately, you have to get a Yahoo account, but as long as you set the default email to your proper email, you’ll be fine and never need it again.

From there, upload, add your link in the description. Easy!

So there you go. One of the easiest (oh, and free!) ways to get some exposure (hehe… bad pun :D) AND host your images. Do you think that you’ve got a better way? Tell us about it!

An Open Letter.

Nathan Chapman — Sat, 25 Oct 2008 06:11:30 +0000

w00t new theme!

Yea. That pretty much says it all.

But, this means that Pixl is rebranded, and ready to run again!

I’ll be posting on Fridays. At least. Hope you keep reading me.

from Nathan

Film Competition Poster

Nathan Chapman — Sat, 04 Oct 2008 03:37:25 +0000

Recently I was approached to design a poster for a school film competition. It was an interesting concept, as their posters were just clipart. Hmm… I can definitely do better than clipart!

And so, the brief I was given went roughly like this:

The competition’s atmosphere is more of “happy” then “win!”. It’s a fund raising competition. Light blue colour scheme, black writing. It is a happy feel, but not so happy as rainbows and ponies and kittens and such.

The poster’s going to be reproduced in black and white, but also make a colour one.

Required text: “Smith’s Hill High Short Film Festival”. That’s it, nothing else is organised about it.

From there, I brainstormed my ideas. I was thinking of like an “explosion” of colours (that is, Ideas), but it needed a link back to film, or cameras or something. I was also going for a macro eye, but with the pupil replaced with a camera lens, but this would have been too much ink and too hard to reproduce in Black and White.

So, here’s some of the revisions that the poster went through:

First Revision

The client liked this, and I explained how making the light blue as she wanted would have led to reporduction problems, especially when it came to the Black and White versions.

Second Revision

This one, the entire “explosion” had been reduced, and another streak added for some more colour variation. The colours themselves had been brightened, to make them more vibrant and give the poster (and therefore, the competition) more energy.

So now, that poster’s off to the printer, where it is going to be printed in A4, and two A3 sizes, before then the black and white copies are made by the school, onto their A4 normal printing paper.

The client was very impressed and happy with the results.

Part Three: Once Begun, It’s Half Done

Nathan Chapman — Fri, 12 Sep 2008 03:37:48 +0000

This post is one in the series on creating a Wordpress Theme, including design aspects, mock-up to code, WordPress’s PHP and debugging. This series assumes you know a little bit… If you’re still clueless after the series, contact me and I’ll explain further for you.

You’ve got your design done, completed. It’s hopefully very nice looking. You’re really hoping it looks good. “Great!” You say. “Now I can start with my fully-1337-uber-php-wordpress-skillz!”

No.

You’ve got one little step first: code your mockup into a static page. That shouldn’t take too long. Go on, go do it. I’m just going to sit here and wait.

Oh, and 10 points to the childish person that recognizes the page title!

You’re back? All Done? Great!

That is, believe it or not, the hardest thing (if you’ve coded correctly) that you’ll have to do. From now on in, we’re just adding WordPress’s own brand of PHP to your coding mix. Let’s start, shall we?

Start at the Top

WordPress themes are divided into several separate files (Refresher course, anyone?). Open up your static web page, and select everything right down until the tag. Everything in this area we’ll copy/paste, and we’ll put that into a new PHP file called header.php.

From there, let’s take everything from , right down to your

(or whatever yours is called!). Again, create a new PHP file, this time calling it index.php. Copy and paste the code over into the new file.

Just a couple more to go, I promise. Ok, now grab everything from your

(not the tag itself!), right down until before your

. This goes into yet another new file, this time called footer.php.

Finally, copy everything from your closing footer

(which you didn’t put into footer.php, did you?), right through until your . This lot also goes into index.php, but make sure it goes after the bit you pasted before.

Oh, and if you have a sidebar in your theme, grab that code (not the tags surrounding it, though!) and place it in a new PHP file, sidebar.php

PHP now plz?

Yes, you can have PHP now. Here’s where it gets difficult. Actually, I don’t find this difficult, but you might. K, I’ll stop stalling.

Let’s start with index.php. Go to the very top of it, and put in, before anything else . What’s that do? It goes and grabs your header.php file, and “displays” it here. Now, we have a doctype, a page title, a header.

Next, the end of your page. Where your footer went in your mockup page, put in . Now, when index.php is loaded, both header.php and footer.php are loaded too. Why? No idea. That’s just the way WordPress works.

Fixing `header.php`

The </code> tag is our first worry. What I like to do with the <code><title></code> is to make it say <strong>Page Title • Site Name</strong>, or something similar. Here’s how you would do that.</p> <pre> <title> <?php if ( is_single() ) { ?><?php wp_title(); ?> • <?php } ?><?php bloginfo('name');?>

What this says to WordPress is:



PHP: Hi there! This page we’re loading, is it a single page, or the archives?

WordPress: Hey PHP! This is a single page.

PHP: Brilliant! Now I know that, I’ll need the Page Title please.

WordPress: This page is called “A Testing WordPress page”

PHP: Thanks! Just one last thing, yes? Ok, great! The site name, please 

WordPress: Yep, sure.  This site’s called “We ♥ WordPress”

And why are both WordPress and PHP overly happy? No Idea.

Next after the </code> tag is the <code><link></code> tag - to import the theme’s css stylesheet. Because of the way WordPress stores its themes, and references them, the <code><link></code> tag will need a quick, easy edit - just so WordPress can find it.</p>
<p>So your <code><link></code> should look pretty much like this:</p>
<pre><link rel="stylesheet" href="style.css" type="text/css" media="screen" /></pre>
<p>And the quick change we need to make is just to replace the <code>href="</code> section of the tag. So:</p>
<pre><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /></pre>
</p>
<p>Now, the PHP goes to where the theme lives, and then finds <em>style.css</em> so it can make your site look pretty.</p>
<p>Finally, one little tag has to be added. This tag is a hook for all the WordPress plugins that need to display or store something in the header. The tag, <code><?php wp_head(); ?></code> just needs to be added to the bottom of your <code><head></code>, before that tag.</p>
<p>That’s all you need! That’s it for <code>header.php</code>! You’re done! Well, for now. Don’t forget we’ve still got a couple more files to PHP-ize  </p>
<p>Have a good day.</p>
<ul><em>This post was just one of four (so far!) in this series on creating a WordPress Theme. Missed a post? Here are the previous posts in this series.</em></p>
<li><a href="http://pixl.utopiaplanitia.org/web-site-design/series-page-make-wordpress-theme/">So You Want to Make a WordPress Theme, Huh? (Series Overview)</a></li>
<li><a href="http://pixl.utopiaplanitia.org/web-site-design/what-is-pt1-make-wordpress-theme/">Part 1: What is a WordPress theme anyway?</a></li>
<li><a href="http://pixl.utopiaplanitia.org/web-site-design/part-two-mockups-anyone/">Part 2: Mockups, Anyone?</a></li>
</ul>

</article>
</main></body></html>