Steps

Open up a new document in Photoshop. I made mine 8 inches wide by 6 inches high, 72 ppi, Grayscale, and the Background should be White. Make sure your default colors are Black foreground color, white background color (press D on your keyboard to reset this default color scheme). Fill the transparent document you just opened by clicking ALT>Backspace (PC). Next, click on the Text tool in your toolbar, and set the default colors to the opposite scheme, white over black, by pressing the X key on your keyboard. You are going to type something in white now on your black background. Choose a nice, bold, blocky typeface, and set the size to about 100 point. See the example shown:

The next step is to rasterize the type by clicking Layer>Rasterize>Type. After that, rotate the canvas counter clockwise using: Image>Rotate Canvas>90 degrees counter clockwise, then apply the first effect filter for this lesson which is as follows: Filter>Stylize>Wind>Blast from Left. Repeat this step one more time to lengthen the blast a little. See example:

Now you will need to rotate the image 180 degrees: Image>Rotate>180 degrees, so you can blow the wind effect on the other side as well by using: Filter>Stylize>Wind>Blast from Left. When finished, rotate the canvas back to normal by: Image>Rotate>90 degrees counter clockwise. It is time to add some more effects to your type. First, use this: Filter>Stylize>Diffuse>Normal. See example:

Then, apply the next effect as follows: Filter>Blur>Gaussian>Adjust slider to 3. Example:

One more effect and we are nearly finished: Filter>Distort>Ripple>100 percent>Medium. See example:

Now that we are done with the effects, let us type the word over again in black (switch default colors back to black). Position this type layer over the original one that is now distorted and rasterize the type: Layer>Rasterize>Type. After you rasterize this layer, it’s time to click Layer>Flatten Image.

So, you are probably thinking “what happened to flaming type?” Well, here are the final steps to a really hot effect: Click Image>Mode>Indexed Color. Nothing much will happen in that step, however, the next one: Image>Mode>Color Table, and choose Black Body from the drop down menu. Now you should see the colors of fire all around your type, concentrated at the top and bottom. See example:

For your final step in this process, you probably should crop this and convert this file to RGB ready for web use. Again, click Image>Mode>RGB, and save your file, and you’ll have a super fun little text effect to heat up your site! Here’s the cropped final:

Wrapping Up

Obviously there are many techniques for making this type of flaming text treatment; I just thought this was a good “quick and dirty” version for you to try out in a jiffy. You can also do a lot more experimenting with this, such as make the text a different color all together, such as blue or yellow, and add some effects to that like a drop shadow or outer/inner glow. You can experiment with many, many different base fonts as well; I just used a very plain, bold font here called Impact (you should have it). There are many other choices. Photoshop is very flexible, so you have a lot of options open to you!

Procedure

First, open your ‘base image.’ In the example below, I used a scenery shot of a field with a hill and lots of green grass and trees, and also a foreground tree overhang for depth. When working with your base image, remember that you are going to be cropping the final image to fit into the constraints of a banner, which will vary depending upon the site you are designing for. In the example I will show you, the final finished banner size will be (in pixels) 600 wide, by 300 high, at 72 ppi. So, with this in mind, mentally select a focal point area in your base image, and after a few adjustments of this base image, and the addition of several graphic elements, we will crop it to the correct size.

For the next step you will simply go to the Layers Palette and drag this background layer down over the New Layer icon (at the bottom of the Layers Palette next to the Trash Can icon), which will duplicate your base image. At the top of the Layers Palette choose Multiply from the little pull down menu bar. This will darken your base image markedly, so be sure you started with an image that wasn’t dark to begin with, something that is a lighter or medium range in darkness and contrast should do fine. Example of the results of this step below:

Next, we want to start adding some graphic elements, so I opened up a photo of the Moon that I captured, and selected it with the circle marquee tool up at the very top left side of the vertical toolbar, and copied and pasted it onto my background image using CTRL+C followed by CTRL+V. At the top of the Layers Palette you will now see the Moon layer. I also clicked the pull down menu at the top of the Layers Palette, and selected Screen, which eliminates any of the black background my moon was sitting upon. It also helps it blend into the cloudy background a little, and remains a bit transparent so the tree branches show through it, giving a bit of ‘false depth’ to the image. Here is an example of this part of the procedure:

