Archive for September, 2007

DNA Studios

dna final 300x298 DNA Studios imageDNA Game Studios came to us in the fall of 2007 for a new gaming logo.

I have to thank James Kirkland for helping me on this logo, he’s a brilliant artist here in Fredericton who studied Adobe Illustrator for days until he was able to get this just right for me.

How to Create Reflective Text in Adobe Photoshop CS3

tutorials/photoshop/createanewdocument.jpgThis is a simple tutorial used in some of my classes to help first year design students understand the basics of Adobe Photoshop as well as how to use Layers properly.

First, lets start by creating a new document using the CTRL-N button and we’ll set the size to 200px wide by 100px high. This will give us a simple work space to create our document from.

Now, using the text tool (tutorials/photoshop/texttoolicon.jpg) let’s type some basic text such as “Hello World” in the center of our document, you may want to resize the text or alter it to create the effect you want. Once complete, let’s duplicate the layer by using the CTRL-J shortcut or selecting Duplicate Layer from the Layer menu.

tutorials/photoshop/layers.jpgThe duplicated layer (most likely named Hello World Copy or something similar) will appear above your first layer in the Layers pallet on your right hand side. The new layer is going to be used for the rest of this tutorial so be sure that you have it selected and we’ll continue.

The next step is to Right Click on the layer to expose the dynamic menu, use this menu to find and select Rasterize Text. Your text is now just a series of pixels and is no longer editable, this is exactly what we want.

With the freshly rasterized text layer still selected we’ll use the CTRL-T keyboard shortcut to transform the layer. Your image text should now have a series of six small hollow squares around them. Right Click any of the boxes and select Flip Vertical.

Now drag your selected text until the top of it lines up with the bottom of your initial text, what you should be left with is a copy of your original text mirrored directly below it.

Our final step in this tutorial is to make the text appear reflective which involved fading it gently and to do this, we want to add a layer mask which is a method of adding transparency to an object gradually.

layermask How to Create Reflective Text in Adobe Photoshop CS3 imageTo do this, we want to use the menu item Layer > Layer Mask > Reveal All which adds a layer mask to our existing layer. The layer now contains a second box, this is the transparency channel for our layer.

tutorials/photoshop/layers.jpgTo make this mask work to our desired effect, we need to add a black and white gradient to our document. Let’s restore Photoshop to it’s default color mode by pressing the CTRL-D keyboard shortcut. This will ensure our colors are black and white. Select the gradient tool (tutorials/photoshop/texttoolicon.jpg) and apply it from the bottom of your text up, until you get the desired effect.

You can use this simple reflective text method on images or graphics as well as text and it’s a great way to learn basic web type standards.

Download the Photoshop File

Biology Illustrations

textbookillustrations.thumbnail Biology Illustrations imageRecently with the help of some great local artists, I completed a series of over 1,100 technically illustrations for the Department of Education including a series of Biology Illustrations designed for online learning opportunities.

The illustrations ranged considerably for technical skill and subject matter. You can enlarge the artwork to the right by clicking on it.

Making Images Print Friendly

Aaron Gustafson has produced a wonderful article on replacing web images with images suitable for printing, the iIR: img Image Replacement method allows web designers to create pages which look great in both web and print.

Using Aaron’s method, designers should be able to create and maintain websites viewable on multiple devices without having to deploy multiple versions of the site. This will allow users to access the same website via an iPhone, a Wii, a laptop or a printed version and have graphics on the page served to meet their specific needs.

Adobe Master Collection Install Failure (Mac)

While installing the Adobe Master Collection CS3 for the Mac I got all the way though the first disc and then a blank window popped up, stopping the installer dead. The error, a single blank window where it should be asking for disc two is a fairly common one apparently and is caused by a conflict between Safari 3.x Beta and the Master Collection installer. Now the good news, it’s a painfully easy fix.

First, you have to completely uninstall the Master Collection that you’ve installed so far. You can do this by going to ~/Applications/Utilities/Adobe Installers/Add or Remove Adobe Creative Suite 3 Master Collection. Once done, reboot your Mac.

Second, you have to remove Safari 3.0 Beta from your Mac. You can do this by downloading the installer from http://www.apple.com/safari/download/ and using the uninstall option. Before you do, be sure to copy your bookmarks etc. from ~/username/Library/Safari if you want to save your bookmarks. Once again, reboot your Mac.

Now, once you’re rebooted you are free to install the Master Collection and it will prompt you for disc two as anticipated.

If you want at this point, you can restore Safari 3.0 Beta by installing it.

Getaway Graphics

Getaway Graphics New Artwork

Update: The Getaway Graphics website has been updated.

The Getaway Graphics website makes great use of a dynamic Flash banner, uniformed templates and professional CSS layout.

This website is designed to function as not only a great marketing piece but also as a great web document, auto formatting for mobile devices, the visually impaired and a variety of computer systems.

Recently, I upgraded the website to a more calm, subtle design. I’ve also converted it from a custom web application to a WordPress based template system for ease of use and maintenance. It still uses a Google Analytics back end for marketing data as well as a PayPal interface for online credit card payments.

Visit Getaway Graphics to learn more about my professional services.