Creative

Zygomatic Studios design: an experiment in one-page animated layouts

Recently I did a front-end proposal for Zygomatic Studios. They’re an animation company started up by Erik Kylen and I’ll be maintaining their website.

Given that I knew them, I had some freedom to experiment. For an animation firm, the website itself had to be showy graphically somehow. I ended up making the entire page animated on page-load: to present itself in a showy way but not interrupt the user whilst actually using the page. “Slick” was what I was going for.

Another idea I wanted to play with was the one-page site concept, which displayed the highlights of each “sub page”, which could then be expanded if interested.

You can check it out in my alpha playground.

Zygomatic

Designed with GIMP, with a little help from Blender. Personally quite happy with the experiment.

Creative

The GIMP metal wires and abstract background tutorial.

Every WIPUP release, an abstract art splash image is created to commemorate it. Whenever I create one of these my preferred tool of choice is The GIMP. Although in many ways The GIMP isn’t as "powerful" as Photoshop, I still manage to do stuff I’d like to do with it. My recent splash image used a few tricks that I will share here which may be useful to others. Before we begin, this is the thing we’re going to learn how to create:

The first step is the wires. Let’s start with a black background and white foreground. Create a curved line via the pen tool, select a circle brush of a nice thick size, Edit->Stroke Path, Stroke with a Paint Tool (Paintbrush, do not emulate brush dynamics), and we’d end up with something like this.

Duplicate this layer, because we’d need this shape twice – once for the segments of the wire, and another time for the wire itself that joins the segments together. The next step is to cut out the segments. Create a white rectangle which covers the height of a single segment in a new layer, duplicate the layer and move it down. Keep on doing this until you have filled the entire screen. To make it faster you can merge layers together then duplicate the merged layer. Here is an image to show what I mean:

When done, merge all of the horizontal stripes into a single layer, right click on the layer -> Alpha to selection, select one of your wire layers, invert the selection (ctrl-I) and press delete. You may now delete the horizontal stripes layer. Here’s what you should end up with:

The next step is to create the metal gradient on the wire. Duplicate your segments layer twice. So we will have three layers in total – segments, copy 1, and copy 2. Invert the original segments layer to make it black (it will be invisible against the black background, so I have made the background grey in my next picture). Gaussian blur copy1 and copy2. Gaussian blur (Filters->Blur->Gaussian Blur) one more than the other in order to set the light direction. The benefit of doing this rather than simply stroking with a gradient brush is that you can slightly shear the gaussian blurred layers to create a less uniform gradient, and thus more realistic gradient. Then move copy2 to the right, and copy1 to the left. Use the left and right arrow keys. We will end up with something like this (zoomed in and cropped):

Right click on your black original segments layer (underneath), and do Alpha to selection. Invert the selection, select copy1, and delete. Then select copy2, and delete as well, this wil give us our gradient as shown:

Now let’s go back to our very first white stroked layer (seen in the first screenshot). Right click on the layer -> Alpha to selection, then Select->Shrink, perhaps by 3 pixels, invert the selection, and delete. Here’s what we get:

Now repeat the steps above to create the gradient. Use less gaussian blur though as this wire is thinner. When done, we’ve made our wire. Duplicate it and reposition it as you like.

Use the same technique to create the smaller wires underneath, but when creating the gradients for those, perhaps only blur it by 1px. To quickly and easily make many variations of wires (for the smaller ones) you can use Filter->Distort->Ripple. Use a high period, and a low amplitude. Use the sine wavetype. Keep on duplicating them and you’ll end up with something like this:

The next step is to add lighting. There are several techniques to do this and unfortunately pictures don’t really show much so reading through carefully is recommended.

The first step is to decide where you want your lightsource to come from. Merge your smaller wires into a couple layers, and go into Filter->Light and Shadow->Lighting Effects. In the Light tab, create a point or directional light (if you want more dramatic lighting) and place it where your light source is. Don’t make the intensity too high or place it too close, otherwise you’ll end up with a completely white wire. Don’t forget, these smaller wires are underneath. Play around with the lighting effects section, but not too much. This should just be a minor lighting effect.

The next technique is to add a dropshadow to the upper two segmented wires. Merge each wire into a single layer, Alpha to Selection, create a new layer, and fill it with solid black. Gaussian blur it, move the layer below, and tada, you have a shadow. use the perspective tool slightly to give the shadow more realism as though the wire is moving towards and away from you. This is a very easy and precise way to make shadows for any purpose and sure beats the dropshadow plugin which IMO sucks. Notice how my two wires tangle, so make sure you delete the shadow where necessary (alpha-to-selection, delete).