For the next step of our image creation here, we need to click on Layer>Merge Visible (this command is close to the bottom of the Layer drop down menu) so that we basically merge all three of the layers you have so far, in order to be able to apply a special effect from our Plug-ins. Once you have performed the Merge Visible command, you will see that there is now just one layer called Background. At this point, call up your Flood plug-in Filter>Flaming Pear>Flood, or anything else you may have available to make the effect of a glassy lake on your base image. Click OK once the settings of Flood are where you like them, and you should have an image that is like the one below:

Okay, we are getting very close to the end of this exercise, but I felt like this picture was still a bit plain, although it is coming along. I decided that it might look nice to plonk another graphic element in the mix, so I opened up a photo of a boat that I took some time ago, and just simply dragged that onto my nice background image. I made a few minor adjustments of the boat, such as Edit>Transform>Scale, to make it smaller, and I also moved it around until it was in a place that looked good to me. Here is a view of this step:

This looks all right, but the boat seems to be floating in space rather than on the lake I just created, so that must be remedied! What is nice about Photoshop, is that it lets you apply effects to each individual layer. In other words, I can add the Flood effect to the boat individually, and make it look like it ‘belongs’ on the water there, blending in. Making sure the boat layer is active or highlighted in the Layers Palette, click on Filter>Flaming Pear>Flood, and try to match up the reflection with the bottom of the boat, so that no space is between the reflection and the bottom of the boat. See the example below:

Once you click OK, the effect will apply to the boat, and will make it look like it belongs in the picture as the example:

We are nearly finished, we just need to crop the image to a more ‘banner-appropriate’ size, and then add some text. So, let us begin by cropping this large image to something more manageable for our project banner. First, click Layer>Merge Visible again, so we get all the layers merged together. Now, grab the Rectangular Marquee tool, the top left tool in your vertical toolbar, and drag it inside your picture taking a chunk of your image that includes the main elements like the Moon and the rowboat, plus some of the water. You will want to then click Image>Crop, and take a look at what your markedly more banner-sized image looks like now. See the image example:

My image turned out to be about 600 pixels wide by 315 pixels high. This size is fine for my Blogger format sites. You may need to experiment with the size for your particular application. Next we will add some text, and then you will be finished with a very nice, creative, and unique banner for your blog or for a web site.

To complete this process, Click on your Text Tool in your vertical Toolbar. I chose a font called Poplar Std. which is a tall, blocky typeface. Type your title in the color you desire, and then apply a drop shadow effect to that type using the effects button located at the bottom of your Layers Palette, second from the left (looks like a black circle with a scripted “f” in it), and choose Drop Shadow. Click OK. The example turned out like this:

Now it is time to click Layer>Flatten Image to merge this new type layer with the rest of your design. Once you flatten the image, be sure to save it as a .jpg, and you are ready to upload it to your site. Here is the example of my final flattened image:

Wrapping Up

This might seem like a rather involved process just to design a web banner, but if you are interested in experimenting and working with layers in Photoshop, and creating something that is unique to your design elements and creativity, this is a very quick, fun little exercise to try out. This tutorial required the use of the Flaming Pear plug-in for Photoshop called Flood. However, you can do just as well without that step, and create any kind of composite layer image you like. The creativity part is literally at your fingertips!

Testing Plugins from Flaming Pear Software

This amazing software company has a fantastic group of plug-in filters available for purchase on their site, and each one is available to you for a 30 day free trial download! I highly recommend all the plug-ins this company offers. I have chosen five of their different effect filters to discuss in this article, and I hope you will go and check them out and grab your trial downloads…you won’t regret it!

Super Blade Pro - $30

This plug-in filter is an absolute “must” for web designers who are looking for some fresh ideas to create unique, attractive web buttons. Once you install Super Blade Pro, it is a breeze to create a basic web button, then apply the filters by clicking Filter>Flaming Pear>Super Blade Pro. Once the filter quickly launches, you are shown hundreds of different variations, colors, textures and styles that you can apply to your plain ole button. I was floored by the beauty and uniqueness of each of the random styles you can sift through and choose from just by clicking a pair of dice. If you don’t happen to find anything that suits your fancy from their myriad of preset designs, you can tweak and torque the many settings and create your own variations from there. The simplicity of this plug-in will amaze you, and the results speak for themselves. Here is an example of what Super Blade Pro looks like once you choose it from your Filter menu in Photoshop:

