Over the past few weeks I have really been reading up on blogging, social media and all that fun “web2.0″ buzzword stuff – you know how it goes. One common thing with most of the top blogs that you find is they all use some form of custom theme. Whether it is a premium theme (Thesis seems popular due to all the features and customization that is possible) or a custom rolled theme, the story is the same – to really make an impact you have to be credible. Somehow we all don’t view the “free” themes as credible.

So as such I will be joining the ranks of bloggers to use a custom design here on this blog. Fortunately for me I am a web designer & developer so I will be doing all the graphics, all the WordPress customization and pretty much anything else.

As a shameless plug – if you like the new design when it launches and are interested in hiring me for your custom design all you have to do is contact me and we can work out the details and see if we can make a good partnership.

Billy J. Nab's Portfolio

You can find it here: Billy J. Nab’s Portfolio

Depending upon how well these are received, I may start doing a weekly video tutorial post, which would be cool and in my opinion much better than typing out 20-30 steps, taking 20-30 static screenshots, preparing them, them formatting the lengthy post. Of course, not all the tutorials will be in video mode, I will still post the traditional typed tutorial, but the idea of the video tutorial has been bouncing around for a while now.

Most of the video tutorials will be graphic design related, as I cannot see much point in video of typing code out, that is better suited to the code listing format I have used previously.

If you have any thoughts about this, leave a comment!

In testing the script, a sample PNG image with transparency was originally 500×500 pixels and 202.76kb in size. Using the script to set the x,y to 200×200 the file size was reduced to 44.73kb. The script could be easily extended to perform other ImageMagick functions, and to reduce the end result file size even more.

if(!extension_loaded('imagick'))
{
dl('imagick.so');
}
$img = strip_tags($_GET['imagename']);
if(isset($_GET['size']))
{
$size = strip_tags($_GET['size']);
}
else
{
$size = 0;
}
if(isset($_GET['vsize']))
{
$vsize = strip_tags($_GET['vsize']);
}
else
{
$vsize = 0;
}

$image = new Imagick($img);
$image->thumbnailImage($size, $vsize);
header(“Content-type: image/png”);
print $image;
?>

Quick synopsis of the code: It first checks to make sure the imagick PHP extension is loaded, and if it is not, it will dynamically load the extension. It then checks for the URL parameter ‘imagename’ and runs a simple strip_tags to clean any extraneous attempts to send in other code with the image name. The script then does two checks for the size (horizontal) and vsize (vertical). If either is set, it will strip_tags on them and assign them to a variable for use.

The script then takes the sizes and instantiates a new Imagick object passing in the image name as set from the URL parameter. It then calls the thumbnailImage function of the Imagick library and passes in the $size and $vsize variables. We then set the header type to be image/png since we worked only with PNG images in this version, and finally print the results, which are contained in the $image object.

The nice thing about the script, is thumbnail image will take two parameters for the size, and if only one is set, it will auto-constrain the image (eg. 200, 0 it will autoscale the 0 axis). The other nice thing is we can check the type of image so that we output the same type so we can work with GIF, JPEG, and PNG among others.

Use my contact page if you are interesting in discussing any potential opportunities.

1. Gallery & Design Sites
   These sites are nothing but a collection of great designs (most of the time) that can really inspire the creative process. Here are a few that I visit now and again, and in no particular order of importance.
   • http://www.templatesfeed.com
   • http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html
   • http://www.ndesign-studio.com/
   • http://bestwebgallery.com/
   • http://www.webdesignerwall.com/
   • http://cssmania.com/
   • http://cssremix.com/
   • http://www.cssdrive.com/
2. Nature
   I am lucky to live close to the Rocky Mountains, so it is rather simple to get away on a Saturday afternoon and take a drive through some absolutely amazing country. Spring and autumn are full of amazing colors in the mountains and provide a great way to get away from the hustle of daily routine, while providing great inspiration. Don’t live close to mountains? How about taking a drive or bike ride around a local lake, or any other outdoorsy place. If you are city bound and cannot get out to the country side, take a trip through a local botanical garden. An aquarium can also provide spectacular sites that may help generate some great creative ideas as well.
3. Architecture
   Go visit historical building around town to get inspired by that of old. Or checkout some modern architectural designs for inspiration of creating a good flowing layout. Museums can also help in this area – you can get some classic color schemes from studying relics of the past, color schemes that aren’t in common use today, but when used wisely can create a great design.
4. Libraries

   Take a trip to the local library and peruse some books. It may be a travel book full of great photos from a foreign country that inspires you, or it may a book about art, technology, science. It may even very well be that the people you encounter can give you an idea for a design – libraries are full of colorful people, children, punks, goths, grand-parents. It could be the library building itself.

5. People

   As mentioned in the Library section, watching people can bring about a creative idea. People are absolutely amazing, and simply sitting at a local coffee shop and observing them may very well stir something. You find all types of people, from all walks of life everyday, creating a diverse field of inspiration that you can leverage to stir up the creativeness.

While not lengthy or all inclusive, these are somethings I have done, still do or have thought to do to help the creative process. If you have something that you do to help jumpstart your creative juices, drop a comment and share it for others to read.

Okay the fade image is a simple fade – there are more advanced ways to do this, and I will try to get a tutorial to get the more advanced way to do it (invovles selecting with wand tool, creating feathers etc).

Step One:
Place background image in new layer by selecting File->Insert