Another extremely useful technique is to create a new layer, set the mode to overlay, and then use a large, fuzzy circle brush with black and brush over darker areas. Use a white brush for the highlights (remember to use this where you put your first lightsource). Start with a large brush, then slowly move towards smaller size brushes, especially when one wire tangles over another. This should be your main tool to create lighting and shadows.

For the thin wires, you might want to give it a sharp lighting. Just alpha to selection, create a new layer, and fill it in with black. Offset it to the left or right (depending on your lightsource) a few pixels (with the arrow key). Sometimes you don’t even need to gaussian blur this. This will create a very sharp shadow, similar to an emboss or embed effect.

Finally, create layer masks (right click on layer->add layer mask) on strategic layers (or on wires that cut abruptly), use a soft fuzzy circle brush to fade them out nicely. Careful not to use these on the top two main wires otherwise it’ll look very unrealistic. Use black fade-to-transparent linear gradients at the top and bottom of 70% opacity to allow them to fade out slightly.

After all of this, here’s a possible outcome – but you’d have to really use your artistic sense at this point:

Well, the next step is to create the background. This is actually quite easy. Just create a linear gradient from one colour to another (I chose sky blue and pastel green), from the bottom to the top. Then do Filters->Render->Nature->Flame. In the Rendering tab, increase the brightness slightly, as too bright will make it too sharp. Your results will vary, so keep on trying gradients until you get one you like. In the Camera tab, change the zoom and X and Y values until it focuses on an area which you like. Render it, and do a few more until the entire screen is covered. Here’s what you might end up with:

Duplicate the flame layers and set the layer mode to Screen. This’ll give you a nice soft glow. You might notice that it clashes too much with the wires. So create a new layer, set to mode Overlay, and use a big black fuzzy circle brush to brush underneath the wires. This’ll give a nice "shadow". Here’s what you end up with:

Now let’s add some sparkly stuff. It might be good to add them where you wanted your light source to be. Choose a soft white fuzzy circle brush, select "Apply Jitter" in the brush options, and brush over the area. You might need to undo and retry it several times until you get what you like. Change the brush size and brush towards the top and bottom to make it "fade out". To make it more interesting, add a gradient from the top to bottom of any colour you want, and set the layer mode to "Colour". I didn’t like how vivid this colour overlay turned out, so I added a layer mask and used a large jittery brush to make the colour fade out in patches. Here’s what we end up with:

… and that’s pretty much it! I added the WIPUP text as usual. I hope you liked it! Any suggestions would be welcome. You can see the final image featured in the WIPUP release notes here.

Uncategorized

When an image is stuck in your head…

… you fire up The GIMP and whack it down. It isn’t the full image, but I don’t think I want to share the full image.

Or if you’re interested in zmobies:

I’ve really always wanted to try this style. Large scale version is available on the WIPUP update.

I will be having mock exams from the 1st to the 8th, and have a bunch of gerbloach booked up until the 12th, so updates will be sparse (which is probably a good thing, given the brainfart I’ve been having lately).

Uncategorized

The making of Perspective

Perspective is my school’s magazine of which I’ve been the designer last year. Though the old team has moved on and I’m no longer associated much with it, such releases have remained as an archive online. Mainly because I like the open-source ideology I’ve produced the magazine primarily using FOSS tools – such practice is quite rare in the publishing industry due to Adobe’s dominance. However -especially noticeable in the latest release- the quality of results have truly been quite astounding. So of course I was pleased to recently receive an email about it:

Hi Dion,

I was blown away by the layout you did for Perspective using scribus, and I was wondering if you could offer a COMPLETE newbie to scribus some tips on how to layout a simple greeting card. I would really appreciate your help.

Everybody loves seeing their work being appreciated, and so I crafted a reply, and whether or not it helps anybody else, I thought it’d be good to share.

Hello,

Why thank you! I assume you’re talking about the July 09 edition, where I took the time and effort to actually design each page instead of simply lump text and boxes around.

The first step was to use Scribus to split the page into a grid using the rulers. As a magazine, I split the page into three, then created more rulers to allow for padding. I also put rulers at each of the borders to give ample space for page margins. Once this was done I now have a clear idea of what space I have allocated for my content.