I was extremely impressed with Super Blade Pro for its fantastic design choices and also for its ease of use. This effect filter gets a rousing standing ovation from me.

Flood - $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

I have to say this effect is probably the most fun to use of all the Flaming Pear filters. It is exciting to see the results when you open a photo of say, a sunset, for instance, then apply the Flood filter to create your own beautiful “digital water scene” that suddenly appears before your eyes. Add a few of your other extracted elements and you end up with a stunning, creative digital illustration that will amaze you and everyone who sees it. The settings for the Flood waters you immerse your image in vary from waviness to complexity; and wave height to brilliance. It is just a stupendous effect that I personally never tire of. Take a look at the example below to see what I mean:

Once you adjust the settings to get the effect level you desire, and save your base image you’ve just ‘flooded,’ add some of your other graphic elements, such as I have done in the next example below, and enjoy the tranquility of your beautiful creation.

Whatever your desire in a water scene, whether you want to create a glassy pond or a raging hurricane, you can create all things watery with this versatile filter. Flood gets a very lengthy standing ovation from me.

Aetherize - $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Melancholytron, and Mr. Contrast)

Aetherize is as its name suggests, an ethereal treatment for any image you choose. This filter is pretty versatile, and allows you to take mundane snow scene and turn it into a wintery wonderland, or a fairytale setting that looks amazing. A snow scene is what I used to illustrate Aetherize, but you can use anything at all. There are tons of well thought-out presets in this filter set for you to try, or you can make your own variation by tweaking to your heart’s content. For an example, I opened an image I captured of some trees with snow falling on them. You can see my results below:

After I opened my snow scene image, I clicked Filter>Flaming Pear>Aetherize, and started experimenting with the different presets. I settled upon the one above that has some interesting and ‘dreamy’ looking colorizations to it. I then did a little tweaking and adding of other elements, and ended up with the dreamy scene below:

I also performed another little trick with this image; I combined filtration by applying the Flood filter to this after the Aetherize filter, to make an even more fantasy-looking composite image. This filter is really spectacular for sending any of your photos into an ethereal or dreamy direction, and gets a very enthusiastic round of applause from me!

Melancholytron - $20 (or $50 when purchased in the Photography Pack, bundled with Aetherize, Flood, and Mr. Contrast)

For my last filter review today, I’ve decided to talk about Melancholytron. This filter isn’t a really heavy-duty effect module like some of the others mentioned above, but it is a lovely addition for those who want to give a bit of an ‘old timesy’ look to a photo by blurring out photo edges and adding a sepia vignette to it. This effect works just splendidly on images that are already heading toward sepia tone, or even on b/w images as well. For this example I am using a photo that I ‘borrowed’ with permission from a friend of mine, Aussi photographer Michael Rowley, who captured a wonderful photo of a pair of glasses on an open book. I felt that this image would really be terrific with the addition of the Melancholoytron filter. See the example:

Melancholytron has many different presets you can choose from, and similarly to the other filters discussed here, also allows you to tweak as much or as little as you like using the settings sliders. For Michael’s lovely photo, I decided on a round vignette with a dark sepia tone to it, which enhances the tinting in the lenses, while gently blurring out the edges of the picture. Below is the finished photo after I also adjusted the levels slightly using Image>Adjustment>Levels. I felt this image just ‘come alive’ after applying the filter. Melancholytron gets an extremely heartfelt round of applause from me.

Photo: Michael Rowley, http://www.keepsakesphotography.com.au

Wrapping Up

With so many plug-in effect filters out there, it was really difficult to pick out just a few to review and discuss, and I barely just scratched the surface here by covering only one of the many plug-in software developers. However, I do plan to acquire more effect filter plug-ins in the near future, and I will certainly share some input with you on those as I work my way through them! It is absolutely amazing how many terrific creative tools are available, and just a few clicks and a free trial download away from you at anytime.