Step Two:
Insert overlay (top) image, either in current layer or a new layer if desired (File->insert) and position where desired over background image.  In the sample I just place it to the left.

Step 3:
Go to: Commands->Creative->Fade Image.

Then you should get the following selection box to choose how you want to fade the image – for this I chose a simple left-> right fade.

Step 4:
After clicking okay, the image is faded from left to right:

You can move, rotate and resize the fade by using the square selector:

You can also choose to do the radial fade (round fade) or top->bottom fade in step three.

1. With Fireworks open, create a new canvas (assumption that readers know how to do this step)

2. Make new canvas your desired width and height (for this example I have used 760×200)

3. Draw a rectangle that is 760×120 and placed at 0 top and 0 bottom

4. Draw another rectangle as placed as the following illustration shows

5. Select both rectangles by holding shift down and clicking on them both with the select arrow

6. Click on the Modify menu, then Combine Paths, then Punch. You should be left with the following.

7. Draw another rectangle only place it to the bottom right this time.

8. Select the large rectangle again and the new smaller one by holding the shift key as in step 5.

9. Click on the Modify menu, then Combine Paths, then Punch. You should be left with the following.

10. Using the sub-selection arrow drag the two points shown circled below to the desired position (experimentation is key in this step)

11. Using the pen tool, grab the points you just moved, as well as the other points circled and “pull” them to create the curves in the straight lines. Experimentation to get the desired look is necessary at this step.

12. The final shape with a drop-shadow and color added.

13. The final shape copied & pasted into a new layer, color changed and text added.

Again some experimentation with the rectangle sizes (both the large original one and the two that you “punch” out) is required to get the desired effect.

I say what ever you want to use that is appealing to your target audience is what you should use. In this case I had a need to generate some Glass Goodness effects for a site layout (which I will be releasing a template based upon this just shortly). The following will be a step-by-step, illustrated guide to creating some Glassy Goodness, focused on buttons.  There will be another tutorial that will focus on Glassy Goodness for use in other areas of a web site, such as a header or footer.

Step 1: Create a new Fireworks document, in this case I created it 400×400 pixels and 72dpi.

Step 2: Choose the rounded rectangle tool so that we can draw our rectangle that will be the base color and shape of the button.

Step 3: Draw the rectangle, any size is fine at this point, the next step will show the gradient that we will use.

Step 4: Set the fill to be a Linear Gradient and select any two complimentary colors, the colors we used for the base image are show here.  To set the colors, you will click on the color cube (swatch) next to the gradient fill type (linear) as shown in the second image below.

Step 5: Adjust the gradient fill to go dark color at the top of the rectangle to the light color at the bottom (you can try other combinations as well, and we have included at the end of this tutorial a collection of colors that we used).  See the image below for how we set ours up, please note the gradient fill starts at the top of the image and stops at the bottom of the image – this is important to get a clean linear effect.

Step 6: With the rectangle selected, we want to click on the Filters + button in the property inspector, and choose Shadow & Glow -> Inner Shadow and use the settings of 0 distance, 65% opacity, 4 softness, 315 angle.

Step 7: We will draw another rounded rectangle directly over the top of the existing rectangle making sure it is about 35%-50% of the original rectangles height, and that it is aligned to the very top of the existing rectangle.

Step 8: For the purposes of this tutorial, we will set the roundness of the corners to the fullest roundness possible.  Depending upon the application that we would be using this for, we may need to individually adjust the corners, which Fireworks will allow us to do, however for this we want them to be all the same and to match the top of the existing rectangle roundness.  It is important to note that when you hover over the yellow box that says click to switch corners, you are actually going to click and drag the control to adjust the roundness – dragging in makes the corners more round, dragging out makes them more square.  If you simply click on the control you will make the corners change from rounded, to beveled, to inset.

Step 9: In our “glassy goodness overlay” rectangle (the one we just adjusted corners on) we want to adjust the fill to be black and white rather than other colors.  Also note, that we adjust the linear gradient as in the previous rectangle by starting the dark color at the top (black) and light color (white) at the bottom of the rectangle.  Your image should now look as the one below that we have zoomed in on for detail.

Step 10: We need to now set the properties of the top rectangle to be transparent over the top of the original rectangle.  To do this we will set the opacity level and the layer setting to screen.  Some tutorials say to not adjust the opacity level, and really it is a personal decision on that – and my personal feeling is to adjust the opacity to give a bit of a softer effect, usually setting it between 15-40 in the opacity.  The settings I used for this tutorial are below.

Step 11: You sould now have the following image, if you have done the steps as they were written, if you have added to or changed some of the steps you may have a different image and that is okay, as long as it is the desired effect you were going for.  If not, try again because when I first started trying to make glassy buttons it took some experimentation.

I have also included below a sample of colors to show that you can change the colors of the button by merely changing the color of the linear gradient on the first rectangle that we drew.  You can experiment with two and three color combinations, as well as making the rectangle be one solid color.

If you have any questions or comments about this tutorial, feel free to create you an account and leave a comment about it.

Fireworks: Creating Smooth Lines – An approach to creating curved lines in square/rectangle spaces.

PHP: Creating effective user login control.

Dreamweaver: Effective use of built-in tools for site maintenance.

CSS: Add some style to a boring page.

As I progress, the tutorials may or may not follow a pattern, such as tutorial 2 in Fireworks may or may not be an extension or addition to tutorial 1.  If there are connecting tutorials, they will be linked accordingly for ease of use.