I have to admit that the main crux of the design process was done in the GIMP. I would export a blank canvas and then mirror the rulers with GIMP’s rulers to make it so that my designs also were within those borders. The entire page layout was created in GIMP – I would guess how much space an article might take, and then create it in GIMP. Putting the entire article’s text in The GIMP along the side of one column allowed me to get a pretty good guess at how much space it would take – a screenshot showing this can be seen here:

If you look at that screenshot you’d also notice that all of the pictures – eg: the page template as well as the pictures for the article and fancy font used for the title – were done on The GIMP and NOT on Scribus. The problem I found was that because printer’s were unreliable, when given to them in a format that separated text and many images being overlayed above one another, the colours would run and many artifacts would be seen. So what I did was to create all non-text items in one single image, then export that and use it as a background for the page in Scribus. This keeps all the images together and greatly reduces the number of artifacts – it worked so well, in fact that I would be confident to say that there were almost no artifacts at all!

At the same time, when dealing with such a potentially complex document this technique would keep Scribus running extremely fast yet still benefit from a well designed and with pages full-of-effects (eg: shadow, interesting overlays and rotations). Of course this also meant I could use cool fonts for titles and not be worried on whether or not the printer also had those fonts! Another benefit is that it keeps the final file small and extremely fast to export. Less chances of crashes and easy portability!

The final step once all the non-text were finished in The GIMP was to fire up Scribus and put text on top- so on each page, there was only one image, no more, no less. This also made it a lot easier to manage and edit text. I could still make text flow around images by inserting invisible shapes then selecting Shape -> Text flows around image in the properties window (F2). With line and bezier shapes this really gave me the precise control I needed.

The title page was made almost last – I find this helps as firstly you don’t sit around wasting time thinking of a design because you’re doing the easier and repetitive inner pages. Over time you gather a feel of the document’s style and creating the title just flows out.

On this issue I chose a “small” text font size. This does actually make it seem more professional as you really notice the flow around images. Previous issues I refrained from doing this as my editor told me it would strain people’s eyes. Turns out that they were wrong (well, nobody complained).

Release early, release often – share your work’s in progress with your friends. They’ll help point out things that don’t look nice. If at anytime you’re unsure of how to layout a page, stop what you’re doing on the computer, print it out, and start throwing down ideas with a pen(cil).

So in short – basic layout started in Scribus, design and playing around with ideas done in GIMP, inserting and arranging text done in Scribus, and that’s it. I hope that helped – if you’re unsure on the actual design, searching google images and especially design blogs such as SmashingMagazine can really give you some inspiration.

In other news, things are starting to calm down a bit so within a week or so I should be able to continue development on WIPUP and perhaps even do a few small creative projects.

Uncategorized

Perspective July 2009 Released

snapshot13As many people know, I am the layout editor of my school’s “Perspective” magazine. It is a student run organisation and this will be the last issue I design before I hand over my role to the year below (it’s a yearly thing).

I am happy and proud to announce what I believe is the best issue I have ever produced, and you yourself can compare it to the first, the second, and the third issue.

Perspective is made using free and open-source software including The GIMP, Scribus, KDE, Okular, and Vim. However as the industry standard is the proprietary format Adobe InDesign, I am required to convert it to this format at the final stage. However rest assured this is nothing more than copy and pasting – I present to you a magazine made (almost) completely with free software.

This issue is special because you can download this magazine in PDF format. Feel free to read it – it includes a lovely front-page article by me, 3 entires into the art pages at the end, as well as a two-page article about open-source nearing the end featuring pictures of KDE and Elephant’s Dream – the open-source movie by the Blender Foundation. Some kid also wrote an article about the history of web browsers, but I was quite shocked to see that one line said “Google Chrome was released as a beta in September 2008 by Microsoft” – I think they meant for Windows. Nevertheless, my job is to bother about the design, not the standard of articles, and I’m happy to say that this has upped the bar – from what I see at least.

Clickety here to download.

Oh, and for the lazy, here is the thumbnail view of the entire magazine.

perspective_final_compressed

Thank you for scrolling through, I hope you’ve enjoyed the magazine over the year, goodbye and good luck to whoever replaces me.

Uncategorized

Another Perspective Preview