Step one of this process was to find a typeface on the Net that sported a similar treatment to the “distressed” look I wanted. Although I wanted something a bit more radical as far as the “distressing” part was concerned, I did come across this text treatment on the website of boxer Joe Calzaghe:

You get the idea of “distressed” or “beat up” text from Joe’s name on this banner graphic. While I liked this, and found it unique, I thought it might be interesting to push the envelope a bit, and come up with a considerably more distressed or “textured” look than this, while still making the text legible and eye-catching.

Taking the Steps

Open Adobe Illustrator (I used CS2), and then File>Open an image that has a lot of contrast and would make a good textured background to use as a base for your distressed text. For this, I cropped a section out of a larger photo of ocean and beach to the dimensions of approximately 8 inches wide and 2.5 inches high, and resolution of 150 ppi:

I felt that this photo had a lot of gritty little details that will translate to an interesting, highly textured base for my text treatment.

In Illustrator, select the image with the Selection tool (V) and then Object>Live Trace>Tracing Options. You want to see Tracing Options so you can modify some of the settings, and preview the results before you convert the image. In the dialog, enable the Preview option. The other Presets should be left at their default. This trace you are about to do, will output in black and white, which will be best to work with for this particular effect we want. You will also want to change the Threshold value, which controls the amount of black or white that appears in the image. We want as much detail as we can get, so I suggest using a value of around 75 or 80. But, don’t take my word for it, mess about with this yourself, the values can be adjusted right there in front of your eyes since you have the Preview button checked. Adjust the black and white image to have plenty of small details, and when you are happy with the Threshold value, go ahead and click the Trace button.

Next, in order to use this tracing, we need to convert it to paths. So, while the tracing is still selected, pick Object>Expand. In the dialog that comes up, click OK. For this project we want to work with the black areas only. Choose the Magic Wand tool (Y), select the white areas, and then press the Delete key (Mac) or the Backspace key (PC).

Now we will be placing some text over a portion of your new texture background and thus be able to get an idea of what the distressed text will look like. To accomplish this, click down below your texture somewhere else on the artboard, and choose the Type tool (T) and type something. I used “DIGITAL” for my example. I used a large font size, something like 60 or 72 pt, and chose the plain Arial Black, a font that’s free to use. I also switched my type color to blue in order to view this part of the operation more easily. Once you’ve typed your text, move this text onto the texture background and move it around until it is in a place where you feel the most texture will be applied.

Let’s have a look at what the text will look like once applied to our text by creating a clipping mask that uses the letters as a mask. Click Command+A (Mac) or Ctrl+A (PC) to select both the text and the texture, and choose Object>Clipping Mask>Make. Once you click again outside of your texture area, you’ll see the text revealed on its own, with the texture showing through it. In case you may not like how it looks at first, undo the clipping mask and move the text around to another area of the texture background and repeat this procedure again. Another option is to scale the texture background up or down or rotate it, distort it anyway you want that will help you achieve the texture on the text that looks how you want it. Here is what my text looked like:

For my purposes, this turned out exactly how I wanted it, a little distressed, but still clear and easy to distinguish the letters.

At this point, we want to delete some of the excess texture background, which we don’t need to keep, as it just is not needed, and makes the file size larger. First, we undo the clipping mask by clicking Edit>Undo Make Clipping Mask. Open the Layers palette and expand the layer by clicking on the arrow next to the Layer 1 thumbnail. Click on the texture Group layer to highlight it in the palette. Option+click (Mac) or Alt+click (PC) the Create New Layer icon, and name this layer “Square” in the Layer Option dialog, then click OK. This positions the new layer between the text and the texture.

Make sure the new layer called “Square” is highlighted or activated, and select the Rectangle tool (M) and draw a rectangle over the text and texture you want to keep. I suggest keeping the rectangle as close to the text as possible without clipping any of it. Click Command+A (Mac) or Control+A (PC) to select all. Open the Pathfinder palette (Window>Pathfinder) and click the Crop icon. See example:

What happens next, is a Live Paint Group, which is indicated by a grey rectangle around the artwork might appear after you click crop. If this occurs, just use your Selection tool and double click in an empty area of the artboard to disable it. Now you can safely reapply the clipping mask on your newly cropped artwork. Click Command+A (Mac) or Control+A (PC) to select your text and the texture, and then click Object>Clipping Mask>Make. Now you have a very unique piece of text that has a sort of ‘worn out’ or distressed appearance in your arsenal of special effect elements!

At this point you should File>Export and Save As a .jpg or other format file for use in your web designs. This can be opened in Photoshop now, and subjected to some more special effects if you so desire.

Wrapping Up

Although this is a simple enough procedure, it has a few specific steps, and may not be suitable for everyone wanting a text effect solution. This is offered as just one of the many options available to designers in search of interesting text treatments, and it also provides a nice opportunity for those not as comfortable using Adobe Illustrator to advance their creative skills in that program a bit!

I have always hated the previous, and next page links that most WordPress themes come with, as it doesn’t tell anything about which direction you will be going once you are off the front page.

Will previous bring me to where I was previous, or to even older posts? It has always been something that has annoyed me.

The tutorial on how to structure the xhtml and css of the navigation is really interesting for those of us building our own applications, but if you want to add such a navigation to your WordPress blog, you will want to check out WP-PageNavi, a WordPress plugin that adds the pagination navigation to your theme.

It is good for your users, and for search engines to pour through when indexing your site.

If you are developing your own web based application or website, please make sure you include pagination through your posts, data or other information and check out Woork and their Perfect Pagination post.

You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.

Like the one on the right here, using the following code:

Nice huh?

Well, it could be better. You see, using the align="right" floats the image to the right, but the vspace and hspace values are around the full image, which looks a little weird with the right side of the image not being in line with the content's right side.

Like so:

What you should do is use CSS to float your images instead. Add these classes to your stylesheet:

The margin will make sure that there's no space where it isn't needed, in other words, you won't get that nasty spacing problem like the one in the image above.

Use it like this:

While we're at it, why not add this to the stylesheet as well:

Now you can add the frame class to your images for a nice looking border around your images. So if we want to float an image to the right with a border, we'll do it like this:

Take a look to the right. There you have it, floating correctly and all, looking a lot better than the first one, right?

You know what the best part with this is? If you're a WordPress users, this is version 2.5 compliant code. They've finally switched to using CSS for aligning images, about time I'd say.

There you have it, easy handling of images, looking a little better, and being a lot more flexible should you want to change spacings, border colors and such.

At Northern Voice there were people that ranged from just starting out with blogging all the way up to blogging as a full time job. Some didn't know what tagging was, and others couldn't stand software that didn't allow them to use WordPress' native tagging.

It reminded me that the gap between those that are just starting out and those that understand every nook and cranny of the growing industry that is online media. I think far too many of us are concentrating on talking about the end result, instead of teaching others how to gracefully enter the different arenas they are interested in.

If you want to capture some attention online, some of the biggest questions at the event were:

• How do I change themes in WordPress? This includes changing header graphics, and sidebar items.
• How can I learn to theme WordPress?
• What are the best tools to monetize my blog?
• How do I use tools like Flickr, Stumble Upon, Youtube to improve my blog?
• I know PHP, but how do I make this into a WordPress plugin?
• Should I start a blog, or is it too late?

As a developer, designer and blogger, these different questions could make great posts that would appeal to the growing group of new bloggers looking to make their mark on the world. If we take a step back, and take the time to answer these questions, we could quickly become the resource used by bloggers looking to answer these questions.

Bringing large groups of people together, from a variety of skill sets and backgrounds was interesting, but I think it is the knowledge shared between everyone that was the most amazing part of the event.

What conferences have you attended, and what did you think of them? Let me know in the comments below.

AJ

Quickly though, like many, I realized that over use of Flash could be a bad thing, and basically tossed it aside. What I didn't realize at the time is how big of a role Flash was going take online as time progressed.

Now we watch Flash videos all the time, and people are quickly realizing once again how great, properly used Flash can be.

Flash still provides a much more immersive interface than other technologies currently available online, and can be used for a myriad of different things.