…and here I am for yesterday’s blog post with a quick new preview on the Perspective magazine: the centerspread. Lots of things going on, progress on Eadrax being made, my cousin, his wife and baby were staying over for a while, and I’m going on a monday-friday camp/trek/survival next week, so this’ll likely be one of my last posts for a while. Here it is in all its picture-speaks-a-thousand-words glory:

snapshot3

Oh, by the way I don’t take any credit for the photography.

Uncategorized

Perspective in progress

I had skipped my last scheduled blog post because things have been busy. One of those busy things involves the Perspective magazine, which I last touched way back in February. The last time I mentioned it, I also shared my feelings about the workflow. Between that time and now, there has been one Perspective issue, which was not actually designed by me but instead by another who did a green overlay on everything and redid the issue. This was because I had refused to do it – I had less than a week, about 4 week days if I remember correctly. This is of course with other activities going on, and completely out of the blue.

This time it seems as though on the design side of things people have been listening. I have been alloted 2 whole weeks (including an extended weekend!) to work on the design. I’m a happy person, and happy people make happy things. I wish I could say the same for the article-writers, but that’s another story I will share later.

Meanwhile, as dedicated observers of my blog you are all treated to a preview of the work-in-progress magazine. The inside pages have a distinct new feel of polish, modern and clean. I will also be releasing under PDF format all of the magazines once this issue is published. There have been great leaps in design after each issue, and this is just another stepping stone.

Without blabbering too much, here are two screenshots of what I’ve been working on:

snapshot11

…and another!

snapshot12

…as usual, just click on them to see it large-scale.

Of course, majority of the work is all done with open-source tools, just a bit at the end to slot in the articles with Adobe InDesign. This will really show what is possible with free software.

Uncategorized

Another little poster done.

My previous post was about the creation of a rather typographic poster for our graduation ball. Unfortunately it was rejected – you know, something to do with the fact it had no pictures in it.

So I was requested to make another one, so I did – and now the page will just look like any other page in that book. It isn’t the best poster in the world – in fact, I quite despise this one. Oh well, they accepted this one, and I guess that now is one of those “whatever works for you” times. Well, there isn’t much to say about this one, so here we go (click on it for the ‘full-sized’ image):

gradball_small

Comments welcome, but not compulsory.

Uncategorized

GIMPup a Webdesign #2.

Despite the fact I’m smack in the middle of my mock exams…or should I say “slack in the middle of my mock exams”…I’ve decided to make a generic webdesign. You know, just to keep me on my toes. This one has an utter lack of creativity, and is probably your stereotypical design found on the web. However, if any one of you folks decide it strikes your fancy, just contact me and I’ll slice and make it web readyfor a dirt cheap price of only 20USD. This is a limited offer for 1 month only. As after that I’ll probably have deleted the design files.

Well, enough of waffling. Here goes:

cleangloss

Yes, it was made using The GIMP, and it’s part of my little campaign to show GIMP really is worthy. Oh, and the thumbnails shown in the design are all from my portfolio. Comments welcome.

Uncategorized

GIMPup A Webdesign

Seem as though The GIMP has finally gotten on my list of “Awesome Applications”. That list is basically all the stuff on the computer which I know I cannot live without. They already include Vim, Blender, Apache, MySQL, PHP …. etc – but I’ll save that for another post. All of the applications I use are open-source and completely free. Except for Adobe Photoshop.

But Photoshop rules! Why switch to The GIMP?

You’re right. No way saying The GIMP is more powerful than Photoshop. Not saying the switch over to learning The GIMP wasn’t filled with “argh! Where did my other kabillion windows disappear to“. Also not saying that all the industry professionals should switch over to The GIMP right now.

However, I like to place my faith in open-source software (Blender being an excellent example) – the main reason being that open-source development is crazy fast, and the community in general is great. So I wouldn’t be too surprised if 5-10 years later The GIMP is the ultimate graphics tool.

So, how to learn The GIMP? Simply by using it to do what I would otherwise do in Photoshop. Some methods of working I have developed is that my two panels are always set to “Always On Top”, and my window manager set that a double click on the windows title bar will shade the window. One of the external window contains the toolbox, and nothing else, and the other contains everything else that I use frequently in tabs. This way I get quite a lot of screen space for what I’m working on. I’d also like to mention that learning the hotkeys for the tools in The GIMP is definitely something really useful to do for a beginner.

Here’s a design I churned out after 4 hours of working out how stuff is done in The GIMP. I hope you like it. Click the image to get a full size picture.

Of course, comments welcome.