Recently, I was able to try out the 3DEnvironment component created by Flashloaded. Flashloaded is a company dedicated to providing the world with innovative and cost-effective Flash extensions and components. One thing that really excited me about the company was that it is based in Toronto, Ontario Canada, only two and a half hours drive from where I live and I am a sucker for Canadian companies.

The 3DEnvironment is a Flash component that makes it easier to create 3D interactive interfaces and environments in Flash.

For example, if you want to create layout tours for a building, allow visitors to fly through the solar system, or create a custom interactive navigational system, 3DEnvironment can help you easily achieve that goal. My favourite demonstration that they have on their site is the colour wheel as I could definitely see something like that used for a variety of applications.

Featuring fully customizable controls and full keyboard and mouse interactivity you can bring together graphics, or movie clip symbols to engage your audience in a new and interesting way. I have seen tutorials on how to create three dimensional effects before, but my limited skills with Flash or 3D modeling have always stopped me from creating anything worthwhile.

I have always then just given in and created a flat website without any flash at all. Trying to convey distances, object size comparisons, and even just simple landscaping, and building layouts is much more difficult with text, and some images. I could definitely see this useful in a variety of different corporate projects as well as smaller freelance projects.

The best thing that any developer or designer can do is find ways to create something without re-inventing the wheel each time, and the 3DEnvironment component from Flashloaded will save you time and energy when developing such environments and interfaces with Flash.

Features

• Create realistic 3D environments with depth and perspective
• Build unique interactive interfaces
• Custom keyboard controls for users to navigate around the 3D environment
• Mouse wheel support for navigation
• Move objects in the environment with built-in tweening and customizable tween duration
• Rotate the world around all three axes (x, y and z)
• Camera controls for panning and zooming to change the perspective on the environment
• Add objects through an intuitive user interface, external XML file or using flexible ActionScript controls
• Built-in preloader for loading external files.
• Use any movie clip in your library to display in your 3D environment
• Full ActionScript API - including the ability to move the camera through ActionScript
• Only 15Kb

Requirements
As with any Flash development, you will need to have one of the following to use 3DEnvironment: Macromedia Flash MX 2004, Flash 8 (standard or professional) or Adobe Flash CS3 for authoring (Windows or Mac). Movies using this component may be published for either Flash Player 7, 8 or 9, ActionScript 2.0.

How Much is 3DEnvironment?
Of course the question that all developers and designers ask themselves when coming on anything that is supposed to save them time is, how much money will it cost? Flashloaded lists 3DEnvironment for $59.95 on their site, and at first I wondered if I could find equivalent value for such a product? After viewing the examples on their site and trying out the component myself, I have to give a resounding “yes”.

The time it would take me to build even one of the examples on my own in Flash would take me longer than a couple hours, and even at a cheap development rate, 3DEnvironment by comparison becomes a value. Also note that the license allows you to use the product to generate content for as many sites as you want.

I really wish I had this product when I was working on a product for a house builder, as it would have been very useful to show off the open plots of land, give a quick way for clients to see what houses are already up and for sale, and creating an interactive, easy to use, user experience.

If you are constantly spending too much time building three dimensional environments and user interfaces in Flash, 3DEnvironments could save you time and energy, allowing you to focus on the finer details. Now if only there was something to make me a better graphic designer...

Lots of people have still yet to find the ideal text editor, and sometimes it's just hard to find.

However, while I can use the excellent VMware Fusion software to run a virtual Windows machine on my Mac - something I do for testing purposes - I feel that using virtualization to get my text editor of choice is a bit of an overkill, don't you think?

So I went looking for the perfect Mac editor, landed briefly on an opensource one called Smultron, and then I found it.

Coda.

I already used Panic's excellent FTP program Transmit, so giving Coda a go wasn't a big decision. And boy does it do it for me! I've got lots of syntax options, I can upload files from within the editor, there's a clip library that can be edited, "sites" let me manage my projects easily enough...

In short, Coda is great. I love it.

This isn't a review of this editor, though, but rather a shoutout to the magnificent Devlounge readers. Lots of people have still yet to find the ideal text editor, and sometimes it's just hard to find it.

So please make good use of the comments and tell us a little bit of the text editor of your choice. Hopefully we'll be able to do a follow-up on this, highlighting some of the best ones out